@statistikzh/leu 0.23.0 → 0.24.1

package/dist/vue/index.d.ts

@@ -1,20 +1,20 @@
 import type { DefineComponent } from "vue";
 
 import type { LeuAccordion } from "../Accordion.js";
+import type { LeuButtonGroup } from "../ButtonGroup.js";
 import type { LeuButton } from "../Button.js";
 import type { LeuChartWrapper } from "../ChartWrapper.js";
-import type { LeuButtonGroup } from "../ButtonGroup.js";
-import type { LeuCheckbox } from "../Checkbox.js";
-import type { LeuCheckboxGroup } from "../CheckboxGroup.js";
-import type { LeuDropdown } from "../Dropdown.js";
 import type { LeuDialog } from "../Dialog.js";
 import type { LeuChipGroup } from "../ChipGroup.js";
 import type { LeuChipLink } from "../ChipLink.js";
 import type { LeuChipRemovable } from "../ChipRemovable.js";
 import type { LeuChipSelectable, CustomEvent } from "../ChipSelectable.js";
+import type { LeuCheckbox } from "../Checkbox.js";
+import type { LeuCheckboxGroup } from "../CheckboxGroup.js";
+import type { LeuDropdown } from "../Dropdown.js";
 import type { LeuFileInput, CustomEvent } from "../FileInput.js";
-import type { LeuInput, CustomEvent } from "../Input.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";
 import type { LeuMessage, CustomEvent } from "../Message.js";
@@ -24,7 +24,7 @@ import type { LeuPopup } from "../Popup.js";
 import type { LeuProgressBar } from "../ProgressBar.js";
 import type { LeuRadio } from "../Radio.js";
 import type { LeuRadioGroup } from "../RadioGroup.js";
-import type { LeuRange } from "../Range.js";
+import type { LeuRange, CustomEvent } from "../Range.js";
 import type { LeuScrollTop } from "../ScrollTop.js";
 import type { LeuSelect } from "../Select.js";
 import type { LeuSpinner } from "../Spinner.js";
@@ -43,6 +43,13 @@ type LeuAccordionProps = {
   label?: LeuAccordion["label"];
 };
 
+type LeuButtonGroupProps = {
+  /** The value of the currently selected (active) button */
+  value?: LeuButtonGroup["value"];
+  /** When the value of the group changes by clicking a button */
+  oninput?: (e: CustomEvent<never>) => void;
+};
+
 type LeuButtonProps = {
   /** `aria-label` of the underlying button elements.
 Use it to provide a label when only an icon is visible. */
@@ -82,42 +89,6 @@ When set to `true`, a spinner will be shown in the chart container. */
   hasSlotController?: LeuChartWrapper["hasSlotController"];
 };
 
