@statistikzh/leu 0.14.3 → 0.15.0

package/dist/vue/index.d.ts

@@ -2,7 +2,7 @@ import type { DefineComponent } from "vue";
 
 import type { LeuAccordion } from "../Accordion.js";
 import type { LeuButton } from "../Button.js";
-import type { LeuButtonGroup, CustomEvent } from "../ButtonGroup.js";
+import type { LeuButtonGroup } from "../ButtonGroup.js";
 import type { LeuCheckbox } from "../Checkbox.js";
 import type { LeuCheckboxGroup } from "../CheckboxGroup.js";
 import type { LeuChipGroup } from "../ChipGroup.js";
@@ -16,6 +16,7 @@ import type { LeuInput, CustomEvent } from "../Input.js";
 import type { LeuMenu } from "../Menu.js";
 import type { LeuMenuItem } from "../MenuItem.js";
 import type { LeuPagination, CustomEvent } from "../Pagination.js";
+import type { LeuPlaceholder } from "../Placeholder.js";
 import type { LeuPopup } from "../Popup.js";
 import type { LeuRadio } from "../Radio.js";
 import type { LeuRadioGroup } from "../RadioGroup.js";
@@ -24,6 +25,7 @@ import type { LeuScrollTop } from "../ScrollTop.js";
 import type { LeuSelect } from "../Select.js";
 import type { LeuSpinner } from "../Spinner.js";
 import type { LeuTable } from "../Table.js";
