bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
297 lines (296 loc) • 10.4 kB
JavaScript
import { d as formGroupKey, f as formSelectKey } from "./keys-CQKrwmvN.mjs";
import { h as useFocus, z as useToNumber } from "./dist-B10a-gZ8.mjs";
import { t as useDefaults } from "./useDefaults-BKgBaqOV.mjs";
import { t as useId$1 } from "./useId-BKZFSYm8.mjs";
import { t as useStateClass } from "./useStateClass-CdmlbrGn.mjs";
import { t as useAriaInvalid } from "./useAriaInvalid-apOwgexm.mjs";
import { t as useFormSelect } from "./useFormSelect-D3gVO4jJ.mjs";
import { t as BFormSelectOption_default } from "./BFormSelectOption-O8cyyv3i.mjs";
import { Fragment, computed, createBlock, createElementBlock, createTextVNode, defineComponent, guardReactiveProps, inject, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, provide, readonly, renderList, renderSlot, toDisplayString, unref, useModel, useTemplateRef, vModelSelect, withCtx, withDirectives } from "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__ */ defineComponent({
__name: "BFormSelectOptionGroup",
props: {
disabledField: { default: "disabled" },
label: { default: void 0 },
options: { default: () => [] },
textField: { default: "text" },
valueField: { default: "value" }
},
setup(__props) {
const props = useDefaults(__props, "BFormSelectOptionGroup");
const { normalizedOptions } = useFormSelect(() => props.options, props);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("optgroup", { label: unref(props).label }, [
renderSlot(_ctx.$slots, "first"),
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(normalizedOptions), (option, index) => {
return openBlock(), createBlock(BFormSelectOption_default, mergeProps({ key: index }, { ref_for: true }, {
..._ctx.$attrs,
...option
}), {
default: withCtx(() => [renderSlot(_ctx.$slots, "option", mergeProps({ ref_for: true }, option), () => [createTextVNode(toDisplayString(option.text), 1)])]),
_: 2
}, 1040);
}), 128)),
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__ */ defineComponent({
__name: "BFormSelectBase",
props: /* @__PURE__ */ 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 = useDefaults(__props, "BFormSelect");
const modelValue = useModel(__props, "modelValue");
const computedId = useId$1(() => props.id, "input");
const formGroupData = inject(formGroupKey, null)?.(computedId);
const isDisabled = computed(() => props.disabled || (formGroupData?.disabled.value ?? false));
const selectSizeNumber = useToNumber(() => props.selectSize);
const stateClass = useStateClass(() => props.state);
const input = useTemplateRef("_input");
const { focused } = useFocus(input, { initialValue: props.autofocus });
const computedClasses = 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 = computed(() => !props.plain && selectSizeNumber.value > 0 ? selectSizeNumber.value : void 0);
const computedAriaInvalid = useAriaInvalid(() => props.ariaInvalid, () => props.state);
const { normalizedOptions, isComplex } = useFormSelect(() => props.options, props);
const normalizedOptsWrapper = computed(() => normalizedOptions.value);
const localValue = computed({
get: () => modelValue.value,
set: (newValue) => {
modelValue.value = newValue;
}
});
provide(formSelectKey, { modelValue: readonly(localValue) });
__expose({
blur: () => {
focused.value = false;
},
element: input,
focus: () => {
focused.value = true;
}
});
return (_ctx, _cache) => {
return withDirectives((openBlock(), createElementBlock("select", {
id: unref(computedId),
ref: "_input",
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localValue.value = $event),
class: normalizeClass(computedClasses.value),
name: unref(props).name,
form: unref(props).form || void 0,
multiple: unref(props).multiple || void 0,
size: computedSelectSize.value,
disabled: isDisabled.value,
required: unref(props).required || void 0,
"aria-required": unref(props).required || void 0,
"aria-invalid": unref(computedAriaInvalid)
}, [
renderSlot(_ctx.$slots, "first"),
(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptsWrapper.value, (option, index) => {
return openBlock(), createElementBlock(Fragment, { key: index }, [unref(isComplex)(option) ? (openBlock(), createBlock(BFormSelectOptionGroup_default, {
key: 0,
label: option.label,
options: option.options,
"value-field": unref(props).valueField,
"text-field": unref(props).textField,
"disabled-field": unref(props).disabledField
}, null, 8, [
"label",
"options",
"value-field",
"text-field",
"disabled-field"
])) : (openBlock(), createBlock(BFormSelectOption_default, mergeProps({
key: 1,
ref_for: true
}, option), {
default: withCtx(() => [renderSlot(_ctx.$slots, "option", mergeProps({ ref_for: true }, option), () => [createTextVNode(toDisplayString(option.text), 1)])]),
_: 2
}, 1040))], 64);
}), 128)),
renderSlot(_ctx.$slots, "default")
], 10, _hoisted_1)), [[vModelSelect, localValue.value]]);
};
}
});
//#endregion
//#region src/components/BFormSelect/BFormSelect.vue
var BFormSelect_default = /* @__PURE__ */ defineComponent({
__name: "BFormSelect",
props: /* @__PURE__ */ 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 = 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 = 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 = 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 openBlock(), createBlock(BFormSelectBase_default, mergeProps(forwardedProps.value, {
modelValue: modelValue.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
options: normalizedOptions.value
}), {
first: withCtx(() => [renderSlot(_ctx.$slots, "first")]),
option: withCtx((slotProps) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(slotProps)))]),
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 16, ["modelValue", "options"]);
};
}
});
//#endregion
export { BFormSelectOptionGroup_default as n, BFormSelect_default as t };
//# sourceMappingURL=BFormSelect-Bb8yE8vz.mjs.map