@ansh-ui/vue 0.2.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.
- package/LICENSE +21 -0
- package/dist/chunk-2VSROZ2N.js +1281 -0
- package/dist/chunk-2VSROZ2N.js.map +1 -0
- package/dist/chunk-5BQEZYG6.cjs +1294 -0
- package/dist/chunk-5BQEZYG6.cjs.map +1 -0
- package/dist/chunk-6732H4BQ.cjs +28 -0
- package/dist/chunk-6732H4BQ.cjs.map +1 -0
- package/dist/chunk-6ABPGOJP.js +722 -0
- package/dist/chunk-6ABPGOJP.js.map +1 -0
- package/dist/chunk-6XJOB6LE.js +62 -0
- package/dist/chunk-6XJOB6LE.js.map +1 -0
- package/dist/chunk-774WBLDR.cjs +24 -0
- package/dist/chunk-774WBLDR.cjs.map +1 -0
- package/dist/chunk-B6OXKW5Q.js +567 -0
- package/dist/chunk-B6OXKW5Q.js.map +1 -0
- package/dist/chunk-DMPNT3MY.cjs +64 -0
- package/dist/chunk-DMPNT3MY.cjs.map +1 -0
- package/dist/chunk-EISHOEB6.cjs +158 -0
- package/dist/chunk-EISHOEB6.cjs.map +1 -0
- package/dist/chunk-EVO23GUS.js +223 -0
- package/dist/chunk-EVO23GUS.js.map +1 -0
- package/dist/chunk-FVKLCGA4.js +1035 -0
- package/dist/chunk-FVKLCGA4.js.map +1 -0
- package/dist/chunk-IOXGBPOV.cjs +3681 -0
- package/dist/chunk-IOXGBPOV.cjs.map +1 -0
- package/dist/chunk-J2LA4GRP.cjs +1051 -0
- package/dist/chunk-J2LA4GRP.cjs.map +1 -0
- package/dist/chunk-JQ4YLXXM.cjs +580 -0
- package/dist/chunk-JQ4YLXXM.cjs.map +1 -0
- package/dist/chunk-KCA7RNJ4.cjs +781 -0
- package/dist/chunk-KCA7RNJ4.cjs.map +1 -0
- package/dist/chunk-NJDDNO4C.js +23 -0
- package/dist/chunk-NJDDNO4C.js.map +1 -0
- package/dist/chunk-OAQ7MDYX.js +22 -0
- package/dist/chunk-OAQ7MDYX.js.map +1 -0
- package/dist/chunk-PP6OYURM.cjs +238 -0
- package/dist/chunk-PP6OYURM.cjs.map +1 -0
- package/dist/chunk-SHX2JGID.cjs +269 -0
- package/dist/chunk-SHX2JGID.cjs.map +1 -0
- package/dist/chunk-SOYRICHU.js +3645 -0
- package/dist/chunk-SOYRICHU.js.map +1 -0
- package/dist/chunk-T425FIC7.js +773 -0
- package/dist/chunk-T425FIC7.js.map +1 -0
- package/dist/chunk-TMG3M6TK.js +152 -0
- package/dist/chunk-TMG3M6TK.js.map +1 -0
- package/dist/chunk-XLLSS464.cjs +286 -0
- package/dist/chunk-XLLSS464.cjs.map +1 -0
- package/dist/chunk-XZ5ZFLZM.js +280 -0
- package/dist/chunk-XZ5ZFLZM.js.map +1 -0
- package/dist/chunk-Z7XOFKM4.cjs +733 -0
- package/dist/chunk-Z7XOFKM4.cjs.map +1 -0
- package/dist/chunk-ZGMXOMCB.js +266 -0
- package/dist/chunk-ZGMXOMCB.js.map +1 -0
- package/dist/data.cjs +70 -0
- package/dist/data.cjs.map +1 -0
- package/dist/data.d.cts +963 -0
- package/dist/data.d.ts +963 -0
- package/dist/data.js +5 -0
- package/dist/data.js.map +1 -0
- package/dist/form.cjs +151 -0
- package/dist/form.cjs.map +1 -0
- package/dist/form.d.cts +2639 -0
- package/dist/form.d.ts +2639 -0
- package/dist/form.js +6 -0
- package/dist/form.js.map +1 -0
- package/dist/index.cjs +1158 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +439 -0
- package/dist/index.d.ts +439 -0
- package/dist/index.js +547 -0
- package/dist/index.js.map +1 -0
- package/dist/layout.cjs +67 -0
- package/dist/layout.cjs.map +1 -0
- package/dist/layout.d.cts +729 -0
- package/dist/layout.d.ts +729 -0
- package/dist/layout.js +6 -0
- package/dist/layout.js.map +1 -0
- package/dist/motion.cjs +50 -0
- package/dist/motion.cjs.map +1 -0
- package/dist/motion.d.cts +681 -0
- package/dist/motion.d.ts +681 -0
- package/dist/motion.js +5 -0
- package/dist/motion.js.map +1 -0
- package/dist/navigation.cjs +48 -0
- package/dist/navigation.cjs.map +1 -0
- package/dist/navigation.d.cts +515 -0
- package/dist/navigation.d.ts +515 -0
- package/dist/navigation.js +7 -0
- package/dist/navigation.js.map +1 -0
- package/dist/overlay.cjs +61 -0
- package/dist/overlay.cjs.map +1 -0
- package/dist/overlay.d.cts +772 -0
- package/dist/overlay.d.ts +772 -0
- package/dist/overlay.js +8 -0
- package/dist/overlay.js.map +1 -0
- package/dist/position-Cn7qP1pn.d.cts +50 -0
- package/dist/position-Cn7qP1pn.d.ts +50 -0
- package/dist/primitives.cjs +129 -0
- package/dist/primitives.cjs.map +1 -0
- package/dist/primitives.d.cts +300 -0
- package/dist/primitives.d.ts +300 -0
- package/dist/primitives.js +8 -0
- package/dist/primitives.js.map +1 -0
- package/dist/sidebar-CQqEmpid.d.cts +124 -0
- package/dist/sidebar-CTZ-Ckko.d.ts +124 -0
- package/dist/styles.css +5593 -0
- package/dist/utils-IKPG3zcC.d.cts +46 -0
- package/dist/utils-IKPG3zcC.d.ts +46 -0
- package/package.json +91 -0
package/dist/form.d.ts
ADDED
|
@@ -0,0 +1,2639 @@
|
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
import { PropType, ComputedRef } from 'vue';
|
|
3
|
+
import { S as SlotContent } from './utils-IKPG3zcC.js';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* The label / description / error scaffolding every form control shares — the Vue counterpart of
|
|
7
|
+
* `@ansh-ui/react`'s `Field`.
|
|
8
|
+
*
|
|
9
|
+
* Wiring this by hand is where forms lose their accessibility. The control needs `id` matching the
|
|
10
|
+
* label's `for`, `aria-describedby` pointing at *both* the hint and the error, and `aria-invalid`
|
|
11
|
+
* when it's wrong. Six attributes across four elements, per field — so in practice some fields get
|
|
12
|
+
* it and some don't.
|
|
13
|
+
*
|
|
14
|
+
* `Field` generates the ids and distributes them through `provide`/`inject`, so a control only has
|
|
15
|
+
* to spread what `useFieldControl()` returns.
|
|
16
|
+
*
|
|
17
|
+
* ```vue
|
|
18
|
+
* <Field label="Work email" description="We'll never share it." :error="errors.email">
|
|
19
|
+
* <Input type="email" v-model="email" />
|
|
20
|
+
* </Field>
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
interface FieldContextValue {
|
|
24
|
+
id: string;
|
|
25
|
+
describedBy: string | undefined;
|
|
26
|
+
invalid: boolean;
|
|
27
|
+
required: boolean;
|
|
28
|
+
disabled: boolean;
|
|
29
|
+
}
|
|
30
|
+
interface FieldControlAttrs {
|
|
31
|
+
id?: string;
|
|
32
|
+
'aria-describedby'?: string;
|
|
33
|
+
'aria-invalid'?: true;
|
|
34
|
+
'aria-required'?: true;
|
|
35
|
+
disabled?: boolean;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Props a control should spread onto its interactive element.
|
|
39
|
+
*
|
|
40
|
+
* Returns an empty object outside a `Field`, so every control works standalone — a control that
|
|
41
|
+
* throws without a wrapper is a control people stop using.
|
|
42
|
+
*
|
|
43
|
+
* **Returns a `ComputedRef`, not a plain object — read `.value` inside your render function, never
|
|
44
|
+
* destructure it in `setup()`.** `inject()` may only be called during `setup()`, which runs once per
|
|
45
|
+
* instance, so the lookup itself happens once; but `Field`'s `error`/`disabled`/`description` are
|
|
46
|
+
* reactive props that can change after that. Wrapping the derived attrs in `computed()` means the
|
|
47
|
+
* getters on the injected context (which close over `Field`'s own reactive props) are re-evaluated
|
|
48
|
+
* — and correctly tracked — every time this control re-renders. Returning a plain object built with
|
|
49
|
+
* a one-time spread would freeze the very first render's values forever, which is a real bug this
|
|
50
|
+
* exact shape produced during development: a field that started valid and then failed validation
|
|
51
|
+
* never gained `aria-invalid` because the snapshot was taken before the error existed.
|
|
52
|
+
*/
|
|
53
|
+
declare function useFieldControl(): ComputedRef<FieldControlAttrs>;
|
|
54
|
+
/** The raw context, for controls that need the ids rather than the spreadable props. */
|
|
55
|
+
declare function useFieldContext(): FieldContextValue | null;
|
|
56
|
+
declare const Field: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
57
|
+
label: {
|
|
58
|
+
type: PropType<SlotContent>;
|
|
59
|
+
default: undefined;
|
|
60
|
+
};
|
|
61
|
+
/** Helper text below the label. Announced as part of the control's description. */
|
|
62
|
+
description: {
|
|
63
|
+
type: PropType<SlotContent>;
|
|
64
|
+
default: undefined;
|
|
65
|
+
};
|
|
66
|
+
/** Error message. Its presence sets `aria-invalid` on the control. */
|
|
67
|
+
error: {
|
|
68
|
+
type: PropType<SlotContent>;
|
|
69
|
+
default: undefined;
|
|
70
|
+
};
|
|
71
|
+
/** Marks the field required and appends an asterisk to the label. */
|
|
72
|
+
required: {
|
|
73
|
+
type: BooleanConstructor;
|
|
74
|
+
default: boolean;
|
|
75
|
+
};
|
|
76
|
+
disabled: {
|
|
77
|
+
type: BooleanConstructor;
|
|
78
|
+
default: boolean;
|
|
79
|
+
};
|
|
80
|
+
/** Label to the side rather than above — denser, for settings screens. */
|
|
81
|
+
orientation: {
|
|
82
|
+
type: PropType<"vertical" | "horizontal">;
|
|
83
|
+
default: string;
|
|
84
|
+
};
|
|
85
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
86
|
+
[key: string]: any;
|
|
87
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
88
|
+
label: {
|
|
89
|
+
type: PropType<SlotContent>;
|
|
90
|
+
default: undefined;
|
|
91
|
+
};
|
|
92
|
+
/** Helper text below the label. Announced as part of the control's description. */
|
|
93
|
+
description: {
|
|
94
|
+
type: PropType<SlotContent>;
|
|
95
|
+
default: undefined;
|
|
96
|
+
};
|
|
97
|
+
/** Error message. Its presence sets `aria-invalid` on the control. */
|
|
98
|
+
error: {
|
|
99
|
+
type: PropType<SlotContent>;
|
|
100
|
+
default: undefined;
|
|
101
|
+
};
|
|
102
|
+
/** Marks the field required and appends an asterisk to the label. */
|
|
103
|
+
required: {
|
|
104
|
+
type: BooleanConstructor;
|
|
105
|
+
default: boolean;
|
|
106
|
+
};
|
|
107
|
+
disabled: {
|
|
108
|
+
type: BooleanConstructor;
|
|
109
|
+
default: boolean;
|
|
110
|
+
};
|
|
111
|
+
/** Label to the side rather than above — denser, for settings screens. */
|
|
112
|
+
orientation: {
|
|
113
|
+
type: PropType<"vertical" | "horizontal">;
|
|
114
|
+
default: string;
|
|
115
|
+
};
|
|
116
|
+
}>> & Readonly<{}>, {
|
|
117
|
+
description: SlotContent;
|
|
118
|
+
error: SlotContent;
|
|
119
|
+
label: SlotContent;
|
|
120
|
+
disabled: boolean;
|
|
121
|
+
required: boolean;
|
|
122
|
+
orientation: "horizontal" | "vertical";
|
|
123
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
124
|
+
declare const Fieldset: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
125
|
+
legend: {
|
|
126
|
+
type: PropType<SlotContent>;
|
|
127
|
+
required: true;
|
|
128
|
+
};
|
|
129
|
+
description: {
|
|
130
|
+
type: PropType<SlotContent>;
|
|
131
|
+
default: undefined;
|
|
132
|
+
};
|
|
133
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
134
|
+
[key: string]: any;
|
|
135
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
136
|
+
legend: {
|
|
137
|
+
type: PropType<SlotContent>;
|
|
138
|
+
required: true;
|
|
139
|
+
};
|
|
140
|
+
description: {
|
|
141
|
+
type: PropType<SlotContent>;
|
|
142
|
+
default: undefined;
|
|
143
|
+
};
|
|
144
|
+
}>> & Readonly<{}>, {
|
|
145
|
+
description: SlotContent;
|
|
146
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
147
|
+
/**
|
|
148
|
+
* Visually hidden, still announced.
|
|
149
|
+
*
|
|
150
|
+
* The clip-path technique rather than `display: none` or `visibility: hidden`, both of which remove
|
|
151
|
+
* the element from the accessibility tree entirely — which is the opposite of the intent.
|
|
152
|
+
*/
|
|
153
|
+
declare const VisuallyHidden: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
154
|
+
[key: string]: any;
|
|
155
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
156
|
+
|
|
157
|
+
type InputSize = 'sm' | 'md' | 'lg';
|
|
158
|
+
/**
|
|
159
|
+
* A text input — the Vue counterpart of `@ansh-ui/react`'s `Input`.
|
|
160
|
+
*
|
|
161
|
+
* `v-model` for two-way binding (backed by `modelValue`/`update:modelValue`), or leave it
|
|
162
|
+
* unbound for an uncontrolled field seeded from `defaultValue`. Both modes flow through the same
|
|
163
|
+
* `useControllableState`, so there's no separate uncontrolled code path to drift from the
|
|
164
|
+
* controlled one.
|
|
165
|
+
*
|
|
166
|
+
* Native attributes not declared as props (`type`, `placeholder`, `maxlength`, `autocomplete`, …)
|
|
167
|
+
* fall through automatically via Vue's attribute inheritance — `inheritAttrs: false` plus an
|
|
168
|
+
* explicit bind is only needed here because the *grouped* layout (a prefix, suffix or clear button)
|
|
169
|
+
* renders a wrapper `<div>` and the attributes must land on the inner `<input>`, not the wrapper.
|
|
170
|
+
*
|
|
171
|
+
* The affordance most inputs get wrong is the click target: with an icon inside the field, clicking
|
|
172
|
+
* the icon should focus the input. That works here because the wrapper forwards the click, rather
|
|
173
|
+
* than the icon being an absolutely positioned sibling that swallows it.
|
|
174
|
+
*/
|
|
175
|
+
declare const Input: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
176
|
+
modelValue: {
|
|
177
|
+
type: StringConstructor;
|
|
178
|
+
default: undefined;
|
|
179
|
+
};
|
|
180
|
+
defaultValue: {
|
|
181
|
+
type: StringConstructor;
|
|
182
|
+
default: string;
|
|
183
|
+
};
|
|
184
|
+
size: {
|
|
185
|
+
type: PropType<InputSize>;
|
|
186
|
+
default: string;
|
|
187
|
+
};
|
|
188
|
+
/** Content inside the field, before the text — an icon or a currency symbol. */
|
|
189
|
+
prefix: {
|
|
190
|
+
type: PropType<SlotContent>;
|
|
191
|
+
default: undefined;
|
|
192
|
+
};
|
|
193
|
+
/** Content inside the field, after the text — a unit, or a button. */
|
|
194
|
+
suffix: {
|
|
195
|
+
type: PropType<SlotContent>;
|
|
196
|
+
default: undefined;
|
|
197
|
+
};
|
|
198
|
+
/** Show a clear button when non-empty. */
|
|
199
|
+
clearable: {
|
|
200
|
+
type: BooleanConstructor;
|
|
201
|
+
default: boolean;
|
|
202
|
+
};
|
|
203
|
+
/** Force the error style outside a `Field`. */
|
|
204
|
+
invalid: {
|
|
205
|
+
type: BooleanConstructor;
|
|
206
|
+
default: boolean;
|
|
207
|
+
};
|
|
208
|
+
disabled: {
|
|
209
|
+
type: BooleanConstructor;
|
|
210
|
+
default: boolean;
|
|
211
|
+
};
|
|
212
|
+
readonly: {
|
|
213
|
+
type: BooleanConstructor;
|
|
214
|
+
default: boolean;
|
|
215
|
+
};
|
|
216
|
+
/** Class for the outer wrapper, when there is a prefix or suffix. */
|
|
217
|
+
wrapperClassName: {
|
|
218
|
+
type: StringConstructor;
|
|
219
|
+
default: undefined;
|
|
220
|
+
};
|
|
221
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
222
|
+
[key: string]: any;
|
|
223
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("clear" | "change" | "input" | "update:modelValue")[], "clear" | "change" | "input" | "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
224
|
+
modelValue: {
|
|
225
|
+
type: StringConstructor;
|
|
226
|
+
default: undefined;
|
|
227
|
+
};
|
|
228
|
+
defaultValue: {
|
|
229
|
+
type: StringConstructor;
|
|
230
|
+
default: string;
|
|
231
|
+
};
|
|
232
|
+
size: {
|
|
233
|
+
type: PropType<InputSize>;
|
|
234
|
+
default: string;
|
|
235
|
+
};
|
|
236
|
+
/** Content inside the field, before the text — an icon or a currency symbol. */
|
|
237
|
+
prefix: {
|
|
238
|
+
type: PropType<SlotContent>;
|
|
239
|
+
default: undefined;
|
|
240
|
+
};
|
|
241
|
+
/** Content inside the field, after the text — a unit, or a button. */
|
|
242
|
+
suffix: {
|
|
243
|
+
type: PropType<SlotContent>;
|
|
244
|
+
default: undefined;
|
|
245
|
+
};
|
|
246
|
+
/** Show a clear button when non-empty. */
|
|
247
|
+
clearable: {
|
|
248
|
+
type: BooleanConstructor;
|
|
249
|
+
default: boolean;
|
|
250
|
+
};
|
|
251
|
+
/** Force the error style outside a `Field`. */
|
|
252
|
+
invalid: {
|
|
253
|
+
type: BooleanConstructor;
|
|
254
|
+
default: boolean;
|
|
255
|
+
};
|
|
256
|
+
disabled: {
|
|
257
|
+
type: BooleanConstructor;
|
|
258
|
+
default: boolean;
|
|
259
|
+
};
|
|
260
|
+
readonly: {
|
|
261
|
+
type: BooleanConstructor;
|
|
262
|
+
default: boolean;
|
|
263
|
+
};
|
|
264
|
+
/** Class for the outer wrapper, when there is a prefix or suffix. */
|
|
265
|
+
wrapperClassName: {
|
|
266
|
+
type: StringConstructor;
|
|
267
|
+
default: undefined;
|
|
268
|
+
};
|
|
269
|
+
}>> & Readonly<{
|
|
270
|
+
onChange?: ((...args: any[]) => any) | undefined;
|
|
271
|
+
onInput?: ((...args: any[]) => any) | undefined;
|
|
272
|
+
onClear?: ((...args: any[]) => any) | undefined;
|
|
273
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
274
|
+
}>, {
|
|
275
|
+
size: InputSize;
|
|
276
|
+
invalid: boolean;
|
|
277
|
+
disabled: boolean;
|
|
278
|
+
modelValue: string;
|
|
279
|
+
defaultValue: string;
|
|
280
|
+
prefix: SlotContent;
|
|
281
|
+
suffix: SlotContent;
|
|
282
|
+
clearable: boolean;
|
|
283
|
+
readonly: boolean;
|
|
284
|
+
wrapperClassName: string;
|
|
285
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
286
|
+
/** A multi-line text input, optionally growing with its content. */
|
|
287
|
+
declare const Textarea: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
288
|
+
modelValue: {
|
|
289
|
+
type: StringConstructor;
|
|
290
|
+
default: undefined;
|
|
291
|
+
};
|
|
292
|
+
defaultValue: {
|
|
293
|
+
type: StringConstructor;
|
|
294
|
+
default: string;
|
|
295
|
+
};
|
|
296
|
+
/** Grow with the content instead of scrolling. */
|
|
297
|
+
autoResize: {
|
|
298
|
+
type: BooleanConstructor;
|
|
299
|
+
default: boolean;
|
|
300
|
+
};
|
|
301
|
+
/** Upper bound for `autoResize`, in rows. Default `12`. */
|
|
302
|
+
maxRows: {
|
|
303
|
+
type: NumberConstructor;
|
|
304
|
+
default: number;
|
|
305
|
+
};
|
|
306
|
+
/** Show a live character count. Needs `maxlength` (passed through as a native attribute). */
|
|
307
|
+
showCount: {
|
|
308
|
+
type: BooleanConstructor;
|
|
309
|
+
default: boolean;
|
|
310
|
+
};
|
|
311
|
+
invalid: {
|
|
312
|
+
type: BooleanConstructor;
|
|
313
|
+
default: boolean;
|
|
314
|
+
};
|
|
315
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
316
|
+
[key: string]: any;
|
|
317
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "input" | "update:modelValue")[], "change" | "input" | "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
318
|
+
modelValue: {
|
|
319
|
+
type: StringConstructor;
|
|
320
|
+
default: undefined;
|
|
321
|
+
};
|
|
322
|
+
defaultValue: {
|
|
323
|
+
type: StringConstructor;
|
|
324
|
+
default: string;
|
|
325
|
+
};
|
|
326
|
+
/** Grow with the content instead of scrolling. */
|
|
327
|
+
autoResize: {
|
|
328
|
+
type: BooleanConstructor;
|
|
329
|
+
default: boolean;
|
|
330
|
+
};
|
|
331
|
+
/** Upper bound for `autoResize`, in rows. Default `12`. */
|
|
332
|
+
maxRows: {
|
|
333
|
+
type: NumberConstructor;
|
|
334
|
+
default: number;
|
|
335
|
+
};
|
|
336
|
+
/** Show a live character count. Needs `maxlength` (passed through as a native attribute). */
|
|
337
|
+
showCount: {
|
|
338
|
+
type: BooleanConstructor;
|
|
339
|
+
default: boolean;
|
|
340
|
+
};
|
|
341
|
+
invalid: {
|
|
342
|
+
type: BooleanConstructor;
|
|
343
|
+
default: boolean;
|
|
344
|
+
};
|
|
345
|
+
}>> & Readonly<{
|
|
346
|
+
onChange?: ((...args: any[]) => any) | undefined;
|
|
347
|
+
onInput?: ((...args: any[]) => any) | undefined;
|
|
348
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
349
|
+
}>, {
|
|
350
|
+
invalid: boolean;
|
|
351
|
+
modelValue: string;
|
|
352
|
+
defaultValue: string;
|
|
353
|
+
autoResize: boolean;
|
|
354
|
+
maxRows: number;
|
|
355
|
+
showCount: boolean;
|
|
356
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
357
|
+
/**
|
|
358
|
+
* A numeric input with steppers — the Vue counterpart of `@ansh-ui/react`'s `NumberInput`.
|
|
359
|
+
*
|
|
360
|
+
* Deliberately `type="text"` with `inputmode="decimal"` rather than `type="number"`. Native number
|
|
361
|
+
* inputs silently discard invalid intermediate text (typing "1e" clears the field), scroll-wheel
|
|
362
|
+
* over a focused field changes the value by accident, and the spinner cannot be styled consistently
|
|
363
|
+
* across browsers. All three are real bugs users hit on data-entry screens.
|
|
364
|
+
*/
|
|
365
|
+
declare const NumberInput: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
366
|
+
modelValue: {
|
|
367
|
+
type: NumberConstructor;
|
|
368
|
+
default: undefined;
|
|
369
|
+
};
|
|
370
|
+
defaultValue: {
|
|
371
|
+
type: NumberConstructor;
|
|
372
|
+
default: number;
|
|
373
|
+
};
|
|
374
|
+
min: {
|
|
375
|
+
type: NumberConstructor;
|
|
376
|
+
default: number;
|
|
377
|
+
};
|
|
378
|
+
max: {
|
|
379
|
+
type: NumberConstructor;
|
|
380
|
+
default: number;
|
|
381
|
+
};
|
|
382
|
+
step: {
|
|
383
|
+
type: NumberConstructor;
|
|
384
|
+
default: number;
|
|
385
|
+
};
|
|
386
|
+
/** Decimal places to display. Default: inferred from `step`. */
|
|
387
|
+
precision: {
|
|
388
|
+
type: NumberConstructor;
|
|
389
|
+
default: undefined;
|
|
390
|
+
};
|
|
391
|
+
size: {
|
|
392
|
+
type: PropType<InputSize>;
|
|
393
|
+
default: string;
|
|
394
|
+
};
|
|
395
|
+
/** Unit shown after the number — "kg", "%", "days". */
|
|
396
|
+
unit: {
|
|
397
|
+
type: PropType<SlotContent>;
|
|
398
|
+
default: undefined;
|
|
399
|
+
};
|
|
400
|
+
/** Show the stepper buttons. Default `true`. */
|
|
401
|
+
steppers: {
|
|
402
|
+
type: BooleanConstructor;
|
|
403
|
+
default: boolean;
|
|
404
|
+
};
|
|
405
|
+
disabled: {
|
|
406
|
+
type: BooleanConstructor;
|
|
407
|
+
default: boolean;
|
|
408
|
+
};
|
|
409
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
410
|
+
[key: string]: any;
|
|
411
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
412
|
+
modelValue: {
|
|
413
|
+
type: NumberConstructor;
|
|
414
|
+
default: undefined;
|
|
415
|
+
};
|
|
416
|
+
defaultValue: {
|
|
417
|
+
type: NumberConstructor;
|
|
418
|
+
default: number;
|
|
419
|
+
};
|
|
420
|
+
min: {
|
|
421
|
+
type: NumberConstructor;
|
|
422
|
+
default: number;
|
|
423
|
+
};
|
|
424
|
+
max: {
|
|
425
|
+
type: NumberConstructor;
|
|
426
|
+
default: number;
|
|
427
|
+
};
|
|
428
|
+
step: {
|
|
429
|
+
type: NumberConstructor;
|
|
430
|
+
default: number;
|
|
431
|
+
};
|
|
432
|
+
/** Decimal places to display. Default: inferred from `step`. */
|
|
433
|
+
precision: {
|
|
434
|
+
type: NumberConstructor;
|
|
435
|
+
default: undefined;
|
|
436
|
+
};
|
|
437
|
+
size: {
|
|
438
|
+
type: PropType<InputSize>;
|
|
439
|
+
default: string;
|
|
440
|
+
};
|
|
441
|
+
/** Unit shown after the number — "kg", "%", "days". */
|
|
442
|
+
unit: {
|
|
443
|
+
type: PropType<SlotContent>;
|
|
444
|
+
default: undefined;
|
|
445
|
+
};
|
|
446
|
+
/** Show the stepper buttons. Default `true`. */
|
|
447
|
+
steppers: {
|
|
448
|
+
type: BooleanConstructor;
|
|
449
|
+
default: boolean;
|
|
450
|
+
};
|
|
451
|
+
disabled: {
|
|
452
|
+
type: BooleanConstructor;
|
|
453
|
+
default: boolean;
|
|
454
|
+
};
|
|
455
|
+
}>> & Readonly<{
|
|
456
|
+
onChange?: ((...args: any[]) => any) | undefined;
|
|
457
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
458
|
+
}>, {
|
|
459
|
+
size: InputSize;
|
|
460
|
+
disabled: boolean;
|
|
461
|
+
max: number;
|
|
462
|
+
modelValue: number;
|
|
463
|
+
defaultValue: number;
|
|
464
|
+
min: number;
|
|
465
|
+
step: number;
|
|
466
|
+
precision: number;
|
|
467
|
+
unit: SlotContent;
|
|
468
|
+
steppers: boolean;
|
|
469
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
470
|
+
|
|
471
|
+
/**
|
|
472
|
+
* Binary and single-choice controls — the Vue counterpart of `@ansh-ui/react`'s `toggles.tsx`.
|
|
473
|
+
*
|
|
474
|
+
* All three wrap a **real** `<input>` rather than painting a div. That decision carries a lot: form
|
|
475
|
+
* submission works, `:checked` styling works, the label association works, autofill works, password
|
|
476
|
+
* managers and browser translation work, and every assistive technology already knows what the
|
|
477
|
+
* control is. The visual is a sibling element the input drives via `:checked + .indicator`.
|
|
478
|
+
*
|
|
479
|
+
* The input is not `display: none` — that removes it from the accessibility tree and the tab order.
|
|
480
|
+
* It is transparent and stretched over the control, so it stays focusable and clickable.
|
|
481
|
+
*/
|
|
482
|
+
type ChoiceSize = 'sm' | 'md';
|
|
483
|
+
/**
|
|
484
|
+
* A binary control that submits with a form.
|
|
485
|
+
*
|
|
486
|
+
* `v-model` binds `checked`. `indeterminate` has no HTML attribute — it exists only as a DOM
|
|
487
|
+
* property, so it is set imperatively via a `watch` each time it changes, the same reason React's
|
|
488
|
+
* counterpart needs an effect for it.
|
|
489
|
+
*/
|
|
490
|
+
declare const Checkbox: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
491
|
+
modelValue: {
|
|
492
|
+
type: BooleanConstructor;
|
|
493
|
+
default: undefined;
|
|
494
|
+
};
|
|
495
|
+
defaultValue: {
|
|
496
|
+
type: BooleanConstructor;
|
|
497
|
+
default: boolean;
|
|
498
|
+
};
|
|
499
|
+
/** Neither checked nor unchecked — a parent whose children are partly selected. */
|
|
500
|
+
indeterminate: {
|
|
501
|
+
type: BooleanConstructor;
|
|
502
|
+
default: boolean;
|
|
503
|
+
};
|
|
504
|
+
label: {
|
|
505
|
+
type: PropType<SlotContent>;
|
|
506
|
+
default: undefined;
|
|
507
|
+
};
|
|
508
|
+
description: {
|
|
509
|
+
type: PropType<SlotContent>;
|
|
510
|
+
default: undefined;
|
|
511
|
+
};
|
|
512
|
+
size: {
|
|
513
|
+
type: PropType<ChoiceSize>;
|
|
514
|
+
default: string;
|
|
515
|
+
};
|
|
516
|
+
invalid: {
|
|
517
|
+
type: BooleanConstructor;
|
|
518
|
+
default: boolean;
|
|
519
|
+
};
|
|
520
|
+
disabled: {
|
|
521
|
+
type: BooleanConstructor;
|
|
522
|
+
default: boolean;
|
|
523
|
+
};
|
|
524
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
525
|
+
[key: string]: any;
|
|
526
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
527
|
+
modelValue: {
|
|
528
|
+
type: BooleanConstructor;
|
|
529
|
+
default: undefined;
|
|
530
|
+
};
|
|
531
|
+
defaultValue: {
|
|
532
|
+
type: BooleanConstructor;
|
|
533
|
+
default: boolean;
|
|
534
|
+
};
|
|
535
|
+
/** Neither checked nor unchecked — a parent whose children are partly selected. */
|
|
536
|
+
indeterminate: {
|
|
537
|
+
type: BooleanConstructor;
|
|
538
|
+
default: boolean;
|
|
539
|
+
};
|
|
540
|
+
label: {
|
|
541
|
+
type: PropType<SlotContent>;
|
|
542
|
+
default: undefined;
|
|
543
|
+
};
|
|
544
|
+
description: {
|
|
545
|
+
type: PropType<SlotContent>;
|
|
546
|
+
default: undefined;
|
|
547
|
+
};
|
|
548
|
+
size: {
|
|
549
|
+
type: PropType<ChoiceSize>;
|
|
550
|
+
default: string;
|
|
551
|
+
};
|
|
552
|
+
invalid: {
|
|
553
|
+
type: BooleanConstructor;
|
|
554
|
+
default: boolean;
|
|
555
|
+
};
|
|
556
|
+
disabled: {
|
|
557
|
+
type: BooleanConstructor;
|
|
558
|
+
default: boolean;
|
|
559
|
+
};
|
|
560
|
+
}>> & Readonly<{
|
|
561
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
562
|
+
}>, {
|
|
563
|
+
size: ChoiceSize;
|
|
564
|
+
description: SlotContent;
|
|
565
|
+
invalid: boolean;
|
|
566
|
+
label: SlotContent;
|
|
567
|
+
disabled: boolean;
|
|
568
|
+
modelValue: boolean;
|
|
569
|
+
defaultValue: boolean;
|
|
570
|
+
indeterminate: boolean;
|
|
571
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
572
|
+
/**
|
|
573
|
+
* An on/off toggle.
|
|
574
|
+
*
|
|
575
|
+
* `role="switch"` rather than a plain checkbox: it makes a screen reader announce "on"/"off" instead
|
|
576
|
+
* of "checked"/"not checked", which is the difference between a setting and a selection.
|
|
577
|
+
*
|
|
578
|
+
* A switch applies immediately; a checkbox applies on submit. If the change needs a Save button, the
|
|
579
|
+
* control should be a checkbox.
|
|
580
|
+
*/
|
|
581
|
+
declare const Switch: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
582
|
+
modelValue: {
|
|
583
|
+
type: BooleanConstructor;
|
|
584
|
+
default: undefined;
|
|
585
|
+
};
|
|
586
|
+
defaultValue: {
|
|
587
|
+
type: BooleanConstructor;
|
|
588
|
+
default: boolean;
|
|
589
|
+
};
|
|
590
|
+
label: {
|
|
591
|
+
type: PropType<SlotContent>;
|
|
592
|
+
default: undefined;
|
|
593
|
+
};
|
|
594
|
+
description: {
|
|
595
|
+
type: PropType<SlotContent>;
|
|
596
|
+
default: undefined;
|
|
597
|
+
};
|
|
598
|
+
/** Where the label sits. Default `'end'`; `'start'` suits settings rows. */
|
|
599
|
+
labelPosition: {
|
|
600
|
+
type: PropType<"start" | "end">;
|
|
601
|
+
default: string;
|
|
602
|
+
};
|
|
603
|
+
size: {
|
|
604
|
+
type: PropType<ChoiceSize>;
|
|
605
|
+
default: string;
|
|
606
|
+
};
|
|
607
|
+
disabled: {
|
|
608
|
+
type: BooleanConstructor;
|
|
609
|
+
default: boolean;
|
|
610
|
+
};
|
|
611
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
612
|
+
[key: string]: any;
|
|
613
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
614
|
+
modelValue: {
|
|
615
|
+
type: BooleanConstructor;
|
|
616
|
+
default: undefined;
|
|
617
|
+
};
|
|
618
|
+
defaultValue: {
|
|
619
|
+
type: BooleanConstructor;
|
|
620
|
+
default: boolean;
|
|
621
|
+
};
|
|
622
|
+
label: {
|
|
623
|
+
type: PropType<SlotContent>;
|
|
624
|
+
default: undefined;
|
|
625
|
+
};
|
|
626
|
+
description: {
|
|
627
|
+
type: PropType<SlotContent>;
|
|
628
|
+
default: undefined;
|
|
629
|
+
};
|
|
630
|
+
/** Where the label sits. Default `'end'`; `'start'` suits settings rows. */
|
|
631
|
+
labelPosition: {
|
|
632
|
+
type: PropType<"start" | "end">;
|
|
633
|
+
default: string;
|
|
634
|
+
};
|
|
635
|
+
size: {
|
|
636
|
+
type: PropType<ChoiceSize>;
|
|
637
|
+
default: string;
|
|
638
|
+
};
|
|
639
|
+
disabled: {
|
|
640
|
+
type: BooleanConstructor;
|
|
641
|
+
default: boolean;
|
|
642
|
+
};
|
|
643
|
+
}>> & Readonly<{
|
|
644
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
645
|
+
}>, {
|
|
646
|
+
size: ChoiceSize;
|
|
647
|
+
description: SlotContent;
|
|
648
|
+
label: SlotContent;
|
|
649
|
+
disabled: boolean;
|
|
650
|
+
modelValue: boolean;
|
|
651
|
+
defaultValue: boolean;
|
|
652
|
+
labelPosition: "start" | "end";
|
|
653
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
654
|
+
interface RadioGroupProps {
|
|
655
|
+
modelValue?: string;
|
|
656
|
+
defaultValue?: string;
|
|
657
|
+
/** Shared `name`. Generated when omitted, which is fine outside a native form. */
|
|
658
|
+
name?: string;
|
|
659
|
+
label?: string;
|
|
660
|
+
orientation?: 'vertical' | 'horizontal';
|
|
661
|
+
disabled?: boolean;
|
|
662
|
+
}
|
|
663
|
+
/**
|
|
664
|
+
* A group of mutually exclusive choices.
|
|
665
|
+
*
|
|
666
|
+
* Native radios already implement roving focus: arrow keys move between them and Tab enters and
|
|
667
|
+
* leaves the group as a unit. That behaviour is free as long as every input shares a `name`, which
|
|
668
|
+
* is what this context distributes — and it is why this doesn't reimplement key handling.
|
|
669
|
+
*/
|
|
670
|
+
declare const RadioGroup: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
671
|
+
modelValue: {
|
|
672
|
+
type: StringConstructor;
|
|
673
|
+
default: undefined;
|
|
674
|
+
};
|
|
675
|
+
defaultValue: {
|
|
676
|
+
type: StringConstructor;
|
|
677
|
+
default: undefined;
|
|
678
|
+
};
|
|
679
|
+
name: {
|
|
680
|
+
type: StringConstructor;
|
|
681
|
+
default: undefined;
|
|
682
|
+
};
|
|
683
|
+
label: {
|
|
684
|
+
type: StringConstructor;
|
|
685
|
+
default: undefined;
|
|
686
|
+
};
|
|
687
|
+
orientation: {
|
|
688
|
+
type: PropType<"vertical" | "horizontal">;
|
|
689
|
+
default: string;
|
|
690
|
+
};
|
|
691
|
+
disabled: {
|
|
692
|
+
type: BooleanConstructor;
|
|
693
|
+
default: boolean;
|
|
694
|
+
};
|
|
695
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
696
|
+
[key: string]: any;
|
|
697
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
698
|
+
modelValue: {
|
|
699
|
+
type: StringConstructor;
|
|
700
|
+
default: undefined;
|
|
701
|
+
};
|
|
702
|
+
defaultValue: {
|
|
703
|
+
type: StringConstructor;
|
|
704
|
+
default: undefined;
|
|
705
|
+
};
|
|
706
|
+
name: {
|
|
707
|
+
type: StringConstructor;
|
|
708
|
+
default: undefined;
|
|
709
|
+
};
|
|
710
|
+
label: {
|
|
711
|
+
type: StringConstructor;
|
|
712
|
+
default: undefined;
|
|
713
|
+
};
|
|
714
|
+
orientation: {
|
|
715
|
+
type: PropType<"vertical" | "horizontal">;
|
|
716
|
+
default: string;
|
|
717
|
+
};
|
|
718
|
+
disabled: {
|
|
719
|
+
type: BooleanConstructor;
|
|
720
|
+
default: boolean;
|
|
721
|
+
};
|
|
722
|
+
}>> & Readonly<{
|
|
723
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
724
|
+
}>, {
|
|
725
|
+
name: string;
|
|
726
|
+
label: string;
|
|
727
|
+
disabled: boolean;
|
|
728
|
+
orientation: "horizontal" | "vertical";
|
|
729
|
+
modelValue: string;
|
|
730
|
+
defaultValue: string;
|
|
731
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
732
|
+
declare const Radio: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
733
|
+
value: {
|
|
734
|
+
type: StringConstructor;
|
|
735
|
+
required: true;
|
|
736
|
+
};
|
|
737
|
+
label: {
|
|
738
|
+
type: PropType<SlotContent>;
|
|
739
|
+
default: undefined;
|
|
740
|
+
};
|
|
741
|
+
description: {
|
|
742
|
+
type: PropType<SlotContent>;
|
|
743
|
+
default: undefined;
|
|
744
|
+
};
|
|
745
|
+
size: {
|
|
746
|
+
type: PropType<ChoiceSize>;
|
|
747
|
+
default: string;
|
|
748
|
+
};
|
|
749
|
+
disabled: {
|
|
750
|
+
type: BooleanConstructor;
|
|
751
|
+
default: boolean;
|
|
752
|
+
};
|
|
753
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
754
|
+
[key: string]: any;
|
|
755
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
756
|
+
value: {
|
|
757
|
+
type: StringConstructor;
|
|
758
|
+
required: true;
|
|
759
|
+
};
|
|
760
|
+
label: {
|
|
761
|
+
type: PropType<SlotContent>;
|
|
762
|
+
default: undefined;
|
|
763
|
+
};
|
|
764
|
+
description: {
|
|
765
|
+
type: PropType<SlotContent>;
|
|
766
|
+
default: undefined;
|
|
767
|
+
};
|
|
768
|
+
size: {
|
|
769
|
+
type: PropType<ChoiceSize>;
|
|
770
|
+
default: string;
|
|
771
|
+
};
|
|
772
|
+
disabled: {
|
|
773
|
+
type: BooleanConstructor;
|
|
774
|
+
default: boolean;
|
|
775
|
+
};
|
|
776
|
+
}>> & Readonly<{}>, {
|
|
777
|
+
size: ChoiceSize;
|
|
778
|
+
description: SlotContent;
|
|
779
|
+
label: SlotContent;
|
|
780
|
+
disabled: boolean;
|
|
781
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
782
|
+
/**
|
|
783
|
+
* A radio rendered as a selectable card — plan pickers, onboarding branches.
|
|
784
|
+
*
|
|
785
|
+
* Still a radio underneath, so keyboard and screen-reader behaviour is identical to the plain one.
|
|
786
|
+
* Selection is marked by a border *and* a check, never colour alone: WCAG 1.4.1 requires that colour
|
|
787
|
+
* not be the sole carrier of information, and roughly 1 in 12 men cannot rely on it.
|
|
788
|
+
*/
|
|
789
|
+
declare const ChoiceCard: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
790
|
+
value: {
|
|
791
|
+
type: StringConstructor;
|
|
792
|
+
required: true;
|
|
793
|
+
};
|
|
794
|
+
label: {
|
|
795
|
+
type: PropType<SlotContent>;
|
|
796
|
+
default: undefined;
|
|
797
|
+
};
|
|
798
|
+
description: {
|
|
799
|
+
type: PropType<SlotContent>;
|
|
800
|
+
default: undefined;
|
|
801
|
+
};
|
|
802
|
+
icon: {
|
|
803
|
+
type: PropType<SlotContent>;
|
|
804
|
+
default: undefined;
|
|
805
|
+
};
|
|
806
|
+
size: {
|
|
807
|
+
type: PropType<ChoiceSize>;
|
|
808
|
+
default: string;
|
|
809
|
+
};
|
|
810
|
+
disabled: {
|
|
811
|
+
type: BooleanConstructor;
|
|
812
|
+
default: boolean;
|
|
813
|
+
};
|
|
814
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
815
|
+
[key: string]: any;
|
|
816
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
817
|
+
value: {
|
|
818
|
+
type: StringConstructor;
|
|
819
|
+
required: true;
|
|
820
|
+
};
|
|
821
|
+
label: {
|
|
822
|
+
type: PropType<SlotContent>;
|
|
823
|
+
default: undefined;
|
|
824
|
+
};
|
|
825
|
+
description: {
|
|
826
|
+
type: PropType<SlotContent>;
|
|
827
|
+
default: undefined;
|
|
828
|
+
};
|
|
829
|
+
icon: {
|
|
830
|
+
type: PropType<SlotContent>;
|
|
831
|
+
default: undefined;
|
|
832
|
+
};
|
|
833
|
+
size: {
|
|
834
|
+
type: PropType<ChoiceSize>;
|
|
835
|
+
default: string;
|
|
836
|
+
};
|
|
837
|
+
disabled: {
|
|
838
|
+
type: BooleanConstructor;
|
|
839
|
+
default: boolean;
|
|
840
|
+
};
|
|
841
|
+
}>> & Readonly<{}>, {
|
|
842
|
+
size: ChoiceSize;
|
|
843
|
+
description: SlotContent;
|
|
844
|
+
label: SlotContent;
|
|
845
|
+
disabled: boolean;
|
|
846
|
+
icon: SlotContent;
|
|
847
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
848
|
+
|
|
849
|
+
/**
|
|
850
|
+
* Shared machinery for `Select` and `Combobox` — the Vue counterpart of `@ansh-ui/react`'s
|
|
851
|
+
* `listbox.tsx`.
|
|
852
|
+
*
|
|
853
|
+
* Both are listboxes: same option shape, same grouping, same active-descendant navigation, same
|
|
854
|
+
* "skip disabled items" rule. What differs is only how the query is entered — a hidden typeahead
|
|
855
|
+
* buffer versus a visible text input. Sharing this is what keeps the two consistent; the alternative
|
|
856
|
+
* is a `Select` whose Home key works and a `Combobox` whose doesn't.
|
|
857
|
+
*/
|
|
858
|
+
interface SelectOption {
|
|
859
|
+
value: string;
|
|
860
|
+
label: string;
|
|
861
|
+
/** Secondary line under the label. */
|
|
862
|
+
description?: string;
|
|
863
|
+
icon?: SlotContent;
|
|
864
|
+
disabled?: boolean;
|
|
865
|
+
/** Options sharing a group render under one heading. */
|
|
866
|
+
group?: string;
|
|
867
|
+
/** Extra text matched by search but never displayed. */
|
|
868
|
+
keywords?: string;
|
|
869
|
+
}
|
|
870
|
+
/** Move `active` by `delta`, skipping disabled options and stopping at the ends. */
|
|
871
|
+
declare function stepActive(options: readonly SelectOption[], active: number, delta: number, loop?: boolean): number;
|
|
872
|
+
/** First enabled option at or after `from`. */
|
|
873
|
+
declare function firstEnabled(options: readonly SelectOption[], from?: number): number;
|
|
874
|
+
/**
|
|
875
|
+
* Type-ahead over a listbox with no text input.
|
|
876
|
+
*
|
|
877
|
+
* Typing "ca" jumps to "Canada". The buffer resets after a pause, so typing "c", waiting, then "a"
|
|
878
|
+
* moves to the first "c" and then the first "a" — which is what the native `<select>` does and what
|
|
879
|
+
* users have internalised over three decades.
|
|
880
|
+
*
|
|
881
|
+
* `getOptions` is a function rather than a snapshot array: unlike a React hook (recreated every
|
|
882
|
+
* render, so it always closes over the render's own props), this runs once in `setup()`, so it has
|
|
883
|
+
* to read the *current* options itself on every keystroke rather than close over a stale list.
|
|
884
|
+
*/
|
|
885
|
+
declare function useTypeahead(getOptions: () => readonly SelectOption[], onMatch: (index: number) => void, timeout?: number): (key: string) => boolean;
|
|
886
|
+
/**
|
|
887
|
+
* Subsequence match with a relevance score. `-1` means no match.
|
|
888
|
+
*
|
|
889
|
+
* Subsequence rather than substring because that is what users of a modern picker expect: typing
|
|
890
|
+
* "nds" should find "**N**ew **D**ata**s**ource".
|
|
891
|
+
*/
|
|
892
|
+
declare function scoreOption(query: string, option: SelectOption): number;
|
|
893
|
+
/** Filter and rank options against a query, preserving order when the query is empty. */
|
|
894
|
+
declare function filterOptions(options: readonly SelectOption[], query: string): readonly SelectOption[];
|
|
895
|
+
interface OptionListProps {
|
|
896
|
+
options: readonly SelectOption[];
|
|
897
|
+
active: number;
|
|
898
|
+
selected: readonly string[];
|
|
899
|
+
listId: string;
|
|
900
|
+
multiple?: boolean;
|
|
901
|
+
emptyMessage?: SlotContent;
|
|
902
|
+
onSelect: (option: SelectOption) => void;
|
|
903
|
+
onActiveChange: (index: number) => void;
|
|
904
|
+
/** Highlight the matched characters. */
|
|
905
|
+
query?: string;
|
|
906
|
+
}
|
|
907
|
+
/** Render the option rows, with group headings emitted on change. */
|
|
908
|
+
declare const OptionList: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
909
|
+
options: {
|
|
910
|
+
type: PropType<readonly SelectOption[]>;
|
|
911
|
+
required: true;
|
|
912
|
+
};
|
|
913
|
+
active: {
|
|
914
|
+
type: NumberConstructor;
|
|
915
|
+
required: true;
|
|
916
|
+
};
|
|
917
|
+
selected: {
|
|
918
|
+
type: PropType<readonly string[]>;
|
|
919
|
+
required: true;
|
|
920
|
+
};
|
|
921
|
+
listId: {
|
|
922
|
+
type: StringConstructor;
|
|
923
|
+
required: true;
|
|
924
|
+
};
|
|
925
|
+
multiple: {
|
|
926
|
+
type: BooleanConstructor;
|
|
927
|
+
default: boolean;
|
|
928
|
+
};
|
|
929
|
+
emptyMessage: {
|
|
930
|
+
type: PropType<SlotContent>;
|
|
931
|
+
default: string;
|
|
932
|
+
};
|
|
933
|
+
onSelect: {
|
|
934
|
+
type: PropType<(option: SelectOption) => void>;
|
|
935
|
+
required: true;
|
|
936
|
+
};
|
|
937
|
+
onActiveChange: {
|
|
938
|
+
type: PropType<(index: number) => void>;
|
|
939
|
+
required: true;
|
|
940
|
+
};
|
|
941
|
+
query: {
|
|
942
|
+
type: StringConstructor;
|
|
943
|
+
default: undefined;
|
|
944
|
+
};
|
|
945
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
946
|
+
[key: string]: any;
|
|
947
|
+
}> | vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
948
|
+
[key: string]: any;
|
|
949
|
+
}>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
950
|
+
options: {
|
|
951
|
+
type: PropType<readonly SelectOption[]>;
|
|
952
|
+
required: true;
|
|
953
|
+
};
|
|
954
|
+
active: {
|
|
955
|
+
type: NumberConstructor;
|
|
956
|
+
required: true;
|
|
957
|
+
};
|
|
958
|
+
selected: {
|
|
959
|
+
type: PropType<readonly string[]>;
|
|
960
|
+
required: true;
|
|
961
|
+
};
|
|
962
|
+
listId: {
|
|
963
|
+
type: StringConstructor;
|
|
964
|
+
required: true;
|
|
965
|
+
};
|
|
966
|
+
multiple: {
|
|
967
|
+
type: BooleanConstructor;
|
|
968
|
+
default: boolean;
|
|
969
|
+
};
|
|
970
|
+
emptyMessage: {
|
|
971
|
+
type: PropType<SlotContent>;
|
|
972
|
+
default: string;
|
|
973
|
+
};
|
|
974
|
+
onSelect: {
|
|
975
|
+
type: PropType<(option: SelectOption) => void>;
|
|
976
|
+
required: true;
|
|
977
|
+
};
|
|
978
|
+
onActiveChange: {
|
|
979
|
+
type: PropType<(index: number) => void>;
|
|
980
|
+
required: true;
|
|
981
|
+
};
|
|
982
|
+
query: {
|
|
983
|
+
type: StringConstructor;
|
|
984
|
+
default: undefined;
|
|
985
|
+
};
|
|
986
|
+
}>> & Readonly<{}>, {
|
|
987
|
+
multiple: boolean;
|
|
988
|
+
emptyMessage: SlotContent;
|
|
989
|
+
query: string;
|
|
990
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
991
|
+
|
|
992
|
+
/**
|
|
993
|
+
* A single-choice select — the Vue counterpart of `@ansh-ui/react`'s `Select`.
|
|
994
|
+
*
|
|
995
|
+
* Follows the ARIA 1.2 collapsed-listbox pattern: the trigger is a `button` with
|
|
996
|
+
* `aria-haspopup="listbox"`, and while open, focus moves to the listbox with a virtual cursor
|
|
997
|
+
* carried by `aria-activedescendant`.
|
|
998
|
+
*
|
|
999
|
+
* A custom select is only justified when the native one can't do the job — option descriptions,
|
|
1000
|
+
* icons, grouping with custom rendering. When a plain list of strings will do, `<select>` is still
|
|
1001
|
+
* better: it gets the platform's own picker on mobile, which no custom implementation matches. This
|
|
1002
|
+
* exists because CRM and admin screens genuinely need the richer version.
|
|
1003
|
+
*
|
|
1004
|
+
* ```vue
|
|
1005
|
+
* <Select v-model="country" :options="countries" label="Country" />
|
|
1006
|
+
* ```
|
|
1007
|
+
*/
|
|
1008
|
+
declare const Select: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
1009
|
+
options: {
|
|
1010
|
+
type: PropType<readonly SelectOption[]>;
|
|
1011
|
+
required: true;
|
|
1012
|
+
};
|
|
1013
|
+
modelValue: {
|
|
1014
|
+
type: PropType<string | null>;
|
|
1015
|
+
default: undefined;
|
|
1016
|
+
};
|
|
1017
|
+
defaultValue: {
|
|
1018
|
+
type: PropType<string | null>;
|
|
1019
|
+
default: null;
|
|
1020
|
+
};
|
|
1021
|
+
placeholder: {
|
|
1022
|
+
type: StringConstructor;
|
|
1023
|
+
default: string;
|
|
1024
|
+
};
|
|
1025
|
+
disabled: {
|
|
1026
|
+
type: BooleanConstructor;
|
|
1027
|
+
default: boolean;
|
|
1028
|
+
};
|
|
1029
|
+
invalid: {
|
|
1030
|
+
type: BooleanConstructor;
|
|
1031
|
+
default: boolean;
|
|
1032
|
+
};
|
|
1033
|
+
size: {
|
|
1034
|
+
type: PropType<"sm" | "md" | "lg">;
|
|
1035
|
+
default: string;
|
|
1036
|
+
};
|
|
1037
|
+
/** Show a clear button once something is selected. */
|
|
1038
|
+
clearable: {
|
|
1039
|
+
type: BooleanConstructor;
|
|
1040
|
+
default: boolean;
|
|
1041
|
+
};
|
|
1042
|
+
/** Accessible name when there is no wrapping `Field`. */
|
|
1043
|
+
label: {
|
|
1044
|
+
type: StringConstructor;
|
|
1045
|
+
default: undefined;
|
|
1046
|
+
};
|
|
1047
|
+
/** Emit a hidden input so the value posts in a native form submit. */
|
|
1048
|
+
name: {
|
|
1049
|
+
type: StringConstructor;
|
|
1050
|
+
default: undefined;
|
|
1051
|
+
};
|
|
1052
|
+
/** Max height of the popup before it scrolls. Default `'18rem'`. */
|
|
1053
|
+
maxHeight: {
|
|
1054
|
+
type: StringConstructor;
|
|
1055
|
+
default: string;
|
|
1056
|
+
};
|
|
1057
|
+
emptyMessage: {
|
|
1058
|
+
type: PropType<SlotContent>;
|
|
1059
|
+
default: undefined;
|
|
1060
|
+
};
|
|
1061
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
1062
|
+
[key: string]: any;
|
|
1063
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
1064
|
+
options: {
|
|
1065
|
+
type: PropType<readonly SelectOption[]>;
|
|
1066
|
+
required: true;
|
|
1067
|
+
};
|
|
1068
|
+
modelValue: {
|
|
1069
|
+
type: PropType<string | null>;
|
|
1070
|
+
default: undefined;
|
|
1071
|
+
};
|
|
1072
|
+
defaultValue: {
|
|
1073
|
+
type: PropType<string | null>;
|
|
1074
|
+
default: null;
|
|
1075
|
+
};
|
|
1076
|
+
placeholder: {
|
|
1077
|
+
type: StringConstructor;
|
|
1078
|
+
default: string;
|
|
1079
|
+
};
|
|
1080
|
+
disabled: {
|
|
1081
|
+
type: BooleanConstructor;
|
|
1082
|
+
default: boolean;
|
|
1083
|
+
};
|
|
1084
|
+
invalid: {
|
|
1085
|
+
type: BooleanConstructor;
|
|
1086
|
+
default: boolean;
|
|
1087
|
+
};
|
|
1088
|
+
size: {
|
|
1089
|
+
type: PropType<"sm" | "md" | "lg">;
|
|
1090
|
+
default: string;
|
|
1091
|
+
};
|
|
1092
|
+
/** Show a clear button once something is selected. */
|
|
1093
|
+
clearable: {
|
|
1094
|
+
type: BooleanConstructor;
|
|
1095
|
+
default: boolean;
|
|
1096
|
+
};
|
|
1097
|
+
/** Accessible name when there is no wrapping `Field`. */
|
|
1098
|
+
label: {
|
|
1099
|
+
type: StringConstructor;
|
|
1100
|
+
default: undefined;
|
|
1101
|
+
};
|
|
1102
|
+
/** Emit a hidden input so the value posts in a native form submit. */
|
|
1103
|
+
name: {
|
|
1104
|
+
type: StringConstructor;
|
|
1105
|
+
default: undefined;
|
|
1106
|
+
};
|
|
1107
|
+
/** Max height of the popup before it scrolls. Default `'18rem'`. */
|
|
1108
|
+
maxHeight: {
|
|
1109
|
+
type: StringConstructor;
|
|
1110
|
+
default: string;
|
|
1111
|
+
};
|
|
1112
|
+
emptyMessage: {
|
|
1113
|
+
type: PropType<SlotContent>;
|
|
1114
|
+
default: undefined;
|
|
1115
|
+
};
|
|
1116
|
+
}>> & Readonly<{
|
|
1117
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
1118
|
+
}>, {
|
|
1119
|
+
size: "sm" | "md" | "lg";
|
|
1120
|
+
name: string;
|
|
1121
|
+
invalid: boolean;
|
|
1122
|
+
label: string;
|
|
1123
|
+
disabled: boolean;
|
|
1124
|
+
maxHeight: string;
|
|
1125
|
+
modelValue: string | null;
|
|
1126
|
+
defaultValue: string | null;
|
|
1127
|
+
clearable: boolean;
|
|
1128
|
+
emptyMessage: SlotContent;
|
|
1129
|
+
placeholder: string;
|
|
1130
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
1131
|
+
|
|
1132
|
+
/**
|
|
1133
|
+
* A searchable select, single or multiple — the Vue counterpart of `@ansh-ui/react`'s `Combobox`.
|
|
1134
|
+
*
|
|
1135
|
+
* This is the ARIA 1.2 combobox pattern, and the distinguishing detail is that **focus never leaves
|
|
1136
|
+
* the input**. Arrow keys move a virtual cursor announced through `aria-activedescendant`, so the
|
|
1137
|
+
* user can keep typing to narrow the list while navigating it. Implementations that move DOM focus
|
|
1138
|
+
* into the list break that: the next keystroke goes to the list, not the query. (`Select`, next
|
|
1139
|
+
* door, is the one that does move focus into its listbox — the two patterns differ for exactly this
|
|
1140
|
+
* reason.)
|
|
1141
|
+
*
|
|
1142
|
+
* Shares `SelectOption`, `OptionList`, `filterOptions`, `firstEnabled` and `stepActive` with `Select`
|
|
1143
|
+
* via `./listbox`, same as the React source shares them with its own `Select` via `listbox.tsx`.
|
|
1144
|
+
*
|
|
1145
|
+
* ```vue
|
|
1146
|
+
* <Combobox multiple :options="owners" v-model="selected" />
|
|
1147
|
+
* ```
|
|
1148
|
+
*/
|
|
1149
|
+
declare const Combobox: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
1150
|
+
options: {
|
|
1151
|
+
type: PropType<readonly SelectOption[]>;
|
|
1152
|
+
required: true;
|
|
1153
|
+
};
|
|
1154
|
+
/** Selected values. Single-select uses a one-element array. */
|
|
1155
|
+
modelValue: {
|
|
1156
|
+
type: PropType<readonly string[]>;
|
|
1157
|
+
default: undefined;
|
|
1158
|
+
};
|
|
1159
|
+
defaultValue: {
|
|
1160
|
+
type: PropType<readonly string[]>;
|
|
1161
|
+
default: () => never[];
|
|
1162
|
+
};
|
|
1163
|
+
multiple: {
|
|
1164
|
+
type: BooleanConstructor;
|
|
1165
|
+
default: boolean;
|
|
1166
|
+
};
|
|
1167
|
+
placeholder: {
|
|
1168
|
+
type: StringConstructor;
|
|
1169
|
+
default: string;
|
|
1170
|
+
};
|
|
1171
|
+
disabled: {
|
|
1172
|
+
type: BooleanConstructor;
|
|
1173
|
+
default: boolean;
|
|
1174
|
+
};
|
|
1175
|
+
invalid: {
|
|
1176
|
+
type: BooleanConstructor;
|
|
1177
|
+
default: boolean;
|
|
1178
|
+
};
|
|
1179
|
+
size: {
|
|
1180
|
+
type: PropType<"sm" | "md" | "lg">;
|
|
1181
|
+
default: string;
|
|
1182
|
+
};
|
|
1183
|
+
label: {
|
|
1184
|
+
type: StringConstructor;
|
|
1185
|
+
default: undefined;
|
|
1186
|
+
};
|
|
1187
|
+
maxHeight: {
|
|
1188
|
+
type: StringConstructor;
|
|
1189
|
+
default: string;
|
|
1190
|
+
};
|
|
1191
|
+
emptyMessage: {
|
|
1192
|
+
type: PropType<SlotContent>;
|
|
1193
|
+
default: undefined;
|
|
1194
|
+
};
|
|
1195
|
+
/**
|
|
1196
|
+
* Offer the typed text as a new option. Returns the created option's value.
|
|
1197
|
+
*
|
|
1198
|
+
* Kept as a plain callback prop rather than a Vue `emit` (unlike `search`, below): the returned
|
|
1199
|
+
* value feeds straight back into what gets selected, and `emit` has no return channel for a
|
|
1200
|
+
* parent to hand a value back synchronously.
|
|
1201
|
+
*/
|
|
1202
|
+
onCreate: {
|
|
1203
|
+
type: PropType<(label: string) => string>;
|
|
1204
|
+
default: undefined;
|
|
1205
|
+
};
|
|
1206
|
+
/** Text for the create row. Receives the current query. */
|
|
1207
|
+
createLabel: {
|
|
1208
|
+
type: PropType<(query: string) => string>;
|
|
1209
|
+
default: (query: string) => string;
|
|
1210
|
+
};
|
|
1211
|
+
/** Skip local filtering, e.g. when a `search` listener already returns filtered options. */
|
|
1212
|
+
filter: {
|
|
1213
|
+
type: BooleanConstructor;
|
|
1214
|
+
default: boolean;
|
|
1215
|
+
};
|
|
1216
|
+
/** Cap on how many chips render before collapsing to "+N". Default `Infinity`. */
|
|
1217
|
+
maxVisibleChips: {
|
|
1218
|
+
type: NumberConstructor;
|
|
1219
|
+
default: number;
|
|
1220
|
+
};
|
|
1221
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
1222
|
+
[key: string]: any;
|
|
1223
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("search" | "update:modelValue")[], "search" | "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
1224
|
+
options: {
|
|
1225
|
+
type: PropType<readonly SelectOption[]>;
|
|
1226
|
+
required: true;
|
|
1227
|
+
};
|
|
1228
|
+
/** Selected values. Single-select uses a one-element array. */
|
|
1229
|
+
modelValue: {
|
|
1230
|
+
type: PropType<readonly string[]>;
|
|
1231
|
+
default: undefined;
|
|
1232
|
+
};
|
|
1233
|
+
defaultValue: {
|
|
1234
|
+
type: PropType<readonly string[]>;
|
|
1235
|
+
default: () => never[];
|
|
1236
|
+
};
|
|
1237
|
+
multiple: {
|
|
1238
|
+
type: BooleanConstructor;
|
|
1239
|
+
default: boolean;
|
|
1240
|
+
};
|
|
1241
|
+
placeholder: {
|
|
1242
|
+
type: StringConstructor;
|
|
1243
|
+
default: string;
|
|
1244
|
+
};
|
|
1245
|
+
disabled: {
|
|
1246
|
+
type: BooleanConstructor;
|
|
1247
|
+
default: boolean;
|
|
1248
|
+
};
|
|
1249
|
+
invalid: {
|
|
1250
|
+
type: BooleanConstructor;
|
|
1251
|
+
default: boolean;
|
|
1252
|
+
};
|
|
1253
|
+
size: {
|
|
1254
|
+
type: PropType<"sm" | "md" | "lg">;
|
|
1255
|
+
default: string;
|
|
1256
|
+
};
|
|
1257
|
+
label: {
|
|
1258
|
+
type: StringConstructor;
|
|
1259
|
+
default: undefined;
|
|
1260
|
+
};
|
|
1261
|
+
maxHeight: {
|
|
1262
|
+
type: StringConstructor;
|
|
1263
|
+
default: string;
|
|
1264
|
+
};
|
|
1265
|
+
emptyMessage: {
|
|
1266
|
+
type: PropType<SlotContent>;
|
|
1267
|
+
default: undefined;
|
|
1268
|
+
};
|
|
1269
|
+
/**
|
|
1270
|
+
* Offer the typed text as a new option. Returns the created option's value.
|
|
1271
|
+
*
|
|
1272
|
+
* Kept as a plain callback prop rather than a Vue `emit` (unlike `search`, below): the returned
|
|
1273
|
+
* value feeds straight back into what gets selected, and `emit` has no return channel for a
|
|
1274
|
+
* parent to hand a value back synchronously.
|
|
1275
|
+
*/
|
|
1276
|
+
onCreate: {
|
|
1277
|
+
type: PropType<(label: string) => string>;
|
|
1278
|
+
default: undefined;
|
|
1279
|
+
};
|
|
1280
|
+
/** Text for the create row. Receives the current query. */
|
|
1281
|
+
createLabel: {
|
|
1282
|
+
type: PropType<(query: string) => string>;
|
|
1283
|
+
default: (query: string) => string;
|
|
1284
|
+
};
|
|
1285
|
+
/** Skip local filtering, e.g. when a `search` listener already returns filtered options. */
|
|
1286
|
+
filter: {
|
|
1287
|
+
type: BooleanConstructor;
|
|
1288
|
+
default: boolean;
|
|
1289
|
+
};
|
|
1290
|
+
/** Cap on how many chips render before collapsing to "+N". Default `Infinity`. */
|
|
1291
|
+
maxVisibleChips: {
|
|
1292
|
+
type: NumberConstructor;
|
|
1293
|
+
default: number;
|
|
1294
|
+
};
|
|
1295
|
+
}>> & Readonly<{
|
|
1296
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
1297
|
+
onSearch?: ((...args: any[]) => any) | undefined;
|
|
1298
|
+
}>, {
|
|
1299
|
+
size: "sm" | "md" | "lg";
|
|
1300
|
+
filter: boolean;
|
|
1301
|
+
invalid: boolean;
|
|
1302
|
+
label: string;
|
|
1303
|
+
disabled: boolean;
|
|
1304
|
+
maxHeight: string;
|
|
1305
|
+
modelValue: readonly string[];
|
|
1306
|
+
defaultValue: readonly string[];
|
|
1307
|
+
multiple: boolean;
|
|
1308
|
+
emptyMessage: SlotContent;
|
|
1309
|
+
placeholder: string;
|
|
1310
|
+
onCreate: (label: string) => string;
|
|
1311
|
+
createLabel: (query: string) => string;
|
|
1312
|
+
maxVisibleChips: number;
|
|
1313
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
1314
|
+
|
|
1315
|
+
interface SliderMark {
|
|
1316
|
+
value: number;
|
|
1317
|
+
label?: SlotContent;
|
|
1318
|
+
}
|
|
1319
|
+
/**
|
|
1320
|
+
* A single-value slider — the Vue counterpart of `@ansh-ui/react`'s `Slider`.
|
|
1321
|
+
*
|
|
1322
|
+
* The thumb is the focusable element and carries `role="slider"` with the full value triple, so a
|
|
1323
|
+
* screen reader announces "40, slider, minimum 0, maximum 100". Dragging writes the position via
|
|
1324
|
+
* `useControllableState` on every pointer move and only fires `commit` (React's `onCommit`) on
|
|
1325
|
+
* release — a re-render per pointer move is what makes hand-rolled sliders feel sticky.
|
|
1326
|
+
*/
|
|
1327
|
+
declare const Slider: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
1328
|
+
modelValue: {
|
|
1329
|
+
type: NumberConstructor;
|
|
1330
|
+
default: undefined;
|
|
1331
|
+
};
|
|
1332
|
+
defaultValue: {
|
|
1333
|
+
type: NumberConstructor;
|
|
1334
|
+
default: number;
|
|
1335
|
+
};
|
|
1336
|
+
min: {
|
|
1337
|
+
type: NumberConstructor;
|
|
1338
|
+
default: number;
|
|
1339
|
+
};
|
|
1340
|
+
max: {
|
|
1341
|
+
type: NumberConstructor;
|
|
1342
|
+
default: number;
|
|
1343
|
+
};
|
|
1344
|
+
step: {
|
|
1345
|
+
type: NumberConstructor;
|
|
1346
|
+
default: number;
|
|
1347
|
+
};
|
|
1348
|
+
disabled: {
|
|
1349
|
+
type: BooleanConstructor;
|
|
1350
|
+
default: boolean;
|
|
1351
|
+
};
|
|
1352
|
+
/** Vertical sliders are for mixers and volume; default is horizontal. */
|
|
1353
|
+
orientation: {
|
|
1354
|
+
type: PropType<"horizontal" | "vertical">;
|
|
1355
|
+
default: string;
|
|
1356
|
+
};
|
|
1357
|
+
marks: {
|
|
1358
|
+
type: PropType<readonly SliderMark[]>;
|
|
1359
|
+
default: undefined;
|
|
1360
|
+
};
|
|
1361
|
+
/** Show the value in a bubble above the thumb while dragging. */
|
|
1362
|
+
showValue: {
|
|
1363
|
+
type: PropType<boolean | "always">;
|
|
1364
|
+
default: boolean;
|
|
1365
|
+
};
|
|
1366
|
+
/**
|
|
1367
|
+
* Format the bubble and the screen-reader announcement.
|
|
1368
|
+
*
|
|
1369
|
+
* `String` itself as the default — not a factory returning it. Vue never invokes a `Function`-
|
|
1370
|
+
* typed prop's `default` to resolve it (unlike `Object`/`Array`, where a factory is required);
|
|
1371
|
+
* it is used as-is. Wrapping it (`() => String`) would make `formatValue` itself resolve to that
|
|
1372
|
+
* wrapper, so calling `formatValue(current.value)` returns the `String` constructor instead of a
|
|
1373
|
+
* formatted string.
|
|
1374
|
+
*/
|
|
1375
|
+
formatValue: {
|
|
1376
|
+
type: PropType<(value: number) => string>;
|
|
1377
|
+
default: StringConstructor;
|
|
1378
|
+
};
|
|
1379
|
+
label: {
|
|
1380
|
+
type: StringConstructor;
|
|
1381
|
+
default: undefined;
|
|
1382
|
+
};
|
|
1383
|
+
name: {
|
|
1384
|
+
type: StringConstructor;
|
|
1385
|
+
default: undefined;
|
|
1386
|
+
};
|
|
1387
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
1388
|
+
[key: string]: any;
|
|
1389
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "commit")[], "update:modelValue" | "commit", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
1390
|
+
modelValue: {
|
|
1391
|
+
type: NumberConstructor;
|
|
1392
|
+
default: undefined;
|
|
1393
|
+
};
|
|
1394
|
+
defaultValue: {
|
|
1395
|
+
type: NumberConstructor;
|
|
1396
|
+
default: number;
|
|
1397
|
+
};
|
|
1398
|
+
min: {
|
|
1399
|
+
type: NumberConstructor;
|
|
1400
|
+
default: number;
|
|
1401
|
+
};
|
|
1402
|
+
max: {
|
|
1403
|
+
type: NumberConstructor;
|
|
1404
|
+
default: number;
|
|
1405
|
+
};
|
|
1406
|
+
step: {
|
|
1407
|
+
type: NumberConstructor;
|
|
1408
|
+
default: number;
|
|
1409
|
+
};
|
|
1410
|
+
disabled: {
|
|
1411
|
+
type: BooleanConstructor;
|
|
1412
|
+
default: boolean;
|
|
1413
|
+
};
|
|
1414
|
+
/** Vertical sliders are for mixers and volume; default is horizontal. */
|
|
1415
|
+
orientation: {
|
|
1416
|
+
type: PropType<"horizontal" | "vertical">;
|
|
1417
|
+
default: string;
|
|
1418
|
+
};
|
|
1419
|
+
marks: {
|
|
1420
|
+
type: PropType<readonly SliderMark[]>;
|
|
1421
|
+
default: undefined;
|
|
1422
|
+
};
|
|
1423
|
+
/** Show the value in a bubble above the thumb while dragging. */
|
|
1424
|
+
showValue: {
|
|
1425
|
+
type: PropType<boolean | "always">;
|
|
1426
|
+
default: boolean;
|
|
1427
|
+
};
|
|
1428
|
+
/**
|
|
1429
|
+
* Format the bubble and the screen-reader announcement.
|
|
1430
|
+
*
|
|
1431
|
+
* `String` itself as the default — not a factory returning it. Vue never invokes a `Function`-
|
|
1432
|
+
* typed prop's `default` to resolve it (unlike `Object`/`Array`, where a factory is required);
|
|
1433
|
+
* it is used as-is. Wrapping it (`() => String`) would make `formatValue` itself resolve to that
|
|
1434
|
+
* wrapper, so calling `formatValue(current.value)` returns the `String` constructor instead of a
|
|
1435
|
+
* formatted string.
|
|
1436
|
+
*/
|
|
1437
|
+
formatValue: {
|
|
1438
|
+
type: PropType<(value: number) => string>;
|
|
1439
|
+
default: StringConstructor;
|
|
1440
|
+
};
|
|
1441
|
+
label: {
|
|
1442
|
+
type: StringConstructor;
|
|
1443
|
+
default: undefined;
|
|
1444
|
+
};
|
|
1445
|
+
name: {
|
|
1446
|
+
type: StringConstructor;
|
|
1447
|
+
default: undefined;
|
|
1448
|
+
};
|
|
1449
|
+
}>> & Readonly<{
|
|
1450
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
1451
|
+
onCommit?: ((...args: any[]) => any) | undefined;
|
|
1452
|
+
}>, {
|
|
1453
|
+
name: string;
|
|
1454
|
+
label: string;
|
|
1455
|
+
disabled: boolean;
|
|
1456
|
+
max: number;
|
|
1457
|
+
orientation: "horizontal" | "vertical";
|
|
1458
|
+
modelValue: number;
|
|
1459
|
+
defaultValue: number;
|
|
1460
|
+
min: number;
|
|
1461
|
+
step: number;
|
|
1462
|
+
marks: readonly SliderMark[];
|
|
1463
|
+
showValue: boolean | "always";
|
|
1464
|
+
formatValue: (value: number) => string;
|
|
1465
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
1466
|
+
/**
|
|
1467
|
+
* A two-thumb range slider — the Vue counterpart of `@ansh-ui/react`'s `RangeSlider`. Price filters,
|
|
1468
|
+
* date windows, numeric facets.
|
|
1469
|
+
*
|
|
1470
|
+
* The thumbs are allowed to pass each other, swapping roles when they do. Blocking the crossing is
|
|
1471
|
+
* the more common implementation and it is worse: a user dragging the lower thumb to the right hits
|
|
1472
|
+
* an invisible wall and has to work out that they need to grab the other one instead.
|
|
1473
|
+
*
|
|
1474
|
+
* The React `RangeSliderProps` type technically inherits an `orientation` field from `SliderProps`
|
|
1475
|
+
* via `Omit`, but the implementation never reads it — every drag and layout calculation is
|
|
1476
|
+
* horizontal-only. That field is dropped here rather than carried over as a prop that would do
|
|
1477
|
+
* nothing.
|
|
1478
|
+
*/
|
|
1479
|
+
declare const RangeSlider: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
1480
|
+
modelValue: {
|
|
1481
|
+
type: PropType<readonly [number, number]>;
|
|
1482
|
+
default: undefined;
|
|
1483
|
+
};
|
|
1484
|
+
defaultValue: {
|
|
1485
|
+
type: PropType<readonly [number, number]>;
|
|
1486
|
+
default: () => readonly [number, number];
|
|
1487
|
+
};
|
|
1488
|
+
min: {
|
|
1489
|
+
type: NumberConstructor;
|
|
1490
|
+
default: number;
|
|
1491
|
+
};
|
|
1492
|
+
max: {
|
|
1493
|
+
type: NumberConstructor;
|
|
1494
|
+
default: number;
|
|
1495
|
+
};
|
|
1496
|
+
step: {
|
|
1497
|
+
type: NumberConstructor;
|
|
1498
|
+
default: number;
|
|
1499
|
+
};
|
|
1500
|
+
/** Smallest allowed gap between the two thumbs. Default `0`. */
|
|
1501
|
+
minDistance: {
|
|
1502
|
+
type: NumberConstructor;
|
|
1503
|
+
default: number;
|
|
1504
|
+
};
|
|
1505
|
+
disabled: {
|
|
1506
|
+
type: BooleanConstructor;
|
|
1507
|
+
default: boolean;
|
|
1508
|
+
};
|
|
1509
|
+
marks: {
|
|
1510
|
+
type: PropType<readonly SliderMark[]>;
|
|
1511
|
+
default: undefined;
|
|
1512
|
+
};
|
|
1513
|
+
showValue: {
|
|
1514
|
+
type: PropType<boolean | "always">;
|
|
1515
|
+
default: boolean;
|
|
1516
|
+
};
|
|
1517
|
+
formatValue: {
|
|
1518
|
+
type: PropType<(value: number) => string>;
|
|
1519
|
+
default: StringConstructor;
|
|
1520
|
+
};
|
|
1521
|
+
label: {
|
|
1522
|
+
type: StringConstructor;
|
|
1523
|
+
default: undefined;
|
|
1524
|
+
};
|
|
1525
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
1526
|
+
[key: string]: any;
|
|
1527
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "commit")[], "update:modelValue" | "commit", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
1528
|
+
modelValue: {
|
|
1529
|
+
type: PropType<readonly [number, number]>;
|
|
1530
|
+
default: undefined;
|
|
1531
|
+
};
|
|
1532
|
+
defaultValue: {
|
|
1533
|
+
type: PropType<readonly [number, number]>;
|
|
1534
|
+
default: () => readonly [number, number];
|
|
1535
|
+
};
|
|
1536
|
+
min: {
|
|
1537
|
+
type: NumberConstructor;
|
|
1538
|
+
default: number;
|
|
1539
|
+
};
|
|
1540
|
+
max: {
|
|
1541
|
+
type: NumberConstructor;
|
|
1542
|
+
default: number;
|
|
1543
|
+
};
|
|
1544
|
+
step: {
|
|
1545
|
+
type: NumberConstructor;
|
|
1546
|
+
default: number;
|
|
1547
|
+
};
|
|
1548
|
+
/** Smallest allowed gap between the two thumbs. Default `0`. */
|
|
1549
|
+
minDistance: {
|
|
1550
|
+
type: NumberConstructor;
|
|
1551
|
+
default: number;
|
|
1552
|
+
};
|
|
1553
|
+
disabled: {
|
|
1554
|
+
type: BooleanConstructor;
|
|
1555
|
+
default: boolean;
|
|
1556
|
+
};
|
|
1557
|
+
marks: {
|
|
1558
|
+
type: PropType<readonly SliderMark[]>;
|
|
1559
|
+
default: undefined;
|
|
1560
|
+
};
|
|
1561
|
+
showValue: {
|
|
1562
|
+
type: PropType<boolean | "always">;
|
|
1563
|
+
default: boolean;
|
|
1564
|
+
};
|
|
1565
|
+
formatValue: {
|
|
1566
|
+
type: PropType<(value: number) => string>;
|
|
1567
|
+
default: StringConstructor;
|
|
1568
|
+
};
|
|
1569
|
+
label: {
|
|
1570
|
+
type: StringConstructor;
|
|
1571
|
+
default: undefined;
|
|
1572
|
+
};
|
|
1573
|
+
}>> & Readonly<{
|
|
1574
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
1575
|
+
onCommit?: ((...args: any[]) => any) | undefined;
|
|
1576
|
+
}>, {
|
|
1577
|
+
label: string;
|
|
1578
|
+
disabled: boolean;
|
|
1579
|
+
max: number;
|
|
1580
|
+
modelValue: readonly [number, number];
|
|
1581
|
+
defaultValue: readonly [number, number];
|
|
1582
|
+
min: number;
|
|
1583
|
+
step: number;
|
|
1584
|
+
marks: readonly SliderMark[];
|
|
1585
|
+
showValue: boolean | "always";
|
|
1586
|
+
formatValue: (value: number) => string;
|
|
1587
|
+
minDistance: number;
|
|
1588
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
1589
|
+
|
|
1590
|
+
/**
|
|
1591
|
+
* A one-time-code input — the Vue counterpart of `@ansh-ui/react`'s `PinInput`.
|
|
1592
|
+
*
|
|
1593
|
+
* The details that make or break this component are all about paste and autofill:
|
|
1594
|
+
*
|
|
1595
|
+
* - `autocomplete="one-time-code"` on the first cell is what triggers iOS and Android to offer the
|
|
1596
|
+
* code from the SMS. Without it users retype a six-digit code by hand.
|
|
1597
|
+
* - Pasting into any cell distributes across all of them. Users paste from their SMS app
|
|
1598
|
+
* constantly, and a per-cell input that only accepts the first character is infuriating. Each
|
|
1599
|
+
* cell's `maxlength` is deliberately the *full* code length, not `1` — the browser would truncate
|
|
1600
|
+
* a paste to one character before this component's own `input` handler ever saw the rest.
|
|
1601
|
+
* - Backspace on an empty cell moves back *and* clears, so holding it wipes the field.
|
|
1602
|
+
*
|
|
1603
|
+
* A single input styled to look segmented would be simpler, but the caret cannot be positioned per
|
|
1604
|
+
* segment and mobile keyboards behave inconsistently with it.
|
|
1605
|
+
*/
|
|
1606
|
+
declare const PinInput: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
1607
|
+
/** Number of cells. Default `6`. */
|
|
1608
|
+
length: {
|
|
1609
|
+
type: NumberConstructor;
|
|
1610
|
+
default: number;
|
|
1611
|
+
};
|
|
1612
|
+
modelValue: {
|
|
1613
|
+
type: StringConstructor;
|
|
1614
|
+
default: undefined;
|
|
1615
|
+
};
|
|
1616
|
+
defaultValue: {
|
|
1617
|
+
type: StringConstructor;
|
|
1618
|
+
default: string;
|
|
1619
|
+
};
|
|
1620
|
+
/** Restrict input. Default `'numeric'`. */
|
|
1621
|
+
type: {
|
|
1622
|
+
type: PropType<"numeric" | "alphanumeric">;
|
|
1623
|
+
default: string;
|
|
1624
|
+
};
|
|
1625
|
+
/** Render as password dots. */
|
|
1626
|
+
mask: {
|
|
1627
|
+
type: BooleanConstructor;
|
|
1628
|
+
default: boolean;
|
|
1629
|
+
};
|
|
1630
|
+
disabled: {
|
|
1631
|
+
type: BooleanConstructor;
|
|
1632
|
+
default: boolean;
|
|
1633
|
+
};
|
|
1634
|
+
invalid: {
|
|
1635
|
+
type: BooleanConstructor;
|
|
1636
|
+
default: boolean;
|
|
1637
|
+
};
|
|
1638
|
+
/** Focus the first cell on mount. Native `autofocus`, spelled lower-case to match the attribute. */
|
|
1639
|
+
autofocus: {
|
|
1640
|
+
type: BooleanConstructor;
|
|
1641
|
+
default: boolean;
|
|
1642
|
+
};
|
|
1643
|
+
label: {
|
|
1644
|
+
type: StringConstructor;
|
|
1645
|
+
default: string;
|
|
1646
|
+
};
|
|
1647
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
1648
|
+
[key: string]: any;
|
|
1649
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("complete" | "update:modelValue")[], "complete" | "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
1650
|
+
/** Number of cells. Default `6`. */
|
|
1651
|
+
length: {
|
|
1652
|
+
type: NumberConstructor;
|
|
1653
|
+
default: number;
|
|
1654
|
+
};
|
|
1655
|
+
modelValue: {
|
|
1656
|
+
type: StringConstructor;
|
|
1657
|
+
default: undefined;
|
|
1658
|
+
};
|
|
1659
|
+
defaultValue: {
|
|
1660
|
+
type: StringConstructor;
|
|
1661
|
+
default: string;
|
|
1662
|
+
};
|
|
1663
|
+
/** Restrict input. Default `'numeric'`. */
|
|
1664
|
+
type: {
|
|
1665
|
+
type: PropType<"numeric" | "alphanumeric">;
|
|
1666
|
+
default: string;
|
|
1667
|
+
};
|
|
1668
|
+
/** Render as password dots. */
|
|
1669
|
+
mask: {
|
|
1670
|
+
type: BooleanConstructor;
|
|
1671
|
+
default: boolean;
|
|
1672
|
+
};
|
|
1673
|
+
disabled: {
|
|
1674
|
+
type: BooleanConstructor;
|
|
1675
|
+
default: boolean;
|
|
1676
|
+
};
|
|
1677
|
+
invalid: {
|
|
1678
|
+
type: BooleanConstructor;
|
|
1679
|
+
default: boolean;
|
|
1680
|
+
};
|
|
1681
|
+
/** Focus the first cell on mount. Native `autofocus`, spelled lower-case to match the attribute. */
|
|
1682
|
+
autofocus: {
|
|
1683
|
+
type: BooleanConstructor;
|
|
1684
|
+
default: boolean;
|
|
1685
|
+
};
|
|
1686
|
+
label: {
|
|
1687
|
+
type: StringConstructor;
|
|
1688
|
+
default: string;
|
|
1689
|
+
};
|
|
1690
|
+
}>> & Readonly<{
|
|
1691
|
+
onComplete?: ((...args: any[]) => any) | undefined;
|
|
1692
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
1693
|
+
}>, {
|
|
1694
|
+
length: number;
|
|
1695
|
+
type: "numeric" | "alphanumeric";
|
|
1696
|
+
invalid: boolean;
|
|
1697
|
+
label: string;
|
|
1698
|
+
disabled: boolean;
|
|
1699
|
+
mask: boolean;
|
|
1700
|
+
modelValue: string;
|
|
1701
|
+
defaultValue: string;
|
|
1702
|
+
autofocus: boolean;
|
|
1703
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
1704
|
+
|
|
1705
|
+
/**
|
|
1706
|
+
* Free-text tags — the Vue counterpart of `@ansh-ui/react`'s `TagsInput`. Recipients, labels,
|
|
1707
|
+
* keywords.
|
|
1708
|
+
*
|
|
1709
|
+
* Distinct from a multi-`Combobox`: there is no option list, any text is valid. The two are often
|
|
1710
|
+
* conflated, and the giveaway is a "tags" component that forces you to pick from a list.
|
|
1711
|
+
*
|
|
1712
|
+
* Each tag is a real button so it can be reached with Tab and removed with Enter. Removing a tag
|
|
1713
|
+
* moves focus to the next one rather than to the document, which is what stops keyboard users
|
|
1714
|
+
* losing their place after deleting three in a row.
|
|
1715
|
+
*/
|
|
1716
|
+
declare const TagsInput: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
1717
|
+
modelValue: {
|
|
1718
|
+
type: PropType<readonly string[]>;
|
|
1719
|
+
default: undefined;
|
|
1720
|
+
};
|
|
1721
|
+
defaultValue: {
|
|
1722
|
+
type: PropType<readonly string[]>;
|
|
1723
|
+
default: () => never[];
|
|
1724
|
+
};
|
|
1725
|
+
placeholder: {
|
|
1726
|
+
type: StringConstructor;
|
|
1727
|
+
default: string;
|
|
1728
|
+
};
|
|
1729
|
+
/** Maximum number of tags. The input hides once reached. */
|
|
1730
|
+
max: {
|
|
1731
|
+
type: NumberConstructor;
|
|
1732
|
+
default: number;
|
|
1733
|
+
};
|
|
1734
|
+
/** Keys that commit the current text. Default Enter, Tab and comma. */
|
|
1735
|
+
delimiters: {
|
|
1736
|
+
type: PropType<readonly string[]>;
|
|
1737
|
+
default: () => string[];
|
|
1738
|
+
};
|
|
1739
|
+
/** Reject a value — return an error string, or `null` to accept. */
|
|
1740
|
+
validate: {
|
|
1741
|
+
type: PropType<(value: string) => string | null>;
|
|
1742
|
+
default: undefined;
|
|
1743
|
+
};
|
|
1744
|
+
/** Fold duplicates silently instead of flagging them. Default `true`. */
|
|
1745
|
+
dedupe: {
|
|
1746
|
+
type: BooleanConstructor;
|
|
1747
|
+
default: boolean;
|
|
1748
|
+
};
|
|
1749
|
+
disabled: {
|
|
1750
|
+
type: BooleanConstructor;
|
|
1751
|
+
default: boolean;
|
|
1752
|
+
};
|
|
1753
|
+
invalid: {
|
|
1754
|
+
type: BooleanConstructor;
|
|
1755
|
+
default: boolean;
|
|
1756
|
+
};
|
|
1757
|
+
label: {
|
|
1758
|
+
type: StringConstructor;
|
|
1759
|
+
default: string;
|
|
1760
|
+
};
|
|
1761
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
1762
|
+
[key: string]: any;
|
|
1763
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
1764
|
+
modelValue: {
|
|
1765
|
+
type: PropType<readonly string[]>;
|
|
1766
|
+
default: undefined;
|
|
1767
|
+
};
|
|
1768
|
+
defaultValue: {
|
|
1769
|
+
type: PropType<readonly string[]>;
|
|
1770
|
+
default: () => never[];
|
|
1771
|
+
};
|
|
1772
|
+
placeholder: {
|
|
1773
|
+
type: StringConstructor;
|
|
1774
|
+
default: string;
|
|
1775
|
+
};
|
|
1776
|
+
/** Maximum number of tags. The input hides once reached. */
|
|
1777
|
+
max: {
|
|
1778
|
+
type: NumberConstructor;
|
|
1779
|
+
default: number;
|
|
1780
|
+
};
|
|
1781
|
+
/** Keys that commit the current text. Default Enter, Tab and comma. */
|
|
1782
|
+
delimiters: {
|
|
1783
|
+
type: PropType<readonly string[]>;
|
|
1784
|
+
default: () => string[];
|
|
1785
|
+
};
|
|
1786
|
+
/** Reject a value — return an error string, or `null` to accept. */
|
|
1787
|
+
validate: {
|
|
1788
|
+
type: PropType<(value: string) => string | null>;
|
|
1789
|
+
default: undefined;
|
|
1790
|
+
};
|
|
1791
|
+
/** Fold duplicates silently instead of flagging them. Default `true`. */
|
|
1792
|
+
dedupe: {
|
|
1793
|
+
type: BooleanConstructor;
|
|
1794
|
+
default: boolean;
|
|
1795
|
+
};
|
|
1796
|
+
disabled: {
|
|
1797
|
+
type: BooleanConstructor;
|
|
1798
|
+
default: boolean;
|
|
1799
|
+
};
|
|
1800
|
+
invalid: {
|
|
1801
|
+
type: BooleanConstructor;
|
|
1802
|
+
default: boolean;
|
|
1803
|
+
};
|
|
1804
|
+
label: {
|
|
1805
|
+
type: StringConstructor;
|
|
1806
|
+
default: string;
|
|
1807
|
+
};
|
|
1808
|
+
}>> & Readonly<{
|
|
1809
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
1810
|
+
}>, {
|
|
1811
|
+
invalid: boolean;
|
|
1812
|
+
label: string;
|
|
1813
|
+
disabled: boolean;
|
|
1814
|
+
max: number;
|
|
1815
|
+
modelValue: readonly string[];
|
|
1816
|
+
defaultValue: readonly string[];
|
|
1817
|
+
delimiters: readonly string[];
|
|
1818
|
+
placeholder: string;
|
|
1819
|
+
validate: (value: string) => string | null;
|
|
1820
|
+
dedupe: boolean;
|
|
1821
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
1822
|
+
|
|
1823
|
+
type RatingSize = 'sm' | 'md' | 'lg';
|
|
1824
|
+
/**
|
|
1825
|
+
* A star rating — the Vue counterpart of `@ansh-ui/react`'s `Rating`.
|
|
1826
|
+
*
|
|
1827
|
+
* Interactive ratings are a **radio group**, not a set of buttons: exactly one of N is chosen, which
|
|
1828
|
+
* is what a radio group means, and it gets arrow-key navigation and correct announcements for free.
|
|
1829
|
+
* Read-only ratings are `role="img"` with a text label instead — "4.2 out of 5" is the entire
|
|
1830
|
+
* content, and exposing five separate radios that can't be changed is noise.
|
|
1831
|
+
*
|
|
1832
|
+
* `v-model` for two-way binding, same as every other control here. The React `readOnly` prop is
|
|
1833
|
+
* spelled `readonly` — lower-case, one word — to match the native HTML attribute it mirrors and the
|
|
1834
|
+
* convention `Input`'s own `readonly` prop already set in this package.
|
|
1835
|
+
*/
|
|
1836
|
+
declare const Rating: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
1837
|
+
modelValue: {
|
|
1838
|
+
type: NumberConstructor;
|
|
1839
|
+
default: undefined;
|
|
1840
|
+
};
|
|
1841
|
+
defaultValue: {
|
|
1842
|
+
type: NumberConstructor;
|
|
1843
|
+
default: number;
|
|
1844
|
+
};
|
|
1845
|
+
/** Number of symbols. Default `5`. */
|
|
1846
|
+
max: {
|
|
1847
|
+
type: NumberConstructor;
|
|
1848
|
+
default: number;
|
|
1849
|
+
};
|
|
1850
|
+
/** Allow halves. Default `false`. */
|
|
1851
|
+
allowHalf: {
|
|
1852
|
+
type: BooleanConstructor;
|
|
1853
|
+
default: boolean;
|
|
1854
|
+
};
|
|
1855
|
+
/** Display only — no interaction, no focus. */
|
|
1856
|
+
readonly: {
|
|
1857
|
+
type: BooleanConstructor;
|
|
1858
|
+
default: boolean;
|
|
1859
|
+
};
|
|
1860
|
+
disabled: {
|
|
1861
|
+
type: BooleanConstructor;
|
|
1862
|
+
default: boolean;
|
|
1863
|
+
};
|
|
1864
|
+
size: {
|
|
1865
|
+
type: PropType<RatingSize>;
|
|
1866
|
+
default: string;
|
|
1867
|
+
};
|
|
1868
|
+
/** Custom symbol. Defaults to a star. */
|
|
1869
|
+
icon: {
|
|
1870
|
+
type: PropType<SlotContent>;
|
|
1871
|
+
default: undefined;
|
|
1872
|
+
};
|
|
1873
|
+
label: {
|
|
1874
|
+
type: StringConstructor;
|
|
1875
|
+
default: string;
|
|
1876
|
+
};
|
|
1877
|
+
name: {
|
|
1878
|
+
type: StringConstructor;
|
|
1879
|
+
default: undefined;
|
|
1880
|
+
};
|
|
1881
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
1882
|
+
[key: string]: any;
|
|
1883
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
1884
|
+
modelValue: {
|
|
1885
|
+
type: NumberConstructor;
|
|
1886
|
+
default: undefined;
|
|
1887
|
+
};
|
|
1888
|
+
defaultValue: {
|
|
1889
|
+
type: NumberConstructor;
|
|
1890
|
+
default: number;
|
|
1891
|
+
};
|
|
1892
|
+
/** Number of symbols. Default `5`. */
|
|
1893
|
+
max: {
|
|
1894
|
+
type: NumberConstructor;
|
|
1895
|
+
default: number;
|
|
1896
|
+
};
|
|
1897
|
+
/** Allow halves. Default `false`. */
|
|
1898
|
+
allowHalf: {
|
|
1899
|
+
type: BooleanConstructor;
|
|
1900
|
+
default: boolean;
|
|
1901
|
+
};
|
|
1902
|
+
/** Display only — no interaction, no focus. */
|
|
1903
|
+
readonly: {
|
|
1904
|
+
type: BooleanConstructor;
|
|
1905
|
+
default: boolean;
|
|
1906
|
+
};
|
|
1907
|
+
disabled: {
|
|
1908
|
+
type: BooleanConstructor;
|
|
1909
|
+
default: boolean;
|
|
1910
|
+
};
|
|
1911
|
+
size: {
|
|
1912
|
+
type: PropType<RatingSize>;
|
|
1913
|
+
default: string;
|
|
1914
|
+
};
|
|
1915
|
+
/** Custom symbol. Defaults to a star. */
|
|
1916
|
+
icon: {
|
|
1917
|
+
type: PropType<SlotContent>;
|
|
1918
|
+
default: undefined;
|
|
1919
|
+
};
|
|
1920
|
+
label: {
|
|
1921
|
+
type: StringConstructor;
|
|
1922
|
+
default: string;
|
|
1923
|
+
};
|
|
1924
|
+
name: {
|
|
1925
|
+
type: StringConstructor;
|
|
1926
|
+
default: undefined;
|
|
1927
|
+
};
|
|
1928
|
+
}>> & Readonly<{
|
|
1929
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
1930
|
+
}>, {
|
|
1931
|
+
size: RatingSize;
|
|
1932
|
+
name: string;
|
|
1933
|
+
label: string;
|
|
1934
|
+
disabled: boolean;
|
|
1935
|
+
max: number;
|
|
1936
|
+
modelValue: number;
|
|
1937
|
+
defaultValue: number;
|
|
1938
|
+
readonly: boolean;
|
|
1939
|
+
icon: SlotContent;
|
|
1940
|
+
allowHalf: boolean;
|
|
1941
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
1942
|
+
|
|
1943
|
+
interface DropzoneFile {
|
|
1944
|
+
file: File;
|
|
1945
|
+
id: string;
|
|
1946
|
+
/** Object URL for image previews. Revoked automatically on removal. */
|
|
1947
|
+
preview?: string;
|
|
1948
|
+
error?: string;
|
|
1949
|
+
}
|
|
1950
|
+
/**
|
|
1951
|
+
* A file dropzone with previews and validation — the Vue counterpart of `@ansh-ui/react`'s
|
|
1952
|
+
* `Dropzone`.
|
|
1953
|
+
*
|
|
1954
|
+
* Two things distinguish a working dropzone from a broken one:
|
|
1955
|
+
*
|
|
1956
|
+
* 1. **Drag counting.** `dragleave` fires when the pointer crosses onto a *child* element, so the
|
|
1957
|
+
* naive implementation flickers the highlight constantly while you move across it. A depth
|
|
1958
|
+
* counter incremented on enter and decremented on leave fixes it.
|
|
1959
|
+
* 2. **A real `<input type="file">` underneath.** Drag-and-drop is unusable with a keyboard, a
|
|
1960
|
+
* screen reader, or on a phone. The input is the actual control; the drop surface is an
|
|
1961
|
+
* enhancement layered on top.
|
|
1962
|
+
*
|
|
1963
|
+
* Object URLs are revoked when a file is removed. Skipping that leaks the entire file into memory
|
|
1964
|
+
* for the page's lifetime, which is invisible in testing and obvious after a user uploads forty
|
|
1965
|
+
* photos.
|
|
1966
|
+
*
|
|
1967
|
+
* There is no `modelValue` here — the React source doesn't expose the file list as a controllable
|
|
1968
|
+
* prop either, only the `files` event (React's `onFiles`) to observe it. The list is owned
|
|
1969
|
+
* internally, same as upstream.
|
|
1970
|
+
*/
|
|
1971
|
+
declare const Dropzone: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
1972
|
+
/** `accept` attribute, e.g. `'image/*,.pdf'`. */
|
|
1973
|
+
accept: {
|
|
1974
|
+
type: StringConstructor;
|
|
1975
|
+
default: undefined;
|
|
1976
|
+
};
|
|
1977
|
+
multiple: {
|
|
1978
|
+
type: BooleanConstructor;
|
|
1979
|
+
default: boolean;
|
|
1980
|
+
};
|
|
1981
|
+
/** Per-file size cap, in bytes. */
|
|
1982
|
+
maxSize: {
|
|
1983
|
+
type: NumberConstructor;
|
|
1984
|
+
default: undefined;
|
|
1985
|
+
};
|
|
1986
|
+
/** Maximum number of files. */
|
|
1987
|
+
maxFiles: {
|
|
1988
|
+
type: NumberConstructor;
|
|
1989
|
+
default: number;
|
|
1990
|
+
};
|
|
1991
|
+
disabled: {
|
|
1992
|
+
type: BooleanConstructor;
|
|
1993
|
+
default: boolean;
|
|
1994
|
+
};
|
|
1995
|
+
/** Show thumbnails for images. Default `true`. */
|
|
1996
|
+
previews: {
|
|
1997
|
+
type: BooleanConstructor;
|
|
1998
|
+
default: boolean;
|
|
1999
|
+
};
|
|
2000
|
+
label: {
|
|
2001
|
+
type: PropType<SlotContent>;
|
|
2002
|
+
default: string;
|
|
2003
|
+
};
|
|
2004
|
+
hint: {
|
|
2005
|
+
type: PropType<SlotContent>;
|
|
2006
|
+
default: undefined;
|
|
2007
|
+
};
|
|
2008
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
2009
|
+
[key: string]: any;
|
|
2010
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "files"[], "files", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
2011
|
+
/** `accept` attribute, e.g. `'image/*,.pdf'`. */
|
|
2012
|
+
accept: {
|
|
2013
|
+
type: StringConstructor;
|
|
2014
|
+
default: undefined;
|
|
2015
|
+
};
|
|
2016
|
+
multiple: {
|
|
2017
|
+
type: BooleanConstructor;
|
|
2018
|
+
default: boolean;
|
|
2019
|
+
};
|
|
2020
|
+
/** Per-file size cap, in bytes. */
|
|
2021
|
+
maxSize: {
|
|
2022
|
+
type: NumberConstructor;
|
|
2023
|
+
default: undefined;
|
|
2024
|
+
};
|
|
2025
|
+
/** Maximum number of files. */
|
|
2026
|
+
maxFiles: {
|
|
2027
|
+
type: NumberConstructor;
|
|
2028
|
+
default: number;
|
|
2029
|
+
};
|
|
2030
|
+
disabled: {
|
|
2031
|
+
type: BooleanConstructor;
|
|
2032
|
+
default: boolean;
|
|
2033
|
+
};
|
|
2034
|
+
/** Show thumbnails for images. Default `true`. */
|
|
2035
|
+
previews: {
|
|
2036
|
+
type: BooleanConstructor;
|
|
2037
|
+
default: boolean;
|
|
2038
|
+
};
|
|
2039
|
+
label: {
|
|
2040
|
+
type: PropType<SlotContent>;
|
|
2041
|
+
default: string;
|
|
2042
|
+
};
|
|
2043
|
+
hint: {
|
|
2044
|
+
type: PropType<SlotContent>;
|
|
2045
|
+
default: undefined;
|
|
2046
|
+
};
|
|
2047
|
+
}>> & Readonly<{
|
|
2048
|
+
onFiles?: ((...args: any[]) => any) | undefined;
|
|
2049
|
+
}>, {
|
|
2050
|
+
label: SlotContent;
|
|
2051
|
+
disabled: boolean;
|
|
2052
|
+
maxSize: number;
|
|
2053
|
+
multiple: boolean;
|
|
2054
|
+
accept: string;
|
|
2055
|
+
maxFiles: number;
|
|
2056
|
+
previews: boolean;
|
|
2057
|
+
hint: SlotContent;
|
|
2058
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
2059
|
+
|
|
2060
|
+
/** Documents the shape of `ColorPicker`'s props. Not consumed by `defineComponent` directly. */
|
|
2061
|
+
interface ColorPickerProps {
|
|
2062
|
+
/** Any CSS colour — hex, rgb, hsl, oklch, or a named colour. */
|
|
2063
|
+
modelValue?: string;
|
|
2064
|
+
defaultValue?: string;
|
|
2065
|
+
/** Output format. Default `'hex'`. */
|
|
2066
|
+
format?: 'hex' | 'rgb' | 'hsl' | 'oklch';
|
|
2067
|
+
/** Show the alpha slider. Default `false`. */
|
|
2068
|
+
alpha?: boolean;
|
|
2069
|
+
/** Swatches shown under the picker. */
|
|
2070
|
+
presets?: readonly string[];
|
|
2071
|
+
/** Report the contrast ratio against this colour, live. */
|
|
2072
|
+
contrastAgainst?: string;
|
|
2073
|
+
disabled?: boolean;
|
|
2074
|
+
label?: string;
|
|
2075
|
+
}
|
|
2076
|
+
/**
|
|
2077
|
+
* A colour picker built on the engine's colour system — the Vue counterpart of `@ansh-ui/react`'s
|
|
2078
|
+
* `ColorPicker`.
|
|
2079
|
+
*
|
|
2080
|
+
* The saturation/value plane, hue rail and alpha rail are the conventional layout. What's less
|
|
2081
|
+
* conventional, and the reason this is worth shipping over a generic picker:
|
|
2082
|
+
*
|
|
2083
|
+
* - **It speaks every format the engine does.** Paste `oklch(62% 0.2 264)` into the text field and
|
|
2084
|
+
* it parses. Most pickers accept hex and nothing else.
|
|
2085
|
+
* - **It can report contrast live.** On a theme editor — which is what colour pickers in admin
|
|
2086
|
+
* tools are usually for — picking a brand colour without seeing that it fails WCAG against your
|
|
2087
|
+
* background is how inaccessible products get built one reasonable decision at a time.
|
|
2088
|
+
*
|
|
2089
|
+
* State is held as HSV, not as the output string. Round-tripping through hex on every pointer move
|
|
2090
|
+
* loses information: dragging into the black corner would discard the hue, so releasing and
|
|
2091
|
+
* dragging back out returns red instead of the colour you started from.
|
|
2092
|
+
*/
|
|
2093
|
+
declare const ColorPicker: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
2094
|
+
modelValue: {
|
|
2095
|
+
type: StringConstructor;
|
|
2096
|
+
default: undefined;
|
|
2097
|
+
};
|
|
2098
|
+
defaultValue: {
|
|
2099
|
+
type: StringConstructor;
|
|
2100
|
+
default: string;
|
|
2101
|
+
};
|
|
2102
|
+
format: {
|
|
2103
|
+
type: PropType<"hex" | "rgb" | "hsl" | "oklch">;
|
|
2104
|
+
default: string;
|
|
2105
|
+
};
|
|
2106
|
+
alpha: {
|
|
2107
|
+
type: BooleanConstructor;
|
|
2108
|
+
default: boolean;
|
|
2109
|
+
};
|
|
2110
|
+
presets: {
|
|
2111
|
+
type: PropType<readonly string[]>;
|
|
2112
|
+
default: undefined;
|
|
2113
|
+
};
|
|
2114
|
+
contrastAgainst: {
|
|
2115
|
+
type: StringConstructor;
|
|
2116
|
+
default: undefined;
|
|
2117
|
+
};
|
|
2118
|
+
disabled: {
|
|
2119
|
+
type: BooleanConstructor;
|
|
2120
|
+
default: boolean;
|
|
2121
|
+
};
|
|
2122
|
+
label: {
|
|
2123
|
+
type: StringConstructor;
|
|
2124
|
+
default: string;
|
|
2125
|
+
};
|
|
2126
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
2127
|
+
[key: string]: any;
|
|
2128
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
2129
|
+
modelValue: {
|
|
2130
|
+
type: StringConstructor;
|
|
2131
|
+
default: undefined;
|
|
2132
|
+
};
|
|
2133
|
+
defaultValue: {
|
|
2134
|
+
type: StringConstructor;
|
|
2135
|
+
default: string;
|
|
2136
|
+
};
|
|
2137
|
+
format: {
|
|
2138
|
+
type: PropType<"hex" | "rgb" | "hsl" | "oklch">;
|
|
2139
|
+
default: string;
|
|
2140
|
+
};
|
|
2141
|
+
alpha: {
|
|
2142
|
+
type: BooleanConstructor;
|
|
2143
|
+
default: boolean;
|
|
2144
|
+
};
|
|
2145
|
+
presets: {
|
|
2146
|
+
type: PropType<readonly string[]>;
|
|
2147
|
+
default: undefined;
|
|
2148
|
+
};
|
|
2149
|
+
contrastAgainst: {
|
|
2150
|
+
type: StringConstructor;
|
|
2151
|
+
default: undefined;
|
|
2152
|
+
};
|
|
2153
|
+
disabled: {
|
|
2154
|
+
type: BooleanConstructor;
|
|
2155
|
+
default: boolean;
|
|
2156
|
+
};
|
|
2157
|
+
label: {
|
|
2158
|
+
type: StringConstructor;
|
|
2159
|
+
default: string;
|
|
2160
|
+
};
|
|
2161
|
+
}>> & Readonly<{
|
|
2162
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
2163
|
+
}>, {
|
|
2164
|
+
label: string;
|
|
2165
|
+
disabled: boolean;
|
|
2166
|
+
modelValue: string;
|
|
2167
|
+
defaultValue: string;
|
|
2168
|
+
format: "oklch" | "hsl" | "hex" | "rgb";
|
|
2169
|
+
alpha: boolean;
|
|
2170
|
+
presets: readonly string[];
|
|
2171
|
+
contrastAgainst: string;
|
|
2172
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
2173
|
+
|
|
2174
|
+
/**
|
|
2175
|
+
* A month calendar — the Vue counterpart of `@ansh-ui/react`'s `Calendar`.
|
|
2176
|
+
*
|
|
2177
|
+
* Dates are plain `Date` objects normalised to local midnight. No date library: the whole surface
|
|
2178
|
+
* this needs is "add days", "same day?" and "days in month", and pulling in a 70 KB dependency for
|
|
2179
|
+
* that is how component libraries end up heavier than the app using them.
|
|
2180
|
+
*
|
|
2181
|
+
* Local midnight, specifically. Working in UTC makes a date shift by a day for anyone west of
|
|
2182
|
+
* Greenwich — the bug where a birthday saved on the 14th displays as the 13th, which is the single
|
|
2183
|
+
* most reported issue in every date picker ever shipped.
|
|
2184
|
+
*
|
|
2185
|
+
* Keyboard support is the WAI-ARIA date grid pattern: arrows by day, PageUp/PageDown by month,
|
|
2186
|
+
* Shift+PageUp/PageDown by year, Home/End to the week's ends. A calendar without these is
|
|
2187
|
+
* mouse-only, and entering a date of birth by clicking back 300 months is not a real option.
|
|
2188
|
+
*/
|
|
2189
|
+
/** Strip the time, in local time. */
|
|
2190
|
+
declare function startOfDay(date: Date): Date;
|
|
2191
|
+
declare function addDays(date: Date, days: number): Date;
|
|
2192
|
+
declare function addMonths(date: Date, months: number): Date;
|
|
2193
|
+
declare function isSameDay(a: Date | null | undefined, b: Date | null | undefined): boolean;
|
|
2194
|
+
type DateRange = {
|
|
2195
|
+
start: Date | null;
|
|
2196
|
+
end: Date | null;
|
|
2197
|
+
};
|
|
2198
|
+
/** Documents the shape of `Calendar`'s props. Not consumed by `defineComponent` directly. */
|
|
2199
|
+
interface CalendarProps {
|
|
2200
|
+
/** `'single'` picks one date; `'range'` picks a start and an end. */
|
|
2201
|
+
mode?: 'single' | 'range';
|
|
2202
|
+
modelValue?: Date | null | DateRange;
|
|
2203
|
+
defaultValue?: Date | null | DateRange;
|
|
2204
|
+
min?: Date;
|
|
2205
|
+
max?: Date;
|
|
2206
|
+
/** Disable specific dates — weekends, holidays, booked days. */
|
|
2207
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
2208
|
+
/** 0 = Sunday, 1 = Monday. Default: inferred from the locale. */
|
|
2209
|
+
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
2210
|
+
locale?: string;
|
|
2211
|
+
/** Months shown side by side. Default `1`; `2` suits range pickers. */
|
|
2212
|
+
months?: number;
|
|
2213
|
+
/** Show ISO week numbers down the left. */
|
|
2214
|
+
showWeekNumbers?: boolean;
|
|
2215
|
+
}
|
|
2216
|
+
declare const Calendar: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
2217
|
+
mode: {
|
|
2218
|
+
type: PropType<"single" | "range">;
|
|
2219
|
+
default: string;
|
|
2220
|
+
};
|
|
2221
|
+
modelValue: {
|
|
2222
|
+
type: PropType<Date | null | DateRange>;
|
|
2223
|
+
default: undefined;
|
|
2224
|
+
};
|
|
2225
|
+
defaultValue: {
|
|
2226
|
+
type: PropType<Date | null | DateRange>;
|
|
2227
|
+
default: undefined;
|
|
2228
|
+
};
|
|
2229
|
+
min: {
|
|
2230
|
+
type: DateConstructor;
|
|
2231
|
+
default: undefined;
|
|
2232
|
+
};
|
|
2233
|
+
max: {
|
|
2234
|
+
type: DateConstructor;
|
|
2235
|
+
default: undefined;
|
|
2236
|
+
};
|
|
2237
|
+
isDateDisabled: {
|
|
2238
|
+
type: PropType<(date: Date) => boolean>;
|
|
2239
|
+
default: undefined;
|
|
2240
|
+
};
|
|
2241
|
+
weekStartsOn: {
|
|
2242
|
+
type: PropType<0 | 1 | 2 | 3 | 4 | 5 | 6>;
|
|
2243
|
+
default: undefined;
|
|
2244
|
+
};
|
|
2245
|
+
locale: {
|
|
2246
|
+
type: StringConstructor;
|
|
2247
|
+
default: undefined;
|
|
2248
|
+
};
|
|
2249
|
+
months: {
|
|
2250
|
+
type: NumberConstructor;
|
|
2251
|
+
default: number;
|
|
2252
|
+
};
|
|
2253
|
+
showWeekNumbers: {
|
|
2254
|
+
type: BooleanConstructor;
|
|
2255
|
+
default: boolean;
|
|
2256
|
+
};
|
|
2257
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
2258
|
+
[key: string]: any;
|
|
2259
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
2260
|
+
mode: {
|
|
2261
|
+
type: PropType<"single" | "range">;
|
|
2262
|
+
default: string;
|
|
2263
|
+
};
|
|
2264
|
+
modelValue: {
|
|
2265
|
+
type: PropType<Date | null | DateRange>;
|
|
2266
|
+
default: undefined;
|
|
2267
|
+
};
|
|
2268
|
+
defaultValue: {
|
|
2269
|
+
type: PropType<Date | null | DateRange>;
|
|
2270
|
+
default: undefined;
|
|
2271
|
+
};
|
|
2272
|
+
min: {
|
|
2273
|
+
type: DateConstructor;
|
|
2274
|
+
default: undefined;
|
|
2275
|
+
};
|
|
2276
|
+
max: {
|
|
2277
|
+
type: DateConstructor;
|
|
2278
|
+
default: undefined;
|
|
2279
|
+
};
|
|
2280
|
+
isDateDisabled: {
|
|
2281
|
+
type: PropType<(date: Date) => boolean>;
|
|
2282
|
+
default: undefined;
|
|
2283
|
+
};
|
|
2284
|
+
weekStartsOn: {
|
|
2285
|
+
type: PropType<0 | 1 | 2 | 3 | 4 | 5 | 6>;
|
|
2286
|
+
default: undefined;
|
|
2287
|
+
};
|
|
2288
|
+
locale: {
|
|
2289
|
+
type: StringConstructor;
|
|
2290
|
+
default: undefined;
|
|
2291
|
+
};
|
|
2292
|
+
months: {
|
|
2293
|
+
type: NumberConstructor;
|
|
2294
|
+
default: number;
|
|
2295
|
+
};
|
|
2296
|
+
showWeekNumbers: {
|
|
2297
|
+
type: BooleanConstructor;
|
|
2298
|
+
default: boolean;
|
|
2299
|
+
};
|
|
2300
|
+
}>> & Readonly<{
|
|
2301
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
2302
|
+
}>, {
|
|
2303
|
+
mode: "range" | "single";
|
|
2304
|
+
max: Date;
|
|
2305
|
+
modelValue: Date | DateRange | null;
|
|
2306
|
+
defaultValue: Date | DateRange | null;
|
|
2307
|
+
min: Date;
|
|
2308
|
+
isDateDisabled: (date: Date) => boolean;
|
|
2309
|
+
weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
2310
|
+
locale: string;
|
|
2311
|
+
months: number;
|
|
2312
|
+
showWeekNumbers: boolean;
|
|
2313
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
2314
|
+
|
|
2315
|
+
/** Documents the shape of `DatePicker`'s props. Not consumed by `defineComponent` directly. */
|
|
2316
|
+
interface DatePickerProps {
|
|
2317
|
+
modelValue?: Date | null;
|
|
2318
|
+
defaultValue?: Date | null;
|
|
2319
|
+
placeholder?: string;
|
|
2320
|
+
disabled?: boolean;
|
|
2321
|
+
invalid?: boolean;
|
|
2322
|
+
/** Show a clear button once a date is chosen. */
|
|
2323
|
+
clearable?: boolean;
|
|
2324
|
+
/** Format the displayed date. Defaults to the locale's medium date. */
|
|
2325
|
+
format?: (date: Date) => string;
|
|
2326
|
+
label?: string;
|
|
2327
|
+
name?: string;
|
|
2328
|
+
min?: Date;
|
|
2329
|
+
max?: Date;
|
|
2330
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
2331
|
+
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
2332
|
+
locale?: string;
|
|
2333
|
+
months?: number;
|
|
2334
|
+
showWeekNumbers?: boolean;
|
|
2335
|
+
}
|
|
2336
|
+
/**
|
|
2337
|
+
* A date field with a calendar popover — the Vue counterpart of `@ansh-ui/react`'s `DatePicker`.
|
|
2338
|
+
*
|
|
2339
|
+
* The text input is editable, not just a display. Typing "14/03/2026" is faster than clicking
|
|
2340
|
+
* through a calendar for anyone who knows the date they want, and a picker that forces the calendar
|
|
2341
|
+
* is a picker people complain about. The calendar is the fallback for "some Thursday next month",
|
|
2342
|
+
* which is the case typing can't serve.
|
|
2343
|
+
*
|
|
2344
|
+
* Parsing is deliberately forgiving of separators and order within a locale, but never guesses
|
|
2345
|
+
* between `03/04` as March 4th and April 3rd — it follows the locale's own order. Guessing is how
|
|
2346
|
+
* date fields silently record the wrong day.
|
|
2347
|
+
*/
|
|
2348
|
+
declare const DatePicker: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
2349
|
+
min: {
|
|
2350
|
+
type: DateConstructor;
|
|
2351
|
+
default: undefined;
|
|
2352
|
+
};
|
|
2353
|
+
max: {
|
|
2354
|
+
type: DateConstructor;
|
|
2355
|
+
default: undefined;
|
|
2356
|
+
};
|
|
2357
|
+
isDateDisabled: {
|
|
2358
|
+
type: PropType<(date: Date) => boolean>;
|
|
2359
|
+
default: undefined;
|
|
2360
|
+
};
|
|
2361
|
+
weekStartsOn: {
|
|
2362
|
+
type: PropType<0 | 1 | 2 | 3 | 4 | 5 | 6>;
|
|
2363
|
+
default: undefined;
|
|
2364
|
+
};
|
|
2365
|
+
locale: {
|
|
2366
|
+
type: StringConstructor;
|
|
2367
|
+
default: undefined;
|
|
2368
|
+
};
|
|
2369
|
+
showWeekNumbers: {
|
|
2370
|
+
type: BooleanConstructor;
|
|
2371
|
+
default: boolean;
|
|
2372
|
+
};
|
|
2373
|
+
modelValue: {
|
|
2374
|
+
type: PropType<Date | null>;
|
|
2375
|
+
default: undefined;
|
|
2376
|
+
};
|
|
2377
|
+
defaultValue: {
|
|
2378
|
+
type: PropType<Date | null>;
|
|
2379
|
+
default: undefined;
|
|
2380
|
+
};
|
|
2381
|
+
placeholder: {
|
|
2382
|
+
type: StringConstructor;
|
|
2383
|
+
default: undefined;
|
|
2384
|
+
};
|
|
2385
|
+
disabled: {
|
|
2386
|
+
type: BooleanConstructor;
|
|
2387
|
+
default: boolean;
|
|
2388
|
+
};
|
|
2389
|
+
invalid: {
|
|
2390
|
+
type: BooleanConstructor;
|
|
2391
|
+
default: boolean;
|
|
2392
|
+
};
|
|
2393
|
+
clearable: {
|
|
2394
|
+
type: BooleanConstructor;
|
|
2395
|
+
default: boolean;
|
|
2396
|
+
};
|
|
2397
|
+
format: {
|
|
2398
|
+
type: PropType<(date: Date) => string>;
|
|
2399
|
+
default: undefined;
|
|
2400
|
+
};
|
|
2401
|
+
label: {
|
|
2402
|
+
type: StringConstructor;
|
|
2403
|
+
default: string;
|
|
2404
|
+
};
|
|
2405
|
+
name: {
|
|
2406
|
+
type: StringConstructor;
|
|
2407
|
+
default: undefined;
|
|
2408
|
+
};
|
|
2409
|
+
months: {
|
|
2410
|
+
type: NumberConstructor;
|
|
2411
|
+
default: undefined;
|
|
2412
|
+
};
|
|
2413
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
2414
|
+
[key: string]: any;
|
|
2415
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
2416
|
+
min: {
|
|
2417
|
+
type: DateConstructor;
|
|
2418
|
+
default: undefined;
|
|
2419
|
+
};
|
|
2420
|
+
max: {
|
|
2421
|
+
type: DateConstructor;
|
|
2422
|
+
default: undefined;
|
|
2423
|
+
};
|
|
2424
|
+
isDateDisabled: {
|
|
2425
|
+
type: PropType<(date: Date) => boolean>;
|
|
2426
|
+
default: undefined;
|
|
2427
|
+
};
|
|
2428
|
+
weekStartsOn: {
|
|
2429
|
+
type: PropType<0 | 1 | 2 | 3 | 4 | 5 | 6>;
|
|
2430
|
+
default: undefined;
|
|
2431
|
+
};
|
|
2432
|
+
locale: {
|
|
2433
|
+
type: StringConstructor;
|
|
2434
|
+
default: undefined;
|
|
2435
|
+
};
|
|
2436
|
+
showWeekNumbers: {
|
|
2437
|
+
type: BooleanConstructor;
|
|
2438
|
+
default: boolean;
|
|
2439
|
+
};
|
|
2440
|
+
modelValue: {
|
|
2441
|
+
type: PropType<Date | null>;
|
|
2442
|
+
default: undefined;
|
|
2443
|
+
};
|
|
2444
|
+
defaultValue: {
|
|
2445
|
+
type: PropType<Date | null>;
|
|
2446
|
+
default: undefined;
|
|
2447
|
+
};
|
|
2448
|
+
placeholder: {
|
|
2449
|
+
type: StringConstructor;
|
|
2450
|
+
default: undefined;
|
|
2451
|
+
};
|
|
2452
|
+
disabled: {
|
|
2453
|
+
type: BooleanConstructor;
|
|
2454
|
+
default: boolean;
|
|
2455
|
+
};
|
|
2456
|
+
invalid: {
|
|
2457
|
+
type: BooleanConstructor;
|
|
2458
|
+
default: boolean;
|
|
2459
|
+
};
|
|
2460
|
+
clearable: {
|
|
2461
|
+
type: BooleanConstructor;
|
|
2462
|
+
default: boolean;
|
|
2463
|
+
};
|
|
2464
|
+
format: {
|
|
2465
|
+
type: PropType<(date: Date) => string>;
|
|
2466
|
+
default: undefined;
|
|
2467
|
+
};
|
|
2468
|
+
label: {
|
|
2469
|
+
type: StringConstructor;
|
|
2470
|
+
default: string;
|
|
2471
|
+
};
|
|
2472
|
+
name: {
|
|
2473
|
+
type: StringConstructor;
|
|
2474
|
+
default: undefined;
|
|
2475
|
+
};
|
|
2476
|
+
months: {
|
|
2477
|
+
type: NumberConstructor;
|
|
2478
|
+
default: undefined;
|
|
2479
|
+
};
|
|
2480
|
+
}>> & Readonly<{
|
|
2481
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
2482
|
+
}>, {
|
|
2483
|
+
name: string;
|
|
2484
|
+
invalid: boolean;
|
|
2485
|
+
label: string;
|
|
2486
|
+
disabled: boolean;
|
|
2487
|
+
max: Date;
|
|
2488
|
+
modelValue: Date | null;
|
|
2489
|
+
defaultValue: Date | null;
|
|
2490
|
+
clearable: boolean;
|
|
2491
|
+
min: Date;
|
|
2492
|
+
placeholder: string;
|
|
2493
|
+
format: (date: Date) => string;
|
|
2494
|
+
isDateDisabled: (date: Date) => boolean;
|
|
2495
|
+
weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
2496
|
+
locale: string;
|
|
2497
|
+
months: number;
|
|
2498
|
+
showWeekNumbers: boolean;
|
|
2499
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
2500
|
+
/** Documents the shape of `DateRangePicker`'s props. Not consumed by `defineComponent` directly. */
|
|
2501
|
+
interface DateRangePickerProps {
|
|
2502
|
+
modelValue?: DateRange;
|
|
2503
|
+
defaultValue?: DateRange;
|
|
2504
|
+
disabled?: boolean;
|
|
2505
|
+
invalid?: boolean;
|
|
2506
|
+
label?: string;
|
|
2507
|
+
/** Months shown side by side. Default `2`. */
|
|
2508
|
+
months?: number;
|
|
2509
|
+
min?: Date;
|
|
2510
|
+
max?: Date;
|
|
2511
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
2512
|
+
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
2513
|
+
locale?: string;
|
|
2514
|
+
showWeekNumbers?: boolean;
|
|
2515
|
+
}
|
|
2516
|
+
/**
|
|
2517
|
+
* A start/end date range — the Vue counterpart of `@ansh-ui/react`'s `DateRangePicker`.
|
|
2518
|
+
*
|
|
2519
|
+
* Two months by default: choosing a range that crosses a month boundary with one month visible
|
|
2520
|
+
* means paging back and forth to compare, which is where users lose track of what they picked.
|
|
2521
|
+
*/
|
|
2522
|
+
declare const DateRangePicker: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
2523
|
+
min: {
|
|
2524
|
+
type: DateConstructor;
|
|
2525
|
+
default: undefined;
|
|
2526
|
+
};
|
|
2527
|
+
max: {
|
|
2528
|
+
type: DateConstructor;
|
|
2529
|
+
default: undefined;
|
|
2530
|
+
};
|
|
2531
|
+
isDateDisabled: {
|
|
2532
|
+
type: PropType<(date: Date) => boolean>;
|
|
2533
|
+
default: undefined;
|
|
2534
|
+
};
|
|
2535
|
+
weekStartsOn: {
|
|
2536
|
+
type: PropType<0 | 1 | 2 | 3 | 4 | 5 | 6>;
|
|
2537
|
+
default: undefined;
|
|
2538
|
+
};
|
|
2539
|
+
locale: {
|
|
2540
|
+
type: StringConstructor;
|
|
2541
|
+
default: undefined;
|
|
2542
|
+
};
|
|
2543
|
+
showWeekNumbers: {
|
|
2544
|
+
type: BooleanConstructor;
|
|
2545
|
+
default: boolean;
|
|
2546
|
+
};
|
|
2547
|
+
modelValue: {
|
|
2548
|
+
type: PropType<DateRange>;
|
|
2549
|
+
default: undefined;
|
|
2550
|
+
};
|
|
2551
|
+
defaultValue: {
|
|
2552
|
+
type: PropType<DateRange>;
|
|
2553
|
+
default: undefined;
|
|
2554
|
+
};
|
|
2555
|
+
disabled: {
|
|
2556
|
+
type: BooleanConstructor;
|
|
2557
|
+
default: boolean;
|
|
2558
|
+
};
|
|
2559
|
+
invalid: {
|
|
2560
|
+
type: BooleanConstructor;
|
|
2561
|
+
default: boolean;
|
|
2562
|
+
};
|
|
2563
|
+
label: {
|
|
2564
|
+
type: StringConstructor;
|
|
2565
|
+
default: string;
|
|
2566
|
+
};
|
|
2567
|
+
months: {
|
|
2568
|
+
type: NumberConstructor;
|
|
2569
|
+
default: number;
|
|
2570
|
+
};
|
|
2571
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
2572
|
+
[key: string]: any;
|
|
2573
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
2574
|
+
min: {
|
|
2575
|
+
type: DateConstructor;
|
|
2576
|
+
default: undefined;
|
|
2577
|
+
};
|
|
2578
|
+
max: {
|
|
2579
|
+
type: DateConstructor;
|
|
2580
|
+
default: undefined;
|
|
2581
|
+
};
|
|
2582
|
+
isDateDisabled: {
|
|
2583
|
+
type: PropType<(date: Date) => boolean>;
|
|
2584
|
+
default: undefined;
|
|
2585
|
+
};
|
|
2586
|
+
weekStartsOn: {
|
|
2587
|
+
type: PropType<0 | 1 | 2 | 3 | 4 | 5 | 6>;
|
|
2588
|
+
default: undefined;
|
|
2589
|
+
};
|
|
2590
|
+
locale: {
|
|
2591
|
+
type: StringConstructor;
|
|
2592
|
+
default: undefined;
|
|
2593
|
+
};
|
|
2594
|
+
showWeekNumbers: {
|
|
2595
|
+
type: BooleanConstructor;
|
|
2596
|
+
default: boolean;
|
|
2597
|
+
};
|
|
2598
|
+
modelValue: {
|
|
2599
|
+
type: PropType<DateRange>;
|
|
2600
|
+
default: undefined;
|
|
2601
|
+
};
|
|
2602
|
+
defaultValue: {
|
|
2603
|
+
type: PropType<DateRange>;
|
|
2604
|
+
default: undefined;
|
|
2605
|
+
};
|
|
2606
|
+
disabled: {
|
|
2607
|
+
type: BooleanConstructor;
|
|
2608
|
+
default: boolean;
|
|
2609
|
+
};
|
|
2610
|
+
invalid: {
|
|
2611
|
+
type: BooleanConstructor;
|
|
2612
|
+
default: boolean;
|
|
2613
|
+
};
|
|
2614
|
+
label: {
|
|
2615
|
+
type: StringConstructor;
|
|
2616
|
+
default: string;
|
|
2617
|
+
};
|
|
2618
|
+
months: {
|
|
2619
|
+
type: NumberConstructor;
|
|
2620
|
+
default: number;
|
|
2621
|
+
};
|
|
2622
|
+
}>> & Readonly<{
|
|
2623
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
2624
|
+
}>, {
|
|
2625
|
+
invalid: boolean;
|
|
2626
|
+
label: string;
|
|
2627
|
+
disabled: boolean;
|
|
2628
|
+
max: Date;
|
|
2629
|
+
modelValue: DateRange;
|
|
2630
|
+
defaultValue: DateRange;
|
|
2631
|
+
min: Date;
|
|
2632
|
+
isDateDisabled: (date: Date) => boolean;
|
|
2633
|
+
weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
2634
|
+
locale: string;
|
|
2635
|
+
months: number;
|
|
2636
|
+
showWeekNumbers: boolean;
|
|
2637
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
2638
|
+
|
|
2639
|
+
export { Calendar, type CalendarProps, Checkbox, ChoiceCard, ColorPicker, type ColorPickerProps, Combobox, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Dropzone, type DropzoneFile, Field, type FieldContextValue, type FieldControlAttrs, Fieldset, Input, type InputSize, NumberInput, OptionList, type OptionListProps, PinInput, Radio, RadioGroup, type RadioGroupProps, RangeSlider, Rating, type RatingSize, Select, type SelectOption, Slider, type SliderMark, Switch, TagsInput, Textarea, VisuallyHidden, addDays, addMonths, filterOptions, firstEnabled, isSameDay, scoreOption, startOfDay, stepActive, useFieldContext, useFieldControl, useTypeahead };
|