@wick-charts/vue 0.8.1 → 0.8.2

package/dist/core/dist/snapshots.js

@@ -1,124 +1,143 @@
-import { isGapPoint as f, pointValue as y } from "./utils/point.js";
+import { isGapPoint as f, pointValue as h } from "./utils/point.js";
+import { formatDate as x } from "./utils/time.js";
 const g = /* @__PURE__ */ new WeakMap();
-function I(e, r) {
-  return g.get(e)?.get(r);
+function I(e, t) {
+  return g.get(e)?.get(t);
 }
-function b(e, r, n) {
-  let o = g.get(e);
-  o || (o = /* @__PURE__ */ new Map(), g.set(e, o)), o.set(r, n);
+function y(e, t, o) {
+  let n = g.get(e);
+  n || (n = /* @__PURE__ */ new Map(), g.set(e, n)), n.set(t, o);
 }
-function h(e) {
-  const r = e.low !== void 0 && e.high !== void 0 ? { time: e.time, low: e.low, high: e.high } : { time: e.time, value: e.value };
-  return e.x !== void 0 && (r.x = e.x), r;
+function b(e) {
+  const t = e.low !== void 0 && e.high !== void 0 ? { time: e.time, low: e.low, high: e.high } : { time: e.time, value: e.value };
+  return e.x !== void 0 && (t.x = e.x), t;
 }
-function S(e, r) {
-  if (r === "none" || e.length <= 1) return e;
-  const n = [...e];
-  return n.sort((o, a) => {
-    const s = y(o.data), i = y(a.data);
-    return r === "asc" ? s - i : i - s;
-  }), n;
+function S(e, t) {
+  if (t === "none" || e.length <= 1) return e;
+  const o = [...e];
+  return o.sort((n, r) => {
+    const s = h(n.data), c = h(r.data);
+    return t === "asc" ? s - c : c - s;
+  }), o;
 }
 function m(e) {
-  const r = Object.freeze({ ...e.data }), n = {
+  const t = Object.freeze({ ...e.data }), o = {
     id: e.id,
     seriesId: e.seriesId,
     layerIndex: e.layerIndex,
     label: e.label,
-    data: r,
-    color: e.color
+    data: t,
+    color: e.color,
+    ...e.share === void 0 ? {} : { share: e.share }
   };
-  return Object.freeze(n);
+  return Object.freeze(o);
 }
-function x(e, r) {
-  const n = r.sort ?? "none", o = e.getOverlayVersion(), a = I(e, r.cacheKey);
-  if (a && a.version === o && a.time === r.time && a.sort === n)
-    return a.data;
+function w(e, t) {
+  const o = t.sort ?? "none", n = e.getSnapshotVersion(), r = I(e, t.cacheKey);
+  if (r && r.version === n && r.time === t.time && r.sort === o)
+    return r.data;
   const s = [];
-  for (const t of e.getSeriesIds()) {
-    if (!e.isSeriesVisible(t)) continue;
-    if (e.getSeriesLayers(t) !== null) {
-      const d = e.getLayerSnapshots(t, r.time);
+  for (const a of e.getSeriesIds()) {
+    if (!e.isSeriesVisible(a)) continue;
+    if (e.getSeriesLayers(a) !== null) {
+      const d = e.getLayerSnapshots(a, t.time);
       if (!d) continue;
-      for (const l of d) {
-        const u = h(l);
+      for (const i of d) {
+        const u = b(i);
         f(u) || s.push(
           m({
-            id: `${t}_layer${l.layerIndex}`,
-            seriesId: t,
-            layerIndex: l.layerIndex,
-            label: e.getLayerLabel(t, l.layerIndex),
+            id: `${a}_layer${i.layerIndex}`,
+            seriesId: a,
+            layerIndex: i.layerIndex,
+            label: e.getLayerLabel(a, i.layerIndex),
             data: u,
-            color: l.color
+            color: i.color,
+            share: i.share
           })
         );
       }
       continue;
     }
-    const c = e.getDataAtTime(t, r.time);
-    !c || f(c) || s.push(
+    const l = e.getDataAtTime(a, t.time);
+    !l || f(l) || s.push(
       m({
-        id: t,
-        seriesId: t,
-        label: e.getSeriesLabel(t),
-        data: c,
-        color: e.getSeriesColor(t) ?? "#888"
+        id: a,
+        seriesId: a,
+        label: e.getSeriesLabel(a),
+        data: l,
+        color: e.getSeriesColor(a) ?? "#888"
       })
     );
   }
-  const i = Object.freeze(S(s, n));
-  return b(e, r.cacheKey, { version: o, time: r.time, sort: n, data: i }), i;
+  const c = Object.freeze(S(s, o));
+  return y(e, t.cacheKey, { version: n, time: t.time, sort: o, data: c }), c;
 }
-function v(e, r) {
-  const { time: n, snapshots: o, interval: a } = r;
-  if (e.timeScale.getType() !== "numeric") return e.timeScale.formatX(n, a);
-  let s = n, i = Number.POSITIVE_INFINITY;
-  for (const t of o) {
-    const c = Math.abs(t.data.time - n), d = c === i && t.data.time <= s;
-    c > i || d || (i = c, s = t.data.time);
+const v = 864e5;
+function p(e, t) {
+  let o = e, n = Number.POSITIVE_INFINITY;
+  for (const r of t) {
+    const s = Math.abs(r.data.time - e), c = s === n && r.data.time <= o;
+    s > n || c || (n = s, o = r.data.time);
   }
-  return e.timeScale.formatPointX(s, a);
+  return o;
 }
-function L(e, r) {
-  const n = r.sort ?? "none", o = e.getOverlayVersion(), a = I(e, r.cacheKey);
-  if (a && a.version === o && a.time === null && a.sort === n)
-    return a.data;
+function L(e, t) {
+  const o = p(t.time, t.snapshots);
+  return e.timeScale.formatPointX(o, t.interval);
+}
+function T(e, t) {
+  const o = L(e, t);
+  if (e.timeScale.getType() !== "time") return o;
+  const n = p(t.time, t.snapshots), r = x(n, { locale: e.timeScale.getLocale(), timeZone: e.timeScale.getTimeZone() });
+  return t.interval >= v && e.timeScale.getFormat() === null ? r : `${r} ${o}`;
+}
+function O(e, t) {
+  const o = t(h(e.data));
+  return e.share === void 0 ? o : `${Number(e.share.toFixed(1))}% · ${o}`;
+}
+function j(e, t) {
+  const o = t.sort ?? "none", n = e.getSnapshotVersion(), r = I(e, t.cacheKey);
+  if (r && r.version === n && r.time === null && r.sort === o)
+    return r.data;
   const s = [];
-  for (const t of e.getSeriesIds()) {
-    if (!e.isSeriesVisible(t)) continue;
-    const c = e.getLayerLastSnapshots(t);
-    if (c) {
-      for (const l of c) {
-        const u = h(l);
+  for (const a of e.getSeriesIds()) {
+    if (!e.isSeriesVisible(a)) continue;
+    const l = e.getLayerLastSnapshots(a);
+    if (l) {
+      for (const i of l) {
+        const u = b(i);
         f(u) || s.push(
           m({
-            id: `${t}_layer${l.layerIndex}`,
-            seriesId: t,
-            layerIndex: l.layerIndex,
-            label: e.getLayerLabel(t, l.layerIndex),
+            id: `${a}_layer${i.layerIndex}`,
+            seriesId: a,
+            layerIndex: i.layerIndex,
+            label: e.getLayerLabel(a, i.layerIndex),
             data: u,
-            color: l.color
+            color: i.color,
+            share: i.share
           })
         );
       }
       continue;
     }
-    const d = e.getLastData(t);
+    const d = e.getLastData(a);
     !d || f(d) || s.push(
       m({
-        id: t,
-        seriesId: t,
-        label: e.getSeriesLabel(t),
+        id: a,
+        seriesId: a,
+        label: e.getSeriesLabel(a),
         data: d,
-        color: e.getSeriesColor(t) ?? "#888"
+        color: e.getSeriesColor(a) ?? "#888"
       })
     );
   }
-  const i = Object.freeze(S(s, n));
-  return b(e, r.cacheKey, { version: o, time: null, sort: n, data: i }), i;
+  const c = Object.freeze(S(s, o));
+  return y(e, t.cacheKey, { version: n, time: null, sort: o, data: c }), c;
 }
 export {
-  x as buildHoverSnapshots,
-  L as buildLastSnapshots,
-  v as formatHeaderX
+  w as buildHoverSnapshots,
+  j as buildLastSnapshots,
+  L as formatHeaderX,
+  O as formatRowValue,
+  T as formatTooltipHeader
 };

package/dist/index.d.ts

@@ -116,6 +116,7 @@ declare type __VLS_Props_13 = {
      */
     format?: ((value: number) => string) | Intl.NumberFormatOptions;
     locale?: string;
+    /** Per-digit spin duration in ms. A value that arrives sooner than this after the previous one snaps instead. */
     spinDuration?: number;
 };
 
@@ -290,7 +291,7 @@ declare type __VLS_Props_4 = {
      * Viewport padding. `top`/`bottom` are in pixels. `left`/`right` accept either pixels (`50`)
      * or data intervals (`{ intervals: 3 }`). Set to 0 for edge-to-edge sparklines. Updates are
      * applied reactively when this prop or the measured header height changes.
-     * Defaults: `{ top: 20, bottom: 20, right: { intervals: 3 }, left: { intervals: 0 } }`.
+     * Defaults: `{ top: 20, bottom: 20, right: { intervals: 3 }, left: { intervals: 0.5 } }`.
      */
     padding?: {
         top?: number;
@@ -1728,7 +1729,7 @@ export declare interface BitmapCoordinateSpace {
  * actually be drawing.
  *
  * The result is cached per `(chart, cacheKey)` slot; as long as
- * `chart.getOverlayVersion()` hasn't changed and `time`/`sort` match the
+ * `chart.getSnapshotVersion()` hasn't changed and `time`/`sort` match the
  * cached call, the **same reference** is returned. This makes
  * `React.memo((a, b) => a.snapshots === b.snapshots)` skip renders on
  * crosshair moves that stay within one data point.
@@ -1755,7 +1756,7 @@ export declare interface BuildHoverSnapshotsArgs {
  * at the primary layer's timestamp.
  *
  * Cached by `(chart, cacheKey)` + `sort`, invalidated on
- * `chart.getOverlayVersion()` bump. `time` is not an input, so the slot is
+ * `chart.getSnapshotVersion()` bump. `time` is not an input, so the slot is
  * stored with `time: null`.
  */
 export declare function buildLastSnapshots(chart: ChartInstance, args: BuildLastSnapshotsArgs): readonly SeriesSnapshot[];
@@ -2082,6 +2083,13 @@ declare interface ChartEvents {
      * tracked tick has reached its target opacity.
      */
     tickFrame: () => void;
+    /**
+     * Fired once per main-layer frame while a series' displayed values animate
+     * (value smoothing, entrance, layer fade, intro), and once on the frame they
+     * settle. Snapshot readers (`InfoBar`, `Tooltip`) refresh off it, as
+     * `buildHoverSnapshots` / `buildLastSnapshots` report those animated values.
+     */
+    seriesFrame: () => void;
 }
 
 /**
@@ -2682,7 +2690,7 @@ export declare interface ChartOptions {
     scales?: Record<string, YAxisConfig>;
     /**
      * Viewport padding. `top`/`bottom` are in pixels. `left`/`right` accept either pixels (`50`)
-     * or data intervals (`{ intervals: 3 }`). Defaults: `{ top: 20, bottom: 20, right: { intervals: 3 }, left: { intervals: 0 } }`.
+     * or data intervals (`{ intervals: 3 }`). Defaults: `{ top: 20, bottom: 20, right: { intervals: 3 }, left: { intervals: 0.5 } }`.
      */
     padding?: {
         top?: number;
@@ -3353,6 +3361,8 @@ export declare interface LayerSnapshot {
     high?: number;
     /** The sample's own X on a numeric or category axis. */
     x?: number | string;
+    /** On a percent stack, the row's percent of the rows listed with it. Absent elsewhere, and when they sum to 0. */
+    share?: number;
 }
 
 export declare const Legend: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
@@ -4772,6 +4782,12 @@ export declare interface SeriesCreateEnv {
     theme: ChartTheme;
     /** Number of stacked layers requested via `layers` (`1` when omitted). */
     layerCount: number;
+    /**
+     * First `theme.seriesColors` slot for this series' default layer colours:
+     * the lowest run of `layerCount` slots no other series of the same type
+     * holds, so two series don't both default to the first colour. `0` when omitted.
+     */
+    paletteIndex?: number;
 }
 
 /**
@@ -4881,6 +4897,8 @@ export declare interface SeriesSnapshot {
     readonly label?: string;
     readonly data: Readonly<OHLCData> | Readonly<TimePoint> | Readonly<BandPoint>;
     readonly color: string;
+    /** On a percent stack, the layer's share of the column in percent — what the chart draws it at. */
+    readonly share?: number;
 }
 
 /** Primary series types. Open-ended — a custom {@link SeriesDefinition} picks any string that isn't a built-in. */

package/dist/ui/InfoBar.vue.js

@@ -1,60 +1,60 @@
-import { defineComponent as W, computed as i, inject as B, ref as N, onMounted as O, onUnmounted as T, useSlots as A, unref as t, openBlock as n, createBlock as R, Teleport as $, createElementVNode as l, normalizeStyle as r, renderSlot as D, createElementBlock as s, Fragment as f, toDisplayString as p, renderList as F, createCommentVNode as L } from "vue";
-import { buildHoverSnapshots as M, buildLastSnapshots as P, formatHeaderX as j } from "../core/dist/snapshots.js";
-import { resolveCandlestickBodyColor as U } from "../core/dist/theme/resolve.js";
-import { formatCompact as X, formatPriceAdaptive as q } from "../core/dist/utils/format.js";
-import { useCrosshairPosition as G } from "../composables.js";
-import { useChartInstance as J, ThemeKey as Q, InfoBarAnchorKey as Y } from "../context.js";
-const Z = {
+import { defineComponent as T, computed as s, inject as B, ref as W, onMounted as N, onUnmounted as R, useSlots as A, unref as t, openBlock as l, createBlock as D, Teleport as M, createElementVNode as r, normalizeStyle as i, renderSlot as O, createElementBlock as u, Fragment as m, toDisplayString as p, renderList as F, createCommentVNode as L } from "vue";
+import { buildHoverSnapshots as P, buildLastSnapshots as $, formatHeaderX as j, formatRowValue as U } from "../core/dist/snapshots.js";
+import { resolveCandlestickBodyColor as X } from "../core/dist/theme/resolve.js";
+import { formatCompact as q, formatPriceAdaptive as G } from "../core/dist/utils/format.js";
+import { useCrosshairPosition as J } from "../composables.js";
+import { useChartInstance as Q, ThemeKey as Y, InfoBarAnchorKey as Z } from "../context.js";
+const ee = {
   key: 0,
   style: { display: "inline-flex", alignItems: "center", gap: "4px" }
-}, ee = {
+}, te = {
   key: 1,
   style: { display: "inline-flex", alignItems: "center", gap: "3px" }
-}, te = {
+}, ae = {
   key: 2,
   style: { display: "inline-flex", alignItems: "center", gap: "3px" }
-}, se = /* @__PURE__ */ W({
+}, ue = /* @__PURE__ */ T({
   __name: "InfoBar",
   props: {
     sort: {},
     format: { type: Function }
   },
-  setup(z) {
-    const b = z, k = i(() => b.sort ?? "none"), d = i(
-      () => b.format ?? ((a, _) => _ === "volume" ? X(a) : q(a))
-    ), u = J(), y = G(u), o = B(Q), g = B(Y);
+  setup(E) {
+    const k = E, C = s(() => k.sort ?? "none"), d = s(
+      () => k.format ?? ((a, _) => _ === "volume" ? q(a) : G(a))
+    ), n = Q(), g = J(n), o = B(Y), x = B(Z);
     if (!o)
       throw new Error("<InfoBar> must be used within <ChartContainer>: missing ThemeKey.");
-    if (!g)
+    if (!x)
       throw new Error("<InfoBar> must be used within <ChartContainer>: missing InfoBarAnchorKey.");
-    const h = N(0), C = () => {
+    const h = W(0), y = () => {
       h.value++;
     };
-    O(() => {
-      u.on("overlayChange", C), u.getSeriesIds().length > 0 && h.value++;
-    }), T(() => {
-      u.off("overlayChange", C);
+    N(() => {
+      n.on("overlayChange", y), n.on("seriesFrame", y), n.getSeriesIds().length > 0 && h.value++;
+    }), R(() => {
+      n.off("overlayChange", y), n.off("seriesFrame", y);
     });
-    const x = i(() => {
+    const b = s(() => {
       h.value;
-      const a = y.value;
-      return a === null ? null : M(u, { time: a.time, sort: k.value, cacheKey: "infobar-hover" });
-    }), E = i(() => (h.value, P(u, { sort: k.value, cacheKey: "infobar-last" }))), m = i(() => x.value !== null && x.value.length > 0), c = i(
-      () => m.value ? x.value : E.value
-    ), H = i(() => u.getDataInterval()), S = i(() => c.value.length === 0 ? 0 : m.value && y.value ? y.value.time : Math.max(...c.value.map((a) => a.data.time))), K = A(), w = i(() => typeof K.default == "function");
+      const a = g.value;
+      return a === null ? null : P(n, { time: a.time, sort: C.value, cacheKey: "infobar-hover" });
+    }), H = s(() => (h.value, $(n, { sort: C.value, cacheKey: "infobar-last" }))), v = s(() => b.value !== null && b.value.length > 0), c = s(
+      () => v.value ? b.value : H.value
+    ), K = s(() => (h.value, n.getDataInterval())), S = s(() => c.value.length === 0 ? 0 : v.value && g.value ? g.value.time : Math.max(...c.value.map((a) => a.data.time))), V = A(), w = s(() => typeof V.default == "function");
     function I(a) {
       return "open" in a;
     }
-    function V(a) {
+    function z(a) {
       return "high" in a && !I(a);
     }
-    return (a, _) => t(g) && t(o) && c.value.length > 0 ? (n(), R($, {
+    return (a, _) => t(x) && t(o) && c.value.length > 0 ? (l(), D(M, {
       key: 0,
-      to: t(g)
+      to: t(x)
     }, [
-      l("div", {
+      r("div", {
         "data-tooltip-legend": "",
-        style: r(
+        style: i(
           w.value ? {
             display: "flex",
             alignItems: "center",
@@ -62,7 +62,7 @@ const Z = {
             fontSize: t(o).typography.fontSize + "px",
             fontFamily: t(o).typography.fontFamily,
             fontVariantNumeric: "tabular-nums",
-            opacity: m.value ? 1 : 0.6,
+            opacity: v.value ? 1 : 0.6,
             transition: "opacity 0.2s ease",
             pointerEvents: "none"
           } : {
@@ -75,57 +75,57 @@ const Z = {
             fontSize: t(o).typography.fontSize + "px",
             fontFamily: t(o).typography.fontFamily,
             fontVariantNumeric: "tabular-nums",
-            opacity: m.value ? 1 : 0.6,
+            opacity: v.value ? 1 : 0.6,
             transition: "opacity 0.2s ease",
             pointerEvents: "none"
           }
         )
       }, [
-        w.value ? D(a.$slots, "default", {
+        w.value ? O(a.$slots, "default", {
           key: 0,
           snapshots: c.value,
           time: S.value,
-          isHover: m.value
-        }) : (n(), s(f, { key: 1 }, [
-          l("span", {
-            style: r({ color: t(o).axis.textColor, marginRight: "2px" })
-          }, p(t(j)(t(u), { time: S.value, snapshots: c.value, interval: H.value })), 5),
-          (n(!0), s(f, null, F(c.value, (e) => (n(), s(f, {
+          isHover: v.value
+        }) : (l(), u(m, { key: 1 }, [
+          r("span", {
+            style: i({ color: t(o).axis.textColor, marginRight: "2px" })
+          }, p(t(j)(t(n), { time: S.value, snapshots: c.value, interval: K.value })), 5),
+          (l(!0), u(m, null, F(c.value, (e) => (l(), u(m, {
             key: e.id
           }, [
-            I(e.data) ? (n(), s("span", Z, [
-              (n(!0), s(f, null, F([
+            I(e.data) ? (l(), u("span", ee, [
+              (l(!0), u(m, null, F([
                 { label: "O", field: "open", val: e.data.open },
                 { label: "H", field: "high", val: e.data.high },
                 { label: "L", field: "low", val: e.data.low },
                 { label: "C", field: "close", val: e.data.close }
-              ], (v) => (n(), s(f, {
-                key: v.label
+              ], (f) => (l(), u(m, {
+                key: f.label
               }, [
-                l("span", {
-                  style: r({ color: t(o).axis.textColor, opacity: 0.5, marginLeft: "5px" })
-                }, p(v.label), 5),
-                l("span", {
-                  style: r({
-                    color: t(U)(
+                r("span", {
+                  style: i({ color: t(o).axis.textColor, opacity: 0.5, marginLeft: "5px" })
+                }, p(f.label), 5),
+                r("span", {
+                  style: i({
+                    color: t(X)(
                       e.data.close >= e.data.open ? t(o).candlestick.up.body : t(o).candlestick.down.body
                     ),
                     fontWeight: 500,
                     marginLeft: "2px"
                   })
-                }, p(d.value(v.val, v.field)), 5)
+                }, p(d.value(f.val, f.field)), 5)
               ], 64))), 128)),
-              e.data.volume != null ? (n(), s(f, { key: 0 }, [
-                l("span", {
-                  style: r({ color: t(o).axis.textColor, opacity: 0.5, marginLeft: "5px" })
+              e.data.volume != null ? (l(), u(m, { key: 0 }, [
+                r("span", {
+                  style: i({ color: t(o).axis.textColor, opacity: 0.5, marginLeft: "5px" })
                 }, "V", 4),
-                l("span", {
-                  style: r({ color: t(o).axis.textColor, fontWeight: 500, marginLeft: "2px" })
+                r("span", {
+                  style: i({ color: t(o).axis.textColor, fontWeight: 500, marginLeft: "2px" })
                 }, p(d.value(e.data.volume, "volume")), 5)
               ], 64)) : L("", !0)
-            ])) : V(e.data) ? (n(), s("span", ee, [
-              l("span", {
-                style: r({
+            ])) : z(e.data) ? (l(), u("span", te, [
+              r("span", {
+                style: i({
                   width: "6px",
                   height: "6px",
                   borderRadius: "1px",
@@ -133,12 +133,12 @@ const Z = {
                   flexShrink: 0
                 })
               }, null, 4),
-              l("span", {
-                style: r({ color: e.color, fontWeight: 500 })
+              r("span", {
+                style: i({ color: e.color, fontWeight: 500 })
               }, p(d.value(e.data.low, "low")) + " – " + p(d.value(e.data.high, "high")), 5)
-            ])) : (n(), s("span", te, [
-              l("span", {
-                style: r({
+            ])) : (l(), u("span", ae, [
+              r("span", {
+                style: i({
                   width: "6px",
                   height: "6px",
                   borderRadius: "50%",
@@ -146,9 +146,9 @@ const Z = {
                   flexShrink: 0
                 })
               }, null, 4),
-              l("span", {
-                style: r({ color: e.color, fontWeight: 500 })
-              }, p(d.value(e.data.value, "value")), 5)
+              r("span", {
+                style: i({ color: e.color, fontWeight: 500 })
+              }, p(t(U)(e, (f) => d.value(f, "value"))), 5)
             ]))
           ], 64))), 128))
         ], 64))
@@ -157,5 +157,5 @@ const Z = {
   }
 });
 export {
-  se as default
+  ue as default
 };

package/dist/ui/NumberFlow.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as _, ref as b, onMounted as g, computed as c, openBlock as o, createElementBlock as l, Fragment as r, renderList as f, createElementVNode as m, normalizeStyle as k, toDisplayString as p } from "vue";
+import { defineComponent as k, ref as f, onMounted as N, computed as m, watch as I, openBlock as a, createElementBlock as l, Fragment as r, renderList as d, createElementVNode as y, normalizeStyle as w, toDisplayString as v } from "vue";
 const x = { style: {
   display: "inline-flex",
   fontVariantNumeric: "tabular-nums",
@@ -14,7 +14,7 @@ const x = { style: {
 }, F = {
   key: 1,
   style: { display: "inline-block" }
-}, w = /* @__PURE__ */ _({
+}, S = /* @__PURE__ */ k({
   __name: "NumberFlow",
   props: {
     value: {},
@@ -22,48 +22,57 @@ const x = { style: {
     locale: { default: "en-US" },
     spinDuration: { default: 350 }
   },
-  setup(a) {
-    const s = a, i = b(!1);
-    g(() => {
+  setup(h) {
+    const o = h, i = f(!1);
+    N(() => {
       i.value = !0;
     });
-    const d = c(() => {
-      const t = s.format;
-      if (typeof t == "function") return t;
-      const n = new Intl.NumberFormat(s.locale, typeof t == "object" ? t : void 0);
-      return (e) => n.format(e);
-    }), y = c(() => {
-      const t = d.value(s.value), n = [];
-      for (const e of t)
-        e >= "0" && e <= "9" ? n.push({ type: "digit", value: e }) : n.push({ type: "symbol", value: e });
+    const u = m(() => {
+      const e = o.format;
+      if (typeof e == "function") return e;
+      const n = new Intl.NumberFormat(o.locale, typeof e == "object" ? e : void 0);
+      return (t) => n.format(t);
+    }), _ = m(() => {
+      const e = u.value(o.value), n = [];
+      for (const t of e)
+        t >= "0" && t <= "9" ? n.push({ type: "digit", value: t }) : n.push({ type: "symbol", value: t });
       return n;
-    }), v = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
-    return (t, n) => (o(), l("span", x, [
-      (o(!0), l(r, null, f(y.value, (e, h) => (o(), l(r, { key: h }, [
-        e.type === "digit" ? (o(), l("span", D, [
-          m("span", {
-            style: k({
+    }), s = f(o.spinDuration);
+    let c = Number.NEGATIVE_INFINITY;
+    I(
+      () => u.value(o.value),
+      () => {
+        const e = performance.now(), n = e - c < o.spinDuration;
+        c = e, s.value = n ? 0 : o.spinDuration;
+      }
+    );
+    const b = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+    return (e, n) => (a(), l("span", x, [
+      (a(!0), l(r, null, d(_.value, (t, g) => (a(), l(r, { key: g }, [
+        t.type === "digit" ? (a(), l("span", D, [
+          y("span", {
+            style: w({
               display: "flex",
               flexDirection: "column",
-              transform: "translateY(" + -parseInt(e.value) * 1.2 + "em)",
-              transition: i.value ? "transform " + a.spinDuration + "ms cubic-bezier(0.16, 1, 0.3, 1)" : "none"
+              transform: "translateY(" + -parseInt(t.value) * 1.2 + "em)",
+              transition: i.value && s.value > 0 ? "transform " + s.value + "ms cubic-bezier(0.16, 1, 0.3, 1)" : "none"
             })
           }, [
-            (o(), l(r, null, f(v, (u) => m("span", {
-              key: u,
+            (a(), l(r, null, d(b, (p) => y("span", {
+              key: p,
               style: {
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
                 height: "1.2em"
               }
-            }, p(u), 1)), 64))
+            }, v(p), 1)), 64))
           ], 4)
-        ])) : (o(), l("span", F, p(e.value), 1))
+        ])) : (a(), l("span", F, v(t.value), 1))
       ], 64))), 128))
     ]));
   }
 });
 export {
-  w as default
+  S as default
 };