vue3-time-playbar 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,117 @@
+# vue3-time-playbar
+
+一个 Vue 3 时间播放器组件，包含交互式时间轴、播放控制和刻度标记。零依赖。
+
+## 安装
+
+```bash
+npm install vue3-time-playbar
+```
+
+## 基本用法
+
+```vue
+<template>
+  <GTimePlayer
+    v-model="currentTime"
+    :start-time="startTime"
+    :end-time="endTime"
+    @change="onTimeChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import GTimePlayer from 'vue3-time-playbar'
+import 'vue3-time-playbar/style.css'
+import type { TimeChangePayload } from 'vue3-time-playbar'
+
+const startTime = new Date('2025-01-01T00:00:00')
+const endTime = new Date('2025-01-03T00:00:00')
+const currentTime = ref<number>(startTime.getTime())
+
+function onTimeChange(payload: TimeChangePayload) {
+  console.log('Time:', payload.time, 'Index:', payload.index)
+}
+</script>
+```
+
+> **注意：** 必须导入 CSS 文件，组件才能正确渲染。
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `modelValue` | `number \| string \| Date` | — | 当前时间（v-model） |
+| `startTime` | `number \| string \| Date` | *必填* | 时间轴起始时间 |
+| `endTime` | `number \| string \| Date` | *必填* | 时间轴结束时间 |
+| `interval` | `number` | `1` | 刻度间隔（小时） |
+| `playInterval` | `number` | `1000` | 基准播放间隔（毫秒），即 1x 倍速时每步的时间间隔 |
+| `speed` | `number` | `1` | 默认播放倍率，值必须是 `speedOptions` 中的一项 |
+| `speedOptions` | `number[]` | `[0.5, 1, 2, 3]` | 可选的播放倍率列表，显示在速度选择器中 |
+| `minTickSpacing` | `number` | 自动 | 刻度之间的最小像素间距。未指定时根据 `tickLabelMode` 自动选择：`'all'` 模式为 `15`，`'major'` 模式为 `5` |
+| `tickLabelMode` | `'all' \| 'major'` | `'all'` | 刻度标签显示模式。`'all'`：所有刻度均显示小时数字；`'major'`：仅在 02、08、14、20 时显示数字标签，其余刻度线仍全部保留 |
+| `formatTooltip` | `(ts: number) => string` | 内置 | 自定义 tooltip 格式化函数 |
+
+## 事件
+
+| 事件 | 载荷 | 说明 |
+|------|------|------|
+| `update:modelValue` | `number` | 时间变化时触发（v-model） |
+| `change` | `{ time: number, index: number }` | 时间变化时触发，包含时间戳和刻度索引 |
+
+## 交互特性
+
+- **点击定位**：点击时间轴任意位置，自动吸附到最近的刻度
+- **轨道拖动**：在时间轴轨道上按住拖动可连续调整时间
+- **Tooltip 拖动**：鼠标悬浮至 Tooltip 时显示拖动图标（grab），按住拖动可直接带动播放位置
+- **日期分界线**：0 点刻度自动显示加长的分界线和日期标签，隐藏多余的 "00" 小时标签
+- **滚轮滚动**：当时间跨度较长产生溢出时，支持滚轮横向滚动浏览
+
+## 插槽
+
+| 插槽 | 参数 | 说明 |
+|------|------|------|
+| `prev` | — | 自定义"上一步"按钮内容 |
+| `play` | `{ isPlaying: boolean }` | 自定义"播放/暂停"按钮内容 |
+| `next` | — | 自定义"下一步"按钮内容 |
+
+## 类型导出
+
+```ts
+import type {
+  TimeInput,
+  TickLabelMode,
+  FormatTooltipFn,
+  TimeChangePayload,
+  Tick,
+} from 'vue3-time-playbar'
+```
+
+## 工具函数导出
+
+包中还导出了一些实用的工具函数：
+
+```ts
+import {
+  toTimestamp,
+  getHour,
+  getDayOfWeek,
+  getWeekdayShort,
+  formatHH,
+  formatMD,
+  formatHHmm,
+  defaultTooltipFormat,
+  getDateKey,
+  formatDayLabel,
+  addHours,
+  diffHours,
+  getNextMidnight,
+  findNearestTickIndex,
+  findTickIndex,
+} from 'vue3-time-playbar'
+```
+
+## 许可证
+
+MIT

