bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
500 lines (499 loc) • 17.4 kB
JavaScript
import { s as isVisible, t as attemptFocus } from "./dom-BdUQrX99.js";
import { t as useDefaults } from "./useDefaults-BzP4qZBu.js";
import { t as useId$1 } from "./useId-Fh-Arhb7.js";
import { a as upperFirst } from "./stringUtils-CVySsg3y.js";
import { t as useAriaInvalid } from "./useAriaInvalid-CRUhkD2V.js";
import { t as useStateClass } from "./useStateClass-BF7kf2zK.js";
import { t as BCol_default } from "./BCol-DiZFbqU5.js";
import { a as useProvideFormGroupData, i as BFormInvalidFeedback_default, n as BFormText_default, r as BFormRow_default, t as BFormValidFeedback_default } from "./BFormValidFeedback-BTNOXbQ6.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, 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/BFormGroupContent.vue
var BFormGroupContent_default = /* @__PURE__ */ defineComponent({
__name: "BFormGroupContent",
props: {
invalidFeedback: {},
validFeedback: {},
description: {},
feedbackAriaLive: {},
state: { type: [Boolean, null] },
tooltip: { type: Boolean },
invalidFeedbackId: {},
validFeedbackId: {},
descriptionId: {}
},
setup(__props) {
const slots = useSlots();
const hasInvalidFeedbackSlot = computed(() => !!slots["invalid-feedback"]);
const hasValidFeedbackSlot = computed(() => !!slots["valid-feedback"]);
const hasDescriptionSlot = computed(() => !!slots["description"]);
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
hasInvalidFeedbackSlot.value || __props.invalidFeedback ? (openBlock(), createBlock(BFormInvalidFeedback_default, {
key: 0,
id: __props.invalidFeedbackId,
"aria-live": __props.feedbackAriaLive,
state: __props.state,
tooltip: __props.tooltip
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "invalid-feedback", {}, () => [createTextVNode(toDisplayString(__props.invalidFeedback), 1)])]),
_: 3
}, 8, [
"id",
"aria-live",
"state",
"tooltip"
])) : createCommentVNode("", true),
hasValidFeedbackSlot.value || __props.validFeedback ? (openBlock(), createBlock(BFormValidFeedback_default, {
key: 1,
id: __props.validFeedbackId,
"aria-live": __props.feedbackAriaLive,
state: __props.state,
tooltip: __props.tooltip
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "valid-feedback", {}, () => [createTextVNode(toDisplayString(__props.validFeedback), 1)])]),
_: 3
}, 8, [
"id",
"aria-live",
"state",
"tooltip"
])) : createCommentVNode("", true),
hasDescriptionSlot.value || __props.description ? (openBlock(), createBlock(BFormText_default, {
key: 2,
id: __props.descriptionId
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])]),
_: 3
}, 8, ["id"])) : createCommentVNode("", true)
], 64);
};
}
});
//#endregion
//#region src/components/BFormGroupLabel.vue
var BFormGroupLabel_default = /* @__PURE__ */ defineComponent({
__name: "BFormGroupLabel",
props: {
label: {},
labelTag: {},
labelId: {},
computedLabelFor: {},
isFieldset: { type: Boolean },
isHorizontal: { type: Boolean },
labelColProps: {},
labelAlignClasses: {},
labelClasses: {}
},
emits: ["legendClick"],
setup(__props, { emit: __emit }) {
const emit = __emit;
return (_ctx, _cache) => {
return __props.isHorizontal ? (openBlock(), createBlock(BCol_default, mergeProps({ key: 0 }, __props.labelColProps, {
id: __props.labelId,
tag: __props.labelTag,
for: __props.computedLabelFor || null,
tabindex: __props.isFieldset ? "-1" : null,
class: [__props.labelAlignClasses, __props.labelClasses],
onClick: _cache[0] || (_cache[0] = ($event) => __props.isFieldset ? (e) => emit("legendClick", e) : void 0)
}), {
default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])]),
_: 3
}, 16, [
"id",
"tag",
"for",
"tabindex",
"class"
])) : (openBlock(), createBlock(resolveDynamicComponent(__props.labelTag), {
key: 1,
id: __props.labelId,
for: __props.computedLabelFor || null,
tabindex: __props.isFieldset ? "-1" : null,
class: normalizeClass(__props.labelClasses),
onClick: _cache[1] || (_cache[1] = ($event) => __props.isFieldset ? (e) => emit("legendClick", e) : void 0)
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])]),
_: 3
}, 8, [
"id",
"for",
"tabindex",
"class"
]));
};
}
});
//#endregion
//#region src/components/BFormGroup/BFormGroup.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = [
"id",
"disabled",
"aria-invalid",
"aria-labelledby"
];
var _hoisted_2 = {
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 computedState = toRef(() => props.state);
const computedDisabled = toRef(() => props.disabled);
const { singleLabelTargetId } = useProvideFormGroupData({
state: computedState,
disabled: computedDisabled
});
const computedLabelFor = computed(() => props.labelFor ?? singleLabelTargetId.value);
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 isFloating = computed(() => props.floating && !isHorizontal.value);
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(() => !isFieldset.value ? "label" : "legend");
const labelClasses = computed(() => [
isHorizontal.value ? "col-form-label" : "form-label",
{
"bv-no-focus-ring": !isFloating.value && !computedLabelFor.value,
"col-form-label": isHorizontal.value || !isFloating.value && !computedLabelFor.value,
"pt-0": !isHorizontal.value && !isFloating.value && !computedLabelFor.value,
"d-block": !isHorizontal.value && (isFloating.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(() => !isFloating.value && !computedLabelFor.value);
const hasDescription = computed(() => !!slots.description || !!props.description);
const hasInvalidFeedback = computed(() => !!slots["invalid-feedback"] || !!props.invalidFeedback);
const hasValidFeedback = computed(() => !!slots["valid-feedback"] || !!props.validFeedback);
const computedAriaDescribedby = computed(() => {
const ids = [];
if (hasDescription.value) ids.push(descriptionId.value);
if (computedState.value === false && hasInvalidFeedback.value) ids.push(invalidFeedbackId.value);
if (computedState.value === true && hasValidFeedback.value) ids.push(validFeedbackId.value);
return ids.length > 0 ? ids.join(" ") : null;
});
const labelShowing = computed(() => !!slots.label || !!props.label || isHorizontal.value);
const labelComponentProps = computed(() => ({
label: props.label,
labelTag: labelTag.value,
labelId: labelId.value,
computedLabelFor: computedLabelFor.value,
isFieldset: isFieldset.value,
isHorizontal: isHorizontal.value,
labelColProps: labelColProps.value,
labelAlignClasses: labelAlignClasses.value,
labelClasses: labelClasses.value
}));
const contentComponentProps = computed(() => ({
invalidFeedback: props.invalidFeedback,
validFeedback: props.validFeedback,
description: props.description,
feedbackAriaLive: props.feedbackAriaLive,
state: computedState.value,
tooltip: props.tooltip,
invalidFeedbackId: invalidFeedbackId.value,
validFeedbackId: validFeedbackId.value,
descriptionId: descriptionId.value
}));
return (_ctx, _cache) => {
return openBlock(), createElementBlock("fieldset", mergeProps({
id: unref(computedId),
disabled: unref(props).disabled,
"aria-invalid": unref(computedAriaInvalid),
"aria-labelledby": isFieldset.value && isHorizontal.value ? unref(labelId) : void 0
}, _ctx.$attrs, { class: [[unref(stateClass), { "was-validated": unref(props).validated }], "b-form-group"] }), [isHorizontal.value ? (openBlock(), createBlock(BFormRow_default, { key: 0 }, {
default: withCtx(() => [labelShowing.value ? (openBlock(), createBlock(BFormGroupLabel_default, mergeProps({ key: 0 }, labelComponentProps.value, { onLegendClick }), createSlots({ _: 2 }, [slots.label ? {
name: "label",
fn: withCtx(() => [renderSlot(_ctx.$slots, "label")]),
key: "0"
} : void 0]), 1040)) : createCommentVNode("", true), createVNode(BCol_default, mergeProps(contentColProps.value, { ref: "_content" }), {
default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
id: unref(computedId),
ariaDescribedby: computedAriaDescribedby.value,
descriptionId: unref(descriptionId),
labelId: unref(labelId)
}), createVNode(BFormGroupContent_default, normalizeProps(guardReactiveProps(contentComponentProps.value)), createSlots({ _: 2 }, [
slots["invalid-feedback"] ? {
name: "invalid-feedback",
fn: withCtx(() => [renderSlot(_ctx.$slots, "invalid-feedback")]),
key: "0"
} : void 0,
slots["valid-feedback"] ? {
name: "valid-feedback",
fn: withCtx(() => [renderSlot(_ctx.$slots, "valid-feedback")]),
key: "1"
} : void 0,
slots.description ? {
name: "description",
fn: withCtx(() => [renderSlot(_ctx.$slots, "description")]),
key: "2"
} : void 0
]), 1040)]),
_: 3
}, 16)]),
_: 3
})) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [isFloating.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
renderSlot(_ctx.$slots, "default", {
id: unref(computedId),
ariaDescribedby: computedAriaDescribedby.value,
descriptionId: unref(descriptionId),
labelId: unref(labelId)
}),
labelShowing.value ? (openBlock(), createBlock(BFormGroupLabel_default, mergeProps({ key: 0 }, labelComponentProps.value, { onLegendClick }), createSlots({ _: 2 }, [slots.label ? {
name: "label",
fn: withCtx(() => [renderSlot(_ctx.$slots, "label")]),
key: "0"
} : void 0]), 1040)) : createCommentVNode("", true),
createVNode(BFormGroupContent_default, normalizeProps(guardReactiveProps(contentComponentProps.value)), createSlots({ _: 2 }, [
slots["invalid-feedback"] ? {
name: "invalid-feedback",
fn: withCtx(() => [renderSlot(_ctx.$slots, "invalid-feedback")]),
key: "0"
} : void 0,
slots["valid-feedback"] ? {
name: "valid-feedback",
fn: withCtx(() => [renderSlot(_ctx.$slots, "valid-feedback")]),
key: "1"
} : void 0,
slots.description ? {
name: "description",
fn: withCtx(() => [renderSlot(_ctx.$slots, "description")]),
key: "2"
} : void 0
]), 1040)
], 512)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
labelShowing.value ? (openBlock(), createBlock(BFormGroupLabel_default, mergeProps({ key: 0 }, labelComponentProps.value, { onLegendClick }), createSlots({ _: 2 }, [slots.label ? {
name: "label",
fn: withCtx(() => [renderSlot(_ctx.$slots, "label")]),
key: "0"
} : void 0]), 1040)) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "default", {
id: unref(computedId),
ariaDescribedby: computedAriaDescribedby.value,
descriptionId: unref(descriptionId),
labelId: unref(labelId)
}),
createVNode(BFormGroupContent_default, normalizeProps(guardReactiveProps(contentComponentProps.value)), createSlots({ _: 2 }, [
slots["invalid-feedback"] ? {
name: "invalid-feedback",
fn: withCtx(() => [renderSlot(_ctx.$slots, "invalid-feedback")]),
key: "0"
} : void 0,
slots["valid-feedback"] ? {
name: "valid-feedback",
fn: withCtx(() => [renderSlot(_ctx.$slots, "valid-feedback")]),
key: "1"
} : void 0,
slots.description ? {
name: "description",
fn: withCtx(() => [renderSlot(_ctx.$slots, "description")]),
key: "2"
} : void 0
]), 1040)
], 64))], 64))], 16, _hoisted_1);
};
}
});
//#endregion
export { BFormGroup_default as t };
//# sourceMappingURL=BFormGroup-D3R7DxxF.js.map