bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
257 lines (256 loc) • 9.92 kB
JavaScript
import { t as useDefaults } from "./useDefaults-BKgBaqOV.mjs";
import { t as useId$1 } from "./useId-BKZFSYm8.mjs";
import { t as useRtl } from "./useRtl-DpwU_RM8.mjs";
import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel } from "vue";
//#region src/components/BFormRating/BFormRating.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = [
"id",
"dir",
"form",
"aria-valuemax",
"aria-valuenow",
"aria-valuetext",
"aria-disabled",
"aria-readonly",
"tabindex"
];
var _hoisted_2 = [
"name",
"form",
"value"
];
var _hoisted_3 = ["onClick"];
var _hoisted_4 = { class: "b-form-rating-star" };
var _hoisted_5 = ["width", "height"];
var _hoisted_6 = {
key: 0,
d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
};
var _hoisted_7 = {
key: 1,
d: "M5.354 5.119 7.538.792A.52.52 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.54.54 0 0 1 16 6.32a.55.55 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.5.5 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.6.6 0 0 1 .085-.302.51.51 0 0 1 .37-.245zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.56.56 0 0 1 .162-.505l2.907-2.77-4.052-.576a.53.53 0 0 1-.393-.288L8.001 2.223 8 2.226z"
};
var _hoisted_8 = {
key: 2,
d: "M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.522 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"
};
//#endregion
//#region src/components/BFormRating/BFormRating.vue
var BFormRating_default = /* @__PURE__ */ defineComponent({
__name: "BFormRating",
props: /* @__PURE__ */ mergeModels({
color: { default: "" },
id: { default: void 0 },
inline: {
type: Boolean,
default: false
},
locale: { default: void 0 },
noBorder: {
type: Boolean,
default: false
},
precision: { default: 0 },
readonly: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
form: { default: void 0 },
name: { default: void 0 },
showClear: {
type: Boolean,
default: false
},
showValue: {
type: Boolean,
default: false
},
showValueMax: {
type: Boolean,
default: false
},
size: { default: "1rem" },
stars: { default: 5 },
variant: { default: void 0 }
}, {
"modelValue": { default: 0 },
"modelModifiers": {}
}),
emits: ["update:modelValue"],
setup(__props, { expose: __expose }) {
const props = useDefaults(__props, "BFormRating");
const modelValue = useModel(__props, "modelValue");
const computedId = useId$1(() => props.id, "form-rating");
const { isRtl, locale: globalLocale } = useRtl();
const computedLocale = computed(() => {
const loc = (props.locale ?? globalLocale?.value) || void 0;
return new Intl.NumberFormat(loc).resolvedOptions().locale;
});
const computedRtl = computed(() => {
const locale = computedLocale.value;
try {
const { textInfo } = new Intl.Locale(locale);
if (textInfo) return textInfo.direction === "rtl";
} catch {}
return isRtl?.value ?? false;
});
const computedClasses = computed(() => ({
"form-control": true,
"is-readonly": props.readonly,
"is-disabled": props.disabled,
"no-border": props.noBorder,
"b-form-rating": true,
"d-inline-flex": props.inline
}));
function isIconFull(index) {
return displayValue.value - index >= 1;
}
function isIconHalf(index) {
const diff = displayValue.value - index;
return diff >= .5 && diff < 1;
}
const hoverValue = ref(null);
const displayValue = computed(() => hoverValue.value !== null ? hoverValue.value : modelValue.value);
const clampedStars = computed(() => Math.max(3, props.stars));
const computedSize = computed(() => {
if (props.size === "sm") return ".875rem";
if (props.size === "lg") return "1.25rem";
return props.size;
});
const computedFormatter = computed(() => new Intl.NumberFormat(computedLocale.value, {
style: "decimal",
useGrouping: false,
minimumFractionDigits: props.precision > 0 ? props.precision : 0,
maximumFractionDigits: props.precision > 0 ? props.precision : 0,
notation: "standard"
}));
const displayValueText = computed(() => {
const val = props.precision > 0 ? roundedValue.value : displayValue.value;
const formattedValue = computedFormatter.value.format(val);
if (props.showValueMax) return `${formattedValue}/${computedFormatter.value.format(clampedStars.value)}`;
if (props.showValue) return formattedValue;
return "";
});
const roundedValue = computed(() => {
const val = displayValue.value;
const factor = 10 ** props.precision;
return Math.round((val + Number.EPSILON) * factor) / factor;
});
const iconColors = computed(() => Array.from({ length: clampedStars.value }, () => {
if (props.disabled) return {
class: "is-disabled",
style: {}
};
if (props.variant) return {
class: `text-${props.variant}`,
style: {}
};
if (props.color) return {
class: "",
style: { color: props.color }
};
return {
class: "",
style: {}
};
}));
function onKeydown(e) {
if (props.readonly || props.disabled) return;
let newValue = modelValue.value;
const isRtlMode = computedRtl.value;
switch (e.key) {
case "ArrowRight":
newValue = isRtlMode ? Math.max(newValue - 1, 0) : Math.min(newValue + 1, clampedStars.value);
break;
case "ArrowUp":
newValue = Math.min(newValue + 1, clampedStars.value);
break;
case "ArrowLeft":
newValue = isRtlMode ? Math.min(newValue + 1, clampedStars.value) : Math.max(newValue - 1, 0);
break;
case "ArrowDown":
newValue = Math.max(newValue - 1, 0);
break;
default: return;
}
e.preventDefault();
modelValue.value = newValue;
}
function selectRating(starIndex) {
if (props.readonly || props.disabled) return;
modelValue.value = hoverValue.value !== null ? hoverValue.value : starIndex;
}
function clearRating() {
hoverValue.value = null;
modelValue.value = 0;
}
__expose({ hoverValue });
return (_ctx, _cache) => {
return openBlock(), createElementBlock("output", {
id: unref(computedId),
class: normalizeClass(computedClasses.value),
dir: computedRtl.value ? "rtl" : "ltr",
form: unref(props).form ? unref(props).form : void 0,
role: "slider",
"aria-valuemin": 0,
"aria-valuemax": clampedStars.value,
"aria-valuenow": displayValue.value,
"aria-valuetext": `${displayValue.value} of ${clampedStars.value}`,
"aria-disabled": unref(props).disabled ? true : void 0,
"aria-readonly": unref(props).readonly ? true : void 0,
tabindex: unref(props).disabled ? void 0 : "0",
onKeydown
}, [
unref(props).name && !unref(props).disabled ? (openBlock(), createElementBlock("input", {
key: "hidden",
type: "hidden",
name: unref(props).name,
form: unref(props).form,
value: modelValue.value
}, null, 8, _hoisted_2)) : createCommentVNode("", true),
unref(props).showClear && !unref(props).readonly && !unref(props).disabled ? (openBlock(), createElementBlock("span", {
key: 1,
class: "clear-button-spacing",
onClick: clearRating
}, [renderSlot(_ctx.$slots, "icon-clear", {}, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {
viewBox: "0 0 16 16",
role: "img",
"aria-label": "x",
xmlns: "http://www.w3.org/2000/svg",
class: "clear-icon"
}, [createElementVNode("g", null, [createElementVNode("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" })])], -1))])])) : createCommentVNode("", true),
(openBlock(true), createElementBlock(Fragment, null, renderList(clampedStars.value, (starIndex, index) => {
return openBlock(), createElementBlock("span", {
key: starIndex,
class: "star",
onClick: ($event) => selectRating(starIndex)
}, [renderSlot(_ctx.$slots, "default", {
starIndex,
isFilled: isIconFull(index),
isHalf: isIconHalf(index)
}, () => [createElementVNode("span", _hoisted_4, [(openBlock(), createElementBlock("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: computedSize.value,
height: computedSize.value,
fill: "currentColor",
class: normalizeClass([[iconColors.value[index]?.class], "star-spacing"]),
style: normalizeStyle(iconColors.value[index]?.style),
viewBox: "0 0 16 16"
}, [isIconFull(index) ? (openBlock(), createElementBlock("path", _hoisted_6)) : isIconHalf(index) ? (openBlock(), createElementBlock("path", _hoisted_7)) : (openBlock(), createElementBlock("path", _hoisted_8))], 14, _hoisted_5))])])], 8, _hoisted_3);
}), 128)),
unref(props).showValue || unref(props).showValueMax ? (openBlock(), createElementBlock("span", {
key: 2,
style: normalizeStyle({ fontSize: computedSize.value }),
class: "rating-value-text"
}, toDisplayString(displayValueText.value), 5)) : createCommentVNode("", true)
], 42, _hoisted_1);
};
}
});
//#endregion
export { BFormRating_default as t };
//# sourceMappingURL=BFormRating-Bb_ACp-9.mjs.map