@mozaic-ds/vue 1.0.0-beta.3 → 1.0.0-beta.4

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 (179) hide show
  1. package/LICENSE +51 -0
  2. package/README.md +218 -84
  3. package/dist/mozaic-vue.css +1 -1
  4. package/dist/mozaic-vue.d.ts +920 -0
  5. package/dist/mozaic-vue.js +877 -0
  6. package/dist/mozaic-vue.js.map +1 -0
  7. package/dist/mozaic-vue.umd.cjs +2 -0
  8. package/dist/mozaic-vue.umd.cjs.map +1 -0
  9. package/env.d.ts +1 -0
  10. package/package.json +80 -50
  11. package/src/components/Contributing.mdx +118 -0
  12. package/src/components/GettingStarted.mdx +39 -0
  13. package/src/components/Introduction.mdx +54 -0
  14. package/src/components/Support.mdx +18 -0
  15. package/src/components/badge/MBadge.spec.ts +16 -0
  16. package/src/components/badge/MBadge.stories.ts +50 -0
  17. package/src/components/badge/MBadge.vue +36 -34
  18. package/src/components/button/MButton.spec.ts +191 -0
  19. package/src/components/button/MButton.stories.ts +66 -0
  20. package/src/components/button/MButton.vue +98 -154
  21. package/src/components/checkbox/MCheckbox.spec.ts +104 -0
  22. package/src/components/checkbox/MCheckbox.stories.ts +83 -0
  23. package/src/components/checkbox/MCheckbox.vue +60 -101
  24. package/src/components/checkboxgroup/MCheckboxGroup.spec.ts +78 -0
  25. package/src/components/checkboxgroup/MCheckboxGroup.stories.ts +61 -0
  26. package/src/components/checkboxgroup/MCheckboxGroup.vue +97 -0
  27. package/src/components/field/MField.spec.ts +166 -0
  28. package/src/components/field/MField.stories.ts +376 -0
  29. package/src/components/field/MField.vue +78 -61
  30. package/src/components/fieldgroup/MFieldGroup.spec.ts +165 -0
  31. package/src/components/fieldgroup/MFieldGroup.stories.ts +274 -0
  32. package/src/components/fieldgroup/MFieldGroup.vue +79 -0
  33. package/src/components/iconbutton/MIconButton.spec.ts +108 -0
  34. package/src/components/iconbutton/MIconButton.stories.ts +66 -0
  35. package/src/components/iconbutton/MIconButton.vue +73 -0
  36. package/src/components/link/MLink.spec.ts +154 -0
  37. package/src/components/link/MLink.stories.ts +98 -0
  38. package/src/components/link/MLink.vue +86 -109
  39. package/src/components/loader/MLoader.spec.ts +104 -0
  40. package/src/components/loader/MLoader.stories.ts +45 -0
  41. package/src/components/loader/MLoader.vue +65 -55
  42. package/src/components/overlay/MOverlay.spec.ts +51 -0
  43. package/src/components/overlay/MOverlay.stories.ts +40 -0
  44. package/src/components/overlay/MOverlay.vue +27 -19
  45. package/src/components/quantityselector/MQuantitySelector.spec.ts +262 -0
  46. package/src/components/quantityselector/MQuantitySelector.stories.ts +89 -0
  47. package/src/components/quantityselector/MQuantitySelector.vue +160 -136
  48. package/src/components/radio/MRadio.spec.ts +104 -0
  49. package/src/components/radio/MRadio.stories.ts +68 -0
  50. package/src/components/radio/MRadio.vue +56 -39
  51. package/src/components/radiogroup/MRadioGroup.spec.ts +54 -0
  52. package/src/components/radiogroup/MRadioGroup.stories.ts +61 -0
  53. package/src/components/radiogroup/MRadioGroup.vue +79 -0
  54. package/src/components/select/MSelect.spec.ts +114 -0
  55. package/src/components/select/MSelect.stories.ts +101 -0
  56. package/src/components/select/MSelect.vue +77 -119
  57. package/src/components/statusbadge/MStatusBadge.stories.ts +45 -0
  58. package/src/components/statusbadge/MStatusBadge.vue +40 -0
  59. package/src/components/statusbadge/MStatusDot.vue +32 -0
  60. package/src/components/statusbadge/MstatusBadge.spec.ts +16 -0
  61. package/src/components/textarea/MTextArea.spec.ts +112 -0
  62. package/src/components/textarea/MTextArea.stories.ts +67 -0
  63. package/src/components/textarea/MTextArea.vue +81 -42
  64. package/src/components/textinput/MTextInput.spec.ts +121 -0
  65. package/src/components/textinput/MTextInput.stories.ts +114 -0
  66. package/src/components/textinput/MTextInput.vue +127 -47
  67. package/src/components/toggle/MToggle.spec.ts +99 -0
  68. package/src/components/toggle/MToggle.stories.ts +68 -0
  69. package/src/components/toggle/MToggle.vue +63 -103
  70. package/src/components/usingIcons.mdx +43 -0
  71. package/src/components/usingPresets.mdx +125 -0
  72. package/src/main.ts +39 -0
  73. package/dist/demo.html +0 -1
  74. package/dist/mozaic-vue.adeo.css +0 -45
  75. package/dist/mozaic-vue.adeo.umd.js +0 -41775
  76. package/dist/mozaic-vue.common.js +0 -41765
  77. package/dist/mozaic-vue.common.js.map +0 -1
  78. package/dist/mozaic-vue.umd.js +0 -41776
  79. package/dist/mozaic-vue.umd.js.map +0 -1
  80. package/dist/mozaic-vue.umd.min.js +0 -4
  81. package/dist/mozaic-vue.umd.min.js.map +0 -1
  82. package/postinstall.js +0 -3
  83. package/src/components/accordion/MAccordion.vue +0 -128
  84. package/src/components/accordion/index.js +0 -7
  85. package/src/components/autocomplete/MAutocomplete.vue +0 -198
  86. package/src/components/autocomplete/index.js +0 -7
  87. package/src/components/badge/index.js +0 -7
  88. package/src/components/breadcrumb/MBreadcrumb.vue +0 -73
  89. package/src/components/breadcrumb/index.js +0 -7
  90. package/src/components/button/index.js +0 -7
  91. package/src/components/card/MCard.vue +0 -78
  92. package/src/components/card/index.js +0 -7
  93. package/src/components/checkbox/MCheckboxGroup.vue +0 -155
  94. package/src/components/checkbox/index.js +0 -12
  95. package/src/components/container/MContainer.vue +0 -33
  96. package/src/components/container/index.js +0 -7
  97. package/src/components/datatable/MDataTable.vue +0 -651
  98. package/src/components/datatable/MDataTableHeader.vue +0 -55
  99. package/src/components/datatable/MDataTableTop.vue +0 -35
  100. package/src/components/datatable/helpers.js +0 -132
  101. package/src/components/datatable/index.js +0 -12
  102. package/src/components/field/index.js +0 -7
  103. package/src/components/fileuploader/MFileResult.vue +0 -149
  104. package/src/components/fileuploader/MFileUploader.vue +0 -142
  105. package/src/components/fileuploader/index.js +0 -7
  106. package/src/components/flag/MFlag.vue +0 -46
  107. package/src/components/flag/index.js +0 -7
  108. package/src/components/heading/MHeading.vue +0 -75
  109. package/src/components/heading/index.js +0 -7
  110. package/src/components/hero/MHero.vue +0 -93
  111. package/src/components/hero/index.js +0 -7
  112. package/src/components/icon/MIcon.vue +0 -120
  113. package/src/components/icon/index.js +0 -7
  114. package/src/components/index.js +0 -43
  115. package/src/components/layer/MLayer.vue +0 -208
  116. package/src/components/layer/index.js +0 -7
  117. package/src/components/link/index.js +0 -7
  118. package/src/components/listbox/MListBox.vue +0 -106
  119. package/src/components/listbox/index.js +0 -7
  120. package/src/components/loader/index.js +0 -7
  121. package/src/components/modal/MModal.vue +0 -179
  122. package/src/components/modal/index.js +0 -7
  123. package/src/components/notification/MNotification.vue +0 -110
  124. package/src/components/notification/index.js +0 -7
  125. package/src/components/optionbutton/MOptionButton.vue +0 -67
  126. package/src/components/optionbutton/index.js +0 -7
  127. package/src/components/optioncard/MOptionCard.vue +0 -132
  128. package/src/components/optioncard/index.js +0 -7
  129. package/src/components/optiongroup/MOptionGroup.vue +0 -18
  130. package/src/components/optiongroup/index.js +0 -7
  131. package/src/components/overlay/MOverlayLoader.vue +0 -43
  132. package/src/components/overlay/index.js +0 -12
  133. package/src/components/pagination/MPagination.vue +0 -162
  134. package/src/components/pagination/index.js +0 -7
  135. package/src/components/passwordinput/MPasswordInput.vue +0 -96
  136. package/src/components/passwordinput/index.js +0 -7
  137. package/src/components/phonenumber/MPhoneNumber.vue +0 -390
  138. package/src/components/phonenumber/index.js +0 -7
  139. package/src/components/progressbar/MProgress.vue +0 -102
  140. package/src/components/progressbar/index.js +0 -7
  141. package/src/components/quantityselector/index.js +0 -7
  142. package/src/components/radio/MRadioGroup.vue +0 -111
  143. package/src/components/radio/index.js +0 -12
  144. package/src/components/ratingstars/MStarsInput.vue +0 -118
  145. package/src/components/ratingstars/MStarsResult.vue +0 -89
  146. package/src/components/ratingstars/index.js +0 -12
  147. package/src/components/select/index.js +0 -7
  148. package/src/components/stepper/MStepper.vue +0 -70
  149. package/src/components/stepper/index.js +0 -7
  150. package/src/components/tabs/MTab.vue +0 -184
  151. package/src/components/tabs/index.js +0 -7
  152. package/src/components/tags/MTag.vue +0 -173
  153. package/src/components/tags/index.js +0 -7
  154. package/src/components/textarea/index.js +0 -7
  155. package/src/components/textinput/MTextInputField.vue +0 -105
  156. package/src/components/textinput/MTextInputIcon.vue +0 -42
  157. package/src/components/textinput/index.js +0 -7
  158. package/src/components/toggle/index.js +0 -7
  159. package/src/components/tooltip/MTooltip.vue +0 -42
  160. package/src/components/tooltip/index.js +0 -7
  161. package/src/index.js +0 -62
  162. package/src/shims-tsx.d.ts +0 -13
  163. package/src/shims.vue.d.ts +0 -4
  164. package/src/tokens/adeo/android/colors.xml +0 -391
  165. package/src/tokens/adeo/android/font_dimens.xml +0 -18
  166. package/src/tokens/adeo/css/_variables.scss +0 -385
  167. package/src/tokens/adeo/css/root.scss +0 -387
  168. package/src/tokens/adeo/ios/StyleDictionaryColor.h +0 -399
  169. package/src/tokens/adeo/ios/StyleDictionaryColor.m +0 -411
  170. package/src/tokens/adeo/ios/StyleDictionaryColor.swift +0 -394
  171. package/src/tokens/adeo/ios/StyleDictionarySize.h +0 -69
  172. package/src/tokens/adeo/ios/StyleDictionarySize.m +0 -70
  173. package/src/tokens/adeo/ios/StyleDictionarySize.swift +0 -71
  174. package/src/tokens/adeo/js/tokens.js +0 -483
  175. package/src/tokens/adeo/js/tokensObject.js +0 -10354
  176. package/src/tokens/adeo/scss/_tokens.scss +0 -1300
  177. package/src/utils/mozaicClasses.js +0 -16
  178. package/src/utils/theme.validator.js +0 -19
  179. package/types/index.d.ts +0 -100
