hys-ui 0.4.0 → 0.6.0

package/dist/composables/useHysAnimatedNumber.js

@@ -0,0 +1,264 @@
+import { shallowRef as ue, watch as w, onMounted as le, onActivated as re, onDeactivated as fe, onBeforeUnmount as de, computed as ce, readonly as pe, toValue as me } from "vue";
+import { useMotion as ve } from "../motion/useMotion.js";
+import { listenVisibility as ye, unlistenVisibility as ge, unsubscribe as he, subscribe as be, makeEasing as Ae } from "./animatedNumberTiming.js";
+import { numberDirection as D, numberValue as y, bounded as d, createNumberInterpolator as Me } from "./animatedNumberFormat.js";
+function Pe(Q = {}, S) {
+  const i = () => me(Q), r = () => y(i().value), Y = () => y(i().from ?? r()), { effectiveMotion: Z } = ve(), g = () => i().disabled || Z.value === "off" || !_(), _ = () => d(i().duration ?? 650, 0, 0, Number.MAX_SAFE_INTEGER), N = Y(), a = ue({
+    value: N,
+    from: N,
+    to: r(),
+    progress: 0,
+    easedProgress: 0,
+    direction: D(N, r()),
+    status: "idle",
+    iteration: 1
+  });
+  let n, c = [N, r()], f = c, p = [], k = !1, A = !1, W = !1, l = !1, T, E = 0, B = -1 / 0, R, F;
+  const U = () => !A || W || i().pauseWhenHidden !== !1 && document.hidden, m = (e) => S == null ? void 0 : S(e, { ...a.value });
+  function v() {
+    he(C), T = void 0, E = 0;
+  }
+  function V() {
+    !n || l || U() || be(C);
+  }
+  function $(e, t, o) {
+    let s = t;
+    if (t > 0 && t < 1)
+      try {
+        s = d(e.easing(t), t, -4, 5);
+      } catch {
+        e.easing = (u) => u;
+      }
+    a.value = {
+      ...a.value,
+      status: o,
+      progress: t,
+      easedProgress: s,
+      value: t === 0 ? e.from : t === 1 ? e.to : e.interpolate(t, s)
+    };
+  }
+  function h() {
+    p = [], R = void 0, clearTimeout(F), F = void 0;
+  }
+  function L() {
+    const e = !!n;
+    n = void 0, l = !1, v(), e && (a.value = { ...a.value, status: "stopped" }, m("cancel"));
+  }
+  function q(e, t, o, s, u, P) {
+    return {
+      from: e,
+      to: t,
+      iteration: o,
+      loops: s,
+      duration: u,
+      elapsed: -P,
+      interpolate: Me(e, t, i().interpolate),
+      easing: Ae(i().easing),
+      alternate: i().alternate ?? !1,
+      started: !1
+    };
+  }
+  function x(e) {
+    n = e, a.value = {
+      from: e.from,
+      to: e.to,
+      value: e.from,
+      progress: 0,
+      easedProgress: 0,
+      direction: D(e.from, e.to),
+      status: e.elapsed < 0 ? "delayed" : "playing",
+      iteration: e.iteration
+    };
+  }
+  function j(e) {
+    e.started || (e.started = !0, m("start"));
+  }
+  function G(e, t, o) {
+    $(e, t, o), m("update"), n === e && m("progress");
+  }
+  function z(e, t = !1) {
+    if (n === e) {
+      if (!t && e.iteration < e.loops) {
+        const [o, s] = e.alternate ? [e.to, e.from] : c;
+        x(
+          q(
+            o,
+            s,
+            e.iteration + 1,
+            e.loops,
+            e.duration,
+            0
+          )
+        ), m("loop");
+        return;
+      }
+      if (n = void 0, l = !1, v(), a.value = { ...a.value, status: "finished" }, m("end"), !n && p.length) {
+        const o = p.shift();
+        M(a.value.value, o);
+      }
+    }
+  }
+  function I() {
+    if (!n) return;
+    const e = n;
+    j(e), n === e && (G(e, 1, "playing"), z(e, !0));
+  }
+  function M(e, t, o = {}) {
+    if (L(), n) return;
+    c = [e, t], f = o.endpoints ?? c;
+    const s = i().loop, u = s === !0 ? 1 / 0 : Math.floor(
+      d(
+        typeof s == "number" ? s : void 0,
+        1,
+        1,
+        Number.MAX_SAFE_INTEGER
+      )
+    ), P = q(
+      e,
+      t,
+      1,
+      u,
+      _(),
+      o.delay ?? d(i().delay, 0, 0, Number.MAX_SAFE_INTEGER)
+    );
+    x(P), o.immediate || g() || !P.duration || a.value.direction === "none" && e !== t ? I() : V();
+  }
+  function C(e) {
+    const t = n;
+    if (!t || l || U()) {
+      v();
+      return;
+    }
+    if (g() || !t.duration) {
+      I();
+      return;
+    }
+    const o = d(i().speed, 1, 0.01, 100);
+    if (t.elapsed += (T === void 0 ? 0 : e - T) * o, T = e, t.elapsed < 0 || (j(t), n !== t || l)) return;
+    const s = Math.min(1, t.elapsed / t.duration), u = i().fps;
+    s < 1 && E && u !== void 0 && e - E < 1e3 / d(u, 60, 1, 120) - 1 || (E = e, G(t, s, "playing"), s === 1 && !l && z(t));
+  }
+  function J(e) {
+    const t = y(e), o = i().interrupt ?? "retarget";
+    if (o === "queue" && n && !g()) {
+      (p.at(-1) ?? n.to) !== t && p.push(t);
+      const s = Math.floor(d(i().queueLimit, 32, 1, 256));
+      p.length > s && p.splice(0, p.length - s);
+      return;
+    }
+    h(), !(t === a.value.value && !n) && (B = performance.now(), M(
+      o === "restart" ? y(i().from ?? c[0]) : a.value.value,
+      t,
+      { immediate: o === "snap" }
+    ));
+  }
+  function K(e) {
+    if (!k) return;
+    const t = i().interrupt ?? "retarget", o = d(i().updateInterval, 0, 0, 6e4), s = B + o - performance.now();
+    (t === "retarget" || t === "restart") && s > 0 && !g() ? (R = e, F ?? (F = setTimeout(() => {
+      const u = R;
+      u !== void 0 && J(u);
+    }, s))) : J(e);
+  }
+  function H() {
+    h(), M(y(i().from ?? f[0]), r());
+  }
+  function ee() {
+    if (n) {
+      O();
+      return;
+    }
+    a.value.to !== r() || a.value.status === "stopped" ? (h(), M(a.value.value, r())) : H();
+  }
+  function te() {
+    !n || l || (l = !0, v(), a.value = { ...a.value, status: "paused" }, m("pause"));
+  }
+  function O() {
+    !n || !l || (l = !1, a.value = {
+      ...a.value,
+      status: n.elapsed < 0 ? "delayed" : "playing"
+    }, m("resume"), V());
+  }
+  function X() {
+    h(), L();
+  }
+  function ne() {
+    if (X(), n) return;
+    const e = y(i().from ?? f[0]), t = r();
+    c = f = [e, t], a.value = {
+      from: e,
+      to: t,
+      value: e,
+      progress: 0,
+      easedProgress: 0,
+      status: "idle",
+      direction: D(e, t),
+      iteration: 1
+    };
+  }
+  function ie() {
+    if (X(), n) return;
+    const e = r();
+    c = f = [y(i().from ?? e), e], a.value = {
+      from: e,
+      to: e,
+      value: e,
+      direction: "none",
+      progress: 1,
+      easedProgress: 1,
+      status: "idle",
+      iteration: 1
+    };
+  }
+  function ae() {
+    h();
+    const e = a.value.to === f[0] ? f[1] : f[0], t = a.value.value;
+    M(t, e, { delay: 0, endpoints: f });
+  }
+  function oe(e) {
+    if (!Number.isFinite(e)) return;
+    if (!n) {
+      const [s, u] = c;
+      x(q(s, u, 1, 1, _(), 0)), l = !0;
+    }
+    const t = n, o = d(e, 0, 0, 1);
+    t.elapsed = o * t.duration, G(t, o, l ? "paused" : "playing");
+  }
+  function b() {
+    U() ? v() : V();
+  }
+  function se(e) {
+    W = e, b();
+  }
+  return w(r, (e) => {
+    i().autoUpdate !== !1 && K(e);
+  }), w(g, (e) => {
+    e && I();
+  }), w(() => i().pauseWhenHidden, b), le(() => {
+    k = A = !0, ye(b), i().autoPlay ?? i().from !== void 0 ? H() : b();
+  }), re(() => {
+    A = !0, b();
+  }), fe(() => {
+    A = !1, v();
+  }), de(() => {
+    k = A = !1, h(), v(), n = void 0, ge(b);
+  }), {
+    frame: pe(a),
+    motionEnabled: ce(() => !g()),
+    play: ee,
+    pause: te,
+    resume: O,
+    stop: X,
+    restart: H,
+    reset: ne,
+    reverse: ae,
+    seek: oe,
+    finishAnimation: I,
+    updateTarget: K,
+    sync: ie,
+    hold: se
+  };
+}
+export {
+  Pe as useHysAnimatedNumber
+};