-type LeuButtonGroupProps = {
-  /** The value of the currently selected (active) button */
-  value?: LeuButtonGroup["value"];
-  /** When the value of the group changes by clicking a button */
-  oninput?: (e: CustomEvent<never>) => void;
-};
-
-type LeuCheckboxProps = {
-  /**  */
-  checked?: LeuCheckbox["checked"];
-  /**  */
-  disabled?: LeuCheckbox["disabled"];
-  /**  */
-  value?: LeuCheckbox["value"];
-  /**  */
-  name?: LeuCheckbox["name"];
-};
-
-type LeuCheckboxGroupProps = {
-  /** Defines how the checkboxes should be aligned. */
-  orientation?: LeuCheckboxGroup["orientation"];
-  /** The label of the checkbox group */
-  label?: LeuCheckboxGroup["label"];
-  /**  */
-  value?: LeuCheckboxGroup["value"];
-};
-
-type LeuDropdownProps = {
-  /**  */
-  label?: LeuDropdown["label"];
-  /**  */
-  expanded?: LeuDropdown["expanded"];
-  /**  */
-  inverted?: LeuDropdown["inverted"];
-};
-
 type LeuDialogProps = {
   /**  */
   label?: LeuDialog["label"];
@@ -176,6 +147,35 @@ type LeuChipSelectableProps = {
   oninput?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type LeuCheckboxProps = {
+  /**  */
+  checked?: LeuCheckbox["checked"];
+  /**  */
+  disabled?: LeuCheckbox["disabled"];
+  /**  */
+  value?: LeuCheckbox["value"];
+  /**  */
+  name?: LeuCheckbox["name"];
+};
+
+type LeuCheckboxGroupProps = {
+  /** Defines how the checkboxes should be aligned. */
+  orientation?: LeuCheckboxGroup["orientation"];
+  /** The label of the checkbox group */
+  label?: LeuCheckboxGroup["label"];
+  /**  */
+  value?: LeuCheckboxGroup["value"];
+};
+
+type LeuDropdownProps = {
+  /**  */
+  label?: LeuDropdown["label"];
+  /**  */
+  expanded?: LeuDropdown["expanded"];
+  /**  */
+  inverted?: LeuDropdown["inverted"];
+};
+
 type LeuFileInputProps = {
   /**  */
   label?: LeuFileInput["label"];
@@ -203,6 +203,11 @@ type LeuFileInputProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type LeuIconProps = {
+  /** The name of the icon to display. */
+  name?: LeuIcon["name"];
+};
+
 type LeuInputProps = {
   /** Disables the input element. */
   disabled?: LeuInput["disabled"];
@@ -254,11 +259,6 @@ type LeuInputProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type LeuIconProps = {
-  /** The name of the icon to display. */
-  name?: LeuIcon["name"];
-};
-
 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"];
@@ -377,25 +377,45 @@ type LeuRadioGroupProps = {
 };
 
 type LeuRangeProps = {
-  /**  */
+  /** The default value of the range slider.
+String input is parsed as a comma-separated list of numbers. */
   value?: LeuRange["defaultValue"];
-  /**  */
+  /** The minimum value of the range slider. */
   min?: LeuRange["min"];
-  /**  */
+  /** The maximum value of the range slider. */
   max?: LeuRange["max"];
-  /**  */
+  /** The step size of the range slider. */
   step?: LeuRange["step"];
   /**  */
   name?: LeuRange["name"];
-  /**  */
+  /** The label of the range slider. */
   label?: LeuRange["label"];
-  /**  */
+  /** Whether to hide the label of the range slider.
+If true, the label will still be available for screen readers
+and is only visually hidden. */
+  "hide-label"?: LeuRange["hideLabel"];
+  /** Whether the range slider is disabled. */
   disabled?: LeuRange["disabled"];
-  /**  */
+  /** Whether to use a range with two handles. */
   multiple?: LeuRange["multiple"];
-  /** Sets the value of the underlying input element(s).
-The value has to be an array if "multiple" range is used.
-Otherwise it has to be a string. */
+  /** Wheter to show tick marks below the range slider.
+One tick mark per step will be rendered. */
+  "show-ticks"?: LeuRange["showTicks"];
+  /** Whether to show the min and max labels below the range slider. */
+  "show-range-labels"?: LeuRange["showRangeLabels"];
+  /** A prefix to display before the value in the output element(s).
+Is ignored if a custom valueFormatter is provided. */
+  prefix?: LeuRange["prefix"];
+  /** A suffix to display after the value in the output element(s).
+Is ignored if a custom valueFormatter is provided. */
+  suffix?: LeuRange["suffix"];
+  /** A custom function to format the value displayed in the output element(s).
+If provided, the prefix and suffix properties will be ignored. */
+  valueFormatter?: LeuRange["valueFormatter"];
+  /** The value of the range slider.
+String input is parsed as a comma-separated list of numbers.
+In multiple mode, if only a single value is provided, the second handle will be set to the minimum value.
+In single mode, only the first value will be used. */
   value?: LeuRange["value"];
   /**  */
   valueAsArray?: LeuRange["valueAsArray"];
@@ -403,6 +423,8 @@ Otherwise it has to be a string. */
   valueLow?: LeuRange["valueLow"];
   /**  */
   valueHigh?: LeuRange["valueHigh"];
+  /**  */
+  oninput?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type LeuScrollTopProps = {
@@ -492,32 +514,6 @@ export type CustomElements = {
    */
   "leu-accordion": DefineComponent<LeuAccordionProps>;
 
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **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>;
-
-  /**
-   * 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>;
-
   /**
    * A radio input-like button group component.
    * It allows only one button to be active at a time.
@@ -532,29 +528,31 @@ export type CustomElements = {
    */
   "leu-button-group": DefineComponent<LeuButtonGroupProps>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "leu-checkbox": DefineComponent<LeuCheckboxProps>;
-
   /**
    *
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - Place the checkboxes inside the default slot.
+   *  - **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-checkbox-group": DefineComponent<LeuCheckboxGroupProps>;
+  "leu-button": DefineComponent<LeuButtonProps>;
 
   /**
-   *
+   * 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-dropdown": DefineComponent<LeuDropdownProps>;
+  "leu-chart-wrapper": DefineComponent<LeuChartWrapperProps>;
 
   /**
    *
@@ -618,6 +616,30 @@ export type CustomElements = {
    */
   "leu-chip-selectable": DefineComponent<LeuChipSelectableProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-checkbox": DefineComponent<LeuCheckboxProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Place the checkboxes inside the default slot.
+   */
+  "leu-checkbox-group": DefineComponent<LeuCheckboxGroupProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-dropdown": DefineComponent<LeuDropdownProps>;
+
   /**
    *
    * ---
@@ -629,6 +651,19 @@ export type CustomElements = {
    */
   "leu-file-input": DefineComponent<LeuFileInputProps>;
 
+  /**
+   * 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.
    * ---
@@ -652,19 +687,6 @@ export type CustomElements = {
    */
   "leu-input": DefineComponent<LeuInputProps>;
 
-  /**
-   * 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>;
-
   /**
    *
    * ---
@@ -760,6 +782,9 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Events:**
+   *  - **input**
+   *
    * ### **Methods:**
    *
    */