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, toRef as J, watch as K, onMounted as O, createElementBlock as x, openBlock as i, normalizeClass as y, unref as e, createElementVNode as $, createVNode as d, createSlots as Q, withCtx as m, renderSlot as c, createCommentVNode as w, 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 N, isNull as I, 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__ */ H({
  name: "Tabs",
  __name: "tabs",
  props: ae,
  emits: ["update:active"],
  setup(z, { expose: B, emit: R }) {
    const l = Y("tabs", z, {
      active: {
        default: null,
        static: !0
      },
      card: !1,
      align: "left",
      placement: "top",
      closable: !1,
      showAdd: !1,
      lazy: !1,
      slots: () => ({})
    }), V = R, f = j(), t = Z("tabs"), n = k(l.active), L = 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 && F() && (n.value = s.value[0].label);
    }), g = N(() => {
      const a = s.value.findIndex((o) => o.label === n.value);
      ~a && (L.value = a);
    });
    G(
      le,
      _({
        currentActive: n,
        lazy: J(l, "lazy"),
        handleActive: h,
        increaseItem: M,
        decreaseItem: P,
        refreshLabels: v
      })
    ), K(
      () => l.active,
      (a) => {
        n.value = a;
      }
    ), O(g), B({
      currentActive: n,
      inTransition: b,
      itemList: s,
      handleActive: h,
      handleAdd: C,
      handleClose: S
    });
    function F() {
      return I(n.value) || n.value === "";
    }
    function M(a) {
      p.add(a), v();
    }
    function P(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, o) => (i(), x("div", {
      class: y([e(t).b(), e(t).bm(e(l).placement), e(l).inherit && e(t).bm("inherit")])
    }, [
      $("div", {
        class: y(e(t).be("header"))
      }, [
        d(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(() => [
            (i(!0), x(T, null, U(s.value, (r, D) => (i(), E(e(ne), {
              key: D,
              label: r.label,
              icon: r.icon,
              disabled: r.disabled,
              closable: r.closable
            }, {
              default: m(() => [
                e(ee)(r.labelRenderer) ? (i(), E(e(u), {
                  key: 0,
                  renderer: r.labelRenderer,
                  data: { label: r.label, disabled: r.disabled }
                }, null, 8, ["renderer", "data"])) : (i(), x(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 }, () => [
              d(e(u), {
                renderer: e(l).slots.add
              }, null, 8, ["renderer"])
            ]) : w("", !0),
            f.marker || e(l).slots.marker ? c(a.$slots, "marker", { key: 1 }, () => [
              d(e(u), {
                renderer: e(l).slots.marker
              }, null, 8, ["renderer"])
            ]) : w("", !0)
          ]),
          _: 2
        }, [
          f.prefix || e(l).slots.prefix ? {
            name: "prefix",
            fn: m(() => [
              c(a.$slots, "prefix", {}, () => [
                d(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", {}, () => [
                d(e(u), {
                  renderer: e(l).slots.suffix
                }, null, 8, ["renderer"])
              ])
            ]),
            key: "1"
          } : void 0
        ]), 1032, ["active", "card", "align", "placement", "closable", "show-add"])
      ], 2),
      $("div", {
        class: y({
          [e(t).be("main")]: !0,
          [e(t).bem("main", "transition")]: b.value
        }),
        onTransitionend: o[0] || (o[0] = (r) => b.value = !1)
      }, [
        c(a.$slots, "default")
      ], 34)
    ], 2));
  }
});
export {
  he as default
};
//# sourceMappingURL=tabs.vue2.mjs.map