hys-ui 0.5.0 → 0.7.0

package/dist/composables/useFloating.js

@@ -4,7 +4,7 @@ import { popupSize as Q } from "../motion/popup.js";
 import { positionFloating as Z } from "./floatingPosition.js";
 import { overlayOwnerKey as _, registerOverlay as ee } from "./overlayManager.js";
 function re(v, n, e = {}) {
-  const { disabled: k } = J({}), m = T(_, void 0), c = E(!1), W = Y(), p = E(!1), L = E({
+  const { disabled: k } = J({}), m = T(_, void 0), s = E(!1), W = Y(), p = E(!1), L = E({
     position: "fixed",
     top: "0px",
     left: "0px",
@@ -17,18 +17,18 @@ function re(v, n, e = {}) {
   let $ = 0, w, r, y = 0;
   function F() {
     var R, S, H;
-    if (!c.value || !v.value || !n.value) return;
+    if (!s.value || !v.value || !n.value) return;
     const t = v.value.getBoundingClientRect();
     if (!t.width && !t.height) {
-      u();
+      u(!1, !1, "anchor");
       return;
     }
-    const a = Number.isFinite(e.gap) ? e.gap : 8, i = Number.isFinite(e.padding) ? Math.max(0, e.padding) : 10, l = document.documentElement.clientWidth, o = document.documentElement.clientHeight, d = Math.min(t.width, Math.max(0, l - 2 * i)), g = typeof e.matchWidth == "function" ? e.matchWidth() : e.matchWidth, h = (R = e.maxWidth) == null ? void 0 : R.call(e), P = h !== void 0 && (typeof h != "number" || Number.isFinite(h)) ? `min(${typeof h == "number" ? Math.max(0, h) + "px" : h},calc(100vw - ${i * 2}px))` : `calc(100vw - ${i * 2}px)`, b = (S = e.width) == null ? void 0 : S.call(e), x = typeof b == "number" ? Number.isFinite(b) ? Math.max(0, b) + "px" : void 0 : b;
-    x !== void 0 ? (n.value.style.width = x, n.value.style.minWidth = "0", n.value.style.maxWidth = P) : g === !0 && (n.value.style.width = `${d}px`, n.value.style.minWidth = "0", n.value.style.maxWidth = `${d}px`), x === void 0 && g === "min" && (n.value.style.width = "max-content", n.value.style.minWidth = `${d}px`, n.value.style.maxWidth = `calc(100vw - ${i * 2}px)`);
+    const a = Number.isFinite(e.gap) ? e.gap : 8, i = Number.isFinite(e.padding) ? Math.max(0, e.padding) : 10, l = document.documentElement.clientWidth, d = document.documentElement.clientHeight, c = Math.min(t.width, Math.max(0, l - 2 * i)), g = typeof e.matchWidth == "function" ? e.matchWidth() : e.matchWidth, h = (R = e.maxWidth) == null ? void 0 : R.call(e), P = h !== void 0 && (typeof h != "number" || Number.isFinite(h)) ? `min(${typeof h == "number" ? Math.max(0, h) + "px" : h},calc(100vw - ${i * 2}px))` : `calc(100vw - ${i * 2}px)`, b = (S = e.width) == null ? void 0 : S.call(e), x = typeof b == "number" ? Number.isFinite(b) ? Math.max(0, b) + "px" : void 0 : b;
+    x !== void 0 ? (n.value.style.width = x, n.value.style.minWidth = "0", n.value.style.maxWidth = P) : g === !0 && (n.value.style.width = `${c}px`, n.value.style.minWidth = "0", n.value.style.maxWidth = `${c}px`), x === void 0 && g === "min" && (n.value.style.width = "max-content", n.value.style.minWidth = `${c}px`, n.value.style.maxWidth = `calc(100vw - ${i * 2}px)`);
     const z = Z(
       t,
       Q(n.value),
-      { width: l, height: o },
+      { width: l, height: d },
       A(),
       a,
       i,
@@ -45,7 +45,7 @@ function re(v, n, e = {}) {
         O += window.scrollX, M += window.scrollY;
     }
     L.value = {
-      ...x !== void 0 ? { width: x, minWidth: "0" } : g === !0 ? { width: `${d}px`, minWidth: "0" } : g === "min" ? { width: "max-content", minWidth: `${d}px` } : {},
+      ...x !== void 0 ? { width: x, minWidth: "0" } : g === !0 ? { width: `${c}px`, minWidth: "0" } : g === "min" ? { width: "max-content", minWidth: `${c}px` } : {},
       position: e.strategy ?? "fixed",
       left: `${Math.round(O)}px`,
       top: `${Math.round(M)}px`,
@@ -57,18 +57,18 @@ function re(v, n, e = {}) {
       overscrollBehavior: "contain"
     };
   }
-  function s() {
+  function o() {
     cancelAnimationFrame($), $ = requestAnimationFrame(F);
   }
   function I(t) {
     var a, i;
-    !(r != null && r()) || e.closeOnOutside === !1 || !((a = v.value) != null && a.contains(t.target)) && !((i = n.value) != null && i.contains(t.target)) && u();
+    !(r != null && r()) || e.closeOnOutside === !1 || !((a = v.value) != null && a.contains(t.target)) && !((i = n.value) != null && i.contains(t.target)) && u(!1, !1, "outside");
   }
   function q(t) {
     var a, i;
-    if (!(!c.value || !(r != null && r()))) {
+    if (!(!s.value || !(r != null && r()))) {
       if (t.key === "Escape" && e.closeOnEscape !== !1)
-        t.preventDefault(), t.stopImmediatePropagation(), u(!0);
+        t.preventDefault(), t.stopImmediatePropagation(), u(!0, !1, "escape");
       else if (t.key === "Tab" && e.closeOnTab !== !1) {
         const l = document.activeElement;
         if ((a = v.value) != null && a.contains(l)) {
@@ -76,25 +76,25 @@ function re(v, n, e = {}) {
           return;
         }
         if ((i = n.value) != null && i.contains(l)) {
-          const o = Array.from(
+          const d = Array.from(
             n.value.querySelectorAll(
               'a[href],button:not(:disabled),input:not(:disabled),textarea:not(:disabled),select:not(:disabled),[tabindex]:not([tabindex="-1"])'
             )
           ).filter(
-            (d) => d.getClientRects().length && !d.closest("[inert]")
+            (c) => c.getClientRects().length && !c.closest("[inert]")
           );
-          (!o.length || l === (t.shiftKey ? o[0] : o.at(-1))) && u(!0);
+          (!d.length || l === (t.shiftKey ? d[0] : d.at(-1))) && u(!0);
         }
       }
     }
   }
   function B() {
     var t, a;
-    document.removeEventListener("pointerdown", I, !0), document.removeEventListener("keydown", q, !0), window.removeEventListener("resize", s), window.removeEventListener("scroll", s, !0), (t = window.visualViewport) == null || t.removeEventListener("resize", s), (a = window.visualViewport) == null || a.removeEventListener("scroll", s), cancelAnimationFrame($), w == null || w(), w = void 0, W.value = void 0, r = void 0;
+    document.removeEventListener("pointerdown", I, !0), document.removeEventListener("keydown", q, !0), window.removeEventListener("resize", o), window.removeEventListener("scroll", o, !0), (t = window.visualViewport) == null || t.removeEventListener("resize", o), (a = window.visualViewport) == null || a.removeEventListener("scroll", o), cancelAnimationFrame($), w == null || w(), w = void 0, W.value = void 0, r = void 0;
   }
-  function u(t = !1, a = !1) {
-    var i, l;
-    if (!(!a && c.value && ((i = e.requestOpen) == null ? void 0 : i.call(e, !1, t)) === !1) && (y++, !!c.value && (c.value = !1, B(), t && ((l = v.value) != null && l.isConnected)))) {
+  function u(t = !1, a = !1, i) {
+    var l, d;
+    if (!(!a && s.value && ((l = e.requestOpen) == null ? void 0 : l.call(e, !1, t, i)) === !1) && (y++, !!s.value && (s.value = !1, B(), t && ((d = v.value) != null && d.isConnected)))) {
       p.value = !0;
       try {
         v.value.focus();
@@ -104,29 +104,29 @@ function re(v, n, e = {}) {
     }
   }
   async function N(t = !1) {
-    var l, o, d;
+    var l, d, c;
     if (k.value || (m == null ? void 0 : m.value) === !1) return;
-    if (c.value) {
-      s();
+    if (s.value) {
+      o();
       return;
     }
     if (!t && ((l = e.requestOpen) == null ? void 0 : l.call(e, !0)) === !1) return;
     const a = ++y;
-    if (c.value = !0, L.value = {
+    if (s.value = !0, L.value = {
       position: "fixed",
       top: "0px",
       left: "0px",
       visibility: "hidden"
-    }, await G(), a !== y || !c.value) return;
+    }, await G(), a !== y || !s.value) return;
     const i = ee(
       "floating",
-      () => u(!0),
+      () => u(!0, !1, "escape"),
       e.zIndex
     );
-    W.value = i, w = i.unregister, r = i.isTop, F(), document.addEventListener("pointerdown", I, !0), document.addEventListener("keydown", q, !0), window.addEventListener("resize", s), window.addEventListener("scroll", s, !0), (o = window.visualViewport) == null || o.addEventListener("resize", s), (d = window.visualViewport) == null || d.addEventListener("scroll", s);
+    W.value = i, w = i.unregister, r = i.isTop, F(), document.addEventListener("pointerdown", I, !0), document.addEventListener("keydown", q, !0), window.addEventListener("resize", o), window.addEventListener("scroll", o, !0), (d = window.visualViewport) == null || d.addEventListener("resize", o), (c = window.visualViewport) == null || c.addEventListener("scroll", o);
   }
   function K() {
-    return c.value ? u() : N();
+    return s.value ? u() : N();
   }
   return D(
     k,
@@ -143,7 +143,7 @@ function re(v, n, e = {}) {
   ), V(() => {
     y++, B();
   }), {
-    open: c,
+    open: s,
     style: X(() => {
       var t;
       return {
@@ -157,7 +157,7 @@ function re(v, n, e = {}) {
     close: u,
     toggle: K,
     restoringFocus: p,
-    schedule: s,
+    schedule: o,
     isTop: () => (r == null ? void 0 : r()) ?? !1
   };
 }

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
 };

package/dist/composables/usePageVisibility.js

@@ -0,0 +1,19 @@
+import { onMounted as s, onActivated as u, onDeactivated as c, onBeforeUnmount as d, readonly as f, ref as a } from "vue";
+const r = a(!1);
+let o = 0;
+function i() {
+  r.value = document.hidden;
+}
+function b() {
+  let e = !1;
+  function n() {
+    e || (e = !0, ++o === 1 && (i(), document.addEventListener("visibilitychange", i)));
+  }
+  function t() {
+    e && (e = !1, --o === 0 && document.removeEventListener("visibilitychange", i));
+  }
+  return s(n), u(n), c(t), d(t), f(r);
+}
+export {
+  b as usePageVisibility
+};