@manik02/vue3-timepicker 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Manos Savvides
+
+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,236 @@
+# Vue Timepicker
+
+A flexible, customisable timepicker component for Vue 3 with TypeScript support.
+
+- Single and range time selection
+- Multiple hour formats: 24-hour (`HH`/`H`), 12-hour (`hh`/`h` with AM/PM), 1-24 (`kk`/`k`)
+- Optional seconds
+- Inline masked input with overwrite-only editing
+- Step intervals for hours, minutes, and seconds
+- Fully styleable via CSS custom properties
+
+## Installation
+
+```bash
+npm install @manik02/vue3-timepicker
+```
+
+## Quick start
+
+```vue
+<script setup>
+import { ref } from "vue";
+import { TimePicker } from "@manik02/vue3-timepicker";
+import "@manik02/vue3-timepicker/style.css";
+
+const time = ref("14:30:00");
+</script>
+
+<template>
+  <TimePicker v-model="time" format="HH:mm:ss" />
+</template>
+```
+
+## Props
+
+| Prop         | Type                                 | Default     | Description                                                              |
+| ------------ | ------------------------------------ | ----------- | ------------------------------------------------------------------------ |
+| `modelValue` | `string \| [string, string] \| null` | `undefined` | Time value in `HH:mm:ss` format. Use a two-element array for range mode. |
+| `format`     | `TimeFormat`                         | `"HH:mm"`   | Display format (see format tokens below).                                |
+| `range`      | `boolean`                            | `false`     | Enable range selection with two time inputs.                             |
+| `hourStep`   | `number`                             | `1`         | Step interval for the hour column.                                       |
+| `minuteStep` | `number`                             | `1`         | Step interval for the minute column.                                     |
+| `secondStep` | `number`                             | `1`         | Step interval for the second column.                                     |
+
+## Format tokens
+
+| Token     | Output                 | Description            |
+| --------- | ---------------------- | ---------------------- |
+| `HH`      | `00`-`23`              | 24-hour, zero-padded   |
+| `H`       | `0`-`23`               | 24-hour                |
+| `hh`      | `01`-`12`              | 12-hour, zero-padded   |
+| `h`       | `1`-`12`               | 12-hour                |
+| `kk`      | `01`-`24`              | 1-24 hour, zero-padded |
+| `k`       | `1`-`24`               | 1-24 hour              |
+| `mm`      | `00`-`59`              | Minutes, zero-padded   |
+| `m`       | `0`-`59`               | Minutes                |
+| `ss`      | `00`-`59`              | Seconds, zero-padded   |
+| `s`       | `0`-`59`               | Seconds                |
+| `A` / `a` | `AM`/`PM` or `am`/`pm` | AM/PM indicator        |
+
+Combine tokens with `:` separators: `HH:mm`, `hh:mm:ss A`, `kk:mm`, etc.
+
+## Range mode
+
+```vue
+<script setup>
+import { ref } from "vue";
+import { TimePicker } from "@manik02/vue3-timepicker";
+import "@manik02/vue3-timepicker/style.css";
+
+const range = ref(["09:00:00", "17:00:00"]);
+</script>
+
+<template>
+  <TimePicker v-model="range" format="HH:mm" :range="true" />
+</template>
+```
+
+When `range` is `true`, `modelValue` must be a `[string, string]` array.
+
+## 12-hour format
+
+```vue
+<TimePicker v-model="time" format="hh:mm A" /> // AM/PM
+<TimePicker v-model="time" format="hh:mm a" /> // am/pm
+```
+
+Press `a` or `p` while focused to toggle between AM and PM.
+
+## Step intervals
+
+```vue
+<TimePicker v-model="time" format="HH:mm" :minute-step="15" />
+```
+
+The dropdown columns will show values at the specified intervals (e.g. 00, 15, 30, 45 for a 15-minute step).
+
+## CSS custom properties
+
+Style the component by setting CSS custom properties on `.timepicker-shell` or any ancestor element.
+
+```css
+.my-theme .timepicker-shell {
+  --vtp-font-family: "Inter", sans-serif;
+  --vtp-font-size: 14px;
+  --vtp-bg: #fff;
+  --vtp-color: #333;
+  --vtp-border: #d1d5db;
+  --vtp-border-radius: 8px;
+  --vtp-padding: 0.5rem 0.75rem;
+  --vtp-focus-border: #3b82f6;
+  --vtp-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.2);
+  --vtp-error-border: #ef4444;
+  --vtp-error-ring: 0 0 0 3px rgba(239, 68, 68, 0.15);
+  --vtp-separator-color: #9ca3af;
+  --vtp-dropdown-bg: #fff;
+  --vtp-dropdown-border: #e5e7eb;
+  --vtp-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --vtp-dropdown-radius: 8px;
+  --vtp-dropdown-max-height: 240px;
+  --vtp-option-padding: 0.375rem 0.75rem;
+  --vtp-option-radius: 6px;
+  --vtp-option-hover-bg: #f3f4f6;
+  --vtp-option-active-bg: #dbeafe;
+  --vtp-option-active-color: #1e40af;
+  --vtp-option-active-weight: 600;
+  --vtp-columns-gap: 0.5rem;
+}
+```
+
+All properties have sensible defaults and the component inherits font and colour from its parent by default.
+
+### Dark theme example
+
+```vue
+<template>
+  <div class="dark-theme">
+    <TimePicker v-model="time" format="HH:mm:ss" />
+  </div>
+</template>
+
+<style>
+.dark-theme .timepicker-shell {
+  --vtp-bg: #1e1e2e;
+  --vtp-color: #cdd6f4;
+  --vtp-border: #45475a;
+  --vtp-border-radius: 10px;
+  --vtp-focus-border: #89b4fa;
+  --vtp-focus-ring: 0 0 0 3px rgba(137, 180, 250, 0.25);
+  --vtp-separator-color: #6c7086;
+  --vtp-dropdown-bg: #1e1e2e;
+  --vtp-dropdown-border: #45475a;
+  --vtp-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  --vtp-option-hover-bg: #313244;
+  --vtp-option-active-bg: #89b4fa;
+  --vtp-option-active-color: #1e1e2e;
+}
+</style>
+```
+
+### Minimal rounded example
+
+```vue
+<template>
+  <div class="rounded-theme">
+    <TimePicker v-model="time" format="HH:mm" />
+  </div>
+</template>
+
+<style>
+.rounded-theme .timepicker-shell {
+  --vtp-font-family: "Georgia", serif;
+  --vtp-font-size: 16px;
+  --vtp-border: #a78bfa;
+  --vtp-border-radius: 999px;
+  --vtp-padding: 0.5rem 1.25rem;
+  --vtp-focus-border: #7c3aed;
+  --vtp-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.2);
+  --vtp-dropdown-radius: 16px;
+  --vtp-option-radius: 12px;
+  --vtp-option-active-bg: #ede9fe;
+  --vtp-option-active-color: #5b21b6;
+}
+</style>
+```
+
+### Compact flat example
+
+```vue
+<template>
+  <div class="flat-theme">
+    <TimePicker v-model="time" format="hh:mm A" />
+  </div>
+</template>
+
+<style>
+.flat-theme .timepicker-shell {
+  --vtp-font-family: "Roboto Mono", monospace;
+  --vtp-font-size: 13px;
+  --vtp-bg: #f8fafc;
+  --vtp-color: #0f172a;
+  --vtp-border: transparent;
+  --vtp-border-radius: 4px;
+  --vtp-padding: 0.375rem 0.5rem;
+  --vtp-focus-border: #0ea5e9;
+  --vtp-focus-ring: none;
+  --vtp-dropdown-bg: #f8fafc;
+  --vtp-dropdown-border: #e2e8f0;
+  --vtp-dropdown-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  --vtp-dropdown-radius: 4px;
+  --vtp-option-radius: 2px;
+  --vtp-option-hover-bg: #e2e8f0;
+  --vtp-option-active-bg: #0ea5e9;
+  --vtp-option-active-color: #fff;
+  --vtp-option-active-weight: 500;
+}
+</style>
+```
+
+You can scope the overrides to any CSS class, or apply them globally to `.timepicker-shell` to affect all instances.
+
+## TypeScript
+
+The package exports the following types:
+
+```ts
+import type {
+  TimeFormat,
+  InternalFormat,
+  TimePickerProps,
+} from "@manik02/vue3-timepicker";
+```
+
+## License
+
+MIT