package/dist/composables/useHysNumberAnimationGroup.js

@@ -0,0 +1,23 @@
+import { toValue as n } from "vue";
+function u(r) {
+  const o = () => new Set(n(r));
+  function e(t) {
+    for (const s of o()) s == null || s[t]();
+  }
+  return {
+    play: () => e("play"),
+    pause: () => e("pause"),
+    resume: () => e("resume"),
+    stop: () => e("stop"),
+    restart: () => e("restart"),
+    reset: () => e("reset"),
+    reverse: () => e("reverse"),
+    finishAnimation: () => e("finishAnimation"),
+    seek: (t) => {
+      for (const s of o()) s == null || s.seek(t);
+    }
+  };
+}
+export {
+  u as useHysNumberAnimationGroup
+};

package/dist/composables/useHysToast.js

@@ -1,148 +1,130 @@
-import { defineComponent as k, createApp as F, h as m, getCurrentInstance as Q, shallowReactive as A, Fragment as R, onDeactivated as B, onActivated as N, onScopeDispose as P, nextTick as W, render as b } from "vue";
-import X from "../components/HysToast/HysToast.vue.js";
-import { provideHysConfig as z, useHysRootAttrs as G } from "../config.js";
-let J = 0;
-const g = (n = "top-center") => n === "top" ? "top-center" : n === "bottom" ? "bottom-center" : n;
-function K(n = {}) {
-  const l = Q();
-  if (!l) throw new Error("useHysToast must be called during component setup");
-  const p = G(), a = A([]), d = /* @__PURE__ */ new Map();
-  let r, x = !0, v = !1;
-  const M = Number.isFinite(n.maxCount) ? Math.max(1, Math.floor(n.maxCount)) : 5, w = (e) => typeof e == "string" ? { message: e } : e;
-  function C(e) {
+import { defineComponent as T, createApp as C, h as H, getCurrentInstance as x, onDeactivated as E, onActivated as I, onScopeDispose as k, shallowRef as g, toValue as l, nextTick as q, render as h } from "vue";
+import { provideHysConfig as Q, useHysRootAttrs as D } from "../config.js";
+import R from "../components/HysToast/ToastViewport/ToastViewport.vue.js";
+import { createToastQueue as A } from "./toastQueue.js";
+function V(t = {}) {
+  const s = x();
+  if (!s)
+    throw new Error("useHysToast must be called during component setup");
+  const m = D();
+  let o;
+  const p = (n) => {
     try {
-      e == null || e();
-    } catch (o) {
-      try {
-        l.appContext.config.errorHandler ? l.appContext.config.errorHandler(o, l.proxy, "HysToast callback") : console.error(o);
-      } catch (s) {
-        console.error(s);
-      }
+      s.appContext.config.errorHandler ? s.appContext.config.errorHandler(
+        n,
+        s.proxy,
+        "HysToast callback"
+      ) : console.error(n);
+    } catch (i) {
+      console.error(i);
     }
+  };
+  function a() {
+    o && (h(null, o), o.remove(), o = void 0);
   }
-  function H(e) {
-    if (e.finished) return;
-    e.finished = !0;
-    const o = a.indexOf(e);
-    o >= 0 && a.splice(o, 1), d.delete(e.token), e.resolve(), C(e.onAfterClose);
-    const s = r;
-    W(() => {
-      s && s === r && !a.length && (b(null, s), s.remove(), r = void 0);
-    });
-  }
-  function h(e) {
-    if (!(e.closing || e.finished)) {
-      e.closing = !0;
-      try {
-        C(e.onClose);
-      } finally {
-        const o = d.get(e.token);
-        o ? o.close() : H(e);
-      }
+  function c() {
+    const n = r.settings.value.appendTo, i = typeof n == "string" ? document.querySelector(n) : n ?? document.body;
+    if (!i) throw new Error("Toast appendTo target was not found");
+    if (o) {
+      o.parentNode !== i && i.appendChild(o);
+      return;
     }
+    o = document.createElement("div"), o.dataset.hysToastHost = "", i.appendChild(o);
+    const y = H(R, { queue: r, skin: () => m.value });
+    y.appContext = s.appContext, h(y, o);
   }
-  function I(e, o) {
-    if (e.closing || e.finished || v) return;
-    const s = w(o), t = e.type;
-    Object.assign(e, s, { id: e.id }), s.type && s.type !== t && s.duration === void 0 && (e.duration = s.type === "loading" ? 0 : n.duration), W(() => {
-      var f;
-      e.closing || (f = d.get(e.token)) == null || f.restart();
-    });
+  const r = A(
+    t,
+    {
+      mount: c,
+      empty: () => {
+        q(() => {
+          r.records.size || a();
+        });
+      }
+    },
+    p
+  );
+  function f(n = !1) {
+    r.suspend(n), a();
   }
-  function j(e) {
-    const o = g(e.position), s = Math.max(0, e.offset ?? 24) + "px", t = { position: "fixed", width: "max-content", display: "flex", flexDirection: o.startsWith("bottom") ? "column-reverse" : "column", gap: "10px", alignItems: o.endsWith("left") ? "flex-start" : o.endsWith("right") ? "flex-end" : "center", maxWidth: `calc(100vw - ${Math.max(16, e.offset ?? 24) * 2}px)`, pointerEvents: "none", zIndex: e.zIndex ?? 2e3 };
-    return o === "center" ? Object.assign(t, { left: "50%", top: "50%", transform: "translate(-50%,-50%)" }) : (o.startsWith("bottom") ? t.bottom = `max(${s},env(safe-area-inset-bottom))` : t.top = `max(${s},env(safe-area-inset-top))`, o.endsWith("left") ? t.left = `max(${s},env(safe-area-inset-left))` : o.endsWith("right") ? t.right = `max(${s},env(safe-area-inset-right))` : Object.assign(t, { left: "50%", transform: "translateX(-50%)" })), t;
+  return E(() => f()), I(r.resume), k(() => f(!0)), {
+    ...r.api,
+    configure(n) {
+      r.api.configure(n), o && "appendTo" in n && c();
+    }
+  };
+}
+function w(t = {}) {
+  const { theme: s, motion: m, buttonAutoInsertSpace: o, ...p } = t;
+  if (typeof document > "u") {
+    const n = A(
+      p,
+      { mount() {
+      }, empty() {
+      } },
+      () => {
+      }
+    );
+    return { ...n.api, dispose: () => n.suspend(!0) };
   }
-  const q = k({
-    name: "HysToastQueue",
+  let a, c = !1;
+  const r = T({
     setup() {
-      return z({ theme: () => p.value["data-hys-theme"], motion: () => p.value["data-hys-motion"] }), () => {
-        const e = /* @__PURE__ */ new Map();
-        for (const o of a) {
-          const s = `${g(o.position)}:${o.offset ?? 24}:${o.zIndex ?? 2e3}`, t = e.get(s) || [];
-          t.push(o), e.set(s, t);
-        }
-        return m(R, [...e].map(([o, s]) => m("div", { key: o, ...p.value, class: "hys-ui-toast-stack", style: j(s[0]) }, s.map((t) => m(X, {
-          key: t.token,
-          ref: (f) => {
-            f ? d.set(t.token, f) : d.delete(t.token);
-          },
-          "data-toast-id": t.id,
-          message: t.message,
-          type: t.type,
-          duration: t.duration,
-          closable: t.closable ?? !0,
-          showIcon: t.showIcon ?? !0,
-          pauseOnHover: t.pauseOnHover ?? !0,
-          closeOnEscape: t.closeOnEscape,
-          position: t.position,
-          offset: t.offset,
-          zIndex: t.zIndex,
-          plain: t.plain,
-          repeat: t.repeat,
-          teleport: !1,
-          onClose: () => h(t),
-          onAfterClose: () => H(t)
-        }, {
-          ...t.content !== void 0 ? { default: () => typeof t.content == "function" ? t.content() : t.content } : {},
-          ...t.icon !== void 0 ? { icon: () => typeof t.icon == "function" ? t.icon() : t.icon } : {}
-        })))));
-      };
+      return a = V(p), () => null;
     }
-  });
-  function D() {
-    if (r) return;
-    const e = typeof n.appendTo == "string" ? document.querySelector(n.appendTo) : n.appendTo ?? document.body;
-    if (!e) throw new Error("Toast appendTo target was not found");
-    r = document.createElement("div"), r.dataset.hysToastHost = "", e.appendChild(r);
-    const o = m(q);
-    o.appContext = l.appContext, b(o, r);
-  }
-  function O(e) {
-    const o = w(e), s = { type: "info", ...n, ...o };
-    s.type === "loading" && o.duration === void 0 && (s.duration = 0);
-    const t = a.find((i) => !i.closing && (o.id && i.id === o.id || s.grouping && o.message && o.content === void 0 && i.message === o.message && i.type === s.type && g(i.position) === g(s.position)));
-    if (t)
-      return o.id || t.repeat++, I(t, o), t.handle;
-    const f = "hys-toast-" + ++J, $ = o.id ?? f;
-    let T;
-    const S = new Promise((i) => {
-      T = i;
-    }), c = A({ ...s, token: f, id: $, repeat: 1, closing: !1, finished: !1, resolve: T });
-    if (c.handle = { id: $, closed: S, close: () => h(c), update: (i) => I(c, i) }, v || !x || !c.message && (c.content == null || c.content === !1 || c.content === ""))
-      return c.finished = !0, T(), c.handle;
-    for (; a.filter((i) => !i.closing).length >= M; ) h(a.find((i) => !i.closing));
-    return D(), a.push(c), c.handle;
-  }
-  function E() {
-    for (const e of [...a])
-      e.closing || (e.closing = !0, C(e.onClose)), H(e);
-    r && (b(null, r), r.remove(), r = void 0);
-  }
-  B(() => {
-    x = !1, E();
-  }), N(() => {
-    x = !0;
-  }), P(() => {
-    v = !0, E();
-  });
-  const u = (e) => (o) => O({ ...w(o), type: e });
-  return { show: O, success: u("success"), info: u("info"), warning: u("warning"), error: u("error"), loading: u("loading"), closeAll: () => {
-    for (const e of [...a]) h(e);
-  } };
+  }), f = C(
+    T({
+      setup() {
+        return Q({ theme: s, motion: m, buttonAutoInsertSpace: o }), () => H(r);
+      }
+    })
+  );
+  return f.mount(document.createElement("div")), {
+    ...a,
+    dispose() {
+      c || (c = !0, f.unmount());
+    }
+  };
 }
-function Y(n = {}) {
-  let l, p = !1;
-  const a = k({ setup() {
-    return l = K(n), () => null;
-  } }), d = F(k({ setup() {
-    return z(n), () => m(a);
-  } }));
-  return d.mount(document.createElement("div")), { ...l, dispose() {
-    p || (p = !0, d.unmount());
-  } };
+let e;
+const d = g({});
+function u() {
+  return typeof document > "u" ? w() : e ?? (e = w({
+    ...d.value,
+    theme: () => l(d.value.theme) ?? "blue",
+    motion: () => l(d.value.motion) ?? "subtle",
+    buttonAutoInsertSpace: () => l(d.value.buttonAutoInsertSpace) ?? !0
+  }));
 }
+function v(t) {
+  if (typeof document > "u") return;
+  const { theme: s, motion: m, buttonAutoInsertSpace: o, ...p } = t;
+  d.value = { ...d.value, ...t }, e == null || e.configure(p);
+}
+const B = {
+  show: (t) => u().show(t),
+  success: (t) => u().success(t),
+  info: (t) => u().info(t),
+  warning: (t) => u().warning(t),
+  error: (t) => u().error(t),
+  loading: (t) => u().loading(t),
+  promise: (t, s) => u().promise(t, s),
+  close: (t) => e == null ? void 0 : e.close(t),
+  update: (t, s) => e == null ? void 0 : e.update(t, s),
+  find: (t) => e == null ? void 0 : e.find(t),
+  list: (t) => (e == null ? void 0 : e.list(t)) ?? [],
+  closeAll: (t) => e == null ? void 0 : e.closeAll(t),
+  closeType: (t) => e == null ? void 0 : e.closeType(t),
+  clearQueue: () => e == null ? void 0 : e.clearQueue(),
+  configure: v,
+  dispose() {
+    e == null || e.dispose(), e = void 0;
+  }
+};
 export {
-  Y as createHysToast,
-  K as useHysToast
+  v as configureHysToast,
+  w as createHysToast,
+  B as hysToast,
+  V as useHysToast
 };