hys-ui 0.2.0 → 0.3.0

package/dist/composables/useTagInput.js

@@ -0,0 +1,313 @@
+import { useAttrs as Ee, inject as ne, ref as b, useId as le, computed as S, watch as G, onMounted as Ce, onActivated as Le, onDeactivated as xe, onBeforeUnmount as Te, nextTick as P } from "vue";
+import { fieldKey as Ie, formKey as Se, useHysControlState as Me } from "./formContext.js";
+import { useChoiceModel as Be, useChoiceNativeReset as Ke } from "./choiceModel.js";
+import { splitTags as Q } from "./tagInput.js";
+function He(n, i) {
+  const ue = Ee(), f = ne(Ie, void 0), y = ne(Se, void 0), L = Me(n), R = b(), W = b(), u = b(""), m = b(!1), g = b(!1), D = b(!1), ie = le();
+  let j = 0, A, v = !0, M;
+  const B = (e, a) => e.length === a.length && e.every((t, r) => t === a[r]);
+  function d() {
+    j++, A == null || A.abort(), A = void 0, m.value = !1, M = void 0, E();
+  }
+  const K = Be(
+    n,
+    () => [...n.defaultValue ?? []],
+    B,
+    d
+  ), l = S(
+    () => Array.isArray(K.current.value) ? K.current.value.filter((e) => typeof e == "string") : []
+  ), s = S(() => L.disabled.value || !!n.readonly), Y = S(
+    () => n.max === 1 / 0 ? 1 / 0 : Number.isFinite(n.max) ? Math.max(0, Math.floor(n.max)) : 10
+  ), re = S(
+    () => {
+      var e, a;
+      return n.error || (e = f == null ? void 0 : f.invalid) != null && e.value ? "error" : n.status ?? ((a = f == null ? void 0 : f.status) == null ? void 0 : a.value);
+    }
+  ), Z = le(), w = b(), x = b();
+  function N(e) {
+    var a;
+    e === "change" && (y != null && y.model.value) || n.validateEvent !== !1 && !(y != null && y.resetting.value) && ((a = f == null ? void 0 : f.validate) == null || a.call(f, e));
+  }
+  async function H(e) {
+    return K.commit(
+      e,
+      (a) => i("update:modelValue", [...a]),
+      (a) => i("change", [...a]),
+      !0
+    );
+  }
+  function U(e, a, t) {
+    i("reject", e), i("invalid", {
+      value: e,
+      reason: a,
+      ...t ? { error: t instanceof Error ? t : new Error(String(t)) } : {}
+    });
+  }
+  async function T(e, a = "api") {
+    var te;
+    if (!v || s.value || m.value || g.value) return !1;
+    const t = u.value, r = e ?? t, o = Array.isArray(r) ? r : Q(r, n.delimiters ?? n.separator), C = [...l.value], O = [], F = [], z = new AbortController(), ae = ++j;
+    A = z, m.value = !0;
+    const k = () => ae === j && !z.signal.aborted && v && !s.value;
+    try {
+      for (const J of o) {
+        if (!k()) return !1;
+        const c = n.trim === !1 ? J : J.trim();
+        if (!c) continue;
+        let I;
+        if (!n.allowDuplicates && C.some(
+          (h) => n.caseSensitive === !1 ? h.toLocaleLowerCase() === c.toLocaleLowerCase() : h === c
+        ) ? I = "duplicate" : C.length >= Y.value ? I = "max" : n.maxlength !== void 0 && c.length > n.maxlength ? I = "maxlength" : n.minlength !== void 0 && c.length < n.minlength && (I = "minlength"), I) {
+          if (U(c, I), F.push(c), !k()) return !1;
+          continue;
+        }
+        try {
+          const h = (te = n.beforeAdd) == null ? void 0 : te.call(n, c, {
+            signal: z.signal,
+            values: [...C],
+            reason: a
+          }), Ae = h && typeof h.then == "function" ? await h : h;
+          if (!k()) return !1;
+          if (Ae === !1) {
+            U(c, "guard"), F.push(c);
+            continue;
+          }
+        } catch (h) {
+          if (!k()) return !1;
+          U(c, "error", h), F.push(c);
+          continue;
+        }
+        if (!k()) return !1;
+        C.push(c), O.push(c);
+      }
+      if (!k() || !O.length) return !1;
+      for (const J of O) i("add", J);
+      if (!k()) return !1;
+      M = C;
+      const De = await H(C);
+      return !k() || !De ? !1 : (e === void 0 && u.value === t && (u.value = F.join(
+        typeof n.separator == "string" && n.separator ? n.separator : ", "
+      )), i("acceptedChange", [...l.value]), N("change"), !0);
+    } finally {
+      ae === j && (A = void 0, m.value = !1, M = void 0);
+    }
+  }
+  async function X(e) {
+    if (!v || s.value || !Number.isInteger(e) || e < 0 || e >= l.value.length)
+      return !1;
+    d();
+    const a = l.value[e], t = l.value.filter((C, O) => O !== e), r = H(t);
+    i("remove", a);
+    const o = await r;
+    return o && (i("acceptedChange", [...l.value]), N("change")), o;
+  }
+  async function $() {
+    if (!v || s.value) return !1;
+    d();
+    const e = u.value;
+    if (!l.value.length)
+      return u.value = "", e && i("clear"), !!e;
+    const a = await H([]);
+    return a && (u.value === e && (u.value = ""), i("clear"), i("acceptedChange", []), N("change")), a;
+  }
+  async function _(e, a) {
+    if (!v || s.value || !n.draggable || ![e, a].every(Number.isInteger) || e < 0 || a < 0 || e >= l.value.length || a >= l.value.length || e === a)
+      return !1;
+    d();
+    const t = [...l.value], r = t.splice(e, 1)[0];
+    t.splice(a, 0, r), i("reorder", e, a, [...t]);
+    const o = await H(t);
+    return o && (i("acceptedChange", [...l.value]), N("change")), o;
+  }
+  function V(e) {
+    var a;
+    v && !L.disabled.value && ((a = W.value) == null || a.focus(e));
+  }
+  function ce(e) {
+    u.value = e.target.value, i("input", u.value), !(g.value || e.isComposing) && n.delimiters && Q(u.value, n.delimiters).length > 1 && T(void 0, "separator");
+  }
+  function oe(e) {
+    g.value = !1, u.value = e.target.value, i("compositionend", e);
+  }
+  function fe(e) {
+    var o;
+    if (s.value || g.value || !n.delimiters) return;
+    const a = (o = e.clipboardData) == null ? void 0 : o.getData("text/plain");
+    if (!a) return;
+    const t = e.target, r = u.value.slice(0, t.selectionStart ?? u.value.length) + a + u.value.slice(t.selectionEnd ?? u.value.length);
+    Q(r, n.delimiters).length < 2 || (e.preventDefault(), u.value = r, i("input", r), T(void 0, "paste"));
+  }
+  function se(e) {
+    if (e.isComposing || e.keyCode === 229 || g.value || s.value)
+      return;
+    const a = Array.isArray(n.trigger) ? n.trigger : [n.trigger ?? "Enter"], t = e.key === " " ? "Space" : e.key;
+    if (a.includes(t) && u.value.trim()) {
+      t !== "Tab" && e.preventDefault(), T(void 0, "keyboard");
+      return;
+    }
+    e.key === "Backspace" && !u.value && l.value.length ? (e.preventDefault(), X(l.value.length - 1)) : e.key === "ArrowLeft" && !u.value && l.value.length ? (e.preventDefault(), q(l.value.length - 1)) : e.key === "Escape" && m.value && (e.preventDefault(), d());
+  }
+  function q(e) {
+    var t;
+    if (!v || L.disabled.value) return;
+    const a = (t = R.value) == null ? void 0 : t.querySelector(
+      '[data-tag-index="' + e + '"]'
+    );
+    a ? a.focus() : V();
+  }
+  async function ve(e, a) {
+    if (!(s.value || e.isComposing)) {
+      if (n.draggable && e.altKey && ["ArrowLeft", "ArrowRight"].includes(e.key)) {
+        e.preventDefault();
+        const t = a + (e.key === "ArrowLeft" ? -1 : 1);
+        await _(a, t) && (await P(), q(t));
+        return;
+      }
+      if (["Backspace", "Delete"].includes(e.key)) {
+        e.preventDefault(), await X(a) && (await P(), q(Math.min(a, l.value.length - 1)));
+        return;
+      }
+      if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) {
+        e.preventDefault();
+        const t = e.key === "Home" ? 0 : e.key === "End" ? l.value.length - 1 : a + (e.key === "ArrowLeft" ? -1 : 1);
+        t >= 0 && t < l.value.length ? q(t) : V();
+      }
+    }
+  }
+  function de(e, a) {
+    var t;
+    return !!e && (!!((t = R.value) != null && t.contains(e)) || !!(a != null && a.contains(e)));
+  }
+  function ge(e) {
+    D.value || (D.value = !0, i("focus", e));
+  }
+  function ye(e, a) {
+    P(() => {
+      !v || de(document.activeElement, a) || D.value && (D.value = !1, i("blur", e), n.addOnBlur && !g.value && T(void 0, "blur"), N("blur"));
+    });
+  }
+  function E() {
+    w.value = void 0, x.value = void 0, document.removeEventListener("keydown", p, !0), window.removeEventListener("blur", E);
+  }
+  function p(e) {
+    e.key === "Escape" && E();
+  }
+  function he(e, a) {
+    var t;
+    if (s.value || m.value || !n.draggable || e.target.closest("button,input,a")) {
+      e.preventDefault();
+      return;
+    }
+    d(), w.value = { index: a, values: [...l.value] }, (t = e.dataTransfer) == null || t.setData("application/x-hys-tag-input", Z), e.dataTransfer && (e.dataTransfer.effectAllowed = "move"), document.addEventListener("keydown", p, !0), window.addEventListener("blur", E);
+  }
+  function me(e, a) {
+    if (!w.value || s.value || !B(w.value.values, l.value))
+      return;
+    e.preventDefault();
+    const t = e.currentTarget.getBoundingClientRect();
+    x.value = { index: a, after: e.clientX > t.left + t.width / 2 }, e.dataTransfer && (e.dataTransfer.dropEffect = "move");
+  }
+  async function we(e) {
+    var o;
+    if (!w.value || !x.value || s.value || !B(w.value.values, l.value) || ((o = e.dataTransfer) == null ? void 0 : o.getData("application/x-hys-tag-input")) !== Z)
+      return;
+    e.preventDefault();
+    const a = w.value.index, t = x.value.index + (x.value.after ? 1 : 0), r = t - (a < t ? 1 : 0);
+    await _(a, r), E();
+  }
+  Ke(
+    R,
+    () => {
+      d(), K.reset(), u.value = "", g.value = !1, D.value = !1;
+    },
+    void 0,
+    () => n.form
+  ), G(
+    l,
+    (e, a) => {
+      !B(e, a) && (!M || !B(e, M)) && (A ? d() : E());
+    },
+    { flush: "sync" }
+  ), G(
+    () => [
+      L.disabled.value,
+      n.readonly,
+      n.beforeAdd,
+      n.max,
+      n.delimiters,
+      n.separator
+    ],
+    d,
+    { flush: "sync" }
+  ), G(
+    () => y == null ? void 0 : y.resetting.value,
+    (e) => {
+      e && (d(), K.reset(), u.value = "", g.value = !1);
+    },
+    { flush: "sync" }
+  ), Ce(() => {
+    n.autofocus && V();
+  }), Le(() => {
+    v = !0;
+  });
+  function ee() {
+    v = !1, d(), g.value = !1, D.value = !1;
+  }
+  xe(ee), Te(ee);
+  const ke = S(() => ({
+    values: l.value,
+    draft: u.value,
+    disabled: L.disabled.value,
+    readonly: !!n.readonly,
+    pending: m.value,
+    add: (e) => T(e),
+    clear: $
+  })), be = S(() => {
+    const e = /* @__PURE__ */ new Map();
+    return l.value.map((a, t) => {
+      const r = e.get(a) ?? 0;
+      return e.set(a, r + 1), { value: a, index: t, key: JSON.stringify([a, r]) };
+    });
+  });
+  return {
+    attrs: ue,
+    field: f,
+    control: L,
+    element: R,
+    input: W,
+    errorId: ie,
+    draft: u,
+    pending: m,
+    composing: g,
+    focused: D,
+    values: l,
+    status: re,
+    maximum: Y,
+    context: ke,
+    tags: be,
+    drag: w,
+    drop: x,
+    add: T,
+    remove: X,
+    clear: $,
+    move: _,
+    focus: V,
+    nativeInput: ce,
+    compositionEnd: oe,
+    pasted: fe,
+    key: se,
+    tagKey: ve,
+    focusIn: ge,
+    focusOut: ye,
+    stopDrag: E,
+    dragStart: he,
+    dragOver: me,
+    dragDrop: we,
+    setDraft: (e) => {
+      v && !s.value && (u.value = e);
+    }
+  };
+}
+export {
+  He as useTagInput
+};

