hys-ui 0.4.0 → 0.6.0

package/dist/components/HysAnimatedNumber/animation/scenarios.js

@@ -0,0 +1,217 @@
+import { rectangle as D, wave as k, glyph as g, clamp as w, noise as S, smooth as T, localProgress as W } from "./paint.js";
+import { paintRoll as I } from "./rolling.js";
+import { paintSpatial as z } from "./spatial.js";
+import { paintPhysics as A } from "./physics.js";
+import { paintReveal as x } from "./reveal.js";
+import { paintParticles as C } from "./particles.js";
+import { paintDigital as q } from "./digital.js";
+function b(e, o, s) {
+  const { ctx: l, size: n, width: h, accent: t } = e;
+  l.save(), l.strokeStyle = l.fillStyle = t, l.lineWidth = 0.025 * n, l.lineCap = "round", l.globalAlpha *= 0.8;
+  const d = h / n * 0.48;
+  if (s === 17 || s === 18)
+    l.beginPath(), l.arc(0, 0, 0.53 * n, -Math.PI / 2, Math.PI * (2 * o - 0.5)), l.stroke(), s === 18 && (l.beginPath(), l.moveTo(0, 0.42 * n), l.lineTo(
+      Math.cos(Math.PI * (o - 1)) * 0.33 * n,
+      (0.42 + Math.sin(Math.PI * (o - 1)) * 0.33) * n
+    ), l.stroke());
+  else if (s === 19 || s === 20) {
+    l.beginPath(), l.moveTo(-d * n, 0.64 * n);
+    for (let M = 1; M <= 8; M++) {
+      const i = M / 8, f = s === 19 ? 0.62 - 0.17 * i - Math.sin(i * 11) * 0.08 : 0.64 - i * 0.21;
+      l.lineTo((-d + d * 2 * i * o) * n, f * n);
+    }
+    l.stroke();
+  } else l.fillRect(-d * n, 0.58 * n, d * 2 * o * n, 0.028 * n);
+  l.restore();
+}
+function K(e, o) {
+  const { p: s, from: l, to: n, digit: h, index: t, strength: d, accent: M, ctx: i, size: f } = e;
+  if (o === 2 && e.section === "integer") {
+    g(e, h);
+    return;
+  }
+  if (o < 3 || o === 28 || o === 29) {
+    I(e, [17, 7, 15][o] ?? (o === 28 ? 13 : 19));
+    return;
+  }
+  if (o === 3 || o === 4) {
+    z(e, o === 3 ? 6 : 14);
+    return;
+  }
+  if (o === 5) {
+    x(e, 19);
+    return;
+  }
+  if (o === 10 || o === 11) {
+    x(e, o === 10 ? 5 : 14);
+    return;
+  }
+  if (o >= 16 && o <= 20) {
+    g(e, h), b(e, s, o);
+    return;
+  }
+  if ([21, 22, 23, 24].includes(o)) {
+    A(
+      e,
+      o === 22 ? 19 : o === 23 ? 0 : o === 24 ? 12 : 11
+    );
+    return;
+  }
+  const c = k(s) * d, p = [6, 8, 12, 13, 14, 15, 26].includes(o), y = o === 25 || o === 27 ? "#df5268" : M, P = [6, 7, 12, 13, 14, 15, 25, 26, 27].includes(o);
+  if (g(e, l, { y: (p ? 0.28 : -0.28) * s, alpha: (1 - s) ** 2 }), g(e, n, {
+    y: (p ? -0.23 : 0.23) * (1 - s) * d,
+    sx: 1 + (P ? 0.18 * c : 0),
+    sy: 1 + (P ? 0.18 * c : 0),
+    alpha: Math.min(1, 0.35 + s),
+    color: P && s > 0.28 ? y : void 0,
+    glow: P ? c * 0.2 : 0
+  }), (o === 8 || o === 9) && t === e.count - 1 && g(e, o === 8 ? "↑" : "↓", {
+    x: 0.57,
+    y: (1 - s) * 0.17,
+    sx: 0.47,
+    sy: 0.47,
+    color: y,
+    alpha: c
+  }), [6, 12, 26].includes(o)) {
+    i.save(), i.fillStyle = y, i.globalAlpha *= c * 0.7;
+    const u = o === 6 ? e.width * 0.52 : e.width * 0.72 * s;
+    i.fillRect(
+      -u / 2,
+      f * (o === 26 ? -0.58 : 0.54),
+      u,
+      f * 0.022
+    ), i.restore();
+  }
+  if (o === 13 || o === 14 || o === 15 || o === 25) {
+    i.save(), i.strokeStyle = y, i.lineWidth = 0.022 * f, i.globalAlpha *= c * 0.7;
+    const u = (0.42 + c * 0.16) * f;
+    o === 13 ? (i.setLineDash([f * 0.045, f * 0.045]), i.strokeRect(-u / 2, -u, u, u * 2)) : o === 14 || o === 15 ? (i.beginPath(), i.ellipse(
+      0,
+      0,
+      u * 0.62,
+      u * 1.16,
+      0,
+      -Math.PI / 2,
+      (s * 2 - 0.5) * Math.PI
+    ), i.stroke(), o === 15 && b(e, s, 16)) : i.strokeRect(-u / 2, -u, u, u * 2), i.restore();
+  }
+}
+function B(e, o) {
+  const { p: s, from: l, to: n, size: h, ctx: t, seed: d, strength: M, accent: i } = e, f = [i, "#e9903d", "#d8649e", "#23aa85"];
+  g(e, l, { alpha: (1 - s) ** 3 }), g(e, n, { alpha: w(s * 1.7), glow: 0.17 * k(s) });
+  const c = w((s - 0.17) / 0.83);
+  if (c)
+    for (let p = 0; p < 18; p++) {
+      const y = p / 18 * Math.PI * 2 + S(d, p) * 0.19, P = (0.3 + S(d + 7, p) * 0.69) * T(c) * M, u = Math.cos(y) * P, R = Math.sin(y) * P + c ** 2 * (o ? 0.58 : 0.19);
+      t.save(), t.globalAlpha *= (1 - c) * 0.9, t.fillStyle = t.strokeStyle = f[p % f.length], o ? (t.translate(u * h, R * h), t.rotate(y + c * Math.PI * 3), t.fillRect(-0.023 * h, -0.046 * h, 0.047 * h, 0.095 * h)) : (t.shadowColor = t.strokeStyle, t.shadowBlur = h * 0.08, t.lineWidth = h * 0.021, t.beginPath(), t.moveTo(
+        (u - Math.cos(y) * 0.13 * (1 - c)) * h,
+        (R - Math.sin(y) * 0.13 * (1 - c)) * h
+      ), t.lineTo(u * h, R * h), t.stroke()), t.restore();
+    }
+}
+function N(e, o) {
+  const { p: s, index: l, count: n, seed: h } = e, t = Math.abs(l - (n - 1) / 2), d = Math.min(l, n - l - 1), M = [
+    l,
+    l,
+    Math.floor(l / 2),
+    t * 2,
+    d * 2,
+    S(h, l) * (n - 1),
+    0,
+    l,
+    l % 2,
+    l,
+    l,
+    l % 3,
+    l,
+    d * 2,
+    Math.floor(l / 3),
+    Math.floor(l / 3) + l % 3,
+    l,
+    S(h + 37, l) * (n - 1),
+    Math.floor(l / 3),
+    l % 3
+  ][o], f = W(s, M, n, o === 6 ? 0 : o === 9 ? 0.75 : o === 10 ? 0.62 : o === 12 ? 0.54 : 0.45), c = { ...e, p: f };
+  if (f === 0) {
+    g(e, e.from);
+    return;
+  }
+  if (f === 1) {
+    g(e, e.to);
+    return;
+  }
+  o === 1 || o === 13 ? A(c, o === 1 ? 11 : 8) : o === 8 || o === 9 || o === 6 || o === 7 ? I(
+    { ...c, axis: l % 2 === 0 ? e.axis : "horizontal" },
+    o === 7 ? 17 : 15
+  ) : o === 10 ? x(c, 16) : o === 12 ? x(c, 8) : x(c, [2, 15, 16, 18, 19].includes(o) ? 18 : 2);
+}
+function O(e, o) {
+  const { p: s, from: l, to: n, size: h, ctx: t, seed: d, accent: M, width: i, strength: f } = e;
+  if (o === 0) {
+    z(e, 8);
+    return;
+  }
+  if (o <= 4) {
+    I(e, [0, 5, 10, 17, 6][o]);
+    return;
+  }
+  if (o === 9) {
+    C(e, 19), b(e, s, 17);
+    return;
+  }
+  if (o === 10 || o === 11) {
+    B(e, o === 11);
+    return;
+  }
+  if (o >= 14) {
+    if (o === 17 || o === 19)
+      b(e, s, o === 17 ? 18 : 16);
+    else {
+      const c = T(s) * 0.94, p = i / h * 0.47;
+      D(
+        e,
+        -p,
+        0.49 - c,
+        p * 2,
+        c,
+        () => g(e, n, { color: M, glow: 0.1 })
+      ), t.save(), t.globalAlpha *= 0.38 * k(s), t.fillStyle = M, o === 15 && t.fillRect(
+        -i * 0.58,
+        (0.42 - c) * h,
+        0.04 * h,
+        c * h
+      ), o === 16 && t.fillRect(-i * 0.5, -0.54 * h, i * s, 0.055 * h), o === 18 && t.fillRect(-i * 0.5, (0.55 - c) * h, i, 0.038 * h), t.restore();
+    }
+    g(e, n, { alpha: 0.38 + 0.62 * s });
+    return;
+  }
+  if (o === 7 || o === 8) {
+    g(e, l, { alpha: (1 - s) ** 3 }), g(e, n, { alpha: w(s * 1.4) });
+    for (let c = 0; c < 6; c++) {
+      const p = w(s * 1.6 - c * 0.09);
+      !p || p === 1 && o === 7 || (t.save(), t.globalAlpha *= k(s), t.fillStyle = c % 2 ? "#f1a52f" : "#ffd67a", t.beginPath(), t.ellipse(
+        (S(d, c) - 0.5) * i * 1.3,
+        (o === 7 ? -1 + p ** 2 * 1.55 : 0.48 - c * 0.085 - (1 - p) * 0.72) * h,
+        0.11 * h,
+        (0.04 + Math.abs(Math.sin(p * 12)) * 0.035) * h,
+        0,
+        0,
+        Math.PI * 2
+      ), t.fill(), t.restore());
+    }
+    return;
+  }
+  if (o === 13) {
+    q(e, 27), b(e, s, 17);
+    return;
+  }
+  A(
+    { ...e, strength: f * 0.9 },
+    o === 12 ? 18 : o === 6 ? 14 : 2
+  ), b(e, s, 17);
+}
+export {
+  K as paintData,
+  N as paintSequence,
+  O as paintSpecial
+};

