@statistikzh/leu 0.23.0 → 0.24.0

package/dist/vue/index.d.ts

@@ -2,19 +2,19 @@ import type { DefineComponent } from "vue";
 
 import type { LeuAccordion } from "../Accordion.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 { LeuChartWrapper } from "../ChartWrapper.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 { 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 { LeuDialog } from "../Dialog.js";
 import type { LeuMenu } from "../Menu.js";
 import type { LeuMenuItem } from "../MenuItem.js";
 import type { LeuMessage, CustomEvent } from "../Message.js";
@@ -74,14 +74,6 @@ If it is set, the icon will either show an expanded or collapsed state. */
   fluid?: LeuButton["fluid"];
 };
 
-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 LeuButtonGroupProps = {
   /** The value of the currently selected (active) button */
   value?: LeuButtonGroup["value"];
@@ -109,22 +101,12 @@ type LeuCheckboxGroupProps = {
   value?: LeuCheckboxGroup["value"];
 };
 
-type LeuDropdownProps = {
-  /**  */
-  label?: LeuDropdown["label"];
-  /**  */
-  expanded?: LeuDropdown["expanded"];
-  /**  */
-  inverted?: LeuDropdown["inverted"];
-};
-
-type LeuDialogProps = {
-  /**  */
-  label?: LeuDialog["label"];
-  /**  */
-  sublabel?: LeuDialog["sublabel"];
+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"];
   /**  */
-  open?: LeuDialog["open"];
+  hasSlotController?: LeuChartWrapper["hasSlotController"];
 };
 
 type LeuChipGroupProps = {
@@ -176,6 +158,15 @@ type LeuChipSelectableProps = {
   oninput?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type LeuDropdownProps = {
+  /**  */
+  label?: LeuDropdown["label"];
+  /**  */
+  expanded?: LeuDropdown["expanded"];
+  /**  */
+  inverted?: LeuDropdown["inverted"];
+};
+
 type LeuFileInputProps = {
   /**  */
   label?: LeuFileInput["label"];
@@ -203,6 +194,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,9 +250,13 @@ type LeuInputProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type LeuIconProps = {
-  /** The name of the icon to display. */
-  name?: LeuIcon["name"];
+type LeuDialogProps = {
+  /**  */
+  label?: LeuDialog["label"];
+  /**  */
+  sublabel?: LeuDialog["sublabel"];
+  /**  */
+  open?: LeuDialog["open"];
 };
 
 type LeuMenuProps = {
@@ -379,20 +379,38 @@ type LeuRadioGroupProps = {
 type LeuRangeProps = {
   /**  */
   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"];
+  /** 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"];
   /** 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. */
@@ -504,20 +522,6 @@ export type CustomElements = {
    */
   "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.
@@ -550,18 +554,18 @@ export type CustomElements = {
   "leu-checkbox-group": DefineComponent<LeuCheckboxGroupProps>;
 
   /**
-   *
+   * A wrapper element for charts.
    * ---
    *
-   */
-  "leu-dropdown": DefineComponent<LeuDropdownProps>;
-
-  /**
-   *
-   * ---
    *
+   * ### **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-dialog": DefineComponent<LeuDialogProps>;
+  "leu-chart-wrapper": DefineComponent<LeuChartWrapperProps>;
 
   /**
    *
@@ -618,6 +622,13 @@ export type CustomElements = {
    */
   "leu-chip-selectable": DefineComponent<LeuChipSelectableProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-dropdown": DefineComponent<LeuDropdownProps>;
+
   /**
    *
    * ---
@@ -629,6 +640,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.
    * ---
@@ -653,17 +677,11 @@ 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>;
+  "leu-dialog": DefineComponent<LeuDialogProps>;
 
   /**
    *

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.23.0",
+  "version": "0.24.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -211,49 +211,6 @@
             "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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "pending",
-              "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "title",
-              "description": "The title of the chart. Use a heading tag (h2-4) depending on your context."
-            },
-            {
-              "name": "description",
-              "description": "A description of the chart. Content is wrapped in a `<p>` tag by the component."
-            },
-            { "name": "chart", "description": "The actual chart" },
-            {
-              "name": "caption",
-              "description": "A caption for the chart, e.g. a source or explanation of the data."
-            },
-            {
-              "name": "download",
-              "description": "A download button or dropdown to export the chart in different formats."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "pending",
-                "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
-                "type": "boolean"
-              },
-              { "name": "hasSlotController" }
-            ],
-            "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",
@@ -355,57 +312,44 @@
           }
         },
         {
-          "name": "leu-dropdown",
-          "description": "\n---\n",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "label",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "expanded",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "inverted",
+              "name": "pending",
+              "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "label", "type": "string" },
-              { "name": "expanded", "type": "boolean" },
-              { "name": "inverted", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "leu-dialog",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
+          "slots": [
             {
-              "name": "label",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "title",
+              "description": "The title of the chart. Use a heading tag (h2-4) depending on your context."
             },
             {
-              "name": "sublabel",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "description",
+              "description": "A description of the chart. Content is wrapped in a `<p>` tag by the component."
             },
+            { "name": "chart", "description": "The actual chart" },
             {
-              "name": "open",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "caption",
+              "description": "A caption for the chart, e.g. a source or explanation of the data."
+            },
+            {
+              "name": "download",
+              "description": "A download button or dropdown to export the chart in different formats."
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "label", "type": "string" },
-              { "name": "sublabel", "type": "string" },
-              { "name": "open", "type": "boolean" }
+              {
+                "name": "pending",
+                "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
+                "type": "boolean"
+              },
+              { "name": "hasSlotController" }
             ],
             "events": []
           }
@@ -605,6 +549,34 @@
             "events": [{ "name": "input", "type": "CustomEvent" }]
           }
         },
+        {
+          "name": "leu-dropdown",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "expanded",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "inverted",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "label", "type": "string" },
+              { "name": "expanded", "type": "boolean" },
+              { "name": "inverted", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-file-input",
           "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
@@ -686,6 +658,29 @@
             ]
           }
         },
+        {
+          "name": "leu-icon",
+          "description": "A component to render all defined zhWeb icons.\nThe `fill` of the icon is set to `currentColor` and\ncan be overriden by setting the css `color` property.\nIf the icon name is not found, a placeholder will be displayed.\n---\n\n\n### **CSS Properties:**\n - **--leu-icon-size** - The size of the icon. _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the icon to display.",
+              "value": { "type": "IconPathName | \"\"", "default": "\"\"" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "The name of the icon to display.",
+                "type": "IconPathName | \"\""
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-input",
           "description": "A text input element.\n---\n\n\n### **Events:**\n - **input** - Dispatched when the value of the input element changes.\n- **change** - Dispatched when the value of the input element changes and the input element loses focus.\n\n### **Methods:**\n \n\n\n\n\n\n\n- **checkValidity()** - Check input validation\n\n",
@@ -927,24 +922,29 @@
           }
         },
         {
-          "name": "leu-icon",
-          "description": "A component to render all defined zhWeb icons.\nThe `fill` of the icon is set to `currentColor` and\ncan be overriden by setting the css `color` property.\nIf the icon name is not found, a placeholder will be displayed.\n---\n\n\n### **CSS Properties:**\n - **--leu-icon-size** - The size of the icon. _(default: undefined)_",
+          "name": "leu-dialog",
+          "description": "\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "name",
-              "description": "The name of the icon to display.",
-              "value": { "type": "IconPathName | \"\"", "default": "\"\"" }
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "sublabel",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "open",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "name",
-                "description": "The name of the icon to display.",
-                "type": "IconPathName | \"\""
-              }
+              { "name": "label", "type": "string" },
+              { "name": "sublabel", "type": "string" },
+              { "name": "open", "type": "boolean" }
             ],
             "events": []
           }
@@ -1435,37 +1435,131 @@
               "name": "value",
               "value": { "type": "array", "default": "[50]" }
             },
-            { "name": "min", "value": { "type": "number", "default": "0" } },
-            { "name": "max", "value": { "type": "number", "default": "100" } },
-            { "name": "step", "value": { "type": "number", "default": "1" } },
+            {
+              "name": "min",
+              "description": "The minimum value of the range slider.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "max",
+              "description": "The maximum value of the range slider.",
+              "value": { "type": "number", "default": "100" }
+            },
+            {
+              "name": "step",
+              "description": "The step size of the range slider.",
+              "value": { "type": "number", "default": "1" }
+            },
             {
               "name": "name",
               "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "label",
+              "description": "The label of the range slider.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "hide-label",
+              "description": "Whether to hide the label of the range slider.\nIf true, the label will still be available for screen readers\nand is only visually hidden.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "disabled",
+              "description": "Whether the range slider is disabled.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "multiple",
+              "description": "Whether to use a range with two handles.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-ticks",
+              "description": "Wheter to show tick marks below the range slider.\nOne tick mark per step will be rendered.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-range-labels",
+              "description": "Whether to show the min and max labels below the range slider.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "prefix",
+              "description": "A prefix to display before the value in the output element(s).\nIs ignored if a custom valueFormatter is provided.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "suffix",
+              "description": "A suffix to display after the value in the output element(s).\nIs ignored if a custom valueFormatter is provided.",
+              "value": { "type": "string", "default": "\"\"" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
               { "name": "defaultValue", "type": "array" },
-              { "name": "min", "type": "number" },
-              { "name": "max", "type": "number" },
-              { "name": "step", "type": "number" },
+              {
+                "name": "min",
+                "description": "The minimum value of the range slider.",
+                "type": "number"
+              },
+              {
+                "name": "max",
+                "description": "The maximum value of the range slider.",
+                "type": "number"
+              },
+              {
+                "name": "step",
+                "description": "The step size of the range slider.",
+                "type": "number"
+              },
               { "name": "name", "type": "string" },
-              { "name": "label", "type": "string" },
-              { "name": "disabled", "type": "boolean" },
-              { "name": "multiple", "type": "boolean" },
+              {
+                "name": "label",
+                "description": "The label of the range slider.",
+                "type": "string"
+              },
+              {
+                "name": "hideLabel",
+                "description": "Whether to hide the label of the range slider.\nIf true, the label will still be available for screen readers\nand is only visually hidden.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Whether the range slider is disabled.",
+                "type": "boolean"
+              },
+              {
+                "name": "multiple",
+                "description": "Whether to use a range with two handles.",
+                "type": "boolean"
+              },
+              {
+                "name": "showTicks",
+                "description": "Wheter to show tick marks below the range slider.\nOne tick mark per step will be rendered.",
+                "type": "boolean"
+              },
+              {
+                "name": "showRangeLabels",
+                "description": "Whether to show the min and max labels below the range slider.",
+                "type": "boolean"
+              },
+              {
+                "name": "prefix",
+                "description": "A prefix to display before the value in the output element(s).\nIs ignored if a custom valueFormatter is provided.",
+                "type": "string"
+              },
+              {
+                "name": "suffix",
+                "description": "A suffix to display after the value in the output element(s).\nIs ignored if a custom valueFormatter is provided.",
+                "type": "string"
+              },
+              {
+                "name": "valueFormatter",
+                "description": "A custom function to format the value displayed in the output element(s).\nIf provided, the prefix and suffix properties will be ignored.",
+                "type": "(value: number) => string | undefined"
+              },
               {
                 "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."

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -19,7 +19,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/statistikzh/leu.git"
+    "url": "git+https://github.com/statistikzh/leu.git"
   },
   "homepage": "https://github.com/statistikzh/leu/",
   "scripts": {
@@ -127,5 +127,9 @@
   },
   "esm.sh": {
     "bundle": false
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
   }
 }