maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
84 lines (83 loc) • 3.79 kB
JavaScript
import { markRaw, defineAsyncComponent, defineComponent, useSlots, computed, ref, createElementBlock, openBlock, Fragment, renderList, createBlock, withCtx, createElementVNode, createVNode, unref, renderSlot, normalizeClass } from "vue";
import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
import MazCardSpotlight from "./MazCardSpotlight.js";
import MazExpandAnimation from "./MazExpandAnimation.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazAccordion.C7shz8tA.css';const MazPlus = markRaw(defineAsyncComponent(() => import("../chunks/plus.svg.CdiAbqRP.js"))), _hoisted_1 = {
class: "m-accordion m-reset-css",
role: "presentation"
}, _hoisted_2 = ["id", "aria-controls", "aria-expanded", "onClick"], _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazAccordion",
props: {
id: { default: void 0 },
modelValue: { default: 0 },
contentClass: { default: void 0 }
},
emits: ["update:model-value"],
setup(__props, { emit: __emit }) {
const props = __props, emits = __emit, instanceId = useInstanceUniqId({
componentName: "MazAccordion",
providedId: props.id
}), slots = useSlots(), stepCount = computed(
() => Object.keys(slots).filter((slot) => slot.startsWith("title-")).length
), localModelValue = ref(props.modelValue), currentStep = computed({
get: () => props.modelValue || localModelValue.value,
set: (value) => {
localModelValue.value = value, emits("update:model-value", value);
}
});
function isStepOpen(index) {
return currentStep.value === index;
}
function selectStep(index) {
currentStep.value === index ? (localModelValue.value = 0, emits("update:model-value", 0)) : (localModelValue.value = index, emits("update:model-value", index));
}
return (_ctx, _cache) => (openBlock(), createElementBlock("div", _hoisted_1, [
(openBlock(!0), createElementBlock(Fragment, null, renderList(stepCount.value, (step) => (openBlock(), createBlock(MazCardSpotlight, {
key: step,
class: "m-accordion__spotlight",
padding: !1
}, {
default: withCtx(() => [
createElementVNode("button", {
id: `step-${step}-${unref(instanceId)}`,
class: "m-accordion__header",
"aria-controls": `step-${step}-${unref(instanceId)}`,
"aria-expanded": isStepOpen(step),
onClick: ($event) => selectStep(step)
}, [
renderSlot(_ctx.$slots, `title-${step}`, {
isOpen: isStepOpen(step)
}, void 0, !0),
createVNode(unref(MazPlus), {
class: normalizeClass(["header-icon", { "--rotate": isStepOpen(step) }])
}, null, 8, ["class"])
], 8, _hoisted_2),
createVNode(MazExpandAnimation, {
"animation-duration": "300ms",
"model-value": isStepOpen(step),
"aria-labelledby": `step-${step}-${unref(instanceId)}`
}, {
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(["m-accordion__content", __props.contentClass])
}, [
renderSlot(_ctx.$slots, "content", {
isOpen: isStepOpen(step)
}, void 0, !0),
renderSlot(_ctx.$slots, `content-${step}`, {
isOpen: isStepOpen(step)
}, void 0, !0)
], 2)
]),
_: 2
}, 1032, ["model-value", "aria-labelledby"])
]),
_: 2
}, 1024))), 128))
]));
}
}), MazAccordion = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-88424696"]]);
export {
MazAccordion as default
};