package/dist/components/HysAnimatedNumber/animation/spatial.js

@@ -0,0 +1,112 @@
+import { glyph as w, wave as h, rectangle as d, smooth as S, mix as R } from "./paint.js";
+function k(o, s, c, g = !1) {
+  const { p: t, from: M, to: l, ctx: y, size: p, strength: u } = o, x = [
+    { text: M, angle: t * 2 * Math.PI / s },
+    { text: l, angle: (t - 1) * 2 * Math.PI / s }
+  ];
+  s > 4 && (x.push({
+    text: o.glyphs[(o.fromIndex + 9) % 10],
+    angle: (t + 1) * 2 * Math.PI / s
+  }), x.push({
+    text: o.glyphs[(o.toIndex + 1) % 10],
+    angle: (t - 2) * 2 * Math.PI / s
+  }));
+  for (const q of x.sort(
+    (n, I) => Math.cos(n.angle) - Math.cos(I.angle)
+  )) {
+    const n = Math.cos(q.angle);
+    if (n <= 0) continue;
+    const I = (s > 4 ? 0.62 : 0.43) * (0.7 + u * 0.3), f = Math.sin(q.angle) * I, e = g ? Math.sqrt(n) : n;
+    y.save(), y.globalAlpha *= n * 0.28 * h(t), y.fillStyle = o.accent;
+    const A = (c ? f - 0.33 * e : -0.33) * p, b = (c ? -0.51 : f - 0.51 * e) * p;
+    y.fillRect(
+      A,
+      b,
+      0.66 * p * (c ? e : 1),
+      1.02 * p * (c ? 1 : e)
+    ), y.restore(), w(o, q.text, {
+      x: c ? f : 0,
+      y: c ? 0 : f,
+      sx: c ? e : g ? 0.88 + 0.12 * n : 1,
+      sy: c ? g ? 0.88 + 0.12 * n : 1 : e,
+      alpha: 0.38 + n * 0.62
+    });
+  }
+}
+function B(o, s) {
+  const { p: c, from: g, to: t, width: M, size: l, ctx: y } = o, p = s === 5 || s === 14 && o.axis === "horizontal", u = s === 9 ? 5 : s === 8 || s === 4 || s === 5 ? 2 : 1, x = M / l, q = Math.cos(c * Math.PI), n = c < 0.5, I = n ? g : t, f = s === 6 ? (n ? c : c - 1) * 0.36 : 0;
+  s === 8 && (d(
+    o,
+    -x / 2,
+    -0.57,
+    x,
+    0.57,
+    () => w(o, n ? t : I)
+  ), d(
+    o,
+    -x / 2,
+    0,
+    x,
+    0.57,
+    () => w(o, n ? I : g)
+  ));
+  for (let e = 0; e < u; e++) {
+    const A = p ? x / u * e - x / 2 : 1.12 / u * e - 0.56, b = p ? [A, -0.56, x / u, 1.12] : [-x / 2, A, x, 1.12 / u], P = s === 9 ? S(c * 1.25 - e * 0.055) : c, F = Math.abs(s === 9 ? Math.cos(P * Math.PI) : q), j = s === 7 ? -0.62 * h(P) : s === 8 ? 0.25 * h(P) * (n ? -1 : 1) : 0;
+    d(o, b[0], b[1], b[2], b[3], () => {
+      y.globalAlpha *= s === 8 ? 0.92 : 1, w(o, P < 0.5 ? g : t, {
+        x: p && s === 5 ? (e - 0.5) * 0.25 * h(P) : 0,
+        y: j + (s === 4 ? (e - 0.5) * 0.3 * h(P) : 0),
+        sx: p ? F : 1,
+        sy: p ? 1 : F,
+        angle: f
+      });
+    });
+  }
+}
+function D(o, s) {
+  const { from: c, to: g, p: t, strength: M } = o;
+  if (s < 4 || s === 15) {
+    k(
+      o,
+      [4, 8, 10, 6][s] ?? 3,
+      s === 0 || s === 2 || s === 15,
+      s === 2
+    );
+    return;
+  }
+  if (s <= 9 || s === 14) {
+    B(o, s);
+    return;
+  }
+  const l = (1 - t) * M, y = {
+    10: {
+      sx: 0.5 + S(t) * 0.5 + h(t) * 0.32,
+      sy: 0.5 + S(t) * 0.5 + h(t) * 0.32
+    },
+    11: { sx: 1 + l * 0.75, sy: 1 + l * 0.75, blur: 0.045 * l },
+    12: { sx: 0.25 + 0.75 * t, sy: 1 + 0.16 * l, angle: l * 0.5, x: -0.3 * l },
+    13: {
+      sx: R(0.25, 1, t),
+      sy: R(0.25, 1, t),
+      x: 0.6 * l,
+      y: -0.32 * l,
+      blur: 0.06 * l
+    },
+    16: {
+      y: -0.28 * h(t) * M,
+      sx: 1 + h(t) * 0.12,
+      sy: 1 + h(t) * 0.12,
+      glow: 0.2 * h(t)
+    },
+    17: { angle: -0.48 * l, sx: 1 - 0.28 * l, sy: 1 + 0.12 * l },
+    18: { sx: 1 + 0.4 * h(t) * M, sy: 1 - 0.42 * h(t) * M },
+    19: { sx: 0.14 + 0.86 * S(t), sy: 0.42 + 0.58 * t, angle: l * 0.28 }
+  };
+  w(o, c, { alpha: (1 - t) ** 2, sx: 1 + t * 0.3, sy: 1 + t * 0.3 }), w(o, g, {
+    ...y[s],
+    alpha: t ** 0.5
+  });
+}
+export {
+  D as paintSpatial
+};

