hys-ui 0.2.0 → 0.4.0

package/dist/composables/useTableSticky.js

@@ -0,0 +1,79 @@
+import { ref as U, shallowRef as G, onMounted as I, onActivated as J, onDeactivated as K, onBeforeUnmount as P, onUpdated as Q, watch as j } from "vue";
+const x = 16, H = (o) => o !== void 0 && Number.isFinite(o) ? Math.max(0, o) : 0;
+function Z(o, k, v) {
+  const L = U(0), p = U(), a = G();
+  let f = 0, w = !1, i = !1, m, s;
+  function b() {
+    const t = p.value, c = o.value;
+    !t || !c || t.scrollLeft === c.scrollLeft || (t.scrollLeft = c.scrollLeft, m = t.scrollLeft);
+  }
+  function q(t) {
+    if (!i || !o.value) return;
+    const c = t.currentTarget.scrollLeft, e = c === m;
+    m = void 0, !e && c !== o.value.scrollLeft && (o.value.scrollLeft = c);
+  }
+  function D() {
+    var F, O;
+    f = 0;
+    const t = o.value;
+    if (!i || !(t != null && t.isConnected)) return;
+    const c = v(), e = typeof c == "object" ? c : void 0, y = (F = e == null ? void 0 : e.getContainer) == null ? void 0 : F.call(e), S = document.documentElement.clientWidth, T = document.documentElement.clientHeight, n = y instanceof HTMLElement ? y.getBoundingClientRect() : void 0, z = Math.max(0, (n == null ? void 0 : n.top) ?? 0), N = Math.min(T, (n == null ? void 0 : n.bottom) ?? T), d = t.getBoundingClientRect(), B = ((O = k.value) == null ? void 0 : O.getBoundingClientRect().height) ?? 0, V = Math.max(0, t.clientHeight - B);
+    L.value = Math.min(
+      V,
+      Math.max(0, z + H(e == null ? void 0 : e.offsetHeader) - d.top)
+    );
+    const g = t.scrollWidth - t.clientWidth, u = N - H(e == null ? void 0 : e.offsetScroll) - x, M = Math.max(
+      0,
+      (n == null ? void 0 : n.left) ?? 0,
+      d.left + t.clientLeft
+    ), h = Math.min(
+      S,
+      (n == null ? void 0 : n.right) ?? S,
+      d.left + t.clientLeft + t.clientWidth
+    ) - M;
+    if (g <= 1 || h <= 0 || d.bottom <= u + x || u <= d.top || u <= z + H(e == null ? void 0 : e.offsetHeader) + B) {
+      a.value = void 0;
+      return;
+    }
+    const A = getComputedStyle(t).direction === "rtl" ? "rtl" : "ltr", r = a.value;
+    ((r == null ? void 0 : r.top) !== u || r.left !== M || r.width !== h || r.contentWidth !== g + h || r.direction !== A) && (a.value = {
+      top: u,
+      left: M,
+      width: h,
+      contentWidth: g + h,
+      direction: A
+    });
+  }
+  function l() {
+    i && !f && (f = requestAnimationFrame(D));
+  }
+  function E() {
+    i && (i = !1, cancelAnimationFrame(f), f = 0, window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l), s == null || s.disconnect(), L.value = 0, a.value = void 0);
+  }
+  function R() {
+    !w || !v() || i || !o.value || (i = !0, window.addEventListener("scroll", l, !0), window.addEventListener("resize", l), typeof ResizeObserver < "u" && (s = new ResizeObserver(l), s.observe(o.value)), l());
+  }
+  function W() {
+    w = !0, R();
+  }
+  function C() {
+    w = !1, E();
+  }
+  return I(W), J(W), K(C), P(C), Q(l), j(v, (t) => t ? R() : E(), { flush: "post" }), j(
+    p,
+    () => {
+      m = void 0, b();
+    },
+    { flush: "post" }
+  ), {
+    headerTop: L,
+    bar: a,
+    scrollbar: p,
+    syncScrollbar: b,
+    scrollViewport: q,
+    scrollbarHeight: x
+  };
+}
+export {
+  Z as useTableSticky
+};

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/useTourLayout.js

