import type { DefineComponent } from "vue"; import type { SkfAccordion } from "../../components/accordion/accordion.component.js"; import type { SkfButton } from "../../components/button/button.component.js"; import type { SkfCard } from "../../components/card/card.component.js"; import type { SkfAlert } from "../../components/alert/alert.component.js"; import type { SkfCheckbox } from "../../components/checkbox/checkbox.component.js"; import type { SkfDivider } from "../../components/divider/divider.component.js"; import type { SkfCollapse, CustomEvent } from "../../components/collapse/collapse.component.js"; import type { SkfHeading } from "../../components/heading/heading.component.js"; import type { SkfIcon } from "../../components/icon/icon.component.js"; import type { SkfInput } from "../../components/input/input.component.js"; import type { SkfLink } from "../../components/link/link.component.js"; import type { SkfLoader } from "../../components/loader/loader.component.js"; import type { SkfLogo } from "../../components/logo/logo.component.js"; import type { SkfRadio } from "../../components/radio/radio.component.js"; import type { SkfSelect } from "../../components/select/select.component.js"; import type { SkfSelectOption } from "../../components/select-option/select-option.component.js"; import type { SkfSelectOptionGroup } from "../../components/select-option-group/select-option-group.component.js"; import type { SkfSwitch } from "../../components/switch/switch.component.js"; import type { SkfTag } from "../../components/tag/tag.component.js"; import type { SkfTextArea } from "../../components/textarea/textarea.component.js"; type SkfAccordionProps = { /** If true, will animate the expand/collapse state */ animated?: SkfAccordion["animated"]; /** Defines which heading element will be rendered */ "heading-as"?: SkfAccordion["headingAs"]; /** If true, adds a gap between each item */ gap?: SkfAccordion["gap"]; /** If true, allowes multiple accordion items to open */ multiple?: SkfAccordion["multiple"]; /** If true, renders the small version */ small?: SkfAccordion["small"]; /** If true, will truncate all headings in collapsed state */ truncate?: SkfAccordion["truncate"]; }; type SkfButtonProps = { /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */ destructive?: SkfButton["destructive"]; /** If true, removes border */ disabled?: SkfButton["disabled"]; /** If provided, renders an icon before or after the text */ icon?: SkfButton["icon"]; /** If provided, determines the positioning of the icon in relation to the text */ "icon-position"?: SkfButton["iconPosition"]; /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */ loading?: SkfButton["loading"]; /** If provided, displays an alternative size */ size?: SkfButton["size"]; /** If provided, changes the button type */ type?: SkfButton["type"]; /** If provided, alters the appearance */ variant?: SkfButton["variant"]; }; type SkfCardProps = { /** If true, removes border */ "no-border"?: SkfCard["noBorder"]; /** If true, removes padding */ "no-padding"?: SkfCard["noPadding"]; /** If true, the Card fills the parent element height */ stretch?: SkfCard["stretch"]; }; type SkfAlertProps = { /** If true, alert is being used as a toast (alertdialog) with an close button */ closeable?: SkfAlert["closeable"]; /** Close button aria-label */ "button-label"?: SkfAlert["buttonLabel"]; /** If defined, displays leading icon */ icon?: SkfAlert["icon"]; /** If defined, gives the supplied appearance */ severity?: SkfAlert["severity"]; /** Fires when the close button is clicked */ "onskf-alert-close"?: (e: CustomEvent) => void; }; type SkfCheckboxProps = { /** If true, sets disabled state */ disabled?: SkfCheckbox["undefined"]; /** If true, value is required or must be checked for the form to be submittable */ required?: SkfCheckbox["undefined"]; /** If defined, outputs helping hints in console */ debug?: SkfCheckbox["debug"]; /** If true, outputs helping hints in console */ checked?: SkfCheckbox["checked"]; /** If true, forces component to invalid state until removed */ "custom-invalid"?: SkfCheckbox["customInvalid"]; /** If true, hides the label visually */ "hide-label"?: SkfCheckbox["hideLabel"]; /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */ indeterminate?: SkfCheckbox["indeterminate"]; /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */ label?: SkfCheckbox["label"]; /** If defined, adds name to the input-element */ name?: SkfCheckbox["name"]; /** If defined, renders an alternative A11y text for the asterisk */ "required-label"?: SkfCheckbox["requiredLabel"]; /** If defined, styles checkbox using provided severity */ severity?: SkfCheckbox["severity"]; /** If true, displays valid state after interaction */ "show-valid"?: SkfCheckbox["showValid"]; /** Size of the checkbox */ size?: SkfCheckbox["size"]; /** The current value of the input field */ value?: SkfCheckbox["value"]; /** {object} - When the value of the input changes */ onchange?: (e: CustomEvent) => void; }; type SkfDividerProps = { /** Defines the Divider color */ color?: SkfDivider["color"]; /** If true, renders a div for presentational purpose instead of the semantic hr-element */ decorative?: SkfDivider["decorative"]; /** If true, renders the divider vertically */ vertical?: SkfDivider["vertical"]; }; type SkfCollapseProps = { /** If true, will animate the expand/collapse state */ animated?: SkfCollapse["animated"]; /** If true, will set the collapse to be expanded by default */ expanded?: SkfCollapse["expanded"]; /** Heading for the collapse */ heading?: SkfCollapse["heading"]; /** Defines which heading element will be rendered */ "heading-as"?: SkfCollapse["headingAs"]; /** If true, renders the small version */ small?: SkfCollapse["small"]; /** If true, will truncate the heading in collapsed state */ truncate?: SkfCollapse["truncate"]; /** Event emitted when toggled */ "onskf-collapse-toggle"?: (e: CustomEvent) => void; }; type SkfHeadingProps = { /** Controls which heading element will be rendered. Should not be used to affect appearance */ as?: SkfHeading["as"]; /** If provided, changes the appearance of the heading */ "styled-as"?: SkfHeading["styledAs"]; }; type SkfIconProps = { /** Sets the color of the icon */ color?: SkfIcon["color"]; /** If defined, adds an alternate description to use for assistive devices */ label?: SkfIcon["label"]; /** Name of the icon to display */ name?: SkfIcon["name"]; /** Size of the icon */ size?: SkfIcon["size"]; }; type SkfInputProps = { /** If true, sets disabled state */ disabled?: SkfInput["undefined"]; /** If true, value is required or must be checked for the form to be submittable */ required?: SkfInput["undefined"]; /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */ "button-aria-label-clear"?: SkfInput["buttonAriaLabelClear"]; /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */ "button-aria-label-hide"?: SkfInput["buttonAriaLabelHide"]; /** Custom aria-label for the visibility button **Notice!** Only applicable to type=password. */ "button-aria-label-show"?: SkfInput["buttonAriaLabelShow"]; /** If defined, forces component to invalid state until removed. Its value is used as hint text. */ "custom-invalid"?: SkfInput["customInvalid"]; /** If true, outputs helping hints in console */ debug?: SkfInput["debug"]; /** If true, hides the label visually */ "hide-label"?: SkfInput["hideLabel"]; /** If defined, displays informational text below the field */ hint?: SkfInput["hint"]; /** Tells what keyboard to use if applicable */ inputmode?: SkfInput["inputmode"]; /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */ label?: SkfInput["label"]; /** If defined, displays a prefix/adornment before the input-element */ leading?: SkfInput["leading"]; /** If defined, sets the maximum value to accept for this input */ max?: SkfInput["max"]; /** If defined, sets the maximum character length to accept for this input */ maxlength?: SkfInput["maxLength"]; /** If defined, sets the minimum value to accept for this input */ min?: SkfInput["min"]; /** If defined, sets the minimum character length to accept for this input */ minlength?: SkfInput["minLength"]; /** If defined, adds name to the input-element */ name?: SkfInput["name"]; /** If defined, adds name to the input-element */ pattern?: SkfInput["pattern"]; /** If defined, displays placeholder text */ placeholder?: SkfInput["placeholder"]; /** If true, makes the element not mutable, meaning the user can not edit the control */ readonly?: SkfInput["readonly"]; /** If defined, renders an alternative A11y text for the asterisk */ "required-label"?: SkfInput["requiredLabel"]; /** If defined, displays provided severity state */ severity?: SkfInput["severity"]; /** If true, displays valid state after interaction */ "show-valid"?: SkfInput["showValid"]; /** Size of the input */ size?: SkfInput["size"]; /** If defined, displays a suffix/adornment after the input-element */ trailing?: SkfInput["trailing"]; /** Type of input control */ type?: SkfInput["type"]; /** Sets validation start */ "validate-on"?: SkfInput["validateOn"]; /** The current value of the input field */ value?: SkfInput["value"]; /** Fires when the value of the input changes */ onchange?: (e: CustomEvent) => void; /** Fires when the input is invalid */ oninvalid?: (e: CustomEvent) => void; }; type SkfLinkProps = { /** Defines the semantic element to render */ as?: SkfLink["as"]; /** Defines the text-color */ color?: SkfLink["color"]; /** If true, disables the link */ disabled?: SkfLink["disabled"]; /** If defined, downloads the url */ download?: SkfLink["download"]; /** If defined, loads url on click */ href?: SkfLink["href"]; /** If defined, renders an icon before or after the text */ icon?: SkfLink["icon"]; /** Defines the position of the icon in relation to the text */ "icon-placement"?: SkfLink["iconPlacement"]; /** Defines the relationship of the target object to the link object */ rel?: SkfLink["rel"]; /** If defined, used on conjunction with onClick property, second argument */ route?: SkfLink["route"]; /** If true, fills the parents horizontal axis */ stretch?: SkfLink["stretch"]; /** If defined, specifies where to open the linked document */ target?: SkfLink["target"]; /** Defines the type of button */ type?: SkfLink["type"]; /** If provided, custom function triggered by click where the second return parameter enables custom routing. */ onClick?: SkfLink["onClick"]; }; type SkfLoaderProps = { /** Defines the aria-label */ "aria-label"?: SkfLoader["ariaLabel"]; /** If true, inverts the color (to be used on colored backgrounds) */ invert?: SkfLoader["invert"]; /** Defines the size of the loader */ size?: SkfLoader["size"]; /** */ role?: SkfLoader["role"]; /** */ ariaLive?: SkfLoader["ariaLive"]; }; type SkfLogoProps = { /** Defines the title of the logo */ title?: SkfLogo["title"]; /** If defined, sets color of the logo */ color?: SkfLogo["color"]; }; type SkfRadioProps = { /** If true, sets disabled state */ disabled?: SkfRadio["undefined"]; /** If true, value is required or must be checked for the form to be submittable */ required?: SkfRadio["undefined"]; /** If true, outputs helping hints in console */ debug?: SkfRadio["debug"]; /** If true, outputs helping hints in console */ checked?: SkfRadio["checked"]; /** If true, forces component to invalid state until removed */ "custom-invalid"?: SkfRadio["customInvalid"]; /** If true, hides the label visually */ "hide-label"?: SkfRadio["hideLabel"]; /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */ label?: SkfRadio["label"]; /** If defined, adds name to the input-element */ name?: SkfRadio["name"]; /** If defined, renders an alternative A11y text for the asterisk */ "required-label"?: SkfRadio["requiredLabel"]; /** Size of the Radio */ size?: SkfRadio["size"]; /** If defined, displays provided severity state */ severity?: SkfRadio["severity"]; /** If true, displays valid state after interaction */ "show-valid"?: SkfRadio["showValid"]; /** The current value of the input field */ value?: SkfRadio["value"]; /** {object} - When the value of the input changes */ onchange?: (e: CustomEvent) => void; }; type SkfSelectProps = { /** If true, the select is disabled `default: false` */ disabled?: SkfSelect["undefined"]; /** Sets the first visible text on the component */ "button-label"?: SkfSelect["buttonLabel"]; /** If defined, forces component to invalid state until removed */ "custom-invalid"?: SkfSelect["customInvalid"]; /** If true, hides the label visually */ "hide-label"?: SkfSelect["hideLabel"]; /** If true and mulltiple is true, no tags are displayed under the select */ "hide-tags"?: SkfSelect["hideTags"]; /** If defined, sets the hint text under the select component in the form */ hint?: SkfSelect["hint"]; /** If defined, displays provided label */ label?: SkfSelect["label"]; /** If defined, limits the number of selectable options */ max?: SkfSelect["max"]; /** If defined, sets the minimum number of required options */ min?: SkfSelect["min"]; /** If true, allows for multiple options to be selected */ multiple?: SkfSelect["multiple"]; /** If defined, set name of the component */ name?: SkfSelect["name"]; /** If defined, renders an alternative A11y text for the asterisk */ "required-label"?: SkfSelect["requiredLabel"]; /** If defined, displays provided severity state */ severity?: SkfSelect["severity"]; /** If true, displays valid state after interaction */ "show-valid"?: SkfSelect["showValid"]; /** Size of the Select */ size?: SkfSelect["size"]; /** A readonly property that returns the selected value(s) in a array */ getSelectedValues?: SkfSelect["getSelectedValues"]; /** A readonly property that returns the selected slot(s) text content in a array */ getSelectedOptionsText?: SkfSelect["getSelectedOptionsText"]; /** Read only, returns the selected value. (if multiple: in a comma separated string) */ value?: SkfSelect["value"]; /** */ _selectedOptions?: SkfSelect["_selectedOptions"]; /** Fired when the selected option(s) changes */ onchange?: (e: CustomEvent) => void; /** Fired when the select is invalid */ oninvalid?: (e: CustomEvent) => void; /** Fired when the form is reset */ onreset?: (e: CustomEvent) => void; /** {detail: {expanded: boolean}} Fired when the select dropdown is toggled */ "onskf-select:dropdown"?: (e: CustomEvent) => void; /** {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled */ "onskf-select-option:select"?: (e: CustomEvent) => void; }; type SkfSelectOptionProps = { /** If true, prevents interaction with the option */ disabled?: SkfSelectOption["disabled"]; /** If defined, set an icon */ icon?: SkfSelectOption["icon"]; /** If defined, sets provided color on the icon */ "icon-color"?: SkfSelectOption["iconColor"]; /** If true, sets the option as selected */ selected?: SkfSelectOption["selected"]; /** If defined, sets a short label */ "short-label"?: SkfSelectOption["shortLabel"]; /** Returns or sets the tags value. If value is omitted, defaults to the tags text. */ value?: SkfSelectOption["value"]; /** The option's label text (equivalent to the tags textContent) */ text?: SkfSelectOption["text"]; /** */ role?: SkfSelectOption["role"]; /** */ _parent?: SkfSelectOption["_parent"]; /** */ _shortcutUpdate?: SkfSelectOption["_shortcutUpdate"]; /** {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. */ "onskf-select-option:select"?: (e: CustomEvent) => void; }; type SkfSelectOptionGroupProps = { /** */ label?: SkfSelectOptionGroup["label"]; }; type SkfSwitchProps = { /** If true, sets disabled state */ disabled?: SkfSwitch["undefined"]; /** If true, value is required or must be checked for the form to be submittable */ required?: SkfSwitch["undefined"]; /** If true, outputs helping hints in console */ debug?: SkfSwitch["debug"]; /** If true, outputs helping hints in console */ checked?: SkfSwitch["checked"]; /** If true, hides the label visually */ "hide-label"?: SkfSwitch["hideLabel"]; /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */ label?: SkfSwitch["label"]; /** If defined, adds name to the input-element */ name?: SkfSwitch["name"]; /** If defined, renders an alternative A11y text for the asterisk */ "required-label"?: SkfSwitch["requiredLabel"]; /** Size of the Switch */ size?: SkfSwitch["size"]; /** The current value of the input field */ value?: SkfSwitch["value"]; }; type SkfTagProps = { /** Specifies Tag size */ size?: SkfTag["size"]; /** If defined, displays leading/provided icon */ icon?: SkfTag["icon"]; /** If defined, gives the supplied appearance */ color?: SkfTag["color"]; /** If true, adds trailing button to remove tag */ removable?: SkfTag["removable"]; /** If defined, accepts a function that runs on click */ onClick?: SkfTag["onClick"]; /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */ onRemove?: SkfTag["onRemove"]; }; type SkfTextAreaProps = { /** If true, sets disabled state */ disabled?: SkfTextArea["undefined"]; /** If true, value is required or must be checked for the form to be submittable */ required?: SkfTextArea["undefined"]; /** If defined, sets the cols of the textarea */ cols?: SkfTextArea["cols"]; /** If defined, forces component to invalid state until removed. Its value is used as hint text. */ "custom-invalid"?: SkfTextArea["customInvalid"]; /** If true, outputs helping hints in console */ debug?: SkfTextArea["debug"]; /** If true, hides the label visually */ "hide-label"?: SkfTextArea["hideLabel"]; /** If defined, displays informational text below the field */ hint?: SkfTextArea["hint"]; /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */ label?: SkfTextArea["label"]; /** If defined, adds name to the input-element */ name?: SkfTextArea["name"]; /** If defined, sets the maximum character length to accept for this input */ maxlength?: SkfTextArea["maxLength"]; /** If defined, sets the minimum character length to accept for this input */ minlength?: SkfTextArea["minLength"]; /** If defined, displays placeholder text */ placeholder?: SkfTextArea["placeholder"]; /** If true, makes the element not mutable, meaning the user can not edit the control */ readonly?: SkfTextArea["readonly"]; /** If defined, renders an alternative A11y text for the asterisk */ "required-label"?: SkfTextArea["requiredLabel"]; /** If defined, sets the rows of the textarea */ rows?: SkfTextArea["rows"]; /** If defined, displays provided severity state */ severity?: SkfTextArea["severity"]; /** If true, displays valid state after interaction */ "show-valid"?: SkfTextArea["showValid"]; /** Size of the Textarea */ size?: SkfTextArea["size"]; /** Sets validation start */ "validate-on"?: SkfTextArea["validateOn"]; /** The current value of the text area */ value?: SkfTextArea["value"]; /** Fires when the value of the input changes */ onchange?: (e: CustomEvent) => void; /** Fires when the input is invalid */ oninvalid?: (e: CustomEvent) => void; }; export type CustomElements = { /** * The `` component consists of multiple ``, working together. * * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles. * --- * * * ### **Slots:** * - _default_ - Expects one or more element(s) */ "skf-accordion": DefineComponent; /** * Component to be used in forms or for interactivity * --- * * * ### **Slots:** * - _default_ - The Primary content */ "skf-button": DefineComponent; /** * The `` can be used to group related subjects in a container * --- * * * ### **Slots:** * - _default_ - The card's main content */ "skf-card": DefineComponent; /** * The `` is a type of notification that appears in-line * --- * * * ### **Events:** * - **skf-alert-close** - Fires when the close button is clicked * * ### **Slots:** * - _default_ - Alert message. **Notice!** See design principles for approved content * - **link** - Slot for the link */ "skf-alert": DefineComponent; /** * The `` component is used to create a checkbox input * --- * * * ### **Events:** * - **change** - {object} - When the value of the input changes * * ### **Slots:** * - _default_ - The Radios label. Alternatively, you can use the `label` attribute. */ "skf-checkbox": DefineComponent; /** * The `` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information * --- * * * ### **CSS Properties:** * - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_ * - **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_ */ "skf-divider": DefineComponent; /** * The `` component is a general purpose container for content that can be collapsed / expanded. * * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles. * --- * * * ### **Events:** * - **skf-collapse-toggle** - Event emitted when toggled * * ### **Methods:** * - **setClose()** - Class method as alternative to manipulate attribute * - **setOpen()** - Class method as alternative to manipulate attribute * * ### **Slots:** * - _default_ - Main content */ "skf-collapse": DefineComponent; /** * The `` component is to deliniate content on a page. When using, take note not to skip heading levels.
* It extends the interface of native html `

` to `

` elements. * --- * * * ### **Slots:** * - _default_ - The headings content */ "skf-heading": DefineComponent; /** * The `` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text * --- * */ "skf-icon": DefineComponent; /** * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone. * --- * * * ### **Events:** * - **change** - Fires when the value of the input changes * - **invalid** - Fires when the input is invalid * * ### **Slots:** * - _default_ - The Inputs label. Alternatively, you can use the `label` attribute. */ "skf-input": DefineComponent; /** * The `` can be used as either a regular link or a link styled semantic button * --- * * * ### **Slots:** * - _default_ - The links' main content */ "skf-link": DefineComponent; /** * The `` component is a progress indicator that uses circular indicators for short, indeterminate activities * --- * */ "skf-loader": DefineComponent; /** * The `` component is used to display the SKF logo. * --- * * * ### **CSS Properties:** * - **--skf-logo-height** - The height of the logo _(default: undefined)_ */ "skf-logo": DefineComponent; /** * The `` component is used to create a radio input * --- * * * ### **Events:** * - **change** - {object} - When the value of the input changes * * ### **Slots:** * - _default_ - The radios label. Alternatively, you can use the `label` attribute. */ "skf-radio": DefineComponent; /** * The `` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag. * --- * * * ### **Events:** * - **change** - Fired when the selected option(s) changes * - **invalid** - Fired when the select is invalid * - **reset** - Fired when the form is reset * - **skf-select:dropdown** - {detail: {expanded: boolean}} Fired when the select dropdown is toggled * - **skf-select-option:select** - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled * * ### **Slots:** * - _default_ - The select's placeholder content */ "skf-select": DefineComponent; /** * The `` is a component is used nested in a skf-select or skf-select-option-group. * --- * * * ### **Events:** * - **skf-select-option:select** - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. * * ### **Slots:** * - _default_ - The option's text content * - **icon** - The option's slot for icon or custom meta information (svg). */ "skf-select-option": DefineComponent; /** * The `` is a component that groups select-options * --- * * * ### **Slots:** * - _default_ - The component's placeholder content */ "skf-select-option-group": DefineComponent; /** * The `` is a component that displays a list of actions or options * --- * * * ### **Slots:** * - _default_ - The Switchs label. Alternatively, you can use the `label` attribute. */ "skf-switch": DefineComponent; /** * The `` is a component that displays a list of actions or options * --- * * * ### **Slots:** * - _default_ - The component's placeholder content */ "skf-tag": DefineComponent; /** * The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like. * --- * * * ### **Events:** * - **change** - Fires when the value of the input changes * - **invalid** - Fires when the input is invalid * * ### **Slots:** * - _default_ - The textareas label. Alternatively, you can use the `label` attribute. */ "skf-textarea": DefineComponent; }; declare module "vue" { // eslint-disable-next-line @typescript-eslint/no-empty-interface interface GlobalComponents extends CustomElements {} } declare global { namespace JSX { // eslint-disable-next-line @typescript-eslint/no-empty-interface interface IntrinsicElements extends CustomElements {} } }