@extclp/vexip-ui/es/components/collapse/collapse-panel.vue2.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as B, inject as L, ref as b, computed as s, reactive as R, watch as T, onBeforeUnmount as j, openBlock as m, createElementBlock as f, normalizeClass as i, createElementVNode as v, unref as l, createVNode as y, normalizeProps as D, guardReactiveProps as G, renderSlot as C, createCommentVNode as w, createTextVNode as H, toDisplayString as O, withCtx as U, normalizeStyle as q } from "vue";
import "../collapse-transition/index.mjs";
import "../icon/index.mjs";
import { useProps as F, createIconProp as J, useNameHelper as K, useIcons as M, emitEvent as Q } from "@vexip-ui/config";
import { collapsePanelProps as W } from "./props.mjs";
import { COLLAPSE_STATE as X, getIndexId as Y } from "./symbol.mjs";
import S from "../icon/icon.mjs";
import Z from "./collapse-transition.mjs";
const ee = ["id", "aria-expanded", "aria-controls", "aria-describedby"], ae = ["id", "aria-labelledby"], ue = /* @__PURE__ */ B({
  name: "CollapsePanel",
  __name: "collapse-panel",
  props: W,
  emits: ["update:expanded"],
  setup($, { expose: E, emit: I }) {
    const a = F("collapsePanel", $, {
      label: {
        default: null,
        static: !0
      },
      title: "",
      disabled: !1,
      contentStyle: null,
      expanded: !1,
      card: !1,
      arrowType: {
        default: "right",
        validator: (e) => ["right", "left", "none"].includes(e)
      },
      icon: J(),
      ghost: !1
    }), k = I, n = L(X, null), t = K("collapse"), N = M(), o = b(a.expanded), d = b(a.label), u = b(), g = Y(), p = s(() => `${t.be("tab")}-${g}`), c = s(() => `${t.be("body")}-${g}`), h = s(() => n ? !1 : a.card), V = s(() => n ? !1 : a.ghost), z = s(() => n ? n.arrowType : a.arrowType), A = s(() => [
      t.be("panel"),
      t.bs("vars"),
      t.bem("panel", `arrow-${z.value}`),
      {
        [t.bem("panel", "inherit")]: n || a.inherit,
        [t.bem("panel", "card")]: h.value,
        [t.bem("panel", "ghost")]: !h.value && V.value,
        [t.bem("panel", "expanded")]: o.value,
        [t.bem("panel", "disabled")]: a.disabled
      }
    ]);
    if (n) {
      const e = R({
        tab: u,
        label: d,
        expanded: o,
        setExpanded: x
      });
      T(
        () => a.label,
        (r) => {
          const _ = d.value;
          d.value = r || r === 0 ? r : _;
        }
      ), n.registerPanel(e), j(() => {
        n.unregisterPanel(e);
      });
    } else
      T(
        () => a.expanded,
        (e) => {
          o.value = e;
        }
      );
    function x(e) {
      o.value = e, k("update:expanded", e), Q(a.onToggle, e);
    }
    function P(e = !o.value) {
      a.disabled || (n ? n.expandPanel(d.value, e) : x(e));
    }
    return E({
      currentExpanded: o,
      tab: u,
      tabId: p,
      bodyId: c,
      handleToggle: P
    }), (e, r) => (m(), f("section", {
      class: i(A.value)
    }, [
      v("button", {
        id: p.value,
        ref_key: "tab",
        ref: u,
        class: i(l(t).be("header")),
        type: "button",
        role: "tab",
        "aria-expanded": o.value,
        "aria-controls": c.value,
        "aria-describedby": c.value,
        onClick: r[0] || (r[0] = (_) => P())
      }, [
        v("div", {
          class: i(l(t).be("arrow"))
        }, [
          y(l(S), D(G(l(N).angleRight)), null, 16)
        ], 2),
        C(e.$slots, "title", {}, () => [
          l(a).icon ? (m(), f("div", {
            key: 0,
            class: i(l(t).be("icon"))
          }, [
            y(l(S), {
              icon: l(a).icon
            }, null, 8, ["icon"])
          ], 2)) : w("", !0),
          H(" " + O(l(a).title), 1)
        ])
      ], 10, ee),
      y(l(Z), null, {
        default: U(() => [
          o.value ? (m(), f("div", {
            key: 0,
            id: c.value,
            class: i(l(t).be("body")),
            role: "tabpanel",
            tabindex: "0",
            "aria-labelledby": p.value
          }, [
            v("div", {
              class: i(l(t).be("content")),
              style: q(l(a).contentStyle)
            }, [
              C(e.$slots, "default")
            ], 6)
          ], 10, ae)) : w("", !0)
        ]),
        _: 3
      })
    ], 2));
  }
});
export {
  ue as default
};
//# sourceMappingURL=collapse-panel.vue2.mjs.map