@extclp/vexip-ui/es/components/tabs/tabs.vue2.mjs

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

import { defineComponent as H, useSlots as j, ref as k, reactive as _, computed as q, provide as G, watch as J, onMounted as K, openBlock as i, createElementBlock as x, normalizeClass as A, unref as e, createElementVNode as $, createVNode as d, createSlots as O, withCtx as m, Fragment as w, renderList as Q, createBlock as T, createTextVNode as U, toDisplayString as W, renderSlot as c, createCommentVNode as E } from "vue";
import "../renderer/index.mjs";
import "../tab-nav/index.mjs";
import "../tab-nav-item/index.mjs";
import { useProps as X, useNameHelper as Y, emitEvent as y } from "@vexip-ui/config";
import { debounceMinor as N, isNull as I, isFunction as Z } from "@vexip-ui/utils";
import { tabsProps as ee } from "./props.mjs";
import { TABS_STATE as ae } from "./symbol.mjs";
import re from "../tab-nav/tab-nav.vue2.mjs";
import le from "../tab-nav/tab-nav-item.vue2.mjs";
import u from "../renderer/renderer.mjs";
const ve = /* @__PURE__ */ H({
  name: "Tabs",
  __name: "tabs",
  props: ee,
  emits: ["update:active"],
  setup(B, { expose: V, emit: L }) {
    const r = X("tabs", B, {
      active: {
        default: null,
        static: !0
      },
      card: !1,
      align: "left",
      placement: "top",
      closable: !1,
      showAdd: !1,
      slots: () => ({})
    }), R = L, f = j(), t = Y("tabs"), n = k(r.active), F = k(0), p = _(/* @__PURE__ */ new Set()), b = k(!1), s = q(() => Array.from(p)), v = N(() => {
      s.value.forEach((a, o) => {
        I(a.label) && (a.label = o + 1);
      }), s.value.length >= 1 && M() && (n.value = s.value[0].label);
    }), g = N(() => {
      const a = s.value.findIndex((o) => o.label === n.value);
      ~a && (F.value = a);
    });
    G(
      ae,
      _({
        currentActive: n,
        handleActive: h,
        increaseItem: P,
        decreaseItem: z,
        refreshLabels: v
      })
    ), J(
      () => r.active,
      (a) => {
        n.value = a;
      }
    ), K(g), V({
      currentActive: n,
      isTransition: b,
      itemList: s,
      handleActive: h,
      handleAdd: C,
      handleClose: S
    });
    function M() {
      return I(n.value) || n.value === "";
    }
    function P(a) {
      p.add(a), v();
    }
    function z(a) {
      p.delete(a), v();
    }
    function h(a) {
      n.value = a, g(), R("update:active", a), y(r.onChange, a);
    }
    function C() {
      y(r.onAdd);
    }
    function S(a) {
      y(r.onClose, a);
    }
    return (a, o) => (i(), x("div", {
      class: A([e(t).b(), e(t).bm(e(r).placement), e(r).inherit && e(t).bm("inherit")])
    }, [
      $("div", {
        class: A(e(t).be("header"))
      }, [
        d(e(re), {
          inherit: "",
          active: n.value,
          card: e(r).card,
          align: e(r).align,
          placement: e(r).placement,
          closable: e(r).closable,
          "show-add": e(r).showAdd,
          onChange: h,
          onAdd: C,
          onClose: S
        }, O({
          default: m(() => [
            (i(!0), x(w, null, Q(s.value, (l, D) => (i(), T(e(le), {
              key: D,
              label: l.label,
              icon: l.icon,
              disabled: l.disabled,
              closable: l.closable
            }, {
              default: m(() => [
                e(Z)(l.labelRenderer) ? (i(), T(e(u), {
                  key: 0,
                  renderer: l.labelRenderer,
                  data: { label: l.label, disabled: l.disabled }
                }, null, 8, ["renderer", "data"])) : (i(), x(w, { key: 1 }, [
                  U(W(l.name || l.label), 1)
                ], 64))
              ]),
              _: 2
            }, 1032, ["label", "icon", "disabled", "closable"]))), 128)),
            f.add || e(r).slots.add ? c(a.$slots, "add", { key: 0 }, () => [
              d(e(u), {
                renderer: e(r).slots.add
              }, null, 8, ["renderer"])
            ]) : E("", !0),
            f.marker || e(r).slots.marker ? c(a.$slots, "marker", { key: 1 }, () => [
              d(e(u), {
                renderer: e(r).slots.marker
              }, null, 8, ["renderer"])
            ]) : E("", !0)
          ]),
          _: 2
        }, [
          f.prefix || e(r).slots.prefix ? {
            name: "prefix",
            fn: m(() => [
              c(a.$slots, "prefix", {}, () => [
                d(e(u), {
                  renderer: e(r).slots.prefix
                }, null, 8, ["renderer"])
              ])
            ]),
            key: "0"
          } : void 0,
          f.suffix || e(r).slots.suffix ? {
            name: "suffix",
            fn: m(() => [
              c(a.$slots, "suffix", {}, () => [
                d(e(u), {
                  renderer: e(r).slots.suffix
                }, null, 8, ["renderer"])
              ])
            ]),
            key: "1"
          } : void 0
        ]), 1032, ["active", "card", "align", "placement", "closable", "show-add"])
      ], 2),
      $("div", {
        class: A({
          [e(t).be("main")]: !0,
          [e(t).bem("main", "transition")]: b.value
        }),
        onTransitionend: o[0] || (o[0] = (l) => b.value = !1)
      }, [
        c(a.$slots, "default")
      ], 34)
    ], 2));
  }
});
export {
  ve as default
};
//# sourceMappingURL=tabs.vue2.mjs.map