package/dist/TimePicker/TimeColumn.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    items: Array<{
+        key: string | number;
+        value: any;
+        text: string;
+        disabled?: boolean;
+    }>;
+    activeIndex: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:activeIndex": (index: number) => any;
+    select: (v: any) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:activeIndex"?: ((index: number) => any) | undefined;
+    onSelect?: ((v: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    menu: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/TimePicker/TimePicker.vue.d.ts

@@ -0,0 +1,81 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: import('vue').PropType<string | [string, string] | null>;
+        readonly default: undefined;
+        readonly validator: (v: any) => boolean;
+    };
+    readonly range: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly hourStep: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly minuteStep: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly secondStep: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly format: {
+        readonly type: import('vue').PropType<import('./types').TimeFormat>;
+        readonly default: "HH:mm";
+        readonly validator: (fmt: string) => boolean;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (v: string | [string, string] | null) => any;
+    open: () => any;
+    close: () => any;
+    error: (payload: {
+        code: "BAD_TIME" | "OUT_OF_RANGE";
+        message: string;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: import('vue').PropType<string | [string, string] | null>;
+        readonly default: undefined;
+        readonly validator: (v: any) => boolean;
+    };
+    readonly range: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly hourStep: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly minuteStep: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly secondStep: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly format: {
+        readonly type: import('vue').PropType<import('./types').TimeFormat>;
+        readonly default: "HH:mm";
+        readonly validator: (fmt: string) => boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((v: string | [string, string] | null) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onError?: ((payload: {
+        code: "BAD_TIME" | "OUT_OF_RANGE";
+        message: string;
+    }) => any) | undefined;
+}>, {
+    readonly modelValue: string | [string, string] | null;
+    readonly range: boolean;
+    readonly hourStep: number;
+    readonly minuteStep: number;
+    readonly secondStep: number;
+    readonly format: import('./types').TimeFormat;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    secondInputRef: HTMLInputElement;
+}, any>;
+export default _default;

package/dist/TimePicker/TimeSelection.vue.d.ts

@@ -0,0 +1,23 @@
+import { InternalFormat } from './types';
+type __VLS_Props = {
+    open: boolean;
+    initTime: InternalFormat;
+    format: string;
+    hourStep?: number;
+    minuteStep?: number;
+    secondStep?: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    open: () => any;
+    close: () => any;
+    "update:initTime": (v: InternalFormat) => any;
+    "update:open": (v: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    "onUpdate:initTime"?: ((v: InternalFormat) => any) | undefined;
+    "onUpdate:open"?: ((v: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    root: HTMLDivElement;
+}, any>;
+export default _default;

package/dist/TimePicker/types.d.ts

@@ -0,0 +1,91 @@
+import { PropType, ExtractPropTypes } from 'vue';
+type HourToken = "HH" | "H" | "hh" | "h" | "kk" | "k";
+type MinuteToken = "mm" | "m";
+type SecondToken = `:${"ss" | "s"}`;
+type AmPmToken = ` ${"A" | "a" | "P" | "p"}`;
+type Base = `${HourToken}:${MinuteToken}`;
+type WithSeconds = `${Base}${SecondToken}`;
+type WithAmPM = `${Base}${AmPmToken}`;
+type WithSecondsAmPM = `${WithSeconds}${AmPmToken}`;
+export type TimeFormat = Base | WithSeconds | WithAmPM | WithSecondsAmPM;
+export type InternalFormat = {
+    h: number;
+    m: number;
+    s: number;
+};
+export declare const FORMAT_SHAPE: RegExp;
+export declare const TIME_SHAPE: RegExp;
+export declare const timePickerProps: {
+    readonly modelValue: {
+        readonly type: PropType<string | [string, string] | null>;
+        readonly default: undefined;
+        readonly validator: (v: any) => boolean;
+    };
+    readonly range: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly hourStep: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly minuteStep: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly secondStep: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly format: {
+        readonly type: PropType<TimeFormat>;
+        readonly default: "HH:mm";
+        readonly validator: (fmt: string) => boolean;
+    };
+};
+export type TimePickerProps = ExtractPropTypes<typeof timePickerProps>;
+export declare const TimeSelectionProps: {
+    readonly modelValue: {
+        readonly type: PropType<string | [string, string] | null>;
+        readonly default: null;
+        readonly validator: (v: any) => boolean;
+    };
+    readonly range: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly hourStep: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly minuteStep: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly secondStep: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly format: {
+        readonly type: PropType<TimeFormat>;
+        readonly default: "HH:mm";
+        readonly validator: (fmt: string) => boolean;
+    };
+};
+export type TimeSelectionProps = ExtractPropTypes<typeof TimeSelectionProps>;
+export interface TimePickerEmits {
+    (e: "update:modelValue", v: string | [string, string] | null): void;
+    (e: "open"): void;
+    (e: "close"): void;
+    (e: "error", payload: {
+        code: "BAD_TIME" | "OUT_OF_RANGE";
+        message: string;
+    }): void;
+}
+export type Item = {
+    key: number | string;
+    value: number | string;
+    text: string;
+    disabled?: boolean;
+};
+export {};

package/dist/TimePicker/useTimeMask.d.ts

@@ -0,0 +1,15 @@
+import { Ref, ComputedRef } from 'vue';
+import { InternalFormat } from './types';
+export declare function useTimeMask(format: Ref<string> | ComputedRef<string>): {
+    inputValue: Ref<string, string>;
+    handleKeydown: (e: KeyboardEvent) => void;
+    handleInput: (e: Event) => void;
+    handlePaste: (e: ClipboardEvent) => void;
+    setFromTime: (time: InternalFormat) => void;
+    getParsedTime: () => InternalFormat | null;
+    isComplete: ComputedRef<boolean>;
+    totalDigits: ComputedRef<number>;
+    displayPosToDigitIndex: (pos: number) => number;
+    ampm: Ref<"PM" | "AM", "PM" | "AM">;
+    ampmLowercase: ComputedRef<boolean>;
+};

package/dist/helpers.d.ts

@@ -0,0 +1,15 @@
+import { InternalFormat } from './TimePicker/types';
+/** Check if format uses 12-hour clock (h or hh) */
+export declare function is12h(fmt: string): boolean;
+export declare function isPm(fmt: string): boolean;
+export declare function hasK(fmt: string): boolean;
+/** Parse time string into { h, m, s } numbers */
+export declare function parseFromModel(str: string | null | undefined, fmt: string): {
+    h: number;
+    m: number;
+    s: number;
+};
+export declare function to12(h24: number): number;
+export declare function to24(h12: number, isPM: boolean): number;
+export declare function hasSeconds(fmt: string): boolean;
+export declare function formatTime(fmt: string, time: InternalFormat): string;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { default as TimePicker } from './TimePicker/TimePicker.vue';
+export { TimePicker };
+export type { TimeFormat, InternalFormat, TimePickerProps, } from './TimePicker/types';

package/dist/vue-timepicker.css

@@ -0,0 +1 @@
+.timepicker-shell,.timepicker-shell *,.timepicker-shell *:before,.timepicker-shell *:after{box-sizing:border-box}.timepicker-shell{position:relative;display:inline-block;font-family:var(--vtp-font-family, inherit);font-size:var(--vtp-font-size, inherit);color:var(--vtp-color, inherit)}.timepicker-shell__input{display:inline-flex;align-items:center;gap:.25rem;padding:var(--vtp-padding, .375rem .5rem);border-radius:var(--vtp-border-radius, 6px);background:var(--vtp-bg, #fff);border:1px solid var(--vtp-border, #ccc);color:var(--vtp-color, inherit);transition:border-color .15s,box-shadow .15s}.timepicker-shell__input:focus-within{border-color:var(--vtp-focus-border, #66afe9);box-shadow:var(--vtp-focus-ring, 0 0 0 2px rgba(102, 175, 233, .3))}.timepicker-shell__input--error{border-color:var(--vtp-error-border, #e74c3c);box-shadow:var(--vtp-error-ring, 0 0 0 2px rgba(231, 76, 60, .15))}.timepicker-shell__input .timepicker-separator{color:var(--vtp-separator-color, currentColor);opacity:.5;flex:0 0 auto;-webkit-user-select:none;user-select:none;line-height:1}.timepicker-field{flex:0 0 auto;width:auto;min-width:0;border:0;background:transparent;font:inherit;color:inherit;padding:0;margin:0;text-align:center}.timepicker-field:focus{outline:none}.timepicker-field::placeholder{color:var(--vtp-color, inherit);opacity:.4}.timepicker-dropdown{display:inline-block}.timepicker-dropdown__panel{min-width:48px;max-height:var(--vtp-dropdown-max-height, 220px);overflow-y:auto;overflow-x:hidden;padding:.25rem .125rem .25rem .25rem;border:1px solid var(--vtp-dropdown-border, var(--vtp-border, #ccc));border-radius:var(--vtp-dropdown-radius, .5rem);background:var(--vtp-dropdown-bg, var(--vtp-bg, #fff));box-shadow:var(--vtp-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .08));outline:none;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.25) transparent;scrollbar-gutter:stable}.timepicker-dropdown__panel::-webkit-scrollbar{width:5px}.timepicker-dropdown__panel::-webkit-scrollbar-thumb{background-color:#00000040;border-radius:3px}.timepicker-dropdown__panel::-webkit-scrollbar-track{background:transparent}.timepicker-option{padding:var(--vtp-option-padding, .3rem .5rem);border-radius:var(--vtp-option-radius, 4px);cursor:pointer;line-height:1.4;text-align:center;transition:background .1s}.timepicker-option--focused,.timepicker-option:hover{background:var(--vtp-option-hover-bg, rgba(0, 0, 0, .06))}.timepicker-option--active{background:var(--vtp-option-active-bg, #e8f0fe);color:var(--vtp-option-active-color, inherit);font-weight:var(--vtp-option-active-weight, 600)}.timepicker-option--disabled{opacity:.35;pointer-events:none}.vtp-cols{display:inline-flex;flex-wrap:nowrap;gap:var(--vtp-columns-gap, .25rem)}

package/dist/vue-timepicker.js

@@ -0,0 +1,593 @@
+import { defineComponent as Q, ref as T, onMounted as z, watch as L, createElementBlock as F, openBlock as $, createElementVNode as K, Fragment as me, renderList as ce, normalizeClass as q, toDisplayString as de, nextTick as X, computed as y, onBeforeUnmount as Z, createCommentVNode as U, createVNode as O, createBlock as W, unref as I, normalizeStyle as _ } from "vue";
+const pe = { class: "timepicker-dropdown" }, ve = ["tabindex", "onClick", "onMousemove"], N = /* @__PURE__ */ Q({
+  __name: "TimeColumn",
+  props: {
+    items: {},
+    activeIndex: {}
+  },
+  emits: ["update:activeIndex", "select"],
+  setup(l, { emit: i }) {
+    const s = l, o = i, p = T(null);
+    function a() {
+      X(() => {
+        const v = p.value;
+        if (!v) return;
+        const g = v.querySelector(
+          ".timepicker-option--active"
+        );
+        if (g) {
+          const h = v.clientHeight, x = g.offsetTop, m = g.offsetHeight;
+          v.scrollTop = x - h / 2 + m / 2;
+        }
+      });
+    }
+    z(a), L(() => s.activeIndex, a);
+    function f(v) {
+      o("update:activeIndex", v), o("select", s.items[v]?.value);
+    }
+    const c = T(s.activeIndex ?? 0);
+    return (v, g) => ($(), F("div", pe, [
+      K("div", {
+        ref_key: "menu",
+        ref: p,
+        class: "timepicker-dropdown__panel",
+        role: "listbox",
+        tabindex: "-1"
+      }, [
+        ($(!0), F(me, null, ce(v.items, (h, x) => ($(), F("div", {
+          key: h.key,
+          class: q(["timepicker-option", {
+            "timepicker-option--active": x === v.activeIndex,
+            "timepicker-option--disabled": h.disabled,
+            "timepicker-option--focused": x === c.value
+          }]),
+          role: "option",
+          tabindex: h.disabled ? -1 : 0,
+          onClick: (m) => !h.disabled && f(x),
+          onMousemove: (m) => !h.disabled && (c.value = x)
+        }, de(h.text), 43, ve))), 128))
+      ], 512)
+    ]));
+  }
+});
+function ae(l) {
+  return /(a|A|p|P)/.test(l);
+}
+function fe(l) {
+  return /(p|P)/.test(l);
+}
+function J(l) {
+  return /k{1,2}/.test(l);
+}
+function j(l, i) {
+  if (!l) return { h: 0, m: 0, s: 0 };
+  const s = l.match(/\d+/g) || [];
+  let o = s[0] !== void 0 ? +s[0] : 0;
+  const p = +s[1] || 0, a = +s[2] || 0;
+  return { h: o, m: p, s: a };
+}
+function he(l) {
+  const i = l % 12;
+  return i === 0 ? 12 : i;
+}
+function ee(l, i) {
+  return i ? l % 12 + 12 : l % 12;
+}
+function ge(l) {
+  return /(s|ss)/.test(l);
+}
+function B(l, i) {
+  let { h: s, m: o, s: p } = i;
+  const a = ae(l), f = s >= 12 ? "PM" : "AM";
+  a && (s = he(s));
+  const c = s === 0 ? 24 : s, v = {
+    HH: String(s).padStart(2, "0"),
+    H: String(s),
+    hh: String(s).padStart(2, "0"),
+    h: String(s),
+    kk: String(c).padStart(2, "0"),
+    k: String(c),
+    mm: String(o).padStart(2, "0"),
+    m: String(o),
+    ss: String(p).padStart(2, "0"),
+    s: String(p),
+    A: f,
+    a: f.toLowerCase(),
+    P: f,
+    p: f.toLowerCase()
+  };
+  return l.replace(/HH|hh|kk|mm|ss|H|h|k|m|s|A|a|P|p/g, (g) => v[g] ?? g);
+}
+const te = /* @__PURE__ */ Q({
+  __name: "TimeSelection",
+  props: {
+    open: { type: Boolean },
+    initTime: {},
+    format: {},
+    hourStep: {},
+    minuteStep: {},
+    secondStep: {}
+  },
+  emits: ["update:initTime", "open", "close", "update:open"],
+  setup(l, { emit: i }) {
+    const s = y(() => ae(a.format)), o = y(() => ge(a.format)), p = y(() => J(a.format)), a = l, f = i, c = y({
+      get: () => a.open ?? !1,
+      set: (u) => {
+        const k = a.open ?? !1;
+        u !== k && (f("update:open", u), f(u ? "open" : "close"));
+      }
+    }), v = T(null);
+    function g(u) {
+      if (!c.value) return;
+      const k = u.target;
+      v.value && !v.value.contains(k) && (c.value = !1);
+    }
+    z(() => document.addEventListener("mousedown", g)), Z(
+      () => document.removeEventListener("mousedown", g)
+    );
+    function h(u) {
+      u.key === "Escape" && c.value && (c.value = !1);
+    }
+    z(() => document.addEventListener("keydown", h)), Z(() => document.removeEventListener("keydown", h));
+    const x = T(Math.floor(a.initTime.h / a.hourStep) || 0), m = T(Math.floor(a.initTime.m / a.minuteStep) || 0), V = T(Math.floor(a.initTime.s / a.secondStep) || 0);
+    L(
+      () => a.initTime,
+      (u) => {
+        const k = Math.max(1, a.hourStep), M = Math.max(1, a.minuteStep), A = Math.max(1, a.secondStep);
+        let w = u.h;
+        s.value ? (H.value = u.h >= 12 ? 1 : 0, w = u.h % 12) : p.value && u.h === 0 && (w = 24), x.value = Math.floor(w / k), m.value = Math.floor(u.m / M), V.value = Math.floor(u.s / A);
+      }
+    );
+    function P(u, k) {
+      const M = [];
+      for (let A = 0; A < u; A += Math.max(1, k))
+        M.push({ key: A, value: A, text: String(A).padStart(2, "0") });
+      return M;
+    }
+    function C(u, k) {
+      const M = Math.max(1, k), A = [];
+      for (let w = 0; w < 12; w += M) {
+        const ie = w === 0 ? 12 : w, Y = u ? w === 0 ? 12 : w + 12 : w;
+        A.push({ key: Y, value: Y, text: String(ie).padStart(2, "0") });
+      }
+      return A;
+    }
+    function E(u) {
+      const k = Math.max(1, u), M = [];
+      for (let A = 0; A < 24; A += k) {
+        const w = A === 0 ? 24 : A;
+        M.push({ key: A, value: A, text: String(w).padStart(2, "0") });
+      }
+      return M;
+    }
+    const H = T(fe(a.format) ? 1 : 0), D = y(() => {
+      if (!s.value)
+        return p.value ? E(a.hourStep) : P(24, a.hourStep);
+      const u = H.value === 1;
+      return C(u, a.hourStep);
+    }), b = y(() => P(60, a.minuteStep)), e = y(() => P(60, a.secondStep)), t = y(() => /\s[ap]$/.test(a.format)), n = y(() => {
+      const u = t.value ? "am" : "AM", k = t.value ? "pm" : "PM";
+      return [
+        { key: "AM", value: "AM", text: u },
+        { key: "PM", value: "PM", text: k }
+      ];
+    }), d = y(() => H.value === 1 ? "PM" : "AM"), r = y(() => {
+      const u = Number(D.value[x.value]?.value ?? 0);
+      return s.value ? d.value === "PM" ? ee(u, !0) : ee(u, !1) : p.value && u === 24 ? 0 : u;
+    }), S = y(
+      () => Number(b.value[m.value]?.value ?? 0)
+    ), G = y(
+      () => Number(e.value[V.value]?.value ?? 0)
+    );
+    function le(u) {
+      !o.value && !s.value && R();
+    }
+    function re(u) {
+      s.value || R();
+    }
+    function ue(u) {
+      R();
+    }
+    function R() {
+      c.value = !1;
+    }
+    return L(
+      [r, S, G],
+      ([u, k, M]) => {
+        f("update:initTime", { h: u, m: k, s: M });
+      },
+      { immediate: !0 }
+    ), (u, k) => c.value ? ($(), F("div", {
+      key: 0,
+      class: "vtp-cols",
+      ref_key: "root",
+      ref: v
+    }, [
+      O(N, {
+        activeIndex: x.value,
+        "onUpdate:activeIndex": k[0] || (k[0] = (M) => x.value = M),
+        items: D.value,
+        label: "Hours"
+      }, null, 8, ["activeIndex", "items"]),
+      O(N, {
+        activeIndex: m.value,
+        "onUpdate:activeIndex": k[1] || (k[1] = (M) => m.value = M),
+        items: b.value,
+        label: "Minutes",
+        onSelect: le
+      }, null, 8, ["activeIndex", "items"]),
+      o.value ? ($(), W(N, {
+        key: 0,
+        activeIndex: V.value,
+        "onUpdate:activeIndex": k[2] || (k[2] = (M) => V.value = M),
+        items: e.value,
+        label: "Seconds",
+        onSelect: re
+      }, null, 8, ["activeIndex", "items"])) : U("", !0),
+      s.value ? ($(), W(N, {
+        key: 1,
+        activeIndex: H.value,
+        "onUpdate:activeIndex": k[3] || (k[3] = (M) => H.value = M),
+        items: n.value,
+        label: "AM/PM",
+        onSelect: ue
+      }, null, 8, ["activeIndex", "items"])) : U("", !0)
+    ], 512)) : U("", !0);
+  }
+}), se = /^(HH|H|hh|h|kk|k):(mm|m)(?::(ss|s))?(?:\s*(A|a|P|p))?$/, ne = /^([01]\d|2[0-3]):([0-5]\d)(:([0-5]\d))?$/, ke = {
+  modelValue: {
+    type: [String, Array],
+    default: void 0,
+    validator: (l) => {
+      let i;
+      return Array.isArray(l) ? i = l.length === 2 && l.every((s) => ne.test(s)) : i = l == null || ne.test(l), i;
+    }
+  },
+  range: {
+    type: Boolean,
+    default: !1
+  },
+  hourStep: { type: Number, default: 1 },
+  minuteStep: { type: Number, default: 1 },
+  secondStep: { type: Number, default: 1 },
+  format: {
+    type: String,
+    default: "HH:mm",
+    validator: (l) => se.test(l)
+  }
+};
+function ye(l) {
+  const i = se.exec(l);
+  if (!i) throw new Error(`[useTimeMask] Invalid format: ${l}`);
+  const [, s, o, p, a] = i, f = [], c = !!a, v = /^k{1,2}$/.test(s);
+  let g = 0, h = 23;
+  return c ? (g = 1, h = 12) : v && (g = 1, h = 24), f.push({ token: s, min: g, max: h }), f.push({ token: o, min: 0, max: 59 }), p && f.push({ token: p, min: 0, max: 59 }), {
+    digitGroups: f,
+    hasAmPm: !!a,
+    ampmLowercase: a === "a" || a === "p"
+  };
+}
+function oe(l) {
+  const i = y(() => ye(l.value)), s = y(() => i.value.digitGroups.length * 2), o = T([]), p = T("AM"), a = T("");
+  function f() {
+    const { digitGroups: e, hasAmPm: t } = i.value;
+    let n = "", d = 0;
+    for (let r = 0; r < e.length; r++) {
+      for (let S = 0; S < 2; S++)
+        d < o.value.length && (n += String(o.value[d]), d++);
+      d === (r + 1) * 2 && r < e.length - 1 && (n += ":");
+    }
+    if (t && d >= s.value) {
+      const r = i.value.ampmLowercase ? p.value.toLowerCase() : p.value;
+      n += " " + r;
+    }
+    return n;
+  }
+  function c(e) {
+    const t = e * 2;
+    if (o.value.length < t + 2) return;
+    const n = o.value[t] * 10 + o.value[t + 1], { min: d, max: r } = i.value.digitGroups[e], S = Math.max(d, Math.min(r, n));
+    S !== n && (o.value[t] = Math.floor(S / 10), o.value[t + 1] = S % 10);
+  }
+  function v() {
+    for (let e = 0; e < i.value.digitGroups.length; e++)
+      c(e);
+  }
+  function g(e) {
+    const t = f();
+    let n = 0;
+    for (let d = 0; d < Math.min(e, t.length); d++)
+      /\d/.test(t[d]) && n++;
+    return n;
+  }
+  function h(e) {
+    return e + Math.floor(e / 2);
+  }
+  function x(e, t) {
+    if (e >= s.value) return s.value;
+    const n = [...o.value];
+    n[e] = t, o.value = n;
+    const d = Math.floor(e / 2);
+    return c(d), Math.min(e + 1, s.value);
+  }
+  function m(e, t) {
+    const n = f();
+    a.value = n, e.value = n;
+    const d = t !== void 0 ? Math.min(h(t), n.length) : n.length;
+    e.selectionStart = e.selectionEnd = d, X(() => {
+      document.activeElement === e && (e.selectionStart = e.selectionEnd = d);
+    });
+  }
+  function V(e) {
+    const t = e.key, n = e.target;
+    if (["Tab", "Escape", "ArrowLeft", "ArrowRight", "Home", "End"].includes(
+      t
+    ) || e.metaKey || e.ctrlKey)
+      return;
+    e.preventDefault();
+    const d = n.selectionStart ?? 0, r = g(d);
+    if (t === "Backspace") {
+      r > 0 && m(n, r - 1);
+      return;
+    }
+    if (t !== "Delete") {
+      if (i.value.hasAmPm) {
+        const S = t.toLowerCase();
+        if (S === "a") {
+          p.value = "AM", m(n, r);
+          return;
+        }
+        if (S === "p") {
+          p.value = "PM", m(n, r);
+          return;
+        }
+      }
+      if (/^\d$/.test(t)) {
+        const S = x(r, +t);
+        m(n, S);
+        return;
+      }
+    }
+  }
+  function P(e) {
+    const t = e.target, n = t.value.replace(/\D/g, "").split("").map(Number).slice(0, s.value);
+    o.value = n, v(), i.value.hasAmPm && (/p/i.test(t.value) ? p.value = "PM" : /a/i.test(t.value) && (p.value = "AM")), m(t);
+  }
+  function C(e) {
+    e.preventDefault();
+    const t = e.clipboardData?.getData("text") ?? "", n = e.target, d = n.selectionStart ?? 0, r = t.replace(/\D/g, "").split("").map(Number);
+    let S = g(d);
+    for (const G of r) {
+      if (S >= s.value) break;
+      S = x(S, G);
+    }
+    i.value.hasAmPm && (/p\.?m\.?/i.test(t) ? p.value = "PM" : /a\.?m\.?/i.test(t) && (p.value = "AM")), m(n, S);
+  }
+  function E(e) {
+    const { digitGroups: t, hasAmPm: n } = i.value, d = [];
+    let r = e.h;
+    n ? (p.value = e.h >= 12 ? "PM" : "AM", r = e.h % 12, r === 0 && (r = 12)) : J(l.value) && (r = e.h === 0 ? 24 : e.h), d.push(Math.floor(r / 10), r % 10), d.push(Math.floor(e.m / 10), e.m % 10), t.length > 2 && d.push(Math.floor(e.s / 10), e.s % 10), o.value = d, a.value = f();
+  }
+  function H() {
+    if (o.value.length < s.value) return null;
+    const e = [];
+    for (let r = 0; r < i.value.digitGroups.length; r++) {
+      const S = r * 2;
+      e.push(o.value[S] * 10 + o.value[S + 1]);
+    }
+    let t = e[0];
+    const n = e[1], d = e[2] ?? 0;
+    return i.value.hasAmPm && (t = p.value === "PM" ? t === 12 ? 12 : t + 12 : t === 12 ? 0 : t), J(l.value) && t === 24 && (t = 0), { h: t, m: n, s: d };
+  }
+  const D = y(
+    () => o.value.length >= s.value
+  ), b = y(() => i.value.ampmLowercase);
+  return {
+    inputValue: a,
+    handleKeydown: V,
+    handleInput: P,
+    handlePaste: C,
+    setFromTime: E,
+    getParsedTime: H,
+    isComplete: D,
+    totalDigits: s,
+    displayPosToDigitIndex: g,
+    ampm: p,
+    ampmLowercase: b
+  };
+}
+const Se = { class: "timepicker-shell" }, Me = ["value", "placeholder"], xe = ["value", "placeholder"], Ae = ["value", "placeholder"], Ie = /* @__PURE__ */ Q({
+  __name: "TimePicker",
+  props: ke,
+  emits: ["update:modelValue", "open", "close", "error"],
+  setup(l, { emit: i }) {
+    const s = T(null), o = l, p = i, a = T(!1), f = T(!1);
+    L(a, (e) => {
+      e && (f.value = !1);
+    }), L(f, (e) => {
+      e && (a.value = !1);
+    });
+    const c = y({
+      get() {
+        if (Array.isArray(o.modelValue)) {
+          const [e, t] = o.modelValue;
+          return [j(e, o.format), j(t, o.format)];
+        } else
+          return j(o.modelValue, o.format);
+      },
+      set(e) {
+        Array.isArray(e) ? p("update:modelValue", [
+          B("HH:mm:ss", e[0]),
+          B("HH:mm:ss", e[1])
+        ]) : p("update:modelValue", B("HH:mm:ss", e));
+      }
+    }), v = y({
+      get() {
+        return Array.isArray(c.value) ? c.value[0] : c.value;
+      },
+      set(e) {
+        Array.isArray(c.value) ? c.value = [e, c.value[1]] : c.value = e;
+      }
+    }), g = y({
+      get() {
+        return Array.isArray(c.value) ? c.value[1] : c.value;
+      },
+      set(e) {
+        Array.isArray(c.value) && (c.value = [c.value[0], e]);
+      }
+    });
+    y(() => {
+      if (!o.modelValue) return "—";
+      const e = (t) => B(o.format, t);
+      return o.range ? `${e(v.value)} → ${e(g.value)}` : e(v.value);
+    }), L(
+      () => o.range,
+      (e) => {
+        if (e) {
+          if (!Array.isArray(o.modelValue))
+            throw new RangeError(
+              `Model value must be an array for range selection: ${o.modelValue}`
+            );
+        } else if (Array.isArray(o.modelValue))
+          throw new RangeError(
+            `Model value must be a single string for single time selection: ${o.modelValue}`
+          );
+      },
+      { immediate: !0 }
+    );
+    const h = y(() => o.format ?? "HH:mm:ss"), x = y(() => {
+      let e = h.value.length;
+      return /[AaPp]$/.test(h.value) && (e += 1), `${Math.min(12, Math.max(4, e))}ch`;
+    }), m = oe(h), V = m.inputValue, P = oe(h), C = P.inputValue;
+    L(
+      () => [v.value, h.value],
+      ([e]) => {
+        m.setFromTime(e);
+      },
+      { immediate: !0 }
+    ), L(
+      () => [g.value, h.value, o.range],
+      ([e, , t]) => {
+        if (!t) {
+          P.setFromTime({ h: 0, m: 0, s: 0 });
+          return;
+        }
+        P.setFromTime(e);
+      },
+      { immediate: !0 }
+    );
+    const E = T(null);
+    function H(e) {
+      if (e.key === "Enter") {
+        e.preventDefault(), b("first");
+        return;
+      }
+      /^\d$/.test(e.key) && (a.value = !1, f.value = !1);
+      const t = e.target, n = m.displayPosToDigitIndex(t.selectionStart ?? 0), d = /^\d$/.test(e.key) && n >= m.totalDigits.value - 1;
+      if (m.handleKeydown(e), /^\d$/.test(e.key)) {
+        const r = m.getParsedTime();
+        r && (s.value = null, v.value = r);
+      }
+      o.range && d && E.value && (b("first"), X(() => {
+        const r = E.value;
+        r && (r.focus(), r.selectionStart = r.selectionEnd = 0);
+      }));
+    }
+    function D(e) {
+      if (e.key === "Enter") {
+        e.preventDefault(), b("second");
+        return;
+      }
+      if (/^\d$/.test(e.key) && (a.value = !1, f.value = !1), P.handleKeydown(e), /^\d$/.test(e.key)) {
+        const t = P.getParsedTime();
+        t && (s.value = null, g.value = t);
+      }
+    }
+    function b(e) {
+      const n = (e === "first" ? m : P).getParsedTime();
+      n && (s.value = null, e === "first" ? v.value = n : o.range && (g.value = n)), e === "first" ? m.setFromTime(v.value) : o.range && P.setFromTime(g.value);
+    }
+    return (e, t) => ($(), F("div", Se, [
+      o.range ? ($(), F("div", {
+        key: 1,
+        class: q(["timepicker-shell__input", { "timepicker-shell__input--error": s.value }])
+      }, [
+        K("input", {
+          type: "text",
+          class: "timepicker-field",
+          value: I(V),
+          placeholder: h.value,
+          style: _({ width: x.value }),
+          onFocus: t[4] || (t[4] = (n) => a.value = !0),
+          onKeydown: H,
+          onInput: t[5] || (t[5] = //@ts-ignore
+          (...n) => I(m).handleInput && I(m).handleInput(...n)),
+          onPaste: t[6] || (t[6] = //@ts-ignore
+          (...n) => I(m).handlePaste && I(m).handlePaste(...n)),
+          onBlur: t[7] || (t[7] = (n) => b("first"))
+        }, null, 44, xe),
+        t[16] || (t[16] = K("span", { class: "timepicker-separator" }, "–", -1)),
+        K("input", {
+          ref_key: "secondInputRef",
+          ref: E,
+          type: "text",
+          class: "timepicker-field",
+          value: I(C),
+          placeholder: h.value,
+          style: _({ width: x.value }),
+          onFocus: t[8] || (t[8] = (n) => f.value = !0),
+          onKeydown: D,
+          onInput: t[9] || (t[9] = //@ts-ignore
+          (...n) => I(P).handleInput && I(P).handleInput(...n)),
+          onPaste: t[10] || (t[10] = //@ts-ignore
+          (...n) => I(P).handlePaste && I(P).handlePaste(...n)),
+          onBlur: t[11] || (t[11] = (n) => b("second"))
+        }, null, 44, Ae)
+      ], 2)) : ($(), F("div", {
+        key: 0,
+        class: q(["timepicker-shell__input", { "timepicker-shell__input--error": s.value }])
+      }, [
+        K("input", {
+          type: "text",
+          class: "timepicker-field",
+          value: I(V),
+          placeholder: h.value,
+          style: _({ width: x.value }),
+          onFocus: t[0] || (t[0] = (n) => a.value = !0),
+          onKeydown: H,
+          onInput: t[1] || (t[1] = //@ts-ignore
+          (...n) => I(m).handleInput && I(m).handleInput(...n)),
+          onPaste: t[2] || (t[2] = //@ts-ignore
+          (...n) => I(m).handlePaste && I(m).handlePaste(...n)),
+          onBlur: t[3] || (t[3] = (n) => b("first"))
+        }, null, 44, Me)
+      ], 2)),
+      K("div", null, [
+        O(te, {
+          open: a.value,
+          "onUpdate:open": t[12] || (t[12] = (n) => a.value = n),
+          initTime: v.value,
+          "onUpdate:initTime": t[13] || (t[13] = (n) => v.value = n),
+          format: o.format,
+          "hour-step": o.hourStep,
+          "minute-step": o.minuteStep,
+          "second-step": o.secondStep
+        }, null, 8, ["open", "initTime", "format", "hour-step", "minute-step", "second-step"]),
+        o.range ? ($(), W(te, {
+          key: 0,
+          open: f.value,
+          "onUpdate:open": t[14] || (t[14] = (n) => f.value = n),
+          initTime: g.value,
+          "onUpdate:initTime": t[15] || (t[15] = (n) => g.value = n),
+          format: o.format,
+          "hour-step": o.hourStep,
+          "minute-step": o.minuteStep,
+          "second-step": o.secondStep
+        }, null, 8, ["open", "initTime", "format", "hour-step", "minute-step", "second-step"])) : U("", !0)
+      ])
+    ]));
+  }
+});
+export {
+  Ie as TimePicker
+};

package/dist/vue-timepicker.umd.cjs

@@ -0,0 +1 @@
+(function(E,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(E=typeof globalThis<"u"?globalThis:E||self,e(E.VueTimepicker={},E.Vue))})(this,(function(E,e){"use strict";const q={class:"timepicker-dropdown"},O=["tabindex","onClick","onMousemove"],$=e.defineComponent({__name:"TimeColumn",props:{items:{},activeIndex:{}},emits:["update:activeIndex","select"],setup(s,{emit:c}){const r=s,a=c,f=e.ref(null);function l(){e.nextTick(()=>{const h=f.value;if(!h)return;const g=h.querySelector(".timepicker-option--active");if(g){const k=h.clientHeight,x=g.offsetTop,m=g.offsetHeight;h.scrollTop=x-k/2+m/2}})}e.onMounted(l),e.watch(()=>r.activeIndex,l);function v(h){a("update:activeIndex",h),a("select",r.items[h]?.value)}const d=e.ref(r.activeIndex??0);return(h,g)=>(e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("div",{ref_key:"menu",ref:f,class:"timepicker-dropdown__panel",role:"listbox",tabindex:"-1"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.items,(k,x)=>(e.openBlock(),e.createElementBlock("div",{key:k.key,class:e.normalizeClass(["timepicker-option",{"timepicker-option--active":x===h.activeIndex,"timepicker-option--disabled":k.disabled,"timepicker-option--focused":x===d.value}]),role:"option",tabindex:k.disabled?-1:0,onClick:m=>!k.disabled&&v(x),onMousemove:m=>!k.disabled&&(d.value=x)},e.toDisplayString(k.text),43,O))),128))],512)]))}});function K(s){return/(a|A|p|P)/.test(s)}function W(s){return/(p|P)/.test(s)}function N(s){return/k{1,2}/.test(s)}function C(s,c){if(!s)return{h:0,m:0,s:0};const r=s.match(/\d+/g)||[];let a=r[0]!==void 0?+r[0]:0;const f=+r[1]||0,l=+r[2]||0;return{h:a,m:f,s:l}}function J(s){const c=s%12;return c===0?12:c}function U(s,c){return c?s%12+12:s%12}function Q(s){return/(s|ss)/.test(s)}function L(s,c){let{h:r,m:a,s:f}=c;const l=K(s),v=r>=12?"PM":"AM";l&&(r=J(r));const d=r===0?24:r,h={HH:String(r).padStart(2,"0"),H:String(r),hh:String(r).padStart(2,"0"),h:String(r),kk:String(d).padStart(2,"0"),k:String(d),mm:String(a).padStart(2,"0"),m:String(a),ss:String(f).padStart(2,"0"),s:String(f),A:v,a:v.toLowerCase(),P:v,p:v.toLowerCase()};return s.replace(/HH|hh|kk|mm|ss|H|h|k|m|s|A|a|P|p/g,g=>h[g]??g)}const G=e.defineComponent({__name:"TimeSelection",props:{open:{type:Boolean},initTime:{},format:{},hourStep:{},minuteStep:{},secondStep:{}},emits:["update:initTime","open","close","update:open"],setup(s,{emit:c}){const r=e.computed(()=>K(l.format)),a=e.computed(()=>Q(l.format)),f=e.computed(()=>N(l.format)),l=s,v=c,d=e.computed({get:()=>l.open??!1,set:u=>{const y=l.open??!1;u!==y&&(v("update:open",u),v(u?"open":"close"))}}),h=e.ref(null);function g(u){if(!d.value)return;const y=u.target;h.value&&!h.value.contains(y)&&(d.value=!1)}e.onMounted(()=>document.addEventListener("mousedown",g)),e.onBeforeUnmount(()=>document.removeEventListener("mousedown",g));function k(u){u.key==="Escape"&&d.value&&(d.value=!1)}e.onMounted(()=>document.addEventListener("keydown",k)),e.onBeforeUnmount(()=>document.removeEventListener("keydown",k));const x=e.ref(Math.floor(l.initTime.h/l.hourStep)||0),m=e.ref(Math.floor(l.initTime.m/l.minuteStep)||0),V=e.ref(Math.floor(l.initTime.s/l.secondStep)||0);e.watch(()=>l.initTime,u=>{const y=Math.max(1,l.hourStep),M=Math.max(1,l.minuteStep),A=Math.max(1,l.secondStep);let w=u.h;r.value?(I.value=u.h>=12?1:0,w=u.h%12):f.value&&u.h===0&&(w=24),x.value=Math.floor(w/y),m.value=Math.floor(u.m/M),V.value=Math.floor(u.s/A)});function P(u,y){const M=[];for(let A=0;A<u;A+=Math.max(1,y))M.push({key:A,value:A,text:String(A).padStart(2,"0")});return M}function H(u,y){const M=Math.max(1,y),A=[];for(let w=0;w<12;w+=M){const se=w===0?12:w,_=u?w===0?12:w+12:w;A.push({key:_,value:_,text:String(se).padStart(2,"0")})}return A}function b(u){const y=Math.max(1,u),M=[];for(let A=0;A<24;A+=y){const w=A===0?24:A;M.push({key:A,value:A,text:String(w).padStart(2,"0")})}return M}const I=e.ref(W(l.format)?1:0),B=e.computed(()=>{if(!r.value)return f.value?b(l.hourStep):P(24,l.hourStep);const u=I.value===1;return H(u,l.hourStep)}),T=e.computed(()=>P(60,l.minuteStep)),t=e.computed(()=>P(60,l.secondStep)),n=e.computed(()=>/\s[ap]$/.test(l.format)),o=e.computed(()=>{const u=n.value?"am":"AM",y=n.value?"pm":"PM";return[{key:"AM",value:"AM",text:u},{key:"PM",value:"PM",text:y}]}),p=e.computed(()=>I.value===1?"PM":"AM"),i=e.computed(()=>{const u=Number(B.value[x.value]?.value??0);return r.value?p.value==="PM"?U(u,!0):U(u,!1):f.value&&u===24?0:u}),S=e.computed(()=>Number(T.value[m.value]?.value??0)),F=e.computed(()=>Number(t.value[V.value]?.value??0));function ae(u){!a.value&&!r.value&&D()}function le(u){r.value||D()}function re(u){D()}function D(){d.value=!1}return e.watch([i,S,F],([u,y,M])=>{v("update:initTime",{h:u,m:y,s:M})},{immediate:!0}),(u,y)=>d.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vtp-cols",ref_key:"root",ref:h},[e.createVNode($,{activeIndex:x.value,"onUpdate:activeIndex":y[0]||(y[0]=M=>x.value=M),items:B.value,label:"Hours"},null,8,["activeIndex","items"]),e.createVNode($,{activeIndex:m.value,"onUpdate:activeIndex":y[1]||(y[1]=M=>m.value=M),items:T.value,label:"Minutes",onSelect:ae},null,8,["activeIndex","items"]),a.value?(e.openBlock(),e.createBlock($,{key:0,activeIndex:V.value,"onUpdate:activeIndex":y[2]||(y[2]=M=>V.value=M),items:t.value,label:"Seconds",onSelect:le},null,8,["activeIndex","items"])):e.createCommentVNode("",!0),r.value?(e.openBlock(),e.createBlock($,{key:1,activeIndex:I.value,"onUpdate:activeIndex":y[3]||(y[3]=M=>I.value=M),items:o.value,label:"AM/PM",onSelect:re},null,8,["activeIndex","items"])):e.createCommentVNode("",!0)],512)):e.createCommentVNode("",!0)}}),z=/^(HH|H|hh|h|kk|k):(mm|m)(?::(ss|s))?(?:\s*(A|a|P|p))?$/,R=/^([01]\d|2[0-3]):([0-5]\d)(:([0-5]\d))?$/,X={modelValue:{type:[String,Array],default:void 0,validator:s=>{let c;return Array.isArray(s)?c=s.length===2&&s.every(r=>R.test(r)):c=s==null||R.test(s),c}},range:{type:Boolean,default:!1},hourStep:{type:Number,default:1},minuteStep:{type:Number,default:1},secondStep:{type:Number,default:1},format:{type:String,default:"HH:mm",validator:s=>z.test(s)}};function Y(s){const c=z.exec(s);if(!c)throw new Error(`[useTimeMask] Invalid format: ${s}`);const[,r,a,f,l]=c,v=[],d=!!l,h=/^k{1,2}$/.test(r);let g=0,k=23;return d?(g=1,k=12):h&&(g=1,k=24),v.push({token:r,min:g,max:k}),v.push({token:a,min:0,max:59}),f&&v.push({token:f,min:0,max:59}),{digitGroups:v,hasAmPm:!!l,ampmLowercase:l==="a"||l==="p"}}function j(s){const c=e.computed(()=>Y(s.value)),r=e.computed(()=>c.value.digitGroups.length*2),a=e.ref([]),f=e.ref("AM"),l=e.ref("");function v(){const{digitGroups:t,hasAmPm:n}=c.value;let o="",p=0;for(let i=0;i<t.length;i++){for(let S=0;S<2;S++)p<a.value.length&&(o+=String(a.value[p]),p++);p===(i+1)*2&&i<t.length-1&&(o+=":")}if(n&&p>=r.value){const i=c.value.ampmLowercase?f.value.toLowerCase():f.value;o+=" "+i}return o}function d(t){const n=t*2;if(a.value.length<n+2)return;const o=a.value[n]*10+a.value[n+1],{min:p,max:i}=c.value.digitGroups[t],S=Math.max(p,Math.min(i,o));S!==o&&(a.value[n]=Math.floor(S/10),a.value[n+1]=S%10)}function h(){for(let t=0;t<c.value.digitGroups.length;t++)d(t)}function g(t){const n=v();let o=0;for(let p=0;p<Math.min(t,n.length);p++)/\d/.test(n[p])&&o++;return o}function k(t){return t+Math.floor(t/2)}function x(t,n){if(t>=r.value)return r.value;const o=[...a.value];o[t]=n,a.value=o;const p=Math.floor(t/2);return d(p),Math.min(t+1,r.value)}function m(t,n){const o=v();l.value=o,t.value=o;const p=n!==void 0?Math.min(k(n),o.length):o.length;t.selectionStart=t.selectionEnd=p,e.nextTick(()=>{document.activeElement===t&&(t.selectionStart=t.selectionEnd=p)})}function V(t){const n=t.key,o=t.target;if(["Tab","Escape","ArrowLeft","ArrowRight","Home","End"].includes(n)||t.metaKey||t.ctrlKey)return;t.preventDefault();const p=o.selectionStart??0,i=g(p);if(n==="Backspace"){i>0&&m(o,i-1);return}if(n!=="Delete"){if(c.value.hasAmPm){const S=n.toLowerCase();if(S==="a"){f.value="AM",m(o,i);return}if(S==="p"){f.value="PM",m(o,i);return}}if(/^\d$/.test(n)){const S=x(i,+n);m(o,S);return}}}function P(t){const n=t.target,o=n.value.replace(/\D/g,"").split("").map(Number).slice(0,r.value);a.value=o,h(),c.value.hasAmPm&&(/p/i.test(n.value)?f.value="PM":/a/i.test(n.value)&&(f.value="AM")),m(n)}function H(t){t.preventDefault();const n=t.clipboardData?.getData("text")??"",o=t.target,p=o.selectionStart??0,i=n.replace(/\D/g,"").split("").map(Number);let S=g(p);for(const F of i){if(S>=r.value)break;S=x(S,F)}c.value.hasAmPm&&(/p\.?m\.?/i.test(n)?f.value="PM":/a\.?m\.?/i.test(n)&&(f.value="AM")),m(o,S)}function b(t){const{digitGroups:n,hasAmPm:o}=c.value,p=[];let i=t.h;o?(f.value=t.h>=12?"PM":"AM",i=t.h%12,i===0&&(i=12)):N(s.value)&&(i=t.h===0?24:t.h),p.push(Math.floor(i/10),i%10),p.push(Math.floor(t.m/10),t.m%10),n.length>2&&p.push(Math.floor(t.s/10),t.s%10),a.value=p,l.value=v()}function I(){if(a.value.length<r.value)return null;const t=[];for(let i=0;i<c.value.digitGroups.length;i++){const S=i*2;t.push(a.value[S]*10+a.value[S+1])}let n=t[0];const o=t[1],p=t[2]??0;return c.value.hasAmPm&&(n=f.value==="PM"?n===12?12:n+12:n===12?0:n),N(s.value)&&n===24&&(n=0),{h:n,m:o,s:p}}const B=e.computed(()=>a.value.length>=r.value),T=e.computed(()=>c.value.ampmLowercase);return{inputValue:l,handleKeydown:V,handleInput:P,handlePaste:H,setFromTime:b,getParsedTime:I,isComplete:B,totalDigits:r,displayPosToDigitIndex:g,ampm:f,ampmLowercase:T}}const Z={class:"timepicker-shell"},ee=["value","placeholder"],te=["value","placeholder"],ne=["value","placeholder"],oe=e.defineComponent({__name:"TimePicker",props:X,emits:["update:modelValue","open","close","error"],setup(s,{emit:c}){const r=e.ref(null),a=s,f=c,l=e.ref(!1),v=e.ref(!1);e.watch(l,t=>{t&&(v.value=!1)}),e.watch(v,t=>{t&&(l.value=!1)});const d=e.computed({get(){if(Array.isArray(a.modelValue)){const[t,n]=a.modelValue;return[C(t,a.format),C(n,a.format)]}else return C(a.modelValue,a.format)},set(t){Array.isArray(t)?f("update:modelValue",[L("HH:mm:ss",t[0]),L("HH:mm:ss",t[1])]):f("update:modelValue",L("HH:mm:ss",t))}}),h=e.computed({get(){return Array.isArray(d.value)?d.value[0]:d.value},set(t){Array.isArray(d.value)?d.value=[t,d.value[1]]:d.value=t}}),g=e.computed({get(){return Array.isArray(d.value)?d.value[1]:d.value},set(t){Array.isArray(d.value)&&(d.value=[d.value[0],t])}});e.computed(()=>{if(!a.modelValue)return"—";const t=n=>L(a.format,n);return a.range?`${t(h.value)} → ${t(g.value)}`:t(h.value)}),e.watch(()=>a.range,t=>{if(t){if(!Array.isArray(a.modelValue))throw new RangeError(`Model value must be an array for range selection: ${a.modelValue}`)}else if(Array.isArray(a.modelValue))throw new RangeError(`Model value must be a single string for single time selection: ${a.modelValue}`)},{immediate:!0});const k=e.computed(()=>a.format??"HH:mm:ss"),x=e.computed(()=>{let t=k.value.length;return/[AaPp]$/.test(k.value)&&(t+=1),`${Math.min(12,Math.max(4,t))}ch`}),m=j(k),V=m.inputValue,P=j(k),H=P.inputValue;e.watch(()=>[h.value,k.value],([t])=>{m.setFromTime(t)},{immediate:!0}),e.watch(()=>[g.value,k.value,a.range],([t,,n])=>{if(!n){P.setFromTime({h:0,m:0,s:0});return}P.setFromTime(t)},{immediate:!0});const b=e.ref(null);function I(t){if(t.key==="Enter"){t.preventDefault(),T("first");return}/^\d$/.test(t.key)&&(l.value=!1,v.value=!1);const n=t.target,o=m.displayPosToDigitIndex(n.selectionStart??0),p=/^\d$/.test(t.key)&&o>=m.totalDigits.value-1;if(m.handleKeydown(t),/^\d$/.test(t.key)){const i=m.getParsedTime();i&&(r.value=null,h.value=i)}a.range&&p&&b.value&&(T("first"),e.nextTick(()=>{const i=b.value;i&&(i.focus(),i.selectionStart=i.selectionEnd=0)}))}function B(t){if(t.key==="Enter"){t.preventDefault(),T("second");return}if(/^\d$/.test(t.key)&&(l.value=!1,v.value=!1),P.handleKeydown(t),/^\d$/.test(t.key)){const n=P.getParsedTime();n&&(r.value=null,g.value=n)}}function T(t){const o=(t==="first"?m:P).getParsedTime();o&&(r.value=null,t==="first"?h.value=o:a.range&&(g.value=o)),t==="first"?m.setFromTime(h.value):a.range&&P.setFromTime(g.value)}return(t,n)=>(e.openBlock(),e.createElementBlock("div",Z,[a.range?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["timepicker-shell__input",{"timepicker-shell__input--error":r.value}])},[e.createElementVNode("input",{type:"text",class:"timepicker-field",value:e.unref(V),placeholder:k.value,style:e.normalizeStyle({width:x.value}),onFocus:n[4]||(n[4]=o=>l.value=!0),onKeydown:I,onInput:n[5]||(n[5]=(...o)=>e.unref(m).handleInput&&e.unref(m).handleInput(...o)),onPaste:n[6]||(n[6]=(...o)=>e.unref(m).handlePaste&&e.unref(m).handlePaste(...o)),onBlur:n[7]||(n[7]=o=>T("first"))},null,44,te),n[16]||(n[16]=e.createElementVNode("span",{class:"timepicker-separator"},"–",-1)),e.createElementVNode("input",{ref_key:"secondInputRef",ref:b,type:"text",class:"timepicker-field",value:e.unref(H),placeholder:k.value,style:e.normalizeStyle({width:x.value}),onFocus:n[8]||(n[8]=o=>v.value=!0),onKeydown:B,onInput:n[9]||(n[9]=(...o)=>e.unref(P).handleInput&&e.unref(P).handleInput(...o)),onPaste:n[10]||(n[10]=(...o)=>e.unref(P).handlePaste&&e.unref(P).handlePaste(...o)),onBlur:n[11]||(n[11]=o=>T("second"))},null,44,ne)],2)):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["timepicker-shell__input",{"timepicker-shell__input--error":r.value}])},[e.createElementVNode("input",{type:"text",class:"timepicker-field",value:e.unref(V),placeholder:k.value,style:e.normalizeStyle({width:x.value}),onFocus:n[0]||(n[0]=o=>l.value=!0),onKeydown:I,onInput:n[1]||(n[1]=(...o)=>e.unref(m).handleInput&&e.unref(m).handleInput(...o)),onPaste:n[2]||(n[2]=(...o)=>e.unref(m).handlePaste&&e.unref(m).handlePaste(...o)),onBlur:n[3]||(n[3]=o=>T("first"))},null,44,ee)],2)),e.createElementVNode("div",null,[e.createVNode(G,{open:l.value,"onUpdate:open":n[12]||(n[12]=o=>l.value=o),initTime:h.value,"onUpdate:initTime":n[13]||(n[13]=o=>h.value=o),format:a.format,"hour-step":a.hourStep,"minute-step":a.minuteStep,"second-step":a.secondStep},null,8,["open","initTime","format","hour-step","minute-step","second-step"]),a.range?(e.openBlock(),e.createBlock(G,{key:0,open:v.value,"onUpdate:open":n[14]||(n[14]=o=>v.value=o),initTime:g.value,"onUpdate:initTime":n[15]||(n[15]=o=>g.value=o),format:a.format,"hour-step":a.hourStep,"minute-step":a.minuteStep,"second-step":a.secondStep},null,8,["open","initTime","format","hour-step","minute-step","second-step"])):e.createCommentVNode("",!0)])]))}});E.TimePicker=oe,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@manik02/vue3-timepicker",
+  "version": "0.1.0",
+  "description": "A flexible Vue 3 timepicker component with multiple format support, range selection, and fully customisable styling",
+  "license": "MIT",
+  "author": "Manos Savvides",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/manos02/vue3-time-picker.git"
+  },
+  "type": "module",
+  "main": "./dist/vue-timepicker.umd.cjs",
+  "module": "./dist/vue-timepicker.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/vue-timepicker.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vue-timepicker.js",
+      "require": "./dist/vue-timepicker.umd.cjs"
+    },
+    "./style.css": "./dist/vue-timepicker.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "timepicker",
+    "time-picker",
+    "time",
+    "component",
+    "range",
+    "12h",
+    "24h"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.3.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.7.0",
+    "happy-dom": "^20.6.3",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18",
+    "vue-tsc": "^3.0.6"
+  }
+}