hys-ui 0.5.0 → 0.7.0

package/dist/components/HysSpin/spinService.js

@@ -0,0 +1,160 @@
+import { createApp as D, defineComponent as E, getCurrentInstance as I, shallowReactive as y, toValue as H, h as w, onDeactivated as M, onActivated as z, onScopeDispose as O, nextTick as C, render as A } from "vue";
+import { provideHysConfig as P, useHysConfig as U } from "../../config.js";
+import V from "./HysSpin.vue.js";
+import j from "./SpinPortal/SpinPortal.vue.js";
+import { useSpinConfig as q, provideHysSpin as B } from "./spinConfig.js";
+import { useHysSpinTask as F } from "./useHysSpinTask.js";
+let G = 0;
+function J() {
+  const i = I();
+  if (!i) throw new Error("useHysSpin must be called during setup");
+  const u = U(), c = q(), o = y(/* @__PURE__ */ new Map());
+  let n, p = !0;
+  function k() {
+    n && (A(null, n), n.remove(), n = void 0);
+  }
+  function h(e) {
+    o.delete(e.key) && (e.resolveReady(void 0), e.resolveClosed(), C(() => {
+      o.size || k();
+    }));
+  }
+  function m(e) {
+    o.has(e.key) && (e.options = { ...e.options, spinning: !1, showResult: !1 }, e.shown || C(() => {
+      !e.shown && e.options.spinning === !1 && h(e);
+    }));
+  }
+  const R = E({
+    setup() {
+      return P({
+        theme: () => H(u.theme) ?? "blue",
+        motion: () => H(u.motion) ?? "subtle"
+      }), B({
+        defaults: () => c.defaults.value,
+        presets: () => c.presets.value
+      }), () => [...o.values()].map((e) => {
+        const l = w(V, {
+          ...e.options,
+          key: e.key,
+          ref: (d) => {
+            d && e.resolveReady(d);
+          },
+          "onUpdate:spinning": (d) => {
+            d ? e.options = { ...e.options, spinning: !0 } : m(e);
+          },
+          onShow: () => {
+            e.shown = !0;
+          },
+          onAfterHide: () => {
+            e.options.spinning === !1 && h(e);
+          }
+        }), t = e.options.mode, a = c.defaults.value, r = t !== "fullscreen" ? e.options.appendTo ?? a.appendTo : void 0;
+        if (!r) return l;
+        const s = e.shown && e.options.spinning !== !1;
+        return w(
+          j,
+          {
+            key: e.key,
+            target: r,
+            cover: t === "overlay" || t === "container",
+            block: s && (e.options.blockInteraction ?? a.blockInteraction) !== !1,
+            lock: s && !!(e.options.lockScroll ?? a.lockScroll)
+          },
+          { default: () => l }
+        );
+      });
+    }
+  });
+  function T() {
+    if (n) return;
+    n = document.createElement("div"), n.dataset.hysSpinHost = "", document.body.append(n);
+    const e = w(R);
+    e.appContext = i.appContext, A(e, n);
+  }
+  function g(e = {}) {
+    let l, t;
+    const a = new Promise((f) => {
+      t = f;
+    }), r = new Promise((f) => {
+      l = f;
+    }), s = y({
+      key: ++G,
+      options: {
+        mode: c.defaults.value.mode ?? "fullscreen",
+        ...e,
+        spinning: !0
+      },
+      resolveReady: l,
+      resolveClosed: t,
+      shown: !1
+    }), d = {
+      closed: a,
+      close: () => m(s),
+      update(f) {
+        o.has(s.key) && (s.options = { ...s.options, ...f }, f.spinning === !1 && m(s));
+      }
+    };
+    return !p || typeof document > "u" ? (l(void 0), t(), { handle: d, ready: r }) : (T(), o.set(s.key, s), { handle: d, ready: r });
+  }
+  function S() {
+    p = !1;
+    for (const e of [...o.values()]) h(e);
+    k();
+  }
+  return M(S), z(() => {
+    p = !0;
+  }), O(S), {
+    show: (e) => g(e).handle,
+    async run(e, l) {
+      typeof e != "function" && Promise.resolve(e).catch(() => {
+      });
+      const { ready: t, handle: a } = g({ ...l, task: void 0 }), r = await t;
+      if (!r) throw new DOMException("Spin scope closed", "AbortError");
+      try {
+        return await r.run(e);
+      } finally {
+        a.close();
+      }
+    },
+    closeAll() {
+      for (const e of [...o.values()]) m(e);
+    }
+  };
+}
+function b(i = {}) {
+  if (typeof document > "u")
+    return {
+      show: () => ({ closed: Promise.resolve(), close() {
+      }, update() {
+      } }),
+      run: (n, p) => F().run(n, { timeout: p == null ? void 0 : p.timeout }),
+      closeAll() {
+      },
+      dispose() {
+      }
+    };
+  let u, c = !1;
+  const o = D(
+    E({
+      setup() {
+        return P(i), u = J(), () => null;
+      }
+    })
+  );
+  return o.mount(document.createElement("div")), {
+    ...u,
+    dispose() {
+      c || (c = !0, o.unmount());
+    }
+  };
+}
+let v;
+const x = () => typeof document > "u" ? b() : v ?? (v = b()), Y = {
+  show: (i) => x().show(i),
+  run: (i, u) => x().run(i, u),
+  closeAll: () => v == null ? void 0 : v.closeAll()
+};
+export {
+  b as createHysSpin,
+  Y as hysSpin,
+  J as useHysSpin
+};