package/dist/composables/useTransferMotion.js

@@ -0,0 +1,185 @@
+import { inject as K, watch as U, onActivated as V, onDeactivated as G, onBeforeUnmount as J } from "vue";
+import { useHysRootAttrs as Q } from "../config.js";
+import { useMotion as X } from "../motion/useMotion.js";
+import { overlayOwnerKey as Y } from "./overlayManager.js";
+import { transferToken as T } from "./transfer.js";
+const D = (x) => '[data-transfer-key="' + x.replace(
+  /["\\\n\r\f]/g,
+  (a) => "\\" + a.codePointAt(0).toString(16) + " "
+) + '"]';
+function ne(x, a) {
+  const j = Q(), { effectiveMotion: P } = X(), w = K(Y, void 0), C = /* @__PURE__ */ new Set(), M = /* @__PURE__ */ new Set();
+  let A, L = 0, F = !0, k, b;
+  const q = () => Number.isFinite(a.moveDuration) ? Math.max(0, Math.min(1500, a.moveDuration)) : 240, E = () => Number.isFinite(a.maxAnimatedItems) ? Math.max(0, Math.min(12, Math.floor(a.maxAnimatedItems))) : 6, z = () => {
+    var e;
+    return F && ((e = x.value) == null ? void 0 : e.isConnected) && (w == null ? void 0 : w.value) !== !1 && a.animated !== !1 && a.moveAnimation !== "none" && q() > 0 && P.value !== "off";
+  };
+  function o() {
+    L++, A !== void 0 && cancelAnimationFrame(A), A = void 0, clearTimeout(k), k = void 0, window.removeEventListener("scroll", o, !0), window.removeEventListener("resize", o), window.removeEventListener("focusin", o), window.removeEventListener("blur", o), window.removeEventListener("keydown", B);
+    for (const e of M)
+      e.animation.cancel(), e.restore(), e.node.remove();
+    M.clear();
+    for (const e of C) e.classList.remove("hys-ui-transfer-landed");
+    C.clear(), b == null || b.classList.remove("hys-ui-transfer-received"), b = void 0;
+  }
+  function B(e) {
+    e.key === "Escape" && o();
+  }
+  function O(e) {
+    var s;
+    return (s = x.value) == null ? void 0 : s.querySelector(
+      '.hys-ui-transfer-pane[data-side="' + e + '"]'
+    );
+  }
+  function I(e, s) {
+    var v, g;
+    if (o(), !z() || !s.length) return;
+    const d = (v = O(
+      e === "right" ? "left" : "right"
+    )) == null ? void 0 : v.querySelector(".hys-ui-pf-transfer-list"), i = {
+      generation: L,
+      direction: e,
+      count: s.length,
+      samples: []
+    };
+    if (!d || !E() || typeof HTMLElement.prototype.animate != "function")
+      return i;
+    const r = d.getBoundingClientRect(), u = Math.max(0, r.top), c = Math.min(window.innerHeight, r.bottom);
+    if (r.right <= 0 || r.left >= window.innerWidth || c <= u)
+      return i;
+    const l = new Set(s.map(T)), n = /* @__PURE__ */ new Set();
+    function y(t) {
+      var S;
+      if (!t || !d.contains(t) || i.samples.length >= E())
+        return;
+      const f = t.dataset.transferKey;
+      if (!l.has(f) || n.has(f)) return;
+      const m = t.getBoundingClientRect();
+      !m.width || !m.height || m.bottom <= u || m.top >= c || (n.add(f), i.samples.push({
+        token: f,
+        label: (((S = t.querySelector(".hys-ui-transfer-label")) == null ? void 0 : S.textContent) ?? t.textContent ?? "").trim().slice(0, 120),
+        box: m
+      }));
+    }
+    if (s.length <= E())
+      for (const t of s)
+        y(d.querySelector(D(T(t))));
+    else if (document.elementFromPoint) {
+      const t = Math.min(24, Math.max(1, Math.ceil((c - u) / 20))), f = Math.max(
+        1,
+        Math.min(window.innerWidth - 1, r.left + r.width / 2)
+      );
+      for (let m = 0; m < t && i.samples.length < E(); m++)
+        y(
+          (g = document.elementFromPoint(f, u + (m + 0.5) * (c - u) / t)) == null ? void 0 : g.closest(".hys-ui-transfer-row")
+        );
+    }
+    return i;
+  }
+  function N(e) {
+    if (!e || e.generation !== L || !z()) return;
+    const s = O(e.direction), d = s == null ? void 0 : s.querySelector(".hys-ui-pf-transfer-list");
+    if (!s || !d) return;
+    const i = d.getBoundingClientRect();
+    if (i.right <= 0 || i.left >= window.innerWidth || i.bottom <= 0 || i.top >= window.innerHeight)
+      return;
+    b = s, s.classList.add("hys-ui-transfer-received");
+    const r = e.samples.length ? getComputedStyle(x.value) : void 0, u = (c) => {
+      c.restore(), c.node.remove(), M.delete(c);
+    };
+    for (const [c, l] of e.samples.entries()) {
+      const n = d.querySelector(D(l.token)), y = n == null ? void 0 : n.getBoundingClientRect(), v = !!y && y.bottom > Math.max(0, i.top) && y.top < Math.min(window.innerHeight, i.bottom), g = v ? y : {
+        left: Math.max(8, i.left + 8),
+        top: Math.max(
+          8,
+          Math.min(
+            window.innerHeight - 44,
+            i.top + Math.min(i.height / 2, 80) + c * 4
+          )
+        ),
+        width: Math.max(40, i.width - 16),
+        height: l.box.height
+      }, t = document.createElement("div");
+      t.className = "hys-ui-transfer-flight";
+      for (const [p, h] of Object.entries(j.value))
+        t.setAttribute(p, h);
+      t.setAttribute("aria-hidden", "true"), t.inert = !0, t.textContent = l.label + (c === e.samples.length - 1 && e.count > e.samples.length ? " · +" + (e.count - e.samples.length) : ""), Object.assign(t.style, {
+        left: l.box.left + "px",
+        top: l.box.top + "px",
+        width: l.box.width + "px",
+        height: l.box.height + "px",
+        fontFamily: r == null ? void 0 : r.fontFamily,
+        fontSize: r == null ? void 0 : r.fontSize
+      });
+      for (const p of [
+        "--hys-ui-primary",
+        "--hys-ui-primary-soft",
+        "--hys-ui-border",
+        "--hys-ui-surface",
+        "--hys-ui-text",
+        "--hys-ui-muted"
+      ]) {
+        const h = r == null ? void 0 : r.getPropertyValue(p);
+        h && t.style.setProperty(p, h);
+      }
+      const f = (n == null ? void 0 : n.style.opacity) ?? "", m = (n == null ? void 0 : n.style.transition) ?? "";
+      let S = !1;
+      const R = () => {
+        S || (S = !0, n && v && (n.style.opacity = f, n.style.transition = m));
+      };
+      n && v && (n.style.transition = "none", n.style.opacity = "0"), document.body.append(t);
+      const H = "translate3d(" + (g.left - l.box.left) + "px," + (g.top - l.box.top) + "px,0) scale(" + g.width / l.box.width + "," + g.height / l.box.height + ")", W = a.moveAnimation === "fade" ? [
+        { transform: H, opacity: 0 },
+        { transform: H, opacity: 1 }
+      ] : [
+        { transform: "translate3d(0,0,0) scale(1)", opacity: 0.9 },
+        { transform: H, opacity: 1 }
+      ];
+      try {
+        const p = t.animate(W, {
+          duration: q(),
+          easing: "cubic-bezier(.22,1,.36,1)",
+          fill: "both"
+        }), h = { node: t, animation: p, restore: R };
+        M.add(h), p.finished.then(
+          () => {
+            u(h), n && v && n.isConnected && e.generation === L && z() && a.highlightOnArrival !== !1 && (n.classList.add("hys-ui-transfer-landed"), C.add(n));
+          },
+          () => u(h)
+        );
+      } catch {
+        R(), t.remove();
+      }
+    }
+    A = requestAnimationFrame(() => {
+      A = void 0, e.generation === L && window.addEventListener("scroll", o, !0);
+    }), window.addEventListener("resize", o), window.addEventListener("focusin", o), window.addEventListener("blur", o), window.addEventListener("keydown", B), k = setTimeout(o, q() + 440);
+  }
+  return U(
+    () => [
+      a.animated,
+      a.moveAnimation,
+      a.moveDuration,
+      a.maxAnimatedItems,
+      a.highlightOnArrival,
+      P.value,
+      w == null ? void 0 : w.value
+    ],
+    o,
+    { flush: "sync" }
+  ), V(() => {
+    F = !0;
+  }), G(() => {
+    F = !1, o();
+  }), J(o), {
+    capture: I,
+    play: N,
+    stop: o,
+    cancelPlaying: () => {
+      (M.size || b) && o();
+    }
+  };
+}
+export {
+  ne as useTransferMotion
+};