ucc-ui/dist/es/CollapseItem-CdFTDU5f.js

ucc-ui components library

import { defineComponent as p, openBlock as i, createBlock as h, Transition as f, mergeProps as m, toHandlers as y, withCtx as g, renderSlot as d, inject as u, computed as v, createElementBlock as r, normalizeClass as _, createElementVNode as s, createTextVNode as H, toDisplayString as w, createVNode as c, unref as C, withDirectives as T, createCommentVNode as B, vShow as P } from "vue";
import { C as x } from "./Collapse-RsZZjbKX.js";
import { U as E } from "./Button-DOc5qANu.js";
const $ = /* @__PURE__ */ p({
  name: "UCollapseTransition",
  __name: "CollapseTransition",
  setup(n) {
    const e = (t) => {
      t.style.maxHeight = "", t.style.overflow = t.dataset.oldOverflow, t.style.paddingTop = t.dataset.oldPaddingTop, t.style.paddingBottom = t.dataset.oldPaddingBottom;
    }, o = {
      beforeEnter(t) {
        t.dataset || (t.dataset = {}), t.dataset.oldPaddingTop = t.style.paddingTop, t.dataset.oldPaddingBottom = t.style.paddingBottom, t.style.height && (t.dataset.elExistsHeight = t.style.height), t.style.maxHeight = 0, t.style.paddingTop = 0, t.style.paddingBottom = 0;
      },
      enter(t) {
        requestAnimationFrame(() => {
          t.dataset.oldOverflow = t.style.overflow, t.dataset.elExistsHeight ? t.style.maxHeight = t.dataset.elExistsHeight : t.scrollHeight !== 0 ? t.style.maxHeight = `${t.scrollHeight}px` : t.style.maxHeight = 0, t.style.paddingTop = t.dataset.oldPaddingTop, t.style.paddingBottom = t.dataset.oldPaddingBottom, t.style.overflow = "hidden";
        });
      },
      afterEnter(t) {
        t.style.maxHeight = "", t.style.overflow = t.dataset.oldOverflow;
      },
      enterCancelled(t) {
        e(t);
      },
      beforeLeave(t) {
        t.dataset || (t.dataset = {}), t.dataset.oldPaddingTop = t.style.paddingTop, t.dataset.oldPaddingBottom = t.style.paddingBottom, t.dataset.oldOverflow = t.style.overflow, t.style.maxHeight = `${t.scrollHeight}px`, t.style.overflow = "hidden";
      },
      leave(t) {
        t.scrollHeight !== 0 && (t.style.maxHeight = 0, t.style.paddingTop = 0, t.style.paddingBottom = 0);
      },
      afterLeave(t) {
        e(t);
      },
      leaveCancelled(t) {
        e(t);
      }
    };
    return (t, l) => (i(), h(f, m({ name: "u-collapse-transition" }, y(o)), {
      default: g(() => [
        d(t.$slots, "default")
      ]),
      _: 3
    }, 16));
  }
}), b = { class: "u-collapse-item__title" }, k = { class: "u-collapse-item__arrow" }, N = { class: "u-collapse-item__wrap" }, O = ["aria-hidden"], V = /* @__PURE__ */ p({
  name: "UCollapseItem",
  __name: "CollapseItem",
  props: {
    name: {},
    title: {},
    disabled: { type: Boolean },
    iconProps: {}
  },
  setup(n) {
    const e = n, o = u(x), t = v(() => o.activeNames.value.includes(e.name)), l = () => {
      e.disabled || o.handleItemClick(e.name);
    };
    return (a, I) => (i(), r("div", {
      class: _(["u-collapse-item", {
        "is-active": t.value,
        "is-disabled": a.disabled
      }])
    }, [
      s("div", {
        class: "u-collapse-item__header",
        onClick: l
      }, [
        s("div", b, [
          d(a.$slots, "title", {}, () => [
            H(w(a.title), 1)
          ])
        ]),
        s("div", k, [
          d(a.$slots, "icon", {}, () => [
            c(C(E), m({ icon: "angle-right" }, a.iconProps ?? void 0), null, 16)
          ])
        ])
      ]),
      c($, null, {
        default: g(() => [
          T(s("div", N, [
            a.$slots.default ? (i(), r("div", {
              key: 0,
              class: "u-collapse-item__content",
              "aria-hidden": !t.value
            }, [
              d(a.$slots, "default")
            ], 8, O)) : B("", !0)
          ], 512), [
            [P, t.value]
          ])
        ]),
        _: 3
      })
    ], 2));
  }
});
export {
  V as _
};