vue3-time-playbar 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14,6 +14,13 @@ interface Props {
14
14
  tickLabelMode?: TickLabelMode;
15
15
  formatTooltip?: FormatTooltipFn;
16
16
  }
17
+ declare function togglePlay(): void;
18
+ declare function play(): void;
19
+ declare function pause(): void;
20
+ declare function handlePrev(): void;
21
+ declare function handleNext(): void;
22
+ /** 跳转到指定时间 */
23
+ declare function seekTo(time: TimeInput): void;
17
24
  declare function __VLS_template(): {
18
25
  attrs: Partial<{}>;
19
26
  slots: {
@@ -27,7 +34,17 @@ declare function __VLS_template(): {
27
34
  rootEl: HTMLDivElement;
28
35
  };
29
36
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
30
- declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
37
+ declare const __VLS_component: import('vue').DefineComponent<Props, {
38
+ play: typeof play;
39
+ pause: typeof pause;
40
+ togglePlay: typeof togglePlay;
41
+ prev: typeof handlePrev;
42
+ next: typeof handleNext;
43
+ seekTo: typeof seekTo;
44
+ isPlaying: import('vue').Ref<boolean, boolean>;
45
+ currentTime: import('vue').Ref<number, number>;
46
+ speedMultiplier: import('vue').Ref<number, number>;
47
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
31
48
  "update:modelValue": (value: number) => any;
32
49
  change: (payload: TimeChangePayload) => any;
33
50
  }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue3-time-playbar",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "A Vue 3 time player component with interactive timeline, playback controls and tick marks",
5
5
  "license": "MIT",
6
6
  "type": "module",
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-2c40052b]{position:relative;width:100%;height:52px;cursor:pointer}.time-timeline .handle-group[data-v-2c40052b]{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-2c40052b]{transition:none}.time-timeline .handle-group .floating-tooltip[data-v-2c40052b]{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-2c40052b]:active{cursor:grabbing}.time-timeline .handle-group .floating-tooltip[data-v-2c40052b]: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-2c40052b]{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-2c40052b]{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.time-timeline .scroll-container[data-v-2c40052b]::-webkit-scrollbar{display:none}.time-timeline .timeline-inner[data-v-2c40052b]{position:relative;min-width:100%;height:100%}.time-timeline .track-bg[data-v-2c40052b]{position:absolute;top:8px;height:4px;background:#ffffff2e;border-radius:2px}.time-timeline .track-active[data-v-2c40052b]{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-2c40052b]{position:absolute;top:0;bottom:0;pointer-events:none}.time-timeline .tick-item[data-v-2c40052b]{position:absolute;top:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center}.time-timeline .tick-item .tick-mark[data-v-2c40052b]{margin-top:14px;width:1px;height:5px;background:#ffffff59;flex-shrink:0}.time-timeline .tick-item .tick-label[data-v-2c40052b]{margin-top:2px;font-size:11px;color:#fff9;line-height:1}.time-timeline .tick-item .day-label[data-v-2c40052b]{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-2c40052b]{margin-top:14px;width:2px;height:18px;background:#fffc}.speed-selector[data-v-e4832d4c]{flex-shrink:0;margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.12);position:relative}.speed-selector .speed-trigger[data-v-e4832d4c]{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-e4832d4c]:hover{background:#fff3;border-color:#fff6;color:#fff}.speed-selector .speed-trigger .arrow-icon[data-v-e4832d4c]{width:10px;height:10px;transition:transform .2s}.speed-selector .speed-trigger .arrow-icon.open[data-v-e4832d4c]{transform:rotate(180deg)}.speed-selector .speed-dropdown[data-v-e4832d4c]{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-e4832d4c]{bottom:calc(100% + 6px)}.speed-selector .speed-dropdown.is-down[data-v-e4832d4c]{top:calc(100% + 6px)}.speed-selector .speed-dropdown .speed-option[data-v-e4832d4c]{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-e4832d4c]:hover{background:#ffffff26;color:#fff}.speed-selector .speed-dropdown .speed-option.active[data-v-e4832d4c]{color:#409eff;font-weight:600}.dropdown-up-enter-active[data-v-e4832d4c],.dropdown-up-leave-active[data-v-e4832d4c]{transition:opacity .15s,transform .15s}.dropdown-up-enter-from[data-v-e4832d4c],.dropdown-up-leave-to[data-v-e4832d4c]{opacity:0;transform:translateY(4px)}.dropdown-down-enter-active[data-v-e4832d4c],.dropdown-down-leave-active[data-v-e4832d4c]{transition:opacity .15s,transform .15s}.dropdown-down-enter-from[data-v-e4832d4c],.dropdown-down-leave-to[data-v-e4832d4c]{opacity:0;transform:translateY(-4px)}.g-time-player[data-v-12c09d1e]{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-12c09d1e]{flex-shrink:0;margin-right:20px;border-right:1px solid rgba(255,255,255,.12);padding-right:20px}.g-time-player .timeline-wrapper[data-v-12c09d1e]{flex:1;min-width:0;height:100%;display:flex;align-items:center;overflow:visible;position:relative}
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-98cef505]{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-98cef505]{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-98cef505]{flex:1;min-width:0;height:100%;display:flex;align-items:center;overflow:visible;position:relative}
@@ -1,4 +1,4 @@
1
- import { defineComponent as Z, openBlock as T, createElementBlock as x, createElementVNode as u, renderSlot as W, ref as $, computed as f, watch as P, onMounted as me, nextTick as re, onUnmounted as de, withDirectives as Pe, normalizeStyle as N, normalizeClass as j, withModifiers as ue, toDisplayString as z, vShow as Ee, Fragment as pe, renderList as ge, createCommentVNode as ce, createVNode as J, Transition as Ie, withCtx as Q, createSlots as Re } from "vue";
1
+ import { defineComponent as ne, openBlock as T, createElementBlock as x, createElementVNode as c, renderSlot as F, ref as $, computed as v, watch as _, onMounted as ge, nextTick as ce, onUnmounted as fe, withDirectives as Pe, normalizeStyle as A, normalizeClass as j, withModifiers as de, toDisplayString as z, vShow as Ee, Fragment as ye, renderList as he, createCommentVNode as ve, createVNode as ee, Transition as Ie, withCtx as te, createSlots as Re } from "vue";
2
2
  const _e = { class: "player-controls" }, Be = { class: "btn-group" }, He = ["title"], Ne = {
3
3
  key: 0,
4
4
  viewBox: "0 0 24 24",
@@ -9,22 +9,22 @@ const _e = { class: "player-controls" }, Be = { class: "btn-group" }, He = ["tit
9
9
  viewBox: "0 0 24 24",
10
10
  fill: "currentColor",
11
11
  stroke: "none"
12
- }, We = /* @__PURE__ */ Z({
12
+ }, We = /* @__PURE__ */ ne({
13
13
  __name: "PlayerControls",
14
14
  props: {
15
15
  isPlaying: { type: Boolean }
16
16
  },
17
17
  emits: ["toggle-play", "prev", "next"],
18
18
  setup(e) {
19
- return (o, n) => (T(), x("div", _e, [
20
- u("div", Be, [
21
- u("button", {
19
+ return (n, a) => (T(), x("div", _e, [
20
+ c("div", Be, [
21
+ c("button", {
22
22
  class: "control-btn",
23
- onClick: n[0] || (n[0] = (t) => o.$emit("prev")),
23
+ onClick: a[0] || (a[0] = (t) => n.$emit("prev")),
24
24
  title: "上一时刻"
25
25
  }, [
26
- W(o.$slots, "prev", {}, () => [
27
- n[3] || (n[3] = u("svg", {
26
+ F(n.$slots, "prev", {}, () => [
27
+ a[3] || (a[3] = c("svg", {
28
28
  viewBox: "0 0 24 24",
29
29
  fill: "none",
30
30
  stroke: "currentColor",
@@ -32,8 +32,8 @@ const _e = { class: "player-controls" }, Be = { class: "btn-group" }, He = ["tit
32
32
  "stroke-linecap": "round",
33
33
  "stroke-linejoin": "round"
34
34
  }, [
35
- u("polygon", { points: "19 20 9 12 19 4 19 20" }),
36
- u("line", {
35
+ c("polygon", { points: "19 20 9 12 19 4 19 20" }),
36
+ c("line", {
37
37
  x1: "5",
38
38
  y1: "19",
39
39
  x2: "5",
@@ -42,39 +42,39 @@ const _e = { class: "player-controls" }, Be = { class: "btn-group" }, He = ["tit
42
42
  ], -1))
43
43
  ], !0)
44
44
  ]),
45
- u("button", {
45
+ c("button", {
46
46
  class: "control-btn play-btn",
47
- onClick: n[1] || (n[1] = (t) => o.$emit("toggle-play")),
47
+ onClick: a[1] || (a[1] = (t) => n.$emit("toggle-play")),
48
48
  title: e.isPlaying ? "暂停" : "播放"
49
49
  }, [
50
- W(o.$slots, "play", { isPlaying: e.isPlaying }, () => [
51
- e.isPlaying ? (T(), x("svg", Ae, [...n[5] || (n[5] = [
52
- u("rect", {
50
+ F(n.$slots, "play", { isPlaying: e.isPlaying }, () => [
51
+ e.isPlaying ? (T(), x("svg", Ae, [...a[5] || (a[5] = [
52
+ c("rect", {
53
53
  x: "6",
54
54
  y: "4",
55
55
  width: "4",
56
56
  height: "16",
57
57
  rx: "1"
58
58
  }, null, -1),
59
- u("rect", {
59
+ c("rect", {
60
60
  x: "14",
61
61
  y: "4",
62
62
  width: "4",
63
63
  height: "16",
64
64
  rx: "1"
65
65
  }, null, -1)
66
- ])])) : (T(), x("svg", Ne, [...n[4] || (n[4] = [
67
- u("polygon", { points: "5 3 19 12 5 21 5 3" }, null, -1)
66
+ ])])) : (T(), x("svg", Ne, [...a[4] || (a[4] = [
67
+ c("polygon", { points: "5 3 19 12 5 21 5 3" }, null, -1)
68
68
  ])]))
69
69
  ], !0)
70
70
  ], 8, He),
71
- u("button", {
71
+ c("button", {
72
72
  class: "control-btn",
73
- onClick: n[2] || (n[2] = (t) => o.$emit("next")),
73
+ onClick: a[2] || (a[2] = (t) => n.$emit("next")),
74
74
  title: "下一时刻"
75
75
  }, [
76
- W(o.$slots, "next", {}, () => [
77
- n[6] || (n[6] = u("svg", {
76
+ F(n.$slots, "next", {}, () => [
77
+ a[6] || (a[6] = c("svg", {
78
78
  viewBox: "0 0 24 24",
79
79
  fill: "none",
80
80
  stroke: "currentColor",
@@ -82,8 +82,8 @@ const _e = { class: "player-controls" }, Be = { class: "btn-group" }, He = ["tit
82
82
  "stroke-linecap": "round",
83
83
  "stroke-linejoin": "round"
84
84
  }, [
85
- u("polygon", { points: "5 4 15 12 5 20 5 4" }),
86
- u("line", {
85
+ c("polygon", { points: "5 4 15 12 5 20 5 4" }),
86
+ c("line", {
87
87
  x1: "19",
88
88
  y1: "5",
89
89
  x2: "19",
@@ -95,20 +95,20 @@ const _e = { class: "player-controls" }, Be = { class: "btn-group" }, He = ["tit
95
95
  ])
96
96
  ]));
97
97
  }
98
- }), ee = (e, o) => {
99
- const n = e.__vccOpts || e;
100
- for (const [t, s] of o)
101
- n[t] = s;
102
- return n;
103
- }, Fe = /* @__PURE__ */ ee(We, [["__scopeId", "data-v-55e12a8d"]]), Xe = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
98
+ }), le = (e, n) => {
99
+ const a = e.__vccOpts || e;
100
+ for (const [t, d] of n)
101
+ a[t] = d;
102
+ return a;
103
+ }, Fe = /* @__PURE__ */ le(We, [["__scopeId", "data-v-55e12a8d"]]), Xe = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
104
104
  function h(e) {
105
105
  if (typeof e == "number") return e;
106
106
  if (e instanceof Date) return e.getTime();
107
- const o = Date.parse(e);
108
- return Number.isNaN(o) ? (console.warn(`[GTimePlayer] 无法解析时间: "${e}"`), 0) : o;
107
+ const n = Date.parse(e);
108
+ return Number.isNaN(n) ? (console.warn(`[GTimePlayer] 无法解析时间: "${e}"`), 0) : n;
109
109
  }
110
- function K(e, o = 2) {
111
- return String(e).padStart(o, "0");
110
+ function K(e, n = 2) {
111
+ return String(e).padStart(n, "0");
112
112
  }
113
113
  function Oe(e) {
114
114
  return new Date(e).getHours();
@@ -116,59 +116,59 @@ function Oe(e) {
116
116
  function Ge(e) {
117
117
  return new Date(e).getDay();
118
118
  }
119
- function ye(e) {
119
+ function ke(e) {
120
120
  return Xe[Ge(e)] ?? "";
121
121
  }
122
122
  function Ue(e) {
123
123
  return K(new Date(e).getHours());
124
124
  }
125
- function he(e) {
126
- const o = new Date(e);
127
- return `${o.getMonth() + 1}月${o.getDate()}日`;
125
+ function we(e) {
126
+ const n = new Date(e);
127
+ return `${n.getMonth() + 1}月${n.getDate()}日`;
128
128
  }
129
129
  function je(e) {
130
- const o = new Date(e);
131
- return `${K(o.getHours())}:${K(o.getMinutes())}`;
130
+ const n = new Date(e);
131
+ return `${K(n.getHours())}:${K(n.getMinutes())}`;
132
132
  }
133
133
  function ze(e) {
134
- return `${he(e)} ${ye(e)} ${je(e)}`;
134
+ return `${we(e)} ${ke(e)} ${je(e)}`;
135
135
  }
136
- function fe(e) {
137
- const o = new Date(e);
138
- return `${o.getFullYear()}${K(o.getMonth() + 1)}${K(o.getDate())}`;
136
+ function pe(e) {
137
+ const n = new Date(e);
138
+ return `${n.getFullYear()}${K(n.getMonth() + 1)}${K(n.getDate())}`;
139
139
  }
140
140
  function Ke(e) {
141
- return `${he(e)} ${ye(e)}`;
141
+ return `${we(e)} ${ke(e)}`;
142
142
  }
143
- function A(e, o) {
144
- return e + o * 36e5;
143
+ function W(e, n) {
144
+ return e + n * 36e5;
145
145
  }
146
- function ft(e, o) {
147
- return (h(o) - h(e)) / 36e5;
146
+ function ft(e, n) {
147
+ return (h(n) - h(e)) / 36e5;
148
148
  }
149
149
  function Ye(e) {
150
- const o = new Date(e);
151
- return o.setHours(24, 0, 0, 0), o.getTime();
150
+ const n = new Date(e);
151
+ return n.setHours(24, 0, 0, 0), n.getTime();
152
152
  }
153
- function qe(e, o) {
153
+ function qe(e, n) {
154
154
  if (e.length === 0) return -1;
155
155
  if (e.length === 1) return 0;
156
- let n = 0, t = e.length - 1;
157
- if (o <= e[n]) return n;
158
- if (o >= e[t]) return t;
159
- for (; n <= t; ) {
160
- const s = n + t >>> 1, d = e[s];
161
- if (d === o) return s;
162
- d < o ? n = s + 1 : t = s - 1;
156
+ let a = 0, t = e.length - 1;
157
+ if (n <= e[a]) return a;
158
+ if (n >= e[t]) return t;
159
+ for (; a <= t; ) {
160
+ const d = a + t >>> 1, f = e[d];
161
+ if (f === n) return d;
162
+ f < n ? a = d + 1 : t = d - 1;
163
163
  }
164
- return n >= e.length ? t : t < 0 || Math.abs(e[n] - o) < Math.abs(e[t] - o) ? n : t;
164
+ return a >= e.length ? t : t < 0 || Math.abs(e[a] - n) < Math.abs(e[t] - n) ? a : t;
165
165
  }
166
- function Je(e, o) {
167
- let n = 0, t = e.length - 1;
168
- for (; n <= t; ) {
169
- const s = n + t >>> 1, d = e[s];
170
- if (d === o) return s;
171
- d < o ? n = s + 1 : t = s - 1;
166
+ function Je(e, n) {
167
+ let a = 0, t = e.length - 1;
168
+ for (; a <= t; ) {
169
+ const d = a + t >>> 1, f = e[d];
170
+ if (f === n) return d;
171
+ f < n ? a = d + 1 : t = d - 1;
172
172
  }
173
173
  return -1;
174
174
  }
@@ -178,7 +178,7 @@ const Qe = {
178
178
  }, Ze = {
179
179
  key: 1,
180
180
  class: "day-label"
181
- }, et = 50, tt = 40, nt = /* @__PURE__ */ Z({
181
+ }, et = 35, tt = 35, nt = /* @__PURE__ */ ne({
182
182
  __name: "TimeTimeline",
183
183
  props: {
184
184
  modelValue: {},
@@ -190,226 +190,226 @@ const Qe = {
190
190
  formatTooltip: {}
191
191
  },
192
192
  emits: ["update:modelValue", "change", "playing-pause"],
193
- setup(e, { emit: o }) {
194
- const n = [2, 8, 14, 20], t = e, s = o, d = $(null), p = $(null), F = $(null), w = $(0), v = $(0), g = $(0);
195
- let k = !1, c = 0, E = !1, C = !1, I = null;
196
- const X = $(!1), O = f(() => {
197
- const a = h(t.startTime), r = h(t.endTime), i = r - a;
198
- if (i <= 0) return [];
193
+ setup(e, { emit: n }) {
194
+ const a = [2, 8, 14, 20], t = e, d = n, f = $(null), u = $(null), X = $(null), k = $(0), E = $(0), i = $(0);
195
+ let y = !1, p = 0, w = !1, C = !1, B = null;
196
+ const O = $(!1), G = v(() => {
197
+ const o = h(t.startTime), r = h(t.endTime), s = r - o;
198
+ if (s <= 0) return [];
199
199
  const b = [];
200
- let m = a;
200
+ let m = o;
201
201
  for (; m <= r; ) {
202
- const M = (m - a) / i * 100, D = Oe(m), V = b.length === 0, ae = fe(m), ie = V ? null : fe(b[b.length - 1].time), q = !V && ie !== ae || V && D === 0;
203
- let B = !1;
204
- if (D === 0)
205
- B = !0;
206
- else if (V) {
207
- const H = Ye(m);
208
- (A(m, t.interval) > H || r < H) && (B = !0);
202
+ const P = (m - o) / s * 100, M = Oe(m), R = b.length === 0, se = pe(m), re = R ? null : pe(b[b.length - 1].time), Z = !R && re !== se || R && M === 0;
203
+ let H = !1;
204
+ if (M === 0)
205
+ H = !0;
206
+ else if (R) {
207
+ const N = Ye(m);
208
+ (W(m, t.interval) > N || r < N) && (H = !0);
209
209
  }
210
- const se = D === 0 && B ? !1 : t.tickLabelMode === "all" || n.includes(D);
210
+ const ue = M === 0 && H ? !1 : t.tickLabelMode === "all" || a.includes(M);
211
211
  b.push({
212
212
  time: m,
213
- percent: M,
213
+ percent: P,
214
214
  label: Ue(m),
215
- showLabel: se,
215
+ showLabel: ue,
216
216
  dayLabel: Ke(m),
217
- showDayLabel: B,
218
- isDayBoundary: q
219
- }), m = A(m, t.interval);
217
+ showDayLabel: H,
218
+ isDayBoundary: Z
219
+ }), m = W(m, t.interval);
220
220
  }
221
221
  return b;
222
- }), te = f(() => O.value.map((a) => a.time)), S = f(() => t.minTickSpacing !== void 0 ? t.minTickSpacing : t.tickLabelMode === "major" ? 5 : 15), G = f(() => {
223
- const a = O.value.length;
224
- return a < 2 ? w.value || 0 : (a - 1) * S.value;
225
- }), R = f(() => G.value > w.value && w.value > 0), L = f(() => R.value ? et : tt), l = f(() => R.value ? G.value : Math.max(0, w.value - L.value * 2)), y = f(() => l.value + L.value * 2), _ = f(() => w.value && R.value ? y.value + "px" : "100%"), ke = f(() => ({
226
- left: L.value + "px",
227
- width: l.value + "px"
228
- })), we = f(() => ({
229
- left: L.value + "px",
230
- width: l.value + "px"
231
- })), Y = f(() => {
232
- const a = h(t.startTime), r = h(t.endTime), i = h(t.modelValue);
233
- return i <= a ? 0 : i >= r ? 100 : (i - a) / (r - a) * 100;
234
- }), Te = f(() => ({
235
- left: L.value + "px",
236
- width: Y.value / 100 * l.value + "px"
237
- })), xe = f(() => {
238
- const a = h(t.modelValue);
239
- return t.formatTooltip ? t.formatTooltip(a) : ze(a);
240
- }), ne = f(() => L.value + Y.value / 100 * l.value - g.value), be = f(() => ne.value > -50 && ne.value < w.value + 50), $e = f(() => ({
241
- transform: `translateX(${ne.value}px)`
222
+ }), Y = v(() => G.value.map((o) => o.time)), q = v(() => t.minTickSpacing !== void 0 ? t.minTickSpacing : t.tickLabelMode === "major" ? 5 : 15), L = v(() => {
223
+ const o = G.value.length;
224
+ return o < 2 ? k.value || 0 : (o - 1) * q.value;
225
+ }), I = v(() => L.value > k.value && k.value > 0), D = v(() => I.value ? et : tt), S = v(() => I.value ? L.value : Math.max(0, k.value - D.value * 2)), J = v(() => S.value + D.value * 2), l = v(() => k.value && I.value ? J.value + "px" : "100%"), g = v(() => ({
226
+ left: D.value + "px",
227
+ width: S.value + "px"
228
+ })), V = v(() => ({
229
+ left: D.value + "px",
230
+ width: S.value + "px"
231
+ })), Q = v(() => {
232
+ const o = h(t.startTime), r = h(t.endTime), s = h(t.modelValue);
233
+ return s <= o ? 0 : s >= r ? 100 : (s - o) / (r - o) * 100;
234
+ }), Te = v(() => ({
235
+ left: D.value + "px",
236
+ width: Q.value / 100 * S.value + "px"
237
+ })), xe = v(() => {
238
+ const o = h(t.modelValue);
239
+ return t.formatTooltip ? t.formatTooltip(o) : ze(o);
240
+ }), oe = v(() => D.value + Q.value / 100 * S.value - i.value), be = v(() => oe.value > -50 && oe.value < k.value + 50), $e = v(() => ({
241
+ transform: `translateX(${oe.value}px)`
242
242
  }));
243
243
  function Le() {
244
- p.value && (v.value = p.value.scrollLeft, E || (g.value = p.value.scrollLeft));
244
+ u.value && (E.value = u.value.scrollLeft, w || (i.value = u.value.scrollLeft));
245
245
  }
246
- function De(a) {
247
- !p.value || !R.value || (p.value.scrollLeft += a.deltaY || a.deltaX);
246
+ function De(o) {
247
+ !u.value || !I.value || (u.value.scrollLeft += o.deltaY || o.deltaX);
248
248
  }
249
- function U(a = !1) {
250
- if (!R.value || !p.value || k) return;
251
- const r = L.value + Y.value / 100 * l.value, i = w.value, b = y.value - i, m = Math.max(0, Math.min(r - i / 2, b));
252
- g.value = m;
253
- const M = p.value;
254
- if (a || Math.abs(M.scrollLeft - m) < 1) {
255
- M.scrollLeft = m, v.value = m;
249
+ function U(o = !1) {
250
+ if (!I.value || !u.value || y) return;
251
+ const r = D.value + Q.value / 100 * S.value, s = k.value, b = J.value - s, m = Math.max(0, Math.min(r - s / 2, b));
252
+ i.value = m;
253
+ const P = u.value;
254
+ if (o || Math.abs(P.scrollLeft - m) < 1) {
255
+ P.scrollLeft = m, E.value = m;
256
256
  return;
257
257
  }
258
- c && cancelAnimationFrame(c);
259
- const D = M.scrollLeft, V = m - D;
260
- E = !0;
261
- const ae = 200, ie = performance.now();
262
- function q(B) {
263
- const se = B - ie, H = Math.min(se / ae, 1), ve = 1 - (1 - H) * (1 - H);
264
- M.scrollLeft = D + V * ve, v.value = M.scrollLeft, H < 1 ? c = requestAnimationFrame(q) : (c = 0, E = !1);
258
+ p && cancelAnimationFrame(p);
259
+ const M = P.scrollLeft, R = m - M;
260
+ w = !0;
261
+ const se = 200, re = performance.now();
262
+ function Z(H) {
263
+ const ue = H - re, N = Math.min(ue / se, 1), me = 1 - (1 - N) * (1 - N);
264
+ P.scrollLeft = M + R * me, E.value = P.scrollLeft, N < 1 ? p = requestAnimationFrame(Z) : (p = 0, w = !1);
265
265
  }
266
- c = requestAnimationFrame(q);
266
+ p = requestAnimationFrame(Z);
267
267
  }
268
- P(Y, () => U()), P(w, () => U());
269
- function le(a) {
270
- if (!p.value) return h(t.startTime);
271
- const r = p.value.getBoundingClientRect(), i = p.value.scrollLeft, m = a.clientX - r.left + i - L.value, M = Math.max(0, Math.min(m, l.value)), D = h(t.startTime), V = h(t.endTime);
272
- return D + (V - D) * (M / (l.value || 1));
268
+ _(Q, () => U()), _(k, () => U());
269
+ function ae(o) {
270
+ if (!u.value) return h(t.startTime);
271
+ const r = u.value.getBoundingClientRect(), s = u.value.scrollLeft, m = o.clientX - r.left + s - D.value, P = Math.max(0, Math.min(m, S.value)), M = h(t.startTime), R = h(t.endTime);
272
+ return M + (R - M) * (P / (S.value || 1));
273
273
  }
274
- function Se(a) {
275
- const r = te.value;
276
- if (r.length === 0) return { time: a, index: -1 };
277
- const i = qe(r, a);
278
- return { time: r[i] ?? a, index: i };
274
+ function Se(o) {
275
+ const r = Y.value;
276
+ if (r.length === 0) return { time: o, index: -1 };
277
+ const s = qe(r, o);
278
+ return { time: r[s] ?? o, index: s };
279
279
  }
280
- function oe(a) {
281
- const { time: r, index: i } = Se(a);
282
- r !== h(t.modelValue) && (s("update:modelValue", r), s("change", r, i));
280
+ function ie(o) {
281
+ const { time: r, index: s } = Se(o);
282
+ r !== h(t.modelValue) && (d("update:modelValue", r), d("change", r, s));
283
283
  }
284
- function Me(a) {
284
+ function Me(o) {
285
285
  if (C) {
286
286
  C = !1;
287
287
  return;
288
288
  }
289
- oe(le(a));
289
+ ie(ae(o));
290
290
  }
291
- function Ce(a) {
292
- const r = a.clientX;
293
- C = !1, k = !0, s("playing-pause");
294
- const i = (m) => {
295
- Math.abs(m.clientX - r) > 3 && (C = !0), oe(le(m));
291
+ function Ce(o) {
292
+ const r = o.clientX;
293
+ C = !1, y = !0, d("playing-pause");
294
+ const s = (m) => {
295
+ Math.abs(m.clientX - r) > 3 && (C = !0), ie(ae(m));
296
296
  }, b = () => {
297
- k = !1, document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", b), re(() => U());
297
+ y = !1, document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", b), ce(() => U());
298
298
  };
299
- document.addEventListener("mousemove", i), document.addEventListener("mouseup", b);
299
+ document.addEventListener("mousemove", s), document.addEventListener("mouseup", b);
300
300
  }
301
- function Ve(a) {
302
- k = !0, C = !1, X.value = !0, document.body.style.cursor = "grabbing", s("playing-pause");
301
+ function Ve(o) {
302
+ y = !0, C = !1, O.value = !0, document.body.style.cursor = "grabbing", d("playing-pause");
303
303
  const r = (b) => {
304
- C = !0, oe(le(b));
305
- }, i = () => {
306
- k = !1, X.value = !1, document.body.style.cursor = "", document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", i), re(() => U());
304
+ C = !0, ie(ae(b));
305
+ }, s = () => {
306
+ y = !1, O.value = !1, document.body.style.cursor = "", document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", s), ce(() => U());
307
307
  };
308
- document.addEventListener("mousemove", r), document.addEventListener("mouseup", i);
308
+ document.addEventListener("mousemove", r), document.addEventListener("mouseup", s);
309
309
  }
310
- return me(() => {
311
- p.value && (w.value = p.value.clientWidth, I = new ResizeObserver((a) => {
312
- a[0] && (w.value = a[0].contentRect.width);
313
- }), I.observe(p.value)), re(() => U());
314
- }), de(() => {
315
- c && cancelAnimationFrame(c), I == null || I.disconnect();
316
- }), (a, r) => (T(), x("div", {
310
+ return ge(() => {
311
+ u.value && (k.value = u.value.clientWidth, B = new ResizeObserver((o) => {
312
+ o[0] && (k.value = o[0].contentRect.width);
313
+ }), B.observe(u.value)), ce(() => U());
314
+ }), fe(() => {
315
+ p && cancelAnimationFrame(p), B == null || B.disconnect();
316
+ }), (o, r) => (T(), x("div", {
317
317
  class: "time-timeline",
318
318
  ref_key: "timelineRef",
319
- ref: d
319
+ ref: f
320
320
  }, [
321
- Pe(u("div", {
322
- class: j(["handle-group", { dragging: X.value }]),
323
- style: N($e.value)
321
+ Pe(c("div", {
322
+ class: j(["handle-group", { dragging: O.value }]),
323
+ style: A($e.value)
324
324
  }, [
325
- u("div", {
325
+ c("div", {
326
326
  class: "floating-tooltip",
327
- onMousedown: ue(Ve, ["prevent", "stop"])
327
+ onMousedown: de(Ve, ["prevent", "stop"])
328
328
  }, z(xe.value), 33),
329
- r[0] || (r[0] = u("div", { class: "handle-visual" }, null, -1))
329
+ r[0] || (r[0] = c("div", { class: "handle-visual" }, null, -1))
330
330
  ], 6), [
331
331
  [Ee, be.value]
332
332
  ]),
333
- u("div", {
333
+ c("div", {
334
334
  class: "scroll-container",
335
335
  ref_key: "scrollRef",
336
- ref: p,
336
+ ref: u,
337
337
  onScroll: Le,
338
- onWheel: ue(De, ["prevent"])
338
+ onWheel: de(De, ["prevent"])
339
339
  }, [
340
- u("div", {
340
+ c("div", {
341
341
  class: "timeline-inner",
342
342
  ref_key: "innerRef",
343
- ref: F,
344
- style: N({ width: _.value }),
345
- onMousedown: ue(Ce, ["prevent"]),
343
+ ref: X,
344
+ style: A({ width: l.value }),
345
+ onMousedown: de(Ce, ["prevent"]),
346
346
  onClick: Me
347
347
  }, [
348
- u("div", {
348
+ c("div", {
349
349
  class: "track-bg",
350
- style: N(ke.value)
350
+ style: A(g.value)
351
351
  }, null, 4),
352
- u("div", {
352
+ c("div", {
353
353
  class: "track-active",
354
- style: N(Te.value)
354
+ style: A(Te.value)
355
355
  }, null, 4),
356
- u("div", {
356
+ c("div", {
357
357
  class: "ticks-container",
358
- style: N(we.value)
358
+ style: A(V.value)
359
359
  }, [
360
- (T(!0), x(pe, null, ge(O.value, (i) => (T(), x("div", {
361
- key: i.time,
362
- class: j(["tick-item", { "is-day-boundary": i.isDayBoundary }]),
363
- style: N({ left: i.percent + "%" })
360
+ (T(!0), x(ye, null, he(G.value, (s) => (T(), x("div", {
361
+ key: s.time,
362
+ class: j(["tick-item", { "is-day-boundary": s.isDayBoundary }]),
363
+ style: A({ left: s.percent + "%" })
364
364
  }, [
365
- r[1] || (r[1] = u("div", { class: "tick-mark" }, null, -1)),
366
- i.showLabel ? (T(), x("div", Qe, z(i.label), 1)) : ce("", !0),
367
- i.showDayLabel ? (T(), x("div", Ze, z(i.dayLabel), 1)) : ce("", !0)
365
+ r[1] || (r[1] = c("div", { class: "tick-mark" }, null, -1)),
366
+ s.showLabel ? (T(), x("div", Qe, z(s.label), 1)) : ve("", !0),
367
+ s.showDayLabel ? (T(), x("div", Ze, z(s.dayLabel), 1)) : ve("", !0)
368
368
  ], 6))), 128))
369
369
  ], 4)
370
370
  ], 36)
371
371
  ], 544)
372
372
  ], 512));
373
373
  }
374
- }), lt = /* @__PURE__ */ ee(nt, [["__scopeId", "data-v-2c40052b"]]), ot = { class: "speed-value" }, at = ["onClick"], it = /* @__PURE__ */ Z({
374
+ }), lt = /* @__PURE__ */ le(nt, [["__scopeId", "data-v-d7d9fd3b"]]), ot = { class: "speed-value" }, at = ["onClick"], it = /* @__PURE__ */ ne({
375
375
  __name: "SpeedSelector",
376
376
  props: {
377
377
  modelValue: {},
378
378
  options: {}
379
379
  },
380
380
  emits: ["update:modelValue"],
381
- setup(e, { emit: o }) {
382
- const n = o, t = $(!1), s = $(!0), d = $(null);
383
- function p() {
384
- if (!d.value) return;
385
- const g = d.value.getBoundingClientRect(), k = g.top, c = window.innerHeight - g.bottom;
386
- s.value = k >= c;
381
+ setup(e, { emit: n }) {
382
+ const a = n, t = $(!1), d = $(!0), f = $(null);
383
+ function u() {
384
+ if (!f.value) return;
385
+ const i = f.value.getBoundingClientRect(), y = i.top, p = window.innerHeight - i.bottom;
386
+ d.value = y >= p;
387
387
  }
388
- function F() {
389
- t.value || p(), t.value = !t.value;
388
+ function X() {
389
+ t.value || u(), t.value = !t.value;
390
390
  }
391
- function w(g) {
392
- n("update:modelValue", g), t.value = !1;
391
+ function k(i) {
392
+ a("update:modelValue", i), t.value = !1;
393
393
  }
394
- function v(g) {
395
- d.value && !d.value.contains(g.target) && (t.value = !1);
394
+ function E(i) {
395
+ f.value && !f.value.contains(i.target) && (t.value = !1);
396
396
  }
397
- return me(() => document.addEventListener("mousedown", v)), de(() => document.removeEventListener("mousedown", v)), (g, k) => (T(), x("div", {
397
+ return ge(() => document.addEventListener("mousedown", E)), fe(() => document.removeEventListener("mousedown", E)), (i, y) => (T(), x("div", {
398
398
  class: "speed-selector",
399
399
  ref_key: "selectorRef",
400
- ref: d
400
+ ref: f
401
401
  }, [
402
- u("div", {
402
+ c("div", {
403
403
  class: "speed-trigger",
404
- onClick: F
404
+ onClick: X
405
405
  }, [
406
- u("span", ot, z(e.modelValue) + "x", 1),
406
+ c("span", ot, z(e.modelValue) + "x", 1),
407
407
  (T(), x("svg", {
408
408
  class: j(["arrow-icon", { open: t.value }]),
409
409
  viewBox: "0 0 12 12",
410
410
  fill: "currentColor"
411
- }, [...k[0] || (k[0] = [
412
- u("path", {
411
+ }, [...y[0] || (y[0] = [
412
+ c("path", {
413
413
  d: "M2.5 4.5L6 8L9.5 4.5",
414
414
  stroke: "currentColor",
415
415
  "stroke-width": "1.5",
@@ -419,26 +419,26 @@ const Qe = {
419
419
  }, null, -1)
420
420
  ])], 2))
421
421
  ]),
422
- J(Ie, {
423
- name: s.value ? "dropdown-up" : "dropdown-down"
422
+ ee(Ie, {
423
+ name: d.value ? "dropdown-up" : "dropdown-down"
424
424
  }, {
425
- default: Q(() => [
425
+ default: te(() => [
426
426
  t.value ? (T(), x("div", {
427
427
  key: 0,
428
- class: j(["speed-dropdown", s.value ? "is-up" : "is-down"])
428
+ class: j(["speed-dropdown", d.value ? "is-up" : "is-down"])
429
429
  }, [
430
- (T(!0), x(pe, null, ge(e.options, (c) => (T(), x("div", {
431
- key: c,
432
- class: j(["speed-option", { active: c === e.modelValue }]),
433
- onClick: (E) => w(c)
434
- }, z(c) + "x ", 11, at))), 128))
435
- ], 2)) : ce("", !0)
430
+ (T(!0), x(ye, null, he(e.options, (p) => (T(), x("div", {
431
+ key: p,
432
+ class: j(["speed-option", { active: p === e.modelValue }]),
433
+ onClick: (w) => k(p)
434
+ }, z(p) + "x ", 11, at))), 128))
435
+ ], 2)) : ve("", !0)
436
436
  ]),
437
437
  _: 1
438
438
  }, 8, ["name"])
439
439
  ], 512));
440
440
  }
441
- }), st = /* @__PURE__ */ ee(it, [["__scopeId", "data-v-e4832d4c"]]), rt = { class: "g-time-player" }, ut = { class: "controls-wrapper" }, ct = { class: "timeline-wrapper" }, dt = /* @__PURE__ */ Z({
441
+ }), st = /* @__PURE__ */ le(it, [["__scopeId", "data-v-30c5e152"]]), rt = { class: "g-time-player" }, ut = { class: "controls-wrapper" }, ct = { class: "timeline-wrapper" }, dt = /* @__PURE__ */ ne({
442
442
  __name: "index",
443
443
  props: {
444
444
  modelValue: {},
@@ -453,124 +453,138 @@ const Qe = {
453
453
  formatTooltip: {}
454
454
  },
455
455
  emits: ["update:modelValue", "change"],
456
- setup(e, { emit: o }) {
457
- const n = e, t = o, s = f(() => h(n.startTime)), d = f(() => h(n.endTime)), p = f(() => s.value), F = f(() => d.value), w = f(() => {
456
+ setup(e, { expose: n, emit: a }) {
457
+ const t = e, d = a, f = v(() => h(t.startTime)), u = v(() => h(t.endTime)), X = v(() => f.value), k = v(() => u.value), E = v(() => {
458
458
  const l = [];
459
- let y = s.value;
460
- for (; y <= d.value; )
461
- l.push(y), y = A(y, n.interval);
459
+ let g = f.value;
460
+ for (; g <= u.value; )
461
+ l.push(g), g = W(g, t.interval);
462
462
  return l;
463
- }), v = $(h(n.modelValue ?? n.startTime)), g = $(!1), k = $(n.speed);
464
- let c = null;
465
- const E = f(() => n.playInterval / k.value);
466
- P(() => n.speed, (l) => {
467
- k.value = l;
463
+ }), i = $(h(t.modelValue ?? t.startTime)), y = $(!1), p = $(t.speed);
464
+ let w = null;
465
+ const C = v(() => t.playInterval / p.value);
466
+ _(() => t.speed, (l) => {
467
+ p.value = l;
468
468
  });
469
- function C(l) {
470
- const y = Je(w.value, l);
471
- return y >= 0 ? y : 0;
469
+ function B(l) {
470
+ const g = Je(E.value, l);
471
+ return g >= 0 ? g : 0;
472
472
  }
473
- function I(l, y) {
474
- t("update:modelValue", l), t("change", { time: l, index: C(l) });
473
+ function O(l, g) {
474
+ d("update:modelValue", l), d("change", { time: l, index: B(l) });
475
475
  }
476
- function X(l, y) {
477
- t("change", { time: l, index: y });
476
+ function G(l, g) {
477
+ d("change", { time: l, index: g });
478
478
  }
479
- P(
480
- () => n.modelValue,
479
+ _(
480
+ () => t.modelValue,
481
481
  (l) => {
482
- l !== void 0 && !g.value && (v.value = h(l));
482
+ l !== void 0 && !y.value && (i.value = h(l));
483
483
  }
484
- ), P(s, () => {
485
- S(), v.value = s.value;
486
- }), P(d, (l) => {
487
- v.value > l && (v.value = l, S());
488
- }), P(v, (l) => {
489
- I(l), l >= d.value && S();
484
+ ), _(f, () => {
485
+ L(), i.value = f.value;
486
+ }), _(u, (l) => {
487
+ i.value > l && (i.value = l, L());
488
+ }), _(i, (l) => {
489
+ O(l), l >= u.value && L();
490
490
  });
491
- function O() {
492
- g.value ? S() : te();
491
+ function Y() {
492
+ y.value ? L() : q();
493
493
  }
494
- function te() {
495
- v.value >= d.value && (v.value = s.value), g.value = !0, c && clearInterval(c), c = setInterval(G, E.value);
494
+ function q() {
495
+ i.value >= u.value && (i.value = f.value), y.value = !0, w && clearInterval(w), w = setInterval(I, C.value);
496
496
  }
497
- function S() {
498
- g.value = !1, c && (clearInterval(c), c = null);
497
+ function L() {
498
+ y.value = !1, w && (clearInterval(w), w = null);
499
499
  }
500
- P(E, (l) => {
501
- g.value && (c && clearInterval(c), c = setInterval(G, l));
500
+ _(C, (l) => {
501
+ y.value && (w && clearInterval(w), w = setInterval(I, l));
502
502
  });
503
- function G() {
504
- const l = A(v.value, n.interval);
505
- if (l > d.value) {
506
- v.value = d.value, S();
503
+ function I() {
504
+ const l = W(i.value, t.interval);
505
+ if (l > u.value) {
506
+ i.value = u.value, L();
507
507
  return;
508
508
  }
509
- v.value = l;
509
+ i.value = l;
510
510
  }
511
- function R() {
512
- const l = A(v.value, -n.interval);
513
- v.value = l < s.value ? s.value : l;
511
+ function D() {
512
+ const l = W(i.value, -t.interval);
513
+ i.value = l < f.value ? f.value : l;
514
514
  }
515
- function L() {
516
- const l = A(v.value, n.interval);
517
- v.value = l > d.value ? d.value : l;
515
+ function S() {
516
+ const l = W(i.value, t.interval);
517
+ i.value = l > u.value ? u.value : l;
518
+ }
519
+ function J(l) {
520
+ const g = h(l), V = Math.max(f.value, Math.min(g, u.value));
521
+ i.value = V;
518
522
  }
519
- return de(() => S()), (l, y) => (T(), x("div", rt, [
520
- u("div", ut, [
521
- J(Fe, {
522
- "is-playing": g.value,
523
- onTogglePlay: O,
524
- onPrev: R,
525
- onNext: L
523
+ return n({
524
+ play: q,
525
+ pause: L,
526
+ togglePlay: Y,
527
+ prev: D,
528
+ next: S,
529
+ seekTo: J,
530
+ isPlaying: y,
531
+ currentTime: i,
532
+ speedMultiplier: p
533
+ }), fe(() => L()), (l, g) => (T(), x("div", rt, [
534
+ c("div", ut, [
535
+ ee(Fe, {
536
+ "is-playing": y.value,
537
+ onTogglePlay: Y,
538
+ onPrev: D,
539
+ onNext: S
526
540
  }, Re({ _: 2 }, [
527
541
  l.$slots.prev ? {
528
542
  name: "prev",
529
- fn: Q(() => [
530
- W(l.$slots, "prev", {}, void 0, !0)
543
+ fn: te(() => [
544
+ F(l.$slots, "prev", {}, void 0, !0)
531
545
  ]),
532
546
  key: "0"
533
547
  } : void 0,
534
548
  l.$slots.play ? {
535
549
  name: "play",
536
- fn: Q(({ isPlaying: _ }) => [
537
- W(l.$slots, "play", { isPlaying: _ }, void 0, !0)
550
+ fn: te(({ isPlaying: V }) => [
551
+ F(l.$slots, "play", { isPlaying: V }, void 0, !0)
538
552
  ]),
539
553
  key: "1"
540
554
  } : void 0,
541
555
  l.$slots.next ? {
542
556
  name: "next",
543
- fn: Q(() => [
544
- W(l.$slots, "next", {}, void 0, !0)
557
+ fn: te(() => [
558
+ F(l.$slots, "next", {}, void 0, !0)
545
559
  ]),
546
560
  key: "2"
547
561
  } : void 0
548
562
  ]), 1032, ["is-playing"])
549
563
  ]),
550
- u("div", ct, [
551
- J(lt, {
552
- modelValue: v.value,
553
- "onUpdate:modelValue": y[0] || (y[0] = (_) => v.value = _),
554
- "start-time": p.value,
555
- "end-time": F.value,
564
+ c("div", ct, [
565
+ ee(lt, {
566
+ modelValue: i.value,
567
+ "onUpdate:modelValue": g[0] || (g[0] = (V) => i.value = V),
568
+ "start-time": X.value,
569
+ "end-time": k.value,
556
570
  interval: e.interval,
557
571
  "min-tick-spacing": e.minTickSpacing,
558
572
  "tick-label-mode": e.tickLabelMode,
559
573
  "format-tooltip": e.formatTooltip,
560
- onPlayingPause: S,
561
- onChange: X
574
+ onPlayingPause: L,
575
+ onChange: G
562
576
  }, null, 8, ["modelValue", "start-time", "end-time", "interval", "min-tick-spacing", "tick-label-mode", "format-tooltip"])
563
577
  ]),
564
- J(st, {
565
- modelValue: k.value,
566
- "onUpdate:modelValue": y[1] || (y[1] = (_) => k.value = _),
578
+ ee(st, {
579
+ modelValue: p.value,
580
+ "onUpdate:modelValue": g[1] || (g[1] = (V) => p.value = V),
567
581
  options: e.speedOptions
568
582
  }, null, 8, ["modelValue", "options"])
569
583
  ]));
570
584
  }
571
- }), mt = /* @__PURE__ */ ee(dt, [["__scopeId", "data-v-12c09d1e"]]);
585
+ }), mt = /* @__PURE__ */ le(dt, [["__scopeId", "data-v-98cef505"]]);
572
586
  export {
573
- A as addHours,
587
+ W as addHours,
574
588
  mt as default,
575
589
  ze as defaultTooltipFormat,
576
590
  ft as diffHours,
@@ -579,12 +593,12 @@ export {
579
593
  Ke as formatDayLabel,
580
594
  Ue as formatHH,
581
595
  je as formatHHmm,
582
- he as formatMD,
583
- fe as getDateKey,
596
+ we as formatMD,
597
+ pe as getDateKey,
584
598
  Ge as getDayOfWeek,
585
599
  Oe as getHour,
586
600
  Ye as getNextMidnight,
587
- ye as getWeekdayShort,
601
+ ke as getWeekdayShort,
588
602
  h as toTimestamp,
589
603
  mt as vue3TimePlaybar
590
604
  };
@@ -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(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.Vue3TimePlaybar={},m.Vue))})(this,(function(m,e){"use strict";const fe={class:"player-controls"},pe={class:"btn-group"},ge=["title"],ye={key:0,viewBox:"0 0 24 24",fill:"currentColor",stroke:"none"},ve={key:1,viewBox:"0 0 24 24",fill:"currentColor",stroke:"none"},he=e.defineComponent({__name:"PlayerControls",props:{isPlaying:{type:Boolean}},emits:["toggle-play","prev","next"],setup(t){return(o,r)=>(e.openBlock(),e.createElementBlock("div",fe,[e.createElementVNode("div",pe,[e.createElementVNode("button",{class:"control-btn",onClick:r[0]||(r[0]=n=>o.$emit("prev")),title:"上一时刻"},[e.renderSlot(o.$slots,"prev",{},()=>[r[3]||(r[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:r[1]||(r[1]=n=>o.$emit("toggle-play")),title:t.isPlaying?"暂停":"播放"},[e.renderSlot(o.$slots,"play",{isPlaying:t.isPlaying},()=>[t.isPlaying?(e.openBlock(),e.createElementBlock("svg",ve,[...r[5]||(r[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",ye,[...r[4]||(r[4]=[e.createElementVNode("polygon",{points:"5 3 19 12 5 21 5 3"},null,-1)])]))],!0)],8,ge),e.createElementVNode("button",{class:"control-btn",onClick:r[2]||(r[2]=n=>o.$emit("next")),title:"下一时刻"},[e.renderSlot(o.$slots,"next",{},()=>[r[6]||(r[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,o)=>{const r=t.__vccOpts||t;for(const[n,u]of o)r[n]=u;return r},ke=A(he,[["__scopeId","data-v-55e12a8d"]]),we=["周日","周一","周二","周三","周四","周五","周六"];function v(t){if(typeof t=="number")return t;if(t instanceof Date)return t.getTime();const o=Date.parse(t);return Number.isNaN(o)?(console.warn(`[GTimePlayer] 无法解析时间: "${t}"`),0):o}function H(t,o=2){return String(t).padStart(o,"0")}function ne(t){return new Date(t).getHours()}function oe(t){return new Date(t).getDay()}function j(t){return we[oe(t)]??""}function le(t){return H(new Date(t).getHours())}function K(t){const o=new Date(t);return`${o.getMonth()+1}月${o.getDate()}日`}function ae(t){const o=new Date(t);return`${H(o.getHours())}:${H(o.getMinutes())}`}function re(t){return`${K(t)} ${j(t)} ${ae(t)}`}function q(t){const o=new Date(t);return`${o.getFullYear()}${H(o.getMonth()+1)}${H(o.getDate())}`}function ie(t){return`${K(t)} ${j(t)}`}function L(t,o){return t+o*36e5}function Te(t,o){return(v(o)-v(t))/36e5}function se(t){const o=new Date(t);return o.setHours(24,0,0,0),o.getTime()}function ce(t,o){if(t.length===0)return-1;if(t.length===1)return 0;let r=0,n=t.length-1;if(o<=t[r])return r;if(o>=t[n])return n;for(;r<=n;){const u=r+n>>>1,f=t[u];if(f===o)return u;f<o?r=u+1:n=u-1}return r>=t.length?n:n<0||Math.abs(t[r]-o)<Math.abs(t[n]-o)?r:n}function de(t,o){let r=0,n=t.length-1;for(;r<=n;){const u=r+n>>>1,f=t[u];if(f===o)return u;f<o?r=u+1:n=u-1}return-1}const Ve={key:0,class:"tick-label"},Ee={key:1,class:"day-label"},be=35,Se=35,xe=A(e.defineComponent({__name:"TimeTimeline",props:{modelValue:{},startTime:{},endTime:{},interval:{},minTickSpacing:{},tickLabelMode:{default:"all"},formatTooltip:{}},emits:["update:modelValue","change","playing-pause"],setup(t,{emit:o}){const r=[2,8,14,20],n=t,u=o,f=e.ref(null),d=e.ref(null),I=e.ref(null),k=e.ref(0),$=e.ref(0),i=e.ref(0);let h=!1,g=0,w=!1,x=!1,M=null;const R=e.ref(!1),z=e.computed(()=>{const a=v(n.startTime),c=v(n.endTime),s=c-a;if(s<=0)return[];const T=[];let p=a;for(;p<=c;){const D=(p-a)/s*100,S=ne(p),C=T.length===0,Z=q(p),ee=C?null:q(T[T.length-1].time),G=!C&&ee!==Z||C&&S===0;let P=!1;if(S===0)P=!0;else if(C){const _=se(p);(L(p,n.interval)>_||c<_)&&(P=!0)}const te=S===0&&P?!1:n.tickLabelMode==="all"||r.includes(S);T.push({time:p,percent:D,label:le(p),showLabel:te,dayLabel:ie(p),showDayLabel:P,isDayBoundary:G}),p=L(p,n.interval)}return T}),F=e.computed(()=>z.value.map(a=>a.time)),O=e.computed(()=>n.minTickSpacing!==void 0?n.minTickSpacing:n.tickLabelMode==="major"?5:15),V=e.computed(()=>{const a=z.value.length;return a<2?k.value||0:(a-1)*O.value}),B=e.computed(()=>V.value>k.value&&k.value>0),E=e.computed(()=>B.value?be:Se),b=e.computed(()=>B.value?V.value:Math.max(0,k.value-E.value*2)),U=e.computed(()=>b.value+E.value*2),l=e.computed(()=>k.value&&B.value?U.value+"px":"100%"),y=e.computed(()=>({left:E.value+"px",width:b.value+"px"})),N=e.computed(()=>({left:E.value+"px",width:b.value+"px"})),X=e.computed(()=>{const a=v(n.startTime),c=v(n.endTime),s=v(n.modelValue);return s<=a?0:s>=c?100:(s-a)/(c-a)*100}),Me=e.computed(()=>({left:E.value+"px",width:X.value/100*b.value+"px"})),Pe=e.computed(()=>{const a=v(n.modelValue);return n.formatTooltip?n.formatTooltip(a):re(a)}),Y=e.computed(()=>E.value+X.value/100*b.value-i.value),_e=e.computed(()=>Y.value>-50&&Y.value<k.value+50),He=e.computed(()=>({transform:`translateX(${Y.value}px)`}));function Ie(){d.value&&($.value=d.value.scrollLeft,w||(i.value=d.value.scrollLeft))}function Re(a){!d.value||!B.value||(d.value.scrollLeft+=a.deltaY||a.deltaX)}function W(a=!1){if(!B.value||!d.value||h)return;const c=E.value+X.value/100*b.value,s=k.value,T=U.value-s,p=Math.max(0,Math.min(c-s/2,T));i.value=p;const D=d.value;if(a||Math.abs(D.scrollLeft-p)<1){D.scrollLeft=p,$.value=p;return}g&&cancelAnimationFrame(g);const S=D.scrollLeft,C=p-S;w=!0;const Z=200,ee=performance.now();function G(P){const te=P-ee,_=Math.min(te/Z,1),me=1-(1-_)*(1-_);D.scrollLeft=S+C*me,$.value=D.scrollLeft,_<1?g=requestAnimationFrame(G):(g=0,w=!1)}g=requestAnimationFrame(G)}e.watch(X,()=>W()),e.watch(k,()=>W());function J(a){if(!d.value)return v(n.startTime);const c=d.value.getBoundingClientRect(),s=d.value.scrollLeft,p=a.clientX-c.left+s-E.value,D=Math.max(0,Math.min(p,b.value)),S=v(n.startTime),C=v(n.endTime);return S+(C-S)*(D/(b.value||1))}function ze(a){const c=F.value;if(c.length===0)return{time:a,index:-1};const s=ce(c,a);return{time:c[s]??a,index:s}}function Q(a){const{time:c,index:s}=ze(a);c!==v(n.modelValue)&&(u("update:modelValue",c),u("change",c,s))}function We(a){if(x){x=!1;return}Q(J(a))}function Ae(a){const c=a.clientX;x=!1,h=!0,u("playing-pause");const s=p=>{Math.abs(p.clientX-c)>3&&(x=!0),Q(J(p))},T=()=>{h=!1,document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",T),e.nextTick(()=>W())};document.addEventListener("mousemove",s),document.addEventListener("mouseup",T)}function Fe(a){h=!0,x=!1,R.value=!0,document.body.style.cursor="grabbing",u("playing-pause");const c=T=>{x=!0,Q(J(T))},s=()=>{h=!1,R.value=!1,document.body.style.cursor="",document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",s),e.nextTick(()=>W())};document.addEventListener("mousemove",c),document.addEventListener("mouseup",s)}return e.onMounted(()=>{d.value&&(k.value=d.value.clientWidth,M=new ResizeObserver(a=>{a[0]&&(k.value=a[0].contentRect.width)}),M.observe(d.value)),e.nextTick(()=>W())}),e.onUnmounted(()=>{g&&cancelAnimationFrame(g),M==null||M.disconnect()}),(a,c)=>(e.openBlock(),e.createElementBlock("div",{class:"time-timeline",ref_key:"timelineRef",ref:f},[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["handle-group",{dragging:R.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:d,onScroll:Ie,onWheel:e.withModifiers(Re,["prevent"])},[e.createElementVNode("div",{class:"timeline-inner",ref_key:"innerRef",ref:I,style:e.normalizeStyle({width:l.value}),onMousedown:e.withModifiers(Ae,["prevent"]),onClick:We},[e.createElementVNode("div",{class:"track-bg",style:e.normalizeStyle(y.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(N.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(z.value,s=>(e.openBlock(),e.createElementBlock("div",{key:s.time,class:e.normalizeClass(["tick-item",{"is-day-boundary":s.isDayBoundary}]),style:e.normalizeStyle({left:s.percent+"%"})},[c[1]||(c[1]=e.createElementVNode("div",{class:"tick-mark"},null,-1)),s.showLabel?(e.openBlock(),e.createElementBlock("div",Ve,e.toDisplayString(s.label),1)):e.createCommentVNode("",!0),s.showDayLabel?(e.openBlock(),e.createElementBlock("div",Ee,e.toDisplayString(s.dayLabel),1)):e.createCommentVNode("",!0)],6))),128))],4)],36)],544)],512))}}),[["__scopeId","data-v-d7d9fd3b"]]),Ne={class:"speed-value"},De=["onClick"],$e=A(e.defineComponent({__name:"SpeedSelector",props:{modelValue:{},options:{}},emits:["update:modelValue"],setup(t,{emit:o}){const r=o,n=e.ref(!1),u=e.ref(!0),f=e.ref(null);function d(){if(!f.value)return;const i=f.value.getBoundingClientRect(),h=i.top,g=window.innerHeight-i.bottom;u.value=h>=g}function I(){n.value||d(),n.value=!n.value}function k(i){r("update:modelValue",i),n.value=!1}function $(i){f.value&&!f.value.contains(i.target)&&(n.value=!1)}return e.onMounted(()=>document.addEventListener("mousedown",$)),e.onUnmounted(()=>document.removeEventListener("mousedown",$)),(i,h)=>(e.openBlock(),e.createElementBlock("div",{class:"speed-selector",ref_key:"selectorRef",ref:f},[e.createElementVNode("div",{class:"speed-trigger",onClick:I},[e.createElementVNode("span",Ne,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"},[...h[0]||(h[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:u.value?"dropdown-up":"dropdown-down"},{default:e.withCtx(()=>[n.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["speed-dropdown",u.value?"is-up":"is-down"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,g=>(e.openBlock(),e.createElementBlock("div",{key:g,class:e.normalizeClass(["speed-option",{active:g===t.modelValue}]),onClick:w=>k(g)},e.toDisplayString(g)+"x ",11,De))),128))],2)):e.createCommentVNode("",!0)]),_:1},8,["name"])],512))}}),[["__scopeId","data-v-30c5e152"]]),Be={class:"g-time-player"},Ce={class:"controls-wrapper"},Le={class:"timeline-wrapper"},ue=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,{expose:o,emit:r}){const n=t,u=r,f=e.computed(()=>v(n.startTime)),d=e.computed(()=>v(n.endTime)),I=e.computed(()=>f.value),k=e.computed(()=>d.value),$=e.computed(()=>{const l=[];let y=f.value;for(;y<=d.value;)l.push(y),y=L(y,n.interval);return l}),i=e.ref(v(n.modelValue??n.startTime)),h=e.ref(!1),g=e.ref(n.speed);let w=null;const x=e.computed(()=>n.playInterval/g.value);e.watch(()=>n.speed,l=>{g.value=l});function M(l){const y=de($.value,l);return y>=0?y:0}function R(l,y){u("update:modelValue",l),u("change",{time:l,index:M(l)})}function z(l,y){u("change",{time:l,index:y})}e.watch(()=>n.modelValue,l=>{l!==void 0&&!h.value&&(i.value=v(l))}),e.watch(f,()=>{V(),i.value=f.value}),e.watch(d,l=>{i.value>l&&(i.value=l,V())}),e.watch(i,l=>{R(l),l>=d.value&&V()});function F(){h.value?V():O()}function O(){i.value>=d.value&&(i.value=f.value),h.value=!0,w&&clearInterval(w),w=setInterval(B,x.value)}function V(){h.value=!1,w&&(clearInterval(w),w=null)}e.watch(x,l=>{h.value&&(w&&clearInterval(w),w=setInterval(B,l))});function B(){const l=L(i.value,n.interval);if(l>d.value){i.value=d.value,V();return}i.value=l}function E(){const l=L(i.value,-n.interval);i.value=l<f.value?f.value:l}function b(){const l=L(i.value,n.interval);i.value=l>d.value?d.value:l}function U(l){const y=v(l),N=Math.max(f.value,Math.min(y,d.value));i.value=N}return o({play:O,pause:V,togglePlay:F,prev:E,next:b,seekTo:U,isPlaying:h,currentTime:i,speedMultiplier:g}),e.onUnmounted(()=>V()),(l,y)=>(e.openBlock(),e.createElementBlock("div",Be,[e.createElementVNode("div",Ce,[e.createVNode(ke,{"is-playing":h.value,onTogglePlay:F,onPrev:E,onNext:b},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:N})=>[e.renderSlot(l.$slots,"play",{isPlaying:N},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",Le,[e.createVNode(xe,{modelValue:i.value,"onUpdate:modelValue":y[0]||(y[0]=N=>i.value=N),"start-time":I.value,"end-time":k.value,interval:t.interval,"min-tick-spacing":t.minTickSpacing,"tick-label-mode":t.tickLabelMode,"format-tooltip":t.formatTooltip,onPlayingPause:V,onChange:z},null,8,["modelValue","start-time","end-time","interval","min-tick-spacing","tick-label-mode","format-tooltip"])]),e.createVNode($e,{modelValue:g.value,"onUpdate:modelValue":y[1]||(y[1]=N=>g.value=N),options:t.speedOptions},null,8,["modelValue","options"])]))}}),[["__scopeId","data-v-98cef505"]]);m.addHours=L,m.default=ue,m.defaultTooltipFormat=re,m.diffHours=Te,m.findNearestTickIndex=ce,m.findTickIndex=de,m.formatDayLabel=ie,m.formatHH=le,m.formatHHmm=ae,m.formatMD=K,m.getDateKey=q,m.getDayOfWeek=oe,m.getHour=ne,m.getNextMidnight=se,m.getWeekdayShort=j,m.toTimestamp=v,m.vue3TimePlaybar=ue,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));