vue3-time-playbar 0.1.1 → 0.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/package.json +1 -1
- package/style.css +1 -1
- package/vue3-time-playbar.mjs +4 -4
- package/vue3-time-playbar.umd.cjs +1 -1
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.player-controls[data-v-55e12a8d]{display:flex;align-items:center}.player-controls .btn-group[data-v-55e12a8d]{display:flex;align-items:center;gap:6px}.player-controls .control-btn[data-v-55e12a8d]{background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}.player-controls .control-btn[data-v-55e12a8d]:hover{background:#fff3;border-color:#fff6;color:#fff;transform:scale(1.08)}.player-controls .control-btn[data-v-55e12a8d]:active{transform:scale(.95)}.player-controls .control-btn svg[data-v-55e12a8d]{width:14px;height:14px}.player-controls .control-btn.play-btn[data-v-55e12a8d]{width:40px;height:40px;background:#409eff;border-color:transparent;color:#fff}.player-controls .control-btn.play-btn[data-v-55e12a8d]:hover{background:#66b1ff}.player-controls .control-btn.play-btn svg[data-v-55e12a8d]{width:16px;height:16px}.time-timeline[data-v-
|
|
1
|
+
.player-controls[data-v-55e12a8d]{display:flex;align-items:center}.player-controls .btn-group[data-v-55e12a8d]{display:flex;align-items:center;gap:6px}.player-controls .control-btn[data-v-55e12a8d]{background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}.player-controls .control-btn[data-v-55e12a8d]:hover{background:#fff3;border-color:#fff6;color:#fff;transform:scale(1.08)}.player-controls .control-btn[data-v-55e12a8d]:active{transform:scale(.95)}.player-controls .control-btn svg[data-v-55e12a8d]{width:14px;height:14px}.player-controls .control-btn.play-btn[data-v-55e12a8d]{width:40px;height:40px;background:#409eff;border-color:transparent;color:#fff}.player-controls .control-btn.play-btn[data-v-55e12a8d]:hover{background:#66b1ff}.player-controls .control-btn.play-btn svg[data-v-55e12a8d]{width:16px;height:16px}.time-timeline[data-v-d7d9fd3b]{position:relative;width:100%;height:52px;cursor:pointer}.time-timeline .handle-group[data-v-d7d9fd3b]{position:absolute;left:0;top:0;width:0;height:100%;z-index:20;pointer-events:none;transition:transform .2s ease-out;will-change:transform}.time-timeline .handle-group.dragging[data-v-d7d9fd3b]{transition:none}.time-timeline .handle-group .floating-tooltip[data-v-d7d9fd3b]{position:absolute;top:-33px;left:0;transform:translate(-50%);background:#409eff;color:#fff;padding:5px 10px;border-radius:50px;font-size:14px;font-weight:500;white-space:nowrap;box-shadow:0 2px 6px #0000004d;pointer-events:auto;cursor:grab}.time-timeline .handle-group .floating-tooltip[data-v-d7d9fd3b]:active{cursor:grabbing}.time-timeline .handle-group .floating-tooltip[data-v-d7d9fd3b]:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:#409eff}.time-timeline .handle-group .handle-visual[data-v-d7d9fd3b]{position:absolute;top:10px;left:0;transform:translate(-50%,-50%);width:8px;height:8px;background:#fff;border-radius:50%;border:2px solid #409eff;box-shadow:0 0 0 3px #409eff40}.time-timeline .scroll-container[data-v-d7d9fd3b]{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.time-timeline .scroll-container[data-v-d7d9fd3b]::-webkit-scrollbar{display:none}.time-timeline .timeline-inner[data-v-d7d9fd3b]{position:relative;min-width:100%;height:100%}.time-timeline .track-bg[data-v-d7d9fd3b]{position:absolute;top:8px;height:4px;background:#ffffff2e;border-radius:2px}.time-timeline .track-active[data-v-d7d9fd3b]{position:absolute;top:8px;height:4px;background:#409eff;border-radius:2px;pointer-events:none;transition:width .15s ease-out;z-index:2}.time-timeline .ticks-container[data-v-d7d9fd3b]{position:absolute;top:0;bottom:0;pointer-events:none}.time-timeline .tick-item[data-v-d7d9fd3b]{position:absolute;top:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center}.time-timeline .tick-item .tick-mark[data-v-d7d9fd3b]{margin-top:14px;width:1px;height:5px;background:#ffffff59;flex-shrink:0}.time-timeline .tick-item .tick-label[data-v-d7d9fd3b]{margin-top:2px;font-size:11px;color:#fff9;line-height:1}.time-timeline .tick-item .day-label[data-v-d7d9fd3b]{margin-top:3px;font-size:11px;font-weight:600;color:#ffffffe6;white-space:nowrap;line-height:1}.time-timeline .tick-item.is-day-boundary .tick-mark[data-v-d7d9fd3b]{margin-top:14px;width:2px;height:18px;background:#fffc}.speed-selector[data-v-30c5e152]{flex-shrink:0;margin-left:10px;padding-left:10px;border-left:1px solid rgba(255,255,255,.12);position:relative}.speed-selector .speed-trigger[data-v-30c5e152]{display:inline-flex;align-items:center;gap:4px;min-width:36px;height:28px;padding:0 8px;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:4px;color:#fffc;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s,color .2s}.speed-selector .speed-trigger[data-v-30c5e152]:hover{background:#fff3;border-color:#fff6;color:#fff}.speed-selector .speed-trigger .arrow-icon[data-v-30c5e152]{width:10px;height:10px;transition:transform .2s}.speed-selector .speed-trigger .arrow-icon.open[data-v-30c5e152]{transform:rotate(180deg)}.speed-selector .speed-dropdown[data-v-30c5e152]{position:absolute;left:16px;min-width:56px;background:#083082f2;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:4px 0;box-shadow:0 4px 12px #0006;z-index:30}.speed-selector .speed-dropdown.is-up[data-v-30c5e152]{bottom:calc(100% + 6px)}.speed-selector .speed-dropdown.is-down[data-v-30c5e152]{top:calc(100% + 6px)}.speed-selector .speed-dropdown .speed-option[data-v-30c5e152]{padding:6px 12px;font-size:13px;color:#ffffffb3;cursor:pointer;text-align:center;transition:background .15s,color .15s}.speed-selector .speed-dropdown .speed-option[data-v-30c5e152]:hover{background:#ffffff26;color:#fff}.speed-selector .speed-dropdown .speed-option.active[data-v-30c5e152]{color:#409eff;font-weight:600}.dropdown-up-enter-active[data-v-30c5e152],.dropdown-up-leave-active[data-v-30c5e152]{transition:opacity .15s,transform .15s}.dropdown-up-enter-from[data-v-30c5e152],.dropdown-up-leave-to[data-v-30c5e152]{opacity:0;transform:translateY(4px)}.dropdown-down-enter-active[data-v-30c5e152],.dropdown-down-leave-active[data-v-30c5e152]{transition:opacity .15s,transform .15s}.dropdown-down-enter-from[data-v-30c5e152],.dropdown-down-leave-to[data-v-30c5e152]{opacity:0;transform:translateY(-4px)}.g-time-player[data-v-6dfd5ab6]{display:flex;align-items:center;width:100%;height:72px;filter:drop-shadow(rgba(0,0,0,.8) 0px 0px 2px);background:#083082aa;box-shadow:0 0 16px #0193fa99 inset;border-radius:4px;padding:0 24px;box-sizing:border-box;color:#fff;-webkit-user-select:none;user-select:none;box-shadow:0 4px 20px #00000059}.g-time-player .controls-wrapper[data-v-6dfd5ab6]{flex-shrink:0;margin-right:10px;border-right:1px solid rgba(255,255,255,.12);padding-right:10px}.g-time-player .timeline-wrapper[data-v-6dfd5ab6]{flex:1;min-width:0;height:100%;display:flex;align-items:center;overflow:visible;position:relative}
|
package/vue3-time-playbar.mjs
CHANGED
|
@@ -178,7 +178,7 @@ const Qe = {
|
|
|
178
178
|
}, Ze = {
|
|
179
179
|
key: 1,
|
|
180
180
|
class: "day-label"
|
|
181
|
-
}, et =
|
|
181
|
+
}, et = 35, tt = 35, nt = /* @__PURE__ */ Z({
|
|
182
182
|
__name: "TimeTimeline",
|
|
183
183
|
props: {
|
|
184
184
|
modelValue: {},
|
|
@@ -371,7 +371,7 @@ const Qe = {
|
|
|
371
371
|
], 544)
|
|
372
372
|
], 512));
|
|
373
373
|
}
|
|
374
|
-
}), lt = /* @__PURE__ */ ee(nt, [["__scopeId", "data-v-
|
|
374
|
+
}), lt = /* @__PURE__ */ ee(nt, [["__scopeId", "data-v-d7d9fd3b"]]), ot = { class: "speed-value" }, at = ["onClick"], it = /* @__PURE__ */ Z({
|
|
375
375
|
__name: "SpeedSelector",
|
|
376
376
|
props: {
|
|
377
377
|
modelValue: {},
|
|
@@ -438,7 +438,7 @@ const Qe = {
|
|
|
438
438
|
}, 8, ["name"])
|
|
439
439
|
], 512));
|
|
440
440
|
}
|
|
441
|
-
}), st = /* @__PURE__ */ ee(it, [["__scopeId", "data-v-
|
|
441
|
+
}), st = /* @__PURE__ */ ee(it, [["__scopeId", "data-v-30c5e152"]]), rt = { class: "g-time-player" }, ut = { class: "controls-wrapper" }, ct = { class: "timeline-wrapper" }, dt = /* @__PURE__ */ Z({
|
|
442
442
|
__name: "index",
|
|
443
443
|
props: {
|
|
444
444
|
modelValue: {},
|
|
@@ -568,7 +568,7 @@ const Qe = {
|
|
|
568
568
|
}, null, 8, ["modelValue", "options"])
|
|
569
569
|
]));
|
|
570
570
|
}
|
|
571
|
-
}), mt = /* @__PURE__ */ ee(dt, [["__scopeId", "data-v-
|
|
571
|
+
}), mt = /* @__PURE__ */ ee(dt, [["__scopeId", "data-v-6dfd5ab6"]]);
|
|
572
572
|
export {
|
|
573
573
|
A as addHours,
|
|
574
574
|
mt as default,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.Vue3TimePlaybar={},u.Vue))})(this,(function(u,e){"use strict";const ue={class:"player-controls"},me={class:"btn-group"},fe=["title"],pe={key:0,viewBox:"0 0 24 24",fill:"currentColor",stroke:"none"},ge={key:1,viewBox:"0 0 24 24",fill:"currentColor",stroke:"none"},ye=e.defineComponent({__name:"PlayerControls",props:{isPlaying:{type:Boolean}},emits:["toggle-play","prev","next"],setup(t){return(a,o)=>(e.openBlock(),e.createElementBlock("div",ue,[e.createElementVNode("div",me,[e.createElementVNode("button",{class:"control-btn",onClick:o[0]||(o[0]=n=>a.$emit("prev")),title:"上一时刻"},[e.renderSlot(a.$slots,"prev",{},()=>[o[3]||(o[3]=e.createElementVNode("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("polygon",{points:"19 20 9 12 19 4 19 20"}),e.createElementVNode("line",{x1:"5",y1:"19",x2:"5",y2:"5"})],-1))],!0)]),e.createElementVNode("button",{class:"control-btn play-btn",onClick:o[1]||(o[1]=n=>a.$emit("toggle-play")),title:t.isPlaying?"暂停":"播放"},[e.renderSlot(a.$slots,"play",{isPlaying:t.isPlaying},()=>[t.isPlaying?(e.openBlock(),e.createElementBlock("svg",ge,[...o[5]||(o[5]=[e.createElementVNode("rect",{x:"6",y:"4",width:"4",height:"16",rx:"1"},null,-1),e.createElementVNode("rect",{x:"14",y:"4",width:"4",height:"16",rx:"1"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",pe,[...o[4]||(o[4]=[e.createElementVNode("polygon",{points:"5 3 19 12 5 21 5 3"},null,-1)])]))],!0)],8,fe),e.createElementVNode("button",{class:"control-btn",onClick:o[2]||(o[2]=n=>a.$emit("next")),title:"下一时刻"},[e.renderSlot(a.$slots,"next",{},()=>[o[6]||(o[6]=e.createElementVNode("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("polygon",{points:"5 4 15 12 5 20 5 4"}),e.createElementVNode("line",{x1:"19",y1:"5",x2:"19",y2:"19"})],-1))],!0)])])]))}}),A=(t,a)=>{const o=t.__vccOpts||t;for(const[n,s]of a)o[n]=s;return o},he=A(ye,[["__scopeId","data-v-55e12a8d"]]),ke=["周日","周一","周二","周三","周四","周五","周六"];function k(t){if(typeof t=="number")return t;if(t instanceof Date)return t.getTime();const a=Date.parse(t);return Number.isNaN(a)?(console.warn(`[GTimePlayer] 无法解析时间: "${t}"`),0):a}function _(t,a=2){return String(t).padStart(a,"0")}function ee(t){return new Date(t).getHours()}function te(t){return new Date(t).getDay()}function U(t){return ke[te(t)]??""}function ne(t){return _(new Date(t).getHours())}function X(t){const a=new Date(t);return`${a.getMonth()+1}月${a.getDate()}日`}function oe(t){const a=new Date(t);return`${_(a.getHours())}:${_(a.getMinutes())}`}function le(t){return`${X(t)} ${U(t)} ${oe(t)}`}function G(t){const a=new Date(t);return`${a.getFullYear()}${_(a.getMonth()+1)}${_(a.getDate())}`}function ae(t){return`${X(t)} ${U(t)}`}function x(t,a){return t+a*36e5}function ve(t,a){return(k(a)-k(t))/36e5}function re(t){const a=new Date(t);return a.setHours(24,0,0,0),a.getTime()}function ie(t,a){if(t.length===0)return-1;if(t.length===1)return 0;let o=0,n=t.length-1;if(a<=t[o])return o;if(a>=t[n])return n;for(;o<=n;){const s=o+n>>>1,m=t[s];if(m===a)return s;m<a?o=s+1:n=s-1}return o>=t.length?n:n<0||Math.abs(t[o]-a)<Math.abs(t[n]-a)?o:n}function se(t,a){let o=0,n=t.length-1;for(;o<=n;){const s=o+n>>>1,m=t[s];if(m===a)return s;m<a?o=s+1:n=s-1}return-1}const we={key:0,class:"tick-label"},Te={key:1,class:"day-label"},Ve=50,Ee=40,be=A(e.defineComponent({__name:"TimeTimeline",props:{modelValue:{},startTime:{},endTime:{},interval:{},minTickSpacing:{},tickLabelMode:{default:"all"},formatTooltip:{}},emits:["update:modelValue","change","playing-pause"],setup(t,{emit:a}){const o=[2,8,14,20],n=t,s=a,m=e.ref(null),g=e.ref(null),H=e.ref(null),w=e.ref(0),f=e.ref(0),y=e.ref(0);let v=!1,d=0,$=!1,N=!1,B=null;const I=e.ref(!1),R=e.computed(()=>{const r=k(n.startTime),c=k(n.endTime),i=c-r;if(i<=0)return[];const T=[];let p=r;for(;p<=c;){const S=(p-r)/i*100,E=ee(p),D=T.length===0,J=G(p),Q=D?null:G(T[T.length-1].time),O=!D&&Q!==J||D&&E===0;let M=!1;if(E===0)M=!0;else if(D){const P=re(p);(x(p,n.interval)>P||c<P)&&(M=!0)}const Z=E===0&&M?!1:n.tickLabelMode==="all"||o.includes(E);T.push({time:p,percent:S,label:ne(p),showLabel:Z,dayLabel:ae(p),showDayLabel:M,isDayBoundary:O}),p=x(p,n.interval)}return T}),j=e.computed(()=>R.value.map(r=>r.time)),b=e.computed(()=>n.minTickSpacing!==void 0?n.minTickSpacing:n.tickLabelMode==="major"?5:15),z=e.computed(()=>{const r=R.value.length;return r<2?w.value||0:(r-1)*b.value}),C=e.computed(()=>z.value>w.value&&w.value>0),V=e.computed(()=>C.value?Ve:Ee),l=e.computed(()=>C.value?z.value:Math.max(0,w.value-V.value*2)),h=e.computed(()=>l.value+V.value*2),L=e.computed(()=>w.value&&C.value?h.value+"px":"100%"),Ce=e.computed(()=>({left:V.value+"px",width:l.value+"px"})),Le=e.computed(()=>({left:V.value+"px",width:l.value+"px"})),F=e.computed(()=>{const r=k(n.startTime),c=k(n.endTime),i=k(n.modelValue);return i<=r?0:i>=c?100:(i-r)/(c-r)*100}),Me=e.computed(()=>({left:V.value+"px",width:F.value/100*l.value+"px"})),Pe=e.computed(()=>{const r=k(n.modelValue);return n.formatTooltip?n.formatTooltip(r):le(r)}),K=e.computed(()=>V.value+F.value/100*l.value-y.value),_e=e.computed(()=>K.value>-50&&K.value<w.value+50),He=e.computed(()=>({transform:`translateX(${K.value}px)`}));function Ie(){g.value&&(f.value=g.value.scrollLeft,$||(y.value=g.value.scrollLeft))}function Re(r){!g.value||!C.value||(g.value.scrollLeft+=r.deltaY||r.deltaX)}function W(r=!1){if(!C.value||!g.value||v)return;const c=V.value+F.value/100*l.value,i=w.value,T=h.value-i,p=Math.max(0,Math.min(c-i/2,T));y.value=p;const S=g.value;if(r||Math.abs(S.scrollLeft-p)<1){S.scrollLeft=p,f.value=p;return}d&&cancelAnimationFrame(d);const E=S.scrollLeft,D=p-E;$=!0;const J=200,Q=performance.now();function O(M){const Z=M-Q,P=Math.min(Z/J,1),de=1-(1-P)*(1-P);S.scrollLeft=E+D*de,f.value=S.scrollLeft,P<1?d=requestAnimationFrame(O):(d=0,$=!1)}d=requestAnimationFrame(O)}e.watch(F,()=>W()),e.watch(w,()=>W());function q(r){if(!g.value)return k(n.startTime);const c=g.value.getBoundingClientRect(),i=g.value.scrollLeft,p=r.clientX-c.left+i-V.value,S=Math.max(0,Math.min(p,l.value)),E=k(n.startTime),D=k(n.endTime);return E+(D-E)*(S/(l.value||1))}function ze(r){const c=j.value;if(c.length===0)return{time:r,index:-1};const i=ie(c,r);return{time:c[i]??r,index:i}}function Y(r){const{time:c,index:i}=ze(r);c!==k(n.modelValue)&&(s("update:modelValue",c),s("change",c,i))}function We(r){if(N){N=!1;return}Y(q(r))}function Ae(r){const c=r.clientX;N=!1,v=!0,s("playing-pause");const i=p=>{Math.abs(p.clientX-c)>3&&(N=!0),Y(q(p))},T=()=>{v=!1,document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",T),e.nextTick(()=>W())};document.addEventListener("mousemove",i),document.addEventListener("mouseup",T)}function Fe(r){v=!0,N=!1,I.value=!0,document.body.style.cursor="grabbing",s("playing-pause");const c=T=>{N=!0,Y(q(T))},i=()=>{v=!1,I.value=!1,document.body.style.cursor="",document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",i),e.nextTick(()=>W())};document.addEventListener("mousemove",c),document.addEventListener("mouseup",i)}return e.onMounted(()=>{g.value&&(w.value=g.value.clientWidth,B=new ResizeObserver(r=>{r[0]&&(w.value=r[0].contentRect.width)}),B.observe(g.value)),e.nextTick(()=>W())}),e.onUnmounted(()=>{d&&cancelAnimationFrame(d),B==null||B.disconnect()}),(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:"time-timeline",ref_key:"timelineRef",ref:m},[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["handle-group",{dragging:I.value}]),style:e.normalizeStyle(He.value)},[e.createElementVNode("div",{class:"floating-tooltip",onMousedown:e.withModifiers(Fe,["prevent","stop"])},e.toDisplayString(Pe.value),33),c[0]||(c[0]=e.createElementVNode("div",{class:"handle-visual"},null,-1))],6),[[e.vShow,_e.value]]),e.createElementVNode("div",{class:"scroll-container",ref_key:"scrollRef",ref:g,onScroll:Ie,onWheel:e.withModifiers(Re,["prevent"])},[e.createElementVNode("div",{class:"timeline-inner",ref_key:"innerRef",ref:H,style:e.normalizeStyle({width:L.value}),onMousedown:e.withModifiers(Ae,["prevent"]),onClick:We},[e.createElementVNode("div",{class:"track-bg",style:e.normalizeStyle(Ce.value)},null,4),e.createElementVNode("div",{class:"track-active",style:e.normalizeStyle(Me.value)},null,4),e.createElementVNode("div",{class:"ticks-container",style:e.normalizeStyle(Le.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(R.value,i=>(e.openBlock(),e.createElementBlock("div",{key:i.time,class:e.normalizeClass(["tick-item",{"is-day-boundary":i.isDayBoundary}]),style:e.normalizeStyle({left:i.percent+"%"})},[c[1]||(c[1]=e.createElementVNode("div",{class:"tick-mark"},null,-1)),i.showLabel?(e.openBlock(),e.createElementBlock("div",we,e.toDisplayString(i.label),1)):e.createCommentVNode("",!0),i.showDayLabel?(e.openBlock(),e.createElementBlock("div",Te,e.toDisplayString(i.dayLabel),1)):e.createCommentVNode("",!0)],6))),128))],4)],36)],544)],512))}}),[["__scopeId","data-v-2c40052b"]]),Se={class:"speed-value"},Ne=["onClick"],De=A(e.defineComponent({__name:"SpeedSelector",props:{modelValue:{},options:{}},emits:["update:modelValue"],setup(t,{emit:a}){const o=a,n=e.ref(!1),s=e.ref(!0),m=e.ref(null);function g(){if(!m.value)return;const y=m.value.getBoundingClientRect(),v=y.top,d=window.innerHeight-y.bottom;s.value=v>=d}function H(){n.value||g(),n.value=!n.value}function w(y){o("update:modelValue",y),n.value=!1}function f(y){m.value&&!m.value.contains(y.target)&&(n.value=!1)}return e.onMounted(()=>document.addEventListener("mousedown",f)),e.onUnmounted(()=>document.removeEventListener("mousedown",f)),(y,v)=>(e.openBlock(),e.createElementBlock("div",{class:"speed-selector",ref_key:"selectorRef",ref:m},[e.createElementVNode("div",{class:"speed-trigger",onClick:H},[e.createElementVNode("span",Se,e.toDisplayString(t.modelValue)+"x",1),(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["arrow-icon",{open:n.value}]),viewBox:"0 0 12 12",fill:"currentColor"},[...v[0]||(v[0]=[e.createElementVNode("path",{d:"M2.5 4.5L6 8L9.5 4.5",stroke:"currentColor","stroke-width":"1.5",fill:"none","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])],2))]),e.createVNode(e.Transition,{name:s.value?"dropdown-up":"dropdown-down"},{default:e.withCtx(()=>[n.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["speed-dropdown",s.value?"is-up":"is-down"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,d=>(e.openBlock(),e.createElementBlock("div",{key:d,class:e.normalizeClass(["speed-option",{active:d===t.modelValue}]),onClick:$=>w(d)},e.toDisplayString(d)+"x ",11,Ne))),128))],2)):e.createCommentVNode("",!0)]),_:1},8,["name"])],512))}}),[["__scopeId","data-v-e4832d4c"]]),xe={class:"g-time-player"},$e={class:"controls-wrapper"},Be={class:"timeline-wrapper"},ce=A(e.defineComponent({__name:"index",props:{modelValue:{},startTime:{},endTime:{},interval:{default:1},playInterval:{default:1e3},speed:{default:1},speedOptions:{default:()=>[.5,1,2,3]},minTickSpacing:{},tickLabelMode:{default:"all"},formatTooltip:{}},emits:["update:modelValue","change"],setup(t,{emit:a}){const o=t,n=a,s=e.computed(()=>k(o.startTime)),m=e.computed(()=>k(o.endTime)),g=e.computed(()=>s.value),H=e.computed(()=>m.value),w=e.computed(()=>{const l=[];let h=s.value;for(;h<=m.value;)l.push(h),h=x(h,o.interval);return l}),f=e.ref(k(o.modelValue??o.startTime)),y=e.ref(!1),v=e.ref(o.speed);let d=null;const $=e.computed(()=>o.playInterval/v.value);e.watch(()=>o.speed,l=>{v.value=l});function N(l){const h=se(w.value,l);return h>=0?h:0}function B(l,h){n("update:modelValue",l),n("change",{time:l,index:N(l)})}function I(l,h){n("change",{time:l,index:h})}e.watch(()=>o.modelValue,l=>{l!==void 0&&!y.value&&(f.value=k(l))}),e.watch(s,()=>{b(),f.value=s.value}),e.watch(m,l=>{f.value>l&&(f.value=l,b())}),e.watch(f,l=>{B(l),l>=m.value&&b()});function R(){y.value?b():j()}function j(){f.value>=m.value&&(f.value=s.value),y.value=!0,d&&clearInterval(d),d=setInterval(z,$.value)}function b(){y.value=!1,d&&(clearInterval(d),d=null)}e.watch($,l=>{y.value&&(d&&clearInterval(d),d=setInterval(z,l))});function z(){const l=x(f.value,o.interval);if(l>m.value){f.value=m.value,b();return}f.value=l}function C(){const l=x(f.value,-o.interval);f.value=l<s.value?s.value:l}function V(){const l=x(f.value,o.interval);f.value=l>m.value?m.value:l}return e.onUnmounted(()=>b()),(l,h)=>(e.openBlock(),e.createElementBlock("div",xe,[e.createElementVNode("div",$e,[e.createVNode(he,{"is-playing":y.value,onTogglePlay:R,onPrev:C,onNext:V},e.createSlots({_:2},[l.$slots.prev?{name:"prev",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"prev",{},void 0,!0)]),key:"0"}:void 0,l.$slots.play?{name:"play",fn:e.withCtx(({isPlaying:L})=>[e.renderSlot(l.$slots,"play",{isPlaying:L},void 0,!0)]),key:"1"}:void 0,l.$slots.next?{name:"next",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"next",{},void 0,!0)]),key:"2"}:void 0]),1032,["is-playing"])]),e.createElementVNode("div",Be,[e.createVNode(be,{modelValue:f.value,"onUpdate:modelValue":h[0]||(h[0]=L=>f.value=L),"start-time":g.value,"end-time":H.value,interval:t.interval,"min-tick-spacing":t.minTickSpacing,"tick-label-mode":t.tickLabelMode,"format-tooltip":t.formatTooltip,onPlayingPause:b,onChange:I},null,8,["modelValue","start-time","end-time","interval","min-tick-spacing","tick-label-mode","format-tooltip"])]),e.createVNode(De,{modelValue:v.value,"onUpdate:modelValue":h[1]||(h[1]=L=>v.value=L),options:t.speedOptions},null,8,["modelValue","options"])]))}}),[["__scopeId","data-v-12c09d1e"]]);u.addHours=x,u.default=ce,u.defaultTooltipFormat=le,u.diffHours=ve,u.findNearestTickIndex=ie,u.findTickIndex=se,u.formatDayLabel=ae,u.formatHH=ne,u.formatHHmm=oe,u.formatMD=X,u.getDateKey=G,u.getDayOfWeek=te,u.getHour=ee,u.getNextMidnight=re,u.getWeekdayShort=U,u.toTimestamp=k,u.vue3TimePlaybar=ce,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
|
1
|
+
(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.Vue3TimePlaybar={},u.Vue))})(this,(function(u,e){"use strict";const ue={class:"player-controls"},me={class:"btn-group"},fe=["title"],pe={key:0,viewBox:"0 0 24 24",fill:"currentColor",stroke:"none"},ge={key:1,viewBox:"0 0 24 24",fill:"currentColor",stroke:"none"},ye=e.defineComponent({__name:"PlayerControls",props:{isPlaying:{type:Boolean}},emits:["toggle-play","prev","next"],setup(t){return(a,o)=>(e.openBlock(),e.createElementBlock("div",ue,[e.createElementVNode("div",me,[e.createElementVNode("button",{class:"control-btn",onClick:o[0]||(o[0]=n=>a.$emit("prev")),title:"上一时刻"},[e.renderSlot(a.$slots,"prev",{},()=>[o[3]||(o[3]=e.createElementVNode("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("polygon",{points:"19 20 9 12 19 4 19 20"}),e.createElementVNode("line",{x1:"5",y1:"19",x2:"5",y2:"5"})],-1))],!0)]),e.createElementVNode("button",{class:"control-btn play-btn",onClick:o[1]||(o[1]=n=>a.$emit("toggle-play")),title:t.isPlaying?"暂停":"播放"},[e.renderSlot(a.$slots,"play",{isPlaying:t.isPlaying},()=>[t.isPlaying?(e.openBlock(),e.createElementBlock("svg",ge,[...o[5]||(o[5]=[e.createElementVNode("rect",{x:"6",y:"4",width:"4",height:"16",rx:"1"},null,-1),e.createElementVNode("rect",{x:"14",y:"4",width:"4",height:"16",rx:"1"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",pe,[...o[4]||(o[4]=[e.createElementVNode("polygon",{points:"5 3 19 12 5 21 5 3"},null,-1)])]))],!0)],8,fe),e.createElementVNode("button",{class:"control-btn",onClick:o[2]||(o[2]=n=>a.$emit("next")),title:"下一时刻"},[e.renderSlot(a.$slots,"next",{},()=>[o[6]||(o[6]=e.createElementVNode("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("polygon",{points:"5 4 15 12 5 20 5 4"}),e.createElementVNode("line",{x1:"19",y1:"5",x2:"19",y2:"19"})],-1))],!0)])])]))}}),A=(t,a)=>{const o=t.__vccOpts||t;for(const[n,s]of a)o[n]=s;return o},he=A(ye,[["__scopeId","data-v-55e12a8d"]]),ke=["周日","周一","周二","周三","周四","周五","周六"];function k(t){if(typeof t=="number")return t;if(t instanceof Date)return t.getTime();const a=Date.parse(t);return Number.isNaN(a)?(console.warn(`[GTimePlayer] 无法解析时间: "${t}"`),0):a}function _(t,a=2){return String(t).padStart(a,"0")}function ee(t){return new Date(t).getHours()}function te(t){return new Date(t).getDay()}function U(t){return ke[te(t)]??""}function ne(t){return _(new Date(t).getHours())}function X(t){const a=new Date(t);return`${a.getMonth()+1}月${a.getDate()}日`}function oe(t){const a=new Date(t);return`${_(a.getHours())}:${_(a.getMinutes())}`}function le(t){return`${X(t)} ${U(t)} ${oe(t)}`}function G(t){const a=new Date(t);return`${a.getFullYear()}${_(a.getMonth()+1)}${_(a.getDate())}`}function ae(t){return`${X(t)} ${U(t)}`}function x(t,a){return t+a*36e5}function ve(t,a){return(k(a)-k(t))/36e5}function re(t){const a=new Date(t);return a.setHours(24,0,0,0),a.getTime()}function ie(t,a){if(t.length===0)return-1;if(t.length===1)return 0;let o=0,n=t.length-1;if(a<=t[o])return o;if(a>=t[n])return n;for(;o<=n;){const s=o+n>>>1,m=t[s];if(m===a)return s;m<a?o=s+1:n=s-1}return o>=t.length?n:n<0||Math.abs(t[o]-a)<Math.abs(t[n]-a)?o:n}function se(t,a){let o=0,n=t.length-1;for(;o<=n;){const s=o+n>>>1,m=t[s];if(m===a)return s;m<a?o=s+1:n=s-1}return-1}const we={key:0,class:"tick-label"},Te={key:1,class:"day-label"},Ve=35,Ee=35,be=A(e.defineComponent({__name:"TimeTimeline",props:{modelValue:{},startTime:{},endTime:{},interval:{},minTickSpacing:{},tickLabelMode:{default:"all"},formatTooltip:{}},emits:["update:modelValue","change","playing-pause"],setup(t,{emit:a}){const o=[2,8,14,20],n=t,s=a,m=e.ref(null),g=e.ref(null),H=e.ref(null),w=e.ref(0),f=e.ref(0),y=e.ref(0);let v=!1,d=0,$=!1,N=!1,B=null;const I=e.ref(!1),R=e.computed(()=>{const r=k(n.startTime),c=k(n.endTime),i=c-r;if(i<=0)return[];const T=[];let p=r;for(;p<=c;){const S=(p-r)/i*100,E=ee(p),D=T.length===0,J=G(p),Q=D?null:G(T[T.length-1].time),O=!D&&Q!==J||D&&E===0;let M=!1;if(E===0)M=!0;else if(D){const P=re(p);(x(p,n.interval)>P||c<P)&&(M=!0)}const Z=E===0&&M?!1:n.tickLabelMode==="all"||o.includes(E);T.push({time:p,percent:S,label:ne(p),showLabel:Z,dayLabel:ae(p),showDayLabel:M,isDayBoundary:O}),p=x(p,n.interval)}return T}),j=e.computed(()=>R.value.map(r=>r.time)),b=e.computed(()=>n.minTickSpacing!==void 0?n.minTickSpacing:n.tickLabelMode==="major"?5:15),z=e.computed(()=>{const r=R.value.length;return r<2?w.value||0:(r-1)*b.value}),C=e.computed(()=>z.value>w.value&&w.value>0),V=e.computed(()=>C.value?Ve:Ee),l=e.computed(()=>C.value?z.value:Math.max(0,w.value-V.value*2)),h=e.computed(()=>l.value+V.value*2),L=e.computed(()=>w.value&&C.value?h.value+"px":"100%"),Ce=e.computed(()=>({left:V.value+"px",width:l.value+"px"})),Le=e.computed(()=>({left:V.value+"px",width:l.value+"px"})),F=e.computed(()=>{const r=k(n.startTime),c=k(n.endTime),i=k(n.modelValue);return i<=r?0:i>=c?100:(i-r)/(c-r)*100}),Me=e.computed(()=>({left:V.value+"px",width:F.value/100*l.value+"px"})),Pe=e.computed(()=>{const r=k(n.modelValue);return n.formatTooltip?n.formatTooltip(r):le(r)}),K=e.computed(()=>V.value+F.value/100*l.value-y.value),_e=e.computed(()=>K.value>-50&&K.value<w.value+50),He=e.computed(()=>({transform:`translateX(${K.value}px)`}));function Ie(){g.value&&(f.value=g.value.scrollLeft,$||(y.value=g.value.scrollLeft))}function Re(r){!g.value||!C.value||(g.value.scrollLeft+=r.deltaY||r.deltaX)}function W(r=!1){if(!C.value||!g.value||v)return;const c=V.value+F.value/100*l.value,i=w.value,T=h.value-i,p=Math.max(0,Math.min(c-i/2,T));y.value=p;const S=g.value;if(r||Math.abs(S.scrollLeft-p)<1){S.scrollLeft=p,f.value=p;return}d&&cancelAnimationFrame(d);const E=S.scrollLeft,D=p-E;$=!0;const J=200,Q=performance.now();function O(M){const Z=M-Q,P=Math.min(Z/J,1),de=1-(1-P)*(1-P);S.scrollLeft=E+D*de,f.value=S.scrollLeft,P<1?d=requestAnimationFrame(O):(d=0,$=!1)}d=requestAnimationFrame(O)}e.watch(F,()=>W()),e.watch(w,()=>W());function q(r){if(!g.value)return k(n.startTime);const c=g.value.getBoundingClientRect(),i=g.value.scrollLeft,p=r.clientX-c.left+i-V.value,S=Math.max(0,Math.min(p,l.value)),E=k(n.startTime),D=k(n.endTime);return E+(D-E)*(S/(l.value||1))}function ze(r){const c=j.value;if(c.length===0)return{time:r,index:-1};const i=ie(c,r);return{time:c[i]??r,index:i}}function Y(r){const{time:c,index:i}=ze(r);c!==k(n.modelValue)&&(s("update:modelValue",c),s("change",c,i))}function We(r){if(N){N=!1;return}Y(q(r))}function Ae(r){const c=r.clientX;N=!1,v=!0,s("playing-pause");const i=p=>{Math.abs(p.clientX-c)>3&&(N=!0),Y(q(p))},T=()=>{v=!1,document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",T),e.nextTick(()=>W())};document.addEventListener("mousemove",i),document.addEventListener("mouseup",T)}function Fe(r){v=!0,N=!1,I.value=!0,document.body.style.cursor="grabbing",s("playing-pause");const c=T=>{N=!0,Y(q(T))},i=()=>{v=!1,I.value=!1,document.body.style.cursor="",document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",i),e.nextTick(()=>W())};document.addEventListener("mousemove",c),document.addEventListener("mouseup",i)}return e.onMounted(()=>{g.value&&(w.value=g.value.clientWidth,B=new ResizeObserver(r=>{r[0]&&(w.value=r[0].contentRect.width)}),B.observe(g.value)),e.nextTick(()=>W())}),e.onUnmounted(()=>{d&&cancelAnimationFrame(d),B==null||B.disconnect()}),(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:"time-timeline",ref_key:"timelineRef",ref:m},[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["handle-group",{dragging:I.value}]),style:e.normalizeStyle(He.value)},[e.createElementVNode("div",{class:"floating-tooltip",onMousedown:e.withModifiers(Fe,["prevent","stop"])},e.toDisplayString(Pe.value),33),c[0]||(c[0]=e.createElementVNode("div",{class:"handle-visual"},null,-1))],6),[[e.vShow,_e.value]]),e.createElementVNode("div",{class:"scroll-container",ref_key:"scrollRef",ref:g,onScroll:Ie,onWheel:e.withModifiers(Re,["prevent"])},[e.createElementVNode("div",{class:"timeline-inner",ref_key:"innerRef",ref:H,style:e.normalizeStyle({width:L.value}),onMousedown:e.withModifiers(Ae,["prevent"]),onClick:We},[e.createElementVNode("div",{class:"track-bg",style:e.normalizeStyle(Ce.value)},null,4),e.createElementVNode("div",{class:"track-active",style:e.normalizeStyle(Me.value)},null,4),e.createElementVNode("div",{class:"ticks-container",style:e.normalizeStyle(Le.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(R.value,i=>(e.openBlock(),e.createElementBlock("div",{key:i.time,class:e.normalizeClass(["tick-item",{"is-day-boundary":i.isDayBoundary}]),style:e.normalizeStyle({left:i.percent+"%"})},[c[1]||(c[1]=e.createElementVNode("div",{class:"tick-mark"},null,-1)),i.showLabel?(e.openBlock(),e.createElementBlock("div",we,e.toDisplayString(i.label),1)):e.createCommentVNode("",!0),i.showDayLabel?(e.openBlock(),e.createElementBlock("div",Te,e.toDisplayString(i.dayLabel),1)):e.createCommentVNode("",!0)],6))),128))],4)],36)],544)],512))}}),[["__scopeId","data-v-d7d9fd3b"]]),Se={class:"speed-value"},Ne=["onClick"],De=A(e.defineComponent({__name:"SpeedSelector",props:{modelValue:{},options:{}},emits:["update:modelValue"],setup(t,{emit:a}){const o=a,n=e.ref(!1),s=e.ref(!0),m=e.ref(null);function g(){if(!m.value)return;const y=m.value.getBoundingClientRect(),v=y.top,d=window.innerHeight-y.bottom;s.value=v>=d}function H(){n.value||g(),n.value=!n.value}function w(y){o("update:modelValue",y),n.value=!1}function f(y){m.value&&!m.value.contains(y.target)&&(n.value=!1)}return e.onMounted(()=>document.addEventListener("mousedown",f)),e.onUnmounted(()=>document.removeEventListener("mousedown",f)),(y,v)=>(e.openBlock(),e.createElementBlock("div",{class:"speed-selector",ref_key:"selectorRef",ref:m},[e.createElementVNode("div",{class:"speed-trigger",onClick:H},[e.createElementVNode("span",Se,e.toDisplayString(t.modelValue)+"x",1),(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["arrow-icon",{open:n.value}]),viewBox:"0 0 12 12",fill:"currentColor"},[...v[0]||(v[0]=[e.createElementVNode("path",{d:"M2.5 4.5L6 8L9.5 4.5",stroke:"currentColor","stroke-width":"1.5",fill:"none","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])],2))]),e.createVNode(e.Transition,{name:s.value?"dropdown-up":"dropdown-down"},{default:e.withCtx(()=>[n.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["speed-dropdown",s.value?"is-up":"is-down"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,d=>(e.openBlock(),e.createElementBlock("div",{key:d,class:e.normalizeClass(["speed-option",{active:d===t.modelValue}]),onClick:$=>w(d)},e.toDisplayString(d)+"x ",11,Ne))),128))],2)):e.createCommentVNode("",!0)]),_:1},8,["name"])],512))}}),[["__scopeId","data-v-30c5e152"]]),xe={class:"g-time-player"},$e={class:"controls-wrapper"},Be={class:"timeline-wrapper"},ce=A(e.defineComponent({__name:"index",props:{modelValue:{},startTime:{},endTime:{},interval:{default:1},playInterval:{default:1e3},speed:{default:1},speedOptions:{default:()=>[.5,1,2,3]},minTickSpacing:{},tickLabelMode:{default:"all"},formatTooltip:{}},emits:["update:modelValue","change"],setup(t,{emit:a}){const o=t,n=a,s=e.computed(()=>k(o.startTime)),m=e.computed(()=>k(o.endTime)),g=e.computed(()=>s.value),H=e.computed(()=>m.value),w=e.computed(()=>{const l=[];let h=s.value;for(;h<=m.value;)l.push(h),h=x(h,o.interval);return l}),f=e.ref(k(o.modelValue??o.startTime)),y=e.ref(!1),v=e.ref(o.speed);let d=null;const $=e.computed(()=>o.playInterval/v.value);e.watch(()=>o.speed,l=>{v.value=l});function N(l){const h=se(w.value,l);return h>=0?h:0}function B(l,h){n("update:modelValue",l),n("change",{time:l,index:N(l)})}function I(l,h){n("change",{time:l,index:h})}e.watch(()=>o.modelValue,l=>{l!==void 0&&!y.value&&(f.value=k(l))}),e.watch(s,()=>{b(),f.value=s.value}),e.watch(m,l=>{f.value>l&&(f.value=l,b())}),e.watch(f,l=>{B(l),l>=m.value&&b()});function R(){y.value?b():j()}function j(){f.value>=m.value&&(f.value=s.value),y.value=!0,d&&clearInterval(d),d=setInterval(z,$.value)}function b(){y.value=!1,d&&(clearInterval(d),d=null)}e.watch($,l=>{y.value&&(d&&clearInterval(d),d=setInterval(z,l))});function z(){const l=x(f.value,o.interval);if(l>m.value){f.value=m.value,b();return}f.value=l}function C(){const l=x(f.value,-o.interval);f.value=l<s.value?s.value:l}function V(){const l=x(f.value,o.interval);f.value=l>m.value?m.value:l}return e.onUnmounted(()=>b()),(l,h)=>(e.openBlock(),e.createElementBlock("div",xe,[e.createElementVNode("div",$e,[e.createVNode(he,{"is-playing":y.value,onTogglePlay:R,onPrev:C,onNext:V},e.createSlots({_:2},[l.$slots.prev?{name:"prev",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"prev",{},void 0,!0)]),key:"0"}:void 0,l.$slots.play?{name:"play",fn:e.withCtx(({isPlaying:L})=>[e.renderSlot(l.$slots,"play",{isPlaying:L},void 0,!0)]),key:"1"}:void 0,l.$slots.next?{name:"next",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"next",{},void 0,!0)]),key:"2"}:void 0]),1032,["is-playing"])]),e.createElementVNode("div",Be,[e.createVNode(be,{modelValue:f.value,"onUpdate:modelValue":h[0]||(h[0]=L=>f.value=L),"start-time":g.value,"end-time":H.value,interval:t.interval,"min-tick-spacing":t.minTickSpacing,"tick-label-mode":t.tickLabelMode,"format-tooltip":t.formatTooltip,onPlayingPause:b,onChange:I},null,8,["modelValue","start-time","end-time","interval","min-tick-spacing","tick-label-mode","format-tooltip"])]),e.createVNode(De,{modelValue:v.value,"onUpdate:modelValue":h[1]||(h[1]=L=>v.value=L),options:t.speedOptions},null,8,["modelValue","options"])]))}}),[["__scopeId","data-v-6dfd5ab6"]]);u.addHours=x,u.default=ce,u.defaultTooltipFormat=le,u.diffHours=ve,u.findNearestTickIndex=ie,u.findTickIndex=se,u.formatDayLabel=ae,u.formatHH=ne,u.formatHHmm=oe,u.formatMD=X,u.getDateKey=G,u.getDayOfWeek=te,u.getHour=ee,u.getNextMidnight=re,u.getWeekdayShort=U,u.toTimestamp=k,u.vue3TimePlaybar=ce,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|