@layui/layui-vue/es/tab/index2.js

a component library for Vue 3 base on layui-vue

import { defineComponent as ve, useSlots as fe, reactive as H, ref as S, computed as I, provide as j, shallowRef as h, watch as F, nextTick as de, onMounted as pe, openBlock as f, createElementBlock as m, normalizeClass as M, createElementVNode as D, normalizeStyle as K, createCommentVNode as w, Fragment as O, renderList as me, withModifiers as G, createBlock as ye, unref as L, createVNode as X, renderSlot as be, h as J, createTextVNode as he } from "vue";
/* empty css           */
import { LayIcon as N } from "@layui/icons-vue";
import ge from "../tabItem/index2.js";
import Q from "../_components/render.js";
import { useResizeObserver as Ce } from "@vueuse/core";
import { TabInjectKey as ke } from "./interface.js";
import { isArrayChildren as we } from "../utils/vueUtil.js";
const Pe = ["onClick"], Be = ["onClick"], Re = { class: "layui-tab-content" }, Te = ve({ name: "LayTab", __name: "index", props: { type: {}, modelValue: {}, allowClose: { type: Boolean }, tabPosition: { default: "top" }, beforeClose: {}, beforeLeave: {}, activeBarTransition: { type: Boolean } }, emits: ["update:modelValue", "change", "close"], setup(U, { emit: Z }) {
  const E = fe(), P = H(/* @__PURE__ */ new Map()), d = S([]), W = function(e) {
    e == null || e.map((t) => {
      we(t, t.children) ? W(t.children) : t.type.name == ge.name && d.value.push(t);
    });
  }, l = U, B = Z, R = I({ get: () => l.modelValue, set(e) {
    B("update:modelValue", e);
  } }), ee = I(() => {
    const e = [];
    return d.value.forEach((t) => {
      var o;
      const a = P.get((o = t.props) == null ? void 0 : o.id);
      a && e.push(a);
    }), e;
  });
  j(ke, H({ active: R, addItem: (e, t) => {
    P.set(e, t);
  }, removeItem: (e) => {
    P.delete(e);
  } }));
  const Y = function(e) {
    l.beforeLeave && l.beforeLeave(e) === !1 || (B("update:modelValue", e), B("change", e));
  }, te = h(void 0), T = h(void 0), z = S(), r = h(void 0), y = S(!1), s = S(0), ae = I(() => {
    const e = l.tabPosition === "top" || l.tabPosition === "bottom" ? "X" : "Y", t = e === "X" ? "left" : "top", a = u(C.value) ?? 0;
    return { transform: `translate${e}(-${s.value}px)`, [t]: y.value ? `${a}px` : 0 };
  }), oe = I(() => l.tabPosition === "top" || l.tabPosition === "bottom" ? "Width" : "Height"), x = function() {
    var a;
    let e = 0;
    const t = (a = r.value) == null ? void 0 : a.querySelectorAll("li");
    return t == null || t.forEach((o) => {
      e += u(o);
    }), e;
  }, g = h(void 0), C = h(void 0), le = function() {
    if (!r.value)
      return;
    const e = u(r.value), t = s.value;
    if (!t)
      return;
    let a = t > e ? t - e : 0;
    s.value = a;
  }, u = function(e) {
    return e ? oe.value === "Width" ? e.offsetWidth + parseInt(window.getComputedStyle(e).marginLeft) + parseInt(window.getComputedStyle(e).marginRight) : e.offsetHeight + parseInt(window.getComputedStyle(e).marginTop) + parseInt(window.getComputedStyle(e).marginBottom) : 0;
  }, ie = function() {
    if (!r.value)
      return;
    const e = x(), t = u(r.value), a = s.value, o = u(g.value) ?? 0, v = u(C.value) ?? 0;
    if (e - a <= t)
      return;
    let n = e - a > 2 * t ? a + t : e - t + o + v;
    s.value = n;
  }, q = h(void 0), A = function() {
    if (!y.value)
      return;
    const e = T.value, t = q.value;
    if (!e || !t)
      return;
    const a = e == null ? void 0 : e.getBoundingClientRect(), o = t == null ? void 0 : t.getBoundingClientRect(), v = ["top", "bottom"].includes(l.tabPosition), n = s.value;
    let i = n;
    const c = x(), p = u(g.value) ?? 0, b = u(C.value) ?? 0, V = v ? c - o.width + p + b : c - o.height + p + b;
    v ? (a.left < o.left && (i = n - (o.left - a.left), i -= b), a.right > o.right && (i = n + a.right - o.right, i += p)) : (a.top < o.top && (i = n - (o.top - a.top)), a.bottom > o.bottom && (i = n + (a.bottom - o.bottom))), i = Math.max(i, 0), s.value = Math.min(i, V);
  }, _ = () => {
    var n;
    if (!r.value || (T.value = (n = r.value) == null ? void 0 : n.querySelector(".layui-this"), z.value = (() => {
      let i = 0, c = 0;
      const p = l.tabPosition === "top" || l.tabPosition === "bottom" ? "width" : "height", b = p === "width" ? "X" : "Y", V = b === "X" ? "left" : "top", k = T.value, $ = r.value;
      if (!k || !$)
        return;
      const re = k == null ? void 0 : k.getBoundingClientRect(), ce = $ == null ? void 0 : $.getBoundingClientRect();
      return i = re[V] - ce[V], c = k.getBoundingClientRect()[p], { [p]: `${c}px`, transform: `translate${b}(${i}px)`, transition: l.activeBarTransition ? "transform .3s" : "" };
    })(), l.tabPosition !== "top" && l.tabPosition !== "bottom"))
      return;
    const e = x(), t = u(r.value), a = s.value, o = u(g.value) ?? 0, v = u(C.value) ?? 0;
    if (t < e) {
      const i = s.value;
      y.value = !0, e - i < t && (s.value = e - t + o + v), A();
    } else
      y.value = !1, a > 0 && (s.value = 0);
  }, ne = (e) => {
    e.preventDefault();
    const t = x(), a = u(r.value), o = s.value, v = u(g.value) ?? 0, n = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY, i = 50 * (n > 0 ? 1 : -1), c = Math.max(o + i, 0);
    t - o <= a - v && n > 0 || (s.value = c);
  }, se = (e) => {
    const t = e.tabData;
    return typeof t.icon == "function" ? t.icon() : typeof t.icon == "string" ? J(N, { type: t.icon, style: "margin-right: 8px;" }) : void 0;
  }, ue = (e) => {
    var a, o;
    const t = e.tabData;
    return (a = t.slots) != null && a.title ? J(O, ((o = t.slots) == null ? void 0 : o.title) && t.slots.title()) : typeof t.title == "function" ? t.title() : typeof t.title == "string" ? he(t.title) : void 0;
  };
  return Ce(r, _), F(P, () => {
    d.value = [], W(E.default && E.default());
  }, { immediate: !0, deep: !0 }), F(() => [l.modelValue, l.tabPosition, l.type, d.value.length], async () => {
    await de(), _();
  }), pe(() => {
    _(), A();
  }), j("active", R), (e, t) => (f(), m("div", { class: M(["layui-tab", [e.type ? "layui-tab-" + e.type : "", l.tabPosition ? `is-${e.tabPosition}` : ""]]) }, [D("div", { ref_key: "headRef", ref: q, class: M(["layui-tab-head", l.tabPosition ? `is-${e.tabPosition}` : ""]) }, [D("ul", { ref_key: "navRef", ref: r, onWheel: ne, class: M(["layui-tab-title", l.tabPosition ? `is-${e.tabPosition}` : ""]), style: K(ae.value) }, [e.type === "brief" ? (f(), m("div", { key: 0, ref_key: "activeBarRef", ref: te, class: "layui-tab-active-bar", style: K(z.value) }, null, 4)) : w("", !0), (f(!0), m(O, null, me(ee.value, (a, o) => (f(), m("li", { key: a.id, class: M([a.id === R.value ? "layui-this" : ""]), onClick: G((v) => Y(a.id), ["stop"]) }, [D("span", null, [a.icon ? (f(), ye(L(Q), { key: 0, render: se, tabData: a }, null, 8, ["tabData"])) : w("", !0), X(L(Q), { render: ue, tabData: a }, null, 8, ["tabData"])]), e.allowClose && a.closable != 0 ? (f(), m("i", { key: 0, class: "layui-icon layui-icon-close layui-unselect layui-tab-close", onClick: G((v) => function(n, i) {
    if (!l.beforeClose || l.beforeClose(i) !== !1) {
      if (d.value.splice(n, 1), R.value === i) {
        const c = d.value[n === d.value.length ? 0 : n];
        Y(c && c.props ? c.props.id : "");
      }
      B("close", i);
    }
  }(o, a.id), ["stop"]) }, null, 8, Be)) : w("", !0)], 10, Pe))), 128))], 38), y.value ? (f(), m("span", { key: 0, ref_key: "scrollPrevRef", ref: C, class: "layui-unselect layui-tab-bar prev", onClick: le }, [X(L(N), { type: "layui-icon-left" })], 512)) : w("", !0), y.value ? (f(), m("span", { key: 1, ref_key: "scrollNextRef", ref: g, class: "layui-unselect layui-tab-bar", onClick: ie }, [X(L(N), { type: "layui-icon-right" })], 512)) : w("", !0)], 2), D("div", Re, [be(e.$slots, "default")])], 2));
} });
export {
  Te as default
};