@skf-design-system/ui-components 1.0.0-beta.7 → 1.0.1-beta.1

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

@@ -1,24 +1,32 @@
 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 { SkfBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
+import type { SkfBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.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 { SkfDatePicker } from "../../components/datepicker/datepicker.component.js";
 import type { SkfDialog } from "../../components/dialog/dialog.component.js";
-import type { SkfAlert } from "../../components/alert/alert.component.js";
 import type { SkfDivider } from "../../components/divider/divider.component.js";
-import type { SkfButton } from "../../components/button/button.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 { SkfMenu } from "../../components/menu/menu.component.js";
+import type { SkfMenuItem, CustomEvent } from "../../components/menu-item/menu-item.component.js";
+import type { SkfPopover } from "../../components/popover/popover.component.js";
 import type { SkfProgress } from "../../components/progress/progress.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 { SkfStepper } from "../../components/stepper/stepper.component.js";
+import type { SkfStepperItem } from "../../components/stepper-item/stepper-item.component.js";
 import type { SkfSwitch } from "../../components/switch/switch.component.js";
 import type { SkfTab, CustomEvent } from "../../components/tab/tab.component.js";
 import type { SkfTabGroup } from "../../components/tab-group/tab-group.component.js";
@@ -27,6 +35,7 @@ import type { SkfTag } from "../../components/tag/tag.component.js";
 import type { SkfTextArea } from "../../components/textarea/textarea.component.js";
 import type { SkfToast } from "../../components/toast/toast.component.js";
 import type { SkfToastWrapper } from "../../components/toast-wrapper/toast-wrapper.component.js";
+import type { SkfTooltip } from "../../components/tooltip/tooltip.component.js";
 
 type SkfAccordionProps = {
   /** If true, will animate the expand/collapse state */
@@ -43,6 +52,63 @@ type SkfAccordionProps = {
   truncate?: SkfAccordion["truncate"];
 };
 
+type SkfAlertProps = {
+  /** Close button aria-label */
+  "button-label"?: SkfAlert["buttonLabel"];
+  /** If defined, displays leading icon */
+  icon?: SkfAlert["icon"];
+  /** If true, renders with an close button and sets aria-role to `status` */
+  persistent?: SkfAlert["persistent"];
+  /** If defined, gives the supplied appearance */
+  severity?: SkfAlert["severity"];
+
+  /** Fires when the close button is clicked */
+  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
+};
+
+type SkfBreadcrumbProps = {
+  /** aria-label for the breadcrumb control */
+  label?: SkfBreadcrumb["label"];
+  /** Displays an alternative size */
+  size?: SkfBreadcrumb["size"];
+
+  /** Fired when the item is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
+type SkfBreadcrumbItemProps = {
+  /** If defined, loads url on click */
+  href?: SkfBreadcrumbItem["href"];
+  /** If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined. */
+  onClick?: SkfBreadcrumbItem["onClick"];
+};
+
+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 true, removes border */
+  iconOnly?: SkfButton["iconOnly"];
+  /** 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"];
+  /**  */
+  "no-validate"?: SkfButton["noValidate"];
+  /** 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"];
+
+  /** Fires when the button is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
 type SkfCardProps = {
   /** If true, removes border */
   "no-border"?: SkfCard["noBorder"];
@@ -102,6 +168,31 @@ type SkfCollapseProps = {
   "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SkfDatePickerProps = {
+  /** The locale to use for formatting the date */
+  locale?: SkfDatePicker["locale"];
+  /** The date to display in the date picker */
+  date?: SkfDatePicker["date"];
+  /**  */
+  id?: SkfDatePicker["id"];
+  /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
+  "invalid-dates"?: SkfDatePicker["invalidDates"];
+  /** If true, the date picker will allow the selection of a range of dates */
+  range?: SkfDatePicker["range"];
+  /** Earliest selectable date. (yyyy-mm-dd format) */
+  "selectable-from"?: SkfDatePicker["selectableFrom"];
+  /** Latest selectable date. (yyyy-mm-dd format) */
+  "selectable-to"?: SkfDatePicker["selectableTo"];
+  /**  */
+  selectedDate?: SkfDatePicker["selectedDate"];
+  /**  */
+  selectedDateRange?: SkfDatePicker["selectedDateRange"];
+  /** When a date is selected */
+  "onselected-date-changed"?: (e: CustomEvent<never>) => void;
+  /** When a range of dates is selected */
+  "onselected-date-range-changed"?: (e: CustomEvent<never>) => void;
+};
+
 type SkfDialogProps = {
   /** If defined, sets the aria-label for the close button */
   "close-button-aria-label"?: SkfDialog["closeButtonAriaLabel"];
@@ -129,20 +220,6 @@ type SkfDialogProps = {
   onclose?: (e: CustomEvent<never>) => void;
 };
 
-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<never>) => void;
-};
-
 type SkfDividerProps = {
   /** Defines the Divider color */
   color?: SkfDivider["color"];
@@ -152,30 +229,6 @@ type SkfDividerProps = {
   vertical?: SkfDivider["vertical"];
 };
 
-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"];
-  /**  */
-  "no-validate"?: SkfButton["noValidate"];
-  /** 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"];
-
-  /** Fires when the button is clicked */
-  onclick?: (e: CustomEvent<never>) => void;
-};
-
 type SkfHeadingProps = {
   /** Controls which heading element will be rendered. Should not be used to affect appearance */
   as?: SkfHeading["as"];
@@ -309,6 +362,81 @@ type SkfLogoProps = {
   color?: SkfLogo["color"];
 };
 
+type SkfMenuProps = {
+  /** The placement of the menu */
+  placement?: SkfMenu["placement"];
+  /** Whether the menu is open */
+  isOpen?: SkfMenu["isOpen"];
+  /** The id of the element the menu will be anchored to */
+  anchor?: SkfMenu["anchor"];
+  /** Fired when the menu is opened */
+  onopen?: (e: CustomEvent<never>) => void;
+  /** Fired when the menu is closed */
+  onclose?: (e: CustomEvent<never>) => void;
+};
+
+type SkfMenuItemProps = {
+  /** Defines the semantic element to render */
+  as?: SkfMenuItem["as"];
+  /** Defines the text-color */
+  color?: SkfMenuItem["color"];
+  /** If true, disables the link */
+  disabled?: SkfMenuItem["disabled"];
+  /** If defined, downloads the url */
+  download?: SkfMenuItem["download"];
+  /** If defined, loads url on click */
+  href?: SkfMenuItem["href"];
+  /** If defined, renders an icon before or after the text */
+  icon?: SkfMenuItem["icon"];
+  /** Defines the position of the icon in relation to the text */
+  "icon-placement"?: SkfMenuItem["iconPlacement"];
+  /** If defined, describes the relationship between a linked resource and the current document */
+  rel?: SkfMenuItem["rel"];
+  /** If defined, used on conjunction with onClick property, second argument */
+  route?: SkfMenuItem["route"];
+  /** If true, fills the parents horizontal axis */
+  stretch?: SkfMenuItem["stretch"];
+  /** If defined, specifies where to open the linked document */
+  target?: SkfMenuItem["target"];
+  /** Defines the type of button */
+  type?: SkfMenuItem["type"];
+  /** If provided, custom function triggered by click where the second return parameter enables custom routing. */
+  onClick?: SkfMenuItem["onClick"];
+  /** Fired when something happens */
+  "onmy-tag-my-event"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fired when the component is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+  /** Fired when the mouse is over the component */
+  onmouseover?: (e: CustomEvent<never>) => void;
+  /** Fired when the mouse is out of the component */
+  onmouseout?: (e: CustomEvent<never>) => void;
+  /** Fired when the component is focused */
+  onfocus?: (e: CustomEvent<never>) => void;
+  /** Fired when the component is blurred */
+  onblur?: (e: CustomEvent<never>) => void;
+  /** Fired when the component's value changes */
+  onchange?: (e: CustomEvent<never>) => void;
+};
+
+type SkfPopoverProps = {
+  /** If defined, sets a custom offset for the popover */
+  offset?: SkfPopover["offset"];
+  /** If true, hides the arrow */
+  hideArrow?: SkfPopover["hideArrow"];
+  /**  */
+  arrow?: SkfPopover["arrow"];
+  /** The placement of the menu */
+  placement?: SkfPopover["placement"];
+  /** Whether the menu is open */
+  isOpen?: SkfPopover["isOpen"];
+  /** The id of the element the menu will be anchored to */
+  anchor?: SkfPopover["anchor"];
+  /** Fired when the menu is opened */
+  onopen?: (e: CustomEvent<never>) => void;
+  /** Fired when the menu is closed */
+  onclose?: (e: CustomEvent<never>) => void;
+};
+
 type SkfProgressProps = {
   /** If true, the progress-bar's fill value is animated */
   animated?: SkfProgress["animated"];
@@ -429,6 +557,29 @@ type SkfSelectOptionGroupProps = {
   label?: SkfSelectOptionGroup["label"];
 };
 
+type SkfStepperProps = {
+  /** Sets the active item */
+  activeIndex?: SkfStepper["activeIndex"];
+  /** If true, sets linear mode (user can't go back to completed steps due to dependencies) */
+  linear?: SkfStepper["linear"];
+
+  /** Dispatched when the stepper item is selected */
+  "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
+};
+
+type SkfStepperItemProps = {
+  /** If defined, gives the supplied appearance */
+  state?: SkfStepperItem["state"];
+  /** If true, item marked as completed */
+  completed?: SkfStepperItem["completed"];
+  /**  */
+  _setInternalState?: SkfStepperItem["_setInternalState"];
+  /**  */
+  role?: SkfStepperItem["role"];
+  /** Dispatched when the stepper item is selected */
+  "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
+};
+
 type SkfSwitchProps = {
   /** If true, sets disabled state */
   disabled?: SkfSwitch["undefined"];
@@ -553,11 +704,13 @@ type SkfTextAreaProps = {
 };
 
 type SkfToastProps = {
-  /** If provided, adds a close button to the toast and will not disapear until user actively dismisses it. */
-  closeable?: SkfToast["closeable"];
   /**  */
   debug?: SkfToast["debug"];
-  /** Severity of the toast. */
+  /** If defined, displays leading icon */
+  icon?: SkfToast["icon"];
+  /** If true, renders with an close button and sets aria-role to `status` */
+  persistent?: SkfToast["persistent"];
+  /** If defined, gives the supplied appearance */
   severity?: SkfToast["severity"];
   /** Time in seconds before the toast disappears. */
   timer?: SkfToast["timer"];
@@ -570,6 +723,21 @@ type SkfToastWrapperProps = {
   debug?: SkfToastWrapper["debug"];
 };
 
+type SkfTooltipProps = {
+  /**  */
+  offset?: SkfTooltip["offset"];
+  /** The placement of the dropdown */
+  placement?: SkfTooltip["placement"];
+  /** Whether the dropdown is open */
+  isOpen?: SkfTooltip["isOpen"];
+  /** The id of the element the dropdown will be anchored to */
+  anchor?: SkfTooltip["anchor"];
+  /** Fired when the dropdown is opened */
+  onopen?: (e: CustomEvent<never>) => void;
+  /** Fired when the dropdown is closed */
+  onclose?: (e: CustomEvent<never>) => void;
+};
+
 export type CustomElements = {
   /**
    * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
@@ -583,6 +751,59 @@ export type CustomElements = {
    */
   "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** - Slot for the link
+   */
+  "skf-alert": DefineComponent<SkfAlertProps>;
+
+  /**
+   * The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **click** - Fired when the item is clicked
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<skf-breadcrumb-item>`
+   */
+  "skf-breadcrumb": DefineComponent<SkfBreadcrumbProps>;
+
+  /**
+   * The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Label of the breadcrumb item
+   */
+  "skf-breadcrumb-item": DefineComponent<SkfBreadcrumbItemProps>;
+
+  /**
+   * Component to be used in forms or for interactivity
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **click** - Fires when the button is clicked
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the button.
+   *
+   * ### **Slots:**
+   *  - _default_ - The Primary content
+   */
+  "skf-button": DefineComponent<SkfButtonProps>;
+
   /**
    * The `<skf-card>` can be used to group related subjects in a container
    * ---
@@ -626,39 +847,41 @@ export type CustomElements = {
   "skf-collapse": DefineComponent<SkfCollapseProps>;
 
   /**
-   * The `<skf-dialog>` is a component that open up a dialog with the content provided
+   * A date picker component that allows users to select a date or a range of dates.
    * ---
    *
    *
    * ### **Events:**
-   *  - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)
-   * - **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)
-   * - **close** - Fires when the dialog is closed (after transitioned out)
+   *  - **selected-date-changed** - When a date is selected
+   * - **selected-date-range-changed** - When a range of dates is selected
    *
    * ### **Slots:**
-   *  - _default_ - The dialog component's content
-   * - **heading** - The dialog component's heading
-   * - **footer** - The dialog component's buttons goes here
+   *  - _default_ - Default hint content placed inside the date picker
    *
    * ### **CSS Properties:**
-   *  - **--skf-dialog-height** - A custom height for the Dialog. Pass valid CSS **block-size** values _(default: undefined)_
-   * - **--skf-dialog-width** - A custom width for the Dialog Pass valid CSS **inline-size** values _(default: undefined)_
+   *  - **--max-width** - The maximum width of the date picker _(default: undefined)_
    */
-  "skf-dialog": DefineComponent<SkfDialogProps>;
+  "skf-datepicker": DefineComponent<SkfDatePickerProps>;
 
   /**
-   * The `<skf-alert>` is a type of notification that appears in-line
+   * The `<skf-dialog>` is a component that open up a dialog with the content provided
    * ---
    *
    *
    * ### **Events:**
-   *  - **skf-alert-close** - Fires when the close button is clicked
+   *  - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)
+   * - **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)
+   * - **close** - Fires when the dialog is closed (after transitioned out)
    *
    * ### **Slots:**
-   *  - _default_ - Alert message. **Notice!** See design principles for approved content
-   * - **link** - Slot for the link
+   *  - _default_ - The dialog component's content
+   * - **footer** - The dialog component's buttons goes here
+   *
+   * ### **CSS Properties:**
+   *  - **--skf-dialog-height** - A custom height for the Dialog. Pass valid CSS **block-size** values _(default: undefined)_
+   * - **--skf-dialog-width** - A custom width for the Dialog Pass valid CSS **inline-size** values _(default: undefined)_
    */
-  "skf-alert": DefineComponent<SkfAlertProps>;
+  "skf-dialog": DefineComponent<SkfDialogProps>;
 
   /**
    * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
@@ -671,22 +894,6 @@ export type CustomElements = {
    */
   "skf-divider": DefineComponent<SkfDividerProps>;
 
-  /**
-   * Component to be used in forms or for interactivity
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **click** - Fires when the button is clicked
-   *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the button.
-   *
-   * ### **Slots:**
-   *  - _default_ - The Primary content
-   */
-  "skf-button": DefineComponent<SkfButtonProps>;
-
   /**
    * 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.
@@ -746,6 +953,54 @@ export type CustomElements = {
    */
   "skf-logo": DefineComponent<SkfLogoProps>;
 
+  /**
+   * The `<skf-menu>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **open** - Fired when the menu is opened
+   * - **close** - Fired when the menu is closed
+   *
+   * ### **Slots:**
+   *  - _default_ - The menu popover content
+   */
+  "skf-menu": DefineComponent<SkfMenuProps>;
+
+  /**
+   * The `<skf-menu-item>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **my-tag-my-event** - Fired when something happens
+   * - **click** - Fired when the component is clicked
+   * - **mouseover** - Fired when the mouse is over the component
+   * - **mouseout** - Fired when the mouse is out of the component
+   * - **focus** - Fired when the component is focused
+   * - **blur** - Fired when the component is blurred
+   * - **change** - Fired when the component's value changes
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's main content
+   * - **my-named-slot** - A named slot of the component
+   */
+  "skf-menu-item": DefineComponent<SkfMenuItemProps>;
+
+  /**
+   * The `<skf-popover>` is a general purpose component that displays the slot content.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **open** - Fired when the menu is opened
+   * - **close** - Fired when the menu is closed
+   *
+   * ### **Slots:**
+   *  - _default_ - The popover content
+   */
+  "skf-popover": DefineComponent<SkfPopoverProps>;
+
   /**
    * The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar
    * ---
@@ -807,6 +1062,32 @@ export type CustomElements = {
    */
   "skf-select-option-group": DefineComponent<SkfSelectOptionGroupProps>;
 
+  /**
+   * The `<skf-stepper>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-stepper-item-select** - Dispatched when the stepper item is selected
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<skf-stepper-item>`
+   */
+  "skf-stepper": DefineComponent<SkfStepperProps>;
+
+  /**
+   * The `<skf-stepper-item>` is used in conjunction with the `<skf-stepper>` component
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-stepper-item-select** - Dispatched when the stepper item is selected
+   *
+   * ### **Slots:**
+   *  - _default_ - Label of the stepper item
+   */
+  "skf-stepper-item": DefineComponent<SkfStepperItemProps>;
+
   /**
    * The `<skf-switch>` is a component that displays a list of actions or options
    * ---
@@ -895,6 +1176,20 @@ export type CustomElements = {
    *  - _default_ - The alert components that the toast creates will render here.
    */
   "skf-toast-wrapper": DefineComponent<SkfToastWrapperProps>;
+
+  /**
+   * The `<skf-tooltip>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **open** - Fired when the dropdown is opened
+   * - **close** - Fired when the dropdown is closed
+   *
+   * ### **Slots:**
+   *  - _default_ - The tooltip popover content
+   */
+  "skf-tooltip": DefineComponent<SkfTooltipProps>;
 };
 
 declare module "vue" {