@number-flow/vue 0.1.1 → 0.2.1

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { ComputedRef } from 'vue';
 import { DefineComponent } from 'vue';
 import { Format } from 'number-flow';
 import { MaybeRefOrGetter } from 'vue';
-import { NumberFlowLite } from 'number-flow';
+import { NumberFlowLite as NumberFlowElement } from 'number-flow';
 import { Props as Props_2 } from 'number-flow';
 import { PublicProps } from 'vue';
 import { Ref } from 'vue';
@@ -12,19 +12,19 @@ import { Trend } from 'number-flow';
 import { Value } from 'number-flow';
 
 declare const _default: DefineComponent<Props, {
-el: Ref<NumberFlowLite | undefined, NumberFlowLite | undefined>;
+el: Ref<NumberFlowElement | undefined, NumberFlowElement | undefined>;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-animationsStart: () => any;
-animationsFinish: () => any;
+animationsstart: () => any;
+animationsfinish: () => any;
 }, string, PublicProps, Readonly<Props> & Readonly<{
-onAnimationsStart?: (() => any) | undefined;
-onAnimationsFinish?: (() => any) | undefined;
+onAnimationsstart?: (() => any) | undefined;
+onAnimationsfinish?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 export default _default;
 
 export { Format }
 
-export { NumberFlowLite }
+export { NumberFlowElement }
 
 declare type Props = Partial<Props_2> & {
     locales?: Intl.LocalesArgument;

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"),f=["trend","continuous","animated","transformTiming","spinTiming","opacityTiming","respectMotionPreference","data-will-change","innerHTML","parts"],p=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},manual:{type:Boolean},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(o,{expose:u,emit:r}){const i=n.ref();u({el:i});const l=r,s=n.computed(()=>new Intl.NumberFormat(o.locales,o.format)),a=n.computed(()=>e.partitionParts(o.value,s.value));return(t,m)=>(n.openBlock(),n.createElementBlock("number-flow",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:a.value.formatted,willChange:t.willChange}),onAnimationsstart:m[0]||(m[0]=d=>l("animationsStart")),onAnimationsfinish:m[1]||(m[1]=d=>l("animationsFinish")),parts:a.value}),null,16,f))}});e.NumberFlowLite.define();function c({respectMotionPreference:o=!0}={}){const u=n.ref(e.canAnimate),r=n.ref(!1);return n.onMounted(()=>{var i;u.value=e.canAnimate,r.value=((i=e.prefersReducedMotion)==null?void 0:i.matches)??!1}),n.watchEffect(i=>{var s;if(!n.toValue(o))return;const l=({matches:a})=>{r.value=a};(s=e.prefersReducedMotion)==null||s.addEventListener("change",l),i(()=>{var a;(a=e.prefersReducedMotion)==null||a.removeEventListener("change",l)})}),n.computed(()=>u.value&&(!n.toValue(o)||!r.value))}exports.default=p;exports.useCanAnimate=c;
+"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;

package/dist/index.mjs

@@ -1,6 +1,7 @@
-import { defineComponent as T, ref as f, computed as d, openBlock as v, createElementBlock as h, mergeProps as P, unref as y, onMounted as w, watchEffect as M, toValue as p } from "vue";
-import { NumberFlowLite as n, partitionParts as B, render as C, canAnimate as c, prefersReducedMotion as u } from "number-flow";
-const A = ["trend", "continuous", "animated", "transformTiming", "spinTiming", "opacityTiming", "respectMotionPreference", "data-will-change", "innerHTML", "parts"], F = /* @__PURE__ */ T({
+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({
   inheritAttrs: !1,
   __name: "index",
   props: {
@@ -8,7 +9,6 @@ const A = ["trend", "continuous", "animated", "transformTiming", "spinTiming", "
     spinTiming: { default: () => n.defaultProps.spinTiming },
     opacityTiming: { default: () => n.defaultProps.opacityTiming },
     animated: { type: Boolean, default: () => n.defaultProps.animated },
-    manual: { type: Boolean },
     respectMotionPreference: { type: Boolean, default: () => n.defaultProps.respectMotionPreference },
     trend: { type: [Boolean, String], default: () => n.defaultProps.trend },
     continuous: { type: Boolean, default: () => n.defaultProps.continuous },
@@ -17,12 +17,12 @@ const A = ["trend", "continuous", "animated", "transformTiming", "spinTiming", "
     value: {},
     willChange: { type: Boolean, default: !1 }
   },
-  emits: ["animationsStart", "animationsFinish"],
+  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) => (v(), h("number-flow", P({
+    return (e, m) => (T(), h("number-flow-vue", w({
       ref_key: "el",
       ref: t
     }, e.$attrs, {
@@ -34,19 +34,19 @@ const A = ["trend", "continuous", "animated", "transformTiming", "spinTiming", "
       opacityTiming: e.opacityTiming,
       respectMotionPreference: e.respectMotionPreference,
       "data-will-change": e.willChange ? "" : void 0,
-      innerHTML: y(C)({ formatted: a.value.formatted, willChange: e.willChange }),
-      onAnimationsstart: m[0] || (m[0] = (g) => r("animationsStart")),
-      onAnimationsfinish: m[1] || (m[1] = (g) => r("animationsFinish")),
+      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));
   }
 });
-n.define();
-function $({
+b("number-flow-vue", n);
+function N({
   respectMotionPreference: i = !0
 } = {}) {
   const s = f(c), o = f(!1);
-  return w(() => {
+  return y(() => {
     var t;
     s.value = c, o.value = ((t = u) == null ? void 0 : t.matches) ?? !1;
   }), M((t) => {
@@ -64,6 +64,7 @@ function $({
   );
 }
 export {
+  H as NumberFlowElement,
   F as default,
-  $ as useCanAnimate
+  N as useCanAnimate
 };

package/package.json

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