@mozaic-ds/vue 2.7.0 → 2.9.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/dist/mozaic-vue.css +1 -1
- package/dist/mozaic-vue.d.ts +183 -100
- package/dist/mozaic-vue.js +2918 -978
- package/dist/mozaic-vue.js.map +1 -1
- package/dist/mozaic-vue.umd.cjs +5 -1
- package/dist/mozaic-vue.umd.cjs.map +1 -1
- package/package.json +3 -2
- package/src/components/drawer/MDrawer.spec.ts +144 -5
- package/src/components/drawer/MDrawer.vue +94 -40
- package/src/components/drawer/README.md +2 -0
- package/src/components/field/MField.spec.ts +94 -85
- package/src/components/field/MField.stories.ts +16 -0
- package/src/components/field/MField.vue +8 -1
- package/src/components/field/README.md +1 -0
- package/src/components/iconbutton/MIconButton.vue +5 -0
- package/src/components/loader/MLoader.spec.ts +41 -0
- package/src/components/loader/MLoader.vue +7 -1
- package/src/components/loader/README.md +1 -1
- package/src/components/loadingoverlay/MLoadingOverlay.stories.ts +1 -1
- package/src/components/modal/MModal.spec.ts +63 -3
- package/src/components/modal/MModal.vue +50 -8
- package/src/components/modal/README.md +2 -0
- package/src/components/phonenumber/MPhoneNumber.spec.ts +294 -0
- package/src/components/phonenumber/MPhoneNumber.stories.ts +88 -0
- package/src/components/phonenumber/MPhoneNumber.vue +271 -0
- package/src/components/phonenumber/README.md +26 -0
- package/src/components/pincode/README.md +1 -1
- package/src/components/quantityselector/MQuantitySelector.stories.ts +0 -7
- package/src/components/togglegroup/MToggleGroup.vue +0 -2
- package/src/components/togglegroup/README.md +1 -1
- package/src/main.ts +1 -0
package/dist/mozaic-vue.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ import { ComponentOptionsBase } from 'vue';
|
|
|
7
7
|
import { ComponentOptionsMixin } from 'vue';
|
|
8
8
|
import { ComponentProvideOptions } from 'vue';
|
|
9
9
|
import { ComponentPublicInstance } from 'vue';
|
|
10
|
+
import { CountryCode } from 'libphonenumber-js';
|
|
10
11
|
import { DebuggerEvent } from 'vue';
|
|
11
12
|
import { DefineComponent } from 'vue';
|
|
12
13
|
import { GlobalComponents } from 'vue';
|
|
@@ -36,22 +37,23 @@ declare const __VLS_component_11: DefineComponent<__VLS_Props_21, {}, {}, {}, {}
|
|
|
36
37
|
}, string, PublicProps, Readonly<__VLS_Props_21> & Readonly<{
|
|
37
38
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
38
39
|
}>, {
|
|
40
|
+
scroll: boolean;
|
|
39
41
|
closable: boolean;
|
|
40
42
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
41
43
|
|
|
42
44
|
declare const __VLS_component_12: DefineComponent<__VLS_Props_23, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_23> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
43
45
|
|
|
44
|
-
declare const __VLS_component_13: DefineComponent<
|
|
46
|
+
declare const __VLS_component_13: DefineComponent<__VLS_Props_35, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
45
47
|
close: () => any;
|
|
46
|
-
}, string, PublicProps, Readonly<
|
|
48
|
+
}, string, PublicProps, Readonly<__VLS_Props_35> & Readonly<{
|
|
47
49
|
onClose?: (() => any) | undefined;
|
|
48
50
|
}>, {
|
|
49
51
|
status: "info" | "success" | "warning" | "error";
|
|
50
52
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
|
|
51
53
|
|
|
52
|
-
declare const __VLS_component_14: DefineComponent<
|
|
54
|
+
declare const __VLS_component_14: DefineComponent<__VLS_Props_39, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
53
55
|
"update:modelValue": (value: string | number) => any;
|
|
54
|
-
}, string, PublicProps, Readonly<
|
|
56
|
+
}, string, PublicProps, Readonly<__VLS_Props_39> & Readonly<{
|
|
55
57
|
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
|
56
58
|
}>, {
|
|
57
59
|
size: "s" | "m";
|
|
@@ -59,16 +61,16 @@ clearLabel: string;
|
|
|
59
61
|
inputType: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
|
|
60
62
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
61
63
|
|
|
62
|
-
declare const __VLS_component_15: DefineComponent<
|
|
64
|
+
declare const __VLS_component_15: DefineComponent<__VLS_Props_40, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
63
65
|
"update:open": (value: boolean) => any;
|
|
64
|
-
}, string, PublicProps, Readonly<
|
|
66
|
+
}, string, PublicProps, Readonly<__VLS_Props_40> & Readonly<{
|
|
65
67
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
66
68
|
}>, {
|
|
67
69
|
status: "info" | "success" | "warning" | "error";
|
|
68
70
|
closable: boolean;
|
|
69
71
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
|
|
70
72
|
|
|
71
|
-
declare const __VLS_component_16: DefineComponent<
|
|
73
|
+
declare const __VLS_component_16: DefineComponent<__VLS_Props_43, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_43> & Readonly<{}>, {
|
|
72
74
|
position: "top" | "bottom" | "left" | "right";
|
|
73
75
|
pointer: boolean;
|
|
74
76
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
@@ -97,7 +99,9 @@ back: () => any;
|
|
|
97
99
|
}, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{
|
|
98
100
|
onBack?: (() => any) | undefined;
|
|
99
101
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
100
|
-
}>, {
|
|
102
|
+
}>, {
|
|
103
|
+
scroll: boolean;
|
|
104
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {
|
|
101
105
|
titleRef: HTMLHeadingElement;
|
|
102
106
|
}, any>;
|
|
103
107
|
|
|
@@ -167,6 +171,14 @@ declare type __VLS_Props_11 = {
|
|
|
167
171
|
* Title of the content of the drawer.
|
|
168
172
|
*/
|
|
169
173
|
contentTitle?: string;
|
|
174
|
+
/**
|
|
175
|
+
* if `false`, lock the scroll when open.
|
|
176
|
+
*/
|
|
177
|
+
scroll?: boolean;
|
|
178
|
+
/**
|
|
179
|
+
* if `true`, close the drawer when clicking the overlay.
|
|
180
|
+
*/
|
|
181
|
+
closeOnOverlay?: boolean;
|
|
170
182
|
};
|
|
171
183
|
|
|
172
184
|
/**
|
|
@@ -201,6 +213,10 @@ declare type __VLS_Props_12 = {
|
|
|
201
213
|
* If `true`, applies an invalid state to the form field.
|
|
202
214
|
*/
|
|
203
215
|
isInvalid?: boolean;
|
|
216
|
+
/**
|
|
217
|
+
* If `true`, applies a loading state to the form field.
|
|
218
|
+
*/
|
|
219
|
+
isLoading?: boolean;
|
|
204
220
|
/**
|
|
205
221
|
* 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._
|
|
206
222
|
*/
|
|
@@ -358,7 +374,7 @@ declare type __VLS_Props_19 = {
|
|
|
358
374
|
/**
|
|
359
375
|
* Defines the size of the loader.
|
|
360
376
|
*/
|
|
361
|
-
size?: 's' | 'm' | 'l';
|
|
377
|
+
size?: 'xs' | 's' | 'm' | 'l';
|
|
362
378
|
/**
|
|
363
379
|
* Text to display alongside the loader when using the loader inside an `Overlay`.
|
|
364
380
|
*/
|
|
@@ -426,6 +442,14 @@ declare type __VLS_Props_21 = {
|
|
|
426
442
|
* if `true`, display the close button.
|
|
427
443
|
*/
|
|
428
444
|
closable?: boolean;
|
|
445
|
+
/**
|
|
446
|
+
* if `false`, lock the scroll when open.
|
|
447
|
+
*/
|
|
448
|
+
scroll?: boolean;
|
|
449
|
+
/**
|
|
450
|
+
* if `true`, close the modal when clicking the overlay.
|
|
451
|
+
*/
|
|
452
|
+
closeOnOverlay?: boolean;
|
|
429
453
|
};
|
|
430
454
|
|
|
431
455
|
/**
|
|
@@ -540,9 +564,55 @@ declare type __VLS_Props_25 = {
|
|
|
540
564
|
};
|
|
541
565
|
|
|
542
566
|
/**
|
|
543
|
-
* A
|
|
567
|
+
* A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.
|
|
544
568
|
*/
|
|
545
569
|
declare type __VLS_Props_26 = {
|
|
570
|
+
/**
|
|
571
|
+
* A unique identifier for the phone number input element, used to associate the label with the form element.
|
|
572
|
+
*/
|
|
573
|
+
id: string;
|
|
574
|
+
/**
|
|
575
|
+
* The current value of the phone number input field.
|
|
576
|
+
*/
|
|
577
|
+
modelValue?: string;
|
|
578
|
+
/**
|
|
579
|
+
* Default country code for phone number formatting (e.g., 'FR', 'US', 'PT').
|
|
580
|
+
*/
|
|
581
|
+
defaultCountry?: CountryCode;
|
|
582
|
+
/**
|
|
583
|
+
* A placeholder text to show in the phone number input when it is empty.
|
|
584
|
+
*/
|
|
585
|
+
placeholder?: string;
|
|
586
|
+
/**
|
|
587
|
+
* Determines the size of the phone number input.
|
|
588
|
+
*/
|
|
589
|
+
size?: 's' | 'm';
|
|
590
|
+
/**
|
|
591
|
+
* If `true`, applies an invalid state to the password input.
|
|
592
|
+
*/
|
|
593
|
+
isInvalid?: boolean;
|
|
594
|
+
/**
|
|
595
|
+
* If `true`, disables the input, making it non-interactive.
|
|
596
|
+
*/
|
|
597
|
+
disabled?: boolean;
|
|
598
|
+
/**
|
|
599
|
+
* If `true`, the input is read-only (cannot be edited).
|
|
600
|
+
*/
|
|
601
|
+
readonly?: boolean;
|
|
602
|
+
/**
|
|
603
|
+
* If `true`, display the country calling code prefix (+33, +1, etc.).
|
|
604
|
+
*/
|
|
605
|
+
prefix?: boolean;
|
|
606
|
+
/**
|
|
607
|
+
* If `true`, display the country flag selector
|
|
608
|
+
*/
|
|
609
|
+
flag?: boolean;
|
|
610
|
+
};
|
|
611
|
+
|
|
612
|
+
/**
|
|
613
|
+
* A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
|
|
614
|
+
*/
|
|
615
|
+
declare type __VLS_Props_27 = {
|
|
546
616
|
/**
|
|
547
617
|
* A unique identifier for the pincode element, used to associate the label with the form element.
|
|
548
618
|
*/
|
|
@@ -576,7 +646,7 @@ declare type __VLS_Props_26 = {
|
|
|
576
646
|
/**
|
|
577
647
|
* A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.
|
|
578
648
|
*/
|
|
579
|
-
declare type
|
|
649
|
+
declare type __VLS_Props_28 = {
|
|
580
650
|
/**
|
|
581
651
|
* A unique identifier for the quantity selector element, used to associate the label with the form element.
|
|
582
652
|
*/
|
|
@@ -630,7 +700,7 @@ declare type __VLS_Props_27 = {
|
|
|
630
700
|
/**
|
|
631
701
|
* A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
|
|
632
702
|
*/
|
|
633
|
-
declare type
|
|
703
|
+
declare type __VLS_Props_29 = {
|
|
634
704
|
/**
|
|
635
705
|
* A unique identifier for the radio, used to associate the label with the form element.
|
|
636
706
|
*/
|
|
@@ -657,38 +727,6 @@ declare type __VLS_Props_28 = {
|
|
|
657
727
|
disabled?: boolean;
|
|
658
728
|
};
|
|
659
729
|
|
|
660
|
-
/**
|
|
661
|
-
* A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field Group section](/docs/form-elements-field-group--docs#radio-group).
|
|
662
|
-
*/
|
|
663
|
-
declare type __VLS_Props_29 = {
|
|
664
|
-
/**
|
|
665
|
-
* The name attribute for the radio element, typically used for form submission.
|
|
666
|
-
*/
|
|
667
|
-
name: string;
|
|
668
|
-
/**
|
|
669
|
-
* Property used to manage the values checked by v-model
|
|
670
|
-
* (Do not use directly)
|
|
671
|
-
*/
|
|
672
|
-
modelValue?: string;
|
|
673
|
-
/**
|
|
674
|
-
* list of properties of each radio button of the radio group
|
|
675
|
-
*/
|
|
676
|
-
options: Array<{
|
|
677
|
-
id: string;
|
|
678
|
-
label: string;
|
|
679
|
-
value: string;
|
|
680
|
-
disabled?: boolean;
|
|
681
|
-
}>;
|
|
682
|
-
/**
|
|
683
|
-
* If `true`, applies an invalid state to the radio group.
|
|
684
|
-
*/
|
|
685
|
-
isInvalid?: boolean;
|
|
686
|
-
/**
|
|
687
|
-
* If `true`, make the form element of the group inline.
|
|
688
|
-
*/
|
|
689
|
-
inline?: boolean;
|
|
690
|
-
};
|
|
691
|
-
|
|
692
730
|
/**
|
|
693
731
|
* Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.
|
|
694
732
|
*/
|
|
@@ -728,9 +766,41 @@ declare type __VLS_Props_3 = {
|
|
|
728
766
|
};
|
|
729
767
|
|
|
730
768
|
/**
|
|
731
|
-
* A
|
|
769
|
+
* A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field Group section](/docs/form-elements-field-group--docs#radio-group).
|
|
732
770
|
*/
|
|
733
771
|
declare type __VLS_Props_30 = {
|
|
772
|
+
/**
|
|
773
|
+
* The name attribute for the radio element, typically used for form submission.
|
|
774
|
+
*/
|
|
775
|
+
name: string;
|
|
776
|
+
/**
|
|
777
|
+
* Property used to manage the values checked by v-model
|
|
778
|
+
* (Do not use directly)
|
|
779
|
+
*/
|
|
780
|
+
modelValue?: string;
|
|
781
|
+
/**
|
|
782
|
+
* list of properties of each radio button of the radio group
|
|
783
|
+
*/
|
|
784
|
+
options: Array<{
|
|
785
|
+
id: string;
|
|
786
|
+
label: string;
|
|
787
|
+
value: string;
|
|
788
|
+
disabled?: boolean;
|
|
789
|
+
}>;
|
|
790
|
+
/**
|
|
791
|
+
* If `true`, applies an invalid state to the radio group.
|
|
792
|
+
*/
|
|
793
|
+
isInvalid?: boolean;
|
|
794
|
+
/**
|
|
795
|
+
* If `true`, make the form element of the group inline.
|
|
796
|
+
*/
|
|
797
|
+
inline?: boolean;
|
|
798
|
+
};
|
|
799
|
+
|
|
800
|
+
/**
|
|
801
|
+
* A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.
|
|
802
|
+
*/
|
|
803
|
+
declare type __VLS_Props_31 = {
|
|
734
804
|
/**
|
|
735
805
|
* The selected segment index, bound via v-model.
|
|
736
806
|
*/
|
|
@@ -757,7 +827,7 @@ declare type __VLS_Props_30 = {
|
|
|
757
827
|
/**
|
|
758
828
|
* A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#select).
|
|
759
829
|
*/
|
|
760
|
-
declare type
|
|
830
|
+
declare type __VLS_Props_32 = {
|
|
761
831
|
/**
|
|
762
832
|
* A unique identifier for the select, used to associate the label with the form element.
|
|
763
833
|
*/
|
|
@@ -805,7 +875,7 @@ declare type __VLS_Props_31 = {
|
|
|
805
875
|
/**
|
|
806
876
|
* A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.
|
|
807
877
|
*/
|
|
808
|
-
declare type
|
|
878
|
+
declare type __VLS_Props_33 = {
|
|
809
879
|
/**
|
|
810
880
|
* Content of the status badge
|
|
811
881
|
*/
|
|
@@ -819,7 +889,7 @@ declare type __VLS_Props_32 = {
|
|
|
819
889
|
/**
|
|
820
890
|
* A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.
|
|
821
891
|
*/
|
|
822
|
-
declare type
|
|
892
|
+
declare type __VLS_Props_34 = {
|
|
823
893
|
/**
|
|
824
894
|
* Allows to define the status dot type.
|
|
825
895
|
*/
|
|
@@ -833,7 +903,7 @@ declare type __VLS_Props_33 = {
|
|
|
833
903
|
/**
|
|
834
904
|
* A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
|
|
835
905
|
*/
|
|
836
|
-
declare type
|
|
906
|
+
declare type __VLS_Props_35 = {
|
|
837
907
|
/**
|
|
838
908
|
* Title of the status notification.
|
|
839
909
|
*/
|
|
@@ -855,7 +925,7 @@ declare type __VLS_Props_34 = {
|
|
|
855
925
|
/**
|
|
856
926
|
* Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
|
|
857
927
|
*/
|
|
858
|
-
declare type
|
|
928
|
+
declare type __VLS_Props_36 = {
|
|
859
929
|
/**
|
|
860
930
|
* A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
|
|
861
931
|
*/
|
|
@@ -898,7 +968,7 @@ declare type __VLS_Props_35 = {
|
|
|
898
968
|
/**
|
|
899
969
|
* A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).
|
|
900
970
|
*/
|
|
901
|
-
declare type
|
|
971
|
+
declare type __VLS_Props_37 = {
|
|
902
972
|
/**
|
|
903
973
|
* Defines the behavior and layout of the tag.
|
|
904
974
|
*/
|
|
@@ -940,7 +1010,7 @@ declare type __VLS_Props_36 = {
|
|
|
940
1010
|
/**
|
|
941
1011
|
* A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#textarea).
|
|
942
1012
|
*/
|
|
943
|
-
declare type
|
|
1013
|
+
declare type __VLS_Props_38 = {
|
|
944
1014
|
/**
|
|
945
1015
|
* A unique identifier for the textarea, used to associate the label with the form element.
|
|
946
1016
|
*/
|
|
@@ -986,7 +1056,7 @@ declare type __VLS_Props_37 = {
|
|
|
986
1056
|
/**
|
|
987
1057
|
* A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
|
|
988
1058
|
*/
|
|
989
|
-
declare type
|
|
1059
|
+
declare type __VLS_Props_39 = {
|
|
990
1060
|
/**
|
|
991
1061
|
* A unique identifier for the input element, used to associate the label with the form element.
|
|
992
1062
|
*/
|
|
@@ -1033,10 +1103,28 @@ declare type __VLS_Props_38 = {
|
|
|
1033
1103
|
clearLabel?: string;
|
|
1034
1104
|
};
|
|
1035
1105
|
|
|
1106
|
+
/**
|
|
1107
|
+
* A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
|
|
1108
|
+
*/
|
|
1109
|
+
declare type __VLS_Props_4 = {
|
|
1110
|
+
/**
|
|
1111
|
+
* Title of the callout.
|
|
1112
|
+
*/
|
|
1113
|
+
title: string;
|
|
1114
|
+
/**
|
|
1115
|
+
* Description of the callout.
|
|
1116
|
+
*/
|
|
1117
|
+
description: string;
|
|
1118
|
+
/**
|
|
1119
|
+
* Allows to define the callout appearance.
|
|
1120
|
+
*/
|
|
1121
|
+
appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
|
|
1122
|
+
};
|
|
1123
|
+
|
|
1036
1124
|
/**
|
|
1037
1125
|
* A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.
|
|
1038
1126
|
*/
|
|
1039
|
-
declare type
|
|
1127
|
+
declare type __VLS_Props_40 = {
|
|
1040
1128
|
/**
|
|
1041
1129
|
* If `true`, display the Toaster.
|
|
1042
1130
|
*/
|
|
@@ -1067,28 +1155,10 @@ declare type __VLS_Props_39 = {
|
|
|
1067
1155
|
timeout?: number;
|
|
1068
1156
|
};
|
|
1069
1157
|
|
|
1070
|
-
/**
|
|
1071
|
-
* A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
|
|
1072
|
-
*/
|
|
1073
|
-
declare type __VLS_Props_4 = {
|
|
1074
|
-
/**
|
|
1075
|
-
* Title of the callout.
|
|
1076
|
-
*/
|
|
1077
|
-
title: string;
|
|
1078
|
-
/**
|
|
1079
|
-
* Description of the callout.
|
|
1080
|
-
*/
|
|
1081
|
-
description: string;
|
|
1082
|
-
/**
|
|
1083
|
-
* Allows to define the callout appearance.
|
|
1084
|
-
*/
|
|
1085
|
-
appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
|
|
1086
|
-
};
|
|
1087
|
-
|
|
1088
1158
|
/**
|
|
1089
1159
|
* A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.
|
|
1090
1160
|
*/
|
|
1091
|
-
declare type
|
|
1161
|
+
declare type __VLS_Props_41 = {
|
|
1092
1162
|
/**
|
|
1093
1163
|
* A unique identifier for the toggle, used to associate the label with the form element.
|
|
1094
1164
|
*/
|
|
@@ -1118,7 +1188,7 @@ declare type __VLS_Props_40 = {
|
|
|
1118
1188
|
/**
|
|
1119
1189
|
* A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field Group section](/docs/form-elements-field-group--docs#toggle-group).
|
|
1120
1190
|
*/
|
|
1121
|
-
declare type
|
|
1191
|
+
declare type __VLS_Props_42 = {
|
|
1122
1192
|
/**
|
|
1123
1193
|
* The name attribute for the toggle element, typically used for form submission.
|
|
1124
1194
|
*/
|
|
@@ -1136,7 +1206,6 @@ declare type __VLS_Props_41 = {
|
|
|
1136
1206
|
label: string;
|
|
1137
1207
|
value: string;
|
|
1138
1208
|
disabled?: boolean;
|
|
1139
|
-
isInvalid?: boolean;
|
|
1140
1209
|
size?: 's' | 'm';
|
|
1141
1210
|
}>;
|
|
1142
1211
|
/**
|
|
@@ -1148,7 +1217,7 @@ declare type __VLS_Props_41 = {
|
|
|
1148
1217
|
/**
|
|
1149
1218
|
* A tooltip is a small, contextual message that appears when users hover over, focus on, or tap an element, providing additional information or guidance without cluttering the interface. Tooltips are commonly used to explain icons, abbreviations, or complex actions. They typically disappear automatically when the user moves away from the trigger element.
|
|
1150
1219
|
*/
|
|
1151
|
-
declare type
|
|
1220
|
+
declare type __VLS_Props_43 = {
|
|
1152
1221
|
/**
|
|
1153
1222
|
* A unique identifier for the tooltip, used to describe the tooltip.
|
|
1154
1223
|
*/
|
|
@@ -1830,7 +1899,7 @@ value: number;
|
|
|
1830
1899
|
export declare const MLink: __VLS_WithTemplateSlots_10<typeof __VLS_component_10, __VLS_TemplateResult_10["slots"]>;
|
|
1831
1900
|
|
|
1832
1901
|
export declare const MLoader: DefineComponent<__VLS_Props_19, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_19> & Readonly<{}>, {
|
|
1833
|
-
size: "s" | "m" | "l";
|
|
1902
|
+
size: "xs" | "s" | "m" | "l";
|
|
1834
1903
|
appearance: "standard" | "accent" | "inverse";
|
|
1835
1904
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
1836
1905
|
|
|
@@ -1946,17 +2015,31 @@ icon?: VNode;
|
|
|
1946
2015
|
}) | null;
|
|
1947
2016
|
}, any>;
|
|
1948
2017
|
|
|
1949
|
-
export declare const
|
|
2018
|
+
export declare const MPhoneNumber: DefineComponent<__VLS_Props_26, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
1950
2019
|
"update:modelValue": (value: string) => any;
|
|
2020
|
+
valid: (isValid: boolean) => any;
|
|
1951
2021
|
}, string, PublicProps, Readonly<__VLS_Props_26> & Readonly<{
|
|
1952
2022
|
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
2023
|
+
onValid?: ((isValid: boolean) => any) | undefined;
|
|
2024
|
+
}>, {
|
|
2025
|
+
size: "s" | "m";
|
|
2026
|
+
modelValue: string;
|
|
2027
|
+
defaultCountry: CountryCode;
|
|
2028
|
+
prefix: boolean;
|
|
2029
|
+
flag: boolean;
|
|
2030
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
2031
|
+
|
|
2032
|
+
export declare const MPincode: DefineComponent<__VLS_Props_27, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
2033
|
+
"update:modelValue": (value: string) => any;
|
|
2034
|
+
}, string, PublicProps, Readonly<__VLS_Props_27> & Readonly<{
|
|
2035
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
1953
2036
|
}>, {
|
|
1954
2037
|
length: 4 | 5 | 6;
|
|
1955
2038
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
1956
2039
|
|
|
1957
|
-
export declare const MQuantitySelector: DefineComponent<
|
|
2040
|
+
export declare const MQuantitySelector: DefineComponent<__VLS_Props_28, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
1958
2041
|
"update:modelValue": (value: number) => any;
|
|
1959
|
-
}, string, PublicProps, Readonly<
|
|
2042
|
+
}, string, PublicProps, Readonly<__VLS_Props_28> & Readonly<{
|
|
1960
2043
|
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
|
|
1961
2044
|
}>, {
|
|
1962
2045
|
size: "s" | "m";
|
|
@@ -1969,48 +2052,48 @@ incrementlabel: string;
|
|
|
1969
2052
|
decrementLabel: string;
|
|
1970
2053
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
1971
2054
|
|
|
1972
|
-
export declare const MRadio: DefineComponent<
|
|
2055
|
+
export declare const MRadio: DefineComponent<__VLS_Props_29, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
1973
2056
|
"update:modelValue": (value: boolean) => any;
|
|
1974
|
-
}, string, PublicProps, Readonly<
|
|
2057
|
+
}, string, PublicProps, Readonly<__VLS_Props_29> & Readonly<{
|
|
1975
2058
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
1976
2059
|
}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
1977
2060
|
|
|
1978
|
-
export declare const MRadioGroup: DefineComponent<
|
|
2061
|
+
export declare const MRadioGroup: DefineComponent<__VLS_Props_30, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
1979
2062
|
"update:modelValue": (value: string) => any;
|
|
1980
|
-
}, string, PublicProps, Readonly<
|
|
2063
|
+
}, string, PublicProps, Readonly<__VLS_Props_30> & Readonly<{
|
|
1981
2064
|
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
1982
2065
|
}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
1983
2066
|
|
|
1984
|
-
export declare const MSegmentedControl: DefineComponent<
|
|
2067
|
+
export declare const MSegmentedControl: DefineComponent<__VLS_Props_31, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
1985
2068
|
"update:modelValue": (value: number) => any;
|
|
1986
|
-
}, string, PublicProps, Readonly<
|
|
2069
|
+
}, string, PublicProps, Readonly<__VLS_Props_31> & Readonly<{
|
|
1987
2070
|
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
|
|
1988
2071
|
}>, {
|
|
1989
2072
|
size: "s" | "m";
|
|
1990
2073
|
modelValue: number;
|
|
1991
2074
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
1992
2075
|
|
|
1993
|
-
export declare const MSelect: DefineComponent<
|
|
2076
|
+
export declare const MSelect: DefineComponent<__VLS_Props_32, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
1994
2077
|
"update:modelValue": (value: string | number) => any;
|
|
1995
|
-
}, string, PublicProps, Readonly<
|
|
2078
|
+
}, string, PublicProps, Readonly<__VLS_Props_32> & Readonly<{
|
|
1996
2079
|
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
|
1997
2080
|
}>, {
|
|
1998
2081
|
size: "s" | "m";
|
|
1999
2082
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
2000
2083
|
|
|
2001
|
-
export declare const MStatusBadge: DefineComponent<
|
|
2084
|
+
export declare const MStatusBadge: DefineComponent<__VLS_Props_33, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_33> & Readonly<{}>, {
|
|
2002
2085
|
status: "info" | "success" | "warning" | "error" | "neutral";
|
|
2003
2086
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
2004
2087
|
|
|
2005
|
-
export declare const MStatusDot: DefineComponent<
|
|
2088
|
+
export declare const MStatusDot: DefineComponent<__VLS_Props_34, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_34> & Readonly<{}>, {
|
|
2006
2089
|
status: "info" | "success" | "warning" | "error" | "neutral";
|
|
2007
2090
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
|
|
2008
2091
|
|
|
2009
2092
|
export declare const MStatusNotification: __VLS_WithTemplateSlots_13<typeof __VLS_component_13, __VLS_TemplateResult_13["slots"]>;
|
|
2010
2093
|
|
|
2011
|
-
export declare const MTabs: DefineComponent<
|
|
2094
|
+
export declare const MTabs: DefineComponent<__VLS_Props_36, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
2012
2095
|
"update:modelValue": (value: number) => any;
|
|
2013
|
-
}, string, PublicProps, Readonly<
|
|
2096
|
+
}, string, PublicProps, Readonly<__VLS_Props_36> & Readonly<{
|
|
2014
2097
|
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
|
|
2015
2098
|
}>, {
|
|
2016
2099
|
modelValue: number;
|
|
@@ -2019,10 +2102,10 @@ divider: boolean;
|
|
|
2019
2102
|
tab: HTMLButtonElement;
|
|
2020
2103
|
}, HTMLElement>;
|
|
2021
2104
|
|
|
2022
|
-
export declare const MTag: DefineComponent<
|
|
2105
|
+
export declare const MTag: DefineComponent<__VLS_Props_37, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
2023
2106
|
"update:modelValue": (value: boolean) => any;
|
|
2024
2107
|
"remove-tag": (id: string) => any;
|
|
2025
|
-
}, string, PublicProps, Readonly<
|
|
2108
|
+
}, string, PublicProps, Readonly<__VLS_Props_37> & Readonly<{
|
|
2026
2109
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
2027
2110
|
"onRemove-tag"?: ((id: string) => any) | undefined;
|
|
2028
2111
|
}>, {
|
|
@@ -2030,9 +2113,9 @@ type: "informative" | "interactive" | "contextualised" | "removable" | "selectab
|
|
|
2030
2113
|
contextualisedNumber: number;
|
|
2031
2114
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
2032
2115
|
|
|
2033
|
-
export declare const MTextArea: DefineComponent<
|
|
2116
|
+
export declare const MTextArea: DefineComponent<__VLS_Props_38, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
2034
2117
|
"update:modelValue": (value: string | number) => any;
|
|
2035
|
-
}, string, PublicProps, Readonly<
|
|
2118
|
+
}, string, PublicProps, Readonly<__VLS_Props_38> & Readonly<{
|
|
2036
2119
|
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
|
2037
2120
|
}>, {
|
|
2038
2121
|
rows: number;
|
|
@@ -2042,17 +2125,17 @@ export declare const MTextInput: __VLS_WithTemplateSlots_14<typeof __VLS_compone
|
|
|
2042
2125
|
|
|
2043
2126
|
export declare const MToaster: __VLS_WithTemplateSlots_15<typeof __VLS_component_15, __VLS_TemplateResult_15["slots"]>;
|
|
2044
2127
|
|
|
2045
|
-
export declare const MToggle: DefineComponent<
|
|
2128
|
+
export declare const MToggle: DefineComponent<__VLS_Props_41, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
2046
2129
|
"update:modelValue": (value: boolean) => any;
|
|
2047
|
-
}, string, PublicProps, Readonly<
|
|
2130
|
+
}, string, PublicProps, Readonly<__VLS_Props_41> & Readonly<{
|
|
2048
2131
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
2049
2132
|
}>, {
|
|
2050
2133
|
size: "s" | "m";
|
|
2051
2134
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
2052
2135
|
|
|
2053
|
-
export declare const MToggleGroup: DefineComponent<
|
|
2136
|
+
export declare const MToggleGroup: DefineComponent<__VLS_Props_42, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
2054
2137
|
"update:modelValue": (value: string[]) => any;
|
|
2055
|
-
}, string, PublicProps, Readonly<
|
|
2138
|
+
}, string, PublicProps, Readonly<__VLS_Props_42> & Readonly<{
|
|
2056
2139
|
"onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
|
|
2057
2140
|
}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
2058
2141
|
|