@@ -0,0 +1,129 @@
+import { ref as S, shallowRef as E, computed as O, watch as H, onMounted as j, onActivated as k, onDeactivated as D, onBeforeUnmount as q } from "vue";
+import { popupSize as X } from "../motion/popup.js";
+import { positionFloating as Y } from "./floatingPosition.js";
+function R(t) {
+  try {
+    const s = typeof t == "function" ? t() : typeof t == "string" ? document.querySelector(t) : t;
+    return s instanceof HTMLElement && s.isConnected ? s : void 0;
+  } catch {
+    return;
+  }
+}
+function F() {
+  return {
+    width: document.documentElement.clientWidth || window.innerWidth,
+    height: document.documentElement.clientHeight || window.innerHeight
+  };
+}
+function B(t, s) {
+  const n = t.getBoundingClientRect();
+  let l = Math.max(0, n.left), i = Math.max(0, n.top), e = Math.min(s.width, n.right), o = Math.min(s.height, n.bottom);
+  if (!(!t.getClientRects().length || getComputedStyle(t).visibility !== "visible")) {
+    for (let c = t.parentElement; c && c !== document.body; c = c.parentElement) {
+      const { overflowX: w, overflowY: M } = getComputedStyle(c), f = /^(auto|scroll|hidden|clip|overlay)$/.test(w), r = /^(auto|scroll|hidden|clip|overlay)$/.test(M);
+      if (!f && !r) continue;
+      const $ = c.getBoundingClientRect();
+      f && (l = Math.max(l, $.left + c.clientLeft), e = Math.min(e, $.left + c.clientLeft + c.clientWidth)), r && (i = Math.max(i, $.top + c.clientTop), o = Math.min(o, $.top + c.clientTop + c.clientHeight));
+    }
+    return e > l && o > i ? new window.DOMRect(l, i, e - l, o - i) : void 0;
+  }
+}
+const V = (t, s) => Number.isFinite(t) ? Math.max(0, t) : s;
+function Z(t, s, n) {
+  const [l, i] = Array.isArray(n) ? n : [n, n], e = V(l, 6), o = V(i, 6), c = Math.max(0, t.left - e), w = Math.max(0, t.top - o);
+  return new window.DOMRect(
+    c,
+    w,
+    Math.min(s.width, t.right + e) - c,
+    Math.min(s.height, t.bottom + o) - w
+  );
+}
+function N(t, s) {
+  const { left: n, top: l, right: i, bottom: e } = t, o = Math.min(s, t.width / 2, t.height / 2);
+  return [
+    `M ${n + o} ${l} H ${i - o} Q ${i} ${l} ${i} ${l + o}`,
+    `V ${e - o} Q ${i} ${e} ${i - o} ${e}`,
+    `H ${n + o} Q ${n} ${e} ${n} ${e - o}`,
+    `V ${l + o} Q ${n} ${l} ${n + o} ${l} Z`
+  ].join(" ");
+}
+function G(t, s, n, l) {
+  const i = S(!1), e = E(), o = E(), c = E({ width: 0, height: 0 }), w = E(), M = E();
+  let f, r;
+  const $ = O(() => i.value && t.value ? R(l.value) : void 0), T = O(() => {
+    var p;
+    const { width: a, height: u } = c.value;
+    if (!a || !u) return "";
+    const d = `M 0 0 H ${a} V ${u} H 0 Z`;
+    return o.value ? d + " " + N(o.value, V((p = n.value.gap) == null ? void 0 : p.radius, 4)) : d;
+  });
+  function A() {
+    var L;
+    const a = F();
+    c.value = a;
+    const u = e.value && B(e.value, a), d = s.value;
+    if (!u || !d) {
+      o.value = void 0, w.value = void 0, M.value = void 0;
+      return;
+    }
+    const p = n.value, b = Z(u, a, (L = p.gap) == null ? void 0 : L.offset);
+    o.value = b;
+    const v = Y(
+      p.mask === !1 ? u : b,
+      X(d),
+      a,
+      p.placement ?? "bottom",
+      9,
+      12,
+      !0
+    );
+    w.value = v;
+    const y = p.arrow, x = typeof y == "object" && y.pointAtCenter === !1, g = x && v.placement.endsWith("start") ? 0 : x && v.placement.endsWith("end") ? 1 : 0.5, m = (W, Q) => Math.max(12, Math.min(W, Q - 12));
+    M.value = {
+      x: m(u.left + u.width * g - v.x, v.width),
+      y: m(u.top + u.height * g - v.y, v.height)
+    };
+  }
+  function h() {
+    f === void 0 && (f = requestAnimationFrame(() => {
+      f = void 0, A();
+    }));
+  }
+  function C(a) {
+    var u;
+    if (e.value !== a) {
+      if (e.value && (r == null || r.unobserve(e.value)), e.value = a, a) {
+        r == null || r.observe(a);
+        const d = n.value.scrollIntoViewOptions, p = a.getBoundingClientRect(), b = F(), v = B(a, b);
+        d !== !1 && (!v || v.width < p.width || v.height < p.height) && ((u = a.scrollIntoView) == null || u.call(a, typeof d == "object" ? { block: "center", inline: "nearest", ...d } : { block: "center", inline: "nearest" }));
+      }
+      h();
+    }
+  }
+  return H($, C, { flush: "post" }), H(n, () => {
+    i.value && t.value && h();
+  }, { flush: "post" }), H([i, t, s], ([a, u, d], p, b) => {
+    var y, x;
+    if (!a || !u || !d) return;
+    r = typeof ResizeObserver == "function" ? new ResizeObserver(h) : void 0, r == null || r.observe(d), e.value && (r == null || r.observe(e.value)), C(R(l.value)), A();
+    const v = new MutationObserver((g) => {
+      var m;
+      l.value && ((m = e.value) != null && m.isConnected ? g.some((L) => !d.contains(L.target)) && h() : C(R(l.value)));
+    });
+    v.observe(document.body, { childList: !0, subtree: !0 }), window.addEventListener("resize", h), window.addEventListener("scroll", h, !0), (y = window.visualViewport) == null || y.addEventListener("resize", h), (x = window.visualViewport) == null || x.addEventListener("scroll", h), b(() => {
+      var g, m;
+      f !== void 0 && cancelAnimationFrame(f), f = void 0, r == null || r.disconnect(), r = void 0, v.disconnect(), window.removeEventListener("resize", h), window.removeEventListener("scroll", h, !0), (g = window.visualViewport) == null || g.removeEventListener("resize", h), (m = window.visualViewport) == null || m.removeEventListener("scroll", h), e.value = void 0, w.value = void 0, o.value = void 0;
+    });
+  }, { flush: "post" }), j(() => {
+    i.value = !0;
+  }), k(() => {
+    i.value = !0;
+  }), D(() => {
+    i.value = !1;
+  }), q(() => {
+    f !== void 0 && cancelAnimationFrame(f);
+  }), { view: c, bounds: o, card: w, arrow: M, path: T };
+}
+export {
+  G as useTourLayout
+};