@statistikzh/leu 0.5.1 → 0.7.0

package/dist/vue/index.d.ts

@@ -11,6 +11,7 @@ import type { LeuChipLink } from "../ChipLink.js";
 import type { LeuChipRemovable } from "../ChipRemovable.js";
 import type { LeuChipSelectable, CustomEvent } from "../ChipSelectable.js";
 import type { LeuDropdown } from "../Dropdown.js";
+import type { LeuIcon } from "../Icon.js";
 import type { LeuInput, CustomEvent } from "../Input.js";
 import type { LeuMenu } from "../Menu.js";
 import type { LeuMenuItem } from "../MenuItem.js";
@@ -59,10 +60,6 @@ type LeuButtonProps = {
   /**  */
   label?: LeuButton["label"];
   /**  */
-  icon?: LeuButton["icon"];
-  /** Only taken into account if Label and no Icon is set */
-  iconPosition?: LeuButton["iconPosition"];
-  /**  */
   size?: LeuButton["size"];
   /**  */
   variant?: LeuButton["variant"];
@@ -99,15 +96,9 @@ type LeuCheckboxProps = {
   /**  */
   disabled?: LeuCheckbox["disabled"];
   /**  */
-  identifier?: LeuCheckbox["identifier"];
-  /**  */
   value?: LeuCheckbox["value"];
   /**  */
   name?: LeuCheckbox["name"];
-  /**  */
-  label?: LeuCheckbox["label"];
-  /**  */
-  checkIcon?: LeuCheckbox["checkIcon"];
 };
 
 type LeuCheckboxGroupProps = {
@@ -130,7 +121,8 @@ type LeuChipGroupProps = {
   "heading-level"?: LeuChipGroup["headingLevel"];
   /**  */
   label?: LeuChipGroup["label"];
-  /**  */
+  /** Checks the items with the given values.
+If the selectionMode is single, only the first item with the given value is checked. */
   value?: LeuChipGroup["value"];
 };
 
@@ -144,8 +136,6 @@ type LeuChipLinkProps = {
   /**  */
   inverted?: LeuChipLink["inverted"];
   /**  */
-  label?: LeuChipLink["label"];
-  /**  */
   ""?: LeuChipLink[""];
 };
 
@@ -155,8 +145,6 @@ type LeuChipRemovableProps = {
   /**  */
   inverted?: LeuChipRemovable["inverted"];
   /**  */
-  label?: LeuChipRemovable["label"];
-  /**  */
   ""?: LeuChipRemovable[""];
   /** Dispatched when the user clicks on the chip */
   onRemove?: (e: CustomEvent<never>) => void;
@@ -167,19 +155,15 @@ type LeuChipSelectableProps = {
   ""?: LeuChipSelectable[""];
   /** The size of the chip. Not supported for radio variant. */
   size?: LeuChipSelectable["size"];
-  /** The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
-- `toggle`: The chip behaves like a toggle button.
-- `radio`: The chip behaves like a radio button. */
+  /** `toggle` or `radio`. Determines if only one or multiple chips can be selected. */
   variant?: LeuChipSelectable["variant"];
-  /**  */
-  selected?: LeuChipSelectable["selected"];
-  /**  */
+  /** Whether the chip is selected. */
+  checked?: LeuChipSelectable["checked"];
+  /** The value of the chip. */
   value?: LeuChipSelectable["value"];
   /**  */
   inverted?: LeuChipSelectable["inverted"];
   /**  */
-  label?: LeuChipSelectable["label"];
-  /**  */
   ""?: LeuChipSelectable[""];
   /**  */
   onInput?: (e: CustomEvent<CustomEvent>) => void;
@@ -191,11 +175,21 @@ type LeuDropdownProps = {
   /**  */
   expanded?: LeuDropdown["expanded"];
   /**  */
+  hasSlotController?: LeuDropdown["hasSlotController"];
+  /**  */
   _documentClickHandler?: LeuDropdown["_documentClickHandler"];
   /**  */
-  _handleMenuItemClick?: LeuDropdown["_handleMenuItemClick"];
+  _menuItemClickHandler?: LeuDropdown["_menuItemClickHandler"];
+  /** Close the dropdown when the user presses the Escape or the Tab key.
+Navigating the menu with the arrow keys is handled by the menu itself. */
+  _keyDownMenuHandler?: LeuDropdown["_keyDownMenuHandler"];
   /**  */
-  menuItems?: LeuDropdown["menuItems"];
+  _toggleRef?: LeuDropdown["_toggleRef"];
+};
+
+type LeuIconProps = {
+  /** The name of the icon to display. */
+  name?: LeuIcon["name"];
 };
 
 type LeuInputProps = {
@@ -241,35 +235,34 @@ type LeuInputProps = {
   step?: LeuInput["step"];
   /**  */
   _validity?: LeuInput["_validity"];
-
+  /**  */
+  valueAsNumber?: LeuInput["valueAsNumber"];
   /** Dispatched when the value of the input element changes. */
   onInput?: (e: CustomEvent<CustomEvent>) => void;
   /** Dispatched when the value of the input element changes and the input element loses focus. */
   onChange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type LeuMenuProps = {};
+type LeuMenuProps = {
+  /** This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'. */
+  selects?: LeuMenu["selects"];
+  /**  */
+  value?: LeuMenu["value"];
+};
 
 type LeuMenuItemProps = {
-  /** Can be either an icon name or a text
-If no icon with this value is found, it will be displayed as text.
-If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed. */
-  before?: LeuMenuItem["before"];
-  /** Can be either an icon name or a text
-If no icon with this value is found, it will be displayed as text
-If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed. */
-  after?: LeuMenuItem["after"];
-  /**  */
+  /** Defines if the item is selected or checked */
   active?: LeuMenuItem["active"];
-  /** A programmatic way to highlight the menu item like it is hovered.
-This is just a visual effect and does not change the active state. */
-  highlighted?: LeuMenuItem["highlighted"];
-  /**  */
+  /** Disables the underlying button or link */
   disabled?: LeuMenuItem["disabled"];
-  /**  */
-  label?: LeuMenuItem["label"];
-  /**  */
+  /** If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link */
+  tabbable?: LeuMenuItem["tabbable"];
+  /** The href of the underlying link */
   href?: LeuMenuItem["href"];
+  /** The value of the item. It must not contain commas. See `getValue()` */
+  value?: LeuMenuItem["value"];
+  /** The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.` */
+  componentRole?: LeuMenuItem["componentRole"];
 };
 
 type LeuPaginationProps = {
@@ -279,10 +272,7 @@ type LeuPaginationProps = {
   itemsPerPage?: LeuPagination["itemsPerPage"];
   /**  */
   numOfItems?: LeuPagination["numOfItems"];
-  /** Internal page state that contains an
-already clamped page number. Should only
-be accessed through the `page` getter and
-setter. */
+  /**  */
   _page?: LeuPagination["_page"];
   /**  */
   page?: LeuPagination["page"];
@@ -329,13 +319,9 @@ type LeuRadioProps = {
   /**  */
   disabled?: LeuRadio["disabled"];
   /**  */
-  identifier?: LeuRadio["identifier"];
-  /**  */
   value?: LeuRadio["value"];
   /**  */
   name?: LeuRadio["name"];
-  /**  */
-  label?: LeuRadio["label"];
 };
 
 type LeuRadioGroupProps = {
@@ -365,30 +351,34 @@ type LeuScrollTopProps = {
 };
 
 type LeuSelectProps = {
-  /**  */
+  /** List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them. */
+  value?: LeuSelect["value"];
+  /** Reflects to the name attribute of the hidden input field that would be used in a form */
+  name?: LeuSelect["name"];
+  /** The expanded state of the popup */
   open?: LeuSelect["open"];
-  /**  */
+  /** The label of the select */
   label?: LeuSelect["label"];
-  /**  */
-  options?: LeuSelect["options"];
-  /**  */
-  value?: LeuSelect["value"];
-  /**  */
+  /** Show a clearable button to reset the value */
   clearable?: LeuSelect["clearable"];
-  /**  */
+  /** If the select should be disabled */
   disabled?: LeuSelect["disabled"];
-  /**  */
+  /** Show an input field to filter the options inside the popup */
   filterable?: LeuSelect["filterable"];
-  /**  */
+  /** Allow multiple selections */
   multiple?: LeuSelect["multiple"];
   /**  */
-  optionFilter?: LeuSelect["optionFilter"];
+  _optionFilter?: LeuSelect["_optionFilter"];
+  /**  */
+  _hasFilterResults?: LeuSelect["_hasFilterResults"];
+  /**  */
+  _displayValue?: LeuSelect["_displayValue"];
   /**  */
-  menuRef?: LeuSelect["menuRef"];
+  _optionFilterRef?: LeuSelect["_optionFilterRef"];
   /**  */
-  optionFilterRef?: LeuSelect["optionFilterRef"];
+  _toggleButtonRef?: LeuSelect["_toggleButtonRef"];
   /**  */
-  toggleButtonRef?: LeuSelect["toggleButtonRef"];
+  _menuRef?: LeuSelect["_menuRef"];
 };
 
 type LeuTableProps = {
@@ -474,6 +464,11 @@ export type CustomElements = {
    *
    * ---
    *
+   *
+   * ### **Slots:**
+   *  - **before** - The icon to display before the label
+   * - **after** - The icon to display after the label
+   * - _default_ - The label of the button or the icon if no label is set
    */
   "leu-button": DefineComponent<LeuButtonProps>;
 
@@ -560,6 +555,19 @@ export type CustomElements = {
    */
   "leu-dropdown": DefineComponent<LeuDropdownProps>;
 
+  /**
+   * A component to render all defined zhWeb icons.
+   * The `fill` of the icon is set to `currentColor` and
+   * can be overriden by setting the css `color` property.
+   * If the icon name is not found, a placeholder will be displayed.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--leu-icon-size** - The size of the icon. _(default: undefined)_
+   */
+  "leu-icon": DefineComponent<LeuIconProps>;
+
   /**
    * A text input element.
    * ---
@@ -577,7 +585,7 @@ export type CustomElements = {
    * e.g.
    * `tooLong(this.maxlength)`
    * This way the framework user can create reasonable validation messages
-   * - **renderErrorMessages(validityState: _ValidityState_, validationMessages: _Object_, idRef: _String_): __** - Creates an error list with an item for the given validity state.
+   * - **renderErrorMessages(): _TemplateResult | nothing_** - Creates an error list with an item for the given validity state.
    */
   "leu-input": DefineComponent<LeuInputProps>;
 
@@ -593,6 +601,9 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Methods:**
+   *  - **getValue(): _string_** - Returns the value of the item. If `value` is not set, it will return the inner text
+   *
    * ### **Slots:**
    *  - _default_ - The label of the menu item
    */
@@ -642,7 +653,12 @@ export type CustomElements = {
    *
    *
    * ### **Methods:**
-   *  - **selectOption(option: _*_)** - Adds or replaces the given option in the options array.
+   *  - **_updateMenuItems(changed)** - Apply the current state to the menu items.
+   * - Set the active property when the value property has changed.
+   * - Hide menu items that do not match the filter.
+   * - **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.
+   * - **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.
+   * - **_handlePopupFocusOut(event)** - Close the dropdown if the focus moves outside the component.
    *
    * ### **Slots:**
    *  - **before** - Optional content the appears before the option list