package/dist/components/HysAnimatedNumber/useNumberCountdown.js

@@ -0,0 +1,58 @@
+import { computed as l, ref as H, watch as v, onMounted as N, onActivated as A, onDeactivated as E, onBeforeUnmount as y } from "vue";
+import { listenVisibility as F, unlistenVisibility as V } from "../../composables/animatedNumberTiming.js";
+const _ = { D: 864e5, H: 36e5, m: 6e4, s: 1e3, S: 1 }, M = /^(DD?|HH?|mm?|ss?|SSS)$/;
+function C(b, g, d, T, w) {
+  const S = l(() => {
+    const t = b(), o = t instanceof Date ? t.getTime() : t;
+    return o !== void 0 && Number.isFinite(o) ? o : void 0;
+  }), c = l(
+    () => g().match(/\[[^\]]*\]|SSS|DD?|HH?|mm?|ss?|[\s\S]/g) ?? []
+  ), u = l(() => c.value.includes("SSS")), i = H(0);
+  let a = !1, m, r, f;
+  function n() {
+    clearTimeout(m);
+    const t = S.value;
+    if (!(!a || t === void 0 || d() && document.hidden)) {
+      if (i.value = Math.max(
+        0,
+        Math.min(Number.MAX_SAFE_INTEGER, t - Date.now())
+      ), i.value !== r && (r = i.value, T(r)), i.value === 0) {
+        f !== t && (f = t, w());
+        return;
+      }
+      m = setTimeout(
+        n,
+        u.value ? 16 : i.value % 1e3 || 1e3
+      );
+    }
+  }
+  function h() {
+    a || (a = !0, F(n), n());
+  }
+  function p() {
+    a = !1, V(n), clearTimeout(m);
+  }
+  v(S, () => {
+    r = f = void 0, i.value = 0, n();
+  }), v(u, n), v(d, n), N(h), A(h), E(p), y(p);
+  const x = l(() => {
+    let t = u.value ? Math.floor(i.value) : Math.ceil(i.value / 1e3) * 1e3;
+    const o = /* @__PURE__ */ new Map();
+    for (const [e, s] of Object.entries(_))
+      c.value.some((D) => D[0] === e && M.test(D)) && (o.set(e, Math.floor(t / s)), t %= s);
+    return c.value.map((e) => {
+      const s = o.get(e[0]);
+      return M.test(e) && s !== void 0 ? {
+        text: String(s).padStart(e.length, "0"),
+        numeric: !0
+      } : {
+        text: e.startsWith("[") && e.endsWith("]") ? e.slice(1, -1) : e,
+        numeric: !1
+      };
+    });
+  });
+  return { remaining: i, parts: x, milliseconds: u };
+}
+export {
+  C as useNumberCountdown
+};

