bootstrap-vue-next/dist/BFormGroup-DN4AyqDY.js

Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development

require("./chunk-CoQrYLCe.js");
const require_keys = require("./keys-durSVUrO.js");
const require_dist = require("./dist-B_c893QG.js");
const require_dom = require("./dom-Bs6DzM72.js");
const require_useDefaults = require("./useDefaults-DsLf4iRY.js");
const require_useId = require("./useId-DHrBgM7P.js");
const require_stringUtils = require("./stringUtils-BwKOASdU.js");
const require_BCol = require("./BCol-CXEKpSfY.js");
const require_BFormValidFeedback = require("./BFormValidFeedback-CiZ4cn1v.js");
const require_useAriaInvalid = require("./useAriaInvalid-CsUHLhSs.js");
const require_useStateClass = require("./useStateClass-0b-hPufa.js");
let vue = require("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 ? require_stringUtils.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__ */ (0, vue.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 = require_useDefaults.useDefaults(__props, "BFormGroup");
		const slots = (0, vue.useSlots)();
		const LabelContentTemplate = require_dist.createReusableTemplate();
		const ContentTemplate = require_dist.createReusableTemplate();
		const computedState = (0, vue.toRef)(() => props.state);
		const computedDisabled = (0, vue.toRef)(() => props.disabled);
		const childId = (0, vue.ref)([]);
		(0, vue.provide)(require_keys.formGroupKey, (id) => {
			childId.value = [id];
			return {
				state: computedState,
				disabled: computedDisabled
			};
		});
		const computedLabelFor = (0, vue.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 = (0, vue.useTemplateRef)("_content");
		const contentColProps = (0, vue.computed)(() => getColProps(props, "content"));
		const labelAlignClasses = (0, vue.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 = (0, vue.computed)(() => getColProps(props, "label"));
		const isHorizontal = (0, vue.computed)(() => Object.keys(contentColProps.value).length > 0 || Object.keys(labelColProps.value).length > 0);
		const stateClass = require_useStateClass.useStateClass(computedState);
		const computedAriaInvalid = require_useAriaInvalid.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(require_dom.isVisible);
			const [inp] = inputs;
			if (inputs.length === 1 && inp instanceof HTMLElement) require_dom.attemptFocus(inp);
		};
		const computedId = require_useId.useId(() => props.id);
		const labelId = require_useId.useId(void 0, "_BV_label_");
		const labelTag = (0, vue.computed)(() => !computedLabelFor.value ? "legend" : "label");
		const labelClasses = (0, vue.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 = require_useId.useId(void 0, "_BV_feedback_invalid_");
		const validFeedbackId = require_useId.useId(void 0, "_BV_feedback_valid_");
		const descriptionId = require_useId.useId(void 0, "_BV_description_");
		const isFieldset = (0, vue.computed)(() => !computedLabelFor.value);
		return (_ctx, _cache) => {
			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(isFieldset.value ? "fieldset" : "div"), (0, vue.mergeProps)({
				id: (0, vue.unref)(computedId),
				disabled: isFieldset.value ? (0, vue.unref)(props).disabled : null,
				role: isFieldset.value ? null : "group",
				"aria-invalid": (0, vue.unref)(computedAriaInvalid),
				"aria-labelledby": isFieldset.value && isHorizontal.value ? (0, vue.unref)(labelId) : null
			}, _ctx.$attrs, { class: [[(0, vue.unref)(stateClass), { "was-validated": (0, vue.unref)(props).validated }], "b-form-group"] }), {
				default: (0, vue.withCtx)(() => [
					(0, vue.createVNode)((0, vue.unref)(ContentTemplate).define, null, {
						default: (0, vue.withCtx)(() => [
							slots["invalid-feedback"] || (0, vue.unref)(props).invalidFeedback ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_BFormValidFeedback.BFormInvalidFeedback_default, {
								key: 0,
								id: (0, vue.unref)(invalidFeedbackId),
								"aria-live": (0, vue.unref)(props).feedbackAriaLive,
								state: computedState.value,
								tooltip: (0, vue.unref)(props).tooltip
							}, {
								default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "invalid-feedback", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).invalidFeedback), 1)])]),
								_: 3
							}, 8, [
								"id",
								"aria-live",
								"state",
								"tooltip"
							])) : (0, vue.createCommentVNode)("", true),
							slots["valid-feedback"] || (0, vue.unref)(props).validFeedback ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_BFormValidFeedback.BFormValidFeedback_default, {
								key: 1,
								id: (0, vue.unref)(validFeedbackId),
								"aria-live": (0, vue.unref)(props).feedbackAriaLive,
								state: computedState.value,
								tooltip: (0, vue.unref)(props).tooltip
							}, {
								default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "valid-feedback", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).validFeedback), 1)])]),
								_: 3
							}, 8, [
								"id",
								"aria-live",
								"state",
								"tooltip"
							])) : (0, vue.createCommentVNode)("", true),
							slots.description || (0, vue.unref)(props).description ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_BFormValidFeedback.BFormText_default, {
								key: 2,
								id: (0, vue.unref)(descriptionId)
							}, {
								default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "description", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).description), 1)])]),
								_: 3
							}, 8, ["id"])) : (0, vue.createCommentVNode)("", true)
						]),
						_: 3
					}),
					(0, vue.createVNode)((0, vue.unref)(LabelContentTemplate).define, null, {
						default: (0, vue.withCtx)(() => [slots.label || (0, vue.unref)(props).label || isHorizontal.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [isHorizontal.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_BCol.BCol_default, (0, vue.mergeProps)({ key: 0 }, labelColProps.value, {
							id: (0, vue.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: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "label", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).label), 1)])]),
							_: 3
						}, 16, [
							"id",
							"tag",
							"for",
							"tabindex",
							"class"
						])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(labelTag.value), {
							key: 1,
							id: (0, vue.unref)(labelId),
							for: computedLabelFor.value || null,
							tabindex: isFieldset.value ? "-1" : null,
							class: (0, vue.normalizeClass)(labelClasses.value),
							onClick: _cache[1] || (_cache[1] = ($event) => isFieldset.value ? onLegendClick : null)
						}, {
							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "label", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).label), 1)])]),
							_: 3
						}, 8, [
							"id",
							"for",
							"tabindex",
							"class"
						]))], 64)) : (0, vue.createCommentVNode)("", true)]),
						_: 3
					}),
					isHorizontal.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_BFormValidFeedback.BFormRow_default, { key: 0 }, {
						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(LabelContentTemplate).reuse), (0, vue.createVNode)(require_BCol.BCol_default, (0, vue.mergeProps)(contentColProps.value, { ref: "_content" }), {
							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {
								id: (0, vue.unref)(computedId),
								ariaDescribedby: null,
								descriptionId: (0, vue.unref)(descriptionId),
								labelId: (0, vue.unref)(labelId)
							}), (0, vue.createVNode)((0, vue.unref)(ContentTemplate).reuse)]),
							_: 3
						}, 16)]),
						_: 3
					})) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.unref)(props).floating && !isHorizontal.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [
						(0, vue.renderSlot)(_ctx.$slots, "default", {
							id: (0, vue.unref)(computedId),
							ariaDescribedby: null,
							descriptionId: (0, vue.unref)(descriptionId),
							labelId: (0, vue.unref)(labelId)
						}),
						(0, vue.createVNode)((0, vue.unref)(LabelContentTemplate).reuse),
						(0, vue.createVNode)((0, vue.unref)(ContentTemplate).reuse)
					], 512)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
						(0, vue.createVNode)((0, vue.unref)(LabelContentTemplate).reuse),
						(0, vue.renderSlot)(_ctx.$slots, "default", {
							id: (0, vue.unref)(computedId),
							ariaDescribedby: null,
							descriptionId: (0, vue.unref)(descriptionId),
							labelId: (0, vue.unref)(labelId)
						}),
						(0, vue.createVNode)((0, vue.unref)(ContentTemplate).reuse)
					], 64))], 64))
				]),
				_: 3
			}, 16, [
				"id",
				"disabled",
				"role",
				"aria-invalid",
				"aria-labelledby",
				"class"
			]);
		};
	}
});
//#endregion
Object.defineProperty(exports, "BFormGroup_default", {
	enumerable: true,
	get: function() {
		return BFormGroup_default;
	}
});

//# sourceMappingURL=BFormGroup-DN4AyqDY.js.map