package/core/PlayerControls.vue.d.ts

@@ -0,0 +1,32 @@
+type __VLS_Props = {
+    isPlaying: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        prev?(_: {}): any;
+        play?(_: {
+            isPlaying: boolean;
+        }): any;
+        next?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "toggle-play": (...args: any[]) => void;
+    prev: (...args: any[]) => void;
+    next: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onToggle-play"?: ((...args: any[]) => any) | undefined;
+    onPrev?: ((...args: any[]) => any) | undefined;
+    onNext?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/core/SpeedSelector.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    modelValue: number;
+    options: number[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    selectorRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/core/TimeTimeline.vue.d.ts

@@ -0,0 +1,26 @@
+import { TickLabelMode, FormatTooltipFn } from './types';
+type __VLS_Props = {
+    modelValue: number | string;
+    startTime: number | string;
+    endTime: number | string;
+    interval: number;
+    minTickSpacing?: number;
+    tickLabelMode?: TickLabelMode;
+    formatTooltip?: FormatTooltipFn;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: number) => any;
+    change: (value: number, index: number) => any;
+    "playing-pause": () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    onChange?: ((value: number, index: number) => any) | undefined;
+    "onPlaying-pause"?: (() => any) | undefined;
+}>, {
+    tickLabelMode: TickLabelMode;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    timelineRef: HTMLDivElement;
+    scrollRef: HTMLDivElement;
+    innerRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/core/index.vue.d.ts

@@ -0,0 +1,49 @@
+import { TimeInput, TickLabelMode, FormatTooltipFn, TimeChangePayload } from './types';
+interface Props {
+    modelValue?: TimeInput;
+    startTime: TimeInput;
+    endTime: TimeInput;
+    interval?: number;
+    /** 基准播放间隔（毫秒），1x 倍速时每步的时间间隔 */
+    playInterval?: number;
+    /** 默认播放倍率，必须是 speedOptions 中的值 */
+    speed?: number;
+    /** 可选的倍率列表 */
+    speedOptions?: number[];
+    minTickSpacing?: number;
+    tickLabelMode?: TickLabelMode;
+    formatTooltip?: FormatTooltipFn;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        prev?(_: {}): any;
+        play?(_: {
+            isPlaying: boolean;
+        }): any;
+        next?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: number) => any;
+    change: (payload: TimeChangePayload) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    onChange?: ((payload: TimeChangePayload) => any) | undefined;
+}>, {
+    interval: number;
+    tickLabelMode: TickLabelMode;
+    playInterval: number;
+    speed: number;
+    speedOptions: number[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/core/types.d.ts

@@ -0,0 +1,33 @@
+/**
+ * GTimePlayer 公共类型定义
+ */
+/** 时间输入类型：支持时间戳、ISO字符串、Date */
+export type TimeInput = number | string | Date;
+/** 刻度文字显示密度 */
+export type TickLabelMode = 'all' | 'major';
+/** tooltip 格式化函数 */
+export type FormatTooltipFn = (timestamp: number) => string;
+/** change 事件回调参数 */
+export interface TimeChangePayload {
+    /** 当前时间戳（ms） */
+    time: number;
+    /** 当前 tick 索引（从 0 开始） */
+    index: number;
+}
+/** 内部 Tick 数据结构 */
+export interface Tick {
+    /** 时间戳 */
+    time: number;
+    /** 在时间轴中的百分比位置 */
+    percent: number;
+    /** 小时文字（HH） */
+    label: string;
+    /** 是否显示小时文字 */
+    showLabel: boolean;
+    /** 日期标签（M月D日 周X） */
+    dayLabel: string;
+    /** 是否显示日期标签 */
+    showDayLabel: boolean;
+    /** 是否为日分界刻度 */
+    isDayBoundary: boolean;
+}

package/core/utils.d.ts

@@ -0,0 +1,40 @@
+/**
+ * GTimePlayer 时间工具函数
+ * 纯原生实现，不依赖任何第三方库
+ */
+/** 将任意时间输入（时间戳 / ISO字符串 / Date）转为毫秒时间戳 */
+export declare function toTimestamp(value: number | string | Date): number;
+/** 获取小时数（0-23） */
+export declare function getHour(ts: number): number;
+/** 获取星期几（0=周日） */
+export declare function getDayOfWeek(ts: number): number;
+/** 获取短星期名 */
+export declare function getWeekdayShort(ts: number): string;
+/** 格式化为 HH（两位小时） */
+export declare function formatHH(ts: number): string;
+/** 格式化为 M月D日 */
+export declare function formatMD(ts: number): string;
+/** 格式化为 HH:mm */
+export declare function formatHHmm(ts: number): string;
+/** 默认 tooltip 格式化：M月D日 周X HH:mm */
+export declare function defaultTooltipFormat(ts: number): string;
+/** 获取日期标识字符串 YYYYMMDD（用于比较是否同一天） */
+export declare function getDateKey(ts: number): string;
+/** 日期标签：M月D日 周X */
+export declare function formatDayLabel(ts: number): string;
+/** 加小时（返回新时间戳） */
+export declare function addHours(ts: number, hours: number): number;
+/** 两个时间戳之间的小时差 */
+export declare function diffHours(start: number | string | Date, end: number | string | Date): number;
+/** 获取下一个午夜（当天24:00 = 次日00:00）的时间戳 */
+export declare function getNextMidnight(ts: number): number;
+/**
+ * 在 ticks 数组中找到最接近 target 的 tick index
+ * 使用二分查找，O(log n)
+ */
+export declare function findNearestTickIndex(tickTimes: number[], target: number): number;
+/**
+ * 根据时间戳找到对应的 tick index（精确匹配）
+ * 找不到返回 -1
+ */
+export declare function findTickIndex(tickTimes: number[], target: number): number;

package/index.d.ts

@@ -0,0 +1,5 @@
+import { default as GTimePlayer } from './core/index.vue';
+export default GTimePlayer;
+export { GTimePlayer };
+export type { TimeInput, TickLabelMode, FormatTooltipFn, TimeChangePayload, Tick, } from './core/types';
+export { toTimestamp, getHour, getDayOfWeek, getWeekdayShort, formatHH, formatMD, formatHHmm, defaultTooltipFormat, getDateKey, formatDayLabel, addHours, diffHours, getNextMidnight, findNearestTickIndex, findTickIndex, } from './core/utils';

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "vue3-time-playbar",
+  "version": "0.1.0",
+  "description": "A Vue 3 time player component with interactive timeline, playback controls and tick marks",
+  "license": "MIT",
+  "type": "module",
+  "keywords": [
+    "vue3",
+    "vue",
+    "time",
+    "timeline",
+    "playbar",
+    "player",
+    "component"
+  ],
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "main": "./vue3-time-playbar.umd.cjs",
+  "module": "./vue3-time-playbar.mjs",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./vue3-time-playbar.mjs",
+      "require": "./vue3-time-playbar.umd.cjs"
+    },
+    "./style.css": "./vue3-time-playbar.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "**/*"
+  ]
+}

package/vue3-time-playbar.css

@@ -0,0 +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}

package/vue3-time-playbar.mjs

@@ -0,0 +1,590 @@
+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";
+const _e = { class: "player-controls" }, Be = { class: "btn-group" }, He = ["title"], Ne = {
+  key: 0,
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  stroke: "none"
+}, Ae = {
+  key: 1,
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  stroke: "none"
+}, We = /* @__PURE__ */ Z({
+  __name: "PlayerControls",
+  props: {
+    isPlaying: { type: Boolean }
+  },
+  emits: ["toggle-play", "prev", "next"],
+  setup(e) {
+    return (o, n) => (T(), x("div", _e, [
+      u("div", Be, [
+        u("button", {
+          class: "control-btn",
+          onClick: n[0] || (n[0] = (t) => o.$emit("prev")),
+          title: "上一时刻"
+        }, [
+          W(o.$slots, "prev", {}, () => [
+            n[3] || (n[3] = u("svg", {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              u("polygon", { points: "19 20 9 12 19 4 19 20" }),
+              u("line", {
+                x1: "5",
+                y1: "19",
+                x2: "5",
+                y2: "5"
+              })
+            ], -1))
+          ], !0)
+        ]),
+        u("button", {
+          class: "control-btn play-btn",
+          onClick: n[1] || (n[1] = (t) => o.$emit("toggle-play")),
+          title: e.isPlaying ? "暂停" : "播放"
+        }, [
+          W(o.$slots, "play", { isPlaying: e.isPlaying }, () => [
+            e.isPlaying ? (T(), x("svg", Ae, [...n[5] || (n[5] = [
+              u("rect", {
+                x: "6",
+                y: "4",
+                width: "4",
+                height: "16",
+                rx: "1"
+              }, null, -1),
+              u("rect", {
+                x: "14",
+                y: "4",
+                width: "4",
+                height: "16",
+                rx: "1"
+              }, null, -1)
+            ])])) : (T(), x("svg", Ne, [...n[4] || (n[4] = [
+              u("polygon", { points: "5 3 19 12 5 21 5 3" }, null, -1)
+            ])]))
+          ], !0)
+        ], 8, He),
+        u("button", {
+          class: "control-btn",
+          onClick: n[2] || (n[2] = (t) => o.$emit("next")),
+          title: "下一时刻"
+        }, [
+          W(o.$slots, "next", {}, () => [
+            n[6] || (n[6] = u("svg", {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              u("polygon", { points: "5 4 15 12 5 20 5 4" }),
+              u("line", {
+                x1: "19",
+                y1: "5",
+                x2: "19",
+                y2: "19"
+              })
+            ], -1))
+          ], !0)
+        ])
+      ])
+    ]));
+  }
+}), ee = (e, o) => {
+  const n = e.__vccOpts || e;
+  for (const [t, s] of o)
+    n[t] = s;
+  return n;
+}, Fe = /* @__PURE__ */ ee(We, [["__scopeId", "data-v-55e12a8d"]]), Xe = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+function h(e) {
+  if (typeof e == "number") return e;
+  if (e instanceof Date) return e.getTime();
+  const o = Date.parse(e);
+  return Number.isNaN(o) ? (console.warn(`[GTimePlayer] 无法解析时间: "${e}"`), 0) : o;
+}
+function K(e, o = 2) {
+  return String(e).padStart(o, "0");
+}
+function Ge(e) {
+  return new Date(e).getHours();
+}
+function Oe(e) {
+  return new Date(e).getDay();
+}
+function ye(e) {
+  return Xe[Oe(e)] ?? "";
+}
+function Ue(e) {
+  return K(new Date(e).getHours());
+}
+function he(e) {
+  const o = new Date(e);
+  return `${o.getMonth() + 1}月${o.getDate()}日`;
+}
+function je(e) {
+  const o = new Date(e);
+  return `${K(o.getHours())}:${K(o.getMinutes())}`;
+}
+function ze(e) {
+  return `${he(e)} ${ye(e)} ${je(e)}`;
+}
+function fe(e) {
+  const o = new Date(e);
+  return `${o.getFullYear()}${K(o.getMonth() + 1)}${K(o.getDate())}`;
+}
+function Ke(e) {
+  return `${he(e)} ${ye(e)}`;
+}
+function A(e, o) {
+  return e + o * 36e5;
+}
+function ft(e, o) {
+  return (h(o) - h(e)) / 36e5;
+}
+function Ye(e) {
+  const o = new Date(e);
+  return o.setHours(24, 0, 0, 0), o.getTime();
+}
+function qe(e, o) {
+  if (e.length === 0) return -1;
+  if (e.length === 1) return 0;
+  let n = 0, t = e.length - 1;
+  if (o <= e[n]) return n;
+  if (o >= e[t]) return t;
+  for (; n <= t; ) {
+    const s = n + t >>> 1, d = e[s];
+    if (d === o) return s;
+    d < o ? n = s + 1 : t = s - 1;
+  }
+  return n >= e.length ? t : t < 0 || Math.abs(e[n] - o) < Math.abs(e[t] - o) ? n : t;
+}
+function Je(e, o) {
+  let n = 0, t = e.length - 1;
+  for (; n <= t; ) {
+    const s = n + t >>> 1, d = e[s];
+    if (d === o) return s;
+    d < o ? n = s + 1 : t = s - 1;
+  }
+  return -1;
+}
+const Qe = {
+  key: 0,
+  class: "tick-label"
+}, Ze = {
+  key: 1,
+  class: "day-label"
+}, et = 50, tt = 40, nt = /* @__PURE__ */ Z({
+  __name: "TimeTimeline",
+  props: {
+    modelValue: {},
+    startTime: {},
+    endTime: {},
+    interval: {},
+    minTickSpacing: {},
+    tickLabelMode: { default: "all" },
+    formatTooltip: {}
+  },
+  emits: ["update:modelValue", "change", "playing-pause"],
+  setup(e, { emit: o }) {
+    const n = [2, 8, 14, 20], t = e, s = o, d = $(null), p = $(null), F = $(null), w = $(0), v = $(0), g = $(0);
+    let k = !1, c = 0, E = !1, C = !1, I = null;
+    const X = $(!1), G = f(() => {
+      const a = h(t.startTime), r = h(t.endTime), i = r - a;
+      if (i <= 0) return [];
+      const b = [];
+      let m = a;
+      for (; m <= r; ) {
+        const M = (m - a) / i * 100, D = Ge(m), V = b.length === 0, ae = fe(m), ie = V ? null : fe(b[b.length - 1].time), q = !V && ie !== ae || V && D === 0;
+        let B = !1;
+        if (D === 0)
+          B = !0;
+        else if (V) {
+          const H = Ye(m);
+          (A(m, t.interval) > H || r < H) && (B = !0);
+        }
+        const se = D === 0 && B ? !1 : t.tickLabelMode === "all" || n.includes(D);
+        b.push({
+          time: m,
+          percent: M,
+          label: Ue(m),
+          showLabel: se,
+          dayLabel: Ke(m),
+          showDayLabel: B,
+          isDayBoundary: q
+        }), m = A(m, t.interval);
+      }
+      return b;
+    }), te = f(() => G.value.map((a) => a.time)), S = f(() => t.minTickSpacing !== void 0 ? t.minTickSpacing : t.tickLabelMode === "major" ? 5 : 15), O = f(() => {
+      const a = G.value.length;
+      return a < 2 ? w.value || 0 : (a - 1) * S.value;
+    }), R = f(() => O.value > w.value && w.value > 0), L = f(() => R.value ? et : tt), l = f(() => R.value ? O.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(() => ({
+      left: L.value + "px",
+      width: l.value + "px"
+    })), we = f(() => ({
+      left: L.value + "px",
+      width: l.value + "px"
+    })), Y = f(() => {
+      const a = h(t.startTime), r = h(t.endTime), i = h(t.modelValue);
+      return i <= a ? 0 : i >= r ? 100 : (i - a) / (r - a) * 100;
+    }), Te = f(() => ({
+      left: L.value + "px",
+      width: Y.value / 100 * l.value + "px"
+    })), xe = f(() => {
+      const a = h(t.modelValue);
+      return t.formatTooltip ? t.formatTooltip(a) : ze(a);
+    }), ne = f(() => L.value + Y.value / 100 * l.value - g.value), be = f(() => ne.value > -50 && ne.value < w.value + 50), $e = f(() => ({
+      transform: `translateX(${ne.value}px)`
+    }));
+    function Le() {
+      p.value && (v.value = p.value.scrollLeft, E || (g.value = p.value.scrollLeft));
+    }
+    function De(a) {
+      !p.value || !R.value || (p.value.scrollLeft += a.deltaY || a.deltaX);
+    }
+    function U(a = !1) {
+      if (!R.value || !p.value || k) return;
+      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));
+      g.value = m;
+      const M = p.value;
+      if (a || Math.abs(M.scrollLeft - m) < 1) {
+        M.scrollLeft = m, v.value = m;
+        return;
+      }
+      c && cancelAnimationFrame(c);
+      const D = M.scrollLeft, V = m - D;
+      E = !0;
+      const ae = 200, ie = performance.now();
+      function q(B) {
+        const se = B - ie, H = Math.min(se / ae, 1), ve = 1 - (1 - H) * (1 - H);
+        M.scrollLeft = D + V * ve, v.value = M.scrollLeft, H < 1 ? c = requestAnimationFrame(q) : (c = 0, E = !1);
+      }
+      c = requestAnimationFrame(q);
+    }
+    P(Y, () => U()), P(w, () => U());
+    function le(a) {
+      if (!p.value) return h(t.startTime);
+      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);
+      return D + (V - D) * (M / (l.value || 1));
+    }
+    function Se(a) {
+      const r = te.value;
+      if (r.length === 0) return { time: a, index: -1 };
+      const i = qe(r, a);
+      return { time: r[i] ?? a, index: i };
+    }
+    function oe(a) {
+      const { time: r, index: i } = Se(a);
+      r !== h(t.modelValue) && (s("update:modelValue", r), s("change", r, i));
+    }
+    function Me(a) {
+      if (C) {
+        C = !1;
+        return;
+      }
+      oe(le(a));
+    }
+    function Ce(a) {
+      const r = a.clientX;
+      C = !1, k = !0, s("playing-pause");
+      const i = (m) => {
+        Math.abs(m.clientX - r) > 3 && (C = !0), oe(le(m));
+      }, b = () => {
+        k = !1, document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", b), re(() => U());
+      };
+      document.addEventListener("mousemove", i), document.addEventListener("mouseup", b);
+    }
+    function Ve(a) {
+      k = !0, C = !1, X.value = !0, document.body.style.cursor = "grabbing", s("playing-pause");
+      const r = (b) => {
+        C = !0, oe(le(b));
+      }, i = () => {
+        k = !1, X.value = !1, document.body.style.cursor = "", document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", i), re(() => U());
+      };
+      document.addEventListener("mousemove", r), document.addEventListener("mouseup", i);
+    }
+    return me(() => {
+      p.value && (w.value = p.value.clientWidth, I = new ResizeObserver((a) => {
+        a[0] && (w.value = a[0].contentRect.width);
+      }), I.observe(p.value)), re(() => U());
+    }), de(() => {
+      c && cancelAnimationFrame(c), I == null || I.disconnect();
+    }), (a, r) => (T(), x("div", {
+      class: "time-timeline",
+      ref_key: "timelineRef",
+      ref: d
+    }, [
+      Pe(u("div", {
+        class: j(["handle-group", { dragging: X.value }]),
+        style: N($e.value)
+      }, [
+        u("div", {
+          class: "floating-tooltip",
+          onMousedown: ue(Ve, ["prevent", "stop"])
+        }, z(xe.value), 33),
+        r[0] || (r[0] = u("div", { class: "handle-visual" }, null, -1))
+      ], 6), [
+        [Ee, be.value]
+      ]),
+      u("div", {
+        class: "scroll-container",
+        ref_key: "scrollRef",
+        ref: p,
+        onScroll: Le,
+        onWheel: ue(De, ["prevent"])
+      }, [
+        u("div", {
+          class: "timeline-inner",
+          ref_key: "innerRef",
+          ref: F,
+          style: N({ width: _.value }),
+          onMousedown: ue(Ce, ["prevent"]),
+          onClick: Me
+        }, [
+          u("div", {
+            class: "track-bg",
+            style: N(ke.value)
+          }, null, 4),
+          u("div", {
+            class: "track-active",
+            style: N(Te.value)
+          }, null, 4),
+          u("div", {
+            class: "ticks-container",
+            style: N(we.value)
+          }, [
+            (T(!0), x(pe, null, ge(G.value, (i) => (T(), x("div", {
+              key: i.time,
+              class: j(["tick-item", { "is-day-boundary": i.isDayBoundary }]),
+              style: N({ left: i.percent + "%" })
+            }, [
+              r[1] || (r[1] = u("div", { class: "tick-mark" }, null, -1)),
+              i.showLabel ? (T(), x("div", Qe, z(i.label), 1)) : ce("", !0),
+              i.showDayLabel ? (T(), x("div", Ze, z(i.dayLabel), 1)) : ce("", !0)
+            ], 6))), 128))
+          ], 4)
+        ], 36)
+      ], 544)
+    ], 512));
+  }
+}), lt = /* @__PURE__ */ ee(nt, [["__scopeId", "data-v-2c40052b"]]), ot = { class: "speed-value" }, at = ["onClick"], it = /* @__PURE__ */ Z({
+  __name: "SpeedSelector",
+  props: {
+    modelValue: {},
+    options: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: o }) {
+    const n = o, t = $(!1), s = $(!0), d = $(null);
+    function p() {
+      if (!d.value) return;
+      const g = d.value.getBoundingClientRect(), k = g.top, c = window.innerHeight - g.bottom;
+      s.value = k >= c;
+    }
+    function F() {
+      t.value || p(), t.value = !t.value;
+    }
+    function w(g) {
+      n("update:modelValue", g), t.value = !1;
+    }
+    function v(g) {
+      d.value && !d.value.contains(g.target) && (t.value = !1);
+    }
+    return me(() => document.addEventListener("mousedown", v)), de(() => document.removeEventListener("mousedown", v)), (g, k) => (T(), x("div", {
+      class: "speed-selector",
+      ref_key: "selectorRef",
+      ref: d
+    }, [
+      u("div", {
+        class: "speed-trigger",
+        onClick: F
+      }, [
+        u("span", ot, z(e.modelValue) + "x", 1),
+        (T(), x("svg", {
+          class: j(["arrow-icon", { open: t.value }]),
+          viewBox: "0 0 12 12",
+          fill: "currentColor"
+        }, [...k[0] || (k[0] = [
+          u("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))
+      ]),
+      J(Ie, {
+        name: s.value ? "dropdown-up" : "dropdown-down"
+      }, {
+        default: Q(() => [
+          t.value ? (T(), x("div", {
+            key: 0,
+            class: j(["speed-dropdown", s.value ? "is-up" : "is-down"])
+          }, [
+            (T(!0), x(pe, null, ge(e.options, (c) => (T(), x("div", {
+              key: c,
+              class: j(["speed-option", { active: c === e.modelValue }]),
+              onClick: (E) => w(c)
+            }, z(c) + "x ", 11, at))), 128))
+          ], 2)) : ce("", !0)
+        ]),
+        _: 1
+      }, 8, ["name"])
+    ], 512));
+  }
+}), st = /* @__PURE__ */ ee(it, [["__scopeId", "data-v-e4832d4c"]]), rt = { class: "g-time-player" }, ut = { class: "controls-wrapper" }, ct = { class: "timeline-wrapper" }, dt = /* @__PURE__ */ Z({
+  __name: "index",
+  props: {
+    modelValue: {},
+    startTime: {},
+    endTime: {},
+    interval: { default: 1 },
+    playInterval: { default: 1e3 },
+    speed: { default: 1 },
+    speedOptions: { default: () => [0.5, 1, 2, 3] },
+    minTickSpacing: {},
+    tickLabelMode: { default: "all" },
+    formatTooltip: {}
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { emit: o }) {
+    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(() => {
+      const l = [];
+      let y = s.value;
+      for (; y <= d.value; )
+        l.push(y), y = A(y, n.interval);
+      return l;
+    }), v = $(h(n.modelValue ?? n.startTime)), g = $(!1), k = $(n.speed);
+    let c = null;
+    const E = f(() => n.playInterval / k.value);
+    P(() => n.speed, (l) => {
+      k.value = l;
+    });
+    function C(l) {
+      const y = Je(w.value, l);
+      return y >= 0 ? y : 0;
+    }
+    function I(l, y) {
+      t("update:modelValue", l), t("change", { time: l, index: C(l) });
+    }
+    function X(l, y) {
+      t("change", { time: l, index: y });
+    }
+    P(
+      () => n.modelValue,
+      (l) => {
+        l !== void 0 && !g.value && (v.value = h(l));
+      }
+    ), P(s, () => {
+      S(), v.value = s.value;
+    }), P(d, (l) => {
+      v.value > l && (v.value = l, S());
+    }), P(v, (l) => {
+      I(l), l >= d.value && S();
+    });
+    function G() {
+      g.value ? S() : te();
+    }
+    function te() {
+      v.value >= d.value && (v.value = s.value), g.value = !0, c && clearInterval(c), c = setInterval(O, E.value);
+    }
+    function S() {
+      g.value = !1, c && (clearInterval(c), c = null);
+    }
+    P(E, (l) => {
+      g.value && (c && clearInterval(c), c = setInterval(O, l));
+    });
+    function O() {
+      const l = A(v.value, n.interval);
+      if (l > d.value) {
+        v.value = d.value, S();
+        return;
+      }
+      v.value = l;
+    }
+    function R() {
+      const l = A(v.value, -n.interval);
+      v.value = l < s.value ? s.value : l;
+    }
+    function L() {
+      const l = A(v.value, n.interval);
+      v.value = l > d.value ? d.value : l;
+    }
+    return de(() => S()), (l, y) => (T(), x("div", rt, [
+      u("div", ut, [
+        J(Fe, {
+          "is-playing": g.value,
+          onTogglePlay: G,
+          onPrev: R,
+          onNext: L
+        }, Re({ _: 2 }, [
+          l.$slots.prev ? {
+            name: "prev",
+            fn: Q(() => [
+              W(l.$slots, "prev", {}, void 0, !0)
+            ]),
+            key: "0"
+          } : void 0,
+          l.$slots.play ? {
+            name: "play",
+            fn: Q(({ isPlaying: _ }) => [
+              W(l.$slots, "play", { isPlaying: _ }, void 0, !0)
+            ]),
+            key: "1"
+          } : void 0,
+          l.$slots.next ? {
+            name: "next",
+            fn: Q(() => [
+              W(l.$slots, "next", {}, void 0, !0)
+            ]),
+            key: "2"
+          } : void 0
+        ]), 1032, ["is-playing"])
+      ]),
+      u("div", ct, [
+        J(lt, {
+          modelValue: v.value,
+          "onUpdate:modelValue": y[0] || (y[0] = (_) => v.value = _),
+          "start-time": p.value,
+          "end-time": F.value,
+          interval: e.interval,
+          "min-tick-spacing": e.minTickSpacing,
+          "tick-label-mode": e.tickLabelMode,
+          "format-tooltip": e.formatTooltip,
+          onPlayingPause: S,
+          onChange: X
+        }, null, 8, ["modelValue", "start-time", "end-time", "interval", "min-tick-spacing", "tick-label-mode", "format-tooltip"])
+      ]),
+      J(st, {
+        modelValue: k.value,
+        "onUpdate:modelValue": y[1] || (y[1] = (_) => k.value = _),
+        options: e.speedOptions
+      }, null, 8, ["modelValue", "options"])
+    ]));
+  }
+}), mt = /* @__PURE__ */ ee(dt, [["__scopeId", "data-v-12c09d1e"]]);
+export {
+  mt as GTimePlayer,
+  A as addHours,
+  mt as default,
+  ze as defaultTooltipFormat,
+  ft as diffHours,
+  qe as findNearestTickIndex,
+  Je as findTickIndex,
+  Ke as formatDayLabel,
+  Ue as formatHH,
+  je as formatHHmm,
+  he as formatMD,
+  fe as getDateKey,
+  Oe as getDayOfWeek,
+  Ge as getHour,
+  Ye as getNextMidnight,
+  ye as getWeekdayShort,
+  h as toTimestamp
+};

package/vue3-time-playbar.umd.cjs

@@ -0,0 +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 G(t){return ke[te(t)]??""}function ne(t){return _(new Date(t).getHours())}function U(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`${U(t)} ${G(t)} ${oe(t)}`}function X(t){const a=new Date(t);return`${a.getFullYear()}${_(a.getMonth()+1)}${_(a.getDate())}`}function ae(t){return`${U(t)} ${G(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,Se=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 b=(p-r)/i*100,E=ee(p),D=T.length===0,J=X(p),Q=D?null:X(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:b,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)),S=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)*S.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 b=g.value;if(r||Math.abs(b.scrollLeft-p)<1){b.scrollLeft=p,f.value=p;return}d&&cancelAnimationFrame(d);const E=b.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);b.scrollLeft=E+D*de,f.value=b.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,b=Math.max(0,Math.min(p,l.value)),E=k(n.startTime),D=k(n.endTime);return E+(D-E)*(b/(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"]]),be={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",be,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,()=>{S(),f.value=s.value}),e.watch(m,l=>{f.value>l&&(f.value=l,S())}),e.watch(f,l=>{B(l),l>=m.value&&S()});function R(){y.value?S():j()}function j(){f.value>=m.value&&(f.value=s.value),y.value=!0,d&&clearInterval(d),d=setInterval(z,$.value)}function S(){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,S();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(()=>S()),(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(Se,{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:S,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.GTimePlayer=ce,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=U,u.getDateKey=X,u.getDayOfWeek=te,u.getHour=ee,u.getNextMidnight=re,u.getWeekdayShort=G,u.toTimestamp=k,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));