vue-data-ui/dist/vue-ui-accordion-Dm0mNNKQ.js

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

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