@manik02/vue3-timepicker 0.4.1 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -19
- package/dist/TimePicker/TimePicker.vue.d.ts +65 -0
- package/dist/TimePicker/types.d.ts +29 -0
- package/dist/stories/TimePicker.stories.d.ts +354 -0
- package/dist/vue-timepicker.css +1 -1
- package/dist/vue-timepicker.js +720 -639
- package/dist/vue-timepicker.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -60,25 +60,38 @@ The repository includes [storybook deploy workflow](.github/workflows/storybook.
|
|
|
60
60
|
|
|
61
61
|
## Props
|
|
62
62
|
|
|
63
|
-
| Prop | Type
|
|
64
|
-
| ---------------- |
|
|
65
|
-
| `modelValue` | `string \| [string, string] \| null`
|
|
66
|
-
| `format` | `TimeFormat`
|
|
67
|
-
| `placeholder` | `string`
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
63
|
+
| Prop | Type | Default | Description |
|
|
64
|
+
| ---------------- | ----------------------------------------------- | --------------- | --------------------------------------------------------------------------------------- |
|
|
65
|
+
| `modelValue` | `string \| [string, string] \| null` | `undefined` | Time value in `HH:mm:ss` format. Use a two-element array for range mode. |
|
|
66
|
+
| `format` | `TimeFormat` | `"HH:mm"` | Display format (see format tokens below). |
|
|
67
|
+
| `placeholder` | `string` | `"Select time"` | Placeholder text shown when input is empty. |
|
|
68
|
+
| `id` | `string` | `undefined` | Input id. In range mode, second input uses `${id}-end`. |
|
|
69
|
+
| `name` | `string` | `undefined` | Input name. In range mode, second input uses `${name}-end`. |
|
|
70
|
+
| `tabindex` | `number` | `0` | Tab order index applied to input field(s). |
|
|
71
|
+
| `autocomplete` | `string` | `"off"` | Native HTML autocomplete attribute for input field(s). |
|
|
72
|
+
| `inputClass` | `string \| string[] \| Record<string, boolean>` | `undefined` | Extra class(es) applied to the input field(s). |
|
|
73
|
+
| `inputWidth` | `string \| number` | `undefined` | Width for each input field. Number values are treated as `px`. |
|
|
74
|
+
| `minInputWidth` | `string \| number` | `undefined` | Minimum width for each input field. Number values are treated as `px`. |
|
|
75
|
+
| `maxInputWidth` | `string \| number` | `undefined` | Maximum width for each input field. Number values are treated as `px`. |
|
|
76
|
+
| `componentWidth` | `string \| number` | `undefined` | Width of the outer component shell. Number values are treated as `px`. |
|
|
77
|
+
| `range` | `boolean` | `false` | Enable range selection with two time inputs. |
|
|
78
|
+
| `disabled` | `boolean` | `false` | Disables the timepicker input(s) and prevents opening/selecting. |
|
|
79
|
+
| `hideDropdown` | `boolean` | `false` | Hides time columns so selection is typing-only. |
|
|
80
|
+
| `hourStep` | `number` | `1` | Step interval for the hour column. |
|
|
81
|
+
| `minuteStep` | `number` | `1` | Step interval for the minute column. |
|
|
82
|
+
| `secondStep` | `number` | `1` | Step interval for the second column. |
|
|
83
|
+
| `minTime` | `string` | `undefined` | Lower bound in `HH:mm` or `HH:mm:ss`; input and dropdown are constrained. |
|
|
84
|
+
| `maxTime` | `string` | `undefined` | Upper bound in `HH:mm` or `HH:mm:ss`; input and dropdown are constrained. |
|
|
85
|
+
| `disabledTimes` | `(string \| [string, string])[]` | `undefined` | Disabled points/ranges in `HH:mm:ss`; e.g. `"12:00:00"` or `[["13:00:00","14:00:00"]]`. |
|
|
86
|
+
| `isTimeDisabled` | `(time: InternalFormat) => boolean` | `undefined` | Callback for custom disable rules. Return `true` to block a time. |
|
|
87
|
+
| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size preset that maps to CSS variables. |
|
|
88
|
+
|
|
89
|
+
### Autocomplete notes
|
|
90
|
+
|
|
91
|
+
- `autocomplete` is passed directly to the native `<input>` element(s).
|
|
92
|
+
- In range mode, both inputs receive the same `autocomplete` value.
|
|
93
|
+
- Browser autofill behavior depends on form context and input metadata (`id`, `name`, surrounding `<form>`).
|
|
94
|
+
- Specific tokens (when useful for your form): e.g. `"one-time-code"`.
|
|
82
95
|
|
|
83
96
|
## Validation API
|
|
84
97
|
|
|
@@ -13,6 +13,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
13
13
|
readonly type: BooleanConstructor;
|
|
14
14
|
readonly default: false;
|
|
15
15
|
};
|
|
16
|
+
readonly hideDropdown: {
|
|
17
|
+
readonly type: BooleanConstructor;
|
|
18
|
+
readonly default: false;
|
|
19
|
+
};
|
|
16
20
|
readonly hourStep: {
|
|
17
21
|
readonly type: NumberConstructor;
|
|
18
22
|
readonly default: 1;
|
|
@@ -53,6 +57,31 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
53
57
|
readonly type: StringConstructor;
|
|
54
58
|
readonly default: "Select time";
|
|
55
59
|
};
|
|
60
|
+
readonly id: {
|
|
61
|
+
readonly type: import('vue').PropType<string | undefined>;
|
|
62
|
+
readonly default: undefined;
|
|
63
|
+
readonly validator: (v?: string) => boolean;
|
|
64
|
+
};
|
|
65
|
+
readonly name: {
|
|
66
|
+
readonly type: import('vue').PropType<string | undefined>;
|
|
67
|
+
readonly default: undefined;
|
|
68
|
+
readonly validator: (v?: string) => boolean;
|
|
69
|
+
};
|
|
70
|
+
readonly tabindex: {
|
|
71
|
+
readonly type: NumberConstructor;
|
|
72
|
+
readonly default: 0;
|
|
73
|
+
readonly validator: (v: number) => boolean;
|
|
74
|
+
};
|
|
75
|
+
readonly autocomplete: {
|
|
76
|
+
readonly type: StringConstructor;
|
|
77
|
+
readonly default: "off";
|
|
78
|
+
readonly validator: (v: string) => boolean;
|
|
79
|
+
};
|
|
80
|
+
readonly inputClass: {
|
|
81
|
+
readonly type: import('vue').PropType<string | string[] | Record<string, boolean> | undefined>;
|
|
82
|
+
readonly default: undefined;
|
|
83
|
+
readonly validator: (v?: string | string[] | Record<string, boolean>) => boolean;
|
|
84
|
+
};
|
|
56
85
|
readonly inputWidth: {
|
|
57
86
|
readonly type: import('vue').PropType<string | number | undefined>;
|
|
58
87
|
readonly default: undefined;
|
|
@@ -107,6 +136,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
107
136
|
readonly type: BooleanConstructor;
|
|
108
137
|
readonly default: false;
|
|
109
138
|
};
|
|
139
|
+
readonly hideDropdown: {
|
|
140
|
+
readonly type: BooleanConstructor;
|
|
141
|
+
readonly default: false;
|
|
142
|
+
};
|
|
110
143
|
readonly hourStep: {
|
|
111
144
|
readonly type: NumberConstructor;
|
|
112
145
|
readonly default: 1;
|
|
@@ -147,6 +180,31 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
147
180
|
readonly type: StringConstructor;
|
|
148
181
|
readonly default: "Select time";
|
|
149
182
|
};
|
|
183
|
+
readonly id: {
|
|
184
|
+
readonly type: import('vue').PropType<string | undefined>;
|
|
185
|
+
readonly default: undefined;
|
|
186
|
+
readonly validator: (v?: string) => boolean;
|
|
187
|
+
};
|
|
188
|
+
readonly name: {
|
|
189
|
+
readonly type: import('vue').PropType<string | undefined>;
|
|
190
|
+
readonly default: undefined;
|
|
191
|
+
readonly validator: (v?: string) => boolean;
|
|
192
|
+
};
|
|
193
|
+
readonly tabindex: {
|
|
194
|
+
readonly type: NumberConstructor;
|
|
195
|
+
readonly default: 0;
|
|
196
|
+
readonly validator: (v: number) => boolean;
|
|
197
|
+
};
|
|
198
|
+
readonly autocomplete: {
|
|
199
|
+
readonly type: StringConstructor;
|
|
200
|
+
readonly default: "off";
|
|
201
|
+
readonly validator: (v: string) => boolean;
|
|
202
|
+
};
|
|
203
|
+
readonly inputClass: {
|
|
204
|
+
readonly type: import('vue').PropType<string | string[] | Record<string, boolean> | undefined>;
|
|
205
|
+
readonly default: undefined;
|
|
206
|
+
readonly validator: (v?: string | string[] | Record<string, boolean>) => boolean;
|
|
207
|
+
};
|
|
150
208
|
readonly inputWidth: {
|
|
151
209
|
readonly type: import('vue').PropType<string | number | undefined>;
|
|
152
210
|
readonly default: undefined;
|
|
@@ -188,9 +246,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
188
246
|
message: string;
|
|
189
247
|
}) => any) | undefined;
|
|
190
248
|
}>, {
|
|
249
|
+
readonly tabindex: number;
|
|
191
250
|
readonly modelValue: string | [string, string] | null;
|
|
192
251
|
readonly range: boolean;
|
|
193
252
|
readonly disabled: boolean;
|
|
253
|
+
readonly hideDropdown: boolean;
|
|
194
254
|
readonly hourStep: number;
|
|
195
255
|
readonly minuteStep: number;
|
|
196
256
|
readonly secondStep: number;
|
|
@@ -200,12 +260,17 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
200
260
|
readonly isTimeDisabled: (time: InternalFormat) => boolean;
|
|
201
261
|
readonly format: import('./types').TimeFormat;
|
|
202
262
|
readonly placeholder: string;
|
|
263
|
+
readonly id: string | undefined;
|
|
264
|
+
readonly name: string | undefined;
|
|
265
|
+
readonly autocomplete: string;
|
|
266
|
+
readonly inputClass: string | string[] | Record<string, boolean> | undefined;
|
|
203
267
|
readonly inputWidth: string | number | undefined;
|
|
204
268
|
readonly componentWidth: string | number | undefined;
|
|
205
269
|
readonly minInputWidth: string | number | undefined;
|
|
206
270
|
readonly maxInputWidth: string | number | undefined;
|
|
207
271
|
readonly size: "xs" | "sm" | "md" | "lg" | "xl";
|
|
208
272
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
|
|
273
|
+
firstInputRef: HTMLInputElement;
|
|
209
274
|
secondInputRef: HTMLInputElement;
|
|
210
275
|
}, HTMLDivElement>;
|
|
211
276
|
export default _default;
|
|
@@ -32,6 +32,10 @@ export declare const timePickerProps: {
|
|
|
32
32
|
readonly type: BooleanConstructor;
|
|
33
33
|
readonly default: false;
|
|
34
34
|
};
|
|
35
|
+
readonly hideDropdown: {
|
|
36
|
+
readonly type: BooleanConstructor;
|
|
37
|
+
readonly default: false;
|
|
38
|
+
};
|
|
35
39
|
readonly hourStep: {
|
|
36
40
|
readonly type: NumberConstructor;
|
|
37
41
|
readonly default: 1;
|
|
@@ -72,6 +76,31 @@ export declare const timePickerProps: {
|
|
|
72
76
|
readonly type: StringConstructor;
|
|
73
77
|
readonly default: "Select time";
|
|
74
78
|
};
|
|
79
|
+
readonly id: {
|
|
80
|
+
readonly type: PropType<string | undefined>;
|
|
81
|
+
readonly default: undefined;
|
|
82
|
+
readonly validator: (v?: string) => boolean;
|
|
83
|
+
};
|
|
84
|
+
readonly name: {
|
|
85
|
+
readonly type: PropType<string | undefined>;
|
|
86
|
+
readonly default: undefined;
|
|
87
|
+
readonly validator: (v?: string) => boolean;
|
|
88
|
+
};
|
|
89
|
+
readonly tabindex: {
|
|
90
|
+
readonly type: NumberConstructor;
|
|
91
|
+
readonly default: 0;
|
|
92
|
+
readonly validator: (v: number) => boolean;
|
|
93
|
+
};
|
|
94
|
+
readonly autocomplete: {
|
|
95
|
+
readonly type: StringConstructor;
|
|
96
|
+
readonly default: "off";
|
|
97
|
+
readonly validator: (v: string) => boolean;
|
|
98
|
+
};
|
|
99
|
+
readonly inputClass: {
|
|
100
|
+
readonly type: PropType<string | string[] | Record<string, boolean> | undefined>;
|
|
101
|
+
readonly default: undefined;
|
|
102
|
+
readonly validator: (v?: string | string[] | Record<string, boolean>) => boolean;
|
|
103
|
+
};
|
|
75
104
|
readonly inputWidth: {
|
|
76
105
|
readonly type: PropType<string | number | undefined>;
|
|
77
106
|
readonly default: undefined;
|