@@ -0,0 +1,920 @@
1
+ import { ComponentOptionsMixin } from 'vue';
2
+ import { ComponentProvideOptions } from 'vue';
3
+ import { DefineComponent } from 'vue';
4
+ import { PublicProps } from 'vue';
5
+ import { VNode } from 'vue';
6
+
7
+ declare const __VLS_component: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
8
+ appearance: "standard" | "accent" | "danger" | "inverse";
9
+ size: "s" | "m" | "l";
10
+ type: "button" | "reset" | "submit";
11
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
12
+
13
+ declare const __VLS_component_2: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
14
+
15
+ declare const __VLS_component_3: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLFieldSetElement>;
16
+
17
+ declare const __VLS_component_4: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{}>, {
18
+ appearance: "standard" | "accent" | "danger" | "inverse";
19
+ size: "s" | "m" | "l";
20
+ type: "button" | "reset" | "submit";
21
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
22
+
23
+ declare const __VLS_component_5: DefineComponent<__VLS_Props_8, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_8> & Readonly<{}>, {
24
+ appearance: "secondary" | "accent" | "inverse" | "standard";
25
+ size: "s" | "m";
26
+ iconPosition: "left" | "right";
27
+ target: string;
28
+ href: string;
29
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
30
+
31
+ declare const __VLS_component_6: DefineComponent<__VLS_Props_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
32
+
33
+ declare const __VLS_component_7: DefineComponent<__VLS_Props_17, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
34
+ "update:modelValue": (value: string | number) => any;
35
+ }, string, PublicProps, Readonly<__VLS_Props_17> & Readonly<{
36
+ "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
37
+ }>, {
38
+ size: "s" | "m";
39
+ inputType: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
40
+ clearLabel: string;
41
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
42
+
43
+ /**
44
+ * A badge indicates the status of an entity and can evolve at any time.
45
+ */
46
+ declare type __VLS_Props = {
47
+ /**
48
+ * Content of the badge
49
+ */
50
+ label: number;
51
+ /**
52
+ * Allows to define the Badge style
53
+ */
54
+ appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
55
+ /**
56
+ * Allows to define the Badge size
57
+ */
58
+ size?: 's' | 'm';
59
+ };
60
+
61
+ /**
62
+ * An overlay component is a UI element that appears above the main content to display additional information or interactions, often blocking or dimming the background.
63
+ */
64
+ declare type __VLS_Props_10 = {
65
+ /**
66
+ * Controls the visibility of the overlay.
67
+ */
68
+ isVisible?: boolean;
69
+ /**
70
+ * Accessible label for the overlay dialog.
71
+ */
72
+ dialogLabel?: string;
73
+ };
74
+
75
+ /**
76
+ * The quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart for example.
77
+ */
78
+ declare type __VLS_Props_11 = {
79
+ /**
80
+ * A unique identifier for the quantity selector element, used to associate the label with the form element.
81
+ */
82
+ id: string;
83
+ /**
84
+ * The name attribute for the quantity selector element, typically used for form submission.
85
+ */
86
+ name?: string;
87
+ /**
88
+ * The current value of the quantity selector field.
89
+ */
90
+ modelValue?: number;
91
+ /**
92
+ * If `true`, applies an invalid state to the quantity selector.
93
+ */
94
+ isInvalid?: boolean;
95
+ /**
96
+ * If `true`, disables the quantity selector, making it non-interactive.
97
+ */
98
+ disabled?: boolean;
99
+ /**
100
+ * Determines the size of the quantity selector
101
+ */
102
+ size?: 's' | 'm';
103
+ /**
104
+ * Minimum acceptable value for the quantity selector.
105
+ */
106
+ min?: number;
107
+ /**
108
+ * Maximum acceptable value for the quantity selector.
109
+ */
110
+ max?: number;
111
+ /**
112
+ * Determines how much the value will change per click when the quantity is increased or decreased.
113
+ */
114
+ step?: number;
115
+ /**
116
+ * If `true`, the quantity selector is read-only (cannot be edited).
117
+ */
118
+ readonly?: boolean;
119
+ /**
120
+ * The label text for the increment button.
121
+ */
122
+ incrementlabel?: string;
123
+ /**
124
+ * The label text for the decrement button.
125
+ */
126
+ decrementLabel?: string;
127
+ };
128
+
129
+ /**
130
+ * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
131
+ */
132
+ declare type __VLS_Props_12 = {
133
+ /**
134
+ * A unique identifier for the radio, used to associate the label with the form element.
135
+ */
136
+ id: string;
137
+ /**
138
+ * The name attribute for the radio element, typically used for form submission.
139
+ */
140
+ name?: string;
141
+ /**
142
+ * The text label displayed next to the radio.
143
+ */
144
+ label?: string;
145
+ /**
146
+ * The radio's checked state, bound via v-model.
147
+ */
148
+ modelValue?: boolean;
149
+ /**
150
+ * If `true`, applies an invalid state to the radio.
151
+ */
152
+ isInvalid?: boolean;
153
+ /**
154
+ * If `true`, disables the radio, making it non-interactive.
155
+ */
156
+ disabled?: boolean;
157
+ };
158
+
159
+ /**
160
+ * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
161
+ */
162
+ declare type __VLS_Props_13 = {
163
+ /**
164
+ * The name attribute for the radio element, typically used for form submission.
165
+ */
166
+ name: string;
167
+ /**
168
+ * Property used to manage the values checked by v-model
169
+ * (Do not use directly)
170
+ */
171
+ modelValue?: string;
172
+ /**
173
+ * list of properties of each radio button of the radio group
174
+ */
175
+ options: Array<{
176
+ id: string;
177
+ label: string;
178
+ value: string;
179
+ disabled?: boolean;
180
+ }>;
181
+ /**
182
+ * If `true`, applies an invalid state to the radio group.
183
+ */
184
+ isInvalid?: boolean;
185
+ /**
186
+ * If `true`, make the form element of the group inline.
187
+ */
188
+ inline?: boolean;
189
+ };
190
+
191
+ /**
192
+ * A select is a form element for multi-line text input, ideal for longer content like comments or descriptions.
193
+ */
194
+ declare type __VLS_Props_14 = {
195
+ /**
196
+ * A unique identifier for the select, used to associate the label with the form element.
197
+ */
198
+ id: string;
199
+ /**
200
+ * The name attribute for the select element, used for form submission.
201
+ */
202
+ name?: string;
203
+ /**
204
+ * Define the available choices for the select element.
205
+ */
206
+ options: Array<{
207
+ id?: string;
208
+ text: string;
209
+ value: string | number;
210
+ attributes?: Record<string, string | boolean | number>;
211
+ disabled?: boolean;
212
+ }>;
213
+ /**
214
+ * The current value of the select.
215
+ */
216
+ modelValue?: string | number;
217
+ /**
218
+ * Text displayed when the select has no selected value.
219
+ */
220
+ placeholder?: string;
221
+ /**
222
+ * If `true`, the select is marked as invalid.
223
+ */
224
+ isInvalid?: boolean;
225
+ /**
226
+ * If `true`, the select is disabled and non-interactive.
227
+ */
228
+ disabled?: boolean;
229
+ /**
230
+ * Determines the size of the select
231
+ */
232
+ size?: 's' | 'm';
233
+ /**
234
+ * If `true`, the select is read-only (cannot be edited).
235
+ */
236
+ readonly?: boolean;
237
+ };
238
+
239
+ /**
240
+ * A status badge indicates the status of an entity and can evolve at any time.
241
+ */
242
+ declare type __VLS_Props_15 = {
243
+ /**
244
+ * Content of the Status Badge
245
+ */
246
+ label: string;
247
+ /**
248
+ * Allows to define the Status Badge style
249
+ */
250
+ appearance?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
251
+ };
252
+
253
+ /**
254
+ * A textarea is a form element for multi-line text input, ideal for longer content like comments or descriptions.
255
+ */
256
+ declare type __VLS_Props_16 = {
257
+ /**
258
+ * A unique identifier for the textarea, used to associate the label with the form element.
259
+ */
260
+ id: string;
261
+ /**
262
+ * The name attribute for the textarea element, used for form submission.
263
+ */
264
+ name?: string;
265
+ /**
266
+ * The current value of the textarea field.
267
+ */
268
+ modelValue?: string | number;
269
+ /**
270
+ * Text displayed when the textarea is empty.
271
+ */
272
+ placeholder?: string;
273
+ /**
274
+ * If `true`, the textarea is marked as invalid.
275
+ */
276
+ isInvalid?: boolean;
277
+ /**
278
+ * If `true`, the textarea is disabled and non-interactive.
279
+ */
280
+ disabled?: boolean;
281
+ /**
282
+ * The number of visible text lines in the textarea.
283
+ */
284
+ rows?: number;
285
+ /**
286
+ * Minimum number of characters required for the textarea.
287
+ */
288
+ minLength?: number;
289
+ /**
290
+ * Maximum number of characters allowed in the textarea.
291
+ */
292
+ maxLength?: number;
293
+ /**
294
+ * If `true`, the textarea is read-only (cannot be edited).
295
+ */
296
+ readonly?: boolean;
297
+ };
298
+
299
+ /**
300
+ * Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context.
301
+ */
302
+ declare type __VLS_Props_17 = {
303
+ /**
304
+ * A unique identifier for the input element, used to associate the label with the form element.
305
+ */
306
+ id: string;
307
+ /**
308
+ * The name attribute for the input element, typically used for form submission.
309
+ */
310
+ name?: string;
311
+ /**
312
+ * The current value of the input field.
313
+ */
314
+ modelValue?: string | number;
315
+ /**
316
+ * A placeholder text to show in the input when it is empty.
317
+ */
318
+ placeholder?: string;
319
+ /**
320
+ * Defines the type of input
321
+ */
322
+ inputType?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';
323
+ /**
324
+ * If `true`, applies an invalid state to the input.
325
+ */
326
+ isInvalid?: boolean;
327
+ /**
328
+ * If `true`, disables the input, making it non-interactive.
329
+ */
330
+ disabled?: boolean;
331
+ /**
332
+ * Determines the size of the input
333
+ */
334
+ size?: 's' | 'm';
335
+ /**
336
+ * If `true`, the input is read-only (cannot be edited).
337
+ */
338
+ readonly?: boolean;
339
+ /**
340
+ * If `true`, a clear button will appear when the input has a value.
341
+ */
342
+ isClearable?: boolean;
343
+ /**
344
+ * The label text for the clear button
345
+ */
346
+ clearLabel?: string;
347
+ };
348
+
349
+ /**
350
+ * A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.
351
+ */
352
+ declare type __VLS_Props_18 = {
353
+ /**
354
+ * A unique identifier for the toggle, used to associate the label with the form element.
355
+ */
356
+ id: string;
357
+ /**
358
+ * The name attribute for the toggle element, typically used for form submission.
359
+ */
360
+ name?: string;
361
+ /**
362
+ * The text label displayed next to the toggle.
363
+ */
364
+ label?: string;
365
+ /**
366
+ * The toggle's checked state, bound via v-model.
367
+ */
368
+ modelValue?: boolean;
369
+ /**
370
+ * Determines the size of the toggle
371
+ */
372
+ size?: 's' | 'm';
373
+ /**
374
+ * If `true`, disables the toggle, making it non-interactive.
375
+ */
376
+ disabled?: boolean;
377
+ };
378
+
379
+ /**
380
+ * Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.
381
+ */
382
+ declare type __VLS_Props_2 = {
383
+ /**
384
+ * Defines the visual style of the button.
385
+ */
386
+ appearance?: 'standard' | 'accent' | 'danger' | 'inverse';
387
+ /**
388
+ * Determines the size of the button.
389
+ */
390
+ size?: 's' | 'm' | 'l';
391
+ /**
392
+ * If `true`, disables the button, making it non-interactive.
393
+ */
394
+ disabled?: boolean;
395
+ /**
396
+ * If `true`, applies a "ghost" style to the button, typically a transparent background with a border.
397
+ */
398
+ ghost?: boolean;
399
+ /**
400
+ * If `true`, the button gets an outlined style, usually with just the border and no solid background.
401
+ */
402
+ outlined?: boolean;
403
+ /**
404
+ * Controls the positioning of an icon in the button.
405
+ */
406
+ iconPosition?: 'left' | 'right' | 'only';
407
+ /**
408
+ * Specifies the button's HTML `type` attribute.
409
+ */
410
+ type?: 'button' | 'reset' | 'submit';
411
+ /**
412
+ * If `true`, a loading state is displayed.
413
+ */
414
+ isLoading?: boolean;
415
+ };
416
+
417
+ /**
418
+ * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.
419
+ */
420
+ declare type __VLS_Props_3 = {
421
+ /**
422
+ * A unique identifier for the checkbox, used to associate the label with the form element.
423
+ */
424
+ id: string;
425
+ /**
426
+ * The name attribute for the checkbox element, typically used for form submission.
427
+ */
428
+ name?: string;
429
+ /**
430
+ * The text label displayed next to the checkbox.
431
+ */
432
+ label?: string;
433
+ /**
434
+ * The checkbox's checked state, bound via v-model.
435
+ */
436
+ modelValue?: boolean;
437
+ /**
438
+ * Sets the checkbox to an indeterminate state (partially selected).
439
+ */
440
+ indeterminate?: boolean;
441
+ /**
442
+ * If `true`, applies an invalid state to the checkbox.
443
+ */
444
+ isInvalid?: boolean;
445
+ /**
446
+ * If `true`, disables the checkbox, making it non-interactive.
447
+ */
448
+ disabled?: boolean;
449
+ };
450
+
451
+ /**
452
+ * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.
453
+ */
454
+ declare type __VLS_Props_4 = {
455
+ /**
456
+ * The name attribute for the radio element, typically used for form submission.
457
+ */
458
+ name: string;
459
+ /**
460
+ * Property used to manage the values checked by v-model
461
+ * (Do not use directly)
462
+ */
463
+ modelValue?: Array<string>;
464
+ /**
465
+ * list of properties of each radio button of the radio group
466
+ */
467
+ options: Array<{
468
+ id: string;
469
+ label: string;
470
+ value: string;
471
+ disabled?: boolean;
472
+ isInvalid?: boolean;
473
+ }>;
474
+ /**
475
+ * If `true`, make the form element of the group inline.
476
+ */
477
+ inline?: boolean;
478
+ };
479
+
480
+ /**
481
+ * This component creates a structured form field with a label, optional help text, error and validation message handling.
482
+ */
483
+ declare type __VLS_Props_5 = {
484
+ /**
485
+ * A unique identifier for the form field, used to associate the label with the form element.
486
+ */
487
+ id: string;
488
+ /**
489
+ * The text displayed as the label for the form field.
490
+ */
491
+ label: string;
492
+ /**
493
+ * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional
494
+ */
495
+ requirementText?: string;
496
+ /**
497
+ * Text shown below the form field to provide additional context or instructions for the user.
498
+ */
499
+ helpText?: string;
500
+ /**
501
+ * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._
502
+ */
503
+ helpId?: string;
504
+ /**
505
+ * If `true`, applies a valid state to the form field.
506
+ */
507
+ isValid?: boolean;
508
+ /**
509
+ * If `true`, applies an invalid state to the form field.
510
+ */
511
+ isInvalid?: boolean;
512
+ /**
513
+ * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._
514
+ */
515
+ messageId?: string;
516
+ /**
517
+ * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
518
+ */
519
+ message?: string;
520
+ };
521
+
522
+ /**
523
+ * This component creates a structured form field for group field such as Radio Group, Checkbox Group or Toggle Group with a label, optional help text, error and validation message handling.
524
+ */
525
+ declare type __VLS_Props_6 = {
526
+ /**
527
+ * A unique identifier for the form field, used to associate the label with the form element.
528
+ */
529
+ id: string;
530
+ /**
531
+ * The text displayed as the legend for the form fieldset.
532
+ */
533
+ legend: string;
534
+ /**
535
+ * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional
536
+ */
537
+ requirementText?: string;
538
+ /**
539
+ * Text shown below the form field to provide additional context or instructions for the user.
540
+ */
541
+ helpText?: string;
542
+ /**
543
+ * If `true`, applies a valid state to the form field.
544
+ */
545
+ isValid?: boolean;
546
+ /**
547
+ * If `true`, applies an invalid state to the form field.
548
+ */
549
+ isInvalid?: boolean;
550
+ /**
551
+ * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
552
+ */
553
+ message?: string;
554
+ };
555
+
556
+ /**
557
+ * Icon Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.
558
+ */
559
+ declare type __VLS_Props_7 = {
560
+ /**
561
+ * Defines the visual style of the icon button.
562
+ */
563
+ appearance?: 'standard' | 'accent' | 'danger' | 'inverse';
564
+ /**
565
+ * Determines the size of the icon button.
566
+ */
567
+ size?: 's' | 'm' | 'l';
568
+ /**
569
+ * If `true`, disables the icon button, making it non-interactive.
570
+ */
571
+ disabled?: boolean;
572
+ /**
573
+ * If `true`, applies a "ghost" style to the icon button.
574
+ */
575
+ ghost?: boolean;
576
+ /**
577
+ * If `true`, the icon button gets an outlined style.
578
+ */
579
+ outlined?: boolean;
580
+ /**
581
+ * Specifies the button's HTML `type` attribute.
582
+ */
583
+ type?: 'button' | 'reset' | 'submit';
584
+ };
585
+
586
+ /**
587
+ * A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.
588
+ */
589
+ declare type __VLS_Props_8 = {
590
+ /**
591
+ * Position of the icon relative to the text.
592
+ */
593
+ iconPosition?: 'left' | 'right';
594
+ /**
595
+ * Allows to define the link style
596
+ */
597
+ appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';
598
+ /**
599
+ * Allows to define the link size
600
+ */
601
+ size?: 's' | 'm';
602
+ /**
603
+ * URL for the link (for external links or the `to` prop for `router-link`).
604
+ */
605
+ href?: string;
606
+ /**
607
+ * Where to open the link
608
+ */
609
+ target?: string;
610
+ /**
611
+ * Specify wether the link is inline
612
+ */
613
+ inline?: boolean;
614
+ /**
615
+ * If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router).
616
+ */
617
+ router?: boolean;
618
+ };
619
+
620
+ /**
621
+ * A loader indicates that content or data is being loaded or processed, providing visual feedback to users during wait times.
622
+ */
623
+ declare type __VLS_Props_9 = {
624
+ /**
625
+ * Specifies the visual appearance of the loader.
626
+ */
627
+ appearance?: 'standard' | 'accent' | 'inverse';
628
+ /**
629
+ * Defines the size of the loader.
630
+ */
631
+ size?: 's' | 'm' | 'l';
632
+ /**
633
+ * Text to display alongside the loader when using the loader inside an `Overlay`.
634
+ */
635
+ text?: string;
636
+ };
637
+
638
+ declare function __VLS_template(): {
639
+ attrs: Partial<{}>;
640
+ slots: Readonly<{
641
+ /**
642
+ * The content displayed in the button.
643
+ */
644
+ default: string;
645
+ /**
646
+ * Use this slot to insert an icon for the Button
647
+ */
648
+ icon?: VNode;
649
+ }> & {
650
+ /**
651
+ * The content displayed in the button.
652
+ */
653
+ default: string;
654
+ /**
655
+ * Use this slot to insert an icon for the Button
656
+ */
657
+ icon?: VNode;
658
+ };
659
+ refs: {};
660
+ rootEl: HTMLButtonElement;
661
+ };
662
+
663
+ declare function __VLS_template_2(): {
664
+ attrs: Partial<{}>;
665
+ slots: Readonly<{
666
+ /**
667
+ * Use this slot to insert the form element of your choice
668
+ */
669
+ default: VNode;
670
+ }> & {
671
+ /**
672
+ * Use this slot to insert the form element of your choice
673
+ */
674
+ default: VNode;
675
+ };
676
+ refs: {};
677
+ rootEl: HTMLDivElement;
678
+ };
679
+
680
+ declare function __VLS_template_3(): {
681
+ attrs: Partial<{}>;
682
+ slots: Readonly<{
683
+ /**
684
+ * Use this slot to insert the form element of your choice
685
+ */
686
+ default: VNode;
687
+ }> & {
688
+ /**
689
+ * Use this slot to insert the form element of your choice
690
+ */
691
+ default: VNode;
692
+ };
693
+ refs: {};
694
+ rootEl: HTMLFieldSetElement;
695
+ };
696
+
697
+ declare function __VLS_template_4(): {
698
+ attrs: Partial<{}>;
699
+ slots: Readonly<{
700
+ /**
701
+ * Use this slot to insert the form element of your choice
702
+ */
703
+ icon: VNode;
704
+ }> & {
705
+ /**
706
+ * Use this slot to insert the form element of your choice
707
+ */
708
+ icon: VNode;
709
+ };
710
+ refs: {};
711
+ rootEl: HTMLButtonElement;
712
+ };
713
+
714
+ declare function __VLS_template_5(): {
715
+ attrs: Partial<{}>;
716
+ slots: Readonly<{
717
+ /**
718
+ * Use this slot to insert the textual content of the Link
719
+ */
720
+ default: string;
721
+ /**
722
+ * Use this slot to insert an icon for the Link
723
+ */
724
+ icon?: VNode;
725
+ }> & {
726
+ /**
727
+ * Use this slot to insert the textual content of the Link
728
+ */
729
+ default: string;
730
+ /**
731
+ * Use this slot to insert an icon for the Link
732
+ */
733
+ icon?: VNode;
734
+ };
735
+ refs: {};
736
+ rootEl: any;
737
+ };
738
+
739
+ declare function __VLS_template_6(): {
740
+ attrs: Partial<{}>;
741
+ slots: Readonly<{
742
+ /**
743
+ * Use this slot to insert a centered content inside the overlay
744
+ */
745
+ default?: VNode;
746
+ }> & {
747
+ /**
748
+ * Use this slot to insert a centered content inside the overlay
749
+ */
750
+ default?: VNode;
751
+ };
752
+ refs: {};
753
+ rootEl: HTMLDivElement;
754
+ };
755
+
756
+ declare function __VLS_template_7(): {
757
+ attrs: Partial<{}>;
758
+ slots: Readonly<{
759
+ /**
760
+ * Use this slot to insert an icon in the input
761
+ */
762
+ icon?: VNode;
763
+ }> & {
764
+ /**
765
+ * Use this slot to insert an icon in the input
766
+ */
767
+ icon?: VNode;
768
+ };
769
+ refs: {};
770
+ rootEl: HTMLDivElement;
771
+ };
772
+
773
+ declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
774
+
775
+ declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
776
+
777
+ declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
778
+
779
+ declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
780
+
781
+ declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
782
+
783
+ declare type __VLS_TemplateResult_6 = ReturnType<typeof __VLS_template_6>;
784
+
785
+ declare type __VLS_TemplateResult_7 = ReturnType<typeof __VLS_template_7>;
786
+
787
+ declare type __VLS_WithTemplateSlots<T, S> = T & {
788
+ new (): {
789
+ $slots: S;
790
+ };
791
+ };
792
+
793
+ declare type __VLS_WithTemplateSlots_2<T, S> = T & {
794
+ new (): {
795
+ $slots: S;
796
+ };
797
+ };
798
+
799
+ declare type __VLS_WithTemplateSlots_3<T, S> = T & {
800
+ new (): {
801
+ $slots: S;
802
+ };
803
+ };
804
+
805
+ declare type __VLS_WithTemplateSlots_4<T, S> = T & {
806
+ new (): {
807
+ $slots: S;
808
+ };
809
+ };
810
+
811
+ declare type __VLS_WithTemplateSlots_5<T, S> = T & {
812
+ new (): {
813
+ $slots: S;
814
+ };
815
+ };
816
+
817
+ declare type __VLS_WithTemplateSlots_6<T, S> = T & {
818
+ new (): {
819
+ $slots: S;
820
+ };
821
+ };
822
+
823
+ declare type __VLS_WithTemplateSlots_7<T, S> = T & {
824
+ new (): {
825
+ $slots: S;
826
+ };
827
+ };
828
+
829
+ export declare const MBadge: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
830
+ appearance: "danger" | "accent" | "inverse" | "standard";
831
+ size: "s" | "m";
832
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
833
+
834
+ export declare const MButton: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
835
+
836
+ export declare const MCheckbox: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
837
+ "update:modelValue": (value: boolean) => any;
838
+ }, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{
839
+ "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
840
+ }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
841
+
842
+ export declare const MCheckboxGroup: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
843
+ "update:modelValue": (value: string[]) => any;
844
+ }, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{
845
+ "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
846
+ }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
847
+
848
+ export declare const MField: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
849
+
850
+ export declare const MFieldGroup: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
851
+
852
+ export declare const MIconButton: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
853
+
854
+ export declare const MLink: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
855
+
856
+ export declare const MLoader: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_9> & Readonly<{}>, {
857
+ appearance: "standard" | "accent" | "inverse";
858
+ size: "s" | "m" | "l";
859
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
860
+
861
+ export declare const MOverlay: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
862
+
863
+ export declare const MQuantitySelector: DefineComponent<__VLS_Props_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
864
+ "update:modelValue": (value: number) => any;
865
+ }, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{
866
+ "onUpdate:modelValue"?: ((value: number) => any) | undefined;
867
+ }>, {
868
+ size: "s" | "m";
869
+ name: string;
870
+ modelValue: number;
871
+ min: number;
872
+ max: number;
873
+ step: number;
874
+ incrementlabel: string;
875
+ decrementLabel: string;
876
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
877
+
878
+ export declare const MRadio: DefineComponent<__VLS_Props_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
879
+ "update:modelValue": (value: boolean) => any;
880
+ }, string, PublicProps, Readonly<__VLS_Props_12> & Readonly<{
881
+ "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
882
+ }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
883
+
884
+ export declare const MRadioGroup: DefineComponent<__VLS_Props_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
885
+ "update:modelValue": (value: string) => any;
886
+ }, string, PublicProps, Readonly<__VLS_Props_13> & Readonly<{
887
+ "onUpdate:modelValue"?: ((value: string) => any) | undefined;
888
+ }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
889
+
890
+ export declare const MSelect: DefineComponent<__VLS_Props_14, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
891
+ "update:modelValue": (value: string | number) => any;
892
+ }, string, PublicProps, Readonly<__VLS_Props_14> & Readonly<{
893
+ "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
894
+ }>, {
895
+ size: "s" | "m";
896
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSelectElement>;
897
+
898
+ export declare const MStatusBadge: DefineComponent<__VLS_Props_15, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_15> & Readonly<{}>, {
899
+ appearance: "info" | "success" | "warning" | "danger" | "neutral";
900
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
901
+
902
+ export declare const MTextArea: DefineComponent<__VLS_Props_16, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
903
+ "update:modelValue": (value: string | number) => any;
904
+ }, string, PublicProps, Readonly<__VLS_Props_16> & Readonly<{
905
+ "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
906
+ }>, {
907
+ rows: number;
908
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLTextAreaElement>;
909
+
910
+ export declare const MTextInput: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
911
+
912
+ export declare const MToggle: DefineComponent<__VLS_Props_18, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
913
+ "update:modelValue": (value: boolean) => any;
914
+ }, string, PublicProps, Readonly<__VLS_Props_18> & Readonly<{
915
+ "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
916
+ }>, {
917
+ size: "s" | "m";
918
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
919
+
920
+ export { }