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, createElementBlock as m, openBlock as f, normalizeClass as i, createElementVNode as v, createVNode as y, unref as l, renderSlot as C, normalizeProps as D, guardReactiveProps as G, 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) => (f(), m("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 ? (f(), m("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 ? (f(), m("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