hys-ui 0.5.0 → 0.7.0

package/dist/components/HysToast/ToastViewport/ToastViewport2.vue.js

@@ -0,0 +1,211 @@
+import { defineComponent as T, reactive as W, computed as A, watch as P, h as v, TransitionGroup as z, Transition as H, withDirectives as I, vShow as O } from "vue";
+import { provideHysConfig as B } from "../../../config.js";
+import { toastStackKey as F, presentation as L } from "../../../composables/toastQueueModel.js";
+import _ from "../HysToast.vue.js";
+import { finite as w, toastLocale as j, normalizeToastPosition as x, toastPlacement as G } from "../toastPresentation.js";
+import { useToastStackDisclosure as K } from "./useToastStackDisclosure.js";
+function S(a) {
+  var s;
+  const c = x(a.options.position);
+  return c.startsWith("bottom") || c === "custom" && ((s = a.options.coordinates) == null ? void 0 : s.bottom) !== void 0 && a.options.coordinates.top === void 0;
+}
+function R(a) {
+  const c = x(a.options.position), s = G(a.options), l = "calc(-1 * var(--hys-toast-stack-padding))", m = c === "center" || c.endsWith("center");
+  return {
+    ...s,
+    maxWidth: `calc(${s.maxWidth} + var(--hys-toast-stack-padding) * 2)`,
+    marginTop: s.top !== void 0 && c !== "center" ? l : void 0,
+    marginBottom: s.bottom !== void 0 ? l : void 0,
+    marginLeft: s.left !== void 0 && !m ? l : void 0,
+    marginRight: s.right !== void 0 ? l : void 0
+  };
+}
+function U(a, c, s) {
+  const l = x(a.options.position);
+  return {
+    flexDirection: c === "horizontal" ? "row" : S(a) ? "column-reverse" : "column",
+    flexWrap: c === "horizontal" ? "wrap" : "nowrap",
+    justifyContent: c === "horizontal" ? l.endsWith("right") ? "flex-end" : l.endsWith("left") ? "flex-start" : "center" : void 0,
+    alignItems: l.endsWith("left") ? "flex-start" : l.endsWith("right") ? "flex-end" : "center",
+    gap: Math.max(0, s) + "px"
+  };
+}
+const X = T({
+  name: "HysToastViewport",
+  props: {
+    queue: {
+      type: Object,
+      required: !0
+    },
+    skin: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(a) {
+    const c = W(/* @__PURE__ */ new Set()), s = K(), l = A(() => {
+      const t = /* @__PURE__ */ new Map();
+      for (const e of a.queue.records.values()) {
+        if (e.status === "queued") continue;
+        const o = F(e.options), d = t.get(o);
+        d ? d.push(e) : t.set(o, [e]);
+      }
+      return t;
+    });
+    P(
+      [l, () => a.queue.settings.value.layout],
+      ([t, e]) => {
+        s.retain(
+          e === "layered" ? [...t].filter(([, o]) => o.length > 1).map(([o]) => o) : []
+        );
+        for (const o of c) t.has(o) || c.delete(o);
+      }
+    ), B({
+      theme: () => a.skin()["data-hys-theme"],
+      motion: () => a.skin()["data-hys-motion"]
+    });
+    const m = (t) => (e) => typeof t == "function" ? t(e) : t;
+    function q(t, e, o, d, f) {
+      const { queue: u } = a, i = t.options, h = S(t), r = Array.from(
+        { length: d },
+        (n, p) => v("span", {
+          key: "layer-" + p,
+          class: "hys-ui-toast-layer-preview",
+          "aria-hidden": "true",
+          style: { "--hys-toast-layer-depth": p + 1, zIndex: -(p + 1) },
+          onClick: a.queue.settings.value.layerTrigger === "hover" ? void 0 : () => s.toggle(o)
+        })
+      ), g = v(
+        "div",
+        {
+          class: [
+            "hys-ui-toast-stack-item",
+            {
+              "hys-ui-toast-layered-front": d,
+              "hys-ui-toast-layered-bottom": d && h
+            }
+          ],
+          style: d ? { "--hys-toast-stack-depth": d } : void 0,
+          ...d && i.theme ? { "data-hys-ui": "", "data-hys-theme": i.theme } : {},
+          inert: e || void 0,
+          "aria-hidden": e || void 0
+        },
+        [
+          ...r,
+          v(
+            _,
+            {
+              ...L(i),
+              teleport: !1,
+              repeat: t.repeat,
+              paused: t.paused || f && i.pauseOnHover !== !1,
+              interactive: !e && i.interactive !== !1,
+              ref: (n) => u.setInstance(
+                t,
+                n,
+                o
+              ),
+              "data-toast-id": t.id,
+              onUpdate: t.handle.update,
+              onShow: (n) => {
+                t.shown || t.status !== "visible" || (t.shown = !0, u.notify(t.options.onShow, n));
+              },
+              onAfterShow: (n) => {
+                t.entered || t.status !== "visible" || (t.entered = !0, u.notify(t.options.onAfterShow, n));
+              },
+              onClose: (n) => u.begin(t, n),
+              onAfterClose: () => u.finish(t),
+              onClick: (n, p) => u.notify(t.options.onClick, n, p),
+              onAction: (n) => u.notify(t.options.onAction, n)
+            },
+            {
+              ...i.content !== void 0 ? { default: m(i.content) } : {},
+              ...i.icon !== void 0 ? { icon: m(i.icon) } : {},
+              ...i.header !== void 0 ? { header: m(i.header) } : {},
+              ...i.footer !== void 0 ? { footer: m(i.footer) } : {},
+              ...i.renderActions !== void 0 ? { action: m(i.renderActions) } : {}
+            }
+          )
+        ]
+      );
+      return v(
+        H,
+        { key: t.serial, name: "hys-ui-toast-stack-expand" },
+        {
+          default: () => I(g, [[O, !e]])
+        }
+      );
+    }
+    return () => {
+      const { queue: t } = a, e = t.settings.value;
+      return [...l.value].map(([o, d]) => {
+        const f = e.layout === "layered", u = f ? 1 : Math.max(0, Math.floor(w(e.collapsedCount, 0))), i = d.sort(t.order), h = u ? Math.max(0, i.length - u) : 0, r = s.stacks.get(o), g = f && e.layerTrigger !== "click", n = f ? !!(r != null && r.pinned || g && (r != null && r.preview || r != null && r.focused)) : c.has(o), p = f && !n ? Math.min(
+          h,
+          Math.min(
+            4,
+            Math.max(1, Math.floor(w(e.layerCount, 3)) - 1)
+          )
+        ) : 0, k = { ...j, ...e.locale }, C = i.map(
+          (y, b) => q(
+            y,
+            !n && !!h && b >= u,
+            o,
+            b === 0 ? p : 0,
+            !!(g && (r != null && r.preview))
+          )
+        );
+        h && C.push(
+          v(
+            "button",
+            {
+              key: "stack-toggle",
+              type: "button",
+              class: "hys-ui-toast-stack-toggle",
+              "aria-expanded": n,
+              onClick: () => {
+                f ? s.toggle(o) : n ? c.delete(o) : c.add(o);
+              }
+            },
+            (f ? r != null && r.pinned : n) ? k.collapseStack : f && n ? k.pinStack : k.more(h)
+          )
+        );
+        const M = v(
+          z,
+          {
+            tag: "div",
+            moveClass: "hys-ui-toast-stack-move",
+            class: [
+              "hys-ui-toast-stack-items",
+              { "hys-ui-toast-stack-hover": g && h }
+            ],
+            ...g && h ? {
+              onPointerenter: (y) => s.enter(o, y),
+              onPointerleave: () => s.leave(o),
+              onFocusin: () => s.focusIn(o),
+              onFocusout: (y) => s.focusOut(o, y)
+            } : {},
+            style: U(
+              i[0],
+              e.layout ?? "vertical",
+              w(e.gap, 10)
+            )
+          },
+          { default: () => C }
+        );
+        return v(
+          "div",
+          {
+            key: o,
+            ...a.skin(),
+            class: "hys-ui-toast-stack",
+            style: R(i[0])
+          },
+          [M]
+        );
+      });
+    };
+  }
+});
+export {
+  X as default
+};

package/dist/components/HysToast/ToastViewport/useToastStackDisclosure.js

@@ -0,0 +1,71 @@
+import { reactive as v, onBeforeUnmount as g } from "vue";
+function m() {
+  const r = v(/* @__PURE__ */ new Map()), s = /* @__PURE__ */ new Map();
+  function o(e) {
+    clearTimeout(s.get(e)), s.delete(e);
+  }
+  function u(e, t, n) {
+    s.set(
+      e,
+      setTimeout(() => {
+        s.delete(e), t();
+      }, n)
+    );
+  }
+  function c(e) {
+    return r.has(e) || r.set(e, {
+      pinned: !1,
+      preview: !1,
+      focused: !1,
+      suppressHover: !1
+    }), r.get(e);
+  }
+  function f(e, t) {
+    if (t.pointerType === "touch") return;
+    const n = c(e);
+    o(e), n.suppressHover || u(
+      e,
+      () => {
+        n.preview = !0;
+      },
+      110
+    );
+  }
+  function a(e) {
+    const t = r.get(e);
+    t && (o(e), t.suppressHover = !1, u(
+      e,
+      () => {
+        t.preview = !1;
+      },
+      140
+    ));
+  }
+  function p(e) {
+    const t = c(e);
+    if (!t.pinned) {
+      t.pinned = !0;
+      return;
+    }
+    o(e), t.pinned = t.preview = t.focused = !1, t.suppressHover = !0;
+  }
+  function l(e) {
+    const t = r.get(e);
+    t && (t.pinned || t.preview) && (t.focused = !0);
+  }
+  function d(e, t) {
+    const n = r.get(e);
+    n && !t.currentTarget.contains(
+      t.relatedTarget
+    ) && (n.focused = !1);
+  }
+  function i(e) {
+    const t = new Set(e);
+    for (const n of r.keys())
+      t.has(n) || (o(n), r.delete(n));
+  }
+  return g(() => i([])), { stacks: r, enter: f, leave: a, toggle: p, focusIn: l, focusOut: d, retain: i };
+}
+export {
+  m as useToastStackDisclosure
+};

package/dist/components/HysToast/toastPresentation.js

@@ -0,0 +1,98 @@
+const m = {
+  close: "关闭提示",
+  copy: "复制消息",
+  copied: "已复制",
+  copyFailed: "无法复制消息",
+  expand: "展开内容",
+  collapse: "收起内容",
+  collapseStack: "收起提示列表",
+  pinStack: "固定展开提示列表",
+  remaining: (t) => t + " 秒后关闭",
+  repeat: (t) => "重复 " + t + " 次",
+  more: (t) => "展开其余 " + t + " 条提示",
+  actionFailed: "操作失败，请重试",
+  progress: "任务进度"
+};
+function c(t = "top-center") {
+  return t === "top" ? "top-center" : t === "bottom" ? "bottom-center" : t;
+}
+const r = (t, e) => Number.isFinite(t) ? t : e, p = (t) => t.persistent ? 0 : Math.min(
+  2147483647,
+  Math.max(
+    0,
+    r(t.duration, t.type === "loading" ? 0 : 3e3)
+  )
+);
+function u(t) {
+  const e = c(t.position), n = Math.max(0, r(t.offsetX, r(t.offset, 24))), i = Math.max(0, r(t.offsetY, r(t.offset, 24))), o = {
+    position: "fixed",
+    zIndex: t.zIndex ?? 2e3,
+    maxWidth: `min(calc(100vw - ${Math.min(48, Math.max(16, n)) * 2}px), calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px))`
+  };
+  if (e === "custom") {
+    const a = t.coordinates;
+    return {
+      ...o,
+      top: (a == null ? void 0 : a.bottom) === void 0 ? `${i}px` : void 0,
+      left: (a == null ? void 0 : a.right) === void 0 ? `${n}px` : void 0,
+      ...a
+    };
+  }
+  if (e === "center")
+    return { ...o, top: "50%", left: "50%", translate: "-50% -50%" };
+  const s = e.startsWith("bottom") ? "bottom" : "top";
+  return o[s] = `max(${i}px, env(safe-area-inset-${s}, 0px))`, e.endsWith("left") ? o.left = `max(${n}px, env(safe-area-inset-left, 0px))` : e.endsWith("right") ? o.right = `max(${n}px, env(safe-area-inset-right, 0px))` : Object.assign(o, { left: "50%", translate: "-50% 0" }), o;
+}
+function f(t) {
+  const e = c(t.position);
+  return t.direction ? t.direction : e.endsWith("left") ? "left" : e.endsWith("right") ? "right" : e.startsWith("bottom") ? "bottom" : "top";
+}
+function l(t, e) {
+  if (typeof t != "function") return t ?? e;
+  try {
+    const i = `linear(${Array.from(
+      { length: 21 },
+      (o, s) => r(t(s / 20), s / 20)
+    ).join(",")})`;
+    return typeof CSS > "u" || CSS.supports("animation-timing-function", i) ? i : e;
+  } catch {
+    return e;
+  }
+}
+function x(t) {
+  const e = f(t), n = t.animation ?? "scale", i = {
+    top: "translateY(-16px)",
+    bottom: "translateY(16px)",
+    left: "translateX(-20px)",
+    right: "translateX(20px)"
+  }[e], o = typeof n == "object" ? n.enterFrom : {
+    fade: "none",
+    slide: i,
+    scale: "scale(.96)",
+    spring: i + " scale(.92)",
+    bounce: i + " scale(.93)",
+    rotate: "rotate(-6deg) scale(.96)",
+    none: "none"
+  }[n], s = n === "spring" ? "cubic-bezier(.18,.9,.32,1.45)" : n === "bounce" ? "cubic-bezier(.34,1.56,.64,1)" : "var(--hys-ui-motion-ease, ease)", a = typeof n == "object" ? n.leaveTo ?? o : o;
+  return {
+    "--hys-toast-enter": o,
+    "--hys-toast-recoil": {
+      top: "translateY(4px)",
+      bottom: "translateY(-4px)",
+      left: "translateX(4px)",
+      right: "translateX(-4px)"
+    }[e],
+    "--hys-toast-leave": a === "none" ? "translate(0)" : a,
+    "--hys-toast-motion-opacity": typeof n == "object" ? n.opacity ?? 0 : 0,
+    "--hys-toast-motion-duration": n === "none" ? "0ms" : t.animationDuration === void 0 ? "var(--hys-ui-motion-base, 200ms)" : Math.max(0, r(t.animationDuration, 200)) + "ms",
+    "--hys-toast-motion-easing": l(t.easing, s)
+  };
+}
+export {
+  r as finite,
+  c as normalizeToastPosition,
+  p as toastDuration,
+  m as toastLocale,
+  x as toastMotion,
+  u as toastPlacement
+};

package/dist/components/HysToast/useToastActions.js

@@ -0,0 +1,62 @@
+import { ref as v } from "vue";
+function y(e, u) {
+  const r = typeof e == "function" ? e(u) : e;
+  return typeof r == "string" ? { message: r } : r;
+}
+function x(e) {
+  const u = v(), r = v("");
+  let a = 0;
+  async function d() {
+    if (!e.available()) return !1;
+    const t = a;
+    try {
+      return await navigator.clipboard.writeText(e.copyText()), t === a && (r.value = e.locale().copied), !0;
+    } catch {
+      return t === a && (r.value = e.locale().copyFailed), !1;
+    }
+  }
+  function i() {
+    return {
+      ...e.context(),
+      close: e.close,
+      update: e.update,
+      copy: d
+    };
+  }
+  async function b(t) {
+    var n;
+    if (!e.available() || u.value !== void 0 || t.disabled)
+      return;
+    const s = a, f = e.context();
+    u.value = t.id, e.emit({ ...f, action: t, status: "start" });
+    try {
+      const l = await ((n = t.run) == null ? void 0 : n.call(t, i()));
+      if (s !== a || !e.available()) return;
+      const c = y(t.success, l);
+      c && e.update({ type: "success", ...c }), e.emit({ ...f, action: t, status: "success", result: l }), t.closeOnSuccess !== !1 && await e.close();
+    } catch (l) {
+      if (s !== a || !e.available()) return;
+      let c;
+      try {
+        c = y(t.error, l);
+      } catch {
+        c = void 0;
+      }
+      e.update({
+        type: "error",
+        message: e.locale().actionFailed,
+        ...c
+      }), e.emit({ ...f, action: t, status: "error", result: l });
+    } finally {
+      s === a && (u.value = void 0);
+    }
+  }
+  function m() {
+    a++, u.value = void 0, r.value = "";
+  }
+  return { busy: u, copyStatus: r, copy: d, context: i, run: b, reset: m };
+}
+export {
+  y as feedback,
+  x as useToastActions
+};

package/dist/components/HysToast/useToastSwipe.js

@@ -0,0 +1,48 @@
+import { ref as f } from "vue";
+function y(s, d, h) {
+  const o = f(0), u = f(!1), n = f(!1);
+  let a;
+  function l() {
+    var e, r;
+    const t = a == null ? void 0 : a.id;
+    a = void 0, t !== void 0 && ((r = (e = s.value) == null ? void 0 : e.hasPointerCapture) != null && r.call(e, t)) && s.value.releasePointerCapture(t), u.value = !1, o.value = 0;
+  }
+  function v(t) {
+    var e;
+    n.value = !1, !(a || !d() || t.button !== 0 || (e = t.target) != null && e.closest(
+      "button,a,input,textarea,select,[role=button],[contenteditable=true]"
+    )) && (a = { id: t.pointerId, x: t.clientX, y: t.clientY });
+  }
+  function p(t) {
+    var i, c;
+    if (t.pointerId !== (a == null ? void 0 : a.id)) return;
+    const e = t.clientX - a.x, r = t.clientY - a.y;
+    if (!(!u.value && Math.hypot(e, r) < 7)) {
+      if (!u.value && Math.abs(r) > Math.abs(e)) {
+        l();
+        return;
+      }
+      u.value || ((c = (i = s.value) == null ? void 0 : i.setPointerCapture) == null || c.call(i, t.pointerId), u.value = !0, n.value = !0), o.value = e, t.cancelable && t.preventDefault();
+    }
+  }
+  async function b(t) {
+    var i;
+    if (t.pointerId !== (a == null ? void 0 : a.id)) return;
+    const e = Math.min(
+      110,
+      Math.max(44, (((i = s.value) == null ? void 0 : i.offsetWidth) ?? 240) * 0.26)
+    );
+    if (!u.value || Math.abs(o.value) < e) {
+      l();
+      return;
+    }
+    await h(t) ? a = void 0 : l();
+  }
+  function x(t) {
+    (a == null ? void 0 : a.id) === t.pointerId && !u.value && l();
+  }
+  return { shift: o, dragging: u, suppressClick: n, reset: l, start: v, move: p, end: b, leave: x };
+}
+export {
+  y as useToastSwipe
+};

package/dist/components/HysToast/useToastTimer.js

@@ -0,0 +1,90 @@
+import { ref as m, watch as E, onMounted as L, onBeforeUnmount as p } from "vue";
+const f = /* @__PURE__ */ new Set();
+let o = !1;
+function c() {
+  for (const e of f) e(o || document.hidden);
+}
+function x() {
+  o = !0, c();
+}
+function b() {
+  o = !1, c();
+}
+function y(e) {
+  return f.size || (window.addEventListener("blur", x), window.addEventListener("focus", b), document.addEventListener("visibilitychange", c)), f.add(e), e(o || document.hidden), () => {
+    f.delete(e), !f.size && (o = !1, window.removeEventListener("blur", x), window.removeEventListener("focus", b), document.removeEventListener("visibilitychange", c));
+  };
+}
+function D(e) {
+  const t = m(0), u = m(0), v = m(!1), w = m(!1);
+  let l, a = 0, r = !1, s;
+  function i() {
+    clearTimeout(l), l = void 0, a && (t.value = Math.max(0, a - Date.now())), a = 0;
+  }
+  function h() {
+    const n = Math.max(0, a - Date.now());
+    if (t.value = n, n === 0) {
+      a = 0, l = void 0, r = !0, e.expire();
+      return;
+    }
+    l = setTimeout(h, e.indicators() ? Math.min(n, 100) : n);
+  }
+  function d() {
+    if (i(), !(typeof window > "u") && !(!e.running() || v.value || e.pauseOnBlur() && w.value || !u.value || r)) {
+      if (t.value <= 0) {
+        r = !0, e.expire();
+        return;
+      }
+      a = Date.now() + t.value, l = setTimeout(
+        h,
+        e.indicators() ? Math.min(t.value, 100) : t.value
+      );
+    }
+  }
+  function g() {
+    i(), r = !1, t.value = u.value = e.duration(), d();
+  }
+  function M(n) {
+    !u.value || !Number.isFinite(n) || n <= 0 || (i(), r = !1, t.value = Math.min(2147483647, t.value + n), u.value = Math.min(2147483647, u.value + n), d());
+  }
+  return E(
+    [
+      e.running,
+      e.indicators,
+      e.pauseOnBlur,
+      v,
+      w
+    ],
+    d,
+    { flush: "sync" }
+  ), L(() => {
+    s = y((n) => {
+      w.value = n;
+    });
+  }), p(() => {
+    s == null || s(), i();
+  }), {
+    remaining: t,
+    total: u,
+    restart: g,
+    extend: M,
+    stop: i,
+    snapshot: () => ({
+      remaining: a ? Math.max(0, a - Date.now()) : t.value,
+      total: u.value,
+      expired: r
+    }),
+    restore(n) {
+      i(), t.value = n.remaining, u.value = n.total, r = n.expired, d();
+    },
+    pause: () => {
+      v.value = !0;
+    },
+    resume: () => {
+      v.value = !1;
+    }
+  };
+}
+export {
+  D as useToastTimer
+};

package/dist/composables/formLayout.js

@@ -1,5 +1,4 @@
-import { ref as d, watch as a, onMounted as u, onActivated as c, onDeactivated as m, onBeforeUnmount as p, computed as h } from "vue";
-const s = [
+const e = [
   ["xs", 0],
   ["sm", 576],
   ["md", 768],
@@ -7,51 +6,30 @@ const s = [
   ["xl", 1200],
   ["xxl", 1600]
 ];
-function v(t, r, e = 1) {
-  let o = typeof t == "number" ? t : e;
-  if (t && typeof t == "object")
-    for (const [n, i] of s)
-      r >= i && t[n] !== void 0 && (o = t[n]);
-  return Math.max(1, Math.min(24, Math.floor(Number(o) || e)));
+function m(o, s, t = 1) {
+  let n = typeof o == "number" ? o : t;
+  if (o && typeof o == "object")
+    for (const [r, f] of e)
+      s >= f && o[r] !== void 0 && (n = o[r]);
+  return Math.max(1, Math.min(24, Math.floor(Number(n) || t)));
 }
-function l(t, r) {
-  if (!t) return;
-  let e = { span: t.span, offset: t.offset };
-  for (const [o, n] of s)
-    if (r >= n && t[o] !== void 0) {
-      const i = t[o];
-      e = {
-        ...e,
-        ...typeof i == "number" ? { span: i } : i
+function i(o, s) {
+  if (!o) return;
+  let t = { span: o.span, offset: o.offset };
+  for (const [n, r] of e)
+    if (s >= r && o[n] !== void 0) {
+      const f = o[n];
+      t = {
+        ...t,
+        ...typeof f == "number" ? { span: f } : f
       };
     }
   return {
-    span: Math.max(0, Math.min(24, Math.floor(e.span ?? 24))),
-    offset: Math.max(0, Math.min(23, Math.floor(e.offset ?? 0)))
+    span: Math.max(0, Math.min(24, Math.floor(t.span ?? 24))),
+    offset: Math.max(0, Math.min(23, Math.floor(t.offset ?? 0)))
   };
 }
-function M(t) {
-  const r = d(0);
-  let e, o = !0;
-  const n = () => {
-    t.value && (r.value = t.value.clientWidth || t.value.getBoundingClientRect().width);
-  };
-  function i() {
-    f(), !(!o || !t.value) && (n(), typeof ResizeObserver < "u" ? (e = new ResizeObserver(n), e.observe(t.value)) : typeof window < "u" && window.addEventListener("resize", n));
-  }
-  function f() {
-    e == null || e.disconnect(), e = void 0, typeof window < "u" && window.removeEventListener("resize", n);
-  }
-  return a(t, i), u(i), c(() => {
-    o = !0, i();
-  }), m(() => {
-    o = !1, f();
-  }), p(() => {
-    o = !1, f();
-  }), h(() => r.value);
-}
 export {
-  l as resolveFormCol,
-  v as resolveFormGrid,
-  M as useFormWidth
+  i as resolveFormCol,
+  m as resolveFormGrid
 };