geekin-devtoys 0.0.2
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/lib/CountUp/index.js +1 -0
- package/lib/CountUp/index.mjs +78 -0
- package/lib/Demo/index.js +1 -0
- package/lib/Demo/index.mjs +23 -0
- package/lib/index/index.js +1 -0
- package/lib/index/index.mjs +13 -0
- package/lib/index/style.css +1 -0
- package/package.json +55 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),d=t.defineComponent({name:"GCountUp",__name:"index",props:{to:{},from:{default:0},direction:{default:"up"},delay:{default:0},duration:{default:2},className:{default:""},startWhen:{type:Boolean,default:!0},separator:{default:""},onStart:{},onEnd:{}},setup(p){const e=p,o=t.useTemplateRef("elementRef"),r=t.ref(e.direction==="down"?e.to:e.from),i=t.ref(!1),n=t.ref(null),c=t.ref(!1);let s=null;const h=t.computed(()=>20+40*(1/e.duration)),F=t.computed(()=>100*(1/e.duration));let u=0;const y=a=>{const l={useGrouping:!!e.separator,minimumFractionDigits:0,maximumFractionDigits:0},f=Intl.NumberFormat("en-US",l).format(Number(a.toFixed(0)));return e.separator?f.replace(/,/g,e.separator):f},m=()=>{o.value&&(o.value.textContent=y(r.value))},v=a=>{const l=e.direction==="down"?e.from:e.to,f=r.value,b=l-f,I=b*F.value,N=u*h.value,_=I-N;u+=_*.016,r.value+=u*.016,m(),Math.abs(b)>.01||Math.abs(u)>.01?n.value=requestAnimationFrame(v):(r.value=l,m(),n.value=null,e.onEnd&&e.onEnd())},g=()=>{c.value||!i.value||!e.startWhen||(c.value=!0,e.onStart&&e.onStart(),setTimeout(()=>{u=0,n.value=requestAnimationFrame(v)},e.delay*1e3))},w=()=>{o.value&&(s=new IntersectionObserver(([a])=>{a.isIntersecting&&!i.value&&(i.value=!0,g())},{threshold:0,rootMargin:"0px"}),s.observe(o.value))},S=()=>{n.value&&(cancelAnimationFrame(n.value),n.value=null),s&&(s.disconnect(),s=null)};return t.watch([()=>e.from,()=>e.to,()=>e.direction],()=>{r.value=e.direction==="down"?e.to:e.from,m(),c.value=!1},{immediate:!0}),t.watch(()=>e.startWhen,()=>{e.startWhen&&i.value&&!c.value&&g()}),t.onMounted(()=>{m(),w()}),t.onUnmounted(()=>{S()}),(a,l)=>(t.openBlock(),t.createElementBlock("span",{ref_key:"elementRef",ref:o,class:t.normalizeClass(a.className)},null,2))}});d.install=p=>{p.component(d.name,d)};exports.CountUp=d;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { defineComponent as S, useTemplateRef as E, ref as f, computed as b, watch as F, onMounted as M, onUnmounted as R, createElementBlock as U, openBlock as W, normalizeClass as k } from "vue";
|
|
2
|
+
const p = /* @__PURE__ */ S({
|
|
3
|
+
name: "GCountUp",
|
|
4
|
+
__name: "index",
|
|
5
|
+
props: {
|
|
6
|
+
to: {},
|
|
7
|
+
from: { default: 0 },
|
|
8
|
+
direction: { default: "up" },
|
|
9
|
+
delay: { default: 0 },
|
|
10
|
+
duration: { default: 2 },
|
|
11
|
+
className: { default: "" },
|
|
12
|
+
startWhen: { type: Boolean, default: !0 },
|
|
13
|
+
separator: { default: "" },
|
|
14
|
+
onStart: {},
|
|
15
|
+
onEnd: {}
|
|
16
|
+
},
|
|
17
|
+
setup(d) {
|
|
18
|
+
const e = d, a = E("elementRef"), o = f(e.direction === "down" ? e.to : e.from), i = f(!1), t = f(null), u = f(!1);
|
|
19
|
+
let r = null;
|
|
20
|
+
const w = b(() => 20 + 40 * (1 / e.duration)), x = b(() => 100 * (1 / e.duration));
|
|
21
|
+
let s = 0;
|
|
22
|
+
const y = (n) => {
|
|
23
|
+
const l = {
|
|
24
|
+
useGrouping: !!e.separator,
|
|
25
|
+
minimumFractionDigits: 0,
|
|
26
|
+
maximumFractionDigits: 0
|
|
27
|
+
}, m = Intl.NumberFormat("en-US", l).format(Number(n.toFixed(0)));
|
|
28
|
+
return e.separator ? m.replace(/,/g, e.separator) : m;
|
|
29
|
+
}, c = () => {
|
|
30
|
+
a.value && (a.value.textContent = y(o.value));
|
|
31
|
+
}, v = (n) => {
|
|
32
|
+
const l = e.direction === "down" ? e.from : e.to, m = o.value, h = l - m, _ = h * x.value, A = s * w.value, C = _ - A;
|
|
33
|
+
s += C * 0.016, o.value += s * 0.016, c(), Math.abs(h) > 0.01 || Math.abs(s) > 0.01 ? t.value = requestAnimationFrame(v) : (o.value = l, c(), t.value = null, e.onEnd && e.onEnd());
|
|
34
|
+
}, g = () => {
|
|
35
|
+
u.value || !i.value || !e.startWhen || (u.value = !0, e.onStart && e.onStart(), setTimeout(() => {
|
|
36
|
+
s = 0, t.value = requestAnimationFrame(v);
|
|
37
|
+
}, e.delay * 1e3));
|
|
38
|
+
}, I = () => {
|
|
39
|
+
a.value && (r = new IntersectionObserver(
|
|
40
|
+
([n]) => {
|
|
41
|
+
n.isIntersecting && !i.value && (i.value = !0, g());
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
threshold: 0,
|
|
45
|
+
rootMargin: "0px"
|
|
46
|
+
}
|
|
47
|
+
), r.observe(a.value));
|
|
48
|
+
}, N = () => {
|
|
49
|
+
t.value && (cancelAnimationFrame(t.value), t.value = null), r && (r.disconnect(), r = null);
|
|
50
|
+
};
|
|
51
|
+
return F(
|
|
52
|
+
[() => e.from, () => e.to, () => e.direction],
|
|
53
|
+
() => {
|
|
54
|
+
o.value = e.direction === "down" ? e.to : e.from, c(), u.value = !1;
|
|
55
|
+
},
|
|
56
|
+
{ immediate: !0 }
|
|
57
|
+
), F(
|
|
58
|
+
() => e.startWhen,
|
|
59
|
+
() => {
|
|
60
|
+
e.startWhen && i.value && !u.value && g();
|
|
61
|
+
}
|
|
62
|
+
), M(() => {
|
|
63
|
+
c(), I();
|
|
64
|
+
}), R(() => {
|
|
65
|
+
N();
|
|
66
|
+
}), (n, l) => (W(), U("span", {
|
|
67
|
+
ref_key: "elementRef",
|
|
68
|
+
ref: a,
|
|
69
|
+
class: k(n.className)
|
|
70
|
+
}, null, 2));
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
p.install = (d) => {
|
|
74
|
+
d.component(p.name, p);
|
|
75
|
+
};
|
|
76
|
+
export {
|
|
77
|
+
p as CountUp
|
|
78
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),a=(e,s)=>{const o=e.__vccOpts||e;for(const[c,r]of s)o[c]=r;return o},_={class:"demo"},i=Object.assign({name:"Demo"},{__name:"index",props:{msg:String},setup(e){return(s,o)=>(n.openBlock(),n.createElementBlock("div",_,n.toDisplayString(e.msg),1))}}),t=a(i,[["__scopeId","data-v-bd7af65f"]]);t.install=e=>{e.component(t.name,t)};exports.Demo=t;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { createElementBlock as r, openBlock as a, toDisplayString as _ } from "vue";
|
|
2
|
+
const m = (t, n) => {
|
|
3
|
+
const e = t.__vccOpts || t;
|
|
4
|
+
for (const [s, c] of n)
|
|
5
|
+
e[s] = c;
|
|
6
|
+
return e;
|
|
7
|
+
}, p = { class: "demo" }, i = /* @__PURE__ */ Object.assign({
|
|
8
|
+
name: "Demo"
|
|
9
|
+
}, {
|
|
10
|
+
__name: "index",
|
|
11
|
+
props: {
|
|
12
|
+
msg: String
|
|
13
|
+
},
|
|
14
|
+
setup(t) {
|
|
15
|
+
return (n, e) => (a(), r("div", p, _(t.msg), 1));
|
|
16
|
+
}
|
|
17
|
+
}), o = /* @__PURE__ */ m(i, [["__scopeId", "data-v-bd7af65f"]]);
|
|
18
|
+
o.install = (t) => {
|
|
19
|
+
t.component(o.name, o);
|
|
20
|
+
};
|
|
21
|
+
export {
|
|
22
|
+
o as Demo
|
|
23
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../Demo/index.js"),n=require("../CountUp/index.js"),o={Demo:t.Demo,CountUp:n.CountUp},s=u=>{Object.keys(o).forEach(c=>{const e=o[c];u.component(e.name,e)})},m={install:s};exports.Demo=t.Demo;exports.CountUp=n.CountUp;exports.default=m;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Demo as c } from "../Demo/index.mjs";
|
|
2
|
+
import { CountUp as e } from "../CountUp/index.mjs";
|
|
3
|
+
const n = { Demo: c, CountUp: e }, m = (t) => {
|
|
4
|
+
Object.keys(n).forEach((s) => {
|
|
5
|
+
const o = n[s];
|
|
6
|
+
t.component(o.name, o);
|
|
7
|
+
});
|
|
8
|
+
}, r = { install: m };
|
|
9
|
+
export {
|
|
10
|
+
e as CountUp,
|
|
11
|
+
c as Demo,
|
|
12
|
+
r as default
|
|
13
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.demo[data-v-bd7af65f]{width:200px;height:40px;background-color:#7fffd4;margin:20px}
|
package/package.json
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "geekin-devtoys",
|
|
3
|
+
"version": "0.0.2",
|
|
4
|
+
"author": "leon",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"description": "geekin-devtoys组件库",
|
|
7
|
+
"private": false,
|
|
8
|
+
"files": [
|
|
9
|
+
"lib",
|
|
10
|
+
"README.md"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"lib": "vite build && node update-exports.js"
|
|
14
|
+
},
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"vite-plugin-dts": "^4.5.4",
|
|
17
|
+
"@babel/core": "^7.12.16",
|
|
18
|
+
"core-js": "^3.8.3",
|
|
19
|
+
"file-loader": "^6.2.0",
|
|
20
|
+
"rollup-plugin-visualizer": "^6.0.1",
|
|
21
|
+
"vite-plugin-libcss": "^1.1.1",
|
|
22
|
+
"tsx": "^4.19.1"
|
|
23
|
+
},
|
|
24
|
+
"browserslist": [
|
|
25
|
+
"> 1%",
|
|
26
|
+
"last 2 versions",
|
|
27
|
+
"not dead"
|
|
28
|
+
],
|
|
29
|
+
"exports": {
|
|
30
|
+
".": {
|
|
31
|
+
"import": "./lib/index/index.mjs",
|
|
32
|
+
"require": "./lib/index/index.js"
|
|
33
|
+
},
|
|
34
|
+
"./style": {
|
|
35
|
+
"import": "./lib/index/style.css",
|
|
36
|
+
"require": "./lib/index/style.css"
|
|
37
|
+
},
|
|
38
|
+
"./CountUp": {
|
|
39
|
+
"import": "./lib/CountUp/index.mjs",
|
|
40
|
+
"require": "./lib/CountUp/index.js"
|
|
41
|
+
},
|
|
42
|
+
"./CountUp/style": {
|
|
43
|
+
"import": "./lib/CountUp/style.css",
|
|
44
|
+
"require": "./lib/CountUp/style.css"
|
|
45
|
+
},
|
|
46
|
+
"./Demo": {
|
|
47
|
+
"import": "./lib/Demo/index.mjs",
|
|
48
|
+
"require": "./lib/Demo/index.js"
|
|
49
|
+
},
|
|
50
|
+
"./Demo/style": {
|
|
51
|
+
"import": "./lib/Demo/style.css",
|
|
52
|
+
"require": "./lib/Demo/style.css"
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|