bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
474 lines (473 loc) • 14.2 kB
JavaScript
import { d as formGroupKey, s as checkboxGroupKey } from "./keys-CQKrwmvN.mjs";
import { h as useFocus } from "./dist-Dn5blevd.mjs";
import { o as isEmptySlot } from "./dom-AhkaSoh8.mjs";
import { t as useId$1 } from "./useId-CCwnEmGh.mjs";
import { t as useDefaults } from "./useDefaults-CCWS15M8.mjs";
import { t as ConditionalWrapper_default } from "./ConditionalWrapper-BR9CKZNU.mjs";
import { a as getLabelClasses, i as getInputClasses, n as getGroupAttr, r as getGroupClasses, t as getClasses } from "./useFormCheck-TOhpqkZ9.mjs";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, inject, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, provide, renderList, renderSlot, toDisplayString, toRef, unref, useAttrs, useModel, useSlots, useTemplateRef, vModelCheckbox, withCtx, withDirectives } from "vue";
//#region src/components/BFormCheckbox/BFormCheckbox.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1$1 = [
"id",
"disabled",
"required",
"name",
"form",
"aria-label",
"aria-labelledby",
"aria-required",
"value",
"true-value",
"false-value",
"indeterminate"
];
var _hoisted_2 = ["for"];
//#endregion
//#region src/components/BFormCheckbox/BFormCheckbox.vue
var BFormCheckbox_default = /* @__PURE__ */ defineComponent({
inheritAttrs: false,
__name: "BFormCheckbox",
props: /* @__PURE__ */ mergeModels({
ariaLabel: { default: void 0 },
ariaLabelledby: { default: void 0 },
autofocus: {
type: Boolean,
default: false
},
button: {
type: Boolean,
default: void 0
},
buttonGroup: {
type: Boolean,
default: false
},
buttonVariant: { default: void 0 },
disabled: {
type: Boolean,
default: false
},
form: { default: void 0 },
id: { default: void 0 },
inline: {
type: Boolean,
default: void 0
},
name: { default: void 0 },
plain: {
type: Boolean,
default: void 0
},
required: {
type: Boolean,
default: false
},
reverse: {
type: Boolean,
default: void 0
},
size: { default: void 0 },
state: {
type: [Boolean, null],
default: void 0
},
switch: {
type: Boolean,
default: void 0
},
uncheckedValue: {
type: [
Array,
Set,
String,
Boolean,
Object,
Number,
null
],
default: false
},
wrapperAttrs: { default: void 0 },
inputClass: { default: void 0 },
value: {
type: [
String,
Boolean,
Array,
Set,
Object,
Number,
null
],
default: true
}
}, {
"modelValue": {
type: [
Array,
Set,
String,
Boolean,
Object,
Number,
null
],
default: void 0
},
"modelModifiers": {},
"indeterminate": {
type: Boolean,
default: false
},
"indeterminateModifiers": {}
}),
emits: ["update:modelValue", "update:indeterminate"],
setup(__props, { expose: __expose }) {
const props = useDefaults(__props, "BFormCheckbox");
const slots = useSlots();
const attrs = useAttrs();
const modelValue = useModel(__props, "modelValue");
const indeterminate = useModel(__props, "indeterminate");
const processedAttrs = computed(() => {
const { class: wrapperClass, ...inputAttrs } = attrs;
return {
wrapperClass,
inputAttrs
};
});
const computedId = useId$1(() => props.id, "form-check");
const parentData = inject(checkboxGroupKey, null);
const formGroupData = inject(formGroupKey, null)?.(computedId);
const input = useTemplateRef("_input");
const { focused } = useFocus(input, { initialValue: props.autofocus });
const hasDefaultSlot = computed(() => !isEmptySlot(slots.default));
const propDefaults = {
plain: false,
button: false,
inline: false,
reverse: false,
switch: false,
size: "md",
buttonVariant: "secondary",
state: null
};
const resolvedProps = computed(() => ({
plain: props.plain ?? parentData?.plain.value ?? propDefaults.plain,
button: props.button ?? parentData?.buttons.value ?? propDefaults.button,
inline: props.inline ?? parentData?.inline.value ?? propDefaults.inline,
reverse: props.reverse ?? parentData?.reverse.value ?? propDefaults.reverse,
switch: props.switch ?? parentData?.switch.value ?? propDefaults.switch,
state: props.state ?? parentData?.state.value ?? propDefaults.state,
size: props.size ?? parentData?.size.value ?? propDefaults.size,
buttonVariant: props.buttonVariant ?? parentData?.buttonVariant.value ?? propDefaults.buttonVariant
}));
const resolvedPlain = computed(() => resolvedProps.value.plain);
const localValue = computed({
get: () => parentData ? parentData.modelValue.value : modelValue.value,
set: (newVal) => {
if (newVal === void 0) return;
indeterminate.value = false;
if (parentData !== null && Array.isArray(newVal)) {
parentData.modelValue.value = newVal;
return;
}
modelValue.value = newVal;
}
});
const computedRequired = computed(() => !!(props.name ?? parentData?.name.value) && (props.required || parentData?.required.value));
const isButtonGroup = computed(() => props.buttonGroup || (parentData?.buttons.value ?? false));
const classesObject = computed(() => ({
...resolvedProps.value,
hasDefaultSlot: hasDefaultSlot.value
}));
const wrapperClasses = getClasses(classesObject);
const computedWrapperClasses = computed(() => [wrapperClasses.value, processedAttrs.value.wrapperClass]);
const inputClasses = getInputClasses(classesObject);
const computedInputClasses = computed(() => [inputClasses.value, props.inputClass]);
const labelClasses = getLabelClasses(classesObject);
__expose({
blur: () => {
focused.value = false;
},
element: input,
focus: () => {
focused.value = true;
}
});
return (_ctx, _cache) => {
return openBlock(), createBlock(ConditionalWrapper_default, mergeProps({ skip: isButtonGroup.value }, unref(props).wrapperAttrs, { class: computedWrapperClasses.value }), {
default: withCtx(() => [withDirectives(createElementVNode("input", mergeProps({
id: unref(computedId),
ref: "_input",
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localValue.value = $event),
class: computedInputClasses.value,
type: "checkbox",
disabled: unref(props).disabled || unref(parentData)?.disabled.value || unref(formGroupData)?.disabled.value,
required: computedRequired.value || void 0,
name: unref(props).name || unref(parentData)?.name.value,
form: unref(props).form || unref(parentData)?.form.value,
"aria-label": unref(props).ariaLabel,
"aria-labelledby": unref(props).ariaLabelledby,
"aria-required": computedRequired.value || void 0,
value: unref(props).value,
"true-value": unref(props).value,
"false-value": unref(props).uncheckedValue,
indeterminate: indeterminate.value || void 0
}, processedAttrs.value.inputAttrs), null, 16, _hoisted_1$1), [[vModelCheckbox, localValue.value]]), hasDefaultSlot.value || !resolvedPlain.value ? (openBlock(), createElementBlock("label", {
key: 0,
for: unref(computedId),
class: normalizeClass(unref(labelClasses))
}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_2)) : createCommentVNode("", true)]),
_: 3
}, 16, ["skip", "class"]);
};
}
});
//#endregion
//#region src/components/BFormCheckbox/BFormCheckboxGroupBase.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["id"];
//#endregion
//#region src/components/BFormCheckbox/BFormCheckboxGroupBase.vue
var BFormCheckboxGroupBase_default = /* @__PURE__ */ defineComponent({
__name: "BFormCheckboxGroupBase",
props: /* @__PURE__ */ mergeModels({
id: { default: void 0 },
name: { default: void 0 },
size: { default: "md" },
state: {
type: [Boolean, null],
default: null
},
buttonVariant: { default: "secondary" },
buttons: {
type: Boolean,
default: false
},
stacked: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
},
validated: {
type: Boolean,
default: false
},
autofocus: {
type: Boolean,
default: false
},
form: { default: void 0 },
ariaInvalid: {
type: [Boolean, String],
default: void 0
},
plain: {
type: Boolean,
default: false
},
reverse: {
type: Boolean,
default: false
},
switches: {
type: Boolean,
default: false
},
options: { default: () => [] }
}, {
"modelValue": { default: () => [] },
"modelModifiers": {}
}),
emits: ["update:modelValue"],
setup(__props, { expose: __expose }) {
const props = useDefaults(__props, "BFormCheckboxGroup");
const modelValue = useModel(__props, "modelValue");
const computedId = useId$1(() => props.id, "checkbox");
const computedName = useId$1(() => props.name, "checkbox");
const _element = useTemplateRef("_element");
const { focused } = useFocus(_element, { initialValue: props.autofocus });
provide(checkboxGroupKey, {
modelValue,
switch: toRef(() => props.switches),
buttonVariant: toRef(() => props.buttonVariant),
form: toRef(() => props.form),
name: computedName,
state: toRef(() => props.state),
plain: toRef(() => props.plain),
size: toRef(() => props.size),
inline: toRef(() => !props.stacked),
reverse: toRef(() => props.reverse),
required: toRef(() => props.required),
buttons: toRef(() => props.buttons),
disabled: toRef(() => props.disabled)
});
const normalizedOptions = computed(() => props.options.map((option) => {
if (typeof option === "object" && option !== null) return {
...option,
text: option.text ?? String(option.value ?? ""),
value: option.value ?? null,
disabled: props.disabled ? true : option.disabled ?? false
};
return {
text: String(option),
value: option,
disabled: props.disabled ? true : false
};
}));
const classesObject = computed(() => ({
required: props.required,
ariaInvalid: props.ariaInvalid,
state: props.state,
validated: props.validated,
buttons: props.buttons,
stacked: props.stacked,
size: props.size
}));
const attrs = getGroupAttr(classesObject);
const classes = getGroupClasses(classesObject);
__expose({
blur: () => {
focused.value = false;
},
focus: () => {
focused.value = true;
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", mergeProps(unref(attrs), {
id: unref(computedId),
ref_key: "_element",
ref: _element,
role: "group",
class: [unref(classes), "bv-no-focus-ring"],
tabindex: "-1"
}), [
renderSlot(_ctx.$slots, "first"),
(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (item, index) => {
return openBlock(), createBlock(BFormCheckbox_default, mergeProps({ key: index }, { ref_for: true }, item), {
default: withCtx(() => [renderSlot(_ctx.$slots, "option", mergeProps({ ref_for: true }, item), () => [createTextVNode(toDisplayString(item.text), 1)])]),
_: 2
}, 1040);
}), 128)),
renderSlot(_ctx.$slots, "default")
], 16, _hoisted_1);
};
}
});
//#endregion
//#region src/components/BFormCheckbox/BFormCheckboxGroup.vue
var BFormCheckboxGroup_default = /* @__PURE__ */ defineComponent({
__name: "BFormCheckboxGroup",
props: /* @__PURE__ */ mergeModels({
options: { default: () => [] },
valueField: { default: "value" },
textField: { default: "text" },
disabledField: { default: "disabled" },
id: { default: void 0 },
name: { default: void 0 },
size: { default: "md" },
state: {
type: [Boolean, null],
default: null
},
buttonVariant: { default: "secondary" },
buttons: {
type: Boolean,
default: false
},
stacked: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
},
validated: {
type: Boolean,
default: false
},
autofocus: {
type: Boolean,
default: false
},
form: { default: void 0 },
ariaInvalid: {
type: [Boolean, String],
default: void 0
},
plain: {
type: Boolean,
default: false
},
reverse: {
type: Boolean,
default: false
},
switches: {
type: Boolean,
default: false
}
}, {
"modelValue": { default: () => [] },
"modelModifiers": {}
}),
emits: ["update:modelValue"],
setup(__props) {
const props = __props;
const modelValue = useModel(__props, "modelValue");
const normalizedOptions = computed(() => (props.options ?? []).map((el) => typeof el === "string" || typeof el === "number" || typeof el === "boolean" ? {
value: el,
disabled: props.disabled,
text: el.toString()
} : {
value: el[props.valueField],
disabled: props.disabled || (el[props.disabledField] ?? false),
text: el[props.textField] ?? String(el[props.valueField])
}));
const forwardedProps = computed(() => ({
id: props.id,
name: props.name,
size: props.size,
state: props.state,
buttonVariant: props.buttonVariant,
buttons: props.buttons,
stacked: props.stacked,
disabled: props.disabled,
required: props.required,
validated: props.validated,
autofocus: props.autofocus,
form: props.form,
ariaInvalid: props.ariaInvalid,
plain: props.plain,
reverse: props.reverse,
switches: props.switches
}));
return (_ctx, _cache) => {
return openBlock(), createBlock(BFormCheckboxGroupBase_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 { BFormCheckbox_default as n, BFormCheckboxGroup_default as t };
//# sourceMappingURL=BFormCheckbox-CsN1a4jm.mjs.map