time-runner 1.1.4 → 1.1.6

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 (8) hide show
  1. package/README.md +20 -0
  2. package/README.zh-CN.md +19 -0
  3. package/dist/TimeRunner.d.ts +4 -1
  4. package/dist/Tools.d.ts +25 -0
  5. package/dist/index.css +1 -1
  6. package/dist/time-runner.es.js +369 -281
  7. package/dist/time-runner.umd.js +26 -2
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -69,6 +69,13 @@ import { TimeRunner } from "time-runner";
69
69
  // Countdown + drift
70
70
  <TimeRunner mode="drift" showType="2026-10-31" />
71
71
 
72
+ // Current time + cut
73
+ <TimeRunner mode="cut" />
74
+ // Timer + cut
75
+ <TimeRunner mode="cut" showType="count" />
76
+ // Countdown + drift
77
+ <TimeRunner mode="cut" showType="2026-10-31" />
78
+
72
79
 
73
80
  ```
74
81
 
@@ -89,6 +96,8 @@ showType?: string;
89
96
  * cube-v: vertical flip
90
97
  * cube-h: horizontal flip
91
98
  * drift: floating
99
+ * cut: cut
100
+ * erase: erase the numeric
92
101
  */
93
102
  mode?: TransMode;
94
103
  /** Callback function executed when countdown finishes */
@@ -99,6 +108,8 @@ size?: number;
99
108
  className?: string;
100
109
  /** Background color */
101
110
  bgColor?: string;
111
+ /** Numeric font color */
112
+ numColor?: string;
102
113
  /** Border color */
103
114
  borderColor?: string;
104
115
  /** Text shadow color */
@@ -124,6 +135,15 @@ textShadowColor?: string;
124
135
 
125
136
  # Changelog
126
137
 
138
+ ## [1.1.6] - 2026-06-20
139
+ ### Changes
140
+ - Added mode = "erase" animation
141
+ - Add property "numColor" for customizing numeric font color
142
+
143
+ ## [1.1.5] - 2026-05-24
144
+ ### Changes
145
+ - Added mode = "cut" animation
146
+
127
147
  ## [1.1.4] - 2026-03-07
128
148
  ### Changes
129
149
  - Added English README
package/README.zh-CN.md CHANGED
@@ -69,6 +69,13 @@ import { TimeRunner } from "time-runner";
69
69
  // 倒计时 + 漂浮
70
70
  <TimeRunner mode="drift" showType="2026-10-31" />
71
71
 
72
+ // 当前时间 + 切割
73
+ <TimeRunner mode="cut" />
74
+ // 计时器 + 切割
75
+ <TimeRunner mode="cut" showType="count" />
76
+ // 倒计时 + 切割
77
+ <TimeRunner mode="cut" showType="2026-10-31" />
78
+
72
79
 
73
80
  ```
74
81
 
@@ -87,6 +94,7 @@ showType?: string;
87
94
  * cube-v：上下翻转
88
95
  * cube-h：左右翻转
89
96
  * drift： 漂浮
97
+ * cut： 切割
90
98
  */
91
99
  mode?: TransMode;
92
100
  /** 倒计时结束后执行的方法 */
@@ -97,6 +105,8 @@ size?: number;
97
105
  className?: string;
98
106
  /** 背景颜色 */
99
107
  bgColor?: string;
108
+ /** 数字颜色 */
109
+ numColor?: string;
100
110
  /** 边框颜色 */
101
111
  borderColor?: string;
102
112
  /** 文字阴影颜色值 */
@@ -122,6 +132,15 @@ textShadowColor?: string;
122
132
 
123
133
  # 更新日志
124
134
 
135
+ ## [1.1.6] - 2026-06-20
136
+ ### Changes
137
+ - 新增 mode = "erase"
138
+ - 增加 numColor: 数字颜色
139
+
140
+ ## [1.1.5] - 2026-05-24
141
+ ### 更新内容
142
+ - 增加 mode = "cut" 效果
143
+
125
144
  ## [1.1.4] - 2026-03-07
126
145
  ### 更新内容
127
146
  - 增加英文版Readme
package/dist/TimeRunner.d.ts CHANGED
@@ -7,7 +7,7 @@
7
7
  * drift: 漂浮
8
8
  *
9
9
  */
