bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
309 lines (308 loc) • 11.3 kB
JavaScript
require("./chunk-CoQrYLCe.js");
const require_keys = require("./keys-durSVUrO.js");
const require_dist = require("./dist-BJ15ThEs.js");
const require_useDefaults = require("./useDefaults-DsLf4iRY.js");
const require_useId = require("./useId-DHrBgM7P.js");
const require_useStateClass = require("./useStateClass-CJ24hpkn.js");
const require_useAriaInvalid = require("./useAriaInvalid-CHHPHNLU.js");
const require_useFormSelect = require("./useFormSelect-CiIMUolC.js");
const require_BFormSelectOption = require("./BFormSelectOption-BY4P8HOf.js");
let vue = require("vue");
//#region src/components/BFormSelect/BFormSelectOptionGroup.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1$1 = ["label"];
//#endregion
//#region src/components/BFormSelect/BFormSelectOptionGroup.vue
var BFormSelectOptionGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "BFormSelectOptionGroup",
props: {
disabledField: { default: "disabled" },
label: { default: void 0 },
options: { default: () => [] },
textField: { default: "text" },
valueField: { default: "value" }
},
setup(__props) {
const props = require_useDefaults.useDefaults(__props, "BFormSelectOptionGroup");
const { normalizedOptions } = require_useFormSelect.useFormSelect(() => props.options, props);
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("optgroup", { label: (0, vue.unref)(props).label }, [
(0, vue.renderSlot)(_ctx.$slots, "first"),
((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(normalizedOptions), (option, index) => {
return (0, vue.openBlock)(), (0, vue.createBlock)(require_BFormSelectOption.BFormSelectOption_default, (0, vue.mergeProps)({ key: index }, { ref_for: true }, {
..._ctx.$attrs,
...option
}), {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "option", (0, vue.mergeProps)({ ref_for: true }, option), () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(option.text), 1)])]),
_: 2
}, 1040);
}), 128)),
(0, vue.renderSlot)(_ctx.$slots, "default")
], 8, _hoisted_1$1);
};
}
});
//#endregion
//#region src/components/BFormSelect/BFormSelectBase.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = [
"id",
"name",
"form",
"multiple",
"size",
"disabled",
"required",
"aria-required",
"aria-invalid"
];
//#endregion
//#region src/components/BFormSelect/BFormSelectBase.vue
var BFormSelectBase_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "BFormSelectBase",
props: /* @__PURE__ */ (0, vue.mergeModels)({
ariaInvalid: {
type: [Boolean, String],
default: void 0
},
autofocus: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
disabledField: { default: "disabled" },
form: { default: void 0 },
id: { default: void 0 },
labelField: { default: "label" },
multiple: {
type: Boolean,
default: false
},
name: { default: void 0 },
options: { default: () => [] },
optionsField: { default: "options" },
plain: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
},
selectSize: { default: 0 },
size: { default: "md" },
state: {
type: [Boolean, null],
default: null
},
textField: { default: "text" },
valueField: { default: "value" }
}, {
"modelValue": { default: "" },
"modelModifiers": {}
}),
emits: ["update:modelValue"],
setup(__props, { expose: __expose }) {
const props = require_useDefaults.useDefaults(__props, "BFormSelect");
const modelValue = (0, vue.useModel)(__props, "modelValue");
const computedId = require_useId.useId(() => props.id, "input");
const formGroupData = (0, vue.inject)(require_keys.formGroupKey, null)?.(computedId);
const isDisabled = (0, vue.computed)(() => props.disabled || (formGroupData?.disabled.value ?? false));
const selectSizeNumber = require_dist.useToNumber(() => props.selectSize);
const stateClass = require_useStateClass.useStateClass(() => props.state);
const input = (0, vue.useTemplateRef)("_input");
const { focused } = require_dist.useFocus(input, { initialValue: props.autofocus });
const computedClasses = (0, vue.computed)(() => [stateClass.value, {
"form-control": props.plain,
[`form-control-${props.size}`]: props.size !== "md" && props.plain,
"form-select": !props.plain,
[`form-select-${props.size}`]: props.size !== "md" && !props.plain
}]);
const computedSelectSize = (0, vue.computed)(() => !props.plain && selectSizeNumber.value > 0 ? selectSizeNumber.value : void 0);
const computedAriaInvalid = require_useAriaInvalid.useAriaInvalid(() => props.ariaInvalid, () => props.state);
const { normalizedOptions, isComplex } = require_useFormSelect.useFormSelect(() => props.options, props);
const normalizedOptsWrapper = (0, vue.computed)(() => normalizedOptions.value);
const localValue = (0, vue.computed)({
get: () => modelValue.value,
set: (newValue) => {
modelValue.value = newValue;
}
});
(0, vue.provide)(require_keys.formSelectKey, { modelValue: (0, vue.readonly)(localValue) });
__expose({
blur: () => {
focused.value = false;
},
element: input,
focus: () => {
focused.value = true;
}
});
return (_ctx, _cache) => {
return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("select", {
id: (0, vue.unref)(computedId),
ref: "_input",
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localValue.value = $event),
class: (0, vue.normalizeClass)(computedClasses.value),
name: (0, vue.unref)(props).name,
form: (0, vue.unref)(props).form || void 0,
multiple: (0, vue.unref)(props).multiple || void 0,
size: computedSelectSize.value,
disabled: isDisabled.value,
required: (0, vue.unref)(props).required || void 0,
"aria-required": (0, vue.unref)(props).required || void 0,
"aria-invalid": (0, vue.unref)(computedAriaInvalid)
}, [
(0, vue.renderSlot)(_ctx.$slots, "first"),
((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(normalizedOptsWrapper.value, (option, index) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: index }, [(0, vue.unref)(isComplex)(option) ? ((0, vue.openBlock)(), (0, vue.createBlock)(BFormSelectOptionGroup_default, {
key: 0,
label: option.label,
options: option.options,
"value-field": (0, vue.unref)(props).valueField,
"text-field": (0, vue.unref)(props).textField,
"disabled-field": (0, vue.unref)(props).disabledField
}, null, 8, [
"label",
"options",
"value-field",
"text-field",
"disabled-field"
])) : ((0, vue.openBlock)(), (0, vue.createBlock)(require_BFormSelectOption.BFormSelectOption_default, (0, vue.mergeProps)({
key: 1,
ref_for: true
}, option), {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "option", (0, vue.mergeProps)({ ref_for: true }, option), () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(option.text), 1)])]),
_: 2
}, 1040))], 64);
}), 128)),
(0, vue.renderSlot)(_ctx.$slots, "default")
], 10, _hoisted_1)), [[vue.vModelSelect, localValue.value]]);
};
}
});
//#endregion
//#region src/components/BFormSelect/BFormSelect.vue
var BFormSelect_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "BFormSelect",
props: /* @__PURE__ */ (0, vue.mergeModels)({
ariaInvalid: {
type: [Boolean, String],
default: void 0
},
autofocus: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
disabledField: { default: "disabled" },
form: { default: void 0 },
id: { default: void 0 },
labelField: { default: "label" },
multiple: {
type: Boolean,
default: false
},
name: { default: void 0 },
options: { default: () => [] },
optionsField: { default: "options" },
plain: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
},
selectSize: { default: 0 },
size: { default: "md" },
state: {
type: [Boolean, null],
default: null
},
textField: { default: "text" },
valueField: { default: "value" }
}, {
"modelValue": { default: "" },
"modelModifiers": {}
}),
emits: ["update:modelValue"],
setup(__props) {
const props = __props;
const modelValue = (0, vue.useModel)(__props, "modelValue");
const normalizeSimpleOption = (el) => ({
...el,
value: el[props.valueField],
text: el[props.textField] ?? "",
disabled: el[props.disabledField] ?? false
});
const normalizePrimitive = (el) => ({
value: el,
text: String(el),
disabled: false
});
const normalizedOptions = (0, vue.computed)(() => {
const optionsArray = props.options ?? [];
if (optionsArray.some((el) => typeof el !== "string" && typeof el !== "number" && typeof el !== "boolean" && el[props.optionsField] !== void 0)) return optionsArray.map((el) => {
if (typeof el === "string" || typeof el === "number" || typeof el === "boolean") return normalizePrimitive(el);
const optionsField = el[props.optionsField];
if (optionsField !== void 0 && Array.isArray(optionsField)) return {
label: el[props.labelField] ?? el[props.textField] ?? "",
options: optionsField.map((subOpt) => {
if (typeof subOpt === "string" || typeof subOpt === "number" || typeof subOpt === "boolean") return normalizePrimitive(subOpt);
return normalizeSimpleOption(subOpt);
})
};
return normalizeSimpleOption(el);
});
return optionsArray.map((el) => {
if (typeof el === "string" || typeof el === "number" || typeof el === "boolean") return normalizePrimitive(el);
return normalizeSimpleOption(el);
});
});
const forwardedProps = (0, vue.computed)(() => ({
ariaInvalid: props.ariaInvalid,
autofocus: props.autofocus,
disabled: props.disabled,
form: props.form,
id: props.id,
multiple: props.multiple,
name: props.name,
plain: props.plain,
required: props.required,
selectSize: props.selectSize,
size: props.size,
state: props.state
}));
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createBlock)(BFormSelectBase_default, (0, vue.mergeProps)(forwardedProps.value, {
modelValue: modelValue.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
options: normalizedOptions.value
}), {
first: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "first")]),
option: (0, vue.withCtx)((slotProps) => [(0, vue.renderSlot)(_ctx.$slots, "option", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(slotProps)))]),
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 16, ["modelValue", "options"]);
};
}
});
//#endregion
Object.defineProperty(exports, "BFormSelectOptionGroup_default", {
enumerable: true,
get: function() {
return BFormSelectOptionGroup_default;
}
});
Object.defineProperty(exports, "BFormSelect_default", {
enumerable: true,
get: function() {
return BFormSelect_default;
}
});
//# sourceMappingURL=BFormSelect-DIKVsG--.js.map