@dpa-id-components/dpa-shared-components 10.1.0 → 11.0.0

package/README.md

@@ -56,6 +56,35 @@ The tailwind config is located at `./src/tailwind/tailwind.config.ts`.
 Please be aware that used plugins must be listed in the dependencies or the projects using the components have to
 install it.
 
+### ESLint
+
+As of version `11.x.x`, this project is setup to use ESLint 9+ which no longer supports the `.eslintrc` configuration format. The [ESLint flat configuration file](https://eslint.org/docs/latest/use/configure/configuration-files) for this project is located at `./eslint.config.mjs`. The base ESLint configuration `./eslint.base.config.mjs` is exported in the published npm package as a [shareable config file](https://eslint.org/docs/latest/extend/shareable-configs) and can be used as the base configuration for host projects. Plugins and third party configs used in `./eslint.base.config.mjs` should be added to `dependencies` in `package.json`. 
+
+Please note the following when configuring the `eslint.config.mjs` file in a host project:
+- Project specific third-party plugins and config (updated accordingly for flat config support) should be added as `devDependencies`
+- Files to be included or ignored by ESLint should be configured here
+- Adjust the `lint` script in `package.json` to `"lint": "eslint . --fix"`
+
+To use the shared ESLint config in a host project's `eslint.config.mjs`:
+
+```JavaScript
+import sharedConfig from "@dpa-id-components/dpa-shared-components/eslint.config";
+// Other project specific plugins
+import pluginCypress from "eslint-plugin-cypress/flat";
+
+export default [
+  // Files to include or ignore under linting
+  {
+    files: ["**/*.js", "**/*.mjs", "**/*.ts", "**/*.mts", "**/*.vue"],
+  },
+  {
+    ignores: ["_infrastructure/*", "**/dist/**", "**/coverage/**"],
+  },
+  ...sharedConfig,
+  pluginCypress.configs.recommended,
+];
+```
+
 ## Add a component
 
 To add a new component please add at least the following files:

package/dist/components/UiCheckBoxGroup/UiCheckBoxGroup.stories.d.ts

@@ -8,11 +8,7 @@ declare const meta: {
             default: boolean;
         };
         item: {
-            type: import('vue').PropType<{
-                name: string;
-                isChecked: boolean;
-                iconName: string;
-            }[]>;
+            type: import('vue').PropType<import('./UiCheckBoxGroup.vue').CheckboxItem[]>;
             default: () => never[];
         };
         firstEntryChecksAll: {
@@ -29,11 +25,7 @@ declare const meta: {
             default: boolean;
         };
         item: {
-            type: import('vue').PropType<{
-                name: string;
-                isChecked: boolean;
-                iconName: string;
-            }[]>;
+            type: import('vue').PropType<import('./UiCheckBoxGroup.vue').CheckboxItem[]>;
             default: () => never[];
         };
         firstEntryChecksAll: {
@@ -46,11 +38,7 @@ declare const meta: {
         "onItem-checked"?: ((...args: any[]) => any) | undefined;
     }>, {
         disabled: boolean;
-        item: {
-            name: string;
-            isChecked: boolean;
-            iconName: string;
-        }[];
+        item: import('./UiCheckBoxGroup.vue').CheckboxItem[];
         firstEntryChecksAll: boolean;
     }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
     argTypes: {

package/dist/components/UiCheckBoxGroup/UiCheckBoxGroup.vue.d.ts

@@ -1,7 +1,7 @@
-type CheckboxItem = {
+export type CheckboxItem = {
     name: string;
     isChecked: boolean;
-    iconName: string;
+    iconName?: string;
 };
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     item?: CheckboxItem[];

package/dist/components/UiCollapseNavigation/UiCollapseNavigation.stories.d.ts

@@ -16,7 +16,9 @@ declare const meta: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
             };
-        }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        }>> & Readonly<{}>, {
+            openMenu: import('vue').Ref<any, any>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
             headline: string;
             hasBorderTop: boolean;
             openAsDefault: boolean;
@@ -40,7 +42,9 @@ declare const meta: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
             };
-        }>> & Readonly<{}>, {}, {}, {}, {}, {
+        }>> & Readonly<{}>, {
+            openMenu: import('vue').Ref<any, any>;
+        }, {}, {}, {}, {
             headline: string;
             hasBorderTop: boolean;
             openAsDefault: boolean;
@@ -61,7 +65,9 @@ declare const meta: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    }>> & Readonly<{}>, {
+        openMenu: import('vue').Ref<any, any>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
         headline: string;
         hasBorderTop: boolean;
         openAsDefault: boolean;

package/dist/components/UiCollapseNavigation/UiCollapseNavigation.vue.d.ts

@@ -9,7 +9,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     headline: string;
     hasBorderTop: boolean;
     openAsDefault: boolean;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>>, {
+    openMenu: import('vue').Ref<any, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     headline?: string;
     hasBorderTop?: boolean;
     openAsDefault?: boolean;

package/dist/components/UiDatePicker/UiDatePicker.stories.d.ts

@@ -114,7 +114,6 @@ declare const meta: {
             };
             customFormatCallback: {
                 type: import('vue').PropType<any>;
-                required: true;
                 default: undefined;
             };
             inputLabel: {
@@ -302,7 +301,6 @@ declare const meta: {
             };
             customFormatCallback: {
                 type: import('vue').PropType<any>;
-                required: true;
                 default: undefined;
             };
             inputLabel: {
@@ -481,7 +479,6 @@ declare const meta: {
         };
         customFormatCallback: {
             type: import('vue').PropType<any>;
-            required: true;
             default: undefined;
         };
         inputLabel: {
@@ -777,7 +774,6 @@ declare const meta: {
                     };
                     customFormatCallback: {
                         type: import('vue').PropType<any>;
-                        required: true;
                         default: undefined;
                     };
                     inputLabel: {
@@ -965,7 +961,6 @@ declare const meta: {
                     };
                     customFormatCallback: {
                         type: import('vue').PropType<any>;
-                        required: true;
                         default: undefined;
                     };
                     inputLabel: {
@@ -1144,7 +1139,6 @@ declare const meta: {
                 };
                 customFormatCallback: {
                     type: import('vue').PropType<any>;
-                    required: true;
                     default: undefined;
                 };
                 inputLabel: {

package/dist/components/UiDatePicker/UiDatePicker.vue.d.ts

@@ -39,7 +39,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     activeState?: boolean;
     disabledState?: boolean;
     monthPicker?: boolean;
-    customFormatCallback: any;
+    customFormatCallback?: any;
     inputLabel?: string;
     iconLeft?: (typeof iconNames)[number] | null;
     utc?: boolean;
@@ -114,7 +114,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     activeState?: boolean;
     disabledState?: boolean;
     monthPicker?: boolean;
-    customFormatCallback: any;
+    customFormatCallback?: any;
     inputLabel?: string;
     iconLeft?: (typeof iconNames)[number] | null;
     utc?: boolean;

package/dist/components/UiFilterBadgeButton/UiFilterBadgeButton.stories.d.ts

@@ -22,7 +22,6 @@ declare const meta: {
             };
             isActive: {
                 type: import('vue').PropType<boolean>;
-                required: true;
                 default: boolean;
             };
         }>> & Readonly<{
@@ -60,7 +59,6 @@ declare const meta: {
             };
             isActive: {
                 type: import('vue').PropType<boolean>;
-                required: true;
                 default: boolean;
             };
         }>> & Readonly<{
@@ -93,7 +91,6 @@ declare const meta: {
         };
         isActive: {
             type: import('vue').PropType<boolean>;
-            required: true;
             default: boolean;
         };
     }>> & Readonly<{
@@ -164,7 +161,6 @@ declare const meta: {
                     };
                     isActive: {
                         type: import('vue').PropType<boolean>;
-                        required: true;
                         default: boolean;
                     };
                 }>> & Readonly<{
@@ -202,7 +198,6 @@ declare const meta: {
                     };
                     isActive: {
                         type: import('vue').PropType<boolean>;
-                        required: true;
                         default: boolean;
                     };
                 }>> & Readonly<{
@@ -235,7 +230,6 @@ declare const meta: {
                 };
                 isActive: {
                     type: import('vue').PropType<boolean>;
-                    required: true;
                     default: boolean;
                 };
             }>> & Readonly<{

package/dist/components/UiFilterBadgeButton/UiFilterBadgeButton.vue.d.ts

@@ -6,7 +6,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     fill?: string;
     iconIsFilled?: boolean;
     label: string;
-    isActive: boolean;
+    isActive?: boolean;
 }>, {
     color: string;
     fill: string;
@@ -19,7 +19,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     fill?: string;
     iconIsFilled?: boolean;
     label: string;
-    isActive: boolean;
+    isActive?: boolean;
 }>, {
     color: string;
     fill: string;

package/dist/components/UiInput/UiInput.stories.d.ts

@@ -5,7 +5,7 @@ declare const meta: {
     component: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
             type: {
-                type: import('vue').PropType<"number" | "text" | "time" | "date" | "password">;
+                type: import('vue').PropType<"number" | "text" | "time" | "date" | "password" | "datetime-local">;
                 default: string;
             };
             disabled: {
@@ -99,7 +99,7 @@ declare const meta: {
             keyup: (...args: any[]) => void;
             "update:modelValue": (...args: any[]) => void;
         }, import('vue').PublicProps, {
-            type: "text" | "number" | "time" | "date" | "password";
+            type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
             disabled: boolean;
             label: string;
             readonly: boolean;
@@ -127,7 +127,7 @@ declare const meta: {
             Defaults: {};
         }, Readonly<import('vue').ExtractPropTypes<{
             type: {
-                type: import('vue').PropType<"number" | "text" | "time" | "date" | "password">;
+                type: import('vue').PropType<"number" | "text" | "time" | "date" | "password" | "datetime-local">;
                 default: string;
             };
             disabled: {
@@ -215,7 +215,7 @@ declare const meta: {
         }>, {
             inputRef: import('vue').Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
         }, {}, {}, {}, {
-            type: "text" | "number" | "time" | "date" | "password";
+            type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
             disabled: boolean;
             label: string;
             readonly: boolean;
@@ -240,7 +240,7 @@ declare const meta: {
         __isSuspense?: never;
     } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
         type: {
-            type: import('vue').PropType<"number" | "text" | "time" | "date" | "password">;
+            type: import('vue').PropType<"number" | "text" | "time" | "date" | "password" | "datetime-local">;
             default: string;
         };
         disabled: {
@@ -334,7 +334,7 @@ declare const meta: {
         keyup: (...args: any[]) => void;
         "update:modelValue": (...args: any[]) => void;
     }, string, {
-        type: "text" | "number" | "time" | "date" | "password";
+        type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
         disabled: boolean;
         label: string;
         readonly: boolean;
@@ -431,7 +431,7 @@ declare const meta: {
             UiInput: {
                 new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
                     type: {
-                        type: import('vue').PropType<"number" | "text" | "time" | "date" | "password">;
+                        type: import('vue').PropType<"number" | "text" | "time" | "date" | "password" | "datetime-local">;
                         default: string;
                     };
                     disabled: {
@@ -525,7 +525,7 @@ declare const meta: {
                     keyup: (...args: any[]) => void;
                     "update:modelValue": (...args: any[]) => void;
                 }, import('vue').PublicProps, {
-                    type: "text" | "number" | "time" | "date" | "password";
+                    type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
                     disabled: boolean;
                     label: string;
                     readonly: boolean;
@@ -553,7 +553,7 @@ declare const meta: {
                     Defaults: {};
                 }, Readonly<import('vue').ExtractPropTypes<{
                     type: {
-                        type: import('vue').PropType<"number" | "text" | "time" | "date" | "password">;
+                        type: import('vue').PropType<"number" | "text" | "time" | "date" | "password" | "datetime-local">;
                         default: string;
                     };
                     disabled: {
@@ -641,7 +641,7 @@ declare const meta: {
                 }>, {
                     inputRef: import('vue').Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
                 }, {}, {}, {}, {
-                    type: "text" | "number" | "time" | "date" | "password";
+                    type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
                     disabled: boolean;
                     label: string;
                     readonly: boolean;
@@ -666,7 +666,7 @@ declare const meta: {
                 __isSuspense?: never;
             } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
                 type: {
-                    type: import('vue').PropType<"number" | "text" | "time" | "date" | "password">;
+                    type: import('vue').PropType<"number" | "text" | "time" | "date" | "password" | "datetime-local">;
                     default: string;
                 };
                 disabled: {
@@ -760,7 +760,7 @@ declare const meta: {
                 keyup: (...args: any[]) => void;
                 "update:modelValue": (...args: any[]) => void;
             }, string, {
-                type: "text" | "number" | "time" | "date" | "password";
+                type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
                 disabled: boolean;
                 label: string;
                 readonly: boolean;

package/dist/components/UiInput/UiInput.vue.d.ts

@@ -4,7 +4,7 @@ declare function __VLS_template(): {
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     id?: string;
     modelValue: string;
-    type?: "text" | "number" | "time" | "date" | "password";
+    type?: "text" | "number" | "time" | "date" | "password" | "datetime-local";
     label?: string;
     placeholder?: string;
     autofocus?: boolean;
@@ -53,7 +53,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     id?: string;
     modelValue: string;
-    type?: "text" | "number" | "time" | "date" | "password";
+    type?: "text" | "number" | "time" | "date" | "password" | "datetime-local";
     label?: string;
     placeholder?: string;
     autofocus?: boolean;
@@ -98,7 +98,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     onKeyup?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    type: "text" | "number" | "time" | "date" | "password";
+    type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
     disabled: boolean;
     label: string;
     readonly: boolean;

package/dist/components/UiMenu/UiMenu.stories.d.ts

@@ -50,8 +50,8 @@ declare const meta: {
             defaultTitle?: string | undefined;
             noTitle?: boolean | undefined;
             multiLabel?: string | undefined;
-            filterButtonSize?: "small" | "xs" | undefined;
-            buttonVariant?: "blue-rounded" | "white-rounded" | "transparent-rounded" | "blank" | undefined;
+            filterButtonSize?: ("small" | "xs") | undefined;
+            buttonVariant?: ("blue-rounded" | "white-rounded" | "transparent-rounded" | "blank") | undefined;
             listVariant?: import('./UiMenuTypes').UiMenuListVariant | undefined;
             checkboxColor?: import('./UiMenuTypes').UiMenuCheckboxColor | undefined;
             hasResetOption?: boolean | undefined;
@@ -88,7 +88,9 @@ declare const meta: {
             }): any;
         }>;
         emit: (event: "close" | "reset" | "input" | "open" | "option-selected" | "placed", ...args: any[]) => void;
-    }>) => import('vue').VNode & {
+    }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }> & {
         __ctx?: Awaited<typeof __VLS_setup>;
     };
     argTypes: {
@@ -277,8 +279,8 @@ export declare const WithBlankButton: {
                     defaultTitle?: string | undefined;
                     noTitle?: boolean | undefined;
                     multiLabel?: string | undefined;
-                    filterButtonSize?: "small" | "xs" | undefined;
-                    buttonVariant?: "blue-rounded" | "white-rounded" | "transparent-rounded" | "blank" | undefined;
+                    filterButtonSize?: ("small" | "xs") | undefined;
+                    buttonVariant?: ("blue-rounded" | "white-rounded" | "transparent-rounded" | "blank") | undefined;
                     listVariant?: import('./UiMenuTypes').UiMenuListVariant | undefined;
                     checkboxColor?: import('./UiMenuTypes').UiMenuCheckboxColor | undefined;
                     hasResetOption?: boolean | undefined;
@@ -315,7 +317,9 @@ export declare const WithBlankButton: {
                     }): any;
                 }>;
                 emit: (event: "close" | "reset" | "input" | "open" | "option-selected" | "placed", ...args: any[]) => void;
-            }>) => import('vue').VNode & {
+            }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+                [key: string]: any;
+            }> & {
                 __ctx?: Awaited<typeof __VLS_setup>;
             };
         };

package/dist/components/UiMenu/UiMenu.vue.d.ts

@@ -65,7 +65,9 @@ declare const _default: <K>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
         }): any;
     }>;
     emit: (event: "close" | "reset" | "input" | "open" | "option-selected" | "placed", ...args: any[]) => void;
-}>) => import('vue').VNode & {
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

package/dist/components/UiMenu/UiMenuItem.vue.d.ts

@@ -25,7 +25,9 @@ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
         }): any;
     }>;
     emit: typeof __VLS_emit;
-}>) => import('vue').VNode & {
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

package/dist/components/UiSearchInput/UiSearchInput.stories.d.ts

@@ -125,7 +125,9 @@ declare const meta: {
             control: "text";
         };
         modelValue: {
-            control: "array";
+            control: {
+                type: "object";
+            };
         };
         placeholder: {
             control: "text";