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
};