package/dist/components/HysSpin/spinStyle.js

@@ -0,0 +1,39 @@
+const h = {
+  xs: 14,
+  sm: 20,
+  md: 30,
+  lg: 42,
+  xl: 56
+}, i = (e) => typeof e == "number" ? Number.isFinite(e) ? Math.max(0, e) + "px" : void 0 : e, s = (e, a, n, r) => Number.isFinite(e) ? Math.max(n, Math.min(r, e)) : a;
+function t(e, a) {
+  const n = i(
+    typeof e.size == "string" && Object.hasOwn(h, e.size) ? h[e.size] : e.size ?? h.md
+  ), r = s(e.animationDuration, 900, 0, 6e4) / s(e.speed, 1, 0.05, 20);
+  return {
+    "--hys-spin-width": i(e.width) ?? n,
+    "--hys-spin-height": i(e.height) ?? n,
+    "--hys-spin-region-height": i(e.regionHeight),
+    "--hys-spin-gap": i(e.gap) ?? "8px",
+    "--hys-spin-color": e.color,
+    "--hys-spin-track": e.trackColor,
+    "--hys-spin-track-opacity": e.trackColor ? 1 : 0.2,
+    "--hys-spin-mask": e.mask === !1 ? "transparent" : e.maskColor,
+    "--hys-spin-mask-opacity": s(e.maskOpacity, 0.72, 0, 1),
+    "--hys-spin-blur": s(e.blur, 0, 0, 100) + "px",
+    "--hys-spin-duration": r + "ms",
+    "--hys-spin-delay": s(e.animationDelay, 0, -6e4, 6e4) + "ms",
+    "--hys-spin-direction": e.direction ?? "normal",
+    "--hys-spin-reverse-direction": e.direction === "reverse" ? "normal" : "reverse",
+    "--hys-spin-easing": e.easing ?? "linear",
+    "--hys-spin-iterations": typeof e.iterations == "number" ? s(e.iterations, 1, 0, 1e5) : "infinite",
+    "--hys-spin-angle": s(e.angle, 360, -36e3, 36e3) + "deg",
+    "--hys-spin-play": a ? "paused" : "running",
+    "--hys-spin-transition": s(e.transitionDuration, 160, 0, 1e4) + "ms",
+    "--hys-spin-custom": e.animationName
+  };
+}
+export {
+  s as bounded,
+  i as cssLength,
+  t as spinStyle
+};

package/dist/components/HysSpin/useHysSpinTask.js

