vue-data-ui-hq/dist/vue-ui-accordion-BQCDXXDs.js

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

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