sit-onyx 1.0.0-alpha.113 → 1.0.0-alpha.115

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/OnyxListItem/OnyxListItem.vue.d.ts +1 -1
  2. package/dist/components/OnyxListbox/OnyxListbox.vue.d.ts +172 -39
  3. package/dist/components/OnyxListbox/OnyxMiniSearch.vue.d.ts +15 -2
  4. package/dist/components/OnyxListbox/types.d.ts +12 -11
  5. package/dist/components/OnyxSelectInput/OnyxSelectInput.vue.d.ts +10 -4
  6. package/dist/components/OnyxSelectInput/types.d.ts +5 -4
  7. package/dist/index.cjs +1 -1
  8. package/dist/index.js +1245 -1060
  9. package/dist/style.css +1 -1
  10. package/package.json +3 -2
  11. package/src/styles/grid.ct.tsx +30 -30
  12. package/src/styles/grid.scss +29 -17
  13. package/src/styles/mixins/list.scss +1 -0
package/dist/components/OnyxListItem/OnyxListItem.vue.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ListboxOption } from '../..';
1
+ import { ListboxOption } from '../OnyxListbox/types';
2
2
 
3
3
  declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Pick<ListboxOption, "color"> & {
4
4
  active?: boolean | undefined;
package/dist/components/OnyxListbox/OnyxListbox.vue.d.ts CHANGED
@@ -1,62 +1,107 @@
1
1
  import { SelectOptionValue } from '../../types';
2
+ import { ListboxOption } from './types';
2
3
 
3
4
  declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(__VLS_props: (({
5
+ required?: boolean | undefined;
4
6
  label: string;
5
7
  density?: "default" | "compact" | "cozy" | undefined;
8
+ disabled?: boolean | undefined;
6
9
  loading?: boolean | undefined;
10
+ skeleton?: boolean | undefined;
7
11
  multiple?: false | undefined;
8
- modelValue?: TValue | undefined;
9
- "onUpdate:modelValue"?: ((value: TValue | TValue[] | undefined) => any) | undefined;
10
- options: import('./types').ListboxOption<TValue>[];
12
+ placeholder?: string | undefined;
13
+ hideLabel?: boolean | undefined;
14
+ requiredMarker?: "required" | "optional" | undefined;
15
+ modelValue?: ListboxOption<TValue> | undefined;
16
+ "onUpdate:modelValue"?: ((value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => any) | undefined;
17
+ options: ListboxOption<TValue>[];
18
+ withCheckAll?: undefined;
19
+ readonly?: boolean | undefined;
11
20
  message?: string | undefined;
21
+ listLabel: string;
22
+ selection?: import('../..').SelectModelValue<TValue> | import('../..').SelectModelValue<TValue>[] | undefined;
23
+ textMode?: "summary" | "preview" | undefined;
12
24
  withSearch: true;
13
25
  searchTerm?: string | undefined;
14
26
  lazyLoading?: import('./types').ListboxLazyLoading | undefined;
15
27
  "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
16
28
  onLazyLoad?: (() => any) | undefined;
17
29
  } | {
30
+ required?: boolean | undefined;
18
31
  label: string;
19
32
  density?: "default" | "compact" | "cozy" | undefined;
33
+ disabled?: boolean | undefined;
20
34
  loading?: boolean | undefined;
35
+ skeleton?: boolean | undefined;
21
36
  multiple?: false | undefined;
22
- modelValue?: TValue | undefined;
23
- "onUpdate:modelValue"?: ((value: TValue | TValue[] | undefined) => any) | undefined;
24
- options: import('./types').ListboxOption<TValue>[];
37
+ placeholder?: string | undefined;
38
+ hideLabel?: boolean | undefined;
39
+ requiredMarker?: "required" | "optional" | undefined;
40
+ modelValue?: ListboxOption<TValue> | undefined;
41
+ "onUpdate:modelValue"?: ((value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => any) | undefined;
42
+ options: ListboxOption<TValue>[];
43
+ withCheckAll?: undefined;
44
+ readonly?: boolean | undefined;
25
45
  message?: string | undefined;
46
+ listLabel: string;
47
+ selection?: import('../..').SelectModelValue<TValue> | import('../..').SelectModelValue<TValue>[] | undefined;
48
+ textMode?: "summary" | "preview" | undefined;
26
49
  withSearch?: false | undefined;
50
+ searchTerm?: undefined;
27
51
  lazyLoading?: import('./types').ListboxLazyLoading | undefined;
28
52
  "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
29
53
  onLazyLoad?: (() => any) | undefined;
30
54
  } | {
55
+ required?: boolean | undefined;
31
56
  label: string;
32
57
  density?: "default" | "compact" | "cozy" | undefined;
58
+ disabled?: boolean | undefined;
33
59
  loading?: boolean | undefined;
60
+ skeleton?: boolean | undefined;
34
61
  multiple: true;
35
- modelValue?: TValue[] | undefined;
36
- "onUpdate:modelValue"?: ((value: TValue | TValue[] | undefined) => any) | undefined;
37
- options: import('./types').ListboxOption<TValue>[];
62
+ placeholder?: string | undefined;
63
+ hideLabel?: boolean | undefined;
64
+ requiredMarker?: "required" | "optional" | undefined;
65
+ modelValue?: ListboxOption<TValue>[] | undefined;
66
+ "onUpdate:modelValue"?: ((value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => any) | undefined;
67
+ options: ListboxOption<TValue>[];
38
68
  withCheckAll?: boolean | {
39
69
  label?: string | undefined;
40
70
  } | undefined;
71
+ readonly?: boolean | undefined;
41
72
  message?: string | undefined;
73
+ listLabel: string;
74
+ selection?: import('../..').SelectModelValue<TValue> | import('../..').SelectModelValue<TValue>[] | undefined;
75
+ textMode?: "summary" | "preview" | undefined;
42
76
  withSearch: true;
43
77
  searchTerm?: string | undefined;
44
78
  lazyLoading?: import('./types').ListboxLazyLoading | undefined;
45
79
  "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
46
80
  onLazyLoad?: (() => any) | undefined;
47
81
  } | {
82
+ required?: boolean | undefined;
48
83
  label: string;
49
84
  density?: "default" | "compact" | "cozy" | undefined;
85
+ disabled?: boolean | undefined;
50
86
  loading?: boolean | undefined;
87
+ skeleton?: boolean | undefined;
51
88
  multiple: true;
52
- modelValue?: TValue[] | undefined;
53
- "onUpdate:modelValue"?: ((value: TValue | TValue[] | undefined) => any) | undefined;
54
- options: import('./types').ListboxOption<TValue>[];
89
+ placeholder?: string | undefined;
90
+ hideLabel?: boolean | undefined;
91
+ requiredMarker?: "required" | "optional" | undefined;
92
+ modelValue?: ListboxOption<TValue>[] | undefined;
93
+ "onUpdate:modelValue"?: ((value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => any) | undefined;
94
+ options: ListboxOption<TValue>[];
55
95
  withCheckAll?: boolean | {
56
96
  label?: string | undefined;
57
97
  } | undefined;
98
+ readonly?: boolean | undefined;
58
99
  message?: string | undefined;
100
+ listLabel: string;
101
+ selection?: import('../..').SelectModelValue<TValue> | import('../..').SelectModelValue<TValue>[] | undefined;
102
+ textMode?: "summary" | "preview" | undefined;
59
103
  withSearch?: false | undefined;
104
+ searchTerm?: undefined;
60
105
  lazyLoading?: import('./types').ListboxLazyLoading | undefined;
61
106
  "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
62
107
  onLazyLoad?: (() => any) | undefined;
@@ -93,65 +138,109 @@ declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(_
93
138
  */
94
139
  optionsEnd?(): unknown;
95
140
  };
96
- emit: ((evt: "update:modelValue", value: TValue | TValue[] | undefined) => void) & ((evt: "update:searchTerm", searchTerm: string) => void) & ((evt: "lazyLoad") => void);
141
+ emit: ((evt: "update:modelValue", value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => void) & ((evt: "update:searchTerm", searchTerm: string) => void) & ((evt: "lazyLoad") => void);
97
142
  } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
98
143
  props: (({
144
+ required?: boolean | undefined;
99
145
  label: string;
100
146
  density?: "default" | "compact" | "cozy" | undefined;
147
+ disabled?: boolean | undefined;
101
148
  loading?: boolean | undefined;
149
+ skeleton?: boolean | undefined;
102
150
  multiple?: false | undefined;
103
- modelValue?: TValue | undefined;
104
- "onUpdate:modelValue"?: ((value: TValue | TValue[] | undefined) => any) | undefined;
105
- options: import('./types').ListboxOption<TValue>[];
151
+ placeholder?: string | undefined;
152
+ hideLabel?: boolean | undefined;
153
+ requiredMarker?: "required" | "optional" | undefined;
154
+ modelValue?: ListboxOption<TValue> | undefined;
155
+ "onUpdate:modelValue"?: ((value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => any) | undefined;
156
+ options: ListboxOption<TValue>[];
157
+ withCheckAll?: undefined;
158
+ readonly?: boolean | undefined;
106
159
  message?: string | undefined;
160
+ listLabel: string;
161
+ selection?: import('../..').SelectModelValue<TValue> | import('../..').SelectModelValue<TValue>[] | undefined;
162
+ textMode?: "summary" | "preview" | undefined;
107
163
  withSearch: true;
108
164
  searchTerm?: string | undefined;
109
165
  lazyLoading?: import('./types').ListboxLazyLoading | undefined;
110
166
  "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
111
167
  onLazyLoad?: (() => any) | undefined;
112
168
  } | {
169
+ required?: boolean | undefined;
113
170
  label: string;
114
171
  density?: "default" | "compact" | "cozy" | undefined;
172
+ disabled?: boolean | undefined;
115
173
  loading?: boolean | undefined;
174
+ skeleton?: boolean | undefined;
116
175
  multiple?: false | undefined;
117
- modelValue?: TValue | undefined;
118
- "onUpdate:modelValue"?: ((value: TValue | TValue[] | undefined) => any) | undefined;
119
- options: import('./types').ListboxOption<TValue>[];
176
+ placeholder?: string | undefined;
177
+ hideLabel?: boolean | undefined;
178
+ requiredMarker?: "required" | "optional" | undefined;
179
+ modelValue?: ListboxOption<TValue> | undefined;
180
+ "onUpdate:modelValue"?: ((value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => any) | undefined;
181
+ options: ListboxOption<TValue>[];
182
+ withCheckAll?: undefined;
183
+ readonly?: boolean | undefined;
120
184
  message?: string | undefined;
185
+ listLabel: string;
186
+ selection?: import('../..').SelectModelValue<TValue> | import('../..').SelectModelValue<TValue>[] | undefined;
187
+ textMode?: "summary" | "preview" | undefined;
121
188
  withSearch?: false | undefined;
189
+ searchTerm?: undefined;
122
190
  lazyLoading?: import('./types').ListboxLazyLoading | undefined;
123
191
  "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
124
192
  onLazyLoad?: (() => any) | undefined;
125
193
  } | {
194
+ required?: boolean | undefined;
126
195
  label: string;
127
196
  density?: "default" | "compact" | "cozy" | undefined;
197
+ disabled?: boolean | undefined;
128
198
  loading?: boolean | undefined;
199
+ skeleton?: boolean | undefined;
129
200
  multiple: true;
130
- modelValue?: TValue[] | undefined;
131
- "onUpdate:modelValue"?: ((value: TValue | TValue[] | undefined) => any) | undefined;
132
- options: import('./types').ListboxOption<TValue>[];
201
+ placeholder?: string | undefined;
202
+ hideLabel?: boolean | undefined;
203
+ requiredMarker?: "required" | "optional" | undefined;
204
+ modelValue?: ListboxOption<TValue>[] | undefined;
205
+ "onUpdate:modelValue"?: ((value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => any) | undefined;
206
+ options: ListboxOption<TValue>[];
133
207
  withCheckAll?: boolean | {
134
208
  label?: string | undefined;
135
209
  } | undefined;
210
+ readonly?: boolean | undefined;
136
211
  message?: string | undefined;
212
+ listLabel: string;
213
+ selection?: import('../..').SelectModelValue<TValue> | import('../..').SelectModelValue<TValue>[] | undefined;
214
+ textMode?: "summary" | "preview" | undefined;
137
215
  withSearch: true;
138
216
  searchTerm?: string | undefined;
139
217
  lazyLoading?: import('./types').ListboxLazyLoading | undefined;
140
218
  "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
141
219
  onLazyLoad?: (() => any) | undefined;
142
220
  } | {
221
+ required?: boolean | undefined;
143
222
  label: string;
144
223
  density?: "default" | "compact" | "cozy" | undefined;
224
+ disabled?: boolean | undefined;
145
225
  loading?: boolean | undefined;
226
+ skeleton?: boolean | undefined;
146
227
  multiple: true;
147
- modelValue?: TValue[] | undefined;
148
- "onUpdate:modelValue"?: ((value: TValue | TValue[] | undefined) => any) | undefined;
149
- options: import('./types').ListboxOption<TValue>[];
228
+ placeholder?: string | undefined;
229
+ hideLabel?: boolean | undefined;
230
+ requiredMarker?: "required" | "optional" | undefined;
231
+ modelValue?: ListboxOption<TValue>[] | undefined;
232
+ "onUpdate:modelValue"?: ((value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => any) | undefined;
233
+ options: ListboxOption<TValue>[];
150
234
  withCheckAll?: boolean | {
151
235
  label?: string | undefined;
152
236
  } | undefined;
237
+ readonly?: boolean | undefined;
153
238
  message?: string | undefined;
239
+ listLabel: string;
240
+ selection?: import('../..').SelectModelValue<TValue> | import('../..').SelectModelValue<TValue>[] | undefined;
241
+ textMode?: "summary" | "preview" | undefined;
154
242
  withSearch?: false | undefined;
243
+ searchTerm?: undefined;
155
244
  lazyLoading?: import('./types').ListboxLazyLoading | undefined;
156
245
  "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
157
246
  onLazyLoad?: (() => any) | undefined;
@@ -189,68 +278,112 @@ declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(_
189
278
  */
190
279
  optionsEnd?(): unknown;
191
280
  };
192
- emit: ((evt: "update:modelValue", value: TValue | TValue[] | undefined) => void) & ((evt: "update:searchTerm", searchTerm: string) => void) & ((evt: "lazyLoad") => void);
281
+ emit: ((evt: "update:modelValue", value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => void) & ((evt: "update:searchTerm", searchTerm: string) => void) & ((evt: "lazyLoad") => void);
193
282
  }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
194
283
  [key: string]: any;
195
284
  }> & {
196
285
  __ctx?: {
197
286
  props: (({
287
+ required?: boolean | undefined;
198
288
  label: string;
199
289
  density?: "default" | "compact" | "cozy" | undefined;
290
+ disabled?: boolean | undefined;
200
291
  loading?: boolean | undefined;
292
+ skeleton?: boolean | undefined;
201
293
  multiple?: false | undefined;
202
- modelValue?: TValue | undefined;
203
- "onUpdate:modelValue"?: ((value: TValue | TValue[] | undefined) => any) | undefined;
204
- options: import('./types').ListboxOption<TValue>[];
294
+ placeholder?: string | undefined;
295
+ hideLabel?: boolean | undefined;
296
+ requiredMarker?: "required" | "optional" | undefined;
297
+ modelValue?: ListboxOption<TValue> | undefined;
298
+ "onUpdate:modelValue"?: ((value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => any) | undefined;
299
+ options: ListboxOption<TValue>[];
300
+ withCheckAll?: undefined;
301
+ readonly?: boolean | undefined;
205
302
  message?: string | undefined;
303
+ listLabel: string;
304
+ selection?: import('../..').SelectModelValue<TValue> | import('../..').SelectModelValue<TValue>[] | undefined;
305
+ textMode?: "summary" | "preview" | undefined;
206
306
  withSearch: true;
207
307
  searchTerm?: string | undefined;
208
308
  lazyLoading?: import('./types').ListboxLazyLoading | undefined;
209
309
  "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
210
310
  onLazyLoad?: (() => any) | undefined;
211
311
  } | {
312
+ required?: boolean | undefined;
212
313
  label: string;
213
314
  density?: "default" | "compact" | "cozy" | undefined;
315
+ disabled?: boolean | undefined;
214
316
  loading?: boolean | undefined;
317
+ skeleton?: boolean | undefined;
215
318
  multiple?: false | undefined;
216
- modelValue?: TValue | undefined;
217
- "onUpdate:modelValue"?: ((value: TValue | TValue[] | undefined) => any) | undefined;
218
- options: import('./types').ListboxOption<TValue>[];
319
+ placeholder?: string | undefined;
320
+ hideLabel?: boolean | undefined;
321
+ requiredMarker?: "required" | "optional" | undefined;
322
+ modelValue?: ListboxOption<TValue> | undefined;
323
+ "onUpdate:modelValue"?: ((value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => any) | undefined;
324
+ options: ListboxOption<TValue>[];
325
+ withCheckAll?: undefined;
326
+ readonly?: boolean | undefined;
219
327
  message?: string | undefined;
328
+ listLabel: string;
329
+ selection?: import('../..').SelectModelValue<TValue> | import('../..').SelectModelValue<TValue>[] | undefined;
330
+ textMode?: "summary" | "preview" | undefined;
220
331
  withSearch?: false | undefined;
332
+ searchTerm?: undefined;
221
333
  lazyLoading?: import('./types').ListboxLazyLoading | undefined;
222
334
  "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
223
335
  onLazyLoad?: (() => any) | undefined;
224
336
  } | {
337
+ required?: boolean | undefined;
225
338
  label: string;
226
339
  density?: "default" | "compact" | "cozy" | undefined;
340
+ disabled?: boolean | undefined;
227
341
  loading?: boolean | undefined;
342
+ skeleton?: boolean | undefined;
228
343
  multiple: true;
229
- modelValue?: TValue[] | undefined;
230
- "onUpdate:modelValue"?: ((value: TValue | TValue[] | undefined) => any) | undefined;
231
- options: import('./types').ListboxOption<TValue>[];
344
+ placeholder?: string | undefined;
345
+ hideLabel?: boolean | undefined;
346
+ requiredMarker?: "required" | "optional" | undefined;
347
+ modelValue?: ListboxOption<TValue>[] | undefined;
348
+ "onUpdate:modelValue"?: ((value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => any) | undefined;
349
+ options: ListboxOption<TValue>[];
232
350
  withCheckAll?: boolean | {
233
351
  label?: string | undefined;
234
352
  } | undefined;
353
+ readonly?: boolean | undefined;
235
354
  message?: string | undefined;
355
+ listLabel: string;
356
+ selection?: import('../..').SelectModelValue<TValue> | import('../..').SelectModelValue<TValue>[] | undefined;
357
+ textMode?: "summary" | "preview" | undefined;
236
358
  withSearch: true;
237
359
  searchTerm?: string | undefined;
238
360
  lazyLoading?: import('./types').ListboxLazyLoading | undefined;
239
361
  "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
240
362
  onLazyLoad?: (() => any) | undefined;
241
363
  } | {
364
+ required?: boolean | undefined;
242
365
  label: string;
243
366
  density?: "default" | "compact" | "cozy" | undefined;
367
+ disabled?: boolean | undefined;
244
368
  loading?: boolean | undefined;
369
+ skeleton?: boolean | undefined;
245
370
  multiple: true;
246
- modelValue?: TValue[] | undefined;
247
- "onUpdate:modelValue"?: ((value: TValue | TValue[] | undefined) => any) | undefined;
248
- options: import('./types').ListboxOption<TValue>[];
371
+ placeholder?: string | undefined;
372
+ hideLabel?: boolean | undefined;
373
+ requiredMarker?: "required" | "optional" | undefined;
374
+ modelValue?: ListboxOption<TValue>[] | undefined;
375
+ "onUpdate:modelValue"?: ((value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => any) | undefined;
376
+ options: ListboxOption<TValue>[];
249
377
  withCheckAll?: boolean | {
250
378
  label?: string | undefined;
251
379
  } | undefined;
380
+ readonly?: boolean | undefined;
252
381
  message?: string | undefined;
382
+ listLabel: string;
383
+ selection?: import('../..').SelectModelValue<TValue> | import('../..').SelectModelValue<TValue>[] | undefined;
384
+ textMode?: "summary" | "preview" | undefined;
253
385
  withSearch?: false | undefined;
386
+ searchTerm?: undefined;
254
387
  lazyLoading?: import('./types').ListboxLazyLoading | undefined;
255
388
  "onUpdate:searchTerm"?: ((searchTerm: string) => any) | undefined;
256
389
  onLazyLoad?: (() => any) | undefined;
@@ -288,7 +421,7 @@ declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(_
288
421
  */
289
422
  optionsEnd?(): unknown;
290
423
  };
291
- emit: ((evt: "update:modelValue", value: TValue | TValue[] | undefined) => void) & ((evt: "update:searchTerm", searchTerm: string) => void) & ((evt: "lazyLoad") => void);
424
+ emit: ((evt: "update:modelValue", value: ListboxOption<TValue> | ListboxOption<TValue>[] | undefined) => void) & ((evt: "update:searchTerm", searchTerm: string) => void) & ((evt: "lazyLoad") => void);
292
425
  } | undefined;
293
426
  };
294
427
  export default _default;
package/dist/components/OnyxListbox/OnyxMiniSearch.vue.d.ts CHANGED
@@ -1,11 +1,24 @@
1
1
  export type MiniSearchProps = {
2
- modelValue: string;
2
+ /**
3
+ * (Aria) label of the input.
4
+ */
3
5
  label: string;
6
+ /**
7
+ * Current input/search value.
8
+ */
9
+ modelValue?: string;
4
10
  };
5
- declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<MiniSearchProps>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
11
+ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<MiniSearchProps>, {
12
+ /**
13
+ * Focuses the input.
14
+ */
15
+ focus: () => void | undefined;
16
+ }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
6
17
  "update:modelValue": (input: string) => void;
18
+ clear: () => void;
7
19
  }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<MiniSearchProps>>> & {
8
20
  "onUpdate:modelValue"?: ((input: string) => any) | undefined;
21
+ onClear?: (() => any) | undefined;
9
22
  }, {}, {}>;
10
23
  export default _default;
11
24
  type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
package/dist/components/OnyxListbox/types.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  import { DensityProp } from '../../composables/density';
2
2
  import { SelectOption, SelectOptionValue } from '../../types';
3
3
  import { OnyxListboxOptionProps } from '../OnyxListboxOption/types';
4
+ import { OnyxSelectInputProps } from '../OnyxSelectInput/types';
4
5
 
5
6
  export type ListboxSearchProps = {
6
7
  /**
7
8
  * Allows the user to filter the list entries.
9
+ * If enabled, you need to manually filter the options based on the current `searchTerm`.
10
+ * You can use our `normalizedIncludes()` utility function for this.
8
11
  * No support for `lazyLoading` yet.
9
12
  */
10
13
  withSearch: true;
@@ -14,6 +17,7 @@ export type ListboxSearchProps = {
14
17
  searchTerm?: string;
15
18
  } | {
16
19
  withSearch?: false;
20
+ searchTerm?: never;
17
21
  };
18
22
  export type ListboxModelValueProps<TValue extends SelectOptionValue> = {
19
23
  /**
@@ -23,7 +27,8 @@ export type ListboxModelValueProps<TValue extends SelectOptionValue> = {
23
27
  /**
24
28
  * Current value.
25
29
  */
26
- modelValue?: TValue;
30
+ modelValue?: ListboxOption<TValue>;
31
+ withCheckAll?: never;
27
32
  } | {
28
33
  /**
29
34
  * Allows the selection of multiple listbox options
@@ -32,7 +37,7 @@ export type ListboxModelValueProps<TValue extends SelectOptionValue> = {
32
37
  /**
33
38
  * Current value / selected option(s).
34
39
  */
35
- modelValue?: TValue[];
40
+ modelValue?: ListboxOption<TValue>[];
36
41
  /**
37
42
  * If true, a checkbox will be displayed to check/uncheck all options.
38
43
  * Disabled and skeleton checkboxes will be excluded from the check/uncheck behavior.
@@ -47,23 +52,19 @@ export type ListboxModelValueProps<TValue extends SelectOptionValue> = {
47
52
  };
48
53
  };
49
54
  export type ListboxModelValue<TValue extends SelectOptionValue = SelectOptionValue, TMultiple extends boolean = false> = TMultiple extends true ? TValue[] : TValue;
50
- export type OnyxListboxProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & ListboxModelValueProps<TValue> & ListboxSearchProps & {
55
+ export type OnyxListboxProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & ListboxModelValueProps<TValue> & ListboxSearchProps & Omit<OnyxSelectInputProps<TValue>, "density"> & {
51
56
  /**
52
57
  * Aria label. Must be set for accessibility reasons.
53
58
  */
54
59
  label: string;
55
60
  /**
56
- * Available options to choose from.
57
- */
58
- options: ListboxOption<TValue>[];
59
- /**
60
- * Message / help text to display at the bottom.
61
+ * Label describing the selection list, must be set to support assistive technologies.
61
62
  */
62
- message?: string;
63
+ listLabel: string;
63
64
  /**
64
- * Whether to show a loading indicator.
65
+ * Available options to choose from.
65
66
  */
66
- loading?: boolean;
67
+ options: ListboxOption<TValue>[];
67
68
  /**
68
69
  * Lazy loading options. Can be used to load more options on scroll.
69
70
  * If you want to use a button instead, use the `optionsEnd` slot.
package/dist/components/OnyxSelectInput/OnyxSelectInput.vue.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- import { SelectOptionValue } from '../..';
1
+ import { SelectOptionValue } from '../../types';
2
2
 
3
3
  declare const _default: <TValue extends SelectOptionValue>(__VLS_props: (({
4
4
  required?: boolean | undefined;
5
5
  label: string;
6
+ onClick?: (() => any) | undefined;
6
7
  density?: "default" | "compact" | "cozy" | undefined;
7
8
  disabled?: boolean | undefined;
8
9
  loading?: boolean | undefined;
@@ -17,6 +18,7 @@ declare const _default: <TValue extends SelectOptionValue>(__VLS_props: (({
17
18
  } | {
18
19
  required?: boolean | undefined;
19
20
  label: string;
21
+ onClick?: (() => any) | undefined;
20
22
  density?: "default" | "compact" | "cozy" | undefined;
21
23
  disabled?: boolean | undefined;
22
24
  loading?: boolean | undefined;
@@ -31,13 +33,14 @@ declare const _default: <TValue extends SelectOptionValue>(__VLS_props: (({
31
33
  }) & import('vue').VNodeProps) & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, __VLS_ctx?: {
32
34
  attrs: any;
33
35
  slots: {};
34
- emit: any;
36
+ emit: (evt: "click") => void;
35
37
  } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{
36
38
  focus: () => void | undefined;
37
39
  }>) => void) | undefined, __VLS_setup?: Promise<{
38
40
  props: (({
39
41
  required?: boolean | undefined;
40
42
  label: string;
43
+ onClick?: (() => any) | undefined;
41
44
  density?: "default" | "compact" | "cozy" | undefined;
42
45
  disabled?: boolean | undefined;
43
46
  loading?: boolean | undefined;
@@ -52,6 +55,7 @@ declare const _default: <TValue extends SelectOptionValue>(__VLS_props: (({
52
55
  } | {
53
56
  required?: boolean | undefined;
54
57
  label: string;
58
+ onClick?: (() => any) | undefined;
55
59
  density?: "default" | "compact" | "cozy" | undefined;
56
60
  disabled?: boolean | undefined;
57
61
  loading?: boolean | undefined;
@@ -69,7 +73,7 @@ declare const _default: <TValue extends SelectOptionValue>(__VLS_props: (({
69
73
  }>): void;
70
74
  attrs: any;
71
75
  slots: {};
72
- emit: any;
76
+ emit: (evt: "click") => void;
73
77
  }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
74
78
  [key: string]: any;
75
79
  }> & {
@@ -77,6 +81,7 @@ declare const _default: <TValue extends SelectOptionValue>(__VLS_props: (({
77
81
  props: (({
78
82
  required?: boolean | undefined;
79
83
  label: string;
84
+ onClick?: (() => any) | undefined;
80
85
  density?: "default" | "compact" | "cozy" | undefined;
81
86
  disabled?: boolean | undefined;
82
87
  loading?: boolean | undefined;
@@ -91,6 +96,7 @@ declare const _default: <TValue extends SelectOptionValue>(__VLS_props: (({
91
96
  } | {
92
97
  required?: boolean | undefined;
93
98
  label: string;
99
+ onClick?: (() => any) | undefined;
94
100
  density?: "default" | "compact" | "cozy" | undefined;
95
101
  disabled?: boolean | undefined;
96
102
  loading?: boolean | undefined;
@@ -108,7 +114,7 @@ declare const _default: <TValue extends SelectOptionValue>(__VLS_props: (({
108
114
  }>): void;
109
115
  attrs: any;
110
116
  slots: {};
111
- emit: any;
117
+ emit: (evt: "click") => void;
112
118
  } | undefined;
113
119
  };
114
120
  export default _default;
package/dist/components/OnyxSelectInput/types.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- import { RequiredMarkerProp } from '../../composables/required';
1
+ import { ListboxOption } from '../..';
2
2
  import { DensityProp } from '../../composables/density';
3
- import { SelectOption, SelectOptionValue } from '../../types';
3
+ import { RequiredMarkerProp } from '../../composables/required';
4
+ import { SelectOptionValue } from '../../types';
4
5
 
5
6
  export declare const MULTISELECT_TEXT_MODE: readonly ["summary", "preview"];
6
7
  export type MultiselectTextMode = (typeof MULTISELECT_TEXT_MODE)[number];
@@ -24,8 +25,8 @@ export type SelectionInput<TValue extends SelectOptionValue = SelectOptionValue>
24
25
  */
25
26
  textMode?: MultiselectTextMode;
26
27
  };
27
- export type SelectModelValue<TValue extends SelectOptionValue = SelectOptionValue> = Pick<SelectOption<TValue>, "value" | "label">;
28
- export type OnyxSelectProps<TValue extends SelectOptionValue> = DensityProp & RequiredMarkerProp & SelectionInput<TValue> & {
28
+ export type SelectModelValue<TValue extends SelectOptionValue = SelectOptionValue> = Pick<ListboxOption<TValue>, "value" | "label">;
29
+ export type OnyxSelectInputProps<TValue extends SelectOptionValue> = DensityProp & RequiredMarkerProp & SelectionInput<TValue> & {
29
30
  /**
30
31
  * Label to show above the select. Required due to accessibility / screen readers.
31
32
  * If you want to visually hide the label, use the `hideLabel` property.