@skf-design-system/ui-components 1.0.0-alpha.27 → 1.0.0-alpha.28

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

@@ -13,13 +13,19 @@ 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 { 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 { 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";
+import type { SkfTabPanel } from "../../components/tab-panel/tab-panel.component.js";
 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";
 
 type SkfAccordionProps = {
   /** If true, will animate the expand/collapse state */
@@ -61,12 +67,17 @@ type SkfButtonProps = {
   "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 = {
@@ -89,12 +100,8 @@ type SkfCheckboxProps = {
   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"];
-  /** Read only indicator of the local state. Use custom-invalid to set it to invalid state. */
-  invalid?: SkfCheckbox["invalid"];
   /** 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 */
@@ -164,6 +171,8 @@ type SkfInputProps = {
   disabled?: SkfInput["undefined"];
   /** If true, value is required or must be checked for the form to be submittable */
   required?: SkfInput["undefined"];
+  /** -m  } */
+  autocomplete?: SkfInput["autocomplete"];
   /** 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. */
@@ -272,6 +281,15 @@ type SkfLogoProps = {
   color?: SkfLogo["color"];
 };
 
+type SkfProgressProps = {
+  /** If true, the progress-bar's fill value is animated */
+  animated?: SkfProgress["animated"];
+  /** Describes how much work the task indicated by the progress element requires */
+  max?: SkfProgress["max"];
+  /** Specifies how much of the task that has been completed */
+  value?: SkfProgress["value"];
+};
+
 type SkfRadioProps = {
   /** If true, sets disabled state */
   disabled?: SkfRadio["undefined"];
@@ -283,8 +301,6 @@ type SkfRadioProps = {
   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 */
@@ -336,9 +352,9 @@ type SkfSelectProps = {
   /** Size of the Select */
   size?: SkfSelect["size"];
   /** A readonly property that returns the selected value(s) in a array */
-  getSelectedValues?: SkfSelect["getSelectedValues"];
+  selectedValues?: SkfSelect["selectedValues"];
   /** A readonly property that returns the selected slot(s) text content in a array */
-  getSelectedOptionsText?: SkfSelect["getSelectedOptionsText"];
+  selectedOptionsText?: SkfSelect["selectedOptionsText"];
   /** Read only, returns the selected value. (if multiple: in a comma separated string) */
   value?: SkfSelect["value"];
   /**  */
@@ -408,6 +424,43 @@ type SkfSwitchProps = {
   value?: SkfSwitch["value"];
 };
 
+type SkfTabProps = {
+  /** The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. */
+  panel?: SkfTab["panel"];
+  /**  */
+  selected?: SkfTab["selected"];
+  /**  */
+  variant?: SkfTab["variant"];
+  /**  */
+  role?: SkfTab["role"];
+  /** {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected */
+  "onskf-tab-select"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fired when the component is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
+type SkfTabGroupProps = {
+  /** Sets the default selected tab */
+  "default-selected"?: SkfTabGroup["defaultSelected"];
+  /** If true, removes border */
+  "no-border"?: SkfTabGroup["noBorder"];
+  /** If true, removes padding */
+  "no-padding"?: SkfTabGroup["noPadding"];
+  /** If true, component fills the parent element height */
+  stretch?: SkfTabGroup["stretch"];
+  /** Sets the appearance of the tabs */
+  variant?: SkfTabGroup["variant"];
+};
+
+type SkfTabPanelProps = {
+  /** The tab panel's name. */
+  name?: SkfTabPanel["name"];
+  /**  */
+  active?: SkfTabPanel["active"];
+  /**  */
+  role?: SkfTabPanel["role"];
+};
+
 type SkfTagProps = {
   /** Specifies Tag size */
   size?: SkfTag["size"];
@@ -471,6 +524,24 @@ type SkfTextAreaProps = {
   oninvalid?: (e: CustomEvent<never>) => void;
 };
 
+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. */
+  severity?: SkfToast["severity"];
+  /** Time in seconds before the toast disappears. */
+  timer?: SkfToast["timer"];
+  /** offsets where toasts emerge vertically */
+  topOffset?: SkfToast["topOffset"];
+};
+
+type SkfToastWrapperProps = {
+  /**  */
+  debug?: SkfToastWrapper["debug"];
+};
+
 export type CustomElements = {
   /**
    * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
@@ -503,6 +574,12 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Events:**
+   *  - **click** - Fires when the button is clicked
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the button.
+   *
    * ### **Slots:**
    *  - _default_ - The Primary content
    */
@@ -620,6 +697,13 @@ export type CustomElements = {
    */
   "skf-logo": DefineComponent<SkfLogoProps>;
 
+  /**
+   * The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar
+   * ---
+   *
+   */
+  "skf-progress": DefineComponent<SkfProgressProps>;
+
   /**
    * The `<skf-radio>` component is used to create a radio input
    * ---
@@ -684,6 +768,41 @@ export type CustomElements = {
    */
   "skf-switch": DefineComponent<SkfSwitchProps>;
 
+  /**
+   * The `<skf-tab>` is a component that displays a list of actions or options
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-tab-select** - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected
+   * - **click** - Fired when the component is clicked
+   *
+   * ### **Slots:**
+   *  - _default_ - The tab's label
+   */
+  "skf-tab": DefineComponent<SkfTabProps>;
+
+  /**
+   * The `<skf-tab-group>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements
+   * - **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements
+   */
+  "skf-tab-group": DefineComponent<SkfTabGroupProps>;
+
+  /**
+   * The `<skf-tab-panel>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The tab panel's content
+   */
+  "skf-tab-panel": DefineComponent<SkfTabPanelProps>;
+
   /**
    * The `<skf-tag>` is a component that displays a list of actions or options
    * ---
@@ -707,6 +826,26 @@ export type CustomElements = {
    *  - _default_ - The textareas label. Alternatively, you can use the `label` attribute.
    */
   "skf-textarea": DefineComponent<SkfTextAreaProps>;
+
+  /**
+   * A simple toast component that displays a message to the user. Use by appending a &lt;skf-toast&gt; tag to the DOM. Position in DOM is irrelevant.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's placeholder content
+   */
+  "skf-toast": DefineComponent<SkfToastProps>;
+
+  /**
+   * The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The alert components that the toast creates will render here.
+   */
+  "skf-toast-wrapper": DefineComponent<SkfToastWrapperProps>;
 };
 
 declare module "vue" {

package/dist/vscode.html-custom-data.json

@@ -79,7 +79,7 @@
     },
     {
       "name": "skf-button",
-      "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Slots:**\n - _default_ - The Primary content",
+      "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n\n### **Slots:**\n - _default_ - The Primary content",
       "attributes": [
         {
           "name": "destructive",
@@ -258,6 +258,7 @@
           "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
           "values": []
         },
+        { "name": "no-validate", "values": [] },
         {
           "name": "size",
           "description": "If provided, displays an alternative size",
@@ -331,21 +332,11 @@
           "description": "If true, forces component to invalid state until removed",
           "values": []
         },
-        {
-          "name": "hide-label",
-          "description": "If true, hides the label visually",
-          "values": []
-        },
         {
           "name": "indeterminate",
           "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
           "values": []
         },
-        {
-          "name": "invalid",
-          "description": "Read only indicator of the local state. Use custom-invalid to set it to invalid state.",
-          "values": []
-        },
         {
           "name": "label",
           "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
@@ -694,6 +685,7 @@
           "description": "If true, value is required or must be checked for the form to be submittable",
           "values": []
         },
+        { "name": "autocomplete", "description": "-m  }", "values": [] },
         {
           "name": "button-aria-label-clear",
           "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
@@ -1137,6 +1129,28 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-progress",
+      "description": "The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar\n---\n",
+      "attributes": [
+        {
+          "name": "animated",
+          "description": "If true, the progress-bar's fill value is animated",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "Describes how much work the task indicated by the progress element requires",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "Specifies how much of the task that has been completed",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "skf-radio",
       "description": "The `<skf-radio>` component is used to create a radio input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - _default_ - The radios label. Alternatively, you can use the `label` attribute.",
@@ -1166,11 +1180,6 @@
           "description": "If true, forces component to invalid state until removed",
           "values": []
         },
-        {
-          "name": "hide-label",
-          "description": "If true, hides the label visually",
-          "values": []
-        },
         {
           "name": "label",
           "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
@@ -1396,6 +1405,58 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-tab",
+      "description": "The `<skf-tab>` is a component that displays a list of actions or options\n---\n\n\n### **Events:**\n - **skf-tab-select** - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected\n- **click** - Fired when the component is clicked\n\n### **Slots:**\n - _default_ - The tab's label",
+      "attributes": [
+        {
+          "name": "panel",
+          "description": "The name of the tab-panel this tab is associated with. The panel must be located in the same tab group.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-tab-group",
+      "description": "The `<skf-tab-group>` is a component that displays a list of actions or options.\n---\n\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements\n- **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements",
+      "attributes": [
+        {
+          "name": "default-selected",
+          "description": "Sets the default selected tab",
+          "values": []
+        },
+        {
+          "name": "no-border",
+          "description": "If true, removes border",
+          "values": []
+        },
+        {
+          "name": "no-padding",
+          "description": "If true, removes padding",
+          "values": []
+        },
+        {
+          "name": "stretch",
+          "description": "If true, component fills the parent element height",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "Sets the appearance of the tabs",
+          "values": [{ "name": "compressed" }, { "name": "expanded" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-tab-panel",
+      "description": "The `<skf-tab-panel>` is a component that displays a list of actions or options.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content",
+      "attributes": [
+        { "name": "name", "description": "The tab panel's name.", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "skf-tag",
       "description": "The `<skf-tag>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
@@ -1696,6 +1757,45 @@
         }
       ],
       "references": []
+    },
+    {
+      "name": "skf-toast",
+      "description": "A simple toast component that displays a message to the user. Use by appending a &lt;skf-toast&gt; tag to the DOM. Position in DOM is irrelevant.\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
+      "attributes": [
+        {
+          "name": "closeable",
+          "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+          "values": []
+        },
+        { "name": "debug", "values": [] },
+        {
+          "name": "severity",
+          "description": "Severity of the toast.",
+          "values": [
+            { "name": "info" },
+            { "name": "success" },
+            { "name": "warning" },
+            { "name": "error" }
+          ]
+        },
+        {
+          "name": "timer",
+          "description": "Time in seconds before the toast disappears.",
+          "values": []
+        },
+        {
+          "name": "topOffset",
+          "description": "offsets where toasts emerge vertically",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-toast-wrapper",
+      "description": "The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.\n---\n\n\n### **Slots:**\n - _default_ - The alert components that the toast creates will render here.",
+      "attributes": [{ "name": "debug", "values": [] }],
+      "references": []
     }
   ]
 }