npm - @number-flow/vue - Versions diffs - 0.3.2 → 0.3.4 - Mend

@number-flow/vue 0.3.2 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -1,15 +1,13 @@
 [![NumberFlow for Vue](https://number-flow.barvian.me/preview.webp)](https://number-flow.barvian.me/vue)
-# Number Flow for Vue
+# NumberFlow for Vue
-A Vue component to transition & format numbers.
+An animated number component.
 [![NPM Version](https://img.shields.io/npm/v/@number-flow/vue.svg)](https://npmjs.com/package/@number-flow/vue)
 [![Bundle size](https://badgen.net/bundlephobia/minzip/@number-flow/vue@latest)](https://bundlephobia.com/package/@number-flow/vue@latest)
 [![Follow @mbarvian](https://img.shields.io/twitter/follow/mbarvian.svg?style=social&label=Follow)](https://x.com/mbarvian)
----
 ## Documentation
 For full documentation, visit [number-flow.barvian.me/vue](https://number-flow.barvian.me/vue).

package/dist/index.js CHANGED Viewed

@@ -1 +1,100 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=require("number-flow"),g=require("esm-env"),c=Symbol(),v=e.defineComponent({__name:"NumberFlowGroup",setup(r){const l=new Set;let u=!1;const i=(a,s)=>{l.add(a),e.watch(s,async()=>{u||(u=!0,l.forEach(async n=>{var m;!n.value||!n.value.created||(n.value.willUpdate(),await e.nextTick(),(m=n.value)==null||m.didUpdate())}),await e.nextTick(),u=!1)}),e.onUnmounted(()=>{l.delete(a)})};return e.provide(c,i),(a,s)=>e.renderSlot(a.$slots,"default")}}),w=["aria-label","manual","trend","continuous","animated","transformTiming","spinTiming","opacityTiming","respectMotionPreference","data-will-change","digits","innerHTML","data"],b=e.defineComponent({inheritAttrs:!1,__name:"index",props:{transformTiming:{default:()=>t.NumberFlowLite.defaultProps.transformTiming},spinTiming:{default:()=>t.NumberFlowLite.defaultProps.spinTiming},opacityTiming:{default:()=>t.NumberFlowLite.defaultProps.opacityTiming},animated:{type:Boolean,default:()=>t.NumberFlowLite.defaultProps.animated},respectMotionPreference:{type:Boolean,default:()=>t.NumberFlowLite.defaultProps.respectMotionPreference},trend:{type:[Number,Function],default:()=>t.NumberFlowLite.defaultProps.trend},continuous:{type:Boolean,default:()=>t.NumberFlowLite.defaultProps.continuous},digits:{default:()=>t.NumberFlowLite.defaultProps.digits},locales:{},format:{},value:{},prefix:{},suffix:{},willChange:{type:Boolean,default:!1}},emits:["animationsstart","animationsfinish"],setup(r,{expose:l,emit:u}){const i=e.ref();l({el:i});const a=u,s=e.computed(()=>new Intl.NumberFormat(r.locales,r.format)),n=e.computed(()=>t.formatToData(r.value,s.value,r.prefix,r.suffix)),m=g.BROWSER?void 0:t.renderInnerHTML(n.value),d=e.inject(c,void 0);return d==null||d(i,n),(o,f)=>(e.openBlock(),e.createElementBlock("number-flow-vue",e.mergeProps({ref_key:"el",ref:i,"aria-label":n.value.valueAsString},o.$attrs,{role:"img",manual:!!e.unref(d),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,digits:o.digits,innerHTML:e.unref(m),"data-allow-mismatch":"",onAnimationsstart:f[0]||(f[0]=p=>a("animationsstart")),onAnimationsfinish:f[1]||(f[1]=p=>a("animationsfinish")),data:n.value}),null,16,w))}});t.define("number-flow-vue",t.NumberFlowLite);function T({respectMotionPreference:r=!0}={}){const l=e.ref(!1),u=e.ref(!1);return e.onMounted(()=>{var i;l.value=t.canAnimate,u.value=((i=t.prefersReducedMotion)==null?void 0:i.matches)??!1}),e.watchEffect(i=>{var s;if(!e.toValue(r))return;const a=({matches:n})=>{u.value=n};(s=t.prefersReducedMotion)==null||s.addEventListener("change",a),i(()=>{var n;(n=t.prefersReducedMotion)==null||n.removeEventListener("change",a)})}),e.computed(()=>l.value&&(!e.toValue(r)||!u.value))}Object.defineProperty(exports,"NumberFlowElement",{enumerable:!0,get:()=>t.NumberFlowLite});exports.NumberFlowGroup=v;exports.default=b;exports.useCanAnimate=T;
+import { defineComponent as h, provide as P, renderSlot as b, watch as M, nextTick as g, onUnmounted as B, ref as c, computed as p, inject as A, openBlock as E, createElementBlock as F, mergeProps as L, unref as v, onMounted as N, watchEffect as $, toValue as T } from "vue";
+import { NumberFlowLite as r, formatToData as k, renderInnerHTML as C, define as S, canAnimate as G, prefersReducedMotion as f } from "number-flow";
+import { NumberFlowLite as x } from "number-flow";
+import { BROWSER as H } from "esm-env";
+const w = Symbol(), j = /* @__PURE__ */ h({
+  __name: "NumberFlowGroup",
+  setup(a) {
+    const s = /* @__PURE__ */ new Set();
+    let i = !1;
+    return P(w, (t, l) => {
+      s.add(t), M(
+        l,
+        async () => {
+          i || (i = !0, s.forEach(async (e) => {
+            var u;
+            !e.value || !e.value.created || (e.value.willUpdate(), await g(), (u = e.value) == null || u.didUpdate());
+          }), await g(), i = !1);
+        }
+        // { flush: 'pre' } // default
+      ), B(() => {
+        s.delete(t);
+      });
+    }), (t, l) => b(t.$slots, "default");
+  }
+}), R = ["aria-label", "manual", "trend", "continuous", "animated", "transformTiming", "spinTiming", "opacityTiming", "respectMotionPreference", "data-will-change", "digits", "innerHTML", "data"], D = /* @__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: [Number, Function], default: () => r.defaultProps.trend },
+    continuous: { type: Boolean, default: () => r.defaultProps.continuous },
+    digits: { default: () => r.defaultProps.digits },
+    locales: {},
+    format: {},
+    value: {},
+    prefix: {},
+    suffix: {},
+    willChange: { type: Boolean, default: !1 }
+  },
+  emits: ["animationsstart", "animationsfinish"],
+  setup(a, { expose: s, emit: i }) {
+    const o = c();
+    s({ el: o });
+    const t = i, l = p(() => new Intl.NumberFormat(a.locales, a.format)), e = p(() => k(a.value, l.value, a.prefix, a.suffix)), u = H ? void 0 : C(e.value), m = A(w, void 0);
+    return m == null || m(o, e), (n, d) => (E(), F("number-flow-vue", L({
+      ref_key: "el",
+      ref: o,
+      "aria-label": e.value.valueAsString
+    }, n.$attrs, {
+      role: "img",
+      manual: !!v(m),
+      trend: n.trend,
+      continuous: n.continuous,
+      animated: n.animated,
+      transformTiming: n.transformTiming,
+      spinTiming: n.spinTiming,
+      opacityTiming: n.opacityTiming,
+      respectMotionPreference: n.respectMotionPreference,
+      "data-will-change": n.willChange ? "" : void 0,
+      digits: n.digits,
+      innerHTML: v(u),
+      "data-allow-mismatch": "",
+      onAnimationsstart: d[0] || (d[0] = (y) => t("animationsstart")),
+      onAnimationsfinish: d[1] || (d[1] = (y) => t("animationsfinish")),
+      data: e.value
+    }), null, 16, R));
+  }
+});
+S("number-flow-vue", r);
+function O({
+  respectMotionPreference: a = !0
+} = {}) {
+  const s = c(!1), i = c(!1);
+  return N(() => {
+    var o;
+    s.value = G, i.value = ((o = f) == null ? void 0 : o.matches) ?? !1;
+  }), $((o) => {
+    var l;
+    if (!T(a)) return;
+    const t = ({ matches: e }) => {
+      i.value = e;
+    };
+    (l = f) == null || l.addEventListener("change", t), o(() => {
+      var e;
+      (e = f) == null || e.removeEventListener("change", t);
+    });
+  }), p(
+    () => s.value && (!T(a) || !i.value)
+  );
+}
+export {
+  x as NumberFlowElement,
+  j as NumberFlowGroup,
+  D as default,
+  O as useCanAnimate
+};

package/dist/index.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,9 +1,10 @@
 {
   "name": "@number-flow/vue",
+  "type": "module",
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.2",
+  "version": "0.3.4",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
@@ -32,19 +33,19 @@
     "dist",
     "README.md"
   ],
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
     }
   },
   "dependencies": {
     "esm-env": "^1.1.4",
-    "number-flow": "0.4.1"
+    "number-flow": "0.4.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.48.0",

package/dist/index.mjs DELETED Viewed

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