@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
151 lines (150 loc) • 4.24 kB
JavaScript
import { defineComponent as j, inject as z, computed as D, reactive as H, ref as h, watch as g, openBlock as s, createBlock as y, resolveDynamicComponent as F, normalizeStyle as K, unref as a, normalizeClass as l, withCtx as A, createElementVNode as r, renderSlot as u, createElementBlock as x, createCommentVNode as k, createVNode as M, Transition as X, withDirectives as q, vShow as G } from "vue";
import { useTheme as J } from "../../composables/useTheme.js";
import O from "../icon/Icon.vue.js";
import { injectAccordionKey as Q } from "../../composables/keys.js";
const R = { class: "flex-1 overflow-hidden" }, U = {
key: 1,
viewBox: "0 0 24 24",
stroke: "currentColor",
fill: "none",
role: "presentation",
class: "stroke-2 w-4 h-4"
}, W = ["left", "right"], Y = {
tag: {
type: String,
default: "div"
},
disabled: Boolean,
expanded: Boolean,
showIcon: {
type: Boolean,
default: !0
},
icon: String,
iconAlign: {
type: String,
default: "right"
}
}, Z = {
name: "XAccordionItem",
validators: {
iconAlign: W
}
}, ie = /* @__PURE__ */ j({
...Z,
props: Y,
emits: ["expand", "change"],
setup(w, { expose: I, emit: B }) {
const i = w, p = B, f = z(Q, {
isInsideAccordion: !1
}), b = D(() => f.iconAlign || i.iconAlign), C = H({
iconAlign: b
}), n = h(!i.expanded), o = h(!0);
g(() => i.expanded, () => {
n.value = !i.expanded;
}), g(n, (e, t) => {
p("change", !e);
});
function E(e) {
o.value && (e.style.height = "0px");
}
function $(e, t) {
o.value ? (e.addEventListener("transitionend", t), setTimeout(() => {
e.style.height = `${e.scrollHeight}px`;
}, 1)) : t();
}
function S(e) {
o.value ? e.style.removeProperty("height") : o.value = !0;
}
function L(e) {
o.value && (e.style.height = `${e.scrollHeight}px`);
}
function P(e, t) {
o.value ? (e.addEventListener("transitionend", t), setTimeout(() => {
e.style.height = "0px";
}, 1)) : t();
}
function _(e) {
o.value ? e.style.removeProperty("height") : o.value = !0;
}
function m(e = !0) {
o.value = e, n.value = !1;
}
function N(e = !0) {
o.value = e, n.value = !0;
}
function v() {
i.disabled || (n.value = !n.value);
}
function c(e = !0) {
m(e), p("expand");
}
const { styles: T, classes: d, className: V } = J("AccordionItem", {}, {
...i,
...C
}, { collapsed: n, isInsideAccordion: f.isInsideAccordion });
return I({ toggle: v, open: m, close: N }), (e, t) => (s(), y(F(e.tag), {
style: K(a(T)),
class: l(a(V)),
"aria-disabled": e.disabled,
"aria-expanded": n.value ? "false" : "true"
}, {
default: A(() => [
r("button", {
type: "button",
class: l(a(d).wrapper),
onClick: v
}, [
r("div", R, [
u(e.$slots, "default", {
expand: c,
collapsed: n.value
})
]),
e.showIcon ? (s(), x("div", {
key: 0,
class: l(a(d).icon)
}, [
e.icon ? (s(), y(O, {
key: 0,
icon: e.icon
}, null, 8, ["icon"])) : (s(), x("svg", U, t[0] || (t[0] = [
r("path", { d: "M19 9l-7 7-7-7" }, null, -1)
])))
], 2)) : k("", !0)
], 2),
e.$slots.summary ? u(e.$slots, "summary", {
key: 0,
expand: c,
collapsed: n.value
}) : k("", !0),
M(X, {
onBeforeEnter: E,
onEnter: $,
onAfterEnter: S,
onBeforeLeave: L,
onLeave: P,
onAfterLeave: _
}, {
default: A(() => [
q(r("div", {
class: l(a(d).content)
}, [
u(e.$slots, "content", {
expand: c,
collapsed: n.value
})
], 2), [
[G, !n.value]
])
]),
_: 3
})
]),
_: 3
}, 8, ["style", "class", "aria-disabled", "aria-expanded"]));
}
});
export {
ie as default
};