@skf-design-system/ui-components 1.0.0-beta.5 → 1.0.1-beta.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/components/accordion/accordion-item.d.ts +1 -1
- package/dist/components/accordion/accordion.component.d.ts +4 -4
- package/dist/components/accordion/accordion.component.js +18 -17
- package/dist/components/accordion/accordion.styles.d.ts +1 -2
- package/dist/components/accordion/accordion.styles.js +5 -4
- package/dist/components/alert/alert.component.d.ts +5 -5
- package/dist/components/alert/alert.component.js +46 -35
- package/dist/components/alert/alert.styles.d.ts +1 -2
- package/dist/components/alert/alert.styles.js +29 -24
- package/dist/components/breadcrumb/breadcrumb.component.d.ts +29 -0
- package/dist/components/breadcrumb/breadcrumb.d.ts +8 -0
- package/dist/components/breadcrumb-item/breadcrumb-item.component.d.ts +25 -0
- package/dist/components/breadcrumb-item/breadcrumb-item.d.ts +8 -0
- package/dist/components/button/button.component.d.ts +29 -5
- package/dist/components/button/button.component.js +89 -52
- package/dist/components/button/button.styles.js +65 -45
- package/dist/components/card/card.component.d.ts +4 -4
- package/dist/components/card/card.component.js +35 -24
- package/dist/components/card/card.styles.d.ts +1 -2
- package/dist/components/card/card.styles.js +14 -12
- package/dist/components/checkbox/checkbox.component.d.ts +11 -12
- package/dist/components/checkbox/checkbox.component.js +96 -90
- package/dist/components/collapse/collapse.component.d.ts +8 -8
- package/dist/components/collapse/collapse.component.js +42 -34
- package/dist/components/collapse/collapse.styles.js +15 -14
- package/dist/components/dialog/dialog.component.d.ts +74 -0
- package/dist/components/dialog/dialog.component.js +187 -0
- package/dist/components/dialog/dialog.d.ts +8 -0
- package/dist/components/dialog/dialog.js +6 -0
- package/dist/components/dialog/dialog.styles.d.ts +1 -0
- package/dist/components/dialog/dialog.styles.js +91 -0
- package/dist/components/divider/divider.component.d.ts +3 -3
- package/dist/components/divider/divider.component.js +39 -27
- package/dist/components/divider/divider.styles.d.ts +1 -2
- package/dist/components/divider/divider.styles.js +26 -26
- package/dist/components/heading/heading.component.d.ts +2 -2
- package/dist/components/heading/heading.component.js +13 -13
- package/dist/components/icon/icon.component.d.ts +2 -5
- package/dist/components/icon/icon.component.js +32 -23
- package/dist/components/icon/icon.styles.js +53 -47
- package/dist/components/input/input.component.d.ts +12 -11
- package/dist/components/input/input.component.js +88 -89
- package/dist/components/link/link.component.d.ts +7 -6
- package/dist/components/link/link.component.js +49 -43
- package/dist/components/link/link.styles.js +36 -40
- package/dist/components/loader/loader.component.d.ts +2 -2
- package/dist/components/loader/loader.component.js +39 -32
- package/dist/components/loader/loader.styles.js +11 -10
- package/dist/components/logo/logo.component.d.ts +3 -3
- package/dist/components/logo/logo.component.js +28 -17
- package/dist/components/logo/logo.styles.d.ts +1 -2
- package/dist/components/logo/logo.styles.js +11 -9
- package/dist/components/menu/menu.component.d.ts +24 -0
- package/dist/components/menu/menu.component.js +18 -0
- package/dist/components/menu/menu.d.ts +8 -0
- package/dist/components/menu/menu.js +6 -0
- package/dist/components/menu/menu.styles.d.ts +1 -0
- package/dist/components/menu/menu.styles.js +11 -0
- package/dist/components/menu-item/menu-item.component.d.ts +25 -0
- package/dist/components/menu-item/menu-item.component.js +13 -0
- package/dist/components/menu-item/menu-item.d.ts +8 -0
- package/dist/components/menu-item/menu-item.js +6 -0
- package/dist/components/menu-item/menu-item.styles.d.ts +1 -0
- package/dist/components/menu-item/menu-item.styles.js +19 -0
- package/dist/components/popover/popover.component.d.ts +29 -0
- package/dist/components/popover/popover.component.js +37 -0
- package/dist/components/popover/popover.d.ts +8 -0
- package/dist/components/popover/popover.js +6 -0
- package/dist/components/popover/popover.styles.d.ts +1 -0
- package/dist/components/popover/popover.styles.js +12 -0
- package/dist/components/progress/progress.component.d.ts +22 -0
- package/dist/components/progress/progress.component.js +49 -0
- package/dist/components/progress/progress.d.ts +8 -0
- package/dist/components/progress/progress.js +6 -0
- package/dist/components/progress/progress.styles.d.ts +1 -0
- package/dist/components/progress/progress.styles.js +48 -0
- package/dist/components/radio/radio.component.d.ts +7 -9
- package/dist/components/radio/radio.component.js +95 -79
- package/dist/components/select/select.component.d.ts +10 -12
- package/dist/components/select/select.component.js +120 -120
- package/dist/components/select/select.controllers.d.ts +1 -26
- package/dist/components/select/select.controllers.js +35 -95
- package/dist/components/select-option/select-option.component.d.ts +1 -1
- package/dist/components/select-option/select-option.controllers.d.ts +1 -1
- package/dist/components/select-option-group/select-option-group.component.d.ts +1 -1
- package/dist/components/select-option-group/select-option-group.component.js +9 -9
- package/dist/components/stepper/stepper.component.d.ts +38 -0
- package/dist/components/stepper/stepper.component.js +91 -0
- package/dist/components/stepper/stepper.d.ts +8 -0
- package/dist/components/stepper/stepper.helpers.d.ts +16 -0
- package/dist/components/stepper/stepper.helpers.js +18 -0
- package/dist/components/stepper/stepper.js +6 -0
- package/dist/components/stepper/stepper.styles.d.ts +1 -0
- package/dist/components/stepper/stepper.styles.js +15 -0
- package/dist/components/stepper-item/stepper-item.component.d.ts +47 -0
- package/dist/components/stepper-item/stepper-item.component.js +113 -0
- package/dist/components/stepper-item/stepper-item.d.ts +8 -0
- package/dist/components/stepper-item/stepper-item.js +6 -0
- package/dist/components/stepper-item/stepper-item.styles.d.ts +1 -0
- package/dist/components/stepper-item/stepper-item.styles.js +98 -0
- package/dist/components/switch/switch.component.d.ts +2 -2
- package/dist/components/switch/switch.component.js +17 -7
- package/dist/components/switch/switch.styles.js +16 -13
- package/dist/components/tab/tab.component.d.ts +29 -0
- package/dist/components/tab/tab.component.js +57 -0
- package/dist/components/tab/tab.d.ts +8 -0
- package/dist/components/tab/tab.js +6 -0
- package/dist/components/tab/tab.styles.d.ts +1 -0
- package/dist/components/tab/tab.styles.js +123 -0
- package/dist/components/tab-group/tab-group.component.d.ts +43 -0
- package/dist/components/tab-group/tab-group.component.js +98 -0
- package/dist/components/tab-group/tab-group.d.ts +8 -0
- package/dist/components/tab-group/tab-group.js +6 -0
- package/dist/components/tab-group/tab-group.styles.d.ts +1 -0
- package/dist/components/tab-group/tab-group.styles.js +75 -0
- package/dist/components/tab-panel/tab-panel.component.d.ts +19 -0
- package/dist/components/tab-panel/tab-panel.component.js +36 -0
- package/dist/components/tab-panel/tab-panel.d.ts +8 -0
- package/dist/components/tab-panel/tab-panel.js +6 -0
- package/dist/components/tab-panel/tab-panel.styles.d.ts +1 -0
- package/dist/components/tab-panel/tab-panel.styles.js +13 -0
- package/dist/components/tag/tag.component.d.ts +2 -2
- package/dist/components/tag/tag.component.js +61 -45
- package/dist/components/tag/tag.styles.js +30 -28
- package/dist/components/textarea/textarea.component.d.ts +4 -4
- package/dist/components/textarea/textarea.component.js +2 -2
- package/dist/components/toast/toast.component.d.ts +8 -5
- package/dist/components/toast/toast.component.js +30 -26
- package/dist/components/toast/toast.singleton.d.ts +5 -10
- package/dist/components/toast/toast.singleton.js +25 -25
- package/dist/components/toast/toast.styles.d.ts +1 -0
- package/dist/components/toast-item/toast-item.component.d.ts +1 -1
- package/dist/components/toast-item/toast-item.component.js +15 -15
- package/dist/components/toast-item/toast-item.styles.js +18 -0
- package/dist/components/toast-wrapper/toast-wrapper.component.d.ts +2 -2
- package/dist/components/toast-wrapper/toast-wrapper.component.js +11 -11
- package/dist/components/toast-wrapper/toast-wrapper.styles.d.ts +1 -0
- package/dist/components/tooltip/tooltip.component.d.ts +24 -0
- package/dist/components/tooltip/tooltip.component.js +18 -0
- package/dist/components/tooltip/tooltip.d.ts +8 -0
- package/dist/components/tooltip/tooltip.js +6 -0
- package/dist/components/tooltip/tooltip.styles.d.ts +1 -0
- package/dist/components/tooltip/tooltip.styles.js +12 -0
- package/dist/custom-elements.json +2465 -629
- package/dist/index.d.ts +11 -0
- package/dist/index.js +77 -44
- package/dist/internal/base-classes/popover/popover.base.d.ts +29 -0
- package/dist/internal/base-classes/popover/popover.base.js +116 -0
- package/dist/internal/base-classes/popover/popover.styles.d.ts +1 -0
- package/dist/internal/base-classes/popover/popover.styles.js +29 -0
- package/dist/internal/components/formBase.d.ts +1 -0
- package/dist/internal/components/formBase.js +11 -11
- package/dist/internal/components/hint/hint.component.d.ts +2 -2
- package/dist/internal/components/hint/hint.component.js +13 -13
- package/dist/internal/components/skf-element.js +26 -25
- package/dist/internal/controllers/popover.controller.d.ts +16 -0
- package/dist/internal/controllers/popover.controller.js +44 -0
- package/dist/internal/helpers/hintSeverity.d.ts +2 -2
- package/dist/internal/helpers/watch.d.ts +27 -0
- package/dist/internal/helpers/watch.js +28 -0
- package/dist/internal/templates/asterisk.d.ts +1 -1
- package/dist/internal/templates/asterisk.js +7 -6
- package/dist/react/index.d.ts +13 -0
- package/dist/react/index.js +13 -0
- package/dist/react/skf-breadcrumb/index.d.ts +9 -0
- package/dist/react/skf-breadcrumb/index.js +17 -0
- package/dist/react/skf-breadcrumb-item/index.d.ts +3 -0
- package/dist/react/skf-breadcrumb-item/index.js +13 -0
- package/dist/react/skf-button/index.d.ts +7 -1
- package/dist/react/skf-button/index.js +5 -1
- package/dist/react/skf-dialog/index.d.ts +15 -0
- package/dist/react/skf-dialog/index.js +19 -0
- package/dist/react/skf-menu/index.d.ts +12 -0
- package/dist/react/skf-menu/index.js +18 -0
- package/dist/react/skf-menu-item/index.d.ts +27 -0
- package/dist/react/skf-menu-item/index.js +23 -0
- package/dist/react/skf-popover/index.d.ts +12 -0
- package/dist/react/skf-popover/index.js +18 -0
- package/dist/react/skf-progress/index.d.ts +3 -0
- package/dist/react/skf-progress/index.js +13 -0
- package/dist/react/skf-stepper/index.d.ts +9 -0
- package/dist/react/skf-stepper/index.js +17 -0
- package/dist/react/skf-stepper-item/index.d.ts +9 -0
- package/dist/react/skf-stepper-item/index.js +17 -0
- package/dist/react/skf-tab/index.d.ts +12 -0
- package/dist/react/skf-tab/index.js +18 -0
- package/dist/react/skf-tab-group/index.d.ts +3 -0
- package/dist/react/skf-tab-group/index.js +13 -0
- package/dist/react/skf-tab-panel/index.d.ts +3 -0
- package/dist/react/skf-tab-panel/index.js +13 -0
- package/dist/react/skf-tooltip/index.d.ts +12 -0
- package/dist/react/skf-tooltip/index.js +18 -0
- package/dist/styles/component.styles.js +15 -2
- package/dist/types/jsx/custom-element-jsx.d.ts +603 -27
- package/dist/types/vue/index.d.ts +413 -11
- package/dist/vscode.html-custom-data.json +462 -36
- package/dist/web-types.json +944 -90
- package/package.json +43 -42
- package/dist/components/toast-item/toast-item.style.js +0 -16
- /package/dist/components/{toast/toast.style.d.ts → breadcrumb/breadcrumb.styles.d.ts} +0 -0
- /package/dist/components/{toast-wrapper/toast-wrapper.style.d.ts → breadcrumb-item/breadcrumb-item.styles.d.ts} +0 -0
- /package/dist/components/toast/{toast.style.js → toast.styles.js} +0 -0
- /package/dist/components/toast-item/{toast-item.style.d.ts → toast-item.styles.d.ts} +0 -0
- /package/dist/components/toast-wrapper/{toast-wrapper.style.js → toast-wrapper.styles.js} +0 -0
@@ -2,10 +2,13 @@ import type { DefineComponent } from "vue";
|
|
2
2
|
|
3
3
|
import type { SkfAccordion } from "../../components/accordion/accordion.component.js";
|
4
4
|
import type { SkfAlert } from "../../components/alert/alert.component.js";
|
5
|
+
import type { SkfBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
|
6
|
+
import type { SkfBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
|
5
7
|
import type { SkfButton } from "../../components/button/button.component.js";
|
6
8
|
import type { SkfCard } from "../../components/card/card.component.js";
|
7
9
|
import type { SkfCheckbox } from "../../components/checkbox/checkbox.component.js";
|
8
10
|
import type { SkfCollapse, CustomEvent } from "../../components/collapse/collapse.component.js";
|
11
|
+
import type { SkfDialog } from "../../components/dialog/dialog.component.js";
|
9
12
|
import type { SkfDivider } from "../../components/divider/divider.component.js";
|
10
13
|
import type { SkfHeading } from "../../components/heading/heading.component.js";
|
11
14
|
import type { SkfIcon } from "../../components/icon/icon.component.js";
|
@@ -13,15 +16,25 @@ import type { SkfInput } from "../../components/input/input.component.js";
|
|
13
16
|
import type { SkfLink } from "../../components/link/link.component.js";
|
14
17
|
import type { SkfLoader } from "../../components/loader/loader.component.js";
|
15
18
|
import type { SkfLogo } from "../../components/logo/logo.component.js";
|
19
|
+
import type { SkfMenu } from "../../components/menu/menu.component.js";
|
20
|
+
import type { SkfMenuItem, CustomEvent } from "../../components/menu-item/menu-item.component.js";
|
21
|
+
import type { SkfPopover } from "../../components/popover/popover.component.js";
|
22
|
+
import type { SkfProgress } from "../../components/progress/progress.component.js";
|
16
23
|
import type { SkfRadio } from "../../components/radio/radio.component.js";
|
17
24
|
import type { SkfSelect } from "../../components/select/select.component.js";
|
18
25
|
import type { SkfSelectOption } from "../../components/select-option/select-option.component.js";
|
19
26
|
import type { SkfSelectOptionGroup } from "../../components/select-option-group/select-option-group.component.js";
|
27
|
+
import type { SkfStepper } from "../../components/stepper/stepper.component.js";
|
28
|
+
import type { SkfStepperItem } from "../../components/stepper-item/stepper-item.component.js";
|
20
29
|
import type { SkfSwitch } from "../../components/switch/switch.component.js";
|
30
|
+
import type { SkfTab, CustomEvent } from "../../components/tab/tab.component.js";
|
31
|
+
import type { SkfTabGroup } from "../../components/tab-group/tab-group.component.js";
|
32
|
+
import type { SkfTabPanel } from "../../components/tab-panel/tab-panel.component.js";
|
21
33
|
import type { SkfTag } from "../../components/tag/tag.component.js";
|
22
34
|
import type { SkfTextArea } from "../../components/textarea/textarea.component.js";
|
23
35
|
import type { SkfToast } from "../../components/toast/toast.component.js";
|
24
36
|
import type { SkfToastWrapper } from "../../components/toast-wrapper/toast-wrapper.component.js";
|
37
|
+
import type { SkfTooltip } from "../../components/tooltip/tooltip.component.js";
|
25
38
|
|
26
39
|
type SkfAccordionProps = {
|
27
40
|
/** If true, will animate the expand/collapse state */
|
@@ -39,12 +52,12 @@ type SkfAccordionProps = {
|
|
39
52
|
};
|
40
53
|
|
41
54
|
type SkfAlertProps = {
|
42
|
-
/** If true, alert is being used as a toast (alertdialog) with an close button */
|
43
|
-
closeable?: SkfAlert["closeable"];
|
44
55
|
/** Close button aria-label */
|
45
56
|
"button-label"?: SkfAlert["buttonLabel"];
|
46
57
|
/** If defined, displays leading icon */
|
47
58
|
icon?: SkfAlert["icon"];
|
59
|
+
/** If true, renders with an close button and sets aria-role to `status` */
|
60
|
+
persistent?: SkfAlert["persistent"];
|
48
61
|
/** If defined, gives the supplied appearance */
|
49
62
|
severity?: SkfAlert["severity"];
|
50
63
|
|
@@ -52,6 +65,23 @@ type SkfAlertProps = {
|
|
52
65
|
"onskf-alert-close"?: (e: CustomEvent<never>) => void;
|
53
66
|
};
|
54
67
|
|
68
|
+
type SkfBreadcrumbProps = {
|
69
|
+
/** aria-label for the breadcrumb control */
|
70
|
+
label?: SkfBreadcrumb["label"];
|
71
|
+
/** Displays an alternative size */
|
72
|
+
size?: SkfBreadcrumb["size"];
|
73
|
+
|
74
|
+
/** Fired when the item is clicked */
|
75
|
+
onclick?: (e: CustomEvent<never>) => void;
|
76
|
+
};
|
77
|
+
|
78
|
+
type SkfBreadcrumbItemProps = {
|
79
|
+
/** If defined, loads url on click */
|
80
|
+
href?: SkfBreadcrumbItem["href"];
|
81
|
+
/** If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined. */
|
82
|
+
onClick?: SkfBreadcrumbItem["onClick"];
|
83
|
+
};
|
84
|
+
|
55
85
|
type SkfButtonProps = {
|
56
86
|
/** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
|
57
87
|
destructive?: SkfButton["destructive"];
|
@@ -59,16 +89,23 @@ type SkfButtonProps = {
|
|
59
89
|
disabled?: SkfButton["disabled"];
|
60
90
|
/** If provided, renders an icon before or after the text */
|
61
91
|
icon?: SkfButton["icon"];
|
92
|
+
/** If true, removes border */
|
93
|
+
iconOnly?: SkfButton["iconOnly"];
|
62
94
|
/** If provided, determines the positioning of the icon in relation to the text */
|
63
95
|
"icon-position"?: SkfButton["iconPosition"];
|
64
96
|
/** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
|
65
97
|
loading?: SkfButton["loading"];
|
98
|
+
/** */
|
99
|
+
"no-validate"?: SkfButton["noValidate"];
|
66
100
|
/** If provided, displays an alternative size */
|
67
101
|
size?: SkfButton["size"];
|
68
102
|
/** If provided, changes the button type */
|
69
103
|
type?: SkfButton["type"];
|
70
104
|
/** If provided, alters the appearance */
|
71
105
|
variant?: SkfButton["variant"];
|
106
|
+
|
107
|
+
/** Fires when the button is clicked */
|
108
|
+
onclick?: (e: CustomEvent<never>) => void;
|
72
109
|
};
|
73
110
|
|
74
111
|
type SkfCardProps = {
|
@@ -91,8 +128,6 @@ type SkfCheckboxProps = {
|
|
91
128
|
checked?: SkfCheckbox["checked"];
|
92
129
|
/** If true, forces component to invalid state until removed */
|
93
130
|
"custom-invalid"?: SkfCheckbox["customInvalid"];
|
94
|
-
/** If true, hides the label visually */
|
95
|
-
"hide-label"?: SkfCheckbox["hideLabel"];
|
96
131
|
/** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
|
97
132
|
indeterminate?: SkfCheckbox["indeterminate"];
|
98
133
|
/** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
|
@@ -132,6 +167,33 @@ type SkfCollapseProps = {
|
|
132
167
|
"onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
|
133
168
|
};
|
134
169
|
|
170
|
+
type SkfDialogProps = {
|
171
|
+
/** If defined, sets the aria-label for the close button */
|
172
|
+
"close-button-aria-label"?: SkfDialog["closeButtonAriaLabel"];
|
173
|
+
/** Title for the modal/dialog */
|
174
|
+
heading?: SkfDialog["heading"];
|
175
|
+
/** If true, makes the dialog stretch edge to edge on screen */
|
176
|
+
fullscreen?: SkfDialog["fullscreen"];
|
177
|
+
/** If true, removes the close button */
|
178
|
+
"no-close-button"?: SkfDialog["noCloseButton"];
|
179
|
+
/** If defined, removes the inner padding */
|
180
|
+
"no-padding"?: SkfDialog["noPadding"];
|
181
|
+
/** */
|
182
|
+
open?: SkfDialog["open"];
|
183
|
+
/** If provided, will run function on dialog close */
|
184
|
+
onClose?: SkfDialog["onClose"];
|
185
|
+
/** Method that opens the dialog in modal state */
|
186
|
+
showModal?: SkfDialog["showModal"];
|
187
|
+
/** Method that closes the dialog */
|
188
|
+
close?: SkfDialog["close"];
|
189
|
+
/** Fires when the dialog is opened (after transitioned in) */
|
190
|
+
"onskf-dialog-open"?: (e: CustomEvent<never>) => void;
|
191
|
+
/** Fires when the dialog is closed (before transitioned out) */
|
192
|
+
"onskf-dialog-close"?: (e: CustomEvent<never>) => void;
|
193
|
+
/** Fires when the dialog is closed (after transitioned out) */
|
194
|
+
onclose?: (e: CustomEvent<never>) => void;
|
195
|
+
};
|
196
|
+
|
135
197
|
type SkfDividerProps = {
|
136
198
|
/** Defines the Divider color */
|
137
199
|
color?: SkfDivider["color"];
|
@@ -164,6 +226,8 @@ type SkfInputProps = {
|
|
164
226
|
disabled?: SkfInput["undefined"];
|
165
227
|
/** If true, value is required or must be checked for the form to be submittable */
|
166
228
|
required?: SkfInput["undefined"];
|
229
|
+
/** -m } */
|
230
|
+
autocomplete?: SkfInput["autocomplete"];
|
167
231
|
/** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
|
168
232
|
"button-aria-label-clear"?: SkfInput["buttonAriaLabelClear"];
|
169
233
|
/** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
|
@@ -238,7 +302,7 @@ type SkfLinkProps = {
|
|
238
302
|
icon?: SkfLink["icon"];
|
239
303
|
/** Defines the position of the icon in relation to the text */
|
240
304
|
"icon-placement"?: SkfLink["iconPlacement"];
|
241
|
-
/**
|
305
|
+
/** If defined, describes the relationship between a linked resource and the current document */
|
242
306
|
rel?: SkfLink["rel"];
|
243
307
|
/** If defined, used on conjunction with onClick property, second argument */
|
244
308
|
route?: SkfLink["route"];
|
@@ -268,10 +332,94 @@ type SkfLoaderProps = {
|
|
268
332
|
type SkfLogoProps = {
|
269
333
|
/** Defines the title of the logo */
|
270
334
|
title?: SkfLogo["title"];
|
271
|
-
/**
|
335
|
+
/** Defines the color of the logo */
|
272
336
|
color?: SkfLogo["color"];
|
273
337
|
};
|
274
338
|
|
339
|
+
type SkfMenuProps = {
|
340
|
+
/** The placement of the menu */
|
341
|
+
placement?: SkfMenu["placement"];
|
342
|
+
/** Whether the menu is open */
|
343
|
+
isOpen?: SkfMenu["isOpen"];
|
344
|
+
/** The id of the element the menu will be anchored to */
|
345
|
+
anchor?: SkfMenu["anchor"];
|
346
|
+
/** Fired when the menu is opened */
|
347
|
+
onopen?: (e: CustomEvent<never>) => void;
|
348
|
+
/** Fired when the menu is closed */
|
349
|
+
onclose?: (e: CustomEvent<never>) => void;
|
350
|
+
};
|
351
|
+
|
352
|
+
type SkfMenuItemProps = {
|
353
|
+
/** Defines the semantic element to render */
|
354
|
+
as?: SkfMenuItem["as"];
|
355
|
+
/** Defines the text-color */
|
356
|
+
color?: SkfMenuItem["color"];
|
357
|
+
/** If true, disables the link */
|
358
|
+
disabled?: SkfMenuItem["disabled"];
|
359
|
+
/** If defined, downloads the url */
|
360
|
+
download?: SkfMenuItem["download"];
|
361
|
+
/** If defined, loads url on click */
|
362
|
+
href?: SkfMenuItem["href"];
|
363
|
+
/** If defined, renders an icon before or after the text */
|
364
|
+
icon?: SkfMenuItem["icon"];
|
365
|
+
/** Defines the position of the icon in relation to the text */
|
366
|
+
"icon-placement"?: SkfMenuItem["iconPlacement"];
|
367
|
+
/** If defined, describes the relationship between a linked resource and the current document */
|
368
|
+
rel?: SkfMenuItem["rel"];
|
369
|
+
/** If defined, used on conjunction with onClick property, second argument */
|
370
|
+
route?: SkfMenuItem["route"];
|
371
|
+
/** If true, fills the parents horizontal axis */
|
372
|
+
stretch?: SkfMenuItem["stretch"];
|
373
|
+
/** If defined, specifies where to open the linked document */
|
374
|
+
target?: SkfMenuItem["target"];
|
375
|
+
/** Defines the type of button */
|
376
|
+
type?: SkfMenuItem["type"];
|
377
|
+
/** If provided, custom function triggered by click where the second return parameter enables custom routing. */
|
378
|
+
onClick?: SkfMenuItem["onClick"];
|
379
|
+
/** Fired when something happens */
|
380
|
+
"onmy-tag-my-event"?: (e: CustomEvent<CustomEvent>) => void;
|
381
|
+
/** Fired when the component is clicked */
|
382
|
+
onclick?: (e: CustomEvent<never>) => void;
|
383
|
+
/** Fired when the mouse is over the component */
|
384
|
+
onmouseover?: (e: CustomEvent<never>) => void;
|
385
|
+
/** Fired when the mouse is out of the component */
|
386
|
+
onmouseout?: (e: CustomEvent<never>) => void;
|
387
|
+
/** Fired when the component is focused */
|
388
|
+
onfocus?: (e: CustomEvent<never>) => void;
|
389
|
+
/** Fired when the component is blurred */
|
390
|
+
onblur?: (e: CustomEvent<never>) => void;
|
391
|
+
/** Fired when the component's value changes */
|
392
|
+
onchange?: (e: CustomEvent<never>) => void;
|
393
|
+
};
|
394
|
+
|
395
|
+
type SkfPopoverProps = {
|
396
|
+
/** If defined, sets a custom offset for the popover */
|
397
|
+
offset?: SkfPopover["offset"];
|
398
|
+
/** If true, hides the arrow */
|
399
|
+
hideArrow?: SkfPopover["hideArrow"];
|
400
|
+
/** */
|
401
|
+
arrow?: SkfPopover["arrow"];
|
402
|
+
/** The placement of the menu */
|
403
|
+
placement?: SkfPopover["placement"];
|
404
|
+
/** Whether the menu is open */
|
405
|
+
isOpen?: SkfPopover["isOpen"];
|
406
|
+
/** The id of the element the menu will be anchored to */
|
407
|
+
anchor?: SkfPopover["anchor"];
|
408
|
+
/** Fired when the menu is opened */
|
409
|
+
onopen?: (e: CustomEvent<never>) => void;
|
410
|
+
/** Fired when the menu is closed */
|
411
|
+
onclose?: (e: CustomEvent<never>) => void;
|
412
|
+
};
|
413
|
+
|
414
|
+
type SkfProgressProps = {
|
415
|
+
/** If true, the progress-bar's fill value is animated */
|
416
|
+
animated?: SkfProgress["animated"];
|
417
|
+
/** Describes how much work the task indicated by the progress element requires */
|
418
|
+
max?: SkfProgress["max"];
|
419
|
+
/** Specifies how much of the task that has been completed */
|
420
|
+
value?: SkfProgress["value"];
|
421
|
+
};
|
422
|
+
|
275
423
|
type SkfRadioProps = {
|
276
424
|
/** If true, sets disabled state */
|
277
425
|
disabled?: SkfRadio["undefined"];
|
@@ -283,8 +431,6 @@ type SkfRadioProps = {
|
|
283
431
|
checked?: SkfRadio["checked"];
|
284
432
|
/** If true, forces component to invalid state until removed */
|
285
433
|
"custom-invalid"?: SkfRadio["customInvalid"];
|
286
|
-
/** If true, hides the label visually */
|
287
|
-
"hide-label"?: SkfRadio["hideLabel"];
|
288
434
|
/** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
|
289
435
|
label?: SkfRadio["label"];
|
290
436
|
/** If defined, adds name to the input-element */
|
@@ -385,6 +531,29 @@ type SkfSelectOptionGroupProps = {
|
|
385
531
|
label?: SkfSelectOptionGroup["label"];
|
386
532
|
};
|
387
533
|
|
534
|
+
type SkfStepperProps = {
|
535
|
+
/** Sets the active item */
|
536
|
+
activeIndex?: SkfStepper["activeIndex"];
|
537
|
+
/** If true, sets linear mode (user can't go back to completed steps due to dependencies) */
|
538
|
+
linear?: SkfStepper["linear"];
|
539
|
+
|
540
|
+
/** Dispatched when the stepper item is selected */
|
541
|
+
"onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
|
542
|
+
};
|
543
|
+
|
544
|
+
type SkfStepperItemProps = {
|
545
|
+
/** If defined, gives the supplied appearance */
|
546
|
+
state?: SkfStepperItem["state"];
|
547
|
+
/** If true, item marked as completed */
|
548
|
+
completed?: SkfStepperItem["completed"];
|
549
|
+
/** */
|
550
|
+
_setInternalState?: SkfStepperItem["_setInternalState"];
|
551
|
+
/** */
|
552
|
+
role?: SkfStepperItem["role"];
|
553
|
+
/** Dispatched when the stepper item is selected */
|
554
|
+
"onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
|
555
|
+
};
|
556
|
+
|
388
557
|
type SkfSwitchProps = {
|
389
558
|
/** If true, sets disabled state */
|
390
559
|
disabled?: SkfSwitch["undefined"];
|
@@ -408,6 +577,43 @@ type SkfSwitchProps = {
|
|
408
577
|
value?: SkfSwitch["value"];
|
409
578
|
};
|
410
579
|
|
580
|
+
type SkfTabProps = {
|
581
|
+
/** The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. */
|
582
|
+
panel?: SkfTab["panel"];
|
583
|
+
/** */
|
584
|
+
selected?: SkfTab["selected"];
|
585
|
+
/** */
|
586
|
+
variant?: SkfTab["variant"];
|
587
|
+
/** */
|
588
|
+
role?: SkfTab["role"];
|
589
|
+
/** {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected */
|
590
|
+
"onskf-tab-select"?: (e: CustomEvent<CustomEvent>) => void;
|
591
|
+
/** Fired when the component is clicked */
|
592
|
+
onclick?: (e: CustomEvent<never>) => void;
|
593
|
+
};
|
594
|
+
|
595
|
+
type SkfTabGroupProps = {
|
596
|
+
/** Sets the default selected tab */
|
597
|
+
"default-selected"?: SkfTabGroup["defaultSelected"];
|
598
|
+
/** If true, removes border */
|
599
|
+
"no-border"?: SkfTabGroup["noBorder"];
|
600
|
+
/** If true, removes padding */
|
601
|
+
"no-padding"?: SkfTabGroup["noPadding"];
|
602
|
+
/** If true, component fills the parent element height */
|
603
|
+
stretch?: SkfTabGroup["stretch"];
|
604
|
+
/** Sets the appearance of the tabs */
|
605
|
+
variant?: SkfTabGroup["variant"];
|
606
|
+
};
|
607
|
+
|
608
|
+
type SkfTabPanelProps = {
|
609
|
+
/** The tab panel's name. */
|
610
|
+
name?: SkfTabPanel["name"];
|
611
|
+
/** */
|
612
|
+
active?: SkfTabPanel["active"];
|
613
|
+
/** */
|
614
|
+
role?: SkfTabPanel["role"];
|
615
|
+
};
|
616
|
+
|
411
617
|
type SkfTagProps = {
|
412
618
|
/** Specifies Tag size */
|
413
619
|
size?: SkfTag["size"];
|
@@ -472,11 +678,13 @@ type SkfTextAreaProps = {
|
|
472
678
|
};
|
473
679
|
|
474
680
|
type SkfToastProps = {
|
475
|
-
/** If provided, adds a close button to the toast and will not disapear until user actively dismisses it. */
|
476
|
-
closeable?: SkfToast["closeable"];
|
477
681
|
/** */
|
478
682
|
debug?: SkfToast["debug"];
|
479
|
-
/**
|
683
|
+
/** If defined, displays leading icon */
|
684
|
+
icon?: SkfToast["icon"];
|
685
|
+
/** If true, renders with an close button and sets aria-role to `status` */
|
686
|
+
persistent?: SkfToast["persistent"];
|
687
|
+
/** If defined, gives the supplied appearance */
|
480
688
|
severity?: SkfToast["severity"];
|
481
689
|
/** Time in seconds before the toast disappears. */
|
482
690
|
timer?: SkfToast["timer"];
|
@@ -489,6 +697,21 @@ type SkfToastWrapperProps = {
|
|
489
697
|
debug?: SkfToastWrapper["debug"];
|
490
698
|
};
|
491
699
|
|
700
|
+
type SkfTooltipProps = {
|
701
|
+
/** */
|
702
|
+
offset?: SkfTooltip["offset"];
|
703
|
+
/** The placement of the dropdown */
|
704
|
+
placement?: SkfTooltip["placement"];
|
705
|
+
/** Whether the dropdown is open */
|
706
|
+
isOpen?: SkfTooltip["isOpen"];
|
707
|
+
/** The id of the element the dropdown will be anchored to */
|
708
|
+
anchor?: SkfTooltip["anchor"];
|
709
|
+
/** Fired when the dropdown is opened */
|
710
|
+
onopen?: (e: CustomEvent<never>) => void;
|
711
|
+
/** Fired when the dropdown is closed */
|
712
|
+
onclose?: (e: CustomEvent<never>) => void;
|
713
|
+
};
|
714
|
+
|
492
715
|
export type CustomElements = {
|
493
716
|
/**
|
494
717
|
* The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
|
@@ -516,11 +739,40 @@ export type CustomElements = {
|
|
516
739
|
*/
|
517
740
|
"skf-alert": DefineComponent<SkfAlertProps>;
|
518
741
|
|
742
|
+
/**
|
743
|
+
* The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
|
744
|
+
* ---
|
745
|
+
*
|
746
|
+
*
|
747
|
+
* ### **Events:**
|
748
|
+
* - **click** - Fired when the item is clicked
|
749
|
+
*
|
750
|
+
* ### **Slots:**
|
751
|
+
* - _default_ - One or more `<skf-breadcrumb-item>`
|
752
|
+
*/
|
753
|
+
"skf-breadcrumb": DefineComponent<SkfBreadcrumbProps>;
|
754
|
+
|
755
|
+
/**
|
756
|
+
* The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component
|
757
|
+
* ---
|
758
|
+
*
|
759
|
+
*
|
760
|
+
* ### **Slots:**
|
761
|
+
* - _default_ - Label of the breadcrumb item
|
762
|
+
*/
|
763
|
+
"skf-breadcrumb-item": DefineComponent<SkfBreadcrumbItemProps>;
|
764
|
+
|
519
765
|
/**
|
520
766
|
* Component to be used in forms or for interactivity
|
521
767
|
* ---
|
522
768
|
*
|
523
769
|
*
|
770
|
+
* ### **Events:**
|
771
|
+
* - **click** - Fires when the button is clicked
|
772
|
+
*
|
773
|
+
* ### **Methods:**
|
774
|
+
* - **click()** - Simulates a click on the button.
|
775
|
+
*
|
524
776
|
* ### **Slots:**
|
525
777
|
* - _default_ - The Primary content
|
526
778
|
*/
|
@@ -568,6 +820,26 @@ export type CustomElements = {
|
|
568
820
|
*/
|
569
821
|
"skf-collapse": DefineComponent<SkfCollapseProps>;
|
570
822
|
|
823
|
+
/**
|
824
|
+
* The `<skf-dialog>` is a component that open up a dialog with the content provided
|
825
|
+
* ---
|
826
|
+
*
|
827
|
+
*
|
828
|
+
* ### **Events:**
|
829
|
+
* - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)
|
830
|
+
* - **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)
|
831
|
+
* - **close** - Fires when the dialog is closed (after transitioned out)
|
832
|
+
*
|
833
|
+
* ### **Slots:**
|
834
|
+
* - _default_ - The dialog component's content
|
835
|
+
* - **footer** - The dialog component's buttons goes here
|
836
|
+
*
|
837
|
+
* ### **CSS Properties:**
|
838
|
+
* - **--skf-dialog-height** - A custom height for the Dialog. Pass valid CSS **block-size** values _(default: undefined)_
|
839
|
+
* - **--skf-dialog-width** - A custom width for the Dialog Pass valid CSS **inline-size** values _(default: undefined)_
|
840
|
+
*/
|
841
|
+
"skf-dialog": DefineComponent<SkfDialogProps>;
|
842
|
+
|
571
843
|
/**
|
572
844
|
* The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
|
573
845
|
* ---
|
@@ -638,6 +910,61 @@ export type CustomElements = {
|
|
638
910
|
*/
|
639
911
|
"skf-logo": DefineComponent<SkfLogoProps>;
|
640
912
|
|
913
|
+
/**
|
914
|
+
* The `<skf-menu>` is a component that displays a list of actions or options.
|
915
|
+
* ---
|
916
|
+
*
|
917
|
+
*
|
918
|
+
* ### **Events:**
|
919
|
+
* - **open** - Fired when the menu is opened
|
920
|
+
* - **close** - Fired when the menu is closed
|
921
|
+
*
|
922
|
+
* ### **Slots:**
|
923
|
+
* - _default_ - The menu popover content
|
924
|
+
*/
|
925
|
+
"skf-menu": DefineComponent<SkfMenuProps>;
|
926
|
+
|
927
|
+
/**
|
928
|
+
* The `<skf-menu-item>` is a component that displays a list of actions or options.
|
929
|
+
* ---
|
930
|
+
*
|
931
|
+
*
|
932
|
+
* ### **Events:**
|
933
|
+
* - **my-tag-my-event** - Fired when something happens
|
934
|
+
* - **click** - Fired when the component is clicked
|
935
|
+
* - **mouseover** - Fired when the mouse is over the component
|
936
|
+
* - **mouseout** - Fired when the mouse is out of the component
|
937
|
+
* - **focus** - Fired when the component is focused
|
938
|
+
* - **blur** - Fired when the component is blurred
|
939
|
+
* - **change** - Fired when the component's value changes
|
940
|
+
*
|
941
|
+
* ### **Slots:**
|
942
|
+
* - _default_ - The component's main content
|
943
|
+
* - **my-named-slot** - A named slot of the component
|
944
|
+
*/
|
945
|
+
"skf-menu-item": DefineComponent<SkfMenuItemProps>;
|
946
|
+
|
947
|
+
/**
|
948
|
+
* The `<skf-popover>` is a general purpose component that displays the slot content.
|
949
|
+
* ---
|
950
|
+
*
|
951
|
+
*
|
952
|
+
* ### **Events:**
|
953
|
+
* - **open** - Fired when the menu is opened
|
954
|
+
* - **close** - Fired when the menu is closed
|
955
|
+
*
|
956
|
+
* ### **Slots:**
|
957
|
+
* - _default_ - The popover content
|
958
|
+
*/
|
959
|
+
"skf-popover": DefineComponent<SkfPopoverProps>;
|
960
|
+
|
961
|
+
/**
|
962
|
+
* The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar
|
963
|
+
* ---
|
964
|
+
*
|
965
|
+
*/
|
966
|
+
"skf-progress": DefineComponent<SkfProgressProps>;
|
967
|
+
|
641
968
|
/**
|
642
969
|
* The `<skf-radio>` component is used to create a radio input
|
643
970
|
* ---
|
@@ -692,6 +1019,32 @@ export type CustomElements = {
|
|
692
1019
|
*/
|
693
1020
|
"skf-select-option-group": DefineComponent<SkfSelectOptionGroupProps>;
|
694
1021
|
|
1022
|
+
/**
|
1023
|
+
* The `<skf-stepper>` is a component that displays a list of actions or options.
|
1024
|
+
* ---
|
1025
|
+
*
|
1026
|
+
*
|
1027
|
+
* ### **Events:**
|
1028
|
+
* - **skf-stepper-item-select** - Dispatched when the stepper item is selected
|
1029
|
+
*
|
1030
|
+
* ### **Slots:**
|
1031
|
+
* - _default_ - One or more `<skf-stepper-item>`
|
1032
|
+
*/
|
1033
|
+
"skf-stepper": DefineComponent<SkfStepperProps>;
|
1034
|
+
|
1035
|
+
/**
|
1036
|
+
* The `<skf-stepper-item>` is used in conjunction with the `<skf-stepper>` component
|
1037
|
+
* ---
|
1038
|
+
*
|
1039
|
+
*
|
1040
|
+
* ### **Events:**
|
1041
|
+
* - **skf-stepper-item-select** - Dispatched when the stepper item is selected
|
1042
|
+
*
|
1043
|
+
* ### **Slots:**
|
1044
|
+
* - _default_ - Label of the stepper item
|
1045
|
+
*/
|
1046
|
+
"skf-stepper-item": DefineComponent<SkfStepperItemProps>;
|
1047
|
+
|
695
1048
|
/**
|
696
1049
|
* The `<skf-switch>` is a component that displays a list of actions or options
|
697
1050
|
* ---
|
@@ -702,6 +1055,41 @@ export type CustomElements = {
|
|
702
1055
|
*/
|
703
1056
|
"skf-switch": DefineComponent<SkfSwitchProps>;
|
704
1057
|
|
1058
|
+
/**
|
1059
|
+
* The `<skf-tab>` is a component that displays a list of actions or options
|
1060
|
+
* ---
|
1061
|
+
*
|
1062
|
+
*
|
1063
|
+
* ### **Events:**
|
1064
|
+
* - **skf-tab-select** - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected
|
1065
|
+
* - **click** - Fired when the component is clicked
|
1066
|
+
*
|
1067
|
+
* ### **Slots:**
|
1068
|
+
* - _default_ - The tab's label
|
1069
|
+
*/
|
1070
|
+
"skf-tab": DefineComponent<SkfTabProps>;
|
1071
|
+
|
1072
|
+
/**
|
1073
|
+
* The `<skf-tab-group>` is a component that displays a list of actions or options.
|
1074
|
+
* ---
|
1075
|
+
*
|
1076
|
+
*
|
1077
|
+
* ### **Slots:**
|
1078
|
+
* - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements
|
1079
|
+
* - **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements
|
1080
|
+
*/
|
1081
|
+
"skf-tab-group": DefineComponent<SkfTabGroupProps>;
|
1082
|
+
|
1083
|
+
/**
|
1084
|
+
* The `<skf-tab-panel>` is a component that displays a list of actions or options.
|
1085
|
+
* ---
|
1086
|
+
*
|
1087
|
+
*
|
1088
|
+
* ### **Slots:**
|
1089
|
+
* - _default_ - The tab panel's content
|
1090
|
+
*/
|
1091
|
+
"skf-tab-panel": DefineComponent<SkfTabPanelProps>;
|
1092
|
+
|
705
1093
|
/**
|
706
1094
|
* The `<skf-tag>` is a component that displays a list of actions or options
|
707
1095
|
* ---
|
@@ -745,6 +1133,20 @@ export type CustomElements = {
|
|
745
1133
|
* - _default_ - The alert components that the toast creates will render here.
|
746
1134
|
*/
|
747
1135
|
"skf-toast-wrapper": DefineComponent<SkfToastWrapperProps>;
|
1136
|
+
|
1137
|
+
/**
|
1138
|
+
* The `<skf-tooltip>` is a component that displays a list of actions or options.
|
1139
|
+
* ---
|
1140
|
+
*
|
1141
|
+
*
|
1142
|
+
* ### **Events:**
|
1143
|
+
* - **open** - Fired when the dropdown is opened
|
1144
|
+
* - **close** - Fired when the dropdown is closed
|
1145
|
+
*
|
1146
|
+
* ### **Slots:**
|
1147
|
+
* - _default_ - The tooltip popover content
|
1148
|
+
*/
|
1149
|
+
"skf-tooltip": DefineComponent<SkfTooltipProps>;
|
748
1150
|
};
|
749
1151
|
|
750
1152
|
declare module "vue" {
|