@@ -0,0 +1,92 @@
+import { shallowRef as S, getCurrentScope as D, onScopeDispose as N, readonly as j } from "vue";
+const d = () => ({ status: "idle", spinning: !1 }), C = (e) => typeof e == "number" && Number.isFinite(e) ? Math.max(0, Math.min(100, e)) : void 0, F = (e) => typeof e == "number" && Number.isFinite(e) ? Math.min(2147483647, Math.max(0, e)) : 0;
+function u() {
+  return new DOMException("Loading cancelled", "AbortError");
+}
+function H() {
+  const e = S(d());
+  let t, a, l = 0, c = !1;
+  function f(n) {
+    c || (e.value = {
+      ...e.value,
+      ...n,
+      progress: "progress" in n ? C(n.progress ?? void 0) : e.value.progress
+    });
+  }
+  function p(n, i, T) {
+    if (c)
+      return typeof n != "function" && Promise.resolve(n).catch(() => {
+      }), Promise.reject(u());
+    t == null || t.abort(u());
+    const s = new AbortController();
+    t = s, l++;
+    const w = l;
+    e.value = {
+      ...d(),
+      status: T ? "retrying" : "loading",
+      spinning: !0
+    }, i != null && i.initial && f(i.initial);
+    const { signal: o } = s;
+    let g, y = () => {
+    };
+    const A = new Promise((r, m) => {
+      y = m;
+    }), h = () => y(o.reason ?? u());
+    o.addEventListener("abort", h, { once: !0 });
+    const E = F(i == null ? void 0 : i.timeout);
+    E && (g = setTimeout(
+      () => s.abort(
+        new DOMException("Loading timed out", "TimeoutError")
+      ),
+      E
+    ));
+    const P = (r) => {
+      t === s && !o.aborted && f(r);
+    }, L = typeof n != "function" ? Promise.resolve(n) : Promise.resolve().then(() => {
+      if (o.aborted) throw o.reason;
+      return n({
+        signal: o,
+        attempt: w,
+        update: P,
+        progress: (r) => P({ progress: r })
+      });
+    });
+    return Promise.race([L, A]).then(
+      (r) => (t === s && (e.value = {
+        ...e.value,
+        spinning: !1,
+        status: "success",
+        progress: e.value.progress === void 0 ? void 0 : 100
+      }), r),
+      (r) => {
+        if (t === s) {
+          const m = (r == null ? void 0 : r.name) === "TimeoutError" ? "timeout" : o.aborted ? "cancelled" : "error";
+          e.value = { ...e.value, spinning: !1, status: m, error: r };
+        }
+        throw r;
+      }
+    ).finally(() => {
+      clearTimeout(g), o.removeEventListener("abort", h), t === s && (t = void 0);
+    });
+  }
+  function x(n, i) {
+    return l = 0, a = { work: n, options: i }, p(n, i, !1);
+  }
+  function v() {
+    t == null || t.abort(u());
+  }
+  function b() {
+    v(), t = void 0, a = void 0, e.value = d();
+  }
+  function M() {
+    return a && typeof a.work == "function" ? p(a.work, a.options, !0) : void 0;
+  }
+  return D() && N(() => {
+    c = !0, b();
+  }), { state: j(e), run: x, cancel: v, retry: M, update: f, reset: b };
+}
+export {
+  C as clampSpinProgress,
+  F as spinTime,
+  H as useHysSpinTask
+};

package/dist/components/HysSpin/useSpinFullscreen.js

