@number-flow/vue 0.4.10 → 0.4.11
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.
- package/dist/index.d.ts +3 -0
- package/dist/index.js +103 -61
- package/dist/index.umd.cjs +1 -1
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -52,9 +52,12 @@ declare type Props = Partial<Props_2> & {
|
|
|
52
52
|
value: Value;
|
|
53
53
|
prefix?: string;
|
|
54
54
|
suffix?: string;
|
|
55
|
+
nonce?: string;
|
|
55
56
|
willChange?: boolean;
|
|
56
57
|
};
|
|
57
58
|
|
|
59
|
+
export declare const styles: readonly [string, string, string];
|
|
60
|
+
|
|
58
61
|
export { Trend }
|
|
59
62
|
|
|
60
63
|
export declare function useCanAnimate({ respectMotionPreference }?: {
|
package/dist/index.js
CHANGED
|
@@ -1,57 +1,97 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
import { default as
|
|
1
|
+
import { defineComponent as M, provide as F, renderSlot as L, watch as N, nextTick as T, onUnmounted as j, ref as v, computed as y, inject as V, openBlock as X, createElementBlock as G, mergeProps as z, unref as P, onMounted as H, watchEffect as R, toValue as x } from "vue";
|
|
2
|
+
import o, { formatToData as U, renderInnerHTML as W, define as I, canAnimate as Y, prefersReducedMotion as b } from "number-flow/lite";
|
|
3
|
+
import { default as le } from "number-flow/lite";
|
|
4
|
+
import { BROWSER as h } from "esm-env";
|
|
4
5
|
export * from "number-flow/plugins";
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
const k = String.raw;
|
|
7
|
+
h && (() => {
|
|
8
|
+
try {
|
|
9
|
+
document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
|
|
10
|
+
} catch {
|
|
11
|
+
return !1;
|
|
12
|
+
}
|
|
13
|
+
return !0;
|
|
14
|
+
})();
|
|
15
|
+
h && typeof CSS < "u" && CSS.supports && CSS.supports("line-height", "mod(1,1)");
|
|
16
|
+
h && typeof matchMedia < "u" && matchMedia("(prefers-reduced-motion: reduce)");
|
|
17
|
+
const _ = "--_number-flow-d-opacity", C = "--_number-flow-d-width", w = "--_number-flow-dx", E = "--_number-flow-d";
|
|
18
|
+
(() => {
|
|
19
|
+
try {
|
|
20
|
+
return CSS.registerProperty({
|
|
21
|
+
name: _,
|
|
22
|
+
syntax: "<number>",
|
|
23
|
+
inherits: !1,
|
|
24
|
+
initialValue: "0"
|
|
25
|
+
}), CSS.registerProperty({
|
|
26
|
+
name: w,
|
|
27
|
+
syntax: "<length>",
|
|
28
|
+
inherits: !0,
|
|
29
|
+
initialValue: "0px"
|
|
30
|
+
}), CSS.registerProperty({
|
|
31
|
+
name: C,
|
|
32
|
+
syntax: "<number>",
|
|
33
|
+
inherits: !1,
|
|
34
|
+
initialValue: "0"
|
|
35
|
+
}), CSS.registerProperty({
|
|
36
|
+
name: E,
|
|
37
|
+
syntax: "<number>",
|
|
38
|
+
inherits: !0,
|
|
39
|
+
initialValue: "0"
|
|
40
|
+
}), !0;
|
|
41
|
+
} catch {
|
|
42
|
+
return !1;
|
|
43
|
+
}
|
|
44
|
+
})();
|
|
45
|
+
const S = "var(--number-flow-char-height, 1em)", g = "round(nearest, calc(var(--number-flow-mask-height, 0.25em) / 2), 1px)", s = `calc(${g} * 2)`, $ = "var(--number-flow-mask-width, 0.5em)", c = `calc(${$} / var(--scale-x))`, f = "#000 0, transparent 71%", D = k`:host{display:inline-block;direction:ltr;white-space:nowrap;isolation:isolate;line-height:${S} !important}.number,.number__inner{display:inline-block;transform-origin:left top}:host([data-will-change]) :is(.number,.number__inner,.section,.digit,.digit__num,.symbol){will-change:transform}.number{--scale-x:calc(1 + var(${C}) / var(--width));transform:translateX(var(${w})) scaleX(var(--scale-x));margin:0 calc(-1 * ${$});position:relative;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 ${c},#000 calc(100% - ${c}),transparent ),linear-gradient(to bottom,transparent 0,#000 ${s},#000 calc(100% - ${s}),transparent 100% ),radial-gradient(at bottom right,${f}),radial-gradient(at bottom left,${f}),radial-gradient(at top left,${f}),radial-gradient(at top right,${f});-webkit-mask-size:100% calc(100% - ${s} * 2),calc(100% - ${c} * 2) 100%,${c} ${s},${c} ${s},${c} ${s},${c} ${s};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat}.number__inner{padding:${g} ${$};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${w})))}:host > :not(.number){z-index:5}.section,.symbol{display:inline-block;position:relative;isolation:isolate}.section::after{content:'\200b';display:inline-block}.section--justify-left{transform-origin:center left}.section--justify-right{transform-origin:center right}.section > [inert],.symbol > [inert]{margin:0 !important;position:absolute !important;z-index:-1}.digit{display:inline-block;position:relative;--c:var(--current) + var(${E})}.digit__num,.number .section::after{padding:${g} 0}.digit__num{display:inline-block;--offset-raw:mod(var(--length) + var(--n) - mod(var(--c),var(--length)),var(--length));--offset:calc( var(--offset-raw) - var(--length) * round(down,var(--offset-raw) / (var(--length) / 2),1) );--y:clamp(-100%,var(--offset) * 100%,100%);transform:translateY(var(--y))}.digit__num[inert]{position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(var(--y))}.digit:not(.is-spinning) .digit__num[inert]{display:none}.symbol__value{display:inline-block;mix-blend-mode:plus-lighter;white-space:pre}.section--justify-left .symbol > [inert]{left:0}.section--justify-right .symbol > [inert]{right:0}.animate-presence{opacity:calc(1 + var(${_}))}`, O = k`:host{display:inline-block;direction:ltr;white-space:nowrap;line-height:${S} !important}span{display:inline-block}:host([data-will-change]) span{will-change:transform}.number,.digit{padding:${g} 0}.symbol{white-space:pre}`, q = (e = "") => k`number-flow${e} > span{font-kerning:none;display:inline-block;line-height:${S} !important;padding:${s} 0}`, J = (e) => [O, q(e), D], B = Symbol(), te = /* @__PURE__ */ M({
|
|
7
46
|
__name: "NumberFlowGroup",
|
|
8
|
-
setup(
|
|
9
|
-
const
|
|
10
|
-
let
|
|
11
|
-
return
|
|
12
|
-
|
|
13
|
-
|
|
47
|
+
setup(e) {
|
|
48
|
+
const l = /* @__PURE__ */ new Set();
|
|
49
|
+
let a = !1;
|
|
50
|
+
return F(B, (i, m) => {
|
|
51
|
+
l.add(i), N(
|
|
52
|
+
m,
|
|
14
53
|
async () => {
|
|
15
|
-
|
|
16
|
-
var
|
|
17
|
-
!
|
|
18
|
-
}), await
|
|
54
|
+
a || (a = !0, l.forEach(async (t) => {
|
|
55
|
+
var d;
|
|
56
|
+
!t.value || !t.value.created || (t.value.willUpdate(), await T(), (d = t.value) == null || d.didUpdate());
|
|
57
|
+
}), await T(), a = !1);
|
|
19
58
|
}
|
|
20
59
|
// { flush: 'pre' } // default
|
|
21
|
-
),
|
|
22
|
-
|
|
60
|
+
), j(() => {
|
|
61
|
+
l.delete(i);
|
|
23
62
|
});
|
|
24
|
-
}), (
|
|
63
|
+
}), (i, m) => L(i.$slots, "default");
|
|
25
64
|
}
|
|
26
|
-
}),
|
|
65
|
+
}), K = ["batched", "trend", "plugins", "animated", "transformTiming", "spinTiming", "opacityTiming", "respectMotionPreference", "nonce", "data-will-change", "digits", "innerHTML", "data"], ne = /* @__PURE__ */ M({
|
|
27
66
|
inheritAttrs: !1,
|
|
28
67
|
__name: "index",
|
|
29
68
|
props: {
|
|
30
|
-
transformTiming: { default: () =>
|
|
31
|
-
spinTiming: { default: () =>
|
|
32
|
-
opacityTiming: { default: () =>
|
|
33
|
-
animated: { type: Boolean, default: () =>
|
|
34
|
-
respectMotionPreference: { type: Boolean, default: () =>
|
|
35
|
-
trend: { type: [Number, Function], default: () =>
|
|
36
|
-
plugins: { default: () =>
|
|
37
|
-
digits: { default: () =>
|
|
69
|
+
transformTiming: { default: () => o.defaultProps.transformTiming },
|
|
70
|
+
spinTiming: { default: () => o.defaultProps.spinTiming },
|
|
71
|
+
opacityTiming: { default: () => o.defaultProps.opacityTiming },
|
|
72
|
+
animated: { type: Boolean, default: () => o.defaultProps.animated },
|
|
73
|
+
respectMotionPreference: { type: Boolean, default: () => o.defaultProps.respectMotionPreference },
|
|
74
|
+
trend: { type: [Number, Function], default: () => o.defaultProps.trend },
|
|
75
|
+
plugins: { default: () => o.defaultProps.plugins },
|
|
76
|
+
digits: { default: () => o.defaultProps.digits },
|
|
38
77
|
locales: {},
|
|
39
78
|
format: {},
|
|
40
79
|
value: {},
|
|
41
80
|
prefix: {},
|
|
42
81
|
suffix: {},
|
|
82
|
+
nonce: {},
|
|
43
83
|
willChange: { type: Boolean, default: !1 }
|
|
44
84
|
},
|
|
45
85
|
emits: ["animationsstart", "animationsfinish"],
|
|
46
|
-
setup(
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
const
|
|
50
|
-
return
|
|
86
|
+
setup(e, { expose: l, emit: a }) {
|
|
87
|
+
const r = v();
|
|
88
|
+
l({ el: r });
|
|
89
|
+
const i = a, m = y(() => new Intl.NumberFormat(e.locales, e.format)), t = y(() => U(e.value, m.value, e.prefix, e.suffix)), d = h ? void 0 : W(t.value, { nonce: e.nonce, elementSuffix: "-vue" }), u = V(B, void 0);
|
|
90
|
+
return u == null || u(r, t), (n, p) => (X(), G("number-flow-vue", z({
|
|
51
91
|
ref_key: "el",
|
|
52
|
-
ref:
|
|
92
|
+
ref: r
|
|
53
93
|
}, n.$attrs, {
|
|
54
|
-
batched: !!
|
|
94
|
+
batched: !!P(u),
|
|
55
95
|
trend: n.trend,
|
|
56
96
|
plugins: n.plugins,
|
|
57
97
|
animated: n.animated,
|
|
@@ -59,41 +99,43 @@ const w = Symbol(), j = /* @__PURE__ */ T({
|
|
|
59
99
|
spinTiming: n.spinTiming,
|
|
60
100
|
opacityTiming: n.opacityTiming,
|
|
61
101
|
respectMotionPreference: n.respectMotionPreference,
|
|
102
|
+
nonce: n.nonce,
|
|
62
103
|
"data-will-change": n.willChange ? "" : void 0,
|
|
63
104
|
digits: n.digits,
|
|
64
|
-
innerHTML:
|
|
105
|
+
innerHTML: P(d),
|
|
65
106
|
"data-allow-mismatch": "",
|
|
66
|
-
onAnimationsstart:
|
|
67
|
-
onAnimationsfinish:
|
|
68
|
-
data:
|
|
69
|
-
}), null, 16,
|
|
107
|
+
onAnimationsstart: p[0] || (p[0] = (A) => i("animationsstart")),
|
|
108
|
+
onAnimationsfinish: p[1] || (p[1] = (A) => i("animationsfinish")),
|
|
109
|
+
data: t.value
|
|
110
|
+
}), null, 16, K));
|
|
70
111
|
}
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
function
|
|
74
|
-
respectMotionPreference:
|
|
112
|
+
}), ie = J("-vue");
|
|
113
|
+
I("number-flow-vue", o);
|
|
114
|
+
function ae({
|
|
115
|
+
respectMotionPreference: e = !0
|
|
75
116
|
} = {}) {
|
|
76
|
-
const
|
|
77
|
-
return
|
|
78
|
-
var
|
|
79
|
-
|
|
80
|
-
}),
|
|
81
|
-
var
|
|
82
|
-
if (!
|
|
83
|
-
const
|
|
84
|
-
|
|
117
|
+
const l = v(!1), a = v(!1);
|
|
118
|
+
return H(() => {
|
|
119
|
+
var r;
|
|
120
|
+
l.value = Y, a.value = ((r = b) == null ? void 0 : r.matches) ?? !1;
|
|
121
|
+
}), R((r) => {
|
|
122
|
+
var m;
|
|
123
|
+
if (!x(e)) return;
|
|
124
|
+
const i = ({ matches: t }) => {
|
|
125
|
+
a.value = t;
|
|
85
126
|
};
|
|
86
|
-
(
|
|
87
|
-
var
|
|
88
|
-
(
|
|
127
|
+
(m = b) == null || m.addEventListener("change", i), r(() => {
|
|
128
|
+
var t;
|
|
129
|
+
(t = b) == null || t.removeEventListener("change", i);
|
|
89
130
|
});
|
|
90
|
-
}),
|
|
91
|
-
() =>
|
|
131
|
+
}), y(
|
|
132
|
+
() => l.value && (!x(e) || !a.value)
|
|
92
133
|
);
|
|
93
134
|
}
|
|
94
135
|
export {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
136
|
+
le as NumberFlowElement,
|
|
137
|
+
te as NumberFlowGroup,
|
|
138
|
+
ne as default,
|
|
139
|
+
ie as styles,
|
|
140
|
+
ae as useCanAnimate
|
|
99
141
|
};
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("number-flow/lite"),require("esm-env"),require("number-flow/plugins")):typeof define=="function"&&define.amd?define(["exports","vue","number-flow/lite","esm-env","number-flow/plugins"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i["number-flow-vue"]={},i.Vue,i.NumberFlowLite,i.Env,i.plugins))})(this,function(i,e,t,u,S){"use strict";const $=String.raw;u.BROWSER&&(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch{return!1}return!0})(),u.BROWSER&&typeof CSS<"u"&&CSS.supports&&CSS.supports("line-height","mod(1,1)"),u.BROWSER&&typeof matchMedia<"u"&&matchMedia("(prefers-reduced-motion: reduce)");const T="--_number-flow-d-opacity",P="--_number-flow-d-width",v="--_number-flow-dx",M="--_number-flow-d";(()=>{try{return CSS.registerProperty({name:T,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:v,syntax:"<length>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:P,syntax:"<number>",inherits:!1,initialValue:"0"}),CSS.registerProperty({name:M,syntax:"<number>",inherits:!0,initialValue:"0"}),!0}catch{return!1}})();const w="var(--number-flow-char-height, 1em)",p="round(nearest, calc(var(--number-flow-mask-height, 0.25em) / 2), 1px)",d=`calc(${p} * 2)`,k="var(--number-flow-mask-width, 0.5em)",m=`calc(${k} / var(--scale-x))`,g="#000 0, transparent 71%",C=$`:host{display:inline-block;direction:ltr;white-space:nowrap;isolation:isolate;line-height:${w} !important}.number,.number__inner{display:inline-block;transform-origin:left top}:host([data-will-change]) :is(.number,.number__inner,.section,.digit,.digit__num,.symbol){will-change:transform}.number{--scale-x:calc(1 + var(${P}) / var(--width));transform:translateX(var(${v})) scaleX(var(--scale-x));margin:0 calc(-1 * ${k});position:relative;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 ${m},#000 calc(100% - ${m}),transparent ),linear-gradient(to bottom,transparent 0,#000 ${d},#000 calc(100% - ${d}),transparent 100% ),radial-gradient(at bottom right,${g}),radial-gradient(at bottom left,${g}),radial-gradient(at top left,${g}),radial-gradient(at top right,${g});-webkit-mask-size:100% calc(100% - ${d} * 2),calc(100% - ${m} * 2) 100%,${m} ${d},${m} ${d},${m} ${d},${m} ${d};-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat}.number__inner{padding:${p} ${k};transform:scaleX(calc(1 / var(--scale-x))) translateX(calc(-1 * var(${v})))}:host > :not(.number){z-index:5}.section,.symbol{display:inline-block;position:relative;isolation:isolate}.section::after{content:'\200b';display:inline-block}.section--justify-left{transform-origin:center left}.section--justify-right{transform-origin:center right}.section > [inert],.symbol > [inert]{margin:0 !important;position:absolute !important;z-index:-1}.digit{display:inline-block;position:relative;--c:var(--current) + var(${M})}.digit__num,.number .section::after{padding:${p} 0}.digit__num{display:inline-block;--offset-raw:mod(var(--length) + var(--n) - mod(var(--c),var(--length)),var(--length));--offset:calc( var(--offset-raw) - var(--length) * round(down,var(--offset-raw) / (var(--length) / 2),1) );--y:clamp(-100%,var(--offset) * 100%,100%);transform:translateY(var(--y))}.digit__num[inert]{position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(var(--y))}.digit:not(.is-spinning) .digit__num[inert]{display:none}.symbol__value{display:inline-block;mix-blend-mode:plus-lighter;white-space:pre}.section--justify-left .symbol > [inert]{left:0}.section--justify-right .symbol > [inert]{right:0}.animate-presence{opacity:calc(1 + var(${T}))}`,R=$`:host{display:inline-block;direction:ltr;white-space:nowrap;line-height:${w} !important}span{display:inline-block}:host([data-will-change]) span{will-change:transform}.number,.digit{padding:${p} 0}.symbol{white-space:pre}`,j=(n="")=>$`number-flow${n} > span{font-kerning:none;display:inline-block;line-height:${w} !important;padding:${d} 0}`,B=n=>[R,j(n),C],_=Symbol(),E=e.defineComponent({__name:"NumberFlowGroup",setup(n){const c=new Set;let l=!1;const o=(s,f)=>{c.add(s),e.watch(f,async()=>{l||(l=!0,c.forEach(async a=>{var h;!a.value||!a.value.created||(a.value.willUpdate(),await e.nextTick(),(h=a.value)==null||h.didUpdate())}),await e.nextTick(),l=!1)}),e.onUnmounted(()=>{c.delete(s)})};return e.provide(_,o),(s,f)=>e.renderSlot(s.$slots,"default")}}),x=["batched","trend","plugins","animated","transformTiming","spinTiming","opacityTiming","respectMotionPreference","nonce","data-will-change","digits","innerHTML","data"],O=e.defineComponent({inheritAttrs:!1,__name:"index",props:{transformTiming:{default:()=>t.defaultProps.transformTiming},spinTiming:{default:()=>t.defaultProps.spinTiming},opacityTiming:{default:()=>t.defaultProps.opacityTiming},animated:{type:Boolean,default:()=>t.defaultProps.animated},respectMotionPreference:{type:Boolean,default:()=>t.defaultProps.respectMotionPreference},trend:{type:[Number,Function],default:()=>t.defaultProps.trend},plugins:{default:()=>t.defaultProps.plugins},digits:{default:()=>t.defaultProps.digits},locales:{},format:{},value:{},prefix:{},suffix:{},nonce:{},willChange:{type:Boolean,default:!1}},emits:["animationsstart","animationsfinish"],setup(n,{expose:c,emit:l}){const o=e.ref();c({el:o});const s=l,f=e.computed(()=>new Intl.NumberFormat(n.locales,n.format)),a=e.computed(()=>t.formatToData(n.value,f.value,n.prefix,n.suffix)),h=u.BROWSER?void 0:t.renderInnerHTML(a.value,{nonce:n.nonce,elementSuffix:"-vue"}),y=e.inject(_,void 0);return y==null||y(o,a),(r,b)=>(e.openBlock(),e.createElementBlock("number-flow-vue",e.mergeProps({ref_key:"el",ref:o},r.$attrs,{batched:!!e.unref(y),trend:r.trend,plugins:r.plugins,animated:r.animated,transformTiming:r.transformTiming,spinTiming:r.spinTiming,opacityTiming:r.opacityTiming,respectMotionPreference:r.respectMotionPreference,nonce:r.nonce,"data-will-change":r.willChange?"":void 0,digits:r.digits,innerHTML:e.unref(h),"data-allow-mismatch":"",onAnimationsstart:b[0]||(b[0]=W=>s("animationsstart")),onAnimationsfinish:b[1]||(b[1]=W=>s("animationsfinish")),data:a.value}),null,16,x))}}),A=B("-vue");t.define("number-flow-vue",t);function V({respectMotionPreference:n=!0}={}){const c=e.ref(!1),l=e.ref(!1);return e.onMounted(()=>{var o;c.value=t.canAnimate,l.value=((o=t.prefersReducedMotion)==null?void 0:o.matches)??!1}),e.watchEffect(o=>{var f;if(!e.toValue(n))return;const s=({matches:a})=>{l.value=a};(f=t.prefersReducedMotion)==null||f.addEventListener("change",s),o(()=>{var a;(a=t.prefersReducedMotion)==null||a.removeEventListener("change",s)})}),e.computed(()=>c.value&&(!e.toValue(n)||!l.value))}i.NumberFlowElement=t,i.NumberFlowGroup=E,i.default=O,i.styles=A,i.useCanAnimate=V,Object.keys(S).forEach(n=>{n!=="default"&&!Object.prototype.hasOwnProperty.call(i,n)&&Object.defineProperty(i,n,{enumerable:!0,get:()=>S[n]})}),Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
|
-
"version": "0.4.
|
|
7
|
+
"version": "0.4.11",
|
|
8
8
|
"author": {
|
|
9
9
|
"name": "Maxwell Barvian",
|
|
10
10
|
"email": "max@barvian.me",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"esm-env": "^1.1.4",
|
|
48
|
-
"number-flow": "0.5.
|
|
48
|
+
"number-flow": "0.5.11"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@playwright/test": "^1.48.0",
|