@statistikzh/leu 0.24.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 { LeuButton } from "../Button.js";
 import type { LeuButtonGroup } from "../ButtonGroup.js";
-import type { LeuCheckbox } from "../Checkbox.js";
-import type { LeuCheckboxGroup } from "../CheckboxGroup.js";
+import type { LeuButton } from "../Button.js";
 import type { LeuChartWrapper } from "../ChartWrapper.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 { LeuIcon } from "../Icon.js";
 import type { LeuInput, CustomEvent } from "../Input.js";
-import type { LeuDialog } from "../Dialog.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. */
@@ -74,33 +81,6 @@ If it is set, the icon will either show an expanded or collapsed state. */
   fluid?: LeuButton["fluid"];
 };
 
-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 LeuChartWrapperProps = {
   /** Whether the chart is currently loading or not.
 When set to `true`, a spinner will be shown in the chart container. */
@@ -109,6 +89,15 @@ When set to `true`, a spinner will be shown in the chart container. */
   hasSlotController?: LeuChartWrapper["hasSlotController"];
 };
 
+type LeuDialogProps = {
+  /**  */
+  label?: LeuDialog["label"];
+  /**  */
+  sublabel?: LeuDialog["sublabel"];
+  /**  */
+  open?: LeuDialog["open"];
+};
+
 type LeuChipGroupProps = {
   /**  */
   inverted?: LeuChipGroup["inverted"];
@@ -158,6 +147,26 @@ 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"];
@@ -250,15 +259,6 @@ type LeuInputProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type LeuDialogProps = {
-  /**  */
-  label?: LeuDialog["label"];
-  /**  */
-  sublabel?: LeuDialog["sublabel"];
-  /**  */
-  open?: LeuDialog["open"];
-};
-
 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,7 +377,8 @@ 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"];
@@ -411,9 +412,10 @@ Is ignored if a custom valueFormatter is provided. */
   /** 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"];
-  /** 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. */
+  /** 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"];
@@ -421,6 +423,8 @@ Otherwise it has to be a string. */
   valueLow?: LeuRange["valueLow"];
   /**  */
   valueHigh?: LeuRange["valueHigh"];
+  /**  */
+  oninput?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type LeuScrollTopProps = {
@@ -510,18 +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 radio input-like button group component.
    * It allows only one button to be active at a time.
@@ -536,22 +528,17 @@ 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.
@@ -567,6 +554,13 @@ export type CustomElements = {
    */
   "leu-chart-wrapper": DefineComponent<LeuChartWrapperProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-dialog": DefineComponent<LeuDialogProps>;
+
   /**
    *
    * ---
@@ -622,6 +616,23 @@ 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>;
+
   /**
    *
    * ---
@@ -676,13 +687,6 @@ export type CustomElements = {
    */
   "leu-input": DefineComponent<LeuInputProps>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "leu-dialog": DefineComponent<LeuDialogProps>;
-
   /**
    *
    * ---
@@ -778,6 +782,9 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Events:**
+   *  - **input**
+   *
    * ### **Methods:**
    *
    */

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -65,6 +65,33 @@
             "events": []
           }
         },
+        {
+          "name": "leu-button-group",
+          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [{ "name": "", "description": "Slot for the buttons" }],
+          "events": [
+            {
+              "name": "input",
+              "description": "When the value of the group changes by clicking a button"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The value of the currently selected (active) button"
+              }
+            ],
+            "events": [
+              {
+                "name": "input",
+                "description": "When the value of the group changes by clicking a button"
+              }
+            ]
+          }
+        },
         {
           "name": "leu-button",
           "description": "\n---\n\n\n### **Slots:**\n - **before** - The icon to display before the label\n- **after** - The icon to display after the label\n- _default_ - The label of the button or the icon if no label is set",
@@ -211,106 +238,6 @@
             "events": []
           }
         },
