hys-ui 0.6.0 → 0.8.0

package/dist/components/HysTabs/useTabsPointer.js

@@ -0,0 +1,131 @@
+import { ref as F, onDeactivated as Z, onBeforeUnmount as _ } from "vue";
+import { bounded as H, tabToken as $ } from "./tabsItems.js";
+import { useTabsDragGhost as V } from "./useTabsDragGhost.js";
+function ot(l, c, k, M, L, D, j, q, z) {
+  const m = V(), h = F(), f = F();
+  let s, y, P, X, v = !1, p = !1;
+  function w() {
+    clearTimeout(P), P = void 0;
+  }
+  function T() {
+    clearTimeout(X), v = !1;
+  }
+  function Y() {
+    T(), v = !0, X = setTimeout(() => {
+      v = !1;
+    }, 450);
+  }
+  function A(t) {
+    v && (t.preventDefault(), t.stopImmediatePropagation(), T());
+  }
+  function J(t) {
+    if (l().disabled || !t.isPrimary || t.button !== 0) return;
+    T();
+    const e = t.target, i = e.closest(".hys-ui-tab-item");
+    if (e.closest(".hys-ui-tab-close")) return;
+    const o = i != null && i.dataset.tabGroup ? k(i.dataset.tabGroup) : void 0, n = !!(o && l().draggable && M(o) && (!l().dragHandle || e.closest(".hys-tab-drag-handle"))), a = !!l().dragScroll && t.pointerType !== "touch";
+    s = {
+      id: t.pointerId,
+      x: t.clientX,
+      y: t.clientY,
+      last: D() ? t.clientY : t.clientX,
+      item: o,
+      reorder: n,
+      scroll: a
+    };
+    const r = H(
+      l().longPress,
+      l().workbench || l().contextMenu ? 550 : 0,
+      5e3
+    );
+    o && r && t.pointerType !== "mouse" && !e.closest(".hys-tab-drag-handle") && (P = setTimeout(() => {
+      (s == null ? void 0 : s.id) === t.pointerId && (s = void 0, Y(), j(o, t));
+    }, r));
+  }
+  function K(t) {
+    var B, R, S, U, E;
+    const e = s, i = c.nav.value;
+    if (!e || e.id !== t.pointerId || !i) return;
+    const o = t.clientX, n = t.clientY, a = D(), r = a ? n : o;
+    if (h.value === void 0 && !p) {
+      if (Math.hypot(o - e.x, n - e.y) < 7 || (w(), !e.reorder && !e.scroll)) return;
+      if ((B = i.setPointerCapture) == null || B.call(i, t.pointerId), e.reorder) {
+        const d = e.item;
+        h.value = d.value;
+        const b = (S = (R = c.button(d.value)) == null ? void 0 : R.closest(".hys-ui-tab-item")) == null ? void 0 : S.getBoundingClientRect();
+        b && m.show(d, b, { x: e.x, y: e.y });
+      } else p = !0;
+    }
+    if (t.preventDefault(), p) {
+      c.scrollPixels(e.last - r), e.last = r;
+      return;
+    }
+    m.move(o, n);
+    const u = i.getBoundingClientRect();
+    if (o < u.left - 12 || o > u.right + 12 || n < u.top - 12 || n > u.bottom + 12) {
+      f.value = void 0;
+      return;
+    }
+    const g = (U = document.elementFromPoint(o, n)) == null ? void 0 : U.closest(".hys-ui-tab-item"), C = g == null ? void 0 : g.dataset.tabGroup, x = C ? k(C) : void 0;
+    if (g && i.contains(g) && x && M(x) && x.value !== e.item.value) {
+      const d = g.getBoundingClientRect(), b = a ? (d.top + d.bottom) / 2 : (d.left + d.right) / 2;
+      (((E = f.value) == null ? void 0 : E.value) !== x.value || Math.abs(r - b) > 4) && (f.value = {
+        value: x.value,
+        after: a || !c.rtl() ? r > b : r < b
+      });
+    } else C !== $(e.item.value) && (f.value = void 0);
+    const Q = a ? u.top : u.left, W = a ? u.bottom : u.right;
+    r < Q + 16 ? c.scrollPixels(-8) : r > W - 16 && c.scrollPixels(8);
+  }
+  function I(t, e = !1) {
+    if (!s || t && s.id !== t.pointerId) return;
+    w();
+    const i = h.value, o = f.value;
+    if ((i !== void 0 || p) && Y(), s = void 0, h.value = void 0, f.value = void 0, p = !1, i !== void 0) {
+      const n = !e && o ? L(i, o.value, o.after) : void 0;
+      m.land(
+        n,
+        () => {
+          var a;
+          return (a = c.button(i)) == null ? void 0 : a.closest(".hys-ui-tab-item");
+        },
+        z() ? H(l().duration, 160, 5e3) : 0,
+        l().easing ?? "ease-out"
+      );
+    }
+  }
+  function N(t) {
+    l().swipe && !l().disabled && t.pointerType === "touch" && t.isPrimary && !t.target.closest(
+      "button,input,a,select,textarea,[contenteditable]"
+    ) && (y = { id: t.pointerId, x: t.clientX, y: t.clientY });
+  }
+  function O(t) {
+    const e = y;
+    if (y = void 0, !e || t.pointerId !== e.id || !l().swipe || l().disabled)
+      return;
+    const i = t.clientX - e.x, o = t.clientY - e.y;
+    Math.abs(i) >= 45 && Math.abs(i) > Math.abs(o) * 1.35 && q(Math.sign(i) * (c.rtl() ? 1 : -1));
+  }
+  function G() {
+    I(void 0, !0), w(), T(), y = void 0, m.clear();
+  }
+  return Z(G), _(G), {
+    dragging: h,
+    drop: f,
+    ghost: m.ghost,
+    ghostElement: m.element,
+    down: J,
+    motion: K,
+    finish: I,
+    cancel: (t) => I(t, !0),
+    clickCapture: A,
+    swipeDown: N,
+    swipeUp: O,
+    cancelSwipe: () => {
+      y = void 0;
+    }
+  };
+}
+export {
+  ot as useTabsPointer
+};

