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

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

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