anyiutils - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

dist/index.d.ts

@@ -13,2 +13,42 @@ /** 精确加 */
 
+interface AnimateNumberProps {
+    /** 开始数字 @default 0 */
+    start?: number;
+    /** 结束数字 @default 0 */
+    end: number;
+    /** 动画时间 @default 1000 */
+    duration?: number;
+    /** 每次变化的最小值 @default 1 */
+    minStep?: number;
+    /** 回调函数触发频率 @default 16.6 */
+    timeout?: number;
+    /** 回调函数，每次数字改变时调用 */
+    callback?: (value: number, isEnd?: boolean) => void;
+    /** 是否禁用变化 */
+    disabled?: boolean;
+    /** 小数位数 @default 2 */
+    digits?: number;
+}
+/** 数字动画 */
+declare function animateNumber(props: AnimateNumberProps): void;
+interface Events {
+    /** 每次更新时触发 */
+    update: (val: number, isEnd?: boolean) => void;
+    /** 结束时触发 */
+    end: () => void;
+}
+type Options = Pick<AnimateNumberProps, 'duration' | 'digits' | 'minStep' | 'timeout' | 'disabled'>;
+/** 可控的数字动画 */
+declare class NumberContorl {
+    #private;
+    constructor(value: number, option?: Options);
+    /** 设置配置 */
+    setOption(option?: Options): void;
+    /** 停止动画 */
+    stop(): void;
+    /** 跳转到指定的数字 */
+    seek(target: number): void;
+    on<K extends keyof Events>(event: K, callback: Events[K]): void;
+}
+
 interface ICallRetryParams {
@@ -70,3 +110,3 @@ /**
     strokeLinecap: 'butt' | 'round' | 'square';
-    /** 动画速度（也可以任务是进度条完结时间）
+    /** 动画速度（也可以认为是进度条完结时间）
      * 注意：这个属性不支持动态修改 progress @default 0 */
@@ -136,2 +176,2 @@ defaultDurTime: number;
 
-export { accAdd, accDiv, accMinus, accMul, callRetry, classof, createBase64Svg, createCircleBase64, createSvgStr, deepClone, isArray, isPlainObject, mergeObjects, sleep, strComparator };
+export { NumberContorl, accAdd, accDiv, accMinus, accMul, animateNumber, callRetry, classof, createBase64Svg, createCircleBase64, createSvgStr, deepClone, isArray, isPlainObject, mergeObjects, sleep, strComparator };

dist/index.js

@@ -1,37 +0,37 @@
-function b(t,e){t=t||0,e=e||0;let o=(t.toString().split(".")[1]||"").length,r=(e.toString().split(".")[1]||"").length,n=Math.pow(10,Math.max(o,r));return (Math.round(t*n)+Math.round(e*n))/n}function x(t,e){t=t||0,e=e||0;let o=0,r=t.toString(),n=e.toString();try{o+=r.split(".")[1].length;}catch{}try{o+=n.split(".")[1].length;}catch{}return Number(r.replace(".",""))*Number(n.replace(".",""))/Math.pow(10,o)}function A(t,e){t=t||0,e=e||0;let o,r;try{o=t.toString().split(".")[1].length;}catch{o=0;}try{r=e.toString().split(".")[1].length;}catch{r=0;}let n=Number(t.toString().replace(".","")),i=Number(e.toString().replace(".",""));return x(n/i,Math.pow(10,r-o))}function L(t,e){return b(t,-e)}function $(t){return new Promise(e=>{let o=setTimeout(()=>{e(),clearTimeout(o);},t);})}function I({fn:t,times:e=3,delay:o=1e3,onend:r,needRetry:n,onfnend:i,onfnerror:c}){let s=0;return new Promise(a=>{let l=async()=>{let f,u=!1;try{f=await t();}catch(g){u=!0,typeof c=="function"&&c(g);}finally{s++,!u&&typeof i=="function"&&i(f);}(typeof n=="function"?n(s):s<e)?(await $(typeof o=="function"?o(s):o),l()):(typeof r=="function"&&r(),a());};l();})}function d(t){return t===null?"null":typeof t!="object"?typeof t:Object.prototype.toString.call(t).slice(8,-1).toLocaleLowerCase()}function w(t){let{layerColor:e,fill:o,color:r,strokeLinecap:n,defaultDurTime:i,strokeScale:c}={defaultDurTime:0,strokeScale:.1,layerColor:"#e0e0e0",fill:"none",strokeLinecap:"round",color:"#00cf87",...t},s=200,a=s*c;return (l=0)=>{l=Math.min(Math.max(l,0),100);let f=s*Math.PI,u=f*(1-l/100);n!=="butt"&&l!==100&&l>95&&(u=u+a/2);let p=s+a;return `<svg
-    width="${p}"
-    height="${p}"
-    viewBox="0 0 ${p} ${p}"
+function x(t,e){t=t||0,e=e||0;let r=(t.toString().split(".")[1]||"").length,n=(e.toString().split(".")[1]||"").length,o=Math.pow(10,Math.max(r,n));return (Math.round(t*o)+Math.round(e*o))/o}function v(t,e){t=t||0,e=e||0;let r=0,n=t.toString(),o=e.toString();try{r+=n.split(".")[1].length;}catch{}try{r+=o.split(".")[1].length;}catch{}return Number(n.replace(".",""))*Number(o.replace(".",""))/Math.pow(10,r)}function A(t,e){t=t||0,e=e||0;let r,n;try{r=t.toString().split(".")[1].length;}catch{r=0;}try{n=e.toString().split(".")[1].length;}catch{n=0;}let o=Number(t.toString().replace(".","")),s=Number(e.toString().replace(".",""));return v(o/s,Math.pow(10,n-r))}function j(t,e){return x(t,-e)}function N(t){let{start:e=0,end:r=0,duration:n=1e3,timeout:o=16.67,callback:s=()=>{},minStep:a=1,disabled:i=!1,digits:c=2}=t,l=Math.round(n/o),u=Math.abs(r-e),m=Math.max(a,u/l),f=e>r?-1:1;if(l<=1||u<=m||i)return s(r,!0);let p=e,b=setInterval(()=>{p=parseFloat((p+f*m).toFixed(c)),(f===-1?p<=r:p>=r)?(s(r,!0),clearInterval(b)):s(p);},o);}var P=class{#t=0;#s=0;constructor(e,r){this.#t=e,this.setOption(r);}#n={digits:2,duration:1e3,timeout:16.67,minStep:1,disabled:!1};setOption(e){this.#n=Object.assign(this.#n,e||{});}#e=null;stop(){this.#e&&(clearInterval(this.#e),this.#e=null);}seek(e){if(this.#s===e)return;this.#s=e,this.stop();let{digits:r,disabled:n,duration:o,minStep:s,timeout:a}=this.#n||{},i=Math.round(o/a),c=Math.abs(e-this.#t),l=e>this.#t?1:-1,u=Math.max(s,c/i);if(n||[i,c,u].some(isNaN)||i<=1||c<=u){this.#r(e,!0),this.#o();return}this.#e=setInterval(()=>{let m=parseFloat((this.#t+l*u).toFixed(r));m===this.#t||(l===-1?m<=e:m>=e)?(this.#r(e,!0),this.#o(),this.stop()):(this.#t=m,this.#r(this.#t));},a);}#r=()=>{};#o=()=>{};on(e,r){e==="update"?this.#r=r:e==="end"&&(this.#o=r);}};function S(t){return new Promise(e=>{let r=setTimeout(()=>{e(),clearTimeout(r);},t);})}function F({fn:t,times:e=3,delay:r=1e3,onend:n,needRetry:o,onfnend:s,onfnerror:a}){let i=0;return new Promise(c=>{let l=async()=>{let u,m=!1;try{u=await t();}catch(p){m=!0,typeof a=="function"&&a(p);}finally{i++,!m&&typeof s=="function"&&s(u);}(typeof o=="function"?o(i):i<e)?(await S(typeof r=="function"?r(i):r),l()):(typeof n=="function"&&n(),c());};l();})}function y(t){return t===null?"null":typeof t!="object"?typeof t:Object.prototype.toString.call(t).slice(8,-1).toLocaleLowerCase()}function $(t){let{layerColor:e,fill:r,color:n,strokeLinecap:o,defaultDurTime:s,strokeScale:a}={defaultDurTime:0,strokeScale:.1,layerColor:"#e0e0e0",fill:"none",strokeLinecap:"round",color:"#00cf87",...t},i=200,c=i*a;return (l=0)=>{l=Math.min(Math.max(l,0),100);let u=i*Math.PI,m=u*(1-l/100);o!=="butt"&&l!==100&&l>95&&(m=m+c/2);let f=i+c;return `<svg
+    width="${f}"
+    height="${f}"
+    viewBox="0 0 ${f} ${f}"
     xmlns="http://www.w3.org/2000/svg"
     style="transform: rotate(-90deg); transform-origin: center;"
     >
-    ${typeof r=="object"?`
+    ${typeof n=="object"?`
           <defs>
               <linearGradient id="progressGradient" x1="1" y1="0" x2="0" y2="0">
-                  ${Object.entries(r).map(([g,P])=>`<stop offset="${g}%" stop-color="${P}" />`).join("")}
+                  ${Object.entries(n).map(([p,b])=>`<stop offset="${p}%" stop-color="${b}" />`).join("")}
               </linearGradient>
           </defs>
       `:""}
-    <circle cx="50%" cy="50%" r="${s/2}" style="stroke: ${e}; stroke-width: ${a}; fill: none;"></circle>
+    <circle cx="50%" cy="50%" r="${i/2}" style="stroke: ${e}; stroke-width: ${c}; fill: none;"></circle>
   
-    <circle cx="50%" cy="50%" r="${s/2}"
+    <circle cx="50%" cy="50%" r="${i/2}"
       style="
-      stroke: ${typeof r=="object"?"url(#progressGradient)":r};
-      stroke-width: ${a};
-      stroke-linecap: ${n};
-      fill: ${o};
-      stroke-dasharray: ${f};
-      stroke-dashoffset: ${u};
+      stroke: ${typeof n=="object"?"url(#progressGradient)":n};
+      stroke-width: ${c};
+      stroke-linecap: ${o};
+      fill: ${r};
+      stroke-dasharray: ${u};
+      stroke-dashoffset: ${m};
     ">
-    ${i>0?`<animate
+    ${s>0?`<animate
               attributeName="stroke-dashoffset"
-              dur="${i}ms"
+              dur="${s}ms"
               fill="freeze"
-              from="${f}"
-              to="${u}"
+              from="${u}"
+              to="${m}"
           ></animate>
           `:""}
     </circle>
-    </svg>`.replace(/\n/g," ").replace(/\s+/g," ")}}function S(t){let e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",o="";for(let r=0,n,i=0,c=e;t.charAt(i|0)||(c="=",i%1);o+=c.charAt(63&r>>8-i%1*8)){if(n>255)throw new Error("'base64Encode' failed: The string to be encoded contains characters outside of the Latin1 range.");n=t.charCodeAt(i+=3/4),r=r<<8|n;}return o}function k(t){return `data:image/svg+xml;base64,${S(unescape(encodeURIComponent(t)))}`}function G(t){return k(w(t)(t?.progress||10))}function m(t){return d(t)==="object"}function h(t){return d(t)==="array"}function y(t){if(!m(t)&&!h(t))return t;let e=h(t)?[]:{};return Object.keys(t).forEach(o=>{let r=t[o];m(r)||h(r)?e[o]=y(r):e[o]=t[o];}),e}function v(t,...e){return e.filter(r=>m(r)).forEach(r=>{for(let n in r)if(Object.prototype.hasOwnProperty.call(r,n)){let i=r[n];m(i)&&m(t[n])?v(t[n],y(i)):t[n]=i;}}),t}function K(t,e){t=t.toString(),e=e.toString();let o=/(\d+)|(\D+)/g,r=t.match(o),n=e.match(o);if(!r||!n)return t.localeCompare(e);let i=Math.min(r.length,n.length);for(let c=0;c<i;c++){let s=r[c],a=n[c];if(/\d+/.test(s)&&/\d+/.test(a)){let l=parseInt(s),f=parseInt(a);if(l!==f)return l-f;if(s.length!==a.length)return s.length-a.length}else if(s!==a)return s.localeCompare(a)}return r.length-n.length}
+    </svg>`.replace(/\n/g," ").replace(/\s+/g," ")}}function k(t){let e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",r="";for(let n=0,o,s=0,a=e;t.charAt(s|0)||(a="=",s%1);r+=a.charAt(63&n>>8-s%1*8)){if(o>255)throw new Error("'base64Encode' failed: The string to be encoded contains characters outside of the Latin1 range.");o=t.charCodeAt(s+=3/4),n=n<<8|o;}return r}function w(t){return `data:image/svg+xml;base64,${k(unescape(encodeURIComponent(t)))}`}function K(t){return w($(t)(t?.progress??10))}function d(t){return y(t)==="object"}function h(t){return y(t)==="array"}function g(t){if(!d(t)&&!h(t))return t;let e=h(t)?[]:{};return Object.keys(t).forEach(r=>{let n=t[r];d(n)||h(n)?e[r]=g(n):e[r]=t[r];}),e}function M(t,...e){return e.filter(n=>d(n)).forEach(n=>{for(let o in n)if(Object.prototype.hasOwnProperty.call(n,o)){let s=n[o];d(s)&&d(t[o])?M(t[o],g(s)):t[o]=s;}}),t}function X(t,e){t=t.toString(),e=e.toString();let r=/(\d+)|(\D+)/g,n=t.match(r),o=e.match(r);if(!n||!o)return t.localeCompare(e);let s=Math.min(n.length,o.length);for(let a=0;a<s;a++){let i=n[a],c=o[a];if(/\d+/.test(i)&&/\d+/.test(c)){let l=parseInt(i),u=parseInt(c);if(l!==u)return l-u;if(i.length!==c.length)return i.length-c.length}else if(i!==c)return i.localeCompare(c)}return n.length-o.length}
 
-export { b as accAdd, A as accDiv, L as accMinus, x as accMul, I as callRetry, d as classof, k as createBase64Svg, G as createCircleBase64, w as createSvgStr, y as deepClone, h as isArray, m as isPlainObject, v as mergeObjects, $ as sleep, K as strComparator };
+export { P as NumberContorl, x as accAdd, A as accDiv, j as accMinus, v as accMul, N as animateNumber, F as callRetry, y as classof, w as createBase64Svg, K as createCircleBase64, $ as createSvgStr, g as deepClone, h as isArray, d as isPlainObject, M as mergeObjects, S as sleep, X as strComparator };

package.json

 {
     "name": "anyiutils",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "description": "any i utils",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -61,1 +61,58 @@ ## anyiutils
 ```
+
+14. animateNumber: 数字动画
+
+```ts
+import { animateNumber } from 'anyiutils'
+
+animateNumber({ start: 0, end: 5, callback: console.log })
+// 1
+// 2
+// 3
+// 4
+// 5 true
+```
+
+15. NumberContorl 可控数字动画
+
+```ts
+import { NumberContorl } from 'anyiutils'
+const nc = new NumberContorl(0)
+nc.on('update', (val, isEnd) => {
+    console.log(val, isEnd)
+
+    if (val >= 5) {
+        nc.seek(0)
+    }
+})
+nc.seek(10)
+
+// 1 undefined
+// 2 undefined
+// 3 undefined
+// 4 undefined
+// 5 undefined
+// 4 undefined
+// 3 undefined
+// 2 undefined
+// 1 undefined
+// 0 true
+```
+
+```ts
+// 结合 NumberContorl 和 createCircleBase64 实现可控制进度与动画的环形进度条
+import { NumberContorl, createCircleBase64 } from 'anyiutils'
+const img = document.createElement('img')
+img.src = createCircleBase64({ progress: 0 })
+document.body.appendChild(img)
+
+const nc = new NumberContorl(0, { digits: 0 })
+nc.on('update', (val) => {
+    img.src = createCircleBase64({ progress: val })
+})
+
+// 设置进度
+nc.seek(10)
+nc.seek(100)
+nc.seek(0)
+```

No alert changes

Improved metrics

Total package byte prevSize

24409

increased by32.08%

Lines of code

276

increased by21.59%

Number of lines in readme file

118

increased by93.44%

No dependency changes