bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
360 lines (359 loc) • 14.5 kB
JavaScript
require("./chunk-CoQrYLCe.js");
const require_keys = require("./keys-durSVUrO.js");
const require_dom = require("./dom-Bs6DzM72.js");
const require_useDefaults = require("./useDefaults-DsLf4iRY.js");
const require_useId = require("./useId-DHrBgM7P.js");
const require_flattenFragments = require("./flattenFragments-C1WWqm25.js");
const require_BCollapse = require("./BCollapse-DZ1z2c8U.js");
const require_object = require("./object-BN7QwMcz.js");
let vue = require("vue");
//#region src/components/BAccordion/BAccordionItem.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1$1 = [
"aria-expanded",
"aria-controls",
"onClick"
];
//#endregion
//#region src/components/BAccordion/BAccordionItem.vue
var BAccordionItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
inheritAttrs: false,
__name: "BAccordionItem",
props: /* @__PURE__ */ (0, vue.mergeModels)({
bodyAttrs: { default: void 0 },
bodyClass: { default: void 0 },
buttonAttrs: { default: void 0 },
buttonClass: { default: void 0 },
collapseClass: { default: void 0 },
headerAttrs: { default: void 0 },
headerClass: { default: void 0 },
headerTag: { default: "h2" },
horizontal: {
type: Boolean,
default: void 0
},
id: { default: void 0 },
isNav: {
type: Boolean,
default: void 0
},
lazy: {
type: Boolean,
default: false
},
unmountLazy: {
type: Boolean,
default: false
},
tag: { default: void 0 },
title: { default: void 0 },
show: {
type: Boolean,
default: void 0
},
visible: {
type: Boolean,
default: false
},
wrapperAttrs: { default: void 0 }
}, {
"modelValue": {
type: Boolean,
default: false
},
"modelModifiers": {}
}),
emits: /* @__PURE__ */ (0, vue.mergeModels)([
"hide",
"hide-prevented",
"hidden",
"show",
"show-prevented",
"shown",
"toggle",
"toggle-prevented"
], ["update:modelValue"]),
setup(__props, { emit: __emit }) {
const props = require_useDefaults.useDefaults(__props, "BAccordionItem");
const emit = __emit;
const attrs = (0, vue.useAttrs)();
const processedAttrs = (0, vue.computed)(() => {
const { class: wrapperClass, ...collapseAttrs } = attrs;
return {
wrapperClass,
collapseAttrs
};
});
const parentData = (0, vue.inject)(require_keys.accordionInjectionKey, null);
const computedId = require_useId.useId(() => props.id, "accordion_item");
const modelValue = (0, vue.useModel)(__props, "modelValue");
if (modelValue.value) parentData?.setOpenItem(computedId.value);
else modelValue.value = (require_object.isReadOnlyArray(parentData?.openItem.value) ? parentData?.openItem.value.includes(computedId.value) : parentData?.openItem.value === computedId.value) && !parentData?.initialAnimation.value;
const el = (0, vue.useTemplateRef)("_el");
parentData?.registerAccordionItem(computedId.value, el);
(0, vue.onUnmounted)(() => {
parentData?.unregisterAccordionItem(computedId.value);
});
(0, vue.onMounted)(() => {
if (!modelValue.value && parentData?.openItem.value === computedId.value) (0, vue.nextTick)(() => {
modelValue.value = true;
});
});
const openInParent = (0, vue.computed)(() => require_object.isReadOnlyArray(parentData?.openItem.value) ? parentData?.openItem.value.includes(computedId.value) : parentData?.openItem.value === computedId.value);
(0, vue.watch)(() => parentData?.openItem.value, () => modelValue.value = openInParent.value);
(0, vue.watch)(modelValue, () => {
if (modelValue.value && !openInParent.value) parentData?.setOpenItem(computedId.value);
else if (!modelValue.value && openInParent.value) parentData?.setCloseItem(computedId.value);
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
ref: "_el",
class: "accordion-item"
}, (0, vue.unref)(props).wrapperAttrs, { class: processedAttrs.value.wrapperClass }), [(0, vue.createVNode)(require_BCollapse.BCollapse_default, (0, vue.mergeProps)({
id: (0, vue.unref)(computedId),
modelValue: modelValue.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
class: ["accordion-collapse", (0, vue.unref)(props).collapseClass],
"aria-labelledby": `${(0, vue.unref)(computedId)}-heading`
}, processedAttrs.value.collapseAttrs, {
tag: (0, vue.unref)(props).tag,
show: (0, vue.unref)(props).show,
horizontal: (0, vue.unref)(props).horizontal,
visible: (0, vue.unref)(props).visible,
"is-nav": (0, vue.unref)(props).isNav,
lazy: (0, vue.unref)(props).lazy || (0, vue.unref)(parentData)?.lazy.value,
"unmount-lazy": (0, vue.unref)(props).unmountLazy || (0, vue.unref)(parentData)?.unmountLazy.value,
onShow: _cache[1] || (_cache[1] = ($event) => emit("show", $event)),
onShown: _cache[2] || (_cache[2] = ($event) => emit("shown", $event)),
onHide: _cache[3] || (_cache[3] = ($event) => emit("hide", $event)),
onHidden: _cache[4] || (_cache[4] = ($event) => emit("hidden", $event)),
onHidePrevented: _cache[5] || (_cache[5] = ($event) => emit("hide-prevented", $event)),
onShowPrevented: _cache[6] || (_cache[6] = ($event) => emit("show-prevented", $event)),
onTogglePrevented: _cache[7] || (_cache[7] = ($event) => emit("toggle-prevented", $event)),
onToggle: _cache[8] || (_cache[8] = ($event) => emit("toggle", $event))
}), {
header: (0, vue.withCtx)(({ visible: toggleVisible, toggle: slotToggle }) => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(props).headerTag), (0, vue.mergeProps)({
id: `${(0, vue.unref)(computedId)}-heading`,
class: ["accordion-header", (0, vue.unref)(props).headerClass]
}, (0, vue.unref)(props).headerAttrs), {
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("button", (0, vue.mergeProps)({ class: "accordion-button" }, (0, vue.unref)(props).buttonAttrs, {
class: [{ collapsed: !toggleVisible }, (0, vue.unref)(props).buttonClass],
type: "button",
"aria-expanded": toggleVisible ? "true" : "false",
"aria-controls": (0, vue.unref)(computedId),
onClick: slotToggle
}), [(0, vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).title), 1)])], 16, _hoisted_1$1)]),
_: 2
}, 1040, ["id", "class"]))]),
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({ class: "accordion-body" }, (0, vue.unref)(props).bodyAttrs, { class: (0, vue.unref)(props).bodyClass }), [(0, vue.renderSlot)(_ctx.$slots, "default")], 16)]),
_: 3
}, 16, [
"id",
"modelValue",
"class",
"aria-labelledby",
"tag",
"show",
"horizontal",
"visible",
"is-nav",
"lazy",
"unmount-lazy"
])], 16);
};
}
});
//#endregion
//#region src/components/BAccordion/BAccordion.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["id"];
//#endregion
//#region src/components/BAccordion/BAccordion.vue
var BAccordion_default = /* @__PURE__ */ (0, vue.defineComponent)({
__name: "BAccordion",
props: /* @__PURE__ */ (0, vue.mergeModels)({
flush: {
type: Boolean,
default: false
},
free: {
type: Boolean,
default: false
},
id: { default: void 0 },
initialAnimation: {
type: Boolean,
default: false
},
lazy: {
type: Boolean,
default: false
},
unmountLazy: {
type: Boolean,
default: false
}
}, {
"modelValue": { default: void 0 },
"modelModifiers": {},
"index": { default: void 0 },
"indexModifiers": {}
}),
emits: ["update:modelValue", "update:index"],
setup(__props) {
const props = require_useDefaults.useDefaults(__props, "BAccordion");
const slots = (0, vue.useSlots)();
const modelValue = (0, vue.useModel)(__props, "modelValue");
const index = (0, vue.useModel)(__props, "index");
const itemElementsArray = (0, vue.ref)([]);
const updateItemElementsArray = () => {
const itemElements = require_flattenFragments.flattenFragments(slots.default?.({}) ?? []);
itemElementsArray.value = (Array.isArray(itemElements) ? itemElements : [itemElements]).filter((item) => item.type === BAccordionItem_default);
};
updateItemElementsArray();
(0, vue.watch)(() => slots.default?.({}), () => {
updateItemElementsArray();
(0, vue.nextTick)(() => {
sortAccordionItems();
});
});
const accordionItems = (0, vue.shallowRef)([]);
const sortAccordionItems = () => {
accordionItems.value = [...accordionItems.value].sort((a, b) => require_dom.sortSlotElementsByPosition((0, vue.unref)(a.el), (0, vue.unref)(b.el)));
if (modelValue.value) if (require_object.isReadOnlyArray(modelValue.value)) {
const next = modelValue.value.map((id) => accordionItems.value.findIndex((item) => item.id === id)).filter((i) => i !== -1);
if (next.length !== modelValue.value.length) {
if (process.env.NODE_ENV === "development") console.warn("[BAccordion] Unknown item id in v-model:", modelValue.value);
}
index.value = next;
} else {
const idx = accordionItems.value.findIndex((item) => item.id === modelValue.value);
if (idx !== -1) index.value = idx;
}
else if (index.value !== void 0) modelValue.value = require_object.isReadOnlyArray(index.value) ? index.value.map((idx) => accordionItems.value[idx]?.id).filter((el) => el !== void 0) : accordionItems.value[index.value]?.id;
};
const computedId = require_useId.useId(() => props.id, "accordion");
const computedClasses = (0, vue.computed)(() => ({ "accordion-flush": props.flush }));
const areEqual = (a, b) => {
if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((item, index) => item === b[index]);
return a === b;
};
(0, vue.watch)(index, (newValue, oldValue) => {
if (areEqual(newValue, oldValue)) return;
if (index.value === void 0) {
modelValue.value = void 0;
return;
}
if (!props.free) {
const idx = !require_object.isReadOnlyArray(index.value) ? index.value : index.value?.[0];
if (idx !== void 0 && accordionItems.value[idx]?.id) {
if (modelValue.value !== accordionItems.value[idx]?.id) modelValue.value = accordionItems.value[idx]?.id;
} else (0, vue.nextTick)(() => {
index.value = void 0;
});
} else if (require_object.isReadOnlyArray(index.value)) {
const newValue = index.value.map((item) => accordionItems.value[item]?.id).filter((el) => el !== void 0);
if (!areEqual(newValue, modelValue.value)) modelValue.value = newValue;
} else {
const newValue = accordionItems.value[index.value]?.id;
if (newValue === void 0) {
(0, vue.nextTick)(() => {
index.value = void 0;
});
return;
}
if (!areEqual(newValue, modelValue.value)) modelValue.value = newValue;
}
});
(0, vue.watch)(modelValue, (newValue, oldValue) => {
if (areEqual(newValue, oldValue)) return;
if (modelValue.value === void 0) {
index.value = void 0;
return;
}
if (!props.free) {
const idx = accordionItems.value.findIndex((item) => item.id === (!require_object.isReadOnlyArray(modelValue.value) ? modelValue.value : modelValue.value?.[0]));
if (idx !== -1) {
if (index.value !== idx) index.value = idx;
} else (0, vue.nextTick)(() => {
modelValue.value = void 0;
});
} else if (props.free) if (require_object.isReadOnlyArray(modelValue.value)) {
const idxes = modelValue.value.map((value) => accordionItems.value.findIndex((item) => item.id === value)).filter((index) => index !== -1);
if (idxes.length > 0) {
if (!areEqual(idxes, index.value)) index.value = idxes;
} else (0, vue.nextTick)(() => {
modelValue.value = void 0;
});
} else {
const newValue = accordionItems.value.findIndex((item) => item.id === modelValue.value);
if (!areEqual(newValue, index.value)) index.value = newValue;
}
}, { deep: true });
(0, vue.watch)(() => props.free, (free) => {
if (modelValue.value) {
if (!free && require_object.isReadOnlyArray(modelValue.value)) modelValue.value = modelValue.value[0];
else if (free && !require_object.isReadOnlyArray(modelValue.value)) modelValue.value = [modelValue.value];
}
});
(0, vue.provide)(require_keys.accordionInjectionKey, {
openItem: (0, vue.readonly)(modelValue),
free: (0, vue.toRef)(() => props.free),
initialAnimation: (0, vue.toRef)(() => props.initialAnimation),
lazy: (0, vue.toRef)(() => props.lazy),
unmountLazy: (0, vue.toRef)(() => props.unmountLazy),
setOpenItem: (id) => {
if (props.free && !require_object.isReadOnlyArray(modelValue.value)) {
if (modelValue.value !== void 0) modelValue.value = [modelValue.value, id];
else modelValue.value = [id];
return;
}
if (!props.free && require_object.isReadOnlyArray(modelValue.value)) {
modelValue.value = id;
return;
}
if (require_object.isReadOnlyArray(modelValue.value)) {
if (!modelValue.value.includes(id)) modelValue.value = [...modelValue.value, id];
} else modelValue.value = id;
},
setCloseItem: (id) => {
if (!props.free && require_object.isReadOnlyArray(modelValue.value)) {
modelValue.value = void 0;
return;
}
if (require_object.isReadOnlyArray(modelValue.value)) {
const next = modelValue.value.filter((item) => item !== id);
modelValue.value = next.length ? next : void 0;
} else if (modelValue.value === id) modelValue.value = void 0;
},
registerAccordionItem: (id, el) => {
accordionItems.value = [...accordionItems.value, {
id,
el
}];
if (accordionItems.value.length === itemElementsArray.value.length) sortAccordionItems();
},
unregisterAccordionItem: (id) => {
accordionItems.value = accordionItems.value.filter((item) => item.id !== id);
}
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
id: (0, vue.unref)(computedId),
class: (0, vue.normalizeClass)(["accordion", computedClasses.value])
}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1);
};
}
});
//#endregion
Object.defineProperty(exports, "BAccordionItem_default", {
enumerable: true,
get: function() {
return BAccordionItem_default;
}
});
Object.defineProperty(exports, "BAccordion_default", {
enumerable: true,
get: function() {
return BAccordion_default;
}
});
//# sourceMappingURL=BAccordion-CJZMsvwP.js.map