bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
381 lines (380 loc) • 12.9 kB
JavaScript
import { d as formGroupKey } from "./keys-CQKrwmvN.mjs";
import { n as createReusableTemplate } from "./dist-B10a-gZ8.mjs";
import { s as isVisible, t as attemptFocus } from "./dom-AhkaSoh8.mjs";
import { t as useDefaults } from "./useDefaults-BKgBaqOV.mjs";
import { t as useId$1 } from "./useId-BKZFSYm8.mjs";
import { a as upperFirst } from "./stringUtils-CslYpDTt.mjs";
import { t as useStateClass } from "./useStateClass-CdmlbrGn.mjs";
import { t as useAriaInvalid } from "./useAriaInvalid-apOwgexm.mjs";
import { t as BCol_default } from "./BCol-C4v-TOX6.mjs";
import { i as BFormInvalidFeedback_default, n as BFormText_default, r as BFormRow_default, t as BFormValidFeedback_default } from "./BFormValidFeedback-_Dgzm0Ag.mjs";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, toRef, unref, useSlots, useTemplateRef, withCtx } from "vue";
//#region src/utils/props.ts
/**
* Use data last parameters to allow for currying
*
* @param suffix
* @param value
* @returns
*/
var suffixPropName = (suffix, value) => value + (suffix ? upperFirst(suffix) : "");
//#endregion
//#region src/components/BFormGroup/BFormGroup.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = {
key: 0,
ref: "_content",
class: "form-floating"
};
//#endregion
//#region src/components/BFormGroup/BFormGroup.vue
var BFormGroup_default = /* @__PURE__ */ defineComponent({
inheritAttrs: false,
__name: "BFormGroup",
props: {
contentCols: {
type: [
Boolean,
String,
Number
],
default: void 0
},
labelCols: {
type: [
Boolean,
String,
Number
],
default: void 0
},
labelAlign: { default: void 0 },
ariaInvalid: {
type: [Boolean, String],
default: void 0
},
description: { default: void 0 },
disabled: {
type: Boolean,
default: false
},
feedbackAriaLive: { default: "assertive" },
floating: {
type: Boolean,
default: false
},
id: { default: void 0 },
invalidFeedback: { default: void 0 },
label: { default: void 0 },
labelClass: { default: void 0 },
labelFor: { default: void 0 },
labelSize: { default: void 0 },
labelVisuallyHidden: {
type: Boolean,
default: false
},
state: {
type: [Boolean, null],
default: null
},
tooltip: {
type: Boolean,
default: false
},
validFeedback: { default: void 0 },
validated: {
type: Boolean,
default: false
},
contentColsSm: {
type: [
Boolean,
String,
Number
],
default: void 0
},
contentColsMd: {
type: [
Boolean,
String,
Number
],
default: void 0
},
contentColsLg: {
type: [
Boolean,
String,
Number
],
default: void 0
},
contentColsXl: {
type: [
Boolean,
String,
Number
],
default: void 0
},
labelColsSm: {
type: [
Boolean,
String,
Number
],
default: void 0
},
labelColsMd: {
type: [
Boolean,
String,
Number
],
default: void 0
},
labelColsLg: {
type: [
Boolean,
String,
Number
],
default: void 0
},
labelColsXl: {
type: [
Boolean,
String,
Number
],
default: void 0
},
labelAlignSm: { default: void 0 },
labelAlignMd: { default: void 0 },
labelAlignLg: { default: void 0 },
labelAlignXl: { default: void 0 }
},
setup(__props) {
const INPUTS = [
"input",
"select",
"textarea"
];
const props = useDefaults(__props, "BFormGroup");
const slots = useSlots();
const LabelContentTemplate = createReusableTemplate();
const ContentTemplate = createReusableTemplate();
const computedState = toRef(() => props.state);
const computedDisabled = toRef(() => props.disabled);
const childId = ref([]);
provide(formGroupKey, (id) => {
childId.value = [id];
return {
state: computedState,
disabled: computedDisabled
};
});
const computedLabelFor = computed(() => {
if (props.labelFor !== void 0) return props.labelFor;
if (childId.value[0] && childId.value[0].value) return childId.value[0].value;
return null;
});
const breakPoints = [
"xs",
"sm",
"md",
"lg",
"xl"
];
const getColProps = (props, prefix) => breakPoints.reduce((result, breakpoint) => {
let propValue = props[suffixPropName(breakpoint === "xs" ? "" : breakpoint, `${prefix}Cols`)];
propValue = propValue === "" ? true : propValue || false;
if (!(typeof propValue === "boolean") && propValue !== "auto") {
const val = Number.parseInt(propValue);
propValue = Number.isNaN(val) ? 0 : val;
propValue = propValue > 0 ? propValue : false;
}
if (propValue) if (breakpoint === "xs") result[typeof propValue === "boolean" ? "col" : "cols"] = propValue;
else result[breakpoint || (typeof propValue === "boolean" ? "col" : "cols")] = propValue;
return result;
}, {});
const content = useTemplateRef("_content");
const contentColProps = computed(() => getColProps(props, "content"));
const labelAlignClasses = computed(() => ((props, prefix) => breakPoints.reduce((result, breakpoint) => {
const propValue = props[suffixPropName(breakpoint === "xs" ? "" : breakpoint, `${prefix}Align`)] || null;
if (propValue) if (breakpoint === "xs") result.push(`text-${propValue}`);
else result.push(`text-${breakpoint}-${propValue}`);
return result;
}, []))(props, "label"));
const labelColProps = computed(() => getColProps(props, "label"));
const isHorizontal = computed(() => Object.keys(contentColProps.value).length > 0 || Object.keys(labelColProps.value).length > 0);
const stateClass = useStateClass(computedState);
const computedAriaInvalid = useAriaInvalid(() => props.ariaInvalid, computedState);
const onLegendClick = (event) => {
if (computedLabelFor.value || content.value === null) return;
const { target } = event;
const tagName = target ? target.tagName : "";
if ([
...INPUTS,
"a",
"button",
"label"
].indexOf(tagName) !== -1) return;
const contentElement = isHorizontal.value && content.value && "$el" in content.value ? content.value.$el : content.value;
if (!contentElement) return;
const inputs = [...contentElement.querySelectorAll(INPUTS.map((v) => `${v}:not([disabled])`).join())].filter(isVisible);
const [inp] = inputs;
if (inputs.length === 1 && inp instanceof HTMLElement) attemptFocus(inp);
};
const computedId = useId$1(() => props.id);
const labelId = useId$1(void 0, "_BV_label_");
const labelTag = computed(() => !computedLabelFor.value ? "legend" : "label");
const labelClasses = computed(() => [
isHorizontal.value ? "col-form-label" : "form-label",
{
"bv-no-focus-ring": !computedLabelFor.value,
"col-form-label": isHorizontal.value || !computedLabelFor.value,
"pt-0": !isHorizontal.value && !computedLabelFor.value,
"d-block": !isHorizontal.value && computedLabelFor.value,
[`col-form-label-${props.labelSize}`]: !!props.labelSize,
"visually-hidden": props.labelVisuallyHidden
},
isHorizontal.value ? null : labelAlignClasses.value,
props.labelClass
]);
const invalidFeedbackId = useId$1(void 0, "_BV_feedback_invalid_");
const validFeedbackId = useId$1(void 0, "_BV_feedback_valid_");
const descriptionId = useId$1(void 0, "_BV_description_");
const isFieldset = computed(() => !computedLabelFor.value);
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(isFieldset.value ? "fieldset" : "div"), mergeProps({
id: unref(computedId),
disabled: isFieldset.value ? unref(props).disabled : null,
role: isFieldset.value ? null : "group",
"aria-invalid": unref(computedAriaInvalid),
"aria-labelledby": isFieldset.value && isHorizontal.value ? unref(labelId) : null
}, _ctx.$attrs, { class: [[unref(stateClass), { "was-validated": unref(props).validated }], "b-form-group"] }), {
default: withCtx(() => [
createVNode(unref(ContentTemplate).define, null, {
default: withCtx(() => [
slots["invalid-feedback"] || unref(props).invalidFeedback ? (openBlock(), createBlock(BFormInvalidFeedback_default, {
key: 0,
id: unref(invalidFeedbackId),
"aria-live": unref(props).feedbackAriaLive,
state: computedState.value,
tooltip: unref(props).tooltip
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "invalid-feedback", {}, () => [createTextVNode(toDisplayString(unref(props).invalidFeedback), 1)])]),
_: 3
}, 8, [
"id",
"aria-live",
"state",
"tooltip"
])) : createCommentVNode("", true),
slots["valid-feedback"] || unref(props).validFeedback ? (openBlock(), createBlock(BFormValidFeedback_default, {
key: 1,
id: unref(validFeedbackId),
"aria-live": unref(props).feedbackAriaLive,
state: computedState.value,
tooltip: unref(props).tooltip
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "valid-feedback", {}, () => [createTextVNode(toDisplayString(unref(props).validFeedback), 1)])]),
_: 3
}, 8, [
"id",
"aria-live",
"state",
"tooltip"
])) : createCommentVNode("", true),
slots.description || unref(props).description ? (openBlock(), createBlock(BFormText_default, {
key: 2,
id: unref(descriptionId)
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(unref(props).description), 1)])]),
_: 3
}, 8, ["id"])) : createCommentVNode("", true)
]),
_: 3
}),
createVNode(unref(LabelContentTemplate).define, null, {
default: withCtx(() => [slots.label || unref(props).label || isHorizontal.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [isHorizontal.value ? (openBlock(), createBlock(BCol_default, mergeProps({ key: 0 }, labelColProps.value, {
id: unref(labelId),
tag: labelTag.value,
for: computedLabelFor.value || null,
tabindex: isFieldset.value ? "-1" : null,
class: [labelAlignClasses.value, labelClasses.value],
onClick: _cache[0] || (_cache[0] = ($event) => isFieldset.value ? onLegendClick : null)
}), {
default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(unref(props).label), 1)])]),
_: 3
}, 16, [
"id",
"tag",
"for",
"tabindex",
"class"
])) : (openBlock(), createBlock(resolveDynamicComponent(labelTag.value), {
key: 1,
id: unref(labelId),
for: computedLabelFor.value || null,
tabindex: isFieldset.value ? "-1" : null,
class: normalizeClass(labelClasses.value),
onClick: _cache[1] || (_cache[1] = ($event) => isFieldset.value ? onLegendClick : null)
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(unref(props).label), 1)])]),
_: 3
}, 8, [
"id",
"for",
"tabindex",
"class"
]))], 64)) : createCommentVNode("", true)]),
_: 3
}),
isHorizontal.value ? (openBlock(), createBlock(BFormRow_default, { key: 0 }, {
default: withCtx(() => [createVNode(unref(LabelContentTemplate).reuse), createVNode(BCol_default, mergeProps(contentColProps.value, { ref: "_content" }), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
id: unref(computedId),
ariaDescribedby: null,
descriptionId: unref(descriptionId),
labelId: unref(labelId)
}), createVNode(unref(ContentTemplate).reuse)]),
_: 3
}, 16)]),
_: 3
})) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [unref(props).floating && !isHorizontal.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
renderSlot(_ctx.$slots, "default", {
id: unref(computedId),
ariaDescribedby: null,
descriptionId: unref(descriptionId),
labelId: unref(labelId)
}),
createVNode(unref(LabelContentTemplate).reuse),
createVNode(unref(ContentTemplate).reuse)
], 512)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
createVNode(unref(LabelContentTemplate).reuse),
renderSlot(_ctx.$slots, "default", {
id: unref(computedId),
ariaDescribedby: null,
descriptionId: unref(descriptionId),
labelId: unref(labelId)
}),
createVNode(unref(ContentTemplate).reuse)
], 64))], 64))
]),
_: 3
}, 16, [
"id",
"disabled",
"role",
"aria-invalid",
"aria-labelledby",
"class"
]);
};
}
});
//#endregion
export { BFormGroup_default as t };
//# sourceMappingURL=BFormGroup--38dFj0X.mjs.map