+import type { LeuChartWrapper } from "../ChartWrapper.js";
 import type { LeuVisuallyHidden } from "../VisuallyHidden.js";
 
 type LeuAccordionProps = {
@@ -33,42 +35,46 @@ type LeuAccordionProps = {
   "label-prefix"?: LeuAccordion["labelPrefix"];
   /** The expanded state of the accordion. */
   open?: LeuAccordion["open"];
-  /** The label (title) of the accordion. */
+  /** The label (title) of the accordion */
   label?: LeuAccordion["label"];
 };
 
 type LeuButtonProps = {
-  /**  */
+  /** `aria-label` of the underlying button elements.
+Use it to provide a label when only an icon is visible. */
   label?: LeuButton["label"];
-  /**  */
+  /** The size of the button. */
   size?: LeuButton["size"];
-  /**  */
+  /** The visual variant of the button. */
   variant?: LeuButton["variant"];
-  /**  */
+  /** The `type` of the underlying button element. */
   type?: LeuButton["type"];
-  /**  */
+  /** The `role` of the underlying button element. */
   componentRole?: LeuButton["componentRole"];
-  /**  */
+  /** Whether the button is disabled or not. */
   disabled?: LeuButton["disabled"];
-  /** Only taken into account if no Label and an Icon is set */
+  /** Whether the button should be round.
+Can only be applied when the button contains an icon without a visible label. */
   round?: LeuButton["round"];
-  /**  */
+  /** Whether the button is active or not.
+Depending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element. */
   active?: LeuButton["active"];
-  /** will be used on dark Background */
+  /** Wheter the colors should be inverted. For use on dark backgrounds. */
   inverted?: LeuButton["inverted"];
-  /** Only taken into account if variant is "ghost" */
+  /** Whether the button is expanded or not.
+Only has an effect on the variant `ghost` to show an expanding icon.
+If the property is not set, the icon will not be shown.
+If it is set, the icon will either show an expanded or collapsed state. */
   expanded?: LeuButton["expanded"];
   /** Alters the shape of the button to be full width of its parent container */
   fluid?: LeuButton["fluid"];
 };
 
 type LeuButtonGroupProps = {
-  /** The value of the currenty selected (active) button */
+  /** The value of the currently selected (active) button */
   value?: LeuButtonGroup["value"];
-  /**  */
-  _items?: LeuButtonGroup["_items"];
   /** When the value of the group changes by clicking a button */
-  oninput?: (e: CustomEvent<CustomEvent>) => void;
+  oninput?: (e: CustomEvent<never>) => void;
 };
 
 type LeuCheckboxProps = {
@@ -83,14 +89,12 @@ type LeuCheckboxProps = {
 };
 
 type LeuCheckboxGroupProps = {
-  /**  */
+  /** Defines how the checkboxes should be aligned. */
   orientation?: LeuCheckboxGroup["orientation"];
-  /**  */
+  /** The label of the checkbox group */
   label?: LeuCheckboxGroup["label"];
   /**  */
   value?: LeuCheckboxGroup["value"];
-  /**  */
-  items?: LeuCheckboxGroup["items"];
 };
 
 type LeuChipGroupProps = {
@@ -254,17 +258,18 @@ type LeuMenuItemProps = {
 type LeuPaginationProps = {
   /**  */
   defaultPage?: LeuPagination["defaultPage"];
-  /**  */
+  /** Number of items per page. */
   itemsPerPage?: LeuPagination["itemsPerPage"];
-  /**  */
+  /** Total number of items to paginate. */
   numOfItems?: LeuPagination["numOfItems"];
-  /**  */
-  _page?: LeuPagination["_page"];
-  /**  */
+  /** The current page number. This is a 1-based index.
+When setting this value, it will be clamped
+to the range of valid pages. */
   page?: LeuPagination["page"];
-  /**  */
+  /** The index of the first item on the current page. */
   startIndex?: LeuPagination["startIndex"];
-  /**  */
+  /** The index of the last item on the current page.
+This is exclusive, meaning it is one past the last item. */
   endIndex?: LeuPagination["endIndex"];
   /**  */
   _maxPage?: LeuPagination["_maxPage"];
@@ -272,6 +277,8 @@ type LeuPaginationProps = {
   "onleu:pagechange"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type LeuPlaceholderProps = {};
+
 type LeuPopupProps = {
   /**  */
   anchor?: LeuPopup["anchor"];
@@ -311,22 +318,12 @@ type LeuRadioProps = {
 };
 
 type LeuRadioGroupProps = {
-  /**  */
+  /** Defines how the radio buttons should be aligned. */
   orientation?: LeuRadioGroup["orientation"];
-  /**  */
+  /** The label of the radio group */
   label?: LeuRadioGroup["label"];
   /**  */
   value?: LeuRadioGroup["value"];
-  /**  */
-  handleFocusIn?: LeuRadioGroup["handleFocusIn"];
-  /**  */
-  handleKeyDown?: LeuRadioGroup["handleKeyDown"];
-  /**  */
-  handleInput?: LeuRadioGroup["handleInput"];
-  /**  */
-  _currentIndex?: LeuRadioGroup["_currentIndex"];
-  /**  */
-  items?: LeuRadioGroup["items"];
 };
 
 type LeuRangeProps = {
@@ -429,6 +426,14 @@ type LeuTableProps = {
   _resizeObserver?: LeuTable["_resizeObserver"];
 };
 
+type LeuChartWrapperProps = {
+  /** Whether the chart is currently loading or not.
+When set to `true`, a spinner will be shown in the chart container. */
+  pending?: LeuChartWrapper["pending"];
+  /**  */
+  hasSlotController?: LeuChartWrapper["hasSlotController"];
+};
+
 type LeuVisuallyHiddenProps = {};
 
 export type CustomElements = {
@@ -455,7 +460,8 @@ export type CustomElements = {
   "leu-button": DefineComponent<LeuButtonProps>;
 
   /**
-   *
+   * A radio input-like button group component.
+   * It allows only one button to be active at a time.
    * ---
    *
    *
@@ -478,6 +484,9 @@ export type CustomElements = {
    *
    * ---
    *
+   *
+   * ### **Slots:**
+   *  - _default_ - Place the checkboxes inside the default slot.
    */
   "leu-checkbox-group": DefineComponent<LeuCheckboxGroupProps>;
 
@@ -615,6 +624,18 @@ export type CustomElements = {
    */
   "leu-pagination": DefineComponent<LeuPaginationProps>;
 
+  /**
+   * * A placeholder to display when no content is available.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **title** - The placeholders title. Use a heading tag (h1-6) depeneding on your context.
+   * - **description** - A description of the placeholder. Content is wrapped in a `<p>` tag by the component.
+   * - **cta** - A call to action button like "Reload" or "Create". Add a single `<leu-button>`.
+   */
+  "leu-placeholder": DefineComponent<LeuPlaceholderProps>;
+
   /**
    *
    * ---
@@ -630,9 +651,12 @@ export type CustomElements = {
   "leu-radio": DefineComponent<LeuRadioProps>;
 
   /**
-   *
+   * Handles a group of radio buttons, allowing only one to be selected at a time. It provides keyboard navigation and manages focus within the group.
    * ---
    *
+   *
+   * ### **Slots:**
+   *  - _default_ - Place the radio buttons inside the default slot.
    */
   "leu-radio-group": DefineComponent<LeuRadioGroupProps>;
 
@@ -689,6 +713,20 @@ export type CustomElements = {
    */
   "leu-table": DefineComponent<LeuTableProps>;
 
+  /**
+   * A wrapper element for charts.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.
+   * - **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.
+   * - **chart** - The actual chart
+   * - **caption** - A caption for the chart, e.g. a source or explanation of the data.
+   * - **download** - A download button or dropdown to export the chart in different formats.
+   */
+  "leu-chart-wrapper": DefineComponent<LeuChartWrapperProps>;
+
   /**
    *
    * ---