@skf-design-system/ui-components 0.0.1-beta.1

package/dist/types/vue/index.d.ts

@@ -0,0 +1,587 @@
+import type { DefineComponent } from "vue";
+
+import type { SkfAccordion } from "../../components/accordion/accordion.component.js";
+import type { SkfAlert } from "../../components/alert/alert.component.js";
+import type { SkfButton } from "../../components/button/button.component.js";
+import type { SkfCard } from "../../components/card/card.component.js";
+import type { SkfCheckbox } from "../../components/checkbox/checkbox.component.js";
+import type { SkfCollapse, CustomEvent } from "../../components/collapse/collapse.component.js";
+import type { SkfDivider } from "../../components/divider/divider.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 { 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"];
+  /** Controls which heading element will be rendered */
+  "heading-as"?: SkfAccordion["headingAs"];
+  /** If provided, 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 SkfAlertProps = {
+  /** If true, alert is being used as a toast 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<never>) => void;
+};
+
+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 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"];
+  /** Size of the checkbox */
+  size?: SkfCheckbox["size"];
+  /** If defined, styles checkbox using provided severity */
+  severity?: SkfCheckbox["severity"];
+  /** If defined, displays valid state after interaction */
+  "show-valid"?: SkfCheckbox["showValid"];
+  /** The current value of the input field */
+  value?: SkfCheckbox["value"];
+
+  /** {object} - When the value of the input changes */
+  onchange?: (e: CustomEvent<never>) => void;
+};
+
+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"];
+  /** Controls 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<CustomEvent>) => void;
+};
+
+type SkfDividerProps = {
+  /** If provided, alters 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 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 = {
+  /**  */
+  color?: SkfIcon["color"];
+  /** If provided, adds an alternate description to use for assistive devices */
+  label?: SkfIcon["label"];
+  /**  */
+  name?: SkfIcon["name"];
+  /**  */
+  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"];
+  /** If provided, renders a custom aria-label for the clear button **Notice!** Only applicable to type=search. */
+  "button-aria-label-clear"?: SkfInput["buttonAriaLabelClear"];
+  /** If provided, renders a custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
+  "button-aria-label-hide"?: SkfInput["buttonAriaLabelHide"];
+  /** If provided, renders a custom aria-label for the visibility button **Notice!** Only applicable to type=password. */
+  "button-aria-label-show"?: SkfInput["buttonAriaLabelShow"];
+  /** If provided, forces component to invalid state until removed. Its value is used as hint text. */
+  "custom-invalid"?: SkfInput["customInvalid"];
+  /** If provided, outputs helping hints in console */
+  debug?: SkfInput["debug"];
+  /** If true, hides the label visually */
+  "hide-label"?: SkfInput["hideLabel"];
+  /** If provided, displays informational text below the field */
+  hint?: SkfInput["hint"];
+  /** If provided, tells what keyboard to use if applicable */
+  inputmode?: SkfInput["inputmode"];
+  /** The input's label. Alternatively, you can use the `label` attribute. */
+  label?: SkfInput["label"];
+  /** If provided, displays a prefix/adornment before the input-element */
+  leading?: SkfInput["leading"];
+  /** If provided, sets the maximum value to accept for this input */
+  max?: SkfInput["max"];
+  /** If provided, sets the maximum character length to accept for this input */
+  maxlength?: SkfInput["maxLength"];
+  /** If provided, sets the minimum value to accept for this input */
+  min?: SkfInput["min"];
+  /** If provided, sets the minimum character length to accept for this input */
+  minlength?: SkfInput["minLength"];
+  /** If provided, adds name to the input-element */
+  name?: SkfInput["name"];
+  /** If provided, adds name to the input-element */
+  pattern?: SkfInput["pattern"];
+  /** If provided, 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 provided, renders an alternative A11y text for the asterisk */
+  "required-label"?: SkfInput["requiredLabel"];
+  /** If provided, displays provided severity state */
+  severity?: SkfInput["severity"];
+  /** If provided, displays provided severity state */
+  "show-valid"?: SkfInput["showValid"];
+  /** If provided, displays an alternative size */
+  size?: SkfInput["size"];
+  /** If provided, displays a suffix/adornment after the input-element */
+  trailing?: SkfInput["trailing"];
+  /** If provided, changes the type of form control */
+  type?: SkfInput["type"];
+  /** If provided, sets validation start, "input", "change" or "submit" */
+  "validate-on"?: SkfInput["validateOn"];
+  /** The current value of the input field */
+  value?: SkfInput["value"];
+  /**  */
+  _numberController?: SkfInput["_numberController"];
+  /**  */
+  _passwordController?: SkfInput["_passwordController"];
+  /** Fires when the value of the input changes */
+  onchange?: (e: CustomEvent<never>) => void;
+  /** Fires when the input is invalid */
+  oninvalid?: (e: CustomEvent<never>) => void;
+};
+
+type SkfLinkProps = {
+  /** Specifies semantic element to render - */
+  as?: SkfLink["as"];
+  /**  */
+  color?: SkfLink["color"];
+  /** If true, disables the link */
+  disabled?: SkfLink["disabled"];
+  /** If provided, downloads the url */
+  download?: SkfLink["download"];
+  /** If provided, loads url on click */
+  href?: SkfLink["href"];
+  /** If provided, renders an icon before or after the text */
+  icon?: SkfLink["icon"];
+  /** Position of the icon in relation to the text - */
+  "icon-placement"?: SkfLink["iconPlacement"];
+  /** Specifies the relationship of the target object to the link object - */
+  rel?: SkfLink["rel"];
+  /** If provided, used on conjunction with onClick property, second argument */
+  route?: SkfLink["route"];
+  /** If true, fills the parents horizontal axis */
+  stretch?: SkfLink["stretch"];
+  /** If provided, specifies where to open the linked document */
+  target?: SkfLink["target"];
+  /** 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 = {
+  /**  */
+  "aria-label"?: SkfLoader["ariaLabel"];
+  /** If true, inverts the color (to be used on colored backgrounds) */
+  invert?: SkfLoader["invert"];
+  /** If provided, displays an alternative size */
+  size?: SkfLoader["size"];
+};
+
+type SkfLogoProps = {
+  /** The title of the logo */
+  title?: SkfLogo["title"];
+  /** If provided, 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 provided, 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"];
+  /** The input's label. Alternatively, you can use the `label` attribute. */
+  label?: SkfRadio["label"];
+  /** If provided, adds name to the input-element */
+  name?: SkfRadio["name"];
+  /** If provided, renders an alternative A11y text for the asterisk */
+  "required-label"?: SkfRadio["requiredLabel"];
+  /** If provided, displays an alternative size */
+  size?: SkfRadio["size"];
+  /** If provided, displays provided severity state */
+  severity?: SkfRadio["severity"];
+  /** If provided, 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<never>) => void;
+};
+
+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. 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"];
+};
+
+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 provided, sets the cols of the textarea */
+  cols?: SkfTextArea["cols"];
+  /** If provided, forces component to invalid state until removed. Its value is used as hint text. */
+  "custom-invalid"?: SkfTextArea["customInvalid"];
+  /** If provided, outputs helping hints in console */
+  debug?: SkfTextArea["debug"];
+  /** hide-label - If true, hides the label visually */
+  "hide-label"?: SkfTextArea["hideLabel"];
+  /** If provided, displays informational text below the field */
+  hint?: SkfTextArea["hint"];
+  /** The input's label. Alternatively, you can use the component slot. */
+  label?: SkfTextArea["label"];
+  /** If provided, adds name to the input-element */
+  name?: SkfTextArea["name"];
+  /** If provided, sets the maximum character length to accept for this input */
+  maxlength?: SkfTextArea["maxLength"];
+  /** If provided, sets the minimum character length to accept for this input */
+  minlength?: SkfTextArea["minLength"];
+  /** If provided, 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 provided, renders an alternative A11y text for the asterisk */
+  "required-label"?: SkfTextArea["requiredLabel"];
+  /** If provided, sets the rows of the textarea */
+  rows?: SkfTextArea["rows"];
+  /** If provided, displays provided severity state */
+  severity?: SkfTextArea["severity"];
+  /** If true, displays valid state after interaction */
+  "show-valid"?: SkfTextArea["showValid"];
+  /** If provided, displays an alternative size */
+  size?: SkfTextArea["size"];
+  /** If provided, sets validation start, "input", "change" or "submit" */
+  "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<never>) => void;
+  /** Fires when the input is invalid */
+  oninvalid?: (e: CustomEvent<never>) => void;
+};
+
+export type CustomElements = {
+  /**
+   * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
+   *
+   * See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6256cb1b44eba592d319d92e) for design principles.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Expects one or more <skf-accordion-item> element(s)
+   */
+  "skf-accordion": DefineComponent<SkfAccordionProps>;
+
+  /**
+   * The `<skf-alert>` 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** - lodjvodjvodjo
+   */
+  "skf-alert": DefineComponent<SkfAlertProps>;
+
+  /**
+   * Component to be used in forms or for interactivity
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The Primary content
+   */
+  "skf-button": DefineComponent<SkfButtonProps>;
+
+  /**
+   * The `<skf-card>` can be used to group related subjects in a container
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The card's main content
+   */
+  "skf-card": DefineComponent<SkfCardProps>;
+
+  /**
+   * The `<skf-checkbox>` component is used to create a checkbox input
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **change** - {object} - When the value of the input changes
+   *
+   * ### **Slots:**
+   *  - **Default** - Alternatively, you can use the `label` attribute
+   */
+  "skf-checkbox": DefineComponent<SkfCheckboxProps>;
+
+  /**
+   * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
+   *
+   * See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229e2eb8a8dacf366dc3243) 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<SkfCollapseProps>;
+
+  /**
+   * The `<Divider>` 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<SkfDividerProps>;
+
+  /**
+   * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
+   * It extends the interface of native html `<h1>` to `<h4>` elements.
+   * ---
+   *
+   */
+  "skf-heading": DefineComponent<SkfHeadingProps>;
+
+  /**
+   * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text
+   * ---
+   *
+   */
+  "skf-icon": DefineComponent<SkfIconProps>;
+
+  /**
+   * 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** -  Alternatively, you can use the `label` attribute
+   */
+  "skf-input": DefineComponent<SkfInputProps>;
+
+  /**
+   * The `<skf-link>` can be used as either a regular link or a link styled semantic button
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The links' main content
+   */
+  "skf-link": DefineComponent<SkfLinkProps>;
+
+  /**
+   * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities.
+   * ---
+   *
+   */
+  "skf-loader": DefineComponent<SkfLoaderProps>;
+
+  /**
+   * The `<skf-logo>` component is used to display the SKF logo.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--skf-logo-height** - The height of the logo _(default: undefined)_
+   */
+  "skf-logo": DefineComponent<SkfLogoProps>;
+
+  /**
+   * The `<skf-radio>` component is used to create a radio input
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **change** - {object} - When the value of the input changes
+   *
+   * ### **Slots:**
+   *  - **Default** -  Alternatively, you can use the `label` attribute
+   */
+  "skf-radio": DefineComponent<SkfRadioProps>;
+
+  /**
+   * The `<skf-switch>` is a component that displays a list of actions or options
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's placeholder content
+   */
+  "skf-switch": DefineComponent<SkfSwitchProps>;
+
+  /**
+   * The `<skf-tag>` is a component that displays a list of actions or options
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's placeholder content
+   */
+  "skf-tag": DefineComponent<SkfTagProps>;
+
+  /**
+   * 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:**
+   *  - **The** - textareas label. Alternatively, you can use the `label` attribute.
+   */
+  "skf-textarea": DefineComponent<SkfTextAreaProps>;
+};
+
+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 {}
+  }
+}