@@ -0,0 +1,60 @@
+import { shallowRef as h, watch as m, nextTick as b, onBeforeUnmount as E } from "vue";
+import { lockBodyScroll as p, registerOverlay as g } from "../../composables/overlayManager.js";
+const k = 'button:not(:disabled),a[href],input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex]:not([tabindex="-1"])';
+function x(o, c) {
+  const n = h();
+  let u, r, l;
+  function a(e) {
+    var t;
+    if (!(!((t = n.value) != null && t.isTop()) || !o.value)) {
+      if (e.key === "Escape")
+        e.stopImmediatePropagation(), c.escape();
+      else if (e.key === "Tab") {
+        const i = [
+          ...o.value.querySelectorAll(k)
+        ].filter(
+          (v) => !v.closest("[inert],[hidden]") && v.getClientRects().length
+        ), s = document.activeElement, y = e.shiftKey ? i[0] : i.at(-1);
+        (!i.length || !o.value.contains(s) || s === y || s === o.value) && (e.preventDefault(), (i[e.shiftKey ? i.length - 1 : 0] ?? o.value).focus({
+          preventScroll: !0
+        }));
+      }
+    }
+  }
+  function d(e) {
+    var t;
+    (t = n.value) != null && t.isTop() && o.value && !o.value.contains(e.target) && o.value.focus({ preventScroll: !0 });
+  }
+  function f() {
+    if (!n.value) return;
+    const e = n.value.isTop() && ((l == null ? void 0 : l.contains(document.activeElement)) || document.activeElement === document.body);
+    n.value.unregister(), n.value = void 0, document.removeEventListener("keydown", a, !0), document.removeEventListener("focusin", d, !0), e && (r != null && r.isConnected) && r.focus({ preventScroll: !0 }), r = void 0, l = void 0;
+  }
+  return m(
+    [c.lock, o],
+    ([e, t]) => {
+      e && t && !u && (u = p()), (!e || !t) && (u == null || u(), u = void 0);
+    },
+    { flush: "post" }
+  ), m(
+    [c.trap, o],
+    ([e, t]) => {
+      if (!e || !t) {
+        f();
+        return;
+      }
+      if (n.value) return;
+      r = document.activeElement instanceof HTMLElement ? document.activeElement : void 0;
+      const i = g("dialog", c.escape, c.zIndex);
+      n.value = i, l = t, document.addEventListener("keydown", a, !0), document.addEventListener("focusin", d, !0), b(() => {
+        n.value === i && i.isTop() && t.focus({ preventScroll: !0 });
+      });
+    },
+    { flush: "post" }
+  ), E(() => {
+    f(), u == null || u();
+  }), n;
+}
+export {
+  x as useSpinFullscreen
+};

package/dist/components/HysSpin/useSpinVisibility.js

@@ -0,0 +1,59 @@
+import { ref as b, watch as D, onMounted as M, onActivated as E, onDeactivated as g, onBeforeUnmount as A } from "vue";
+import { spinTime as f } from "./useHysSpinTask.js";
+function S(e) {
+  const i = b(e.requested() && f(e.delay()) === 0);
+  let u = !1, t, a, d, c, m = !1;
+  function o() {
+    clearTimeout(d), clearTimeout(c);
+  }
+  function s() {
+    if (o(), !u) return;
+    const r = Date.now();
+    if (e.requested()) {
+      t === void 0 && (t = r, m = !1, e.start());
+      const T = () => {
+        !u || !e.requested() || (a = Date.now(), i.value = !0);
+      };
+      if (i.value)
+        a ?? (a = r);
+      else {
+        const x = f(e.delay()) - (r - t);
+        x > 0 ? d = setTimeout(T, x) : T();
+      }
+      const n = f(e.timeout()), l = f(e.autoEnd()), q = n && l ? Math.min(n, l) : n || l;
+      !m && q && (c = setTimeout(
+        () => {
+          !u || !e.requested() || (m = !0, e.stop(
+            n && n <= (l || 1 / 0) ? "timeout" : "auto"
+          ));
+        },
+        Math.max(0, q - (r - t))
+      ));
+      return;
+    }
+    t !== void 0 && (t = void 0, e.end());
+    const w = () => {
+      a = void 0, i.value = !1;
+    }, y = a === void 0 ? 0 : f(e.minimum()) - (r - a);
+    i.value && y > 0 ? d = setTimeout(w, y) : w();
+  }
+  function v() {
+    u || (u = !0, s());
+  }
+  function h() {
+    u = !1, o(), t = a = void 0, i.value = !1;
+  }
+  return D(
+    [
+      e.requested,
+      e.delay,
+      e.minimum,
+      e.timeout,
+      e.autoEnd
+    ],
+    s
+  ), M(v), E(v), g(h), A(h), i;
+}
+export {
+  S as useSpinVisibility
+};