package/dist/components/HysAnimatedNumber/useNumberVisuals.js

@@ -0,0 +1,60 @@
+import { computed as n } from "vue";
+import { digitEffects as I } from "../../composables/animatedNumberDigits.js";
+import { numberTrend as j } from "../../composables/animatedNumberFormat.js";
+const k = (a) => typeof a == "string" ? [a] : a ?? [];
+function C(a, s, P, S, T, v, h) {
+  const i = n(() => s.value.from), u = n(() => s.value.to), x = n(
+    () => a.changeThreshold !== void 0 && j(i.value, u.value, a.changeThreshold).significant
+  ), o = n(
+    () => x.value && h.value ? [...k(a.thresholdEffect ?? "highlight"), ...v.value] : v.value
+  ), c = n(() => s.value.status), d = n(
+    () => c.value === "playing" || c.value === "paused"
+  ), r = n(
+    () => S.value && h.value && !T.value && d.value && s.value.progress < 1
+  ), e = (t) => o.value.includes(t), E = n(
+    () => o.value.find((t) => I.includes(t))
+  ), l = n(() => e("slide") && r.value), g = (t) => a.axis === "horizontal" ? `translateX(${t}%)` : `translateY(${t}%)`, f = () => s.value.direction === "down" ? -1 : 1, m = n(() => {
+    if (!r.value || !l.value && !e("fade") || i.value === u.value)
+      return;
+    const t = s.value.progress;
+    return {
+      opacity: e("fade") ? 1 - t : 1,
+      transform: l.value ? g(-f() * t * 100) : void 0
+    };
+  }), Y = n(() => {
+    var M;
+    if (!r.value || !a.animationStyle && !o.value.some(
+      ($) => $ !== "count" && !I.includes($)
+    ))
+      return;
+    const t = s.value.progress, y = Math.sin(Math.PI * t), z = 1 - (e("scale") ? 0.18 * (1 - t) : 0) + (e("spring") ? 0.24 * Math.sin(4 * Math.PI * t) * (1 - t) : 0), N = e("bounce") ? -0.27 * Math.abs(Math.sin(3 * Math.PI * t)) * (1 - t) : 0, V = e("fade") ? m.value ? t : 0.25 + 0.75 * t : 1, X = e("flash") ? 1 - 0.35 * Math.abs(Math.sin(4 * Math.PI * t)) * (1 - t) : 1;
+    let b;
+    try {
+      b = (M = a.animationStyle) == null ? void 0 : M.call(a, P.value);
+    } catch {
+    }
+    return [
+      {
+        transform: `${l.value ? g(f() * (1 - t) * 100) : ""} translateY(${N}em) scale(${z})`.trim(),
+        opacity: V * X,
+        filter: e("blur") ? `blur(${0.12 * (1 - t)}em)` : void 0,
+        "--hys-number-highlight": e("highlight") ? y : 0,
+        "--hys-number-gradient": e("gradient") ? y : 0
+      },
+      b
+    ];
+  });
+  return {
+    from: i,
+    to: u,
+    status: c,
+    running: d,
+    digitEffect: E,
+    visualStyle: Y,
+    outgoingStyle: m,
+    sliding: l
+  };
+}
+export {
+  C as useNumberVisuals
+};

