time-runner 1.0.1 → 1.0.3

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 (7) hide show
  1. package/README.md +23 -0
  2. package/dist/TimeRunner.d.ts +3 -1
  3. package/dist/index.css +1 -0
  4. package/dist/time-runner.es.js +202 -194
  5. package/dist/time-runner.umd.js +2 -1
  6. package/package.json +3 -2
  7. package/dist/time-runner.css +0 -1
package/README.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  ![时间/计时/倒计时组件](https://showscene.oss-cn-shanghai.aliyuncs.com/time-countdown.gif)
4
4
 
5
+ 地址：[功能演示-demo](http://showscene.cn/react-demo/clock)
6
+
5
7
  这是一个展示时间、计时、倒计时的组件。
6
8
  基于 React 开发。 主要功能包括：
7
9
  - 展示当前时间
@@ -73,6 +75,7 @@ showType?: string;
73
75
  * card：卡片
74
76
  * cube-v：上下翻转
75
77
  * cube-h：左右翻转
78
+ * drift：漂浮
76
79
  */
77
80
  mode?: TransMode;
78
81
  /** 倒计时结束后执行的方法 */
@@ -85,6 +88,8 @@ className?: string;
85
88
  bgColor?: string;
86
89
  /** 边框颜色 */
87
90
  borderColor?: string;
91
+ /** 文字阴影颜色值 */
92
+ textShadowColor?: string;
88
93
  ```
89
94
 
90
95
  ### 倒计时传入日期的格式
@@ -97,9 +102,27 @@ borderColor?: string;
97
102
  "YYYY/MM/DD HH:mm:ss",
98
103
  ```
99
104
 
105
+ ### React版本
106
+ ```
107
+ "react": ">=16.8.0",
108
+ "react-dom": ">=16.8.0"
109
+ ```
110
+
100
111
 
101
112
  # 更新日志
102
113
 
114
+ ## [1.0.3] - 2025-11-16
115
+ ### 更新内容
116
+ - 增加 textShadowColor（文字阴影颜色）属性
117
+ - 更新Readme内容，增加功能演示地址。
118
+
119
+
120
+ ## [1.0.2] - 2025-10-11
121
+ ### 更新内容
122
+ - 增加 mode = "drift" 效果
123
+ - 更新Readme内容
124
+
125
+
103
126
  ## [1.0.1] - 2025-10-07
104
127
  ### 更新内容
105
128
  - 更新readme内容
package/dist/TimeRunner.d.ts CHANGED
@@ -6,7 +6,7 @@
6
6
  * cube-h: 立方体左右翻转
7
7
  *
8
8
  */
9
- type TransMode = "card" | "cube-v" | "cube-h";
9
+ type TransMode = "card" | "cube-v" | "cube-h" | "drift";
10
10
  interface PropsType {
11
11
  /**
12
12
  * 显示模式，默认：default
@@ -30,6 +30,8 @@ interface PropsType {
30
30
  bgColor?: string;
31
31
  /** 边框颜色 */
32
32
  borderColor?: string;
33
+ /** 文字阴影颜色值 */
34
+ textShadowColor?: string;
33
35
  /** 倒计时结束后执行的方法 */
34
36
  finishCountFn?: Function;
35
37
  }
package/dist/index.css ADDED
@@ -0,0 +1 @@
1
+ .time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:#333;text-shadow:var(--textShadow)}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:#fff;text-shadow:var(--textShadow);overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);transform-origin:bottom;backface-visibility:hidden;border-radius:7px 7px 0 0}.clock-card .clock-f p:nth-child(2){line-height:2px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);border-radius:7px 7px 0 0}.clock-card .clock-b p:nth-child(2){line-height:2px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.cube-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.cube-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.cube-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.cube-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.cube-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.cube-h.run div{transform:rotateY(90deg);transition:var(--delay)}.drift{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative}.drift:before{content:attr(data-digit);position:absolute;top:0;left:0;line-height:var(--card-h, 80px);width:100%;text-align:center;overflow:hidden;height:100%;background-color:var(--bgColor, #333);transform-origin:center}.drift.run:before{transform:translate(var(--driftX),var(--driftY)) rotate(var(--driftRZ)) rotateX(var(--driftRX));opacity:0;transition:var(--delay);border:solid 2px var(--borderColor, #999)}
package/dist/time-runner.es.js CHANGED
@@ -1,61 +1,61 @@
1
- import { jsx as c, Fragment as et, jsxs as W } from "react/jsx-runtime";
2
- import { memo as ft, useState as ct, useRef as lt, useEffect as K } from "react";
3
- function ht(m) {
4
- return m && m.__esModule && Object.prototype.hasOwnProperty.call(m, "default") ? m.default : m;
1
+ import { jsx as o, Fragment as rt, jsxs as A } from "react/jsx-runtime";
2
+ import { memo as ft, useState as ct, useRef as lt, useMemo as ht, useEffect as K } from "react";
3
+ import './index.css';function mt($) {
4
+ return $ && $.__esModule && Object.prototype.hasOwnProperty.call($, "default") ? $.default : $;
5
5
  }
6
- var G = { exports: {} }, mt = G.exports, it;
7
- function $t() {
8
- return it || (it = 1, (function(m, d) {
9
- (function(l, v) {
10
- m.exports = v();
11
- })(mt, (function() {
12
- var l = 1e3, v = 6e4, Y = 36e5, k = "millisecond", g = "second", O = "minute", f = "hour", D = "day", x = "week", b = "month", Z = "quarter", $ = "year", S = "date", V = "Invalid Date", q = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, X = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, _ = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(s) {
6
+ var G = { exports: {} }, $t = G.exports, it;
7
+ function pt() {
8
+ return it || (it = 1, (function($, l) {
9
+ (function(d, h) {
10
+ $.exports = h();
11
+ })($t, (function() {
12
+ var d = 1e3, h = 6e4, Y = 36e5, g = "millisecond", _ = "second", S = "minute", O = "hour", b = "day", p = "week", f = "month", Z = "quarter", H = "year", M = "date", k = "Invalid Date", E = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, J = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, tt = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(s) {
13
13
  var r = ["th", "st", "nd", "rd"], t = s % 100;
14
14
  return "[" + s + (r[(t - 20) % 10] || r[t] || r[0]) + "]";
15
- } }, A = function(s, r, t) {
15
+ } }, w = function(s, r, t) {
16
16
  var n = String(s);
17
17
  return !n || n.length >= r ? s : "" + Array(r + 1 - n.length).join(t) + s;
18
- }, z = { s: A, z: function(s) {
18
+ }, q = { s: w, z: function(s) {
19
19
  var r = -s.utcOffset(), t = Math.abs(r), n = Math.floor(t / 60), e = t % 60;
20
- return (r <= 0 ? "+" : "-") + A(n, 2, "0") + ":" + A(e, 2, "0");
20
+ return (r <= 0 ? "+" : "-") + w(n, 2, "0") + ":" + w(e, 2, "0");
21
21
  }, m: function s(r, t) {
22
22
  if (r.date() < t.date()) return -s(t, r);
23
- var n = 12 * (t.year() - r.year()) + (t.month() - r.month()), e = r.clone().add(n, b), i = t - e < 0, a = r.clone().add(n + (i ? -1 : 1), b);
23
+ var n = 12 * (t.year() - r.year()) + (t.month() - r.month()), e = r.clone().add(n, f), i = t - e < 0, a = r.clone().add(n + (i ? -1 : 1), f);
24
24
  return +(-(n + (t - e) / (i ? e - a : a - e)) || 0);
25
25
  }, a: function(s) {
26
26
  return s < 0 ? Math.ceil(s) || 0 : Math.floor(s);
27
27
  }, p: function(s) {
28
- return { M: b, y: $, w: x, d: D, D: S, h: f, m: O, s: g, ms: k, Q: Z }[s] || String(s || "").toLowerCase().replace(/s$/, "");
28
+ return { M: f, y: H, w: p, d: b, D: M, h: O, m: S, s: _, ms: g, Q: Z }[s] || String(s || "").toLowerCase().replace(/s$/, "");
29
29
  }, u: function(s) {
30
30
  return s === void 0;
31
- } }, j = "en", H = {};
32
- H[j] = _;
33
- var nt = "$isDayjsObject", tt = function(s) {
34
- return s instanceof B || !(!s || !s[nt]);
35
- }, P = function s(r, t, n) {
31
+ } }, C = "en", j = {};
32
+ j[C] = tt;
33
+ var P = "$isDayjsObject", et = function(s) {
34
+ return s instanceof B || !(!s || !s[P]);
35
+ }, X = function s(r, t, n) {
36
36
  var e;
37
- if (!r) return j;
37
+ if (!r) return C;
38
38
  if (typeof r == "string") {
39
39
  var i = r.toLowerCase();
40
- H[i] && (e = i), t && (H[i] = t, e = i);
40
+ j[i] && (e = i), t && (j[i] = t, e = i);
41
41
  var a = r.split("-");
42
42
  if (!e && a.length > 1) return s(a[0]);
43
43
  } else {
44
- var o = r.name;
45
- H[o] = r, e = o;
44
+ var c = r.name;
45
+ j[c] = r, e = c;
46
46
  }
47
- return !n && e && (j = e), e || !n && j;
48
- }, p = function(s, r) {
49
- if (tt(s)) return s.clone();
47
+ return !n && e && (C = e), e || !n && C;
48
+ }, D = function(s, r) {
49
+ if (et(s)) return s.clone();
50
50
  var t = typeof r == "object" ? r : {};
51
51
  return t.date = s, t.args = arguments, new B(t);
52
- }, u = z;
53
- u.l = P, u.i = tt, u.w = function(s, r) {
54
- return p(s, { locale: r.$L, utc: r.$u, x: r.$x, $offset: r.$offset });
52
+ }, u = q;
53
+ u.l = X, u.i = et, u.w = function(s, r) {
54
+ return D(s, { locale: r.$L, utc: r.$u, x: r.$x, $offset: r.$offset });
55
55
  };
56
56
  var B = (function() {
57
57
  function s(t) {
58
- this.$L = P(t.locale, null, !0), this.parse(t), this.$x = this.$x || t.x || {}, this[nt] = !0;
58
+ this.$L = X(t.locale, null, !0), this.parse(t), this.$x = this.$x || t.x || {}, this[P] = !0;
59
59
  }
60
60
  var r = s.prototype;
61
61
  return r.parse = function(t) {
@@ -65,10 +65,10 @@ function $t() {
65
65
  if (u.u(e)) return /* @__PURE__ */ new Date();
66
66
  if (e instanceof Date) return new Date(e);
67
67
  if (typeof e == "string" && !/Z$/i.test(e)) {
68
- var a = e.match(q);
68
+ var a = e.match(E);
69
69
  if (a) {
70
- var o = a[2] - 1 || 0, h = (a[7] || "0").substring(0, 3);
71
- return i ? new Date(Date.UTC(a[1], o, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, h)) : new Date(a[1], o, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, h);
70
+ var c = a[2] - 1 || 0, m = (a[7] || "0").substring(0, 3);
71
+ return i ? new Date(Date.UTC(a[1], c, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, m)) : new Date(a[1], c, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, m);
72
72
  }
73
73
  }
74
74
  return new Date(e);
@@ -79,14 +79,14 @@ function $t() {
79
79
  }, r.$utils = function() {
80
80
  return u;
81
81
  }, r.isValid = function() {
82
- return this.$d.toString() !== V;
82
+ return this.$d.toString() !== k;
83
83
  }, r.isSame = function(t, n) {
84
- var e = p(t);
84
+ var e = D(t);
85
85
  return this.startOf(n) <= e && e <= this.endOf(n);
86
86
  }, r.isAfter = function(t, n) {
87
- return p(t) < this.startOf(n);
87
+ return D(t) < this.startOf(n);
88
88
  }, r.isBefore = function(t, n) {
89
- return this.endOf(n) < p(t);
89
+ return this.endOf(n) < D(t);
90
90
  }, r.$g = function(t, n, e) {
91
91
  return u.u(t) ? this[n] : this.set(e, t);
92
92
  }, r.unix = function() {
@@ -94,40 +94,40 @@ function $t() {
94
94
  }, r.valueOf = function() {
95
95
  return this.$d.getTime();
96
96
  }, r.startOf = function(t, n) {
97
- var e = this, i = !!u.u(n) || n, a = u.p(t), o = function(N, w) {
98
- var C = u.w(e.$u ? Date.UTC(e.$y, w, N) : new Date(e.$y, w, N), e);
99
- return i ? C : C.endOf(D);
100
- }, h = function(N, w) {
101
- return u.w(e.toDate()[N].apply(e.toDate("s"), (i ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(w)), e);
102
- }, M = this.$W, y = this.$M, T = this.$D, F = "set" + (this.$u ? "UTC" : "");
97
+ var e = this, i = !!u.u(n) || n, a = u.p(t), c = function(I, x) {
98
+ var L = u.w(e.$u ? Date.UTC(e.$y, x, I) : new Date(e.$y, x, I), e);
99
+ return i ? L : L.endOf(b);
100
+ }, m = function(I, x) {
101
+ return u.w(e.toDate()[I].apply(e.toDate("s"), (i ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(x)), e);
102
+ }, v = this.$W, y = this.$M, T = this.$D, F = "set" + (this.$u ? "UTC" : "");
103
103
  switch (a) {
104
- case $:
105
- return i ? o(1, 0) : o(31, 11);
106
- case b:
107
- return i ? o(1, y) : o(0, y + 1);
108
- case x:
109
- var L = this.$locale().weekStart || 0, R = (M < L ? M + 7 : M) - L;
110
- return o(i ? T - R : T + (6 - R), y);
111
- case D:
112
- case S:
113
- return h(F + "Hours", 0);
104
+ case H:
105
+ return i ? c(1, 0) : c(31, 11);
114
106
  case f:
115
- return h(F + "Minutes", 1);
107
+ return i ? c(1, y) : c(0, y + 1);
108
+ case p:
109
+ var N = this.$locale().weekStart || 0, R = (v < N ? v + 7 : v) - N;
110
+ return c(i ? T - R : T + (6 - R), y);
111
+ case b:
112
+ case M:
113
+ return m(F + "Hours", 0);
116
114
  case O:
117
- return h(F + "Seconds", 2);
118
- case g:
119
- return h(F + "Milliseconds", 3);
115
+ return m(F + "Minutes", 1);
116
+ case S:
117
+ return m(F + "Seconds", 2);
118
+ case _:
119
+ return m(F + "Milliseconds", 3);
120
120
  default:
121
121
  return this.clone();
122
122
  }
123
123
  }, r.endOf = function(t) {
124
124
  return this.startOf(t, !1);
125
125
  }, r.$set = function(t, n) {
126
- var e, i = u.p(t), a = "set" + (this.$u ? "UTC" : ""), o = (e = {}, e[D] = a + "Date", e[S] = a + "Date", e[b] = a + "Month", e[$] = a + "FullYear", e[f] = a + "Hours", e[O] = a + "Minutes", e[g] = a + "Seconds", e[k] = a + "Milliseconds", e)[i], h = i === D ? this.$D + (n - this.$W) : n;
127
- if (i === b || i === $) {
128
- var M = this.clone().set(S, 1);
129
- M.$d[o](h), M.init(), this.$d = M.set(S, Math.min(this.$D, M.daysInMonth())).$d;
130
- } else o && this.$d[o](h);
126
+ var e, i = u.p(t), a = "set" + (this.$u ? "UTC" : ""), c = (e = {}, e[b] = a + "Date", e[M] = a + "Date", e[f] = a + "Month", e[H] = a + "FullYear", e[O] = a + "Hours", e[S] = a + "Minutes", e[_] = a + "Seconds", e[g] = a + "Milliseconds", e)[i], m = i === b ? this.$D + (n - this.$W) : n;
127
+ if (i === f || i === H) {
128
+ var v = this.clone().set(M, 1);
129
+ v.$d[c](m), v.init(), this.$d = v.set(M, Math.min(this.$D, v.daysInMonth())).$d;
130
+ } else c && this.$d[c](m);
131
131
  return this.init(), this;
132
132
  }, r.set = function(t, n) {
133
133
  return this.clone().$set(t, n);
@@ -136,44 +136,44 @@ function $t() {
136
136
  }, r.add = function(t, n) {
137
137
  var e, i = this;
138
138
  t = Number(t);
139
- var a = u.p(n), o = function(y) {
140
- var T = p(i);
139
+ var a = u.p(n), c = function(y) {
140
+ var T = D(i);
141
141
  return u.w(T.date(T.date() + Math.round(y * t)), i);
142
142
  };
143
- if (a === b) return this.set(b, this.$M + t);
144
- if (a === $) return this.set($, this.$y + t);
145
- if (a === D) return o(1);
146
- if (a === x) return o(7);
147
- var h = (e = {}, e[O] = v, e[f] = Y, e[g] = l, e)[a] || 1, M = this.$d.getTime() + t * h;
148
- return u.w(M, this);
143
+ if (a === f) return this.set(f, this.$M + t);
144
+ if (a === H) return this.set(H, this.$y + t);
145
+ if (a === b) return c(1);
146
+ if (a === p) return c(7);
147
+ var m = (e = {}, e[S] = h, e[O] = Y, e[_] = d, e)[a] || 1, v = this.$d.getTime() + t * m;
148
+ return u.w(v, this);
149
149
  }, r.subtract = function(t, n) {
150
150
  return this.add(-1 * t, n);
151
151
  }, r.format = function(t) {
152
152
  var n = this, e = this.$locale();
153
- if (!this.isValid()) return e.invalidDate || V;
154
- var i = t || "YYYY-MM-DDTHH:mm:ssZ", a = u.z(this), o = this.$H, h = this.$m, M = this.$M, y = e.weekdays, T = e.months, F = e.meridiem, L = function(w, C, U, Q) {
155
- return w && (w[C] || w(n, i)) || U[C].slice(0, Q);
156
- }, R = function(w) {
157
- return u.s(o % 12 || 12, w, "0");
158
- }, N = F || function(w, C, U) {
159
- var Q = w < 12 ? "AM" : "PM";
160
- return U ? Q.toLowerCase() : Q;
153
+ if (!this.isValid()) return e.invalidDate || k;
154
+ var i = t || "YYYY-MM-DDTHH:mm:ssZ", a = u.z(this), c = this.$H, m = this.$m, v = this.$M, y = e.weekdays, T = e.months, F = e.meridiem, N = function(x, L, z, Q) {
155
+ return x && (x[L] || x(n, i)) || z[L].slice(0, Q);
156
+ }, R = function(x) {
157
+ return u.s(c % 12 || 12, x, "0");
158
+ }, I = F || function(x, L, z) {
159
+ var Q = x < 12 ? "AM" : "PM";
160
+ return z ? Q.toLowerCase() : Q;
161
161
  };
162
- return i.replace(X, (function(w, C) {
163
- return C || (function(U) {
164
- switch (U) {
162
+ return i.replace(J, (function(x, L) {
163
+ return L || (function(z) {
164
+ switch (z) {
165
165
  case "YY":
166
166
  return String(n.$y).slice(-2);
167
167
  case "YYYY":
168
168
  return u.s(n.$y, 4, "0");
169
169
  case "M":
170
- return M + 1;
170
+ return v + 1;
171
171
  case "MM":
172
- return u.s(M + 1, 2, "0");
172
+ return u.s(v + 1, 2, "0");
173
173
  case "MMM":
174
- return L(e.monthsShort, M, T, 3);
174
+ return N(e.monthsShort, v, T, 3);
175
175
  case "MMMM":
176
- return L(T, M);
176
+ return N(T, v);
177
177
  case "D":
178
178
  return n.$D;
179
179
  case "DD":
@@ -181,27 +181,27 @@ function $t() {
181
181
  case "d":
182
182
  return String(n.$W);
183
183
  case "dd":
184
- return L(e.weekdaysMin, n.$W, y, 2);
184
+ return N(e.weekdaysMin, n.$W, y, 2);
185
185
  case "ddd":
186
- return L(e.weekdaysShort, n.$W, y, 3);
186
+ return N(e.weekdaysShort, n.$W, y, 3);
187
187
  case "dddd":
188
188
  return y[n.$W];
189
189
  case "H":
190
- return String(o);
190
+ return String(c);
191
191
  case "HH":
192
- return u.s(o, 2, "0");
192
+ return u.s(c, 2, "0");
193
193
  case "h":
194
194
  return R(1);
195
195
  case "hh":
196
196
  return R(2);
197
197
  case "a":
198
- return N(o, h, !0);
198
+ return I(c, m, !0);
199
199
  case "A":
200
- return N(o, h, !1);
200
+ return I(c, m, !1);
201
201
  case "m":
202
- return String(h);
202
+ return String(m);
203
203
  case "mm":
204
- return u.s(h, 2, "0");
204
+ return u.s(m, 2, "0");
205
205
  case "s":
206
206
  return String(n.$s);
207
207
  case "ss":
@@ -212,50 +212,50 @@ function $t() {
212
212
  return a;
213
213
  }
214
214
  return null;
215
- })(w) || a.replace(":", "");
215
+ })(x) || a.replace(":", "");
216
216
  }));
217
217
  }, r.utcOffset = function() {
218
218
  return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
219
219
  }, r.diff = function(t, n, e) {
220
- var i, a = this, o = u.p(n), h = p(t), M = (h.utcOffset() - this.utcOffset()) * v, y = this - h, T = function() {
221
- return u.m(a, h);
220
+ var i, a = this, c = u.p(n), m = D(t), v = (m.utcOffset() - this.utcOffset()) * h, y = this - m, T = function() {
221
+ return u.m(a, m);
222
222
  };
223
- switch (o) {
224
- case $:
223
+ switch (c) {
224
+ case H:
225
225
  i = T() / 12;
226
226
  break;
227
- case b:
227
+ case f:
228
228
  i = T();
229
229
  break;
230
230
  case Z:
231
231
  i = T() / 3;
232
232
  break;
233
- case x:
234
- i = (y - M) / 6048e5;
233
+ case p:
234
+ i = (y - v) / 6048e5;
235
235
  break;
236
- case D:
237
- i = (y - M) / 864e5;
236
+ case b:
237
+ i = (y - v) / 864e5;
238
238
  break;
239
- case f:
239
+ case O:
240
240
  i = y / Y;
241
241
  break;
242
- case O:
243
- i = y / v;
242
+ case S:
243
+ i = y / h;
244
244
  break;
245
- case g:
246
- i = y / l;
245
+ case _:
246
+ i = y / d;
247
247
  break;
248
248
  default:
249
249
  i = y;
250
250
  }
251
251
  return e ? i : u.a(i);
252
252
  }, r.daysInMonth = function() {
253
- return this.endOf(b).$D;
253
+ return this.endOf(f).$D;
254
254
  }, r.$locale = function() {
255
- return H[this.$L];
255
+ return j[this.$L];
256
256
  }, r.locale = function(t, n) {
257
257
  if (!t) return this.$L;
258
- var e = this.clone(), i = P(t, n, !0);
258
+ var e = this.clone(), i = X(t, n, !0);
259
259
  return i && (e.$L = i), e;
260
260
  }, r.clone = function() {
261
261
  return u.w(this.$d, this);
@@ -269,125 +269,133 @@ function $t() {
269
269
  return this.$d.toUTCString();
270
270
  }, s;
271
271
  })(), st = B.prototype;
272
- return p.prototype = st, [["$ms", k], ["$s", g], ["$m", O], ["$H", f], ["$W", D], ["$M", b], ["$y", $], ["$D", S]].forEach((function(s) {
272
+ return D.prototype = st, [["$ms", g], ["$s", _], ["$m", S], ["$H", O], ["$W", b], ["$M", f], ["$y", H], ["$D", M]].forEach((function(s) {
273
273
  st[s[1]] = function(r) {
274
274
  return this.$g(r, s[0], s[1]);
275
275
  };
276
- })), p.extend = function(s, r) {
277
- return s.$i || (s(r, B, p), s.$i = !0), p;
278
- }, p.locale = P, p.isDayjs = tt, p.unix = function(s) {
279
- return p(1e3 * s);
280
- }, p.en = H[j], p.Ls = H, p.p = {}, p;
276
+ })), D.extend = function(s, r) {
277
+ return s.$i || (s(r, B, D), s.$i = !0), D;
278
+ }, D.locale = X, D.isDayjs = et, D.unix = function(s) {
279
+ return D(1e3 * s);
280
+ }, D.en = j[C], D.Ls = j, D.p = {}, D;
281
281
  }));
282
282
  })(G)), G.exports;
283
283
  }
284
- var pt = $t();
285
- const J = /* @__PURE__ */ ht(pt), E = 60, Mt = [
284
+ var Mt = pt();
285
+ const U = /* @__PURE__ */ mt(Mt), V = 60, Dt = [
286
286
  "YYYY-MM-DD",
287
287
  "YYYY/MM/DD",
288
288
  "YYYY-MM-DD HH:mm",
289
289
  "YYYY/MM/DD HH:mm",
290
290
  "YYYY-MM-DD HH:mm:ss",
291
291
  "YYYY/MM/DD HH:mm:ss"
292
- ], at = (m) => {
293
- if (!rt(m))
292
+ ], at = ($) => {
293
+ if (!nt($))
294
294
  return "00:00:00";
295
- const d = J(m).diff(J());
296
- if (d <= 0)
295
+ const l = U($).diff(U());
296
+ if (l <= 0)
297
297
  return "00:00:00";
298
- const l = Math.floor(d / 1e3), v = Math.floor(l / 86400), Y = Math.floor(l % 86400 / 3600), k = Math.floor(l % 3600 / 60), g = l % 60;
299
- return `${v ? `${v}:` : ""}${`${Y}`.padStart(2, "0")}:${`${k}`.padStart(2, "0")}:${`${g}`.padStart(2, "0")}`;
300
- }, ut = (m) => {
301
- const d = (l) => `${l}`.padStart(2, "0");
302
- return `${d(Math.floor(m / E / E))}:${d(Math.floor(m / E) % E)}:${d(m % E)}`;
303
- }, rt = (m) => Mt.some((d) => J(m, d, !0).isValid()), ot = "HH:mm:ss", dt = 900, gt = (m) => {
304
- const { mode: d, showType: l = "default", size: v = 40, className: Y, bgColor: k, borderColor: g, finishCountFn: O } = m, [f, D] = ct(
305
- l === "count" ? ut(0) : l === "default" ? J().format(ot) : at(l)
306
- ), x = lt({
298
+ const d = Math.floor(l / 1e3), h = Math.floor(d / 86400), Y = Math.floor(d % 86400 / 3600), g = Math.floor(d % 3600 / 60), _ = d % 60;
299
+ return `${h ? `${h}:` : ""}${`${Y}`.padStart(2, "0")}:${`${g}`.padStart(2, "0")}:${`${_}`.padStart(2, "0")}`;
300
+ }, ut = ($) => {
301
+ const l = (d) => `${d}`.padStart(2, "0");
302
+ return `${l(Math.floor($ / V / V))}:${l(Math.floor($ / V) % V)}:${l($ % V)}`;
303
+ }, nt = ($) => Dt.some((l) => U($, l, !0).isValid()), ot = "HH:mm:ss", dt = 900, St = ($) => {
304
+ const { mode: l, showType: d = "default", size: h = 40, className: Y, bgColor: g, borderColor: _, textShadowColor: S, finishCountFn: O } = $, [b, p] = ct(
305
+ d === "count" ? ut(0) : d === "default" ? U().format(ot) : at(d)
306
+ ), f = lt({
307
307
  t: null
308
- }), b = {
309
- "--card-size": `${v}px`,
310
- "--card-w": `${v * 1.25}px`,
311
- "--card-h": `${v * 2}px`,
308
+ }), Z = {
309
+ "--card-size": `${h}px`,
310
+ "--card-w": `${h * 1.25}px`,
311
+ "--card-h": `${h * 2}px`,
312
312
  // 下面两个必须是一个确定的数字，不能是表达式
313
- "--transx": `${-v * 1.25 / 2}px`,
314
- "--transy": `${-v}px`,
313
+ "--transx": `${-h * 1.25 / 2}px`,
314
+ "--transy": `${-h}px`,
315
315
  "--delay": `${dt / 1e3}s`,
316
- "--bgColor": k,
317
- "--borderColor": g
316
+ "--bgColor": g,
317
+ "--borderColor": _,
318
+ "--textShadow": S ? `1px 2px 3px ${S}` : "none"
318
319
  };
319
320
  K(() => {
320
- let $ = Date.now();
321
- x.current.t && (clearInterval(x.current.t), x.current.t = null, $ = Date.now()), x.current.t = setInterval(() => {
322
- let S = () => "";
323
- l === "count" ? S = () => ut(Math.floor((Date.now() - $) / 1e3)) : l === "default" ? S = () => J().format(ot) : S = () => at(l), D(S());
321
+ let M = Date.now();
322
+ f.current.t && (clearInterval(f.current.t), f.current.t = null, M = Date.now()), f.current.t = setInterval(() => {
323
+ let k = () => "";
324
+ d === "count" ? k = () => ut(Math.floor((Date.now() - M) / 1e3)) : d === "default" ? k = () => U().format(ot) : k = () => at(d), p(k());
324
325
  }, 1e3);
325
- }, [l]), K(() => {
326
- rt(l) && f === "00:00:00" && O && setTimeout(() => {
326
+ }, [d]), K(() => {
327
+ nt(d) && b === "00:00:00" && O && setTimeout(() => {
327
328
  O();
328
329
  }, 1e3);
329
- }, [f, l, O]);
330
- const Z = () => {
331
- if (!f)
330
+ }, [b, d, O]);
331
+ const H = () => {
332
+ if (!b)
332
333
  return null;
333
- const $ = f.split(":"), S = $[$.length - 3].split(""), V = $[$.length - 2].split(""), q = $[$.length - 1].split(""), X = $.length === 4 ? $[0].split("") : [], _ = rt(l), A = X.map((j, H) => /* @__PURE__ */ c(I, { mode: d, time: +j, limit: _ ? -9 : 9 }, H)), z = /* @__PURE__ */ c("span", { children: ":" });
334
- return /* @__PURE__ */ W(et, { children: [
335
- A.length ? /* @__PURE__ */ W(et, { children: [
336
- A,
337
- _ ? /* @__PURE__ */ c("p", { children: "天" }) : z
334
+ const M = b.split(":"), k = M[M.length - 3].split(""), E = M[M.length - 2].split(""), J = M[M.length - 1].split(""), tt = M.length === 4 ? M[0].split("") : [], w = nt(d), q = tt.map((j, P) => /* @__PURE__ */ o(W, { mode: l, time: +j, limit: w ? -9 : 9, size: h }, P)), C = /* @__PURE__ */ o("span", { children: ":" });
335
+ return /* @__PURE__ */ A(rt, { children: [
336
+ q.length ? /* @__PURE__ */ A(rt, { children: [
337
+ q,
338
+ w ? /* @__PURE__ */ o("p", { children: "天" }) : C
338
339
  ] }) : null,
339
- /* @__PURE__ */ c(I, { mode: d, time: +S[0], limit: _ ? -2 : 2 }),
340
- /* @__PURE__ */ c(I, { mode: d, time: +S[1], limit: _ ? -9 : 9 }),
341
- _ ? /* @__PURE__ */ c("p", { children: "小时" }) : z,
342
- /* @__PURE__ */ c(I, { mode: d, time: +V[0], limit: _ ? -5 : 5 }),
343
- /* @__PURE__ */ c(I, { mode: d, time: +V[1], limit: _ ? -9 : 9 }),
344
- _ ? /* @__PURE__ */ c("p", { children: "分" }) : z,
345
- /* @__PURE__ */ c(I, { mode: d, time: +q[0], limit: _ ? -5 : 5 }),
346
- /* @__PURE__ */ c(I, { mode: d, time: +q[1], limit: _ ? -9 : 9 }),
347
- _ && /* @__PURE__ */ c("p", { children: "秒" })
340
+ /* @__PURE__ */ o(W, { mode: l, time: +k[0], limit: w ? -2 : 2, size: h }),
341
+ /* @__PURE__ */ o(W, { mode: l, time: +k[1], limit: w ? -9 : 9, size: h }),
342
+ w ? /* @__PURE__ */ o("p", { children: "小时" }) : C,
343
+ /* @__PURE__ */ o(W, { mode: l, time: +E[0], limit: w ? -5 : 5, size: h }),
344
+ /* @__PURE__ */ o(W, { mode: l, time: +E[1], limit: w ? -9 : 9, size: h }),
345
+ w ? /* @__PURE__ */ o("p", { children: "分" }) : C,
346
+ /* @__PURE__ */ o(W, { mode: l, time: +J[0], limit: w ? -5 : 5, size: h }),
347
+ /* @__PURE__ */ o(W, { mode: l, time: +J[1], limit: w ? -9 : 9, size: h }),
348
+ w && /* @__PURE__ */ o("p", { children: "秒" })
348
349
  ] });
349
350
  };
350
- return /* @__PURE__ */ c("div", { className: `time-runner ${Y || ""}`, style: b, children: Z() });
351
- }, Dt = (m) => {
352
- const { time: d, limit: l, mode: v } = m, [Y, k] = ct(!1), g = lt({
353
- t: d
354
- });
351
+ return /* @__PURE__ */ o("div", { className: `time-runner ${Y || ""}`, style: Z, children: H() });
352
+ }, vt = ($) => {
353
+ const { time: l, limit: d, mode: h, size: Y } = $, [g, _] = ct(!1), S = lt({
354
+ t: l
355
+ }), O = ht(() => l !== S.current.t ? {
356
+ "--driftX": `${Math.floor(Math.random() * (-Y - Y + 1)) + Y}px`,
357
+ "--driftY": `${Math.floor(Math.random() * (-Y * 2 - Y * 2 + 1)) + Y * 2}px`,
358
+ "--driftRZ": `${Math.floor(Math.random() * 151) + 50}deg`,
359
+ "--driftRX": `${Math.floor(Math.random() * 151) + 50}deg`
360
+ } : null, [l, Y]);
355
361
  return K(() => {
356
- d !== g.current.t && k(!0);
357
- }, [d]), K(() => {
358
- Y && setTimeout(() => {
359
- g.current.t = d, k(!1);
362
+ l !== S.current.t && _(!0);
363
+ }, [l]), K(() => {
364
+ g && setTimeout(() => {
365
+ S.current.t = l, _(!1);
360
366
  }, dt);
361
- }, [Y, d]), /* @__PURE__ */ c(et, { children: (() => {
362
- const { t: f } = g.current;
363
- let D = f;
364
- switch (l > 0 ? D = f >= l ? 0 : f + 1 : D = f <= 0 ? Math.abs(l) : f - 1, v) {
367
+ }, [g, l]), /* @__PURE__ */ o(rt, { children: (() => {
368
+ const { t: p } = S.current;
369
+ let f = p;
370
+ switch (d > 0 ? f = p >= d ? 0 : p + 1 : f = p <= 0 ? Math.abs(d) : p - 1, h) {
365
371
  case "card":
366
- return /* @__PURE__ */ W("div", { className: "clock-card", children: [
367
- /* @__PURE__ */ W("div", { className: `clock-b ${Y ? "run" : ""}`, children: [
368
- /* @__PURE__ */ c("p", { children: D }),
369
- /* @__PURE__ */ c("p", { children: D })
372
+ return /* @__PURE__ */ A("div", { className: "clock-card", children: [
373
+ /* @__PURE__ */ A("div", { className: `clock-b ${g ? "run" : ""}`, children: [
374
+ /* @__PURE__ */ o("p", { children: f }),
375
+ /* @__PURE__ */ o("p", { children: f })
370
376
  ] }),
371
- /* @__PURE__ */ W("div", { className: `clock-f ${Y ? "run" : ""}`, children: [
372
- /* @__PURE__ */ c("p", { children: f }),
373
- /* @__PURE__ */ c("p", { children: f })
377
+ /* @__PURE__ */ A("div", { className: `clock-f ${g ? "run" : ""}`, children: [
378
+ /* @__PURE__ */ o("p", { children: p }),
379
+ /* @__PURE__ */ o("p", { children: p })
374
380
  ] })
375
381
  ] });
376
382
  case "cube-v":
377
- return /* @__PURE__ */ c("div", { className: `clock-cube-3d-v ${Y ? "run" : ""}`, children: /* @__PURE__ */ W("div", { children: [
378
- /* @__PURE__ */ c("p", { children: D }),
379
- /* @__PURE__ */ c("p", { children: f })
383
+ return /* @__PURE__ */ o("div", { className: `cube-v ${g ? "run" : ""}`, children: /* @__PURE__ */ A("div", { children: [
384
+ /* @__PURE__ */ o("p", { children: f }),
385
+ /* @__PURE__ */ o("p", { children: p })
380
386
  ] }) });
381
387
  case "cube-h":
382
- return /* @__PURE__ */ c("div", { className: `clock-cube-3d-h ${Y ? "run" : ""}`, children: /* @__PURE__ */ W("div", { children: [
383
- /* @__PURE__ */ c("p", { children: D }),
384
- /* @__PURE__ */ c("p", { children: f })
388
+ return /* @__PURE__ */ o("div", { className: `cube-h ${g ? "run" : ""}`, children: /* @__PURE__ */ A("div", { children: [
389
+ /* @__PURE__ */ o("p", { children: f }),
390
+ /* @__PURE__ */ o("p", { children: p })
385
391
  ] }) });
392
+ case "drift":
393
+ return /* @__PURE__ */ o("div", { className: `drift ${g ? "run" : ""}`, "data-digit": p, style: O, children: f });
386
394
  default:
387
- return /* @__PURE__ */ c("div", { children: /* @__PURE__ */ c("p", { children: f }) });
395
+ return /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o("p", { children: p }) });
388
396
  }
389
397
  })() });
390
- }, I = ft(Dt);
398
+ }, W = ft(vt);
391
399
  export {
392
- gt as TimeRunner
400
+ St as TimeRunner
393
401
  };
package/dist/time-runner.umd.js CHANGED
@@ -1 +1,2 @@
1
- (function(j,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],o):(j=typeof globalThis<"u"?globalThis:j||self,o(j["time-runner"]={},j.jsxRuntime,j.React))})(this,(function(j,o,H){"use strict";function ut($){return $&&$.__esModule&&Object.prototype.hasOwnProperty.call($,"default")?$.default:$}var P={exports:{}},ft=P.exports,rt;function lt(){return rt||(rt=1,(function($,l){(function(f,v){$.exports=v()})(ft,(function(){var f=1e3,v=6e4,Y=36e5,x="millisecond",g="second",b="minute",d="hour",D="day",k="week",O="month",B="quarter",m="year",S="date",z="Invalid Date",Q=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,tt=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,T={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(s){var r=["th","st","nd","rd"],t=s%100;return"["+s+(r[(t-20)%10]||r[t]||r[0])+"]"}},A=function(s,r,t){var n=String(s);return!n||n.length>=r?s:""+Array(r+1-n.length).join(t)+s},U={s:A,z:function(s){var r=-s.utcOffset(),t=Math.abs(r),n=Math.floor(t/60),e=t%60;return(r<=0?"+":"-")+A(n,2,"0")+":"+A(e,2,"0")},m:function s(r,t){if(r.date()<t.date())return-s(t,r);var n=12*(t.year()-r.year())+(t.month()-r.month()),e=r.clone().add(n,O),i=t-e<0,a=r.clone().add(n+(i?-1:1),O);return+(-(n+(t-e)/(i?e-a:a-e))||0)},a:function(s){return s<0?Math.ceil(s)||0:Math.floor(s)},p:function(s){return{M:O,y:m,w:k,d:D,D:S,h:d,m:b,s:g,ms:x,Q:B}[s]||String(s||"").toLowerCase().replace(/s$/,"")},u:function(s){return s===void 0}},F="en",C={};C[F]=T;var ot="$isDayjsObject",et=function(s){return s instanceof K||!(!s||!s[ot])},G=function s(r,t,n){var e;if(!r)return F;if(typeof r=="string"){var i=r.toLowerCase();C[i]&&(e=i),t&&(C[i]=t,e=i);var a=r.split("-");if(!e&&a.length>1)return s(a[0])}else{var u=r.name;C[u]=r,e=u}return!n&&e&&(F=e),e||!n&&F},p=function(s,r){if(et(s))return s.clone();var t=typeof r=="object"?r:{};return t.date=s,t.args=arguments,new K(t)},c=U;c.l=G,c.i=et,c.w=function(s,r){return p(s,{locale:r.$L,utc:r.$u,x:r.$x,$offset:r.$offset})};var K=(function(){function s(t){this.$L=G(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[ot]=!0}var r=s.prototype;return r.parse=function(t){this.$d=(function(n){var e=n.date,i=n.utc;if(e===null)return new Date(NaN);if(c.u(e))return new Date;if(e instanceof Date)return new Date(e);if(typeof e=="string"&&!/Z$/i.test(e)){var a=e.match(Q);if(a){var u=a[2]-1||0,h=(a[7]||"0").substring(0,3);return i?new Date(Date.UTC(a[1],u,a[3]||1,a[4]||0,a[5]||0,a[6]||0,h)):new Date(a[1],u,a[3]||1,a[4]||0,a[5]||0,a[6]||0,h)}}return new Date(e)})(t),this.init()},r.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},r.$utils=function(){return c},r.isValid=function(){return this.$d.toString()!==z},r.isSame=function(t,n){var e=p(t);return this.startOf(n)<=e&&e<=this.endOf(n)},r.isAfter=function(t,n){return p(t)<this.startOf(n)},r.isBefore=function(t,n){return this.endOf(n)<p(t)},r.$g=function(t,n,e){return c.u(t)?this[n]:this.set(e,t)},r.unix=function(){return Math.floor(this.valueOf()/1e3)},r.valueOf=function(){return this.$d.getTime()},r.startOf=function(t,n){var e=this,i=!!c.u(n)||n,a=c.p(t),u=function(W,w){var L=c.w(e.$u?Date.UTC(e.$y,w,W):new Date(e.$y,w,W),e);return i?L:L.endOf(D)},h=function(W,w){return c.w(e.toDate()[W].apply(e.toDate("s"),(i?[0,0,0,0]:[23,59,59,999]).slice(w)),e)},M=this.$W,y=this.$M,_=this.$D,E="set"+(this.$u?"UTC":"");switch(a){case m:return i?u(1,0):u(31,11);case O:return i?u(1,y):u(0,y+1);case k:var I=this.$locale().weekStart||0,J=(M<I?M+7:M)-I;return u(i?_-J:_+(6-J),y);case D:case S:return h(E+"Hours",0);case d:return h(E+"Minutes",1);case b:return h(E+"Seconds",2);case g:return h(E+"Milliseconds",3);default:return this.clone()}},r.endOf=function(t){return this.startOf(t,!1)},r.$set=function(t,n){var e,i=c.p(t),a="set"+(this.$u?"UTC":""),u=(e={},e[D]=a+"Date",e[S]=a+"Date",e[O]=a+"Month",e[m]=a+"FullYear",e[d]=a+"Hours",e[b]=a+"Minutes",e[g]=a+"Seconds",e[x]=a+"Milliseconds",e)[i],h=i===D?this.$D+(n-this.$W):n;if(i===O||i===m){var M=this.clone().set(S,1);M.$d[u](h),M.init(),this.$d=M.set(S,Math.min(this.$D,M.daysInMonth())).$d}else u&&this.$d[u](h);return this.init(),this},r.set=function(t,n){return this.clone().$set(t,n)},r.get=function(t){return this[c.p(t)]()},r.add=function(t,n){var e,i=this;t=Number(t);var a=c.p(n),u=function(y){var _=p(i);return c.w(_.date(_.date()+Math.round(y*t)),i)};if(a===O)return this.set(O,this.$M+t);if(a===m)return this.set(m,this.$y+t);if(a===D)return u(1);if(a===k)return u(7);var h=(e={},e[b]=v,e[d]=Y,e[g]=f,e)[a]||1,M=this.$d.getTime()+t*h;return c.w(M,this)},r.subtract=function(t,n){return this.add(-1*t,n)},r.format=function(t){var n=this,e=this.$locale();if(!this.isValid())return e.invalidDate||z;var i=t||"YYYY-MM-DDTHH:mm:ssZ",a=c.z(this),u=this.$H,h=this.$m,M=this.$M,y=e.weekdays,_=e.months,E=e.meridiem,I=function(w,L,Z,X){return w&&(w[L]||w(n,i))||Z[L].slice(0,X)},J=function(w){return c.s(u%12||12,w,"0")},W=E||function(w,L,Z){var X=w<12?"AM":"PM";return Z?X.toLowerCase():X};return i.replace(tt,(function(w,L){return L||(function(Z){switch(Z){case"YY":return String(n.$y).slice(-2);case"YYYY":return c.s(n.$y,4,"0");case"M":return M+1;case"MM":return c.s(M+1,2,"0");case"MMM":return I(e.monthsShort,M,_,3);case"MMMM":return I(_,M);case"D":return n.$D;case"DD":return c.s(n.$D,2,"0");case"d":return String(n.$W);case"dd":return I(e.weekdaysMin,n.$W,y,2);case"ddd":return I(e.weekdaysShort,n.$W,y,3);case"dddd":return y[n.$W];case"H":return String(u);case"HH":return c.s(u,2,"0");case"h":return J(1);case"hh":return J(2);case"a":return W(u,h,!0);case"A":return W(u,h,!1);case"m":return String(h);case"mm":return c.s(h,2,"0");case"s":return String(n.$s);case"ss":return c.s(n.$s,2,"0");case"SSS":return c.s(n.$ms,3,"0");case"Z":return a}return null})(w)||a.replace(":","")}))},r.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},r.diff=function(t,n,e){var i,a=this,u=c.p(n),h=p(t),M=(h.utcOffset()-this.utcOffset())*v,y=this-h,_=function(){return c.m(a,h)};switch(u){case m:i=_()/12;break;case O:i=_();break;case B:i=_()/3;break;case k:i=(y-M)/6048e5;break;case D:i=(y-M)/864e5;break;case d:i=y/Y;break;case b:i=y/v;break;case g:i=y/f;break;default:i=y}return e?i:c.a(i)},r.daysInMonth=function(){return this.endOf(O).$D},r.$locale=function(){return C[this.$L]},r.locale=function(t,n){if(!t)return this.$L;var e=this.clone(),i=G(t,n,!0);return i&&(e.$L=i),e},r.clone=function(){return c.w(this.$d,this)},r.toDate=function(){return new Date(this.valueOf())},r.toJSON=function(){return this.isValid()?this.toISOString():null},r.toISOString=function(){return this.$d.toISOString()},r.toString=function(){return this.$d.toUTCString()},s})(),ct=K.prototype;return p.prototype=ct,[["$ms",x],["$s",g],["$m",b],["$H",d],["$W",D],["$M",O],["$y",m],["$D",S]].forEach((function(s){ct[s[1]]=function(r){return this.$g(r,s[0],s[1])}})),p.extend=function(s,r){return s.$i||(s(r,K,p),s.$i=!0),p},p.locale=G,p.isDayjs=et,p.unix=function(s){return p(1e3*s)},p.en=C[F],p.Ls=C,p.p={},p}))})(P)),P.exports}var dt=lt();const V=ut(dt),q=60,ht=["YYYY-MM-DD","YYYY/MM/DD","YYYY-MM-DD HH:mm","YYYY/MM/DD HH:mm","YYYY-MM-DD HH:mm:ss","YYYY/MM/DD HH:mm:ss"],nt=$=>{if(!R($))return"00:00:00";const l=V($).diff(V());if(l<=0)return"00:00:00";const f=Math.floor(l/1e3),v=Math.floor(f/86400),Y=Math.floor(f%86400/3600),x=Math.floor(f%3600/60),g=f%60;return`${v?`${v}:`:""}${`${Y}`.padStart(2,"0")}:${`${x}`.padStart(2,"0")}:${`${g}`.padStart(2,"0")}`},st=$=>{const l=f=>`${f}`.padStart(2,"0");return`${l(Math.floor($/q/q))}:${l(Math.floor($/q)%q)}:${l($%q)}`},R=$=>ht.some(l=>V($,l,!0).isValid()),it="HH:mm:ss",at=900,$t=$=>{const{mode:l,showType:f="default",size:v=40,className:Y,bgColor:x,borderColor:g,finishCountFn:b}=$,[d,D]=H.useState(f==="count"?st(0):f==="default"?V().format(it):nt(f)),k=H.useRef({t:null}),O={"--card-size":`${v}px`,"--card-w":`${v*1.25}px`,"--card-h":`${v*2}px`,"--transx":`${-v*1.25/2}px`,"--transy":`${-v}px`,"--delay":`${at/1e3}s`,"--bgColor":x,"--borderColor":g};H.useEffect(()=>{let m=Date.now();k.current.t&&(clearInterval(k.current.t),k.current.t=null,m=Date.now()),k.current.t=setInterval(()=>{let S=()=>"";f==="count"?S=()=>st(Math.floor((Date.now()-m)/1e3)):f==="default"?S=()=>V().format(it):S=()=>nt(f),D(S())},1e3)},[f]),H.useEffect(()=>{R(f)&&d==="00:00:00"&&b&&setTimeout(()=>{b()},1e3)},[d,f,b]);const B=()=>{if(!d)return null;const m=d.split(":"),S=m[m.length-3].split(""),z=m[m.length-2].split(""),Q=m[m.length-1].split(""),tt=m.length===4?m[0].split(""):[],T=R(f),A=tt.map((F,C)=>o.jsx(N,{mode:l,time:+F,limit:T?-9:9},C)),U=o.jsx("span",{children:":"});return o.jsxs(o.Fragment,{children:[A.length?o.jsxs(o.Fragment,{children:[A,T?o.jsx("p",{children:"天"}):U]}):null,o.jsx(N,{mode:l,time:+S[0],limit:T?-2:2}),o.jsx(N,{mode:l,time:+S[1],limit:T?-9:9}),T?o.jsx("p",{children:"小时"}):U,o.jsx(N,{mode:l,time:+z[0],limit:T?-5:5}),o.jsx(N,{mode:l,time:+z[1],limit:T?-9:9}),T?o.jsx("p",{children:"分"}):U,o.jsx(N,{mode:l,time:+Q[0],limit:T?-5:5}),o.jsx(N,{mode:l,time:+Q[1],limit:T?-9:9}),T&&o.jsx("p",{children:"秒"})]})};return o.jsx("div",{className:`time-runner ${Y||""}`,style:O,children:B()})},mt=$=>{const{time:l,limit:f,mode:v}=$,[Y,x]=H.useState(!1),g=H.useRef({t:l});H.useEffect(()=>{l!==g.current.t&&x(!0)},[l]),H.useEffect(()=>{Y&&setTimeout(()=>{g.current.t=l,x(!1)},at)},[Y,l]);const b=()=>{const{t:d}=g.current;let D=d;switch(f>0?D=d>=f?0:d+1:D=d<=0?Math.abs(f):d-1,v){case"card":return o.jsxs("div",{className:"clock-card",children:[o.jsxs("div",{className:`clock-b ${Y?"run":""}`,children:[o.jsx("p",{children:D}),o.jsx("p",{children:D})]}),o.jsxs("div",{className:`clock-f ${Y?"run":""}`,children:[o.jsx("p",{children:d}),o.jsx("p",{children:d})]})]});case"cube-v":return o.jsx("div",{className:`clock-cube-3d-v ${Y?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:D}),o.jsx("p",{children:d})]})});case"cube-h":return o.jsx("div",{className:`clock-cube-3d-h ${Y?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:D}),o.jsx("p",{children:d})]})});default:return o.jsx("div",{children:o.jsx("p",{children:d})})}};return o.jsx(o.Fragment,{children:b()})},N=H.memo(mt);j.TimeRunner=$t,Object.defineProperty(j,Symbol.toStringTag,{value:"Module"})}));
1
+ (function(L,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],o):(L=typeof globalThis<"u"?globalThis:L||self,o(L["time-runner"]={},L.jsxRuntime,L.React))})(this,(function(L,o,O){"use strict";var nt=document.createElement("style");nt.textContent=`.time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:#333;text-shadow:var(--textShadow)}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:#fff;text-shadow:var(--textShadow);overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);transform-origin:bottom;backface-visibility:hidden;border-radius:7px 7px 0 0}.clock-card .clock-f p:nth-child(2){line-height:2px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);border-radius:7px 7px 0 0}.clock-card .clock-b p:nth-child(2){line-height:2px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.cube-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.cube-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.cube-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.cube-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.cube-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.cube-h.run div{transform:rotateY(90deg);transition:var(--delay)}.drift{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative}.drift:before{content:attr(data-digit);position:absolute;top:0;left:0;line-height:var(--card-h, 80px);width:100%;text-align:center;overflow:hidden;height:100%;background-color:var(--bgColor, #333);transform-origin:center}.drift.run:before{transform:translate(var(--driftX),var(--driftY)) rotate(var(--driftRZ)) rotateX(var(--driftRX));opacity:0;transition:var(--delay);border:solid 2px var(--borderColor, #999)}
2
+ /*$vite$:1*/`,document.head.appendChild(nt);function lt(v){return v&&v.__esModule&&Object.prototype.hasOwnProperty.call(v,"default")?v.default:v}var q={exports:{}},ut=q.exports,it;function ht(){return it||(it=1,(function(v,l){(function(u,f){v.exports=f()})(ut,(function(){var u=1e3,f=6e4,k=36e5,M="millisecond",Y="second",y="minute",C="hour",w="day",m="week",h="month",U="quarter",T="year",$="date",H="Invalid Date",J=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,P=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,rt={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(i){var e=["th","st","nd","rd"],t=i%100;return"["+i+(e[(t-20)%10]||e[t]||e[0])+"]"}},D=function(i,e,t){var n=String(i);return!n||n.length>=e?i:""+Array(e+1-n.length).join(t)+i},B={s:D,z:function(i){var e=-i.utcOffset(),t=Math.abs(e),n=Math.floor(t/60),r=t%60;return(e<=0?"+":"-")+D(n,2,"0")+":"+D(r,2,"0")},m:function i(e,t){if(e.date()<t.date())return-i(t,e);var n=12*(t.year()-e.year())+(t.month()-e.month()),r=e.clone().add(n,h),a=t-r<0,s=e.clone().add(n+(a?-1:1),h);return+(-(n+(t-r)/(a?r-s:s-r))||0)},a:function(i){return i<0?Math.ceil(i)||0:Math.floor(i)},p:function(i){return{M:h,y:T,w:m,d:w,D:$,h:C,m:y,s:Y,ms:M,Q:U}[i]||String(i||"").toLowerCase().replace(/s$/,"")},u:function(i){return i===void 0}},z="en",j={};j[z]=rt;var Q="$isDayjsObject",et=function(i){return i instanceof K||!(!i||!i[Q])},G=function i(e,t,n){var r;if(!e)return z;if(typeof e=="string"){var a=e.toLowerCase();j[a]&&(r=a),t&&(j[a]=t,r=a);var s=e.split("-");if(!r&&s.length>1)return i(s[0])}else{var d=e.name;j[d]=e,r=d}return!n&&r&&(z=r),r||!n&&z},x=function(i,e){if(et(i))return i.clone();var t=typeof e=="object"?e:{};return t.date=i,t.args=arguments,new K(t)},c=B;c.l=G,c.i=et,c.w=function(i,e){return x(i,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var K=(function(){function i(t){this.$L=G(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[Q]=!0}var e=i.prototype;return e.parse=function(t){this.$d=(function(n){var r=n.date,a=n.utc;if(r===null)return new Date(NaN);if(c.u(r))return new Date;if(r instanceof Date)return new Date(r);if(typeof r=="string"&&!/Z$/i.test(r)){var s=r.match(J);if(s){var d=s[2]-1||0,p=(s[7]||"0").substring(0,3);return a?new Date(Date.UTC(s[1],d,s[3]||1,s[4]||0,s[5]||0,s[6]||0,p)):new Date(s[1],d,s[3]||1,s[4]||0,s[5]||0,s[6]||0,p)}}return new Date(r)})(t),this.init()},e.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},e.$utils=function(){return c},e.isValid=function(){return this.$d.toString()!==H},e.isSame=function(t,n){var r=x(t);return this.startOf(n)<=r&&r<=this.endOf(n)},e.isAfter=function(t,n){return x(t)<this.startOf(n)},e.isBefore=function(t,n){return this.endOf(n)<x(t)},e.$g=function(t,n,r){return c.u(t)?this[n]:this.set(r,t)},e.unix=function(){return Math.floor(this.valueOf()/1e3)},e.valueOf=function(){return this.$d.getTime()},e.startOf=function(t,n){var r=this,a=!!c.u(n)||n,s=c.p(t),d=function(I,S){var N=c.w(r.$u?Date.UTC(r.$y,S,I):new Date(r.$y,S,I),r);return a?N:N.endOf(w)},p=function(I,S){return c.w(r.toDate()[I].apply(r.toDate("s"),(a?[0,0,0,0]:[23,59,59,999]).slice(S)),r)},b=this.$W,g=this.$M,_=this.$D,W="set"+(this.$u?"UTC":"");switch(s){case T:return a?d(1,0):d(31,11);case h:return a?d(1,g):d(0,g+1);case m:var F=this.$locale().weekStart||0,V=(b<F?b+7:b)-F;return d(a?_-V:_+(6-V),g);case w:case $:return p(W+"Hours",0);case C:return p(W+"Minutes",1);case y:return p(W+"Seconds",2);case Y:return p(W+"Milliseconds",3);default:return this.clone()}},e.endOf=function(t){return this.startOf(t,!1)},e.$set=function(t,n){var r,a=c.p(t),s="set"+(this.$u?"UTC":""),d=(r={},r[w]=s+"Date",r[$]=s+"Date",r[h]=s+"Month",r[T]=s+"FullYear",r[C]=s+"Hours",r[y]=s+"Minutes",r[Y]=s+"Seconds",r[M]=s+"Milliseconds",r)[a],p=a===w?this.$D+(n-this.$W):n;if(a===h||a===T){var b=this.clone().set($,1);b.$d[d](p),b.init(),this.$d=b.set($,Math.min(this.$D,b.daysInMonth())).$d}else d&&this.$d[d](p);return this.init(),this},e.set=function(t,n){return this.clone().$set(t,n)},e.get=function(t){return this[c.p(t)]()},e.add=function(t,n){var r,a=this;t=Number(t);var s=c.p(n),d=function(g){var _=x(a);return c.w(_.date(_.date()+Math.round(g*t)),a)};if(s===h)return this.set(h,this.$M+t);if(s===T)return this.set(T,this.$y+t);if(s===w)return d(1);if(s===m)return d(7);var p=(r={},r[y]=f,r[C]=k,r[Y]=u,r)[s]||1,b=this.$d.getTime()+t*p;return c.w(b,this)},e.subtract=function(t,n){return this.add(-1*t,n)},e.format=function(t){var n=this,r=this.$locale();if(!this.isValid())return r.invalidDate||H;var a=t||"YYYY-MM-DDTHH:mm:ssZ",s=c.z(this),d=this.$H,p=this.$m,b=this.$M,g=r.weekdays,_=r.months,W=r.meridiem,F=function(S,N,Z,R){return S&&(S[N]||S(n,a))||Z[N].slice(0,R)},V=function(S){return c.s(d%12||12,S,"0")},I=W||function(S,N,Z){var R=S<12?"AM":"PM";return Z?R.toLowerCase():R};return a.replace(P,(function(S,N){return N||(function(Z){switch(Z){case"YY":return String(n.$y).slice(-2);case"YYYY":return c.s(n.$y,4,"0");case"M":return b+1;case"MM":return c.s(b+1,2,"0");case"MMM":return F(r.monthsShort,b,_,3);case"MMMM":return F(_,b);case"D":return n.$D;case"DD":return c.s(n.$D,2,"0");case"d":return String(n.$W);case"dd":return F(r.weekdaysMin,n.$W,g,2);case"ddd":return F(r.weekdaysShort,n.$W,g,3);case"dddd":return g[n.$W];case"H":return String(d);case"HH":return c.s(d,2,"0");case"h":return V(1);case"hh":return V(2);case"a":return I(d,p,!0);case"A":return I(d,p,!1);case"m":return String(p);case"mm":return c.s(p,2,"0");case"s":return String(n.$s);case"ss":return c.s(n.$s,2,"0");case"SSS":return c.s(n.$ms,3,"0");case"Z":return s}return null})(S)||s.replace(":","")}))},e.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},e.diff=function(t,n,r){var a,s=this,d=c.p(n),p=x(t),b=(p.utcOffset()-this.utcOffset())*f,g=this-p,_=function(){return c.m(s,p)};switch(d){case T:a=_()/12;break;case h:a=_();break;case U:a=_()/3;break;case m:a=(g-b)/6048e5;break;case w:a=(g-b)/864e5;break;case C:a=g/k;break;case y:a=g/f;break;case Y:a=g/u;break;default:a=g}return r?a:c.a(a)},e.daysInMonth=function(){return this.endOf(h).$D},e.$locale=function(){return j[this.$L]},e.locale=function(t,n){if(!t)return this.$L;var r=this.clone(),a=G(t,n,!0);return a&&(r.$L=a),r},e.clone=function(){return c.w(this.$d,this)},e.toDate=function(){return new Date(this.valueOf())},e.toJSON=function(){return this.isValid()?this.toISOString():null},e.toISOString=function(){return this.$d.toISOString()},e.toString=function(){return this.$d.toUTCString()},i})(),dt=K.prototype;return x.prototype=dt,[["$ms",M],["$s",Y],["$m",y],["$H",C],["$W",w],["$M",h],["$y",T],["$D",$]].forEach((function(i){dt[i[1]]=function(e){return this.$g(e,i[0],i[1])}})),x.extend=function(i,e){return i.$i||(i(e,K,x),i.$i=!0),x},x.locale=G,x.isDayjs=et,x.unix=function(i){return x(1e3*i)},x.en=j[z],x.Ls=j,x.p={},x}))})(q)),q.exports}var ft=ht();const E=lt(ft),A=60,pt=["YYYY-MM-DD","YYYY/MM/DD","YYYY-MM-DD HH:mm","YYYY/MM/DD HH:mm","YYYY-MM-DD HH:mm:ss","YYYY/MM/DD HH:mm:ss"],ot=v=>{if(!tt(v))return"00:00:00";const l=E(v).diff(E());if(l<=0)return"00:00:00";const u=Math.floor(l/1e3),f=Math.floor(u/86400),k=Math.floor(u%86400/3600),M=Math.floor(u%3600/60),Y=u%60;return`${f?`${f}:`:""}${`${k}`.padStart(2,"0")}:${`${M}`.padStart(2,"0")}:${`${Y}`.padStart(2,"0")}`},at=v=>{const l=u=>`${u}`.padStart(2,"0");return`${l(Math.floor(v/A/A))}:${l(Math.floor(v/A)%A)}:${l(v%A)}`},tt=v=>pt.some(l=>E(v,l,!0).isValid()),st="HH:mm:ss",ct=900,vt=v=>{const{mode:l,showType:u="default",size:f=40,className:k,bgColor:M,borderColor:Y,textShadowColor:y,finishCountFn:C}=v,[w,m]=O.useState(u==="count"?at(0):u==="default"?E().format(st):ot(u)),h=O.useRef({t:null}),U={"--card-size":`${f}px`,"--card-w":`${f*1.25}px`,"--card-h":`${f*2}px`,"--transx":`${-f*1.25/2}px`,"--transy":`${-f}px`,"--delay":`${ct/1e3}s`,"--bgColor":M,"--borderColor":Y,"--textShadow":y?`1px 2px 3px ${y}`:"none"};O.useEffect(()=>{let $=Date.now();h.current.t&&(clearInterval(h.current.t),h.current.t=null,$=Date.now()),h.current.t=setInterval(()=>{let H=()=>"";u==="count"?H=()=>at(Math.floor((Date.now()-$)/1e3)):u==="default"?H=()=>E().format(st):H=()=>ot(u),m(H())},1e3)},[u]),O.useEffect(()=>{tt(u)&&w==="00:00:00"&&C&&setTimeout(()=>{C()},1e3)},[w,u,C]);const T=()=>{if(!w)return null;const $=w.split(":"),H=$[$.length-3].split(""),J=$[$.length-2].split(""),P=$[$.length-1].split(""),rt=$.length===4?$[0].split(""):[],D=tt(u),B=rt.map((j,Q)=>o.jsx(X,{mode:l,time:+j,limit:D?-9:9,size:f},Q)),z=o.jsx("span",{children:":"});return o.jsxs(o.Fragment,{children:[B.length?o.jsxs(o.Fragment,{children:[B,D?o.jsx("p",{children:"天"}):z]}):null,o.jsx(X,{mode:l,time:+H[0],limit:D?-2:2,size:f}),o.jsx(X,{mode:l,time:+H[1],limit:D?-9:9,size:f}),D?o.jsx("p",{children:"小时"}):z,o.jsx(X,{mode:l,time:+J[0],limit:D?-5:5,size:f}),o.jsx(X,{mode:l,time:+J[1],limit:D?-9:9,size:f}),D?o.jsx("p",{children:"分"}):z,o.jsx(X,{mode:l,time:+P[0],limit:D?-5:5,size:f}),o.jsx(X,{mode:l,time:+P[1],limit:D?-9:9,size:f}),D&&o.jsx("p",{children:"秒"})]})};return o.jsx("div",{className:`time-runner ${k||""}`,style:U,children:T()})},mt=v=>{const{time:l,limit:u,mode:f,size:k}=v,[M,Y]=O.useState(!1),y=O.useRef({t:l}),C=O.useMemo(()=>l!==y.current.t?{"--driftX":`${Math.floor(Math.random()*(-k-k+1))+k}px`,"--driftY":`${Math.floor(Math.random()*(-k*2-k*2+1))+k*2}px`,"--driftRZ":`${Math.floor(Math.random()*151)+50}deg`,"--driftRX":`${Math.floor(Math.random()*151)+50}deg`}:null,[l,k]);O.useEffect(()=>{l!==y.current.t&&Y(!0)},[l]),O.useEffect(()=>{M&&setTimeout(()=>{y.current.t=l,Y(!1)},ct)},[M,l]);const w=()=>{const{t:m}=y.current;let h=m;switch(u>0?h=m>=u?0:m+1:h=m<=0?Math.abs(u):m-1,f){case"card":return o.jsxs("div",{className:"clock-card",children:[o.jsxs("div",{className:`clock-b ${M?"run":""}`,children:[o.jsx("p",{children:h}),o.jsx("p",{children:h})]}),o.jsxs("div",{className:`clock-f ${M?"run":""}`,children:[o.jsx("p",{children:m}),o.jsx("p",{children:m})]})]});case"cube-v":return o.jsx("div",{className:`cube-v ${M?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:h}),o.jsx("p",{children:m})]})});case"cube-h":return o.jsx("div",{className:`cube-h ${M?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:h}),o.jsx("p",{children:m})]})});case"drift":return o.jsx("div",{className:`drift ${M?"run":""}`,"data-digit":m,style:C,children:h});default:return o.jsx("div",{children:o.jsx("p",{children:m})})}};return o.jsx(o.Fragment,{children:w()})},X=O.memo(mt);L.TimeRunner=vt,Object.defineProperty(L,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "time-runner",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "Displaying timer, current time, and countdown with light animation effects(React component)",
5
5
  "keywords": ["react", "countdown", "timer", "hook", "card", "less", "animation", "vite"],
6
6
  "main": "./dist/time-runner.umd.js",
@@ -38,7 +38,8 @@
38
38
  "typescript": "^5.9.3",
39
39
  "vite": "^7.1.8",
40
40
  "vite-plugin-dts": "^4.5.4",
41
- "vite-plugin-eslint": "^1.8.1"
41
+ "vite-plugin-eslint": "^1.8.1",
42
+ "vite-plugin-lib-inject-css": "^2.2.2"
42
43
  },
43
44
  "dependencies": {
44
45
  "dayjs": "^1.11.18"
package/dist/time-runner.css DELETED
@@ -1 +0,0 @@
1
- .time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:#333}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:#fff;overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);transform-origin:bottom;backface-visibility:hidden;border-radius:7px 7px 0 0}.clock-card .clock-f p:nth-child(2){line-height:2px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);border-radius:7px 7px 0 0}.clock-card .clock-b p:nth-child(2){line-height:2px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.clock-cube-3d-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.clock-cube-3d-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.clock-cube-3d-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.clock-cube-3d-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.clock-cube-3d-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.clock-cube-3d-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.clock-cube-3d-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.clock-cube-3d-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.clock-cube-3d-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.clock-cube-3d-h.run div{transform:rotateY(90deg);transition:var(--delay)}