vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
77 lines (76 loc) • 2.88 kB
JavaScript
import { useCssVars as y, computed as s, ref as r, onMounted as b, watch as _, createElementBlock as v, openBlock as u, createElementVNode as n, normalizeClass as $, normalizeStyle as p, createCommentVNode as O, renderSlot as c, createBlock as D, normalizeProps as i, mergeProps as N, guardReactiveProps as m } from "vue";
import w from "./BaseIcon-AmoKryXo.js";
import { u as x } from "./useNestedProp-ByBiJC9_.js";
import { u as B, c as I } from "./index-CHWA6Lnw.js";
import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const F = ["id"], P = {
key: 0,
class: "vue-ui-accordion-arrow"
}, z = {
__name: "vue-ui-accordion",
props: {
config: {
type: Object,
default() {
return {};
}
},
hideDetails: {
type: Boolean,
default: !1
}
},
setup(l) {
y((o) => ({
"95f7c2e4": C.value
}));
const { vue_ui_accordion: f } = B(), g = l, e = s(() => x({
userConfig: g.config,
defaultConfig: f
})), a = r(e.value.open), h = r(I()), t = r(null), d = r(0);
b(() => {
t.value.open = e.value.open;
}), _(() => e.value.open, (o) => {
t.value.open = o;
});
function k() {
(d.value > 0 || !e.value.open) && (a.value = !a.value), d.value += 1;
}
const C = s(() => `${e.value.maxHeight}px`);
return (o, E) => (u(), v("div", null, [
n("details", {
id: `details_${h.value}`,
ref_key: "details",
ref: t,
onToggle: k
}, [
n("summary", {
class: $({ "vue-ui-accordion-headless": l.hideDetails })
}, [
n("div", {
class: "vue-ui-accordion-head",
style: p(`background:${e.value.head.backgroundColor};padding:${e.value.head.padding}; ${l.hideDetails ? "height: 0px !important; padding: 0 !important;" : ""}`)
}, [
l.hideDetails ? O("", !0) : (u(), v("div", P, [
e.value.head.useArrowSlot ? c(o.$slots, "arrow", i(N({ key: 0 }, { backgroundColor: e.value.head.backgroundColor, color: e.value.head.color, iconColor: e.value.head.iconColor, isOpen: a.value })), void 0, !0) : (u(), D(w, {
key: 1,
name: "arrowRight",
stroke: e.value.head.iconColor
}, null, 8, ["stroke"]))
])),
c(o.$slots, "title", i(m({ color: e.value.head.color, isOpen: a.value })), void 0, !0)
], 4)
], 2)
], 40, F),
n("div", {
class: "vue-ui-accordion-content",
style: p(`background:${e.value.body.backgroundColor};color:${e.value.body.color}`)
}, [
c(o.$slots, "content", i(m({ backgroundColor: e.value.body.backgroundColor, color: e.value.body.color, isOpen: a.value })), void 0, !0)
], 4)
]));
}
}, R = /* @__PURE__ */ A(z, [["__scopeId", "data-v-28fc829c"]]);
export {
R as default
};