-        {
-          "name": "leu-button-group",
-          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "Slot for the buttons" }],
-          "events": [
-            {
-              "name": "input",
-              "description": "When the value of the group changes by clicking a button"
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The value of the currently selected (active) button"
-              }
-            ],
-            "events": [
-              {
-                "name": "input",
-                "description": "When the value of the group changes by clicking a button"
-              }
-            ]
-          }
-        },
-        {
-          "name": "leu-checkbox",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "checked",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "disabled",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "value",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            { "name": "name", "value": { "type": "string", "default": "\"\"" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "checked", "type": "boolean" },
-              { "name": "disabled", "type": "boolean" },
-              { "name": "value", "type": "string" },
-              { "name": "name", "type": "string" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "leu-checkbox-group",
-          "description": "\n---\n\n\n### **Slots:**\n - _default_ - Place the checkboxes inside the default slot.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "orientation",
-              "description": "Defines how the checkboxes should be aligned.",
-              "value": {
-                "type": "\"horizontal\" | \"vertical\"",
-                "default": "\"horizontal\""
-              }
-            },
-            {
-              "name": "label",
-              "description": "The label of the checkbox group",
-              "value": { "type": "string | undefined" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Place the checkboxes inside the default slot."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "orientation",
-                "description": "Defines how the checkboxes should be aligned.",
-                "type": "\"horizontal\" | \"vertical\""
-              },
-              {
-                "name": "label",
-                "description": "The label of the checkbox group",
-                "type": "string | undefined"
-              },
-              { "name": "value" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "leu-chart-wrapper",
           "description": "A wrapper element for charts.\n---\n\n\n### **Slots:**\n - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.\n- **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.\n- **chart** - The actual chart\n- **caption** - A caption for the chart, e.g. a source or explanation of the data.\n- **download** - A download button or dropdown to export the chart in different formats.",
@@ -354,6 +281,34 @@
             "events": []
           }
         },
+        {
+          "name": "leu-dialog",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "sublabel",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "open",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "label", "type": "string" },
+              { "name": "sublabel", "type": "string" },
+              { "name": "open", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-chip-group",
           "description": "\n---\n\n\n### **Slots:**\n - _default_ - Place leu-chip-* elements inside this slot\n\n### **CSS Properties:**\n - **--leu-chip-group-gap** - The gap between the chips _(default: undefined)_",
@@ -549,6 +504,79 @@
             "events": [{ "name": "input", "type": "CustomEvent" }]
           }
         },
+        {
+          "name": "leu-checkbox",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "checked",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            { "name": "name", "value": { "type": "string", "default": "\"\"" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "checked", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "value", "type": "string" },
+              { "name": "name", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "leu-checkbox-group",
+          "description": "\n---\n\n\n### **Slots:**\n - _default_ - Place the checkboxes inside the default slot.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "orientation",
+              "description": "Defines how the checkboxes should be aligned.",
+              "value": {
+                "type": "\"horizontal\" | \"vertical\"",
+                "default": "\"horizontal\""
+              }
+            },
+            {
+              "name": "label",
+              "description": "The label of the checkbox group",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Place the checkboxes inside the default slot."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "orientation",
+                "description": "Defines how the checkboxes should be aligned.",
+                "type": "\"horizontal\" | \"vertical\""
+              },
+              {
+                "name": "label",
+                "description": "The label of the checkbox group",
+                "type": "string | undefined"
+              },
+              { "name": "value" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-dropdown",
           "description": "\n---\n",
@@ -921,34 +949,6 @@
             ]
           }
         },
-        {
-          "name": "leu-dialog",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "sublabel",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "open",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "label", "type": "string" },
-              { "name": "sublabel", "type": "string" },
-              { "name": "open", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "leu-menu",
           "description": "\n---\n",
@@ -1428,11 +1428,12 @@
         },
         {
           "name": "leu-range",
-          "description": "\n---\n\n\n### **Methods:**\n ",
+          "description": "\n---\n\n\n### **Events:**\n - **input**\n\n### **Methods:**\n ",
           "doc-url": "",
           "attributes": [
             {
               "name": "value",
+              "description": "The default value of the range slider.\nString input is parsed as a comma-separated list of numbers.",
               "value": { "type": "array", "default": "[50]" }
             },
             {
@@ -1495,10 +1496,14 @@
               "value": { "type": "string", "default": "\"\"" }
             }
           ],
-          "events": [],
+          "events": [{ "name": "input", "type": "CustomEvent" }],
           "js": {
             "properties": [
-              { "name": "defaultValue", "type": "array" },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the range slider.\nString input is parsed as a comma-separated list of numbers.",
+                "type": "array"
+              },
               {
                 "name": "min",
                 "description": "The minimum value of the range slider.",
@@ -1562,13 +1567,14 @@
               },
               {
                 "name": "value",
-                "description": "Sets the value of the underlying input element(s).\nThe value has to be an array if \"multiple\" range is used.\nOtherwise it has to be a string."
+                "description": "The value of the range slider.\nString input is parsed as a comma-separated list of numbers.\nIn multiple mode, if only a single value is provided, the second handle will be set to the minimum value.\nIn single mode, only the first value will be used.",
+                "type": "string"
               },
-              { "name": "valueAsArray" },
-              { "name": "valueLow" },
-              { "name": "valueHigh" }
+              { "name": "valueAsArray", "type": "InternalRangeValue" },
+              { "name": "valueLow", "type": "number" },
+              { "name": "valueHigh", "type": "number" }
             ],
-            "events": []
+            "events": [{ "name": "input", "type": "CustomEvent" }]
           }
         },
         {

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",