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

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

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