package/dist/components/HysTabs/useTabsState.js

@@ -0,0 +1,263 @@
+import { shallowRef as z, ref as Z, computed as I, reactive as oe, watch as H, onActivated as fe, onDeactivated as se, onBeforeUnmount as ce, nextTick as k } from "vue";
+import { orderedTabs as T, usable as b, bounded as ve, neighbor as de } from "./tabsItems.js";
+function _(l, A) {
+  return new Promise((w, o) => {
+    const S = () => w(!1);
+    A.aborted ? S() : A.addEventListener("abort", S, { once: !0 }), Promise.resolve(l).then((J) => w(J !== !1), o).finally(() => A.removeEventListener("abort", S));
+  });
+}
+function he(l, A, w, o, S) {
+  const J = z([...l().defaultItems ?? []]), j = Z(l().defaultValue), d = I(
+    () => T(l().items ?? (w() ? A() : J.value))
+  ), g = I(() => d.value.filter((e) => !e.hidden)), u = I(
+    () => new Map(d.value.map((e) => [e.value, e]))
+  ), $ = I(
+    () => l().disabled ? [] : g.value.filter(b)
+  ), h = I(() => {
+    var a;
+    if (l().modelValue !== void 0) return l().modelValue;
+    const e = j.value === void 0 ? void 0 : u.value.get(j.value);
+    return e && b(e) ? e.value : ((a = g.value.find(b)) == null ? void 0 : a.value) ?? "";
+  }), R = Z(!1), B = oe(/* @__PURE__ */ new Set()), F = z([]), C = z([]), Q = I(() => ve(l().historyLimit, 20, 200));
+  let y, s = !0, D = 0, G = !1;
+  const x = /* @__PURE__ */ new Map();
+  function N() {
+    y == null || y.abort(), y = void 0, R.value = !1;
+  }
+  function K() {
+    N();
+    for (const e of x.values()) e.abort();
+    x.clear(), B.clear();
+  }
+  function W(e, a, t) {
+    j.value = e, o("update:modelValue", e), o("change", e), o("selectionChange", { value: e, previous: a, source: t });
+  }
+  async function U(e, a = "api") {
+    N();
+    const t = u.value.get(e), r = h.value;
+    if (!s || l().disabled || !t || !b(t)) return !1;
+    if (e === r) return !0;
+    const n = new AbortController();
+    y = n;
+    try {
+      const c = l().beforeLeave;
+      if (c && (R.value = !0, !await _(
+        c(e, r, { item: t, source: a, signal: n.signal }),
+        n.signal
+      )))
+        return s && h.value === e;
+      const v = u.value.get(e);
+      return y !== n || h.value !== r || !v || !b(v) ? s && !!v && b(v) && h.value === e : (W(e, r, a), await k(), s && h.value === e);
+    } catch (c) {
+      return y === n && o("guardError", c), !1;
+    } finally {
+      y === n && N();
+    }
+  }
+  const p = I(
+    () => JSON.stringify(g.value.map((e) => [e.value, !!e.disabled]))
+  );
+  let X = g.value.map((e) => ({ ...e }));
+  H(
+    p,
+    () => {
+      var t;
+      const e = X;
+      X = g.value.map((r) => ({ ...r }));
+      for (const [r, n] of x)
+        V(u.value.get(r)) || n.abort();
+      const a = l().modelValue ?? j.value;
+      if (a !== void 0 && e.some((r) => r.value === a && b(r)) && !g.value.some((r) => r.value === a && b(r))) {
+        if (l().autoActivate === !1) return;
+        const r = ((t = de(g.value, e, a)) == null ? void 0 : t.value) ?? "";
+        r !== a && W(r, a, "fallback");
+      }
+    },
+    { flush: "post" }
+  ), H(
+    h,
+    (e) => {
+      N();
+      const a = u.value.get(e);
+      a && b(a) && (F.value = [
+        e,
+        ...F.value.filter((t) => t !== e)
+      ].slice(0, Q.value));
+    },
+    { immediate: !0, flush: "sync" }
+  ), H(
+    () => l().disabled,
+    (e) => {
+      e && K();
+    },
+    { flush: "sync" }
+  ), fe(() => {
+    s = !0;
+  }), se(() => {
+    s = !1, K();
+  }), ce(() => {
+    s = !1, K();
+  });
+  function E() {
+    return s && !l().disabled && !l().readonly && !w();
+  }
+  function M(e) {
+    w() || (l().items === void 0 && (J.value = e), o("update:items", e));
+  }
+  function V(e) {
+    const a = l();
+    return !!(e && !a.disabled && !a.readonly && !e.disabled && !e.readonly && !e.pinned && (e.closable ?? (a.closable || a.editable || a.workbench)));
+  }
+  function O(e) {
+    return !!(e && E() && b(e) && !e.readonly && !e.pinned && e.movable !== !1);
+  }
+  async function ee(e) {
+    if (!s || l().disabled || l().readonly || G) return !1;
+    G = !0;
+    try {
+      if (o("add"), o("edit", void 0, "add"), !E()) return !0;
+      const a = l().createTab;
+      let t = e ?? (a ? await a(d.value) : void 0);
+      if (!t && !a && l().workbench) {
+        do
+          D++;
+        while (u.value.has("tab-" + D));
+        t = { value: "tab-" + D, label: "新建页签 " + D };
+      }
+      return t ? !E() || u.value.has(t.value) || !T([t]).length || (M(T([...d.value, t])), await k(), !s || !u.value.has(t.value)) ? !1 : (l().autoActivate !== !1 && await U(t.value), !0) : !a;
+    } catch (a) {
+      return s && o("guardError", a), !1;
+    } finally {
+      G = !1;
+    }
+  }
+  function ae(e, a) {
+    if (typeof e != "string") return [...new Set(e)];
+    const t = g.value, r = t.findIndex((n) => n.value === a);
+    return e === "current" ? [a] : e === "all" ? d.value.map((n) => n.value) : r < 0 ? [] : (e === "left" ? t.slice(0, r) : e === "right" ? t.slice(r + 1) : t.filter((n) => n.value !== a)).map((n) => n.value);
+  }
+  async function Y(e, a = h.value) {
+    const t = ae(e, a).map((n) => u.value.get(n)).filter(
+      (n) => !!n && V(n) && !x.has(n.value)
+    );
+    if (!s || !t.length) return [];
+    const r = new AbortController();
+    for (const n of t)
+      B.add(n.value), x.set(n.value, r);
+    try {
+      const n = t.filter((i) => i.dirty);
+      if (l().confirmDirty !== !1 && n.length && !await S(n, r.signal))
+        return [];
+      const c = [];
+      for (const i of t) {
+        const f = l().beforeClose;
+        if (r.signal.aborted) return [];
+        if (V(u.value.get(i.value)))
+          try {
+            (!f || await _(
+              f(i.value, { item: i, signal: r.signal, source: "api" }),
+              r.signal
+            )) && c.push(i.value);
+          } catch (ie) {
+            r.signal.aborted || o("guardError", ie);
+          }
+      }
+      if (!s || r.signal.aborted) return [];
+      const v = c.filter((i) => V(u.value.get(i)));
+      if (!v.length) return [];
+      const m = new Set(v), L = d.value, P = L.flatMap(
+        (i, f) => m.has(i.value) ? [{ item: i, index: f }] : []
+      );
+      !w() && (l().workbench || l().defaultItems !== void 0) && M(L.filter((i) => !m.has(i.value)));
+      for (const i of v)
+        o("close", i), o("edit", i, "remove");
+      return o("closeBatch", v), await k(), s && (C.value = [
+        ...P.filter((i) => !u.value.has(i.item.value)).reverse(),
+        ...C.value
+      ].slice(0, Q.value)), v;
+    } finally {
+      for (const n of t)
+        x.get(n.value) === r && (x.delete(n.value), B.delete(n.value));
+    }
+  }
+  async function q(e, a) {
+    const t = u.value.get(e);
+    if (!E() || !t || t.disabled || t.readonly) return !1;
+    M(
+      T(
+        d.value.map(
+          (n) => n.value === e ? { ...n, ...a } : n
+        )
+      )
+    ), await k();
+    const r = u.value.get(e);
+    return !!r && Object.entries(a).every(
+      ([n, c]) => r[n] === c
+    );
+  }
+  async function te(e, a) {
+    const t = a.trim();
+    return !t || !await q(e, { label: t }) ? !1 : (o("rename", e, t), !0);
+  }
+  async function ne(e, a = !((t) => (t = u.value.get(e)) == null ? void 0 : t.pinned)()) {
+    return await q(e, { pinned: a }) ? (o("pinChange", e, a), !0) : !1;
+  }
+  async function re(e, a = !((t) => (t = u.value.get(e)) == null ? void 0 : t.favorite)()) {
+    return await q(e, { favorite: a }) ? (o("favoriteChange", e, a), !0) : !1;
+  }
+  async function le(e, a, t = !1) {
+    var P, i;
+    if (e === a || !O(u.value.get(e)) || !O(u.value.get(a)))
+      return !1;
+    const r = [...d.value], n = r.findIndex((f) => f.value === e), c = r.findIndex((f) => f.value === a);
+    if (r.slice(Math.min(n, c), Math.max(n, c) + 1).some((f) => !f.hidden && !O(f)))
+      return !1;
+    const [v] = r.splice(n, 1), m = r.findIndex((f) => f.value === a) + Number(t);
+    if (n === m) return !1;
+    r.splice(m, 0, v);
+    const L = { value: e, from: n, to: m, items: r };
+    try {
+      if (((i = (P = l()).beforeReorder) == null ? void 0 : i.call(P, L)) === !1) return !1;
+    } catch (f) {
+      return o("guardError", f), !1;
+    }
+    return M(r), o("reorder", L), await k(), d.value.findIndex((f) => f.value === e) === m;
+  }
+  async function ue() {
+    if (!E()) return !1;
+    const e = C.value.find(
+      (t) => !u.value.has(t.item.value)
+    );
+    if (!e) return !1;
+    const a = [...d.value];
+    return a.splice(e.index, 0, e.item), M(T(a)), await k(), !s || !u.value.has(e.item.value) ? !1 : (C.value = C.value.filter((t) => t !== e), o("restore", e.item), l().autoActivate !== !1 && await U(e.item.value, "restore"), !0);
+  }
+  return {
+    all: d,
+    visible: g,
+    byKey: u,
+    enabled: $,
+    active: h,
+    current: j,
+    pending: R,
+    closing: B,
+    recent: F,
+    closed: C,
+    select: U,
+    add: ee,
+    write: M,
+    canClose: V,
+    canMove: O,
+    canEdit: E,
+    rename: te,
+    pin: ne,
+    favorite: re,
+    move: le,
+    restore: ue,
+    closeMany: Y,
+    close: async (e = h.value) => (await Y([e])).length > 0
+  };
+}
+export {
+  he as useTabsState
+};