@manik02/vue3-timepicker 0.2.2 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +45 -15
  2. package/dist/TimePicker/TimePicker.vue.d.ts +54 -1
  3. package/dist/TimePicker/types.d.ts +24 -0
  4. package/dist/TimePicker/useTimeMask.d.ts +1 -0
  5. package/dist/stories/TimePicker.stories.d.ts +220 -4
  6. package/dist/vue-timepicker.css +1 -1
  7. package/dist/vue-timepicker.js +704 -600
  8. package/dist/vue-timepicker.umd.cjs +1 -1
  9. package/package.json +4 -2
package/README.md CHANGED
@@ -58,20 +58,25 @@ The repository includes [storybook deploy workflow](.github/workflows/storybook.
58
58
 
59
59
  ## Props
60
60
 
61
- | Prop | Type | Default | Description |
62
- | ---------------- | -------------------------------------- | ----------- | --------------------------------------------------------------------------------------- |
63
- | `modelValue` | `string \| [string, string] \| null` | `undefined` | Time value in `HH:mm:ss` format. Use a two-element array for range mode. |
64
- | `format` | `TimeFormat` | `"HH:mm"` | Display format (see format tokens below). |
65
- | `range` | `boolean` | `false` | Enable range selection with two time inputs. |
66
- | `disabled` | `boolean` | `false` | Disables the timepicker input(s) and prevents opening/selecting. |
67
- | `hourStep` | `number` | `1` | Step interval for the hour column. |
68
- | `minuteStep` | `number` | `1` | Step interval for the minute column. |
69
- | `secondStep` | `number` | `1` | Step interval for the second column. |
70
- | `minTime` | `string` | `undefined` | Lower bound in `HH:mm` or `HH:mm:ss`; input and dropdown are constrained. |
71
- | `maxTime` | `string` | `undefined` | Upper bound in `HH:mm` or `HH:mm:ss`; input and dropdown are constrained. |
72
- | `disabledTimes` | `(string \| [string, string])[]` | `undefined` | Disabled points/ranges in `HH:mm:ss`; e.g. `"12:00:00"` or `[["13:00:00","14:00:00"]]`. |
73
- | `isTimeDisabled` | `(time: InternalFormat) => boolean` | `undefined` | Callback for custom disable rules. Return `true` to block a time. |
74
- | `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size preset that maps to CSS variables. |
61
+ | Prop | Type | Default | Description |
62
+ | ---------------- | -------------------------------------- | --------------- | --------------------------------------------------------------------------------------- |
63
+ | `modelValue` | `string \| [string, string] \| null` | `undefined` | Time value in `HH:mm:ss` format. Use a two-element array for range mode. |
64
+ | `format` | `TimeFormat` | `"HH:mm"` | Display format (see format tokens below). |
65
+ | `placeholder` | `string` | `"Select time"` | Placeholder text shown when input is empty. |
66
+ | `inputWidth` | `string \| number` | `undefined` | Width for each input field. Number values are treated as `px`. |
67
+ | `minInputWidth` | `string \| number` | `undefined` | Minimum width for each input field. Number values are treated as `px`. |
68
+ | `maxInputWidth` | `string \| number` | `undefined` | Maximum width for each input field. Number values are treated as `px`. |
69
+ | `componentWidth` | `string \| number` | `undefined` | Width of the outer component shell. Number values are treated as `px`. |
70
+ | `range` | `boolean` | `false` | Enable range selection with two time inputs. |
71
+ | `disabled` | `boolean` | `false` | Disables the timepicker input(s) and prevents opening/selecting. |
72
+ | `hourStep` | `number` | `1` | Step interval for the hour column. |
73
+ | `minuteStep` | `number` | `1` | Step interval for the minute column. |
74
+ | `secondStep` | `number` | `1` | Step interval for the second column. |
75
+ | `minTime` | `string` | `undefined` | Lower bound in `HH:mm` or `HH:mm:ss`; input and dropdown are constrained. |
76
+ | `maxTime` | `string` | `undefined` | Upper bound in `HH:mm` or `HH:mm:ss`; input and dropdown are constrained. |
77
+ | `disabledTimes` | `(string \| [string, string])[]` | `undefined` | Disabled points/ranges in `HH:mm:ss`; e.g. `"12:00:00"` or `[["13:00:00","14:00:00"]]`. |
78
+ | `isTimeDisabled` | `(time: InternalFormat) => boolean` | `undefined` | Callback for custom disable rules. Return `true` to block a time. |
79
+ | `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size preset that maps to CSS variables. |
75
80
 
76
81
  ## Validation API
77
82
 
@@ -187,7 +192,7 @@ const range = ref(["09:00:00", "17:00:00"]);
187
192
  </template>
188
193
  ```
189
194
 
190
- When `range` is `true`, `modelValue` must be a `[string, string]` array.
195
+ When `range` is `true`, `modelValue` must be a `[string, string]` array when set, or `null`/`undefined` for an empty state.
191
196
 
192
197
  ## 12-hour format
193
198
 
@@ -224,6 +229,27 @@ The dropdown columns will show values at the specified intervals (e.g. 00, 15, 3
224
229
 
225
230
  Each preset sets a handful of CSS custom properties (`--vtp-font-size`, `--vtp-padding`, `--vtp-option-padding`, `--vtp-dropdown-radius`). You can still override any of them manually.
226
231
 
232
+ ## Width control
233
+
234
+ The component keeps a smart default width based on `format`/`placeholder`, but you can override it when needed.
235
+
236
+ ```vue
237
+ <TimePicker
238
+ v-model="time"
239
+ format="HH:mm:ss"
240
+ :input-width="220"
241
+ min-input-width="12ch"
242
+ max-input-width="320px"
243
+ component-width="100%"
244
+ />
245
+ ```
246
+
247
+ Width precedence for each input field:
248
+
249
+ 1. `inputWidth` prop
250
+ 2. `--vtp-input-width` CSS variable
251
+ 3. Built-in heuristic (`6ch` to `20ch`, based on `format`/`placeholder`)
252
+
227
253
  ## CSS custom properties
228
254
 
229
255
  Style the component by setting CSS custom properties on `.timepicker-shell` or any ancestor element.
@@ -241,6 +267,10 @@ Style the component by setting CSS custom properties on `.timepicker-shell` or a
241
267
  --vtp-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.2);
242
268
  --vtp-error-border: #ef4444;
243
269
  --vtp-error-ring: 0 0 0 3px rgba(239, 68, 68, 0.15);
270
+ --vtp-component-width: auto;
271
+ --vtp-input-width: 12ch;
272
+ --vtp-input-min-width: 0;
273
+ --vtp-input-max-width: none;
244
274
  --vtp-separator-color: #9ca3af;
245
275
  --vtp-dropdown-bg: #fff;
246
276
  --vtp-dropdown-border: #e5e7eb;
package/dist/TimePicker/TimePicker.vue.d.ts CHANGED
@@ -49,6 +49,30 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
49
49
  readonly default: "HH:mm";
50
50
  readonly validator: (fmt: string) => boolean;
51
51
  };
52
+ readonly placeholder: {
53
+ readonly type: StringConstructor;
54
+ readonly default: "Select time";
55
+ };
56
+ readonly inputWidth: {
57
+ readonly type: import('vue').PropType<string | number | undefined>;
58
+ readonly default: undefined;
59
+ readonly validator: (v?: string | number) => boolean;
60
+ };
61
+ readonly componentWidth: {
62
+ readonly type: import('vue').PropType<string | number | undefined>;
63
+ readonly default: undefined;
64
+ readonly validator: (v?: string | number) => boolean;
65
+ };
66
+ readonly minInputWidth: {
67
+ readonly type: import('vue').PropType<string | number | undefined>;
68
+ readonly default: undefined;
69
+ readonly validator: (v?: string | number) => boolean;
70
+ };
71
+ readonly maxInputWidth: {
72
+ readonly type: import('vue').PropType<string | number | undefined>;
73
+ readonly default: undefined;
74
+ readonly validator: (v?: string | number) => boolean;
75
+ };
52
76
  readonly size: {
53
77
  readonly type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl">;
54
78
  readonly default: "md";
@@ -119,6 +143,30 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
119
143
  readonly default: "HH:mm";
120
144
  readonly validator: (fmt: string) => boolean;
121
145
  };
146
+ readonly placeholder: {
147
+ readonly type: StringConstructor;
148
+ readonly default: "Select time";
149
+ };
150
+ readonly inputWidth: {
151
+ readonly type: import('vue').PropType<string | number | undefined>;
152
+ readonly default: undefined;
153
+ readonly validator: (v?: string | number) => boolean;
154
+ };
155
+ readonly componentWidth: {
156
+ readonly type: import('vue').PropType<string | number | undefined>;
157
+ readonly default: undefined;
158
+ readonly validator: (v?: string | number) => boolean;
159
+ };
160
+ readonly minInputWidth: {
161
+ readonly type: import('vue').PropType<string | number | undefined>;
162
+ readonly default: undefined;
163
+ readonly validator: (v?: string | number) => boolean;
164
+ };
165
+ readonly maxInputWidth: {
166
+ readonly type: import('vue').PropType<string | number | undefined>;
167
+ readonly default: undefined;
168
+ readonly validator: (v?: string | number) => boolean;
169
+ };
122
170
  readonly size: {
123
171
  readonly type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl">;
124
172
  readonly default: "md";
@@ -151,8 +199,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
151
199
  readonly disabledTimes: readonly DisabledTimeInput[] | undefined;
152
200
  readonly isTimeDisabled: (time: InternalFormat) => boolean;
153
201
  readonly format: import('./types').TimeFormat;
202
+ readonly placeholder: string;
203
+ readonly inputWidth: string | number | undefined;
204
+ readonly componentWidth: string | number | undefined;
205
+ readonly minInputWidth: string | number | undefined;
206
+ readonly maxInputWidth: string | number | undefined;
154
207
  readonly size: "xs" | "sm" | "md" | "lg" | "xl";
155
208
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
156
209
  secondInputRef: HTMLInputElement;
157
- }, any>;
210
+ }, HTMLDivElement>;
158
211
  export default _default;
package/dist/TimePicker/types.d.ts CHANGED
@@ -68,6 +68,30 @@ export declare const timePickerProps: {
68
68
  readonly default: "HH:mm";
69
69
  readonly validator: (fmt: string) => boolean;
70
70
  };
71
+ readonly placeholder: {
72
+ readonly type: StringConstructor;
73
+ readonly default: "Select time";
74
+ };
75
+ readonly inputWidth: {
76
+ readonly type: PropType<string | number | undefined>;
77
+ readonly default: undefined;
78
+ readonly validator: (v?: string | number) => boolean;
79
+ };
80
+ readonly componentWidth: {
81
+ readonly type: PropType<string | number | undefined>;
82
+ readonly default: undefined;
83
+ readonly validator: (v?: string | number) => boolean;
84
+ };
85
+ readonly minInputWidth: {
86
+ readonly type: PropType<string | number | undefined>;
87
+ readonly default: undefined;
88
+ readonly validator: (v?: string | number) => boolean;
89
+ };
90
+ readonly maxInputWidth: {
91
+ readonly type: PropType<string | number | undefined>;
92
+ readonly default: undefined;
93
+ readonly validator: (v?: string | number) => boolean;
94
+ };
71
95
  readonly size: {
72
96
  readonly type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
73
97
  readonly default: "md";
package/dist/TimePicker/useTimeMask.d.ts CHANGED
@@ -6,6 +6,7 @@ export declare function useTimeMask(format: Ref<string> | ComputedRef<string>):
6
6
  handleInput: (e: Event) => void;
7
7
  handlePaste: (e: ClipboardEvent) => void;
8
8
  setFromTime: (time: InternalFormat) => void;
9
+ clear: () => void;
9
10
  getParsedTime: () => InternalFormat | null;
10
11
  isComplete: ComputedRef<boolean>;
11
12
  totalDigits: ComputedRef<number>;
package/dist/stories/TimePicker.stories.d.ts CHANGED
@@ -51,6 +51,30 @@ declare const meta: {
51
51
  readonly default: "HH:mm";
52
52
  readonly validator: (fmt: string) => boolean;
53
53
  };
54
+ readonly placeholder: {
55
+ readonly type: StringConstructor;
56
+ readonly default: "Select time";
57
+ };
58
+ readonly inputWidth: {
59
+ readonly type: import('vue').PropType<string | number | undefined>;
60
+ readonly default: undefined;
61
+ readonly validator: (v?: string | number) => boolean;
62
+ };
63
+ readonly componentWidth: {
64
+ readonly type: import('vue').PropType<string | number | undefined>;
65
+ readonly default: undefined;
66
+ readonly validator: (v?: string | number) => boolean;
67
+ };
68
+ readonly minInputWidth: {
69
+ readonly type: import('vue').PropType<string | number | undefined>;
70
+ readonly default: undefined;
71
+ readonly validator: (v?: string | number) => boolean;
72
+ };
73
+ readonly maxInputWidth: {
74
+ readonly type: import('vue').PropType<string | number | undefined>;
75
+ readonly default: undefined;
76
+ readonly validator: (v?: string | number) => boolean;
77
+ };
54
78
  readonly size: {
55
79
  readonly type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl">;
56
80
  readonly default: "md";
@@ -121,6 +145,30 @@ declare const meta: {
121
145
  readonly default: "HH:mm";
122
146
  readonly validator: (fmt: string) => boolean;
123
147
  };
148
+ readonly placeholder: {
149
+ readonly type: StringConstructor;
150
+ readonly default: "Select time";
151
+ };
152
+ readonly inputWidth: {
153
+ readonly type: import('vue').PropType<string | number | undefined>;
154
+ readonly default: undefined;
155
+ readonly validator: (v?: string | number) => boolean;
156
+ };
157
+ readonly componentWidth: {
158
+ readonly type: import('vue').PropType<string | number | undefined>;
159
+ readonly default: undefined;
160
+ readonly validator: (v?: string | number) => boolean;
161
+ };
162
+ readonly minInputWidth: {
163
+ readonly type: import('vue').PropType<string | number | undefined>;
164
+ readonly default: undefined;
165
+ readonly validator: (v?: string | number) => boolean;
166
+ };
167
+ readonly maxInputWidth: {
168
+ readonly type: import('vue').PropType<string | number | undefined>;
169
+ readonly default: undefined;
170
+ readonly validator: (v?: string | number) => boolean;
171
+ };
124
172
  readonly size: {
125
173
  readonly type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl">;
126
174
  readonly default: "md";
@@ -153,14 +201,23 @@ declare const meta: {
153
201
  readonly disabledTimes: readonly import('../index').DisabledTimeInput[] | undefined;
154
202
  readonly isTimeDisabled: (time: import('../index').InternalFormat) => boolean;
155
203
  readonly format: import('../index').TimeFormat;
204
+ readonly placeholder: string;
205
+ readonly inputWidth: string | number | undefined;
206
+ readonly componentWidth: string | number | undefined;
207
+ readonly minInputWidth: string | number | undefined;
208
+ readonly maxInputWidth: string | number | undefined;
156
209
  readonly size: "xs" | "sm" | "md" | "lg" | "xl";
157
210
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
158
211
  secondInputRef: HTMLInputElement;
159
- }, any>;
212
+ }, HTMLDivElement>;
160
213
  tags: string[];
161
214
  args: {
162
215
  format: "HH:mm:ss";
163
216
  range: false;
217
+ inputWidth: undefined;
218
+ minInputWidth: undefined;
219
+ maxInputWidth: undefined;
220
+ componentWidth: undefined;
164
221
  size: "md";
165
222
  disabled: false;
166
223
  hourStep: number;
@@ -241,6 +298,30 @@ declare const meta: {
241
298
  readonly default: "HH:mm";
242
299
  readonly validator: (fmt: string) => boolean;
243
300
  };
301
+ readonly placeholder: {
302
+ readonly type: StringConstructor;
303
+ readonly default: "Select time";
304
+ };
305
+ readonly inputWidth: {
306
+ readonly type: import('vue').PropType<string | number | undefined>;
307
+ readonly default: undefined;
308
+ readonly validator: (v?: string | number) => boolean;
309
+ };
310
+ readonly componentWidth: {
311
+ readonly type: import('vue').PropType<string | number | undefined>;
312
+ readonly default: undefined;
313
+ readonly validator: (v?: string | number) => boolean;
314
+ };
315
+ readonly minInputWidth: {
316
+ readonly type: import('vue').PropType<string | number | undefined>;
317
+ readonly default: undefined;
318
+ readonly validator: (v?: string | number) => boolean;
319
+ };
320
+ readonly maxInputWidth: {
321
+ readonly type: import('vue').PropType<string | number | undefined>;
322
+ readonly default: undefined;
323
+ readonly validator: (v?: string | number) => boolean;
324
+ };
244
325
  readonly size: {
245
326
  readonly type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl">;
246
327
  readonly default: "md";
@@ -311,6 +392,30 @@ declare const meta: {
311
392
  readonly default: "HH:mm";
312
393
  readonly validator: (fmt: string) => boolean;
313
394
  };
395
+ readonly placeholder: {
396
+ readonly type: StringConstructor;
397
+ readonly default: "Select time";
398
+ };
399
+ readonly inputWidth: {
400
+ readonly type: import('vue').PropType<string | number | undefined>;
401
+ readonly default: undefined;
402
+ readonly validator: (v?: string | number) => boolean;
403
+ };
404
+ readonly componentWidth: {
405
+ readonly type: import('vue').PropType<string | number | undefined>;
406
+ readonly default: undefined;
407
+ readonly validator: (v?: string | number) => boolean;
408
+ };
409
+ readonly minInputWidth: {
410
+ readonly type: import('vue').PropType<string | number | undefined>;
411
+ readonly default: undefined;
412
+ readonly validator: (v?: string | number) => boolean;
413
+ };
414
+ readonly maxInputWidth: {
415
+ readonly type: import('vue').PropType<string | number | undefined>;
416
+ readonly default: undefined;
417
+ readonly validator: (v?: string | number) => boolean;
418
+ };
314
419
  readonly size: {
315
420
  readonly type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl">;
316
421
  readonly default: "md";
@@ -343,10 +448,15 @@ declare const meta: {
343
448
  readonly disabledTimes: readonly import('../index').DisabledTimeInput[] | undefined;
344
449
  readonly isTimeDisabled: (time: import('../index').InternalFormat) => boolean;
345
450
  readonly format: import('../index').TimeFormat;
451
+ readonly placeholder: string;
452
+ readonly inputWidth: string | number | undefined;
453
+ readonly componentWidth: string | number | undefined;
454
+ readonly minInputWidth: string | number | undefined;
455
+ readonly maxInputWidth: string | number | undefined;
346
456
  readonly size: "xs" | "sm" | "md" | "lg" | "xl";
347
457
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
348
458
  secondInputRef: HTMLInputElement;
349
- }, any>>) => {
459
+ }, HTMLDivElement>>) => {
350
460
  components: {
351
461
  TimePicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
352
462
  readonly modelValue: {
@@ -398,6 +508,30 @@ declare const meta: {
398
508
  readonly default: "HH:mm";
399
509
  readonly validator: (fmt: string) => boolean;
400
510
  };
511
+ readonly placeholder: {
512
+ readonly type: StringConstructor;
513
+ readonly default: "Select time";
514
+ };
515
+ readonly inputWidth: {
516
+ readonly type: import('vue').PropType<string | number | undefined>;
517
+ readonly default: undefined;
518
+ readonly validator: (v?: string | number) => boolean;
519
+ };
520
+ readonly componentWidth: {
521
+ readonly type: import('vue').PropType<string | number | undefined>;
522
+ readonly default: undefined;
523
+ readonly validator: (v?: string | number) => boolean;
524
+ };
525
+ readonly minInputWidth: {
526
+ readonly type: import('vue').PropType<string | number | undefined>;
527
+ readonly default: undefined;
528
+ readonly validator: (v?: string | number) => boolean;
529
+ };
530
+ readonly maxInputWidth: {
531
+ readonly type: import('vue').PropType<string | number | undefined>;
532
+ readonly default: undefined;
533
+ readonly validator: (v?: string | number) => boolean;
534
+ };
401
535
  readonly size: {
402
536
  readonly type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl">;
403
537
  readonly default: "md";
@@ -468,6 +602,30 @@ declare const meta: {
468
602
  readonly default: "HH:mm";
469
603
  readonly validator: (fmt: string) => boolean;
470
604
  };
605
+ readonly placeholder: {
606
+ readonly type: StringConstructor;
607
+ readonly default: "Select time";
608
+ };
609
+ readonly inputWidth: {
610
+ readonly type: import('vue').PropType<string | number | undefined>;
611
+ readonly default: undefined;
612
+ readonly validator: (v?: string | number) => boolean;
613
+ };
614
+ readonly componentWidth: {
615
+ readonly type: import('vue').PropType<string | number | undefined>;
616
+ readonly default: undefined;
617
+ readonly validator: (v?: string | number) => boolean;
618
+ };
619
+ readonly minInputWidth: {
620
+ readonly type: import('vue').PropType<string | number | undefined>;
621
+ readonly default: undefined;
622
+ readonly validator: (v?: string | number) => boolean;
623
+ };
624
+ readonly maxInputWidth: {
625
+ readonly type: import('vue').PropType<string | number | undefined>;
626
+ readonly default: undefined;
627
+ readonly validator: (v?: string | number) => boolean;
628
+ };
471
629
  readonly size: {
472
630
  readonly type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl">;
473
631
  readonly default: "md";
@@ -500,10 +658,15 @@ declare const meta: {
500
658
  readonly disabledTimes: readonly import('../index').DisabledTimeInput[] | undefined;
501
659
  readonly isTimeDisabled: (time: import('../index').InternalFormat) => boolean;
502
660
  readonly format: import('../index').TimeFormat;
661
+ readonly placeholder: string;
662
+ readonly inputWidth: string | number | undefined;
663
+ readonly componentWidth: string | number | undefined;
664
+ readonly minInputWidth: string | number | undefined;
665
+ readonly maxInputWidth: string | number | undefined;
503
666
  readonly size: "xs" | "sm" | "md" | "lg" | "xl";
504
667
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
505
668
  secondInputRef: HTMLInputElement;
506
- }, any>;
669
+ }, HTMLDivElement>;
507
670
  };
508
671
  setup(this: void): {
509
672
  args: import('@storybook/vue3').ComponentPropsAndSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -556,6 +719,30 @@ declare const meta: {
556
719
  readonly default: "HH:mm";
557
720
  readonly validator: (fmt: string) => boolean;
558
721
  };
722
+ readonly placeholder: {
723
+ readonly type: StringConstructor;
724
+ readonly default: "Select time";
725
+ };
726
+ readonly inputWidth: {
727
+ readonly type: import('vue').PropType<string | number | undefined>;
728
+ readonly default: undefined;
729
+ readonly validator: (v?: string | number) => boolean;
730
+ };
731
+ readonly componentWidth: {
732
+ readonly type: import('vue').PropType<string | number | undefined>;
733
+ readonly default: undefined;
734
+ readonly validator: (v?: string | number) => boolean;
735
+ };
736
+ readonly minInputWidth: {
737
+ readonly type: import('vue').PropType<string | number | undefined>;
738
+ readonly default: undefined;
739
+ readonly validator: (v?: string | number) => boolean;
740
+ };
741
+ readonly maxInputWidth: {
742
+ readonly type: import('vue').PropType<string | number | undefined>;
743
+ readonly default: undefined;
744
+ readonly validator: (v?: string | number) => boolean;
745
+ };
559
746
  readonly size: {
560
747
  readonly type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl">;
561
748
  readonly default: "md";
@@ -626,6 +813,30 @@ declare const meta: {
626
813
  readonly default: "HH:mm";
627
814
  readonly validator: (fmt: string) => boolean;
628
815
  };
816
+ readonly placeholder: {
817
+ readonly type: StringConstructor;
818
+ readonly default: "Select time";
819
+ };
820
+ readonly inputWidth: {
821
+ readonly type: import('vue').PropType<string | number | undefined>;
822
+ readonly default: undefined;
823
+ readonly validator: (v?: string | number) => boolean;
824
+ };
825
+ readonly componentWidth: {
826
+ readonly type: import('vue').PropType<string | number | undefined>;
827
+ readonly default: undefined;
828
+ readonly validator: (v?: string | number) => boolean;
829
+ };
830
+ readonly minInputWidth: {
831
+ readonly type: import('vue').PropType<string | number | undefined>;
832
+ readonly default: undefined;
833
+ readonly validator: (v?: string | number) => boolean;
834
+ };
835
+ readonly maxInputWidth: {
836
+ readonly type: import('vue').PropType<string | number | undefined>;
837
+ readonly default: undefined;
838
+ readonly validator: (v?: string | number) => boolean;
839
+ };
629
840
  readonly size: {
630
841
  readonly type: import('vue').PropType<"xs" | "sm" | "md" | "lg" | "xl">;
631
842
  readonly default: "md";
@@ -658,10 +869,15 @@ declare const meta: {
658
869
  readonly disabledTimes: readonly import('../index').DisabledTimeInput[] | undefined;
659
870
  readonly isTimeDisabled: (time: import('../index').InternalFormat) => boolean;
660
871
  readonly format: import('../index').TimeFormat;
872
+ readonly placeholder: string;
873
+ readonly inputWidth: string | number | undefined;
874
+ readonly componentWidth: string | number | undefined;
875
+ readonly minInputWidth: string | number | undefined;
876
+ readonly maxInputWidth: string | number | undefined;
661
877
  readonly size: "xs" | "sm" | "md" | "lg" | "xl";
662
878
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
663
879
  secondInputRef: HTMLInputElement;
664
- }, any>>;
880
+ }, HTMLDivElement>>;
665
881
  single: import('vue').Ref<string, string>;
666
882
  range: import('vue').Ref<[string, string], [string, string]>;
667
883
  valueLabel: import('vue').ComputedRef<string>;
package/dist/vue-timepicker.css CHANGED
@@ -1 +1 @@
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[data-size=xs]{--vtp-font-size: .75rem;--vtp-padding: .2rem .3rem;--vtp-option-padding: .15rem .3rem;--vtp-dropdown-radius: .35rem}.timepicker-shell[data-size=sm]{--vtp-font-size: .875rem;--vtp-padding: .25rem .375rem;--vtp-option-padding: .2rem .375rem;--vtp-dropdown-radius: .4rem}.timepicker-shell[data-size=md]{--vtp-font-size: 1rem;--vtp-padding: .375rem .5rem;--vtp-option-padding: .3rem .5rem;--vtp-dropdown-radius: .5rem}.timepicker-shell[data-size=lg]{--vtp-font-size: 1.125rem;--vtp-padding: .5rem .65rem;--vtp-option-padding: .4rem .65rem;--vtp-dropdown-radius: .6rem}.timepicker-shell[data-size=xl]{--vtp-font-size: 1.25rem;--vtp-padding: .6rem .8rem;--vtp-option-padding: .5rem .8rem;--vtp-dropdown-radius: .7rem}.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--disabled{opacity:.6;cursor:not-allowed}.timepicker-shell__input--disabled .timepicker-field{cursor:not-allowed}.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)}
1
+ .timepicker-shell,.timepicker-shell *,.timepicker-shell *:before,.timepicker-shell *:after{box-sizing:border-box}.timepicker-shell{position:relative;display:inline-block;width:var(--vtp-component-width, auto);font-family:var(--vtp-font-family, inherit);font-size:var(--vtp-font-size, inherit);color:var(--vtp-color, inherit)}.timepicker-shell[data-size=xs]{--vtp-font-size: .75rem;--vtp-padding: .2rem .3rem;--vtp-option-padding: .15rem .3rem;--vtp-dropdown-radius: .35rem;--vtp-option-height: 1.7rem}.timepicker-shell[data-size=sm]{--vtp-font-size: .875rem;--vtp-padding: .25rem .375rem;--vtp-option-padding: .2rem .375rem;--vtp-dropdown-radius: .4rem;--vtp-option-height: 1.85rem}.timepicker-shell[data-size=md]{--vtp-font-size: 1rem;--vtp-padding: .375rem .5rem;--vtp-option-padding: .3rem .5rem;--vtp-dropdown-radius: .5rem;--vtp-option-height: 2rem}.timepicker-shell[data-size=lg]{--vtp-font-size: 1.125rem;--vtp-padding: .5rem .65rem;--vtp-option-padding: .4rem .65rem;--vtp-dropdown-radius: .6rem;--vtp-option-height: 2.15rem}.timepicker-shell[data-size=xl]{--vtp-font-size: 1.25rem;--vtp-padding: .6rem .8rem;--vtp-option-padding: .5rem .8rem;--vtp-dropdown-radius: .7rem;--vtp-option-height: 2.3rem}.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--disabled{opacity:.6;cursor:not-allowed}.timepicker-shell__input--disabled .timepicker-field{cursor:not-allowed}.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{position:relative;min-width:44px;max-height:var(--vtp-dropdown-max-height, 220px);overflow-y:auto;overflow-x:hidden;padding:0;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;scroll-behavior:auto;scroll-snap-type:y proximity;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;scrollbar-gutter:auto}.timepicker-dropdown--short .timepicker-dropdown__panel{min-width:32px}.timepicker-dropdown__panel::-webkit-scrollbar{display:none}.timepicker-option{display:flex;align-items:center;justify-content:center;min-height:var(--vtp-option-height, 2rem);padding:var(--vtp-option-padding, .3rem .5rem);border-radius:var(--vtp-option-radius, 4px);cursor:pointer;line-height:1;text-align:center;scroll-snap-align:center;transition:background .14s ease,color .14s ease,transform .14s ease,opacity .14s ease}.timepicker-dropdown--short .timepicker-option{min-height:calc(var(--vtp-option-height, 2rem) * .9);padding:.2rem .3rem}.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);transform:scale(1.02)}.timepicker-option--disabled{opacity:.35;pointer-events:none}.vtp-cols{display:inline-flex;flex-wrap:nowrap;gap:0}