10
- type TransMode = "card" | "cube-v" | "cube-h" | "drift";
10
+ type TransMode = "card" | "cube-v" | "cube-h" | "drift" | "cut" | "erase";
11
11
  interface PropsType {
12
12
  /**
13
13
  * 显示模式，默认：default
@@ -22,6 +22,7 @@ interface PropsType {
22
22
  * cube-v：上下翻转
23
23
  * cube-h：左右翻转
24
24
  * drift： 漂浮
25
+ * cut: 切片
25
26
  */
26
27
  mode?: TransMode;
27
28
  /** 尺寸，默认40 */
@@ -30,6 +31,8 @@ interface PropsType {
30
31
  className?: string;
31
32
  /** 背景颜色 */
32
33
  bgColor?: string;
34
+ /** 数字颜色 */
35
+ numColor?: string;
33
36
  /** 边框颜色 */
34
37
  borderColor?: string;
35
38
  /** 文字阴影颜色值 */
package/dist/Tools.d.ts CHANGED
@@ -1,3 +1,28 @@
1
1
  export declare const getTimeDiff: (endTime: string) => string;
2
2
  export declare const countTime: (t: number) => string;
3
3
  export declare const isValidTime: (time: string) => boolean;
4
+ /**
5
+ * 分别给两个div设置clip-path属性，
6
+ * 并根据polygon的x、y坐标计算两条线段的长度、位置、角度。
7
+ *
8
+ * @param dom 外层dom
9
+ */
10
+ export declare const getRandomClip: (dom: HTMLDivElement) => {
11
+ lPath: string;
12
+ rPath: string;
13
+ lTranslate: string;
14
+ rTranslate: string;
15
+ };
16
+ /**
17
+ * 根据传入的颜色色值的深浅比例，返回一个较深或较浅的颜色色值。
18
+ * 在0-255之间，就以128为分界线，大于128为亮色系，返回较深的色值，小于128为深色系，返回较浅的色值。
19
+ * 因为传入的内容格式不固定，所以这里通过浏览器来获取最终的颜色色值，反正也都是在浏览器里运行，减少心智负担。
20
+ *
21
+ * @param color 颜色值，
22
+ * @param ratio 变化比例，越大，差别就越大。
23
+ */
24
+ export declare const getMaskColor: (color: string, ratio?: number) => string;
25
+ /**
26
+ * 获取[0, 360]之间的随机角度
27
+ */
28
+ export declare const getRandomDeg: () => number;
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @font-face{font-family:DIN-num-font;src:url(data:font/woff2;base64,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)}.font-num{font-family:DIN-num-font}.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:var(--card-h, 80px);transform-origin:bottom;backface-visibility:hidden;border-radius:6px 6px 0 0}.clock-card .clock-f p:nth-child(2){line-height:3px;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:var(--card-h, 80px);border-radius:6px 6px 0 0}.clock-card .clock-b p:nth-child(2){line-height:3px;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)}
1
+ @font-face{font-family:DIN-num-font;src:url(data:font/woff2;base64,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)}.font-num{font-family:DIN-num-font}.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:var(--numColor, #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:var(--numColor, #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:var(--card-h, 80px);transform-origin:bottom;backface-visibility:hidden;border-radius:6px 6px 0 0}.clock-card .clock-f p:nth-child(2){line-height:3px;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:var(--card-h, 80px);border-radius:6px 6px 0 0}.clock-card .clock-b p:nth-child(2){line-height:3px;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:var(--numColor, #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:var(--numColor, #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:var(--numColor, #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)}.cut{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:var(--numColor, #fff);text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative;overflow:hidden}.cut>p{color:var(--numColor, #fff)!important;opacity:0}.cut>div{position:absolute;inset:0;line-height:var(--card-h, 80px);text-align:center;overflow:hidden}.cut>div:nth-child(1){clip-path:var(--lPolygon)}.cut>div:nth-child(2){clip-path:var(--rPolygon)}.cut>div>div{position:absolute;width:2px;background-color:transparent;z-index:10}.cut.run>div:nth-child(1){transition:var(--delay);transform:var(--cutLTranslate)}.cut.run>div:nth-child(2){transition:var(--delay);transform:var(--cutRTranslate)}.cut.run>p{transition:.6s;transition-delay:.15s;opacity:1}.cut.run .l-line,.cut.run .r-line{background-color:var(--numColor, #fff)}@property --deg{syntax: "<angle>"; inherits: false; initial-value: 0deg;}.erase{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:var(--numColor, #fff);text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative;overflow:hidden}.erase>p{color:var(--numColor, #fff)!important;opacity:0;transform:scale(0)}.erase:before{content:attr(data-digit);position:absolute;inset:0;line-height:var(--card-h, 80px);text-align:center;z-index:1}.erase>div{position:absolute;inset:0;opacity:1;z-index:2;background:conic-gradient(from var(--start-deg, 0),var(--transColor) 0deg,var(--transColor) var(--deg),transparent var(--deg),transparent 360deg)}.erase.run:before{transition:.2s;transition-delay:.5s;opacity:0}.erase.run>div{opacity:0;transition-property:--deg,opacity;transition-duration:.6s,.1s;transition-delay:0s,.6s}.erase.run>p{transition:.4s;transition-delay:.5s;opacity:1;transform:scale(1)}
package/dist/time-runner.es.js CHANGED
@@ -1,401 +1,489 @@
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 : $;
1
+ import { jsx as d, Fragment as st, jsxs as j } from "react/jsx-runtime";
2
+ import { memo as mt, useState as ht, useRef as it, useMemo as rt, useEffect as nt } from "react";
3
+ import './index.css';function $t(f) {
4
+ return f && f.__esModule && Object.prototype.hasOwnProperty.call(f, "default") ? f.default : f;
5
5
  }
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
- var r = ["th", "st", "nd", "rd"], t = s % 100;
14
- return "[" + s + (r[(t - 20) % 10] || r[t] || r[0]) + "]";
15
- } }, w = function(s, r, t) {
16
- var n = String(s);
17
- return !n || n.length >= r ? s : "" + Array(r + 1 - n.length).join(t) + s;
18
- }, q = { s: w, z: function(s) {
19
- var r = -s.utcOffset(), t = Math.abs(r), n = Math.floor(t / 60), e = t % 60;
20
- return (r <= 0 ? "+" : "-") + w(n, 2, "0") + ":" + w(e, 2, "0");
21
- }, m: function s(r, t) {
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, f), i = t - e < 0, a = r.clone().add(n + (i ? -1 : 1), f);
24
- return +(-(n + (t - e) / (i ? e - a : a - e)) || 0);
6
+ var et = { exports: {} }, pt = et.exports, ct;
7
+ function Mt() {
8
+ return ct || (ct = 1, (function(f, u) {
9
+ (function(c, o) {
10
+ f.exports = o();
11
+ })(pt, (function() {
12
+ var c = 1e3, o = 6e4, y = 36e5, h = "millisecond", v = "second", Y = "minute", b = "hour", D = "day", m = "week", g = "month", _ = "quarter", l = "year", p = "date", S = "Invalid Date", N = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, Z = /\[([^\]]+)]|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, J = { 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
+ var n = ["th", "st", "nd", "rd"], t = s % 100;
14
+ return "[" + s + (n[(t - 20) % 10] || n[t] || n[0]) + "]";
15
+ } }, A = function(s, n, t) {
16
+ var r = String(s);
17
+ return !r || r.length >= n ? s : "" + Array(n + 1 - r.length).join(t) + s;
18
+ }, H = { s: A, z: function(s) {
19
+ var n = -s.utcOffset(), t = Math.abs(n), r = Math.floor(t / 60), e = t % 60;
20
+ return (n <= 0 ? "+" : "-") + A(r, 2, "0") + ":" + A(e, 2, "0");
21
+ }, m: function s(n, t) {
22
+ if (n.date() < t.date()) return -s(t, n);
23
+ var r = 12 * (t.year() - n.year()) + (t.month() - n.month()), e = n.clone().add(r, g), i = t - e < 0, a = n.clone().add(r + (i ? -1 : 1), g);
24
+ return +(-(r + (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: f, y: H, w: p, d: b, D: M, h: O, m: S, s: _, ms: g, Q: Z }[s] || String(s || "").toLowerCase().replace(/s$/, "");
28
+ return { M: g, y: l, w: m, d: D, D: p, h: b, m: Y, s: v, ms: h, Q: _ }[s] || String(s || "").toLowerCase().replace(/s$/, "");
29
29
  }, u: function(s) {
30
30
  return s === void 0;
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) {
31
+ } }, R = "en", L = {};
32
+ L[R] = J;
33
+ var B = "$isDayjsObject", q = function(s) {
34
+ return s instanceof G || !(!s || !s[B]);
35
+ }, Q = function s(n, t, r) {
36
36
  var e;
37
- if (!r) return C;
38
- if (typeof r == "string") {
39
- var i = r.toLowerCase();
40
- j[i] && (e = i), t && (j[i] = t, e = i);
41
- var a = r.split("-");
37
+ if (!n) return R;
38
+ if (typeof n == "string") {
39
+ var i = n.toLowerCase();
40
+ L[i] && (e = i), t && (L[i] = t, e = i);
41
+ var a = n.split("-");
42
42
  if (!e && a.length > 1) return s(a[0]);
43
43
  } else {
44
- var c = r.name;
45
- j[c] = r, e = c;
44
+ var M = n.name;
45
+ L[M] = n, e = M;
46
46
  }
47
- return !n && e && (C = e), e || !n && C;
48
- }, D = function(s, r) {
49
- if (et(s)) return s.clone();
50
- var t = typeof r == "object" ? r : {};
51
- return t.date = s, t.args = arguments, new B(t);
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 });
47
+ return !r && e && (R = e), e || !r && R;
48
+ }, x = function(s, n) {
49
+ if (q(s)) return s.clone();
50
+ var t = typeof n == "object" ? n : {};
51
+ return t.date = s, t.args = arguments, new G(t);
52
+ }, $ = H;
53
+ $.l = Q, $.i = q, $.w = function(s, n) {
54
+ return x(s, { locale: n.$L, utc: n.$u, x: n.$x, $offset: n.$offset });
55
55
  };
56
- var B = (function() {
56
+ var G = (function() {
57
57
  function s(t) {
58
- this.$L = X(t.locale, null, !0), this.parse(t), this.$x = this.$x || t.x || {}, this[P] = !0;
58
+ this.$L = Q(t.locale, null, !0), this.parse(t), this.$x = this.$x || t.x || {}, this[B] = !0;
59
59
  }
60
- var r = s.prototype;
61
- return r.parse = function(t) {
62
- this.$d = (function(n) {
63
- var e = n.date, i = n.utc;
60
+ var n = s.prototype;
61
+ return n.parse = function(t) {
62
+ this.$d = (function(r) {
63
+ var e = r.date, i = r.utc;
64
64
  if (e === null) return /* @__PURE__ */ new Date(NaN);
65
- if (u.u(e)) return /* @__PURE__ */ new Date();
65
+ if ($.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(E);
68
+ var a = e.match(N);
69
69
  if (a) {
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);
70
+ var M = a[2] - 1 || 0, w = (a[7] || "0").substring(0, 3);
71
+ return i ? new Date(Date.UTC(a[1], M, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, w)) : new Date(a[1], M, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, w);
72
72
  }
73
73
  }
74
74
  return new Date(e);
75
75
  })(t), this.init();
76
- }, r.init = function() {
76
+ }, n.init = function() {
77
77
  var t = this.$d;
78
78
  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();
79
- }, r.$utils = function() {
80
- return u;
81
- }, r.isValid = function() {
82
- return this.$d.toString() !== k;
83
- }, r.isSame = function(t, n) {
84
- var e = D(t);
85
- return this.startOf(n) <= e && e <= this.endOf(n);
86
- }, r.isAfter = function(t, n) {
87
- return D(t) < this.startOf(n);
88
- }, r.isBefore = function(t, n) {
89
- return this.endOf(n) < D(t);
90
- }, r.$g = function(t, n, e) {
91
- return u.u(t) ? this[n] : this.set(e, t);
92
- }, r.unix = function() {
79
+ }, n.$utils = function() {
80
+ return $;
81
+ }, n.isValid = function() {
82
+ return this.$d.toString() !== S;
83
+ }, n.isSame = function(t, r) {
84
+ var e = x(t);
85
+ return this.startOf(r) <= e && e <= this.endOf(r);
86
+ }, n.isAfter = function(t, r) {
87
+ return x(t) < this.startOf(r);
88
+ }, n.isBefore = function(t, r) {
89
+ return this.endOf(r) < x(t);
90
+ }, n.$g = function(t, r, e) {
91
+ return $.u(t) ? this[r] : this.set(e, t);
92
+ }, n.unix = function() {
93
93
  return Math.floor(this.valueOf() / 1e3);
94
- }, r.valueOf = function() {
94
+ }, n.valueOf = function() {
95
95
  return this.$d.getTime();
96
- }, r.startOf = function(t, n) {
97
- var e = this, i = !!u.u(n) || n, a = u.p(t), c = function(I, x) {
98
- var N = u.w(e.$u ? Date.UTC(e.$y, x, I) : new Date(e.$y, x, I), e);
99
- return i ? N : N.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" : "");
96
+ }, n.startOf = function(t, r) {
97
+ var e = this, i = !!$.u(r) || r, a = $.p(t), M = function(P, O) {
98
+ var I = $.w(e.$u ? Date.UTC(e.$y, O, P) : new Date(e.$y, O, P), e);
99
+ return i ? I : I.endOf(D);
100
+ }, w = function(P, O) {
101
+ return $.w(e.toDate()[P].apply(e.toDate("s"), (i ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(O)), e);
102
+ }, T = this.$W, C = this.$M, k = this.$D, X = "set" + (this.$u ? "UTC" : "");
103
103
  switch (a) {
104
- case H:
105
- return i ? c(1, 0) : c(31, 11);
106
- case f:
107
- return i ? c(1, y) : c(0, y + 1);
104
+ case l:
105
+ return i ? M(1, 0) : M(31, 11);
106
+ case g:
107
+ return i ? M(1, C) : M(0, C + 1);
108
+ case m:
109
+ var W = this.$locale().weekStart || 0, z = (T < W ? T + 7 : T) - W;
110
+ return M(i ? k - z : k + (6 - z), C);
111
+ case D:
108
112
  case p:
109
- var L = this.$locale().weekStart || 0, R = (v < L ? v + 7 : v) - L;
110
- return c(i ? T - R : T + (6 - R), y);
113
+ return w(X + "Hours", 0);
111
114
  case b:
112
- case M:
113
- return m(F + "Hours", 0);
114
- case O:
115
- return m(F + "Minutes", 1);
116
- case S:
117
- return m(F + "Seconds", 2);
118
- case _:
119
- return m(F + "Milliseconds", 3);
115
+ return w(X + "Minutes", 1);
116
+ case Y:
117
+ return w(X + "Seconds", 2);
118
+ case v:
119
+ return w(X + "Milliseconds", 3);
120
120
  default:
121
121
  return this.clone();
122
122
  }
123
- }, r.endOf = function(t) {
123
+ }, n.endOf = function(t) {
124
124
  return this.startOf(t, !1);
125
- }, r.$set = function(t, n) {
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);
125
+ }, n.$set = function(t, r) {
126
+ var e, i = $.p(t), a = "set" + (this.$u ? "UTC" : ""), M = (e = {}, e[D] = a + "Date", e[p] = a + "Date", e[g] = a + "Month", e[l] = a + "FullYear", e[b] = a + "Hours", e[Y] = a + "Minutes", e[v] = a + "Seconds", e[h] = a + "Milliseconds", e)[i], w = i === D ? this.$D + (r - this.$W) : r;
127
+ if (i === g || i === l) {
128
+ var T = this.clone().set(p, 1);
129
+ T.$d[M](w), T.init(), this.$d = T.set(p, Math.min(this.$D, T.daysInMonth())).$d;
130
+ } else M && this.$d[M](w);
131
131
  return this.init(), this;
132
- }, r.set = function(t, n) {
133
- return this.clone().$set(t, n);
134
- }, r.get = function(t) {
135
- return this[u.p(t)]();
136
- }, r.add = function(t, n) {
132
+ }, n.set = function(t, r) {
133
+ return this.clone().$set(t, r);
134
+ }, n.get = function(t) {
135
+ return this[$.p(t)]();
136
+ }, n.add = function(t, r) {
137
137
  var e, i = this;
138
138
  t = Number(t);
139
- var a = u.p(n), c = function(y) {
140
- var T = D(i);
141
- return u.w(T.date(T.date() + Math.round(y * t)), i);
139
+ var a = $.p(r), M = function(C) {
140
+ var k = x(i);
141
+ return $.w(k.date(k.date() + Math.round(C * t)), i);
142
142
  };
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
- }, r.subtract = function(t, n) {
150
- return this.add(-1 * t, n);
151
- }, r.format = function(t) {
152
- var n = this, e = this.$locale();
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, L = function(x, N, z, Q) {
155
- return x && (x[N] || x(n, i)) || z[N].slice(0, Q);
156
- }, R = function(x) {
157
- return u.s(c % 12 || 12, x, "0");
158
- }, I = F || function(x, N, z) {
159
- var Q = x < 12 ? "AM" : "PM";
160
- return z ? Q.toLowerCase() : Q;
143
+ if (a === g) return this.set(g, this.$M + t);
144
+ if (a === l) return this.set(l, this.$y + t);
145
+ if (a === D) return M(1);
146
+ if (a === m) return M(7);
147
+ var w = (e = {}, e[Y] = o, e[b] = y, e[v] = c, e)[a] || 1, T = this.$d.getTime() + t * w;
148
+ return $.w(T, this);
149
+ }, n.subtract = function(t, r) {
150
+ return this.add(-1 * t, r);
151
+ }, n.format = function(t) {
152
+ var r = this, e = this.$locale();
153
+ if (!this.isValid()) return e.invalidDate || S;
154
+ var i = t || "YYYY-MM-DDTHH:mm:ssZ", a = $.z(this), M = this.$H, w = this.$m, T = this.$M, C = e.weekdays, k = e.months, X = e.meridiem, W = function(O, I, U, K) {
155
+ return O && (O[I] || O(r, i)) || U[I].slice(0, K);
156
+ }, z = function(O) {
157
+ return $.s(M % 12 || 12, O, "0");
158
+ }, P = X || function(O, I, U) {
159
+ var K = O < 12 ? "AM" : "PM";
160
+ return U ? K.toLowerCase() : K;
161
161
  };
162
- return i.replace(J, (function(x, N) {
163
- return N || (function(z) {
164
- switch (z) {
162
+ return i.replace(Z, (function(O, I) {
163
+ return I || (function(U) {
164
+ switch (U) {
165
165
  case "YY":
166
- return String(n.$y).slice(-2);
166
+ return String(r.$y).slice(-2);
167
167
  case "YYYY":
168
- return u.s(n.$y, 4, "0");
168
+ return $.s(r.$y, 4, "0");
169
169
  case "M":
170
- return v + 1;
170
+ return T + 1;
171
171
  case "MM":
172
- return u.s(v + 1, 2, "0");
172
+ return $.s(T + 1, 2, "0");
173
173
  case "MMM":
174
- return L(e.monthsShort, v, T, 3);
174
+ return W(e.monthsShort, T, k, 3);
175
175
  case "MMMM":
176
- return L(T, v);
176
+ return W(k, T);
177
177
  case "D":
178
- return n.$D;
178
+ return r.$D;
179
179
  case "DD":
180
- return u.s(n.$D, 2, "0");
180
+ return $.s(r.$D, 2, "0");
181
181
  case "d":
182
- return String(n.$W);
182
+ return String(r.$W);
183
183
  case "dd":
184
- return L(e.weekdaysMin, n.$W, y, 2);
184
+ return W(e.weekdaysMin, r.$W, C, 2);
185
185
  case "ddd":
186
- return L(e.weekdaysShort, n.$W, y, 3);
186
+ return W(e.weekdaysShort, r.$W, C, 3);
187
187
  case "dddd":
188
- return y[n.$W];
188
+ return C[r.$W];
189
189
  case "H":
190
- return String(c);
190
+ return String(M);
191
191
  case "HH":
192
- return u.s(c, 2, "0");
192
+ return $.s(M, 2, "0");
193
193
  case "h":
194
- return R(1);
194
+ return z(1);
195
195
  case "hh":
196
- return R(2);
196
+ return z(2);
197
197
  case "a":
198
- return I(c, m, !0);
198
+ return P(M, w, !0);
199
199
  case "A":
200
- return I(c, m, !1);
200
+ return P(M, w, !1);
201
201
  case "m":
202
- return String(m);
202
+ return String(w);
203
203
  case "mm":
204
- return u.s(m, 2, "0");
204
+ return $.s(w, 2, "0");
205
205
  case "s":
206
- return String(n.$s);
206
+ return String(r.$s);
207
207
  case "ss":
208
- return u.s(n.$s, 2, "0");
208
+ return $.s(r.$s, 2, "0");
209
209
  case "SSS":
210
- return u.s(n.$ms, 3, "0");
210
+ return $.s(r.$ms, 3, "0");
211
211
  case "Z":
212
212
  return a;
213
213
  }
214
214
  return null;
215
- })(x) || a.replace(":", "");
215
+ })(O) || a.replace(":", "");
216
216
  }));
217
- }, r.utcOffset = function() {
217
+ }, n.utcOffset = function() {
218
218
  return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
219
- }, r.diff = function(t, n, e) {
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);
219
+ }, n.diff = function(t, r, e) {
220
+ var i, a = this, M = $.p(r), w = x(t), T = (w.utcOffset() - this.utcOffset()) * o, C = this - w, k = function() {
221
+ return $.m(a, w);
222
222
  };
223
- switch (c) {
224
- case H:
225
- i = T() / 12;
223
+ switch (M) {
224
+ case l:
225
+ i = k() / 12;
226
226
  break;
227
- case f:
228
- i = T();
227
+ case g:
228
+ i = k();
229
229
  break;
230
- case Z:
231
- i = T() / 3;
230
+ case _:
231
+ i = k() / 3;
232
232
  break;
233
- case p:
234
- i = (y - v) / 6048e5;
233
+ case m:
234
+ i = (C - T) / 6048e5;
235
235
  break;
236
- case b:
237
- i = (y - v) / 864e5;
236
+ case D:
237
+ i = (C - T) / 864e5;
238
238
  break;
239
- case O:
240
- i = y / Y;
239
+ case b:
240
+ i = C / y;
241
241
  break;
242
- case S:
243
- i = y / h;
242
+ case Y:
243
+ i = C / o;
244
244
  break;
245
- case _:
246
- i = y / d;
245
+ case v:
246
+ i = C / c;
247
247
  break;
248
248
  default:
249
- i = y;
249
+ i = C;
250
250
  }
251
- return e ? i : u.a(i);
252
- }, r.daysInMonth = function() {
253
- return this.endOf(f).$D;
254
- }, r.$locale = function() {
255
- return j[this.$L];
256
- }, r.locale = function(t, n) {
251
+ return e ? i : $.a(i);
252
+ }, n.daysInMonth = function() {
253
+ return this.endOf(g).$D;
254
+ }, n.$locale = function() {
255
+ return L[this.$L];
256
+ }, n.locale = function(t, r) {
257
257
  if (!t) return this.$L;
258
- var e = this.clone(), i = X(t, n, !0);
258
+ var e = this.clone(), i = Q(t, r, !0);
259
259
  return i && (e.$L = i), e;
260
- }, r.clone = function() {
261
- return u.w(this.$d, this);
262
- }, r.toDate = function() {
260
+ }, n.clone = function() {
261
+ return $.w(this.$d, this);
262
+ }, n.toDate = function() {
263
263
  return new Date(this.valueOf());
264
- }, r.toJSON = function() {
264
+ }, n.toJSON = function() {
265
265
  return this.isValid() ? this.toISOString() : null;
266
- }, r.toISOString = function() {
266
+ }, n.toISOString = function() {
267
267
  return this.$d.toISOString();
268
- }, r.toString = function() {
268
+ }, n.toString = function() {
269
269
  return this.$d.toUTCString();
270
270
  }, s;
271
- })(), st = B.prototype;
272
- return D.prototype = st, [["$ms", g], ["$s", _], ["$m", S], ["$H", O], ["$W", b], ["$M", f], ["$y", H], ["$D", M]].forEach((function(s) {
273
- st[s[1]] = function(r) {
274
- return this.$g(r, s[0], s[1]);
271
+ })(), ot = G.prototype;
272
+ return x.prototype = ot, [["$ms", h], ["$s", v], ["$m", Y], ["$H", b], ["$W", D], ["$M", g], ["$y", l], ["$D", p]].forEach((function(s) {
273
+ ot[s[1]] = function(n) {
274
+ return this.$g(n, s[0], s[1]);
275
275
  };
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;
276
+ })), x.extend = function(s, n) {
277
+ return s.$i || (s(n, G, x), s.$i = !0), x;
278
+ }, x.locale = Q, x.isDayjs = q, x.unix = function(s) {
279
+ return x(1e3 * s);
280
+ }, x.en = L[R], x.Ls = L, x.p = {}, x;
281
281
  }));
282
- })(G)), G.exports;
282
+ })(et)), et.exports;
283
283
  }
284
- var Mt = pt();
285
- const U = /* @__PURE__ */ mt(Mt), V = 60, Dt = [
284
+ var gt = Mt();
285
+ const E = /* @__PURE__ */ $t(gt), V = 60, yt = [
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 = ($) => {
293
- if (!nt($))
292
+ ], ut = (f) => {
293
+ if (!at(f))
294
294
  return "00:00:00";
295
- const l = U($).diff(U());
296
- if (l <= 0)
295
+ const u = E(f).diff(E());
296
+ if (u <= 0)
297
297
  return "00:00:00";
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({
298
+ const c = Math.floor(u / 1e3), o = Math.floor(c / 86400), y = Math.floor(c % 86400 / 3600), h = Math.floor(c % 3600 / 60), v = c % 60;
299
+ return `${o ? `${o}:` : ""}${`${y}`.padStart(2, "0")}:${`${h}`.padStart(2, "0")}:${`${v}`.padStart(2, "0")}`;
300
+ }, lt = (f) => {
301
+ const u = (c) => `${c}`.padStart(2, "0");
302
+ return `${u(Math.floor(f / V / V))}:${u(Math.floor(f / V) % V)}:${u(f % V)}`;
303
+ }, at = (f) => yt.some((u) => E(f, u, !0).isValid()), tt = (f, u, c, o, y) => {
304
+ const h = o - u, v = y - c, Y = Math.sqrt(h * h + v * v).toFixed(2), b = Math.atan2(v, h) * 180 / Math.PI, D = (u + o) / 2, m = (c + y) / 2;
305
+ f.style.left = `${D}px`, f.style.top = `${m}px`, f.style.height = `${Y}px`, f.style.transform = `translate(-50%, -50%) rotate(${b + 90}deg)`;
306
+ }, vt = (f) => {
307
+ const u = f.clientWidth, c = f.clientHeight, o = Math.floor(Math.random() * 2);
308
+ let y = "", h = "", v = 0, Y = 0;
309
+ const b = f.querySelector(".l-line"), D = f.querySelector(".r-line");
310
+ if (o === 0) {
311
+ const m = 5 + Math.random() * 90, g = 100 - m;
312
+ v = Math.max(m, g), y = `
313
+ polygon(
314
+ 0% 0%,
315
+ ${m}% 0%,
316
+ ${g}% 100%,
317
+ 0% 100%
318
+ )`, h = `
319
+ polygon(
320
+ ${m}% 0%,
321
+ 100% 0%,
322
+ 100% 100%,
323
+ ${g}% 100%
324
+ )`;
325
+ const _ = u * m / 100, l = 0, p = u * g / 100, S = c;
326
+ tt(b, _, l, p, S), tt(D, _, l, p, S);
327
+ } else {
328
+ const m = 5 + Math.random() * 90, g = 100 - m;
329
+ Y = Math.max(m, g), y = `
330
+ polygon(
331
+ 0% 0%,
332
+ 100% 0%,
333
+ 100% ${g}%,
334
+ 0% ${m}%
335
+ )`, h = `
336
+ polygon(
337
+ 0% ${m}%,
338
+ 100% ${g}%,
339
+ 100% 100%,
340
+ 0% 100%
341
+ )`;
342
+ const _ = 0, l = c * m / 100, p = u, S = c * g / 100;
343
+ tt(b, _, l, p, S), tt(D, _, l, p, S);
344
+ }
345
+ return {
346
+ lPath: y,
347
+ rPath: h,
348
+ lTranslate: o === 0 ? `translateX(-${v}%)` : `translateY(-${Y}%)`,
349
+ rTranslate: o === 0 ? `translateX(${v}%)` : `translateY(${Y}%)`
350
+ };
351
+ }, Dt = (f, u = 0.3) => {
352
+ const c = document.createElement("div");
353
+ c.style.color = f, document.body.appendChild(c);
354
+ const o = getComputedStyle(c).color;
355
+ document.body.removeChild(c);
356
+ const [y, h, v] = o.match(/\d+/g).slice(0, 3).map(Number), b = 0.299 * y + 0.587 * h + 0.114 * v > 128, D = (m) => Math.round(b ? m * (1 - u) : m + (255 - m) * u);
357
+ return "#" + [D(y), D(h), D(v)].map((m) => m.toString(16).padStart(2, "0")).join("").toUpperCase();
358
+ }, St = () => Math.floor(Math.random() * 361), dt = "HH:mm:ss", ft = 900, xt = (f) => {
359
+ const { mode: u, showType: c = "default", size: o = 40, className: y, bgColor: h, numColor: v, borderColor: Y, textShadowColor: b, finishCountFn: D } = f, [m, g] = ht(
360
+ c === "count" ? lt(0) : c === "default" ? E().format(dt) : ut(c)
361
+ ), _ = it({
307
362
  t: null
308
- }), Z = {
309
- "--card-size": `${h}px`,
310
- "--card-w": `${h * 1.25}px`,
311
- "--card-h": `${h * 2}px`,
363
+ }), l = {
364
+ "--card-size": `${o}px`,
365
+ "--card-w": `${o * 1.25}px`,
366
+ "--card-h": `${o * 2}px`,
312
367
  // 下面两个必须是一个确定的数字，不能是表达式
313
- "--transx": `${-h * 1.25 / 2}px`,
314
- "--transy": `${-h}px`,
315
- "--delay": `${dt / 1e3}s`,
316
- "--bgColor": g,
317
- "--borderColor": _,
318
- "--textShadow": S ? `1px 2px 3px ${S}` : "none"
368
+ "--transx": `${-o * 1.25 / 2}px`,
369
+ "--transy": `${-o}px`,
370
+ "--delay": `${ft / 1e3}s`,
371
+ "--bgColor": h,
372
+ "--numColor": v,
373
+ "--borderColor": Y,
374
+ "--textShadow": b ? `1px 2px 3px ${b}` : "none",
375
+ "--transColor": Dt(h || "#333")
319
376
  };
320
- K(() => {
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());
377
+ nt(() => {
378
+ let S = Date.now();
379
+ _.current.t && (clearInterval(_.current.t), _.current.t = null, S = Date.now()), _.current.t = setInterval(() => {
380
+ let N = () => "";
381
+ c === "count" ? N = () => lt(Math.floor((Date.now() - S) / 1e3)) : c === "default" ? N = () => E().format(dt) : N = () => ut(c), g(N());
325
382
  }, 1e3);
326
- }, [d]), K(() => {
327
- nt(d) && b === "00:00:00" && O && setTimeout(() => {
328
- O();
383
+ }, [c]), nt(() => {
384
+ at(c) && m === "00:00:00" && D && setTimeout(() => {
385
+ D();
329
386
  }, 1e3);
330
- }, [b, d, O]);
331
- const H = () => {
332
- if (!b)
387
+ }, [m, c, D]);
388
+ const p = () => {
389
+ if (!m)
333
390
  return null;
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
391
+ const S = m.split(":"), N = S[S.length - 3].split(""), Z = S[S.length - 2].split(""), J = S[S.length - 1].split(""), A = S.length === 4 ? S[0].split("") : [], H = at(c), R = A.map((B, q) => /* @__PURE__ */ d(F, { mode: u, time: +B, limit: H ? -9 : 9, size: o }, q)), L = /* @__PURE__ */ d("span", { children: ":" });
392
+ return /* @__PURE__ */ j(st, { children: [
393
+ R.length ? /* @__PURE__ */ j(st, { children: [
394
+ R,
395
+ H ? /* @__PURE__ */ d("p", { children: "天" }) : L
339
396
  ] }) : null,
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: "秒" })
397
+ /* @__PURE__ */ d(F, { mode: u, time: +N[0], limit: H ? -2 : 2, size: o }),
398
+ /* @__PURE__ */ d(F, { mode: u, time: +N[1], limit: H ? -9 : 9, size: o }),
399
+ H ? /* @__PURE__ */ d("p", { children: "小时" }) : L,
400
+ /* @__PURE__ */ d(F, { mode: u, time: +Z[0], limit: H ? -5 : 5, size: o }),
401
+ /* @__PURE__ */ d(F, { mode: u, time: +Z[1], limit: H ? -9 : 9, size: o }),
402
+ H ? /* @__PURE__ */ d("p", { children: "分" }) : L,
403
+ /* @__PURE__ */ d(F, { mode: u, time: +J[0], limit: H ? -5 : 5, size: o }),
404
+ /* @__PURE__ */ d(F, { mode: u, time: +J[1], limit: H ? -9 : 9, size: o }),
405
+ H && /* @__PURE__ */ d("p", { children: "秒" })
349
406
  ] });
350
407
  };
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`,
408
+ return /* @__PURE__ */ d("div", { className: `time-runner ${y || ""}`, style: l, children: p() });
409
+ }, Yt = (f) => {
410
+ const { time: u, limit: c, mode: o, size: y } = f, [h, v] = ht(!1), Y = it({
411
+ t: u
412
+ }), b = it(null), D = rt(() => u !== Y.current.t && o === "drift" ? {
413
+ "--driftX": `${Math.floor(Math.random() * (-y - y + 1)) + y}px`,
414
+ "--driftY": `${Math.floor(Math.random() * (-y * 2 - y * 2 + 1)) + y * 2}px`,
358
415
  "--driftRZ": `${Math.floor(Math.random() * 151) + 50}deg`,
359
416
  "--driftRX": `${Math.floor(Math.random() * 151) + 50}deg`
360
- } : null, [l, Y]);
361
- return K(() => {
362
- l !== S.current.t && _(!0);
363
- }, [l]), K(() => {
364
- g && setTimeout(() => {
365
- S.current.t = l, _(!1);
366
- }, dt);
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) {
417
+ } : null, [u, y, o]), m = rt(() => {
418
+ if (h && o === "cut") {
419
+ const { lPath: l, rPath: p, lTranslate: S, rTranslate: N } = vt(b.current);
420
+ return {
421
+ "--lPolygon": l,
422
+ "--rPolygon": p,
423
+ "--cutLTranslate": S,
424
+ "--cutRTranslate": N
425
+ };
426
+ }
427
+ return null;
428
+ }, [h, o]), g = rt(() => h && o === "erase" ? {
429
+ "--start-deg": `${St()}deg`,
430
+ "--deg": "360deg"
431
+ } : null, [h, o]);
432
+ return nt(() => {
433
+ u !== Y.current.t && v(!0);
434
+ }, [u]), nt(() => {
435
+ h && setTimeout(() => {
436
+ Y.current.t = u, v(!1);
437
+ }, ft);
438
+ }, [h, u]), /* @__PURE__ */ d(st, { children: (() => {
439
+ const { t: l } = Y.current;
440
+ let p = l;
441
+ switch (c > 0 ? p = l >= c ? 0 : l + 1 : p = l <= 0 ? Math.abs(c) : l - 1, o) {
371
442
  case "card":
372
- return /* @__PURE__ */ A("div", { className: "clock-card font-num", children: [
373
- /* @__PURE__ */ A("div", { className: `clock-b ${g ? "run" : ""}`, children: [
374
- /* @__PURE__ */ o("p", { children: f }),
375
- /* @__PURE__ */ o("p", { children: f })
443
+ return /* @__PURE__ */ j("div", { className: "clock-card font-num", children: [
444
+ /* @__PURE__ */ j("div", { className: `clock-b ${h ? "run" : ""}`, children: [
445
+ /* @__PURE__ */ d("p", { children: p }),
446
+ /* @__PURE__ */ d("p", { children: p })
376
447
  ] }),
377
- /* @__PURE__ */ A("div", { className: `clock-f ${g ? "run" : ""}`, children: [
378
- /* @__PURE__ */ o("p", { children: p }),
379
- /* @__PURE__ */ o("p", { children: p })
448
+ /* @__PURE__ */ j("div", { className: `clock-f ${h ? "run" : ""}`, children: [
449
+ /* @__PURE__ */ d("p", { children: l }),
450
+ /* @__PURE__ */ d("p", { children: l })
380
451
  ] })
381
452
  ] });
382
453
  case "cube-v":
383
- return /* @__PURE__ */ o("div", { className: `cube-v font-num ${g ? "run" : ""}`, children: /* @__PURE__ */ A("div", { children: [
384
- /* @__PURE__ */ o("p", { children: f }),
385
- /* @__PURE__ */ o("p", { children: p })
454
+ return /* @__PURE__ */ d("div", { className: `cube-v font-num ${h ? "run" : ""}`, children: /* @__PURE__ */ j("div", { children: [
455
+ /* @__PURE__ */ d("p", { children: p }),
456
+ /* @__PURE__ */ d("p", { children: l })
386
457
  ] }) });
387
458
  case "cube-h":
388
- return /* @__PURE__ */ o("div", { className: `cube-h font-num ${g ? "run" : ""}`, children: /* @__PURE__ */ A("div", { children: [
389
- /* @__PURE__ */ o("p", { children: f }),
390
- /* @__PURE__ */ o("p", { children: p })
459
+ return /* @__PURE__ */ d("div", { className: `cube-h font-num ${h ? "run" : ""}`, children: /* @__PURE__ */ j("div", { children: [
460
+ /* @__PURE__ */ d("p", { children: p }),
461
+ /* @__PURE__ */ d("p", { children: l })
391
462
  ] }) });
392
463
  case "drift":
393
- return /* @__PURE__ */ o("div", { className: `drift font-num ${g ? "run" : ""}`, "data-digit": p, style: O, children: f });
464
+ return /* @__PURE__ */ d("div", { className: `drift font-num ${h ? "run" : ""}`, "data-digit": l, style: D, children: p });
465
+ case "cut":
466
+ return /* @__PURE__ */ j("div", { ref: b, className: `cut font-num ${h ? "run" : ""}`, style: m, children: [
467
+ /* @__PURE__ */ j("div", { children: [
468
+ /* @__PURE__ */ d("p", { children: l }),
469
+ /* @__PURE__ */ d("div", { className: "l-line" })
470
+ ] }),
471
+ /* @__PURE__ */ j("div", { children: [
472
+ /* @__PURE__ */ d("p", { children: l }),
473
+ /* @__PURE__ */ d("div", { className: "r-line" })
474
+ ] }),
475
+ /* @__PURE__ */ d("p", { children: p })
476
+ ] });
477
+ case "erase":
478
+ return /* @__PURE__ */ j("div", { className: `erase font-num ${h ? "run" : ""}`, "data-digit": l, children: [
479
+ /* @__PURE__ */ d("p", { children: p }),
480
+ /* @__PURE__ */ d("div", { style: g })
481
+ ] });
394
482
  default:
395
- return /* @__PURE__ */ o("div", { className: "font-num", children: /* @__PURE__ */ o("p", { children: p }) });
483
+ return /* @__PURE__ */ d("div", { className: "font-num", children: /* @__PURE__ */ d("p", { children: l }) });
396
484
  }
397
485
  })() });
398
- }, W = ft(vt);
486
+ }, F = mt(Yt);
399
487
  export {
400
- St as TimeRunner
488
+ xt as TimeRunner
401
489
  };
package/dist/time-runner.umd.js CHANGED
@@ -1,2 +1,26 @@
1
- (function(N,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):(N=typeof globalThis<"u"?globalThis:N||self,o(N["time-runner"]={},N.jsxRuntime,N.React))})(this,(function(N,o,T){"use strict";var nt=document.createElement("style");nt.textContent=`@font-face{font-family:DIN-num-font;src:url(data:font/woff2;base64,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)}.font-num{font-family:DIN-num-font}.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:var(--card-h, 80px);transform-origin:bottom;backface-visibility:hidden;border-radius:6px 6px 0 0}.clock-card .clock-f p:nth-child(2){line-height:3px;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:var(--card-h, 80px);border-radius:6px 6px 0 0}.clock-card .clock-b p:nth-child(2){line-height:3px;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(m){return m&&m.__esModule&&Object.prototype.hasOwnProperty.call(m,"default")?m.default:m}var Z={exports:{}},ut=Z.exports,it;function ht(){return it||(it=1,(function(m,l){(function(u,f){m.exports=f()})(ut,(function(){var u=1e3,f=6e4,k=36e5,$="millisecond",S="second",A="minute",C="hour",w="day",v="week",h="month",Q="quarter",O="year",g="date",j="Invalid Date",G=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,B=/\[([^\]]+)]|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])+"]"}},y=function(i,e,t){var n=String(i);return!n||n.length>=e?i:""+Array(e+1-n.length).join(t)+i},_={s:y,z:function(i){var e=-i.utcOffset(),t=Math.abs(e),n=Math.floor(t/60),r=t%60;return(e<=0?"+":"-")+y(n,2,"0")+":"+y(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:O,w:v,d:w,D:g,h:C,m:A,s:S,ms:$,Q}[i]||String(i||"").toLowerCase().replace(/s$/,"")},u:function(i){return i===void 0}},H="en",W={};W[H]=rt;var q="$isDayjsObject",et=function(i){return i instanceof P||!(!i||!i[q])},F=function i(e,t,n){var r;if(!e)return H;if(typeof e=="string"){var a=e.toLowerCase();W[a]&&(r=a),t&&(W[a]=t,r=a);var s=e.split("-");if(!r&&s.length>1)return i(s[0])}else{var d=e.name;W[d]=e,r=d}return!n&&r&&(H=r),r||!n&&H},b=function(i,e){if(et(i))return i.clone();var t=typeof e=="object"?e:{};return t.date=i,t.args=arguments,new P(t)},c=_;c.l=F,c.i=et,c.w=function(i,e){return b(i,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var P=(function(){function i(t){this.$L=F(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(G);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()!==j},e.isSame=function(t,n){var r=b(t);return this.startOf(n)<=r&&r<=this.endOf(n)},e.isAfter=function(t,n){return b(t)<this.startOf(n)},e.isBefore=function(t,n){return this.endOf(n)<b(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(K,D){var V=c.w(r.$u?Date.UTC(r.$y,D,K):new Date(r.$y,D,K),r);return a?V:V.endOf(w)},p=function(K,D){return c.w(r.toDate()[K].apply(r.toDate("s"),(a?[0,0,0,0]:[23,59,59,999]).slice(D)),r)},x=this.$W,M=this.$M,Y=this.$D,E="set"+(this.$u?"UTC":"");switch(s){case O:return a?d(1,0):d(31,11);case h:return a?d(1,M):d(0,M+1);case v:var X=this.$locale().weekStart||0,U=(x<X?x+7:x)-X;return d(a?Y-U:Y+(6-U),M);case w:case g:return p(E+"Hours",0);case C:return p(E+"Minutes",1);case A:return p(E+"Seconds",2);case S:return p(E+"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[g]=s+"Date",r[h]=s+"Month",r[O]=s+"FullYear",r[C]=s+"Hours",r[A]=s+"Minutes",r[S]=s+"Seconds",r[$]=s+"Milliseconds",r)[a],p=a===w?this.$D+(n-this.$W):n;if(a===h||a===O){var x=this.clone().set(g,1);x.$d[d](p),x.init(),this.$d=x.set(g,Math.min(this.$D,x.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(M){var Y=b(a);return c.w(Y.date(Y.date()+Math.round(M*t)),a)};if(s===h)return this.set(h,this.$M+t);if(s===O)return this.set(O,this.$y+t);if(s===w)return d(1);if(s===v)return d(7);var p=(r={},r[A]=f,r[C]=k,r[S]=u,r)[s]||1,x=this.$d.getTime()+t*p;return c.w(x,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||j;var a=t||"YYYY-MM-DDTHH:mm:ssZ",s=c.z(this),d=this.$H,p=this.$m,x=this.$M,M=r.weekdays,Y=r.months,E=r.meridiem,X=function(D,V,J,R){return D&&(D[V]||D(n,a))||J[V].slice(0,R)},U=function(D){return c.s(d%12||12,D,"0")},K=E||function(D,V,J){var R=D<12?"AM":"PM";return J?R.toLowerCase():R};return a.replace(B,(function(D,V){return V||(function(J){switch(J){case"YY":return String(n.$y).slice(-2);case"YYYY":return c.s(n.$y,4,"0");case"M":return x+1;case"MM":return c.s(x+1,2,"0");case"MMM":return X(r.monthsShort,x,Y,3);case"MMMM":return X(Y,x);case"D":return n.$D;case"DD":return c.s(n.$D,2,"0");case"d":return String(n.$W);case"dd":return X(r.weekdaysMin,n.$W,M,2);case"ddd":return X(r.weekdaysShort,n.$W,M,3);case"dddd":return M[n.$W];case"H":return String(d);case"HH":return c.s(d,2,"0");case"h":return U(1);case"hh":return U(2);case"a":return K(d,p,!0);case"A":return K(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})(D)||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=b(t),x=(p.utcOffset()-this.utcOffset())*f,M=this-p,Y=function(){return c.m(s,p)};switch(d){case O:a=Y()/12;break;case h:a=Y();break;case Q:a=Y()/3;break;case v:a=(M-x)/6048e5;break;case w:a=(M-x)/864e5;break;case C:a=M/k;break;case A:a=M/f;break;case S:a=M/u;break;default:a=M}return r?a:c.a(a)},e.daysInMonth=function(){return this.endOf(h).$D},e.$locale=function(){return W[this.$L]},e.locale=function(t,n){if(!t)return this.$L;var r=this.clone(),a=F(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=P.prototype;return b.prototype=dt,[["$ms",$],["$s",S],["$m",A],["$H",C],["$W",w],["$M",h],["$y",O],["$D",g]].forEach((function(i){dt[i[1]]=function(e){return this.$g(e,i[0],i[1])}})),b.extend=function(i,e){return i.$i||(i(e,P,b),i.$i=!0),b},b.locale=F,b.isDayjs=et,b.unix=function(i){return b(1e3*i)},b.en=W[H],b.Ls=W,b.p={},b}))})(Z)),Z.exports}var ft=ht();const I=lt(ft),L=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=m=>{if(!tt(m))return"00:00:00";const l=I(m).diff(I());if(l<=0)return"00:00:00";const u=Math.floor(l/1e3),f=Math.floor(u/86400),k=Math.floor(u%86400/3600),$=Math.floor(u%3600/60),S=u%60;return`${f?`${f}:`:""}${`${k}`.padStart(2,"0")}:${`${$}`.padStart(2,"0")}:${`${S}`.padStart(2,"0")}`},at=m=>{const l=u=>`${u}`.padStart(2,"0");return`${l(Math.floor(m/L/L))}:${l(Math.floor(m/L)%L)}:${l(m%L)}`},tt=m=>pt.some(l=>I(m,l,!0).isValid()),st="HH:mm:ss",ct=900,mt=m=>{const{mode:l,showType:u="default",size:f=40,className:k,bgColor:$,borderColor:S,textShadowColor:A,finishCountFn:C}=m,[w,v]=T.useState(u==="count"?at(0):u==="default"?I().format(st):ot(u)),h=T.useRef({t:null}),Q={"--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":$,"--borderColor":S,"--textShadow":A?`1px 2px 3px ${A}`:"none"};T.useEffect(()=>{let g=Date.now();h.current.t&&(clearInterval(h.current.t),h.current.t=null,g=Date.now()),h.current.t=setInterval(()=>{let j=()=>"";u==="count"?j=()=>at(Math.floor((Date.now()-g)/1e3)):u==="default"?j=()=>I().format(st):j=()=>ot(u),v(j())},1e3)},[u]),T.useEffect(()=>{tt(u)&&w==="00:00:00"&&C&&setTimeout(()=>{C()},1e3)},[w,u,C]);const O=()=>{if(!w)return null;const g=w.split(":"),j=g[g.length-3].split(""),G=g[g.length-2].split(""),B=g[g.length-1].split(""),rt=g.length===4?g[0].split(""):[],y=tt(u),_=rt.map((W,q)=>o.jsx(z,{mode:l,time:+W,limit:y?-9:9,size:f},q)),H=o.jsx("span",{children:":"});return o.jsxs(o.Fragment,{children:[_.length?o.jsxs(o.Fragment,{children:[_,y?o.jsx("p",{children:"天"}):H]}):null,o.jsx(z,{mode:l,time:+j[0],limit:y?-2:2,size:f}),o.jsx(z,{mode:l,time:+j[1],limit:y?-9:9,size:f}),y?o.jsx("p",{children:"小时"}):H,o.jsx(z,{mode:l,time:+G[0],limit:y?-5:5,size:f}),o.jsx(z,{mode:l,time:+G[1],limit:y?-9:9,size:f}),y?o.jsx("p",{children:"分"}):H,o.jsx(z,{mode:l,time:+B[0],limit:y?-5:5,size:f}),o.jsx(z,{mode:l,time:+B[1],limit:y?-9:9,size:f}),y&&o.jsx("p",{children:"秒"})]})};return o.jsx("div",{className:`time-runner ${k||""}`,style:Q,children:O()})},vt=m=>{const{time:l,limit:u,mode:f,size:k}=m,[$,S]=T.useState(!1),A=T.useRef({t:l}),C=T.useMemo(()=>l!==A.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]);T.useEffect(()=>{l!==A.current.t&&S(!0)},[l]),T.useEffect(()=>{$&&setTimeout(()=>{A.current.t=l,S(!1)},ct)},[$,l]);const w=()=>{const{t:v}=A.current;let h=v;switch(u>0?h=v>=u?0:v+1:h=v<=0?Math.abs(u):v-1,f){case"card":return o.jsxs("div",{className:"clock-card font-num",children:[o.jsxs("div",{className:`clock-b ${$?"run":""}`,children:[o.jsx("p",{children:h}),o.jsx("p",{children:h})]}),o.jsxs("div",{className:`clock-f ${$?"run":""}`,children:[o.jsx("p",{children:v}),o.jsx("p",{children:v})]})]});case"cube-v":return o.jsx("div",{className:`cube-v font-num ${$?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:h}),o.jsx("p",{children:v})]})});case"cube-h":return o.jsx("div",{className:`cube-h font-num ${$?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:h}),o.jsx("p",{children:v})]})});case"drift":return o.jsx("div",{className:`drift font-num ${$?"run":""}`,"data-digit":v,style:C,children:h});default:return o.jsx("div",{className:"font-num",children:o.jsx("p",{children:v})})}};return o.jsx(o.Fragment,{children:w()})},z=T.memo(vt);N.TimeRunner=mt,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})}));
1
+ (function(z,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):(z=typeof globalThis<"u"?globalThis:z||self,o(z["time-runner"]={},z.jsxRuntime,z.React))})(this,(function(z,o,j){"use strict";var ot=document.createElement("style");ot.textContent=`@font-face{font-family:DIN-num-font;src:url(data:font/woff2;base64,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)}.font-num{font-family:DIN-num-font}.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:var(--numColor, #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:var(--numColor, #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:var(--card-h, 80px);transform-origin:bottom;backface-visibility:hidden;border-radius:6px 6px 0 0}.clock-card .clock-f p:nth-child(2){line-height:3px;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:var(--card-h, 80px);border-radius:6px 6px 0 0}.clock-card .clock-b p:nth-child(2){line-height:3px;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:var(--numColor, #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:var(--numColor, #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:var(--numColor, #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)}.cut{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:var(--numColor, #fff);text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative;overflow:hidden}.cut>p{color:var(--numColor, #fff)!important;opacity:0}.cut>div{position:absolute;inset:0;line-height:var(--card-h, 80px);text-align:center;overflow:hidden}.cut>div:nth-child(1){clip-path:var(--lPolygon)}.cut>div:nth-child(2){clip-path:var(--rPolygon)}.cut>div>div{position:absolute;width:2px;background-color:transparent;z-index:10}.cut.run>div:nth-child(1){transition:var(--delay);transform:var(--cutLTranslate)}.cut.run>div:nth-child(2){transition:var(--delay);transform:var(--cutRTranslate)}.cut.run>p{transition:.6s;transition-delay:.15s;opacity:1}.cut.run .l-line,.cut.run .r-line{background-color:var(--numColor, #fff)}@property --deg{syntax: "<angle>"; inherits: false; initial-value: 0deg;}.erase{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:var(--numColor, #fff);text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative;overflow:hidden}.erase>p{color:var(--numColor, #fff)!important;opacity:0;transform:scale(0)}.erase:before{content:attr(data-digit);position:absolute;inset:0;line-height:var(--card-h, 80px);text-align:center;z-index:1}.erase>div{position:absolute;inset:0;opacity:1;z-index:2;background:conic-gradient(from var(--start-deg, 0),var(--transColor) 0deg,var(--transColor) var(--deg),transparent var(--deg),transparent 360deg)}.erase.run:before{transition:.2s;transition-delay:.5s;opacity:0}.erase.run>div{opacity:0;transition-property:--deg,opacity;transition-duration:.6s,.1s;transition-delay:0s,.6s}.erase.run>p{transition:.4s;transition-delay:.5s;opacity:1;transform:scale(1)}
2
+ /*$vite$:1*/`,document.head.appendChild(ot);function ut(f){return f&&f.__esModule&&Object.prototype.hasOwnProperty.call(f,"default")?f.default:f}var P={exports:{}},ht=P.exports,at;function ft(){return at||(at=1,(function(f,d){(function(l,c){f.exports=c()})(ht,(function(){var l=1e3,c=6e4,b=36e5,h="millisecond",y="second",w="minute",k="hour",M="day",p="week",x="month",Y="quarter",u="year",g="date",$="Invalid Date",N=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,_=/\[([^\]]+)]|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,F={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(a){var e=["th","st","nd","rd"],t=a%100;return"["+a+(e[(t-20)%10]||e[t]||e[0])+"]"}},Z=function(a,e,t){var n=String(a);return!n||n.length>=e?a:""+Array(e+1-n.length).join(t)+a},O={s:Z,z:function(a){var e=-a.utcOffset(),t=Math.abs(e),n=Math.floor(t/60),r=t%60;return(e<=0?"+":"-")+Z(n,2,"0")+":"+Z(r,2,"0")},m:function a(e,t){if(e.date()<t.date())return-a(t,e);var n=12*(t.year()-e.year())+(t.month()-e.month()),r=e.clone().add(n,x),i=t-r<0,s=e.clone().add(n+(i?-1:1),x);return+(-(n+(t-r)/(i?r-s:s-r))||0)},a:function(a){return a<0?Math.ceil(a)||0:Math.floor(a)},p:function(a){return{M:x,y:u,w:p,d:M,D:g,h:k,m:w,s:y,ms:h,Q:Y}[a]||String(a||"").toLowerCase().replace(/s$/,"")},u:function(a){return a===void 0}},X="en",W={};W[X]=F;var R="$isDayjsObject",Q=function(a){return a instanceof rt||!(!a||!a[R])},tt=function a(e,t,n){var r;if(!e)return X;if(typeof e=="string"){var i=e.toLowerCase();W[i]&&(r=i),t&&(W[i]=t,r=i);var s=e.split("-");if(!r&&s.length>1)return a(s[0])}else{var m=e.name;W[m]=e,r=m}return!n&&r&&(X=r),r||!n&&X},C=function(a,e){if(Q(a))return a.clone();var t=typeof e=="object"?e:{};return t.date=a,t.args=arguments,new rt(t)},v=O;v.l=tt,v.i=Q,v.w=function(a,e){return C(a,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var rt=(function(){function a(t){this.$L=tt(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[R]=!0}var e=a.prototype;return e.parse=function(t){this.$d=(function(n){var r=n.date,i=n.utc;if(r===null)return new Date(NaN);if(v.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(N);if(s){var m=s[2]-1||0,A=(s[7]||"0").substring(0,3);return i?new Date(Date.UTC(s[1],m,s[3]||1,s[4]||0,s[5]||0,s[6]||0,A)):new Date(s[1],m,s[3]||1,s[4]||0,s[5]||0,s[6]||0,A)}}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 v},e.isValid=function(){return this.$d.toString()!==$},e.isSame=function(t,n){var r=C(t);return this.startOf(n)<=r&&r<=this.endOf(n)},e.isAfter=function(t,n){return C(t)<this.startOf(n)},e.isBefore=function(t,n){return this.endOf(n)<C(t)},e.$g=function(t,n,r){return v.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,i=!!v.u(n)||n,s=v.p(t),m=function(E,T){var V=v.w(r.$u?Date.UTC(r.$y,T,E):new Date(r.$y,T,E),r);return i?V:V.endOf(M)},A=function(E,T){return v.w(r.toDate()[E].apply(r.toDate("s"),(i?[0,0,0,0]:[23,59,59,999]).slice(T)),r)},D=this.$W,S=this.$M,H=this.$D,I="set"+(this.$u?"UTC":"");switch(s){case u:return i?m(1,0):m(31,11);case x:return i?m(1,S):m(0,S+1);case p:var K=this.$locale().weekStart||0,G=(D<K?D+7:D)-K;return m(i?H-G:H+(6-G),S);case M:case g:return A(I+"Hours",0);case k:return A(I+"Minutes",1);case w:return A(I+"Seconds",2);case y:return A(I+"Milliseconds",3);default:return this.clone()}},e.endOf=function(t){return this.startOf(t,!1)},e.$set=function(t,n){var r,i=v.p(t),s="set"+(this.$u?"UTC":""),m=(r={},r[M]=s+"Date",r[g]=s+"Date",r[x]=s+"Month",r[u]=s+"FullYear",r[k]=s+"Hours",r[w]=s+"Minutes",r[y]=s+"Seconds",r[h]=s+"Milliseconds",r)[i],A=i===M?this.$D+(n-this.$W):n;if(i===x||i===u){var D=this.clone().set(g,1);D.$d[m](A),D.init(),this.$d=D.set(g,Math.min(this.$D,D.daysInMonth())).$d}else m&&this.$d[m](A);return this.init(),this},e.set=function(t,n){return this.clone().$set(t,n)},e.get=function(t){return this[v.p(t)]()},e.add=function(t,n){var r,i=this;t=Number(t);var s=v.p(n),m=function(S){var H=C(i);return v.w(H.date(H.date()+Math.round(S*t)),i)};if(s===x)return this.set(x,this.$M+t);if(s===u)return this.set(u,this.$y+t);if(s===M)return m(1);if(s===p)return m(7);var A=(r={},r[w]=c,r[k]=b,r[y]=l,r)[s]||1,D=this.$d.getTime()+t*A;return v.w(D,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||$;var i=t||"YYYY-MM-DDTHH:mm:ssZ",s=v.z(this),m=this.$H,A=this.$m,D=this.$M,S=r.weekdays,H=r.months,I=r.meridiem,K=function(T,V,B,et){return T&&(T[V]||T(n,i))||B[V].slice(0,et)},G=function(T){return v.s(m%12||12,T,"0")},E=I||function(T,V,B){var et=T<12?"AM":"PM";return B?et.toLowerCase():et};return i.replace(_,(function(T,V){return V||(function(B){switch(B){case"YY":return String(n.$y).slice(-2);case"YYYY":return v.s(n.$y,4,"0");case"M":return D+1;case"MM":return v.s(D+1,2,"0");case"MMM":return K(r.monthsShort,D,H,3);case"MMMM":return K(H,D);case"D":return n.$D;case"DD":return v.s(n.$D,2,"0");case"d":return String(n.$W);case"dd":return K(r.weekdaysMin,n.$W,S,2);case"ddd":return K(r.weekdaysShort,n.$W,S,3);case"dddd":return S[n.$W];case"H":return String(m);case"HH":return v.s(m,2,"0");case"h":return G(1);case"hh":return G(2);case"a":return E(m,A,!0);case"A":return E(m,A,!1);case"m":return String(A);case"mm":return v.s(A,2,"0");case"s":return String(n.$s);case"ss":return v.s(n.$s,2,"0");case"SSS":return v.s(n.$ms,3,"0");case"Z":return s}return null})(T)||s.replace(":","")}))},e.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},e.diff=function(t,n,r){var i,s=this,m=v.p(n),A=C(t),D=(A.utcOffset()-this.utcOffset())*c,S=this-A,H=function(){return v.m(s,A)};switch(m){case u:i=H()/12;break;case x:i=H();break;case Y:i=H()/3;break;case p:i=(S-D)/6048e5;break;case M:i=(S-D)/864e5;break;case k:i=S/b;break;case w:i=S/c;break;case y:i=S/l;break;default:i=S}return r?i:v.a(i)},e.daysInMonth=function(){return this.endOf(x).$D},e.$locale=function(){return W[this.$L]},e.locale=function(t,n){if(!t)return this.$L;var r=this.clone(),i=tt(t,n,!0);return i&&(r.$L=i),r},e.clone=function(){return v.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()},a})(),dt=rt.prototype;return C.prototype=dt,[["$ms",h],["$s",y],["$m",w],["$H",k],["$W",M],["$M",x],["$y",u],["$D",g]].forEach((function(a){dt[a[1]]=function(e){return this.$g(e,a[0],a[1])}})),C.extend=function(a,e){return a.$i||(a(e,rt,C),a.$i=!0),C},C.locale=tt,C.isDayjs=Q,C.unix=function(a){return C(1e3*a)},C.en=W[X],C.Ls=W,C.p={},C}))})(P)),P.exports}var pt=ft();const U=ut(pt),J=60,vt=["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"],it=f=>{if(!nt(f))return"00:00:00";const d=U(f).diff(U());if(d<=0)return"00:00:00";const l=Math.floor(d/1e3),c=Math.floor(l/86400),b=Math.floor(l%86400/3600),h=Math.floor(l%3600/60),y=l%60;return`${c?`${c}:`:""}${`${b}`.padStart(2,"0")}:${`${h}`.padStart(2,"0")}:${`${y}`.padStart(2,"0")}`},st=f=>{const d=l=>`${l}`.padStart(2,"0");return`${d(Math.floor(f/J/J))}:${d(Math.floor(f/J)%J)}:${d(f%J)}`},nt=f=>vt.some(d=>U(f,d,!0).isValid()),q=(f,d,l,c,b)=>{const h=c-d,y=b-l,w=Math.sqrt(h*h+y*y).toFixed(2),k=Math.atan2(y,h)*180/Math.PI,M=(d+c)/2,p=(l+b)/2;f.style.left=`${M}px`,f.style.top=`${p}px`,f.style.height=`${w}px`,f.style.transform=`translate(-50%, -50%) rotate(${k+90}deg)`},gt=f=>{const d=f.clientWidth,l=f.clientHeight,c=Math.floor(Math.random()*2);let b="",h="",y=0,w=0;const k=f.querySelector(".l-line"),M=f.querySelector(".r-line");if(c===0){const p=5+Math.random()*90,x=100-p;y=Math.max(p,x),b=`
3
+ polygon(
4
+ 0% 0%,
5
+ ${p}% 0%,
6
+ ${x}% 100%,
7
+ 0% 100%
8
+ )`,h=`
9
+ polygon(
10
+ ${p}% 0%,
11
+ 100% 0%,
12
+ 100% 100%,
13
+ ${x}% 100%
14
+ )`;const Y=d*p/100,u=0,g=d*x/100,$=l;q(k,Y,u,g,$),q(M,Y,u,g,$)}else{const p=5+Math.random()*90,x=100-p;w=Math.max(p,x),b=`
15
+ polygon(
16
+ 0% 0%,
17
+ 100% 0%,
18
+ 100% ${x}%,
19
+ 0% ${p}%
20
+ )`,h=`
21
+ polygon(
22
+ 0% ${p}%,
23
+ 100% ${x}%,
24
+ 100% 100%,
25
+ 0% 100%
26
+ )`;const Y=0,u=l*p/100,g=d,$=l*x/100;q(k,Y,u,g,$),q(M,Y,u,g,$)}return{lPath:b,rPath:h,lTranslate:c===0?`translateX(-${y}%)`:`translateY(-${w}%)`,rTranslate:c===0?`translateX(${y}%)`:`translateY(${w}%)`}},mt=(f,d=.3)=>{const l=document.createElement("div");l.style.color=f,document.body.appendChild(l);const c=getComputedStyle(l).color;document.body.removeChild(l);const[b,h,y]=c.match(/\d+/g).slice(0,3).map(Number),k=.299*b+.587*h+.114*y>128,M=p=>Math.round(k?p*(1-d):p+(255-p)*d);return"#"+[M(b),M(h),M(y)].map(p=>p.toString(16).padStart(2,"0")).join("").toUpperCase()},xt=()=>Math.floor(Math.random()*361),ct="HH:mm:ss",lt=900,bt=f=>{const{mode:d,showType:l="default",size:c=40,className:b,bgColor:h,numColor:y,borderColor:w,textShadowColor:k,finishCountFn:M}=f,[p,x]=j.useState(l==="count"?st(0):l==="default"?U().format(ct):it(l)),Y=j.useRef({t:null}),u={"--card-size":`${c}px`,"--card-w":`${c*1.25}px`,"--card-h":`${c*2}px`,"--transx":`${-c*1.25/2}px`,"--transy":`${-c}px`,"--delay":`${lt/1e3}s`,"--bgColor":h,"--numColor":y,"--borderColor":w,"--textShadow":k?`1px 2px 3px ${k}`:"none","--transColor":mt(h||"#333")};j.useEffect(()=>{let $=Date.now();Y.current.t&&(clearInterval(Y.current.t),Y.current.t=null,$=Date.now()),Y.current.t=setInterval(()=>{let N=()=>"";l==="count"?N=()=>st(Math.floor((Date.now()-$)/1e3)):l==="default"?N=()=>U().format(ct):N=()=>it(l),x(N())},1e3)},[l]),j.useEffect(()=>{nt(l)&&p==="00:00:00"&&M&&setTimeout(()=>{M()},1e3)},[p,l,M]);const g=()=>{if(!p)return null;const $=p.split(":"),N=$[$.length-3].split(""),_=$[$.length-2].split(""),F=$[$.length-1].split(""),Z=$.length===4?$[0].split(""):[],O=nt(l),X=Z.map((R,Q)=>o.jsx(L,{mode:d,time:+R,limit:O?-9:9,size:c},Q)),W=o.jsx("span",{children:":"});return o.jsxs(o.Fragment,{children:[X.length?o.jsxs(o.Fragment,{children:[X,O?o.jsx("p",{children:"天"}):W]}):null,o.jsx(L,{mode:d,time:+N[0],limit:O?-2:2,size:c}),o.jsx(L,{mode:d,time:+N[1],limit:O?-9:9,size:c}),O?o.jsx("p",{children:"小时"}):W,o.jsx(L,{mode:d,time:+_[0],limit:O?-5:5,size:c}),o.jsx(L,{mode:d,time:+_[1],limit:O?-9:9,size:c}),O?o.jsx("p",{children:"分"}):W,o.jsx(L,{mode:d,time:+F[0],limit:O?-5:5,size:c}),o.jsx(L,{mode:d,time:+F[1],limit:O?-9:9,size:c}),O&&o.jsx("p",{children:"秒"})]})};return o.jsx("div",{className:`time-runner ${b||""}`,style:u,children:g()})},yt=f=>{const{time:d,limit:l,mode:c,size:b}=f,[h,y]=j.useState(!1),w=j.useRef({t:d}),k=j.useRef(null),M=j.useMemo(()=>d!==w.current.t&&c==="drift"?{"--driftX":`${Math.floor(Math.random()*(-b-b+1))+b}px`,"--driftY":`${Math.floor(Math.random()*(-b*2-b*2+1))+b*2}px`,"--driftRZ":`${Math.floor(Math.random()*151)+50}deg`,"--driftRX":`${Math.floor(Math.random()*151)+50}deg`}:null,[d,b,c]),p=j.useMemo(()=>{if(h&&c==="cut"){const{lPath:u,rPath:g,lTranslate:$,rTranslate:N}=gt(k.current);return{"--lPolygon":u,"--rPolygon":g,"--cutLTranslate":$,"--cutRTranslate":N}}return null},[h,c]),x=j.useMemo(()=>h&&c==="erase"?{"--start-deg":`${xt()}deg`,"--deg":"360deg"}:null,[h,c]);j.useEffect(()=>{d!==w.current.t&&y(!0)},[d]),j.useEffect(()=>{h&&setTimeout(()=>{w.current.t=d,y(!1)},lt)},[h,d]);const Y=()=>{const{t:u}=w.current;let g=u;switch(l>0?g=u>=l?0:u+1:g=u<=0?Math.abs(l):u-1,c){case"card":return o.jsxs("div",{className:"clock-card font-num",children:[o.jsxs("div",{className:`clock-b ${h?"run":""}`,children:[o.jsx("p",{children:g}),o.jsx("p",{children:g})]}),o.jsxs("div",{className:`clock-f ${h?"run":""}`,children:[o.jsx("p",{children:u}),o.jsx("p",{children:u})]})]});case"cube-v":return o.jsx("div",{className:`cube-v font-num ${h?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:g}),o.jsx("p",{children:u})]})});case"cube-h":return o.jsx("div",{className:`cube-h font-num ${h?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:g}),o.jsx("p",{children:u})]})});case"drift":return o.jsx("div",{className:`drift font-num ${h?"run":""}`,"data-digit":u,style:M,children:g});case"cut":return o.jsxs("div",{ref:k,className:`cut font-num ${h?"run":""}`,style:p,children:[o.jsxs("div",{children:[o.jsx("p",{children:u}),o.jsx("div",{className:"l-line"})]}),o.jsxs("div",{children:[o.jsx("p",{children:u}),o.jsx("div",{className:"r-line"})]}),o.jsx("p",{children:g})]});case"erase":return o.jsxs("div",{className:`erase font-num ${h?"run":""}`,"data-digit":u,children:[o.jsx("p",{children:g}),o.jsx("div",{style:x})]});default:return o.jsx("div",{className:"font-num",children:o.jsx("p",{children:u})})}};return o.jsx(o.Fragment,{children:Y()})},L=j.memo(yt);z.TimeRunner=bt,Object.defineProperty(z,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "time-runner",
3
- "version": "1.1.4",
3
+ "version": "1.1.6",
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",