time-runner 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -0
- package/dist/font/D-DIN-PRO-600-SemiBold.otf +0 -0
- package/dist/index.css +1 -1
- package/dist/time-runner.es.js +13 -13
- package/dist/time-runner.umd.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
Binary file
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@font-face{font-family:DIN Alternate;src:url(
|
|
1
|
+
@font-face{font-family:DIN Alternate;src:url(fonts/D-DIN-PRO-600-SemiBold.otf) format("truetype");font-weight:400;font-style:normal}.font-num{font-family:DIN Alternate}.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)}
|
package/dist/time-runner.es.js
CHANGED
|
@@ -95,8 +95,8 @@ function pt() {
|
|
|
95
95
|
return this.$d.getTime();
|
|
96
96
|
}, r.startOf = function(t, n) {
|
|
97
97
|
var e = this, i = !!u.u(n) || n, a = u.p(t), c = function(I, x) {
|
|
98
|
-
var
|
|
99
|
-
return i ?
|
|
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
100
|
}, m = function(I, x) {
|
|
101
101
|
return u.w(e.toDate()[I].apply(e.toDate("s"), (i ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(x)), e);
|
|
102
102
|
}, v = this.$W, y = this.$M, T = this.$D, F = "set" + (this.$u ? "UTC" : "");
|
|
@@ -106,7 +106,7 @@ function pt() {
|
|
|
106
106
|
case f:
|
|
107
107
|
return i ? c(1, y) : c(0, y + 1);
|
|
108
108
|
case p:
|
|
109
|
-
var
|
|
109
|
+
var L = this.$locale().weekStart || 0, R = (v < L ? v + 7 : v) - L;
|
|
110
110
|
return c(i ? T - R : T + (6 - R), y);
|
|
111
111
|
case b:
|
|
112
112
|
case M:
|
|
@@ -151,16 +151,16 @@ function pt() {
|
|
|
151
151
|
}, r.format = function(t) {
|
|
152
152
|
var n = this, e = this.$locale();
|
|
153
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,
|
|
155
|
-
return x && (x[
|
|
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
156
|
}, R = function(x) {
|
|
157
157
|
return u.s(c % 12 || 12, x, "0");
|
|
158
|
-
}, I = F || function(x,
|
|
158
|
+
}, I = F || function(x, N, z) {
|
|
159
159
|
var Q = x < 12 ? "AM" : "PM";
|
|
160
160
|
return z ? Q.toLowerCase() : Q;
|
|
161
161
|
};
|
|
162
|
-
return i.replace(J, (function(x,
|
|
163
|
-
return
|
|
162
|
+
return i.replace(J, (function(x, N) {
|
|
163
|
+
return N || (function(z) {
|
|
164
164
|
switch (z) {
|
|
165
165
|
case "YY":
|
|
166
166
|
return String(n.$y).slice(-2);
|
|
@@ -171,9 +171,9 @@ function pt() {
|
|
|
171
171
|
case "MM":
|
|
172
172
|
return u.s(v + 1, 2, "0");
|
|
173
173
|
case "MMM":
|
|
174
|
-
return
|
|
174
|
+
return L(e.monthsShort, v, T, 3);
|
|
175
175
|
case "MMMM":
|
|
176
|
-
return
|
|
176
|
+
return L(T, v);
|
|
177
177
|
case "D":
|
|
178
178
|
return n.$D;
|
|
179
179
|
case "DD":
|
|
@@ -181,9 +181,9 @@ function pt() {
|
|
|
181
181
|
case "d":
|
|
182
182
|
return String(n.$W);
|
|
183
183
|
case "dd":
|
|
184
|
-
return
|
|
184
|
+
return L(e.weekdaysMin, n.$W, y, 2);
|
|
185
185
|
case "ddd":
|
|
186
|
-
return
|
|
186
|
+
return L(e.weekdaysShort, n.$W, y, 3);
|
|
187
187
|
case "dddd":
|
|
188
188
|
return y[n.$W];
|
|
189
189
|
case "H":
|
|
@@ -392,7 +392,7 @@ const U = /* @__PURE__ */ mt(Mt), V = 60, Dt = [
|
|
|
392
392
|
case "drift":
|
|
393
393
|
return /* @__PURE__ */ o("div", { className: `drift font-num ${g ? "run" : ""}`, "data-digit": p, style: O, children: f });
|
|
394
394
|
default:
|
|
395
|
-
return /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o("p", { children: p }) });
|
|
395
|
+
return /* @__PURE__ */ o("div", { className: "font-num", children: /* @__PURE__ */ o("p", { children: p }) });
|
|
396
396
|
}
|
|
397
397
|
})() });
|
|
398
398
|
}, W = ft(vt);
|
package/dist/time-runner.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(nt);function lt(m){return m&&m.__esModule&&Object.prototype.hasOwnProperty.call(m,"default")?m.default:m}var q={exports:{}},ut=q.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,y="millisecond",Y="second",M="minute",C="hour",w="day",v="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:v,d:w,D:$,h:C,m:M,s:Y,ms:y,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},g=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 g(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=g(t);return this.startOf(n)<=r&&r<=this.endOf(n)},e.isAfter=function(t,n){return g(t)<this.startOf(n)},e.isBefore=function(t,n){return this.endOf(n)<g(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(X,S){var L=c.w(r.$u?Date.UTC(r.$y,S,X):new Date(r.$y,S,X),r);return a?L:L.endOf(w)},p=function(X,S){return c.w(r.toDate()[X].apply(r.toDate("s"),(a?[0,0,0,0]:[23,59,59,999]).slice(S)),r)},b=this.$W,x=this.$M,_=this.$D,F="set"+(this.$u?"UTC":"");switch(s){case T:return a?d(1,0):d(31,11);case h:return a?d(1,x):d(0,x+1);case v:var A=this.$locale().weekStart||0,V=(b<A?b+7:b)-A;return d(a?_-V:_+(6-V),x);case w:case $:return p(F+"Hours",0);case C:return p(F+"Minutes",1);case M:return p(F+"Seconds",2);case Y:return p(F+"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[M]=s+"Minutes",r[Y]=s+"Seconds",r[y]=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(x){var _=g(a);return c.w(_.date(_.date()+Math.round(x*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===v)return d(7);var p=(r={},r[M]=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,x=r.weekdays,_=r.months,F=r.meridiem,A=function(S,L,Z,R){return S&&(S[L]||S(n,a))||Z[L].slice(0,R)},V=function(S){return c.s(d%12||12,S,"0")},X=F||function(S,L,Z){var R=S<12?"AM":"PM";return Z?R.toLowerCase():R};return a.replace(P,(function(S,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 b+1;case"MM":return c.s(b+1,2,"0");case"MMM":return A(r.monthsShort,b,_,3);case"MMMM":return A(_,b);case"D":return n.$D;case"DD":return c.s(n.$D,2,"0");case"d":return String(n.$W);case"dd":return A(r.weekdaysMin,n.$W,x,2);case"ddd":return A(r.weekdaysShort,n.$W,x,3);case"dddd":return x[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 X(d,p,!0);case"A":return X(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=g(t),b=(p.utcOffset()-this.utcOffset())*f,x=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 v:a=(x-b)/6048e5;break;case w:a=(x-b)/864e5;break;case C:a=x/k;break;case M:a=x/f;break;case Y:a=x/u;break;default:a=x}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 g.prototype=dt,[["$ms",y],["$s",Y],["$m",M],["$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])}})),g.extend=function(i,e){return i.$i||(i(e,K,g),i.$i=!0),g},g.locale=G,g.isDayjs=et,g.unix=function(i){return g(1e3*i)},g.en=j[z],g.Ls=j,g.p={},g}))})(q)),q.exports}var ft=ht();const W=lt(ft),E=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=W(m).diff(W());if(l<=0)return"00:00:00";const u=Math.floor(l/1e3),f=Math.floor(u/86400),k=Math.floor(u%86400/3600),y=Math.floor(u%3600/60),Y=u%60;return`${f?`${f}:`:""}${`${k}`.padStart(2,"0")}:${`${y}`.padStart(2,"0")}:${`${Y}`.padStart(2,"0")}`},at=m=>{const l=u=>`${u}`.padStart(2,"0");return`${l(Math.floor(m/E/E))}:${l(Math.floor(m/E)%E)}:${l(m%E)}`},tt=m=>pt.some(l=>W(m,l,!0).isValid()),st="HH:mm:ss",ct=900,mt=m=>{const{mode:l,showType:u="default",size:f=40,className:k,bgColor:y,borderColor:Y,textShadowColor:M,finishCountFn:C}=m,[w,v]=O.useState(u==="count"?at(0):u==="default"?W().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":y,"--borderColor":Y,"--textShadow":M?`1px 2px 3px ${M}`:"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=()=>W().format(st):H=()=>ot(u),v(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(I,{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(I,{mode:l,time:+H[0],limit:D?-2:2,size:f}),o.jsx(I,{mode:l,time:+H[1],limit:D?-9:9,size:f}),D?o.jsx("p",{children:"小时"}):z,o.jsx(I,{mode:l,time:+J[0],limit:D?-5:5,size:f}),o.jsx(I,{mode:l,time:+J[1],limit:D?-9:9,size:f}),D?o.jsx("p",{children:"分"}):z,o.jsx(I,{mode:l,time:+P[0],limit:D?-5:5,size:f}),o.jsx(I,{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()})},vt=m=>{const{time:l,limit:u,mode:f,size:k}=m,[y,Y]=O.useState(!1),M=O.useRef({t:l}),C=O.useMemo(()=>l!==M.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!==M.current.t&&Y(!0)},[l]),O.useEffect(()=>{y&&setTimeout(()=>{M.current.t=l,Y(!1)},ct)},[y,l]);const w=()=>{const{t:v}=M.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 ${y?"run":""}`,children:[o.jsx("p",{children:h}),o.jsx("p",{children:h})]}),o.jsxs("div",{className:`clock-f ${y?"run":""}`,children:[o.jsx("p",{children:v}),o.jsx("p",{children:v})]})]});case"cube-v":return o.jsx("div",{className:`cube-v font-num ${y?"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 ${y?"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 ${y?"run":""}`,"data-digit":v,style:C,children:h});default:return o.jsx("div",{children:o.jsx("p",{children:v})})}};return o.jsx(o.Fragment,{children:w()})},I=O.memo(vt);N.TimeRunner=mt,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})}));
|
|
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,O){"use strict";var nt=document.createElement("style");nt.textContent=`@font-face{font-family:DIN Alternate;src:url(fonts/D-DIN-PRO-600-SemiBold.otf) format("truetype");font-weight:400;font-style:normal}.font-num{font-family:DIN Alternate}.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 q={exports:{}},ut=q.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,y="millisecond",Y="second",M="minute",C="hour",w="day",v="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:v,d:w,D:$,h:C,m:M,s:Y,ms:y,Q:U}[i]||String(i||"").toLowerCase().replace(/s$/,"")},u:function(i){return i===void 0}},z="en",N={};N[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();N[a]&&(r=a),t&&(N[a]=t,r=a);var s=e.split("-");if(!r&&s.length>1)return i(s[0])}else{var d=e.name;N[d]=e,r=d}return!n&&r&&(z=r),r||!n&&z},g=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 g(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=g(t);return this.startOf(n)<=r&&r<=this.endOf(n)},e.isAfter=function(t,n){return g(t)<this.startOf(n)},e.isBefore=function(t,n){return this.endOf(n)<g(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(A,S){var L=c.w(r.$u?Date.UTC(r.$y,S,A):new Date(r.$y,S,A),r);return a?L:L.endOf(w)},p=function(A,S){return c.w(r.toDate()[A].apply(r.toDate("s"),(a?[0,0,0,0]:[23,59,59,999]).slice(S)),r)},b=this.$W,x=this.$M,_=this.$D,F="set"+(this.$u?"UTC":"");switch(s){case T:return a?d(1,0):d(31,11);case h:return a?d(1,x):d(0,x+1);case v:var X=this.$locale().weekStart||0,V=(b<X?b+7:b)-X;return d(a?_-V:_+(6-V),x);case w:case $:return p(F+"Hours",0);case C:return p(F+"Minutes",1);case M:return p(F+"Seconds",2);case Y:return p(F+"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[M]=s+"Minutes",r[Y]=s+"Seconds",r[y]=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(x){var _=g(a);return c.w(_.date(_.date()+Math.round(x*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===v)return d(7);var p=(r={},r[M]=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,x=r.weekdays,_=r.months,F=r.meridiem,X=function(S,L,Z,R){return S&&(S[L]||S(n,a))||Z[L].slice(0,R)},V=function(S){return c.s(d%12||12,S,"0")},A=F||function(S,L,Z){var R=S<12?"AM":"PM";return Z?R.toLowerCase():R};return a.replace(P,(function(S,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 b+1;case"MM":return c.s(b+1,2,"0");case"MMM":return X(r.monthsShort,b,_,3);case"MMMM":return X(_,b);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,x,2);case"ddd":return X(r.weekdaysShort,n.$W,x,3);case"dddd":return x[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 A(d,p,!0);case"A":return A(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=g(t),b=(p.utcOffset()-this.utcOffset())*f,x=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 v:a=(x-b)/6048e5;break;case w:a=(x-b)/864e5;break;case C:a=x/k;break;case M:a=x/f;break;case Y:a=x/u;break;default:a=x}return r?a:c.a(a)},e.daysInMonth=function(){return this.endOf(h).$D},e.$locale=function(){return N[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 g.prototype=dt,[["$ms",y],["$s",Y],["$m",M],["$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])}})),g.extend=function(i,e){return i.$i||(i(e,K,g),i.$i=!0),g},g.locale=G,g.isDayjs=et,g.unix=function(i){return g(1e3*i)},g.en=N[z],g.Ls=N,g.p={},g}))})(q)),q.exports}var ft=ht();const W=lt(ft),E=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=W(m).diff(W());if(l<=0)return"00:00:00";const u=Math.floor(l/1e3),f=Math.floor(u/86400),k=Math.floor(u%86400/3600),y=Math.floor(u%3600/60),Y=u%60;return`${f?`${f}:`:""}${`${k}`.padStart(2,"0")}:${`${y}`.padStart(2,"0")}:${`${Y}`.padStart(2,"0")}`},at=m=>{const l=u=>`${u}`.padStart(2,"0");return`${l(Math.floor(m/E/E))}:${l(Math.floor(m/E)%E)}:${l(m%E)}`},tt=m=>pt.some(l=>W(m,l,!0).isValid()),st="HH:mm:ss",ct=900,mt=m=>{const{mode:l,showType:u="default",size:f=40,className:k,bgColor:y,borderColor:Y,textShadowColor:M,finishCountFn:C}=m,[w,v]=O.useState(u==="count"?at(0):u==="default"?W().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":y,"--borderColor":Y,"--textShadow":M?`1px 2px 3px ${M}`:"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=()=>W().format(st):H=()=>ot(u),v(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((N,Q)=>o.jsx(I,{mode:l,time:+N,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(I,{mode:l,time:+H[0],limit:D?-2:2,size:f}),o.jsx(I,{mode:l,time:+H[1],limit:D?-9:9,size:f}),D?o.jsx("p",{children:"小时"}):z,o.jsx(I,{mode:l,time:+J[0],limit:D?-5:5,size:f}),o.jsx(I,{mode:l,time:+J[1],limit:D?-9:9,size:f}),D?o.jsx("p",{children:"分"}):z,o.jsx(I,{mode:l,time:+P[0],limit:D?-5:5,size:f}),o.jsx(I,{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()})},vt=m=>{const{time:l,limit:u,mode:f,size:k}=m,[y,Y]=O.useState(!1),M=O.useRef({t:l}),C=O.useMemo(()=>l!==M.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!==M.current.t&&Y(!0)},[l]),O.useEffect(()=>{y&&setTimeout(()=>{M.current.t=l,Y(!1)},ct)},[y,l]);const w=()=>{const{t:v}=M.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 ${y?"run":""}`,children:[o.jsx("p",{children:h}),o.jsx("p",{children:h})]}),o.jsxs("div",{className:`clock-f ${y?"run":""}`,children:[o.jsx("p",{children:v}),o.jsx("p",{children:v})]})]});case"cube-v":return o.jsx("div",{className:`cube-v font-num ${y?"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 ${y?"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 ${y?"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()})},I=O.memo(vt);j.TimeRunner=mt,Object.defineProperty(j,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "time-runner",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
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",
|