import { useCssVars as y, computed as s, ref as r, onMounted as b, watch as _, openBlock as u, createElementBlock as v, createElementVNode as n, normalizeClass as $, normalizeStyle as p, renderSlot as c, normalizeProps as i, mergeProps as O, createBlock as D, createCommentVNode as N, guardReactiveProps as m } from "vue";
import w from "./BaseIcon-DpLJi6ci.js";
import { u as x } from "./useNestedProp-BYPZJNhi.js";
import { u as B, c as I } from "./index-Cm2_6s9o.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) {
    const f = l;
    y((o) => ({
      "95f7c2e4": C.value
    }));
    const { vue_ui_accordion: g } = B(), e = s(() => x({
      userConfig: f.config,
      defaultConfig: g
    })), 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 ? N("", !0) : (u(), v("div", P, [
              e.value.head.useArrowSlot ? c(o.$slots, "arrow", i(O({ 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
};
