@statistikzh/leu 0.24.1 → 0.25.0

package/dist/vue/index.d.ts

@@ -1,16 +1,16 @@
 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 { LeuButtonGroup } from "../ButtonGroup.js";
 import type { LeuChartWrapper } from "../ChartWrapper.js";
-import type { LeuDialog } from "../Dialog.js";
+import type { LeuCheckbox } from "../Checkbox.js";
+import type { LeuCheckboxGroup } from "../CheckboxGroup.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 { LeuDialog } from "../Dialog.js";
 import type { LeuDropdown } from "../Dropdown.js";
 import type { LeuFileInput, CustomEvent } from "../FileInput.js";
 import type { LeuIcon } from "../Icon.js";
@@ -43,13 +43,6 @@ 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. */
@@ -81,6 +74,13 @@ 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 LeuChartWrapperProps = {
   /** Whether the chart is currently loading or not.
 When set to `true`, a spinner will be shown in the chart container. */
@@ -89,13 +89,24 @@ When set to `true`, a spinner will be shown in the chart container. */
   hasSlotController?: LeuChartWrapper["hasSlotController"];
 };
 
-type LeuDialogProps = {
+type LeuCheckboxProps = {
   /**  */
-  label?: LeuDialog["label"];
+  required?: LeuCheckbox["required"];
   /**  */
-  sublabel?: LeuDialog["sublabel"];
+  checked?: LeuCheckbox["defaultChecked"];
   /**  */
-  open?: LeuDialog["open"];
+  value?: LeuCheckbox["value"];
+  /**  */
+  checked?: LeuCheckbox["checked"];
+};
+
+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 LeuChipGroupProps = {
@@ -147,24 +158,13 @@ type LeuChipSelectableProps = {
   oninput?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type LeuCheckboxProps = {
-  /**  */
-  checked?: LeuCheckbox["checked"];
-  /**  */
-  disabled?: LeuCheckbox["disabled"];
+type LeuDialogProps = {
   /**  */
-  value?: LeuCheckbox["value"];
+  label?: LeuDialog["label"];
   /**  */
-  name?: LeuCheckbox["name"];
-};
-
-type LeuCheckboxGroupProps = {
-  /** Defines how the checkboxes should be aligned. */
-  orientation?: LeuCheckboxGroup["orientation"];
-  /** The label of the checkbox group */
-  label?: LeuCheckboxGroup["label"];
+  sublabel?: LeuDialog["sublabel"];
   /**  */
-  value?: LeuCheckboxGroup["value"];
+  open?: LeuDialog["open"];
 };
 
 type LeuDropdownProps = {
@@ -194,10 +194,6 @@ type LeuFileInputProps = {
   /**  */
   input?: LeuFileInput["input"];
   /**  */
-  form?: LeuFileInput["form"];
-  /**  */
-  name?: LeuFileInput["name"];
-  /**  */
   oninput?: (e: CustomEvent<CustomEvent>) => void;
   /**  */
   onchange?: (e: CustomEvent<CustomEvent>) => void;
@@ -217,8 +213,6 @@ type LeuInputProps = {
   clearable?: LeuInput["clearable"];
   /** The value of the input element. */
   value?: LeuInput["value"];
-  /** The name of the input element. */
-  name?: LeuInput["name"];
   /** A custom error that is completely independent of the validity state. Useful for displaying server side errors. */
   error?: LeuInput["error"];
   /** The label of the input element */
@@ -515,30 +509,30 @@ export type CustomElements = {
   "leu-accordion": DefineComponent<LeuAccordionProps>;
 
   /**
-   * A radio input-like button group component.
-   * It allows only one button to be active at a time.
-   * ---
    *
+   * ---
    *
-   * ### **Events:**
-   *  - **input** - When the value of the group changes by clicking a button
    *
    * ### **Slots:**
-   *  - _default_ - Slot for the buttons
+   *  - **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-group": DefineComponent<LeuButtonGroupProps>;
+  "leu-button": DefineComponent<LeuButtonProps>;
 
   /**
-   *
+   * A radio input-like button group component.
+   * It allows only one button to be active at a time.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **input** - When the value of the group changes by clicking a button
+   *
    * ### **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
+   *  - _default_ - Slot for the buttons
    */
-  "leu-button": DefineComponent<LeuButtonProps>;
+  "leu-button-group": DefineComponent<LeuButtonGroupProps>;
 
   /**
    * A wrapper element for charts.
@@ -559,7 +553,17 @@ export type CustomElements = {
    * ---
    *
    */
-  "leu-dialog": DefineComponent<LeuDialogProps>;
+  "leu-checkbox": DefineComponent<LeuCheckboxProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Place the checkboxes inside the default slot.
+   */
+  "leu-checkbox-group": DefineComponent<LeuCheckboxGroupProps>;
 
   /**
    *
@@ -621,17 +625,7 @@ export type CustomElements = {
    * ---
    *
    */
-  "leu-checkbox": DefineComponent<LeuCheckboxProps>;
-
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - Place the checkboxes inside the default slot.
-   */
-  "leu-checkbox-group": DefineComponent<LeuCheckboxGroupProps>;
+  "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.24.1",
+  "version": "0.25.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -65,33 +65,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-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",
@@ -238,6 +211,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-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.",
@@ -282,29 +282,70 @@
           }
         },
         {
-          "name": "leu-dialog",
+          "name": "leu-checkbox",
           "description": "\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "label",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "required",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "sublabel",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "checked",
+              "value": { "type": "boolean", "default": "false" }
             },
+            { "name": "value", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "required", "type": "boolean" },
+              { "name": "defaultChecked", "type": "boolean" },
+              { "name": "checked", "type": "boolean" },
+              { "name": "value", "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": "open",
-              "value": { "type": "boolean", "default": "false" }
+              "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": "label", "type": "string" },
-              { "name": "sublabel", "type": "string" },
-              { "name": "open", "type": "boolean" }
+              {
+                "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": []
           }
@@ -505,74 +546,29 @@
           }
         },
         {
-          "name": "leu-checkbox",
+          "name": "leu-dialog",
           "description": "\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "checked",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "disabled",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "value",
+              "name": "label",
               "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": "sublabel",
+              "value": { "type": "string", "default": "\"\"" }
             },
             {
-              "name": "label",
-              "description": "The label of the checkbox group",
-              "value": { "type": "string | undefined" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Place the checkboxes inside the default slot."
+              "name": "open",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "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" }
+              { "name": "label", "type": "string" },
+              { "name": "sublabel", "type": "string" },
+              { "name": "open", "type": "boolean" }
             ],
             "events": []
           }
@@ -676,9 +672,7 @@
                 "type": "\"filled\" | \"transparent\""
               },
               { "name": "files", "type": "File[]" },
-              { "name": "input", "type": "HTMLInputElement" },
-              { "name": "form" },
-              { "name": "name" }
+              { "name": "input", "type": "HTMLInputElement" }
             ],
             "events": [
               { "name": "input", "type": "CustomEvent" },
@@ -734,11 +728,6 @@
               "description": "The value of the input element.",
               "value": { "type": "string", "default": "\"\"" }
             },
-            {
-              "name": "name",
-              "description": "The name of the input element.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
             {
               "name": "error",
               "description": "A custom error that is completely independent of the validity state. Useful for displaying server side errors.",
@@ -852,11 +841,6 @@
                 "description": "The value of the input element.",
                 "type": "string"
               },
-              {
-                "name": "name",
-                "description": "The name of the input element.",
-                "type": "string"
-              },
               {
                 "name": "error",
                 "description": "A custom error that is completely independent of the validity state. Useful for displaying server side errors.",

package/eslint.config.mjs

@@ -0,0 +1,79 @@
+import openWcConfig from "@open-wc/eslint-config"
+import tseslint from "typescript-eslint"
+import prettierConfig from "eslint-config-prettier"
+import storybook from "eslint-plugin-storybook"
+import globals from "globals"
+
+import { defineConfig } from "eslint/config"
+
+export default defineConfig(
+  {
+    ignores: [
+      "dist/**",
+      "docs/**",
+      "coverage/**",
+      "scripts/generate-component/templates/**/*",
+      "**/*.d.ts",
+    ],
+  },
+  ...openWcConfig,
+  ...tseslint.configs.recommended,
+  prettierConfig,
+  ...storybook.configs["flat/recommended"],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        __LEU_VERSION__: "readonly",
+      },
+    },
+    rules: {
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          varsIgnorePattern: "^_",
+          argsIgnorePattern: "^_",
+        },
+      ],
+      "prefer-destructuring": [
+        "error",
+        {
+          AssignmentExpression: {
+            array: false,
+          },
+        },
+      ],
+      "no-use-before-define": "off",
+      "@typescript-eslint/no-use-before-define": "error",
+      "import-x/no-unresolved": "off",
+    },
+  },
+  {
+    files: ["**/scripts/**/*.js", "**/scripts/**/*.ts"],
+    rules: {
+      "import-x/no-extraneous-dependencies": [
+        "error",
+        {
+          devDependencies: true,
+        },
+      ],
+      "no-console": "off",
+    },
+  },
+  {
+    files: ["**/*.test.ts"],
+    rules: {
+      "@typescript-eslint/no-unused-expressions": "off",
+    },
+  },
+  {
+    files: ["**/*.cjs"],
+    rules: {
+      "@typescript-eslint/no-require-imports": "off",
+      "import-x/no-extraneous-dependencies": [
+        "error",
+        { devDependencies: true },
+      ],
+    },
+  },
+)