bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
263 lines (262 loc) • 10.5 kB
JavaScript
require("./chunk-CoQrYLCe.js");
const require_useId = require("./useId-DTrBK9CE.js");
const require_useDefaults = require("./useDefaults-DK6Y9lar.js");
const require_useRtl = require("./useRtl-BlPLBmTe.js");
let vue = require("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__ */ (0, vue.defineComponent)({
__name: "BFormRating",
props: /* @__PURE__ */ (0, vue.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 = require_useDefaults.useDefaults(__props, "BFormRating");
const modelValue = (0, vue.useModel)(__props, "modelValue");
const computedId = require_useId.useId(() => props.id, "form-rating");
const { isRtl, locale: globalLocale } = require_useRtl.useRtl();
const computedLocale = (0, vue.computed)(() => {
const loc = (props.locale ?? globalLocale?.value) || void 0;
return new Intl.NumberFormat(loc).resolvedOptions().locale;
});
const computedRtl = (0, vue.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 = (0, vue.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 = (0, vue.ref)(null);
const displayValue = (0, vue.computed)(() => hoverValue.value !== null ? hoverValue.value : modelValue.value);
const clampedStars = (0, vue.computed)(() => Math.max(3, props.stars));
const computedSize = (0, vue.computed)(() => {
if (props.size === "sm") return ".875rem";
if (props.size === "lg") return "1.25rem";
return props.size;
});
const computedFormatter = (0, vue.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 = (0, vue.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 = (0, vue.computed)(() => {
const val = displayValue.value;
const factor = 10 ** props.precision;
return Math.round((val + Number.EPSILON) * factor) / factor;
});
const iconColors = (0, vue.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 (0, vue.openBlock)(), (0, vue.createElementBlock)("output", {
id: (0, vue.unref)(computedId),
class: (0, vue.normalizeClass)(computedClasses.value),
dir: computedRtl.value ? "rtl" : "ltr",
form: (0, vue.unref)(props).form ? (0, vue.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": (0, vue.unref)(props).disabled ? true : void 0,
"aria-readonly": (0, vue.unref)(props).readonly ? true : void 0,
tabindex: (0, vue.unref)(props).disabled ? void 0 : "0",
onKeydown
}, [
(0, vue.unref)(props).name && !(0, vue.unref)(props).disabled ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("input", {
key: "hidden",
type: "hidden",
name: (0, vue.unref)(props).name,
form: (0, vue.unref)(props).form,
value: modelValue.value
}, null, 8, _hoisted_2)) : (0, vue.createCommentVNode)("", true),
(0, vue.unref)(props).showClear && !(0, vue.unref)(props).readonly && !(0, vue.unref)(props).disabled ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
key: 1,
class: "clear-button-spacing",
onClick: clearRating
}, [(0, vue.renderSlot)(_ctx.$slots, "icon-clear", {}, () => [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("svg", {
viewBox: "0 0 16 16",
role: "img",
"aria-label": "x",
xmlns: "http://www.w3.org/2000/svg",
class: "clear-icon"
}, [(0, vue.createElementVNode)("g", null, [(0, vue.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))])])) : (0, vue.createCommentVNode)("", true),
((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(clampedStars.value, (starIndex, index) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
key: starIndex,
class: "star",
onClick: ($event) => selectRating(starIndex)
}, [(0, vue.renderSlot)(_ctx.$slots, "default", {
starIndex,
isFilled: isIconFull(index),
isHalf: isIconHalf(index)
}, () => [(0, vue.createElementVNode)("span", _hoisted_4, [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: computedSize.value,
height: computedSize.value,
fill: "currentColor",
class: (0, vue.normalizeClass)([[iconColors.value[index]?.class], "star-spacing"]),
style: (0, vue.normalizeStyle)(iconColors.value[index]?.style),
viewBox: "0 0 16 16"
}, [isIconFull(index) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("path", _hoisted_6)) : isIconHalf(index) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("path", _hoisted_7)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("path", _hoisted_8))], 14, _hoisted_5))])])], 8, _hoisted_3);
}), 128)),
(0, vue.unref)(props).showValue || (0, vue.unref)(props).showValueMax ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
key: 2,
style: (0, vue.normalizeStyle)({ fontSize: computedSize.value }),
class: "rating-value-text"
}, (0, vue.toDisplayString)(displayValueText.value), 5)) : (0, vue.createCommentVNode)("", true)
], 42, _hoisted_1);
};
}
});
//#endregion
Object.defineProperty(exports, "BFormRating_default", {
enumerable: true,
get: function() {
return BFormRating_default;
}
});
//# sourceMappingURL=BFormRating-_MVRGNOF.js.map