@number-flow/vue 0.2.3 → 0.2.4

package/dist/index.d.ts

@@ -50,6 +50,8 @@ declare type Props = Partial<Props_2> & {
     locales?: Intl.LocalesArgument;
     format?: Format;
     value: Value;
+    prefix?: string;
+    suffix?: string;
     willChange?: boolean;
 };
 

package/dist/index.js

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

package/dist/index.mjs

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

package/package.json

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