package/dist/components/HysDrawer/HysDrawer.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysDrawer2.vue.js";
 /* empty css               */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-81102b84"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-8b06b772"]]);
 export {
   p as default
 };

package/dist/components/HysDrawer/HysDrawer2.vue.js

@@ -323,7 +323,7 @@ const Pe = ["inert", "aria-hidden"], De = ["role", "aria-label", "aria-labelledb
                     e.showClose ? (d(), u("button", {
                       key: 1,
                       type: "button",
-                      class: "hys-ui-icon-action",
+                      class: "hys-ui-icon-action hys-ui-dialog-close",
                       "aria-label": e.closeText,
                       disabled: t(a).closing.value || t(a).confirming.value && !e.closeWhileConfirming,
                       onClick: i[1] || (i[1] = (r) => t(a).requestClose("button", r))
@@ -336,7 +336,7 @@ const Pe = ["inert", "aria-hidden"], De = ["role", "aria-label", "aria-labelledb
                 ], 6)) : e.showClose ? (d(), u("button", {
                   key: 1,
                   type: "button",
-                  class: "hys-ui-icon-action hys-ui-drawer-floating-close",
+                  class: "hys-ui-icon-action hys-ui-dialog-close hys-ui-drawer-floating-close",
                   "aria-label": e.closeText,
                   disabled: t(a).closing.value || t(a).confirming.value && !e.closeWhileConfirming,
                   onClick: i[2] || (i[2] = (r) => t(a).requestClose("button", r))

package/dist/components/HysFormItem/HysFormItem.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysFormItem2.vue.js";
 /* empty css                 */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ed19e01e"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-7ce25263"]]);
 export {
   p as default
 };