@number-flow/vue 0.2.0 → 0.2.2

package/dist/index.d.ts

@@ -11,6 +11,24 @@ import { Ref } from 'vue';
 import { Trend } from 'number-flow';
 import { Value } from 'number-flow';
 
+declare const __VLS_component: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare const _default: DefineComponent<Props, {
 el: Ref<NumberFlowElement | undefined, NumberFlowElement | undefined>;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
@@ -26,6 +44,8 @@ export { Format }
 
 export { NumberFlowElement }
 
+export declare const NumberFlowGroup: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
 declare type Props = Partial<Props_2> & {
     locales?: Intl.LocalesArgument;
     format?: Format;

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),e=require("number-flow"),d=["trend","continuous","animated","transformTiming","spinTiming","opacityTiming","respectMotionPreference","data-will-change","innerHTML","parts"],c=n.defineComponent({inheritAttrs:!1,__name:"index",props:{transformTiming:{default:()=>e.NumberFlowLite.defaultProps.transformTiming},spinTiming:{default:()=>e.NumberFlowLite.defaultProps.spinTiming},opacityTiming:{default:()=>e.NumberFlowLite.defaultProps.opacityTiming},animated:{type:Boolean,default:()=>e.NumberFlowLite.defaultProps.animated},respectMotionPreference:{type:Boolean,default:()=>e.NumberFlowLite.defaultProps.respectMotionPreference},trend:{type:[Boolean,String],default:()=>e.NumberFlowLite.defaultProps.trend},continuous:{type:Boolean,default:()=>e.NumberFlowLite.defaultProps.continuous},locales:{},format:{},value:{},willChange:{type:Boolean,default:!1}},emits:["animationsstart","animationsfinish"],setup(a,{expose:l,emit:r}){const i=n.ref();l({el:i});const u=r,s=n.computed(()=>new Intl.NumberFormat(a.locales,a.format)),o=n.computed(()=>e.partitionParts(a.value,s.value));return(t,m)=>(n.openBlock(),n.createElementBlock("number-flow-vue",n.mergeProps({ref_key:"el",ref:i},t.$attrs,{trend:t.trend,continuous:t.continuous,animated:t.animated,transformTiming:t.transformTiming,spinTiming:t.spinTiming,opacityTiming:t.opacityTiming,respectMotionPreference:t.respectMotionPreference,"data-will-change":t.willChange?"":void 0,innerHTML:n.unref(e.render)({formatted:o.value.formatted,willChange:t.willChange}),onAnimationsstart:m[0]||(m[0]=f=>u("animationsstart")),onAnimationsfinish:m[1]||(m[1]=f=>u("animationsfinish")),parts:o.value}),null,16,d))}});e.define("number-flow-vue",e.NumberFlowLite);function p({respectMotionPreference:a=!0}={}){const l=n.ref(e.canAnimate),r=n.ref(!1);return n.onMounted(()=>{var i;l.value=e.canAnimate,r.value=((i=e.prefersReducedMotion)==null?void 0:i.matches)??!1}),n.watchEffect(i=>{var s;if(!n.toValue(a))return;const u=({matches:o})=>{r.value=o};(s=e.prefersReducedMotion)==null||s.addEventListener("change",u),i(()=>{var o;(o=e.prefersReducedMotion)==null||o.removeEventListener("change",u)})}),n.computed(()=>l.value&&(!n.toValue(a)||!r.value))}Object.defineProperty(exports,"NumberFlowElement",{enumerable:!0,get:()=>e.NumberFlowLite});exports.default=c;exports.useCanAnimate=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),n=require("number-flow"),f=Symbol(),p=e.defineComponent({__name:"NumberFlowGroup",setup(s){const u=new Set;let l=!1;const o=(a,m)=>{u.add(a),e.watch(m,async()=>{l||(l=!0,u.forEach(t=>{var i;(i=t.value)==null||i.willUpdate()}),await e.nextTick(),u.forEach(t=>{var i;(i=t.value)==null||i.didUpdate()}),l=!1)}),e.onUnmounted(()=>{u.delete(a)})};return e.provide(f,o),(a,m)=>e.renderSlot(a.$slots,"default")}}),g=["manual","trend","continuous","animated","transformTiming","spinTiming","opacityTiming","respectMotionPreference","data-will-change","innerHTML","parts"],w=e.defineComponent({inheritAttrs:!1,__name:"index",props:{transformTiming:{default:()=>n.NumberFlowLite.defaultProps.transformTiming},spinTiming:{default:()=>n.NumberFlowLite.defaultProps.spinTiming},opacityTiming:{default:()=>n.NumberFlowLite.defaultProps.opacityTiming},animated:{type:Boolean,default:()=>n.NumberFlowLite.defaultProps.animated},respectMotionPreference:{type:Boolean,default:()=>n.NumberFlowLite.defaultProps.respectMotionPreference},trend:{type:[Boolean,String],default:()=>n.NumberFlowLite.defaultProps.trend},continuous:{type:Boolean,default:()=>n.NumberFlowLite.defaultProps.continuous},locales:{},format:{},value:{},willChange:{type:Boolean,default:!1}},emits:["animationsstart","animationsfinish"],setup(s,{expose:u,emit:l}){const o=e.ref();u({el:o});const a=l,m=e.computed(()=>new Intl.NumberFormat(s.locales,s.format)),t=e.computed(()=>n.partitionParts(s.value,m.value)),i=e.inject(f,void 0);return i==null||i(o,t),(r,d)=>(e.openBlock(),e.createElementBlock("number-flow-vue",e.mergeProps({ref_key:"el",ref:o},r.$attrs,{manual:!!e.unref(i),trend:r.trend,continuous:r.continuous,animated:r.animated,transformTiming:r.transformTiming,spinTiming:r.spinTiming,opacityTiming:r.opacityTiming,respectMotionPreference:r.respectMotionPreference,"data-will-change":r.willChange?"":void 0,innerHTML:e.unref(n.render)({formatted:t.value.formatted,willChange:r.willChange}),onAnimationsstart:d[0]||(d[0]=c=>a("animationsstart")),onAnimationsfinish:d[1]||(d[1]=c=>a("animationsfinish")),parts:t.value}),null,16,g))}});n.define("number-flow-vue",n.NumberFlowLite);function v({respectMotionPreference:s=!0}={}){const u=e.ref(n.canAnimate),l=e.ref(!1);return e.onMounted(()=>{var o;u.value=n.canAnimate,l.value=((o=n.prefersReducedMotion)==null?void 0:o.matches)??!1}),e.watchEffect(o=>{var m;if(!e.toValue(s))return;const a=({matches:t})=>{l.value=t};(m=n.prefersReducedMotion)==null||m.addEventListener("change",a),o(()=>{var t;(t=n.prefersReducedMotion)==null||t.removeEventListener("change",a)})}),e.computed(()=>u.value&&(!e.toValue(s)||!l.value))}Object.defineProperty(exports,"NumberFlowElement",{enumerable:!0,get:()=>n.NumberFlowLite});exports.NumberFlowGroup=p;exports.default=w;exports.useCanAnimate=v;

package/dist/index.mjs

@@ -1,70 +1,95 @@
-import { defineComponent as v, ref as f, computed as d, openBlock as T, createElementBlock as h, mergeProps as w, unref as P, onMounted as y, watchEffect as M, toValue as p } from "vue";
-import { NumberFlowLite as n, partitionParts as B, render as C, define as b, canAnimate as c, prefersReducedMotion as u } from "number-flow";
-import { NumberFlowLite as H } from "number-flow";
-const A = ["trend", "continuous", "animated", "transformTiming", "spinTiming", "opacityTiming", "respectMotionPreference", "data-will-change", "innerHTML", "parts"], F = /* @__PURE__ */ v({
+import { defineComponent as w, provide as y, renderSlot as P, watch as b, nextTick as M, onUnmounted as B, ref as d, computed as p, inject as C, openBlock as E, createElementBlock as A, mergeProps as F, unref as c, onMounted as L, watchEffect as N, toValue as g } from "vue";
+import { NumberFlowLite as s, partitionParts as $, render as k, define as G, canAnimate as v, prefersReducedMotion as f } from "number-flow";
+import { NumberFlowLite as q } from "number-flow";
+const h = Symbol(), W = /* @__PURE__ */ w({
+  __name: "NumberFlowGroup",
+  setup(l) {
+    const o = /* @__PURE__ */ new Set();
+    let i = !1;
+    return y(h, (n, u) => {
+      o.add(n), b(
+        u,
+        async () => {
+          i || (i = !0, o.forEach((e) => {
+            var t;
+            (t = e.value) == null || t.willUpdate();
+          }), await M(), o.forEach((e) => {
+            var t;
+            (t = e.value) == null || t.didUpdate();
+          }), i = !1);
+        }
+        // { flush: 'pre' } // default
+      ), B(() => {
+        o.delete(n);
+      });
+    }), (n, u) => P(n.$slots, "default");
+  }
+}), S = ["manual", "trend", "continuous", "animated", "transformTiming", "spinTiming", "opacityTiming", "respectMotionPreference", "data-will-change", "innerHTML", "parts"], j = /* @__PURE__ */ w({
   inheritAttrs: !1,
   __name: "index",
   props: {
-    transformTiming: { default: () => n.defaultProps.transformTiming },
-    spinTiming: { default: () => n.defaultProps.spinTiming },
-    opacityTiming: { default: () => n.defaultProps.opacityTiming },
-    animated: { type: Boolean, default: () => n.defaultProps.animated },
-    respectMotionPreference: { type: Boolean, default: () => n.defaultProps.respectMotionPreference },
-    trend: { type: [Boolean, String], default: () => n.defaultProps.trend },
-    continuous: { type: Boolean, default: () => n.defaultProps.continuous },
+    transformTiming: { default: () => s.defaultProps.transformTiming },
+    spinTiming: { default: () => s.defaultProps.spinTiming },
+    opacityTiming: { default: () => s.defaultProps.opacityTiming },
+    animated: { type: Boolean, default: () => s.defaultProps.animated },
+    respectMotionPreference: { type: Boolean, default: () => s.defaultProps.respectMotionPreference },
+    trend: { type: [Boolean, String], default: () => s.defaultProps.trend },
+    continuous: { type: Boolean, default: () => s.defaultProps.continuous },
     locales: {},
     format: {},
     value: {},
     willChange: { type: Boolean, default: !1 }
   },
   emits: ["animationsstart", "animationsfinish"],
-  setup(i, { expose: s, emit: o }) {
-    const t = f();
-    s({ el: t });
-    const r = o, l = d(() => new Intl.NumberFormat(i.locales, i.format)), a = d(() => B(i.value, l.value));
-    return (e, m) => (T(), h("number-flow-vue", w({
+  setup(l, { expose: o, emit: i }) {
+    const r = d();
+    o({ el: r });
+    const n = i, u = p(() => new Intl.NumberFormat(l.locales, l.format)), e = p(() => $(l.value, u.value)), t = C(h, void 0);
+    return t == null || t(r, e), (a, m) => (E(), A("number-flow-vue", F({
       ref_key: "el",
-      ref: t
-    }, e.$attrs, {
-      trend: e.trend,
-      continuous: e.continuous,
-      animated: e.animated,
-      transformTiming: e.transformTiming,
-      spinTiming: e.spinTiming,
-      opacityTiming: e.opacityTiming,
-      respectMotionPreference: e.respectMotionPreference,
-      "data-will-change": e.willChange ? "" : void 0,
-      innerHTML: P(C)({ formatted: a.value.formatted, willChange: e.willChange }),
-      onAnimationsstart: m[0] || (m[0] = (g) => r("animationsstart")),
-      onAnimationsfinish: m[1] || (m[1] = (g) => r("animationsfinish")),
-      parts: a.value
-    }), null, 16, A));
+      ref: r
+    }, a.$attrs, {
+      manual: !!c(t),
+      trend: a.trend,
+      continuous: a.continuous,
+      animated: a.animated,
+      transformTiming: a.transformTiming,
+      spinTiming: a.spinTiming,
+      opacityTiming: a.opacityTiming,
+      respectMotionPreference: a.respectMotionPreference,
+      "data-will-change": a.willChange ? "" : void 0,
+      innerHTML: c(k)({ formatted: e.value.formatted, willChange: a.willChange }),
+      onAnimationsstart: m[0] || (m[0] = (T) => n("animationsstart")),
+      onAnimationsfinish: m[1] || (m[1] = (T) => n("animationsfinish")),
+      parts: e.value
+    }), null, 16, S));
   }
 });
-b("number-flow-vue", n);
-function N({
-  respectMotionPreference: i = !0
+G("number-flow-vue", s);
+function I({
+  respectMotionPreference: l = !0
 } = {}) {
-  const s = f(c), o = f(!1);
-  return y(() => {
-    var t;
-    s.value = c, o.value = ((t = u) == null ? void 0 : t.matches) ?? !1;
-  }), M((t) => {
-    var l;
-    if (!p(i)) return;
-    const r = ({ matches: a }) => {
-      o.value = a;
+  const o = d(v), i = d(!1);
+  return L(() => {
+    var r;
+    o.value = v, i.value = ((r = f) == null ? void 0 : r.matches) ?? !1;
+  }), N((r) => {
+    var u;
+    if (!g(l)) return;
+    const n = ({ matches: e }) => {
+      i.value = e;
     };
-    (l = u) == null || l.addEventListener("change", r), t(() => {
-      var a;
-      (a = u) == null || a.removeEventListener("change", r);
+    (u = f) == null || u.addEventListener("change", n), r(() => {
+      var e;
+      (e = f) == null || e.removeEventListener("change", n);
     });
-  }), d(
-    () => s.value && (!p(i) || !o.value)
+  }), p(
+    () => o.value && (!g(l) || !i.value)
   );
 }
 export {
-  H as NumberFlowElement,
-  F as default,
-  N as useCanAnimate
+  q as NumberFlowElement,
+  W as NumberFlowGroup,
+  j as default,
+  I as useCanAnimate
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
+  "version": "0.2.2",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
@@ -43,7 +43,7 @@
     }
   },
   "dependencies": {
-    "number-flow": "0.3.5"
+    "number-flow": "0.3.6"
   },
   "devDependencies": {
     "@playwright/test": "^1.48.0",