@dpa-id-components/dpa-shared-components 11.0.0-alpha.0 → 12.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/DpaMediaItem/DpaMediaItem.stories.d.ts

@@ -1,73 +1,36 @@
 import { StoryObj } from '@storybook/vue3';
-
 declare const meta: {
     title: string;
     component: {
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
-            genre: {
-                type: import('vue').PropType<"audio" | "graphic" | "picture" | "text" | "video">;
-                default: string;
-            };
-            isFulfilled: {
-                type: import('vue').PropType<boolean>;
-                default: boolean;
-            };
-            imgSrc: {
-                type: import('vue').PropType<string>;
-                default: string;
-            };
-            imgAlt: {
-                type: import('vue').PropType<string>;
-                default: string;
-            };
-            imgCount: {
-                type: import('vue').PropType<number>;
-                default: number;
-            };
-            disabled: {
-                type: import('vue').PropType<boolean>;
-                default: boolean;
-            };
-        }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+            genre?: "audio" | "video" | "text" | "picture" | "graphic";
+            isFulfilled?: boolean;
+            imgSrc?: string;
+            imgAlt?: string;
+            imgCount?: number;
+            disabled?: boolean;
+        }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
             genre: "audio" | "video" | "text" | "picture" | "graphic";
             isFulfilled: boolean;
             imgSrc: string;
             imgAlt: string;
             imgCount: number;
             disabled: boolean;
-        }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
             P: {};
             B: {};
             D: {};
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<import('vue').ExtractPropTypes<{
-            genre: {
-                type: import('vue').PropType<"audio" | "graphic" | "picture" | "text" | "video">;
-                default: string;
-            };
-            isFulfilled: {
-                type: import('vue').PropType<boolean>;
-                default: boolean;
-            };
-            imgSrc: {
-                type: import('vue').PropType<string>;
-                default: string;
-            };
-            imgAlt: {
-                type: import('vue').PropType<string>;
-                default: string;
-            };
-            imgCount: {
-                type: import('vue').PropType<number>;
-                default: number;
-            };
-            disabled: {
-                type: import('vue').PropType<boolean>;
-                default: boolean;
-            };
-        }>> & Readonly<{}>, {}, {}, {}, {}, {
+        }, Readonly<{
+            genre?: "audio" | "video" | "text" | "picture" | "graphic";
+            isFulfilled?: boolean;
+            imgSrc?: string;
+            imgAlt?: string;
+            imgCount?: number;
+            disabled?: boolean;
+        }> & Readonly<{}>, {}, {}, {}, {}, {
             genre: "audio" | "video" | "text" | "picture" | "graphic";
             isFulfilled: boolean;
             imgSrc: string;
@@ -78,32 +41,14 @@ declare const meta: {
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
-        genre: {
-            type: import('vue').PropType<"audio" | "graphic" | "picture" | "text" | "video">;
-            default: string;
-        };
-        isFulfilled: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
-        imgSrc: {
-            type: import('vue').PropType<string>;
-            default: string;
-        };
-        imgAlt: {
-            type: import('vue').PropType<string>;
-            default: string;
-        };
-        imgCount: {
-            type: import('vue').PropType<number>;
-            default: number;
-        };
-        disabled: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    } & import('vue').ComponentOptionsBase<Readonly<{
+        genre?: "audio" | "video" | "text" | "picture" | "graphic";
+        isFulfilled?: boolean;
+        imgSrc?: string;
+        imgAlt?: string;
+        imgCount?: number;
+        disabled?: boolean;
+    }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
         genre: "audio" | "video" | "text" | "picture" | "graphic";
         isFulfilled: boolean;
         imgSrc: string;

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

@@ -1,65 +1,34 @@
-declare function __VLS_template(): {
-    description?(_: {}): any;
-    planning?(_: {}): any;
-    default?(_: {}): any;
-    textLength?(_: {}): any;
-    timePublished?(_: {}): any;
-};
-declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    genre?: "audio" | "video" | "text" | "picture" | "graphic";
-    isFulfilled?: boolean;
-    imgSrc?: string;
-    imgAlt?: string;
-    imgCount?: number;
-    disabled?: boolean;
-}>, {
-    genre: string;
-    isFulfilled: boolean;
-    imgSrc: string;
-    imgAlt: string;
-    imgCount: number;
-    disabled: boolean;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+type __VLS_Props = {
     genre?: "audio" | "video" | "text" | "picture" | "graphic";
     isFulfilled?: boolean;
     imgSrc?: string;
     imgAlt?: string;
     imgCount?: number;
     disabled?: boolean;
-}>, {
-    genre: string;
-    isFulfilled: boolean;
-    imgSrc: string;
-    imgAlt: string;
-    imgCount: number;
-    disabled: boolean;
-}>>> & Readonly<{}>, {
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        description?(_: {}): any;
+        planning?(_: {}): any;
+        default?(_: {}): any;
+        textLength?(_: {}): any;
+        timePublished?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     genre: "audio" | "video" | "text" | "picture" | "graphic";
     isFulfilled: boolean;
     imgSrc: string;
     imgAlt: string;
     imgCount: number;
     disabled: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,61 +1,24 @@
 import { StoryObj } from '@storybook/vue3';
-
 declare const meta: {
     title: string;
-    component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        label: {
-            type: import('vue').PropType<string>;
-            default: string;
-        };
-        readonly: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
-        placeholder: {
-            type: import('vue').PropType<string>;
-            default: string;
-        };
-        chevron: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
-        value: {
-            type: import('vue').PropType<string>;
-            default: string;
-        };
-        options: {
-            type: import('vue').PropType<string[]>;
-            default: () => never[];
-        };
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    component: import('vue').DefineComponent<{
+        label?: string;
+        placeholder?: string;
+        value?: string;
+        options?: string[];
+        readonly?: boolean;
+        chevron?: boolean;
+    }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
         input: (...args: any[]) => void;
         select: (...args: any[]) => void;
-    }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        label: {
-            type: import('vue').PropType<string>;
-            default: string;
-        };
-        readonly: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
-        placeholder: {
-            type: import('vue').PropType<string>;
-            default: string;
-        };
-        chevron: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
-        value: {
-            type: import('vue').PropType<string>;
-            default: string;
-        };
-        options: {
-            type: import('vue').PropType<string[]>;
-            default: () => never[];
-        };
-    }>> & Readonly<{
+    }, string, import('vue').PublicProps, Readonly<{
+        label?: string;
+        placeholder?: string;
+        value?: string;
+        options?: string[];
+        readonly?: boolean;
+        chevron?: boolean;
+    }> & Readonly<{
         onInput?: ((...args: any[]) => any) | undefined;
         onSelect?: ((...args: any[]) => any) | undefined;
     }>, {
@@ -65,7 +28,184 @@ declare const meta: {
         chevron: boolean;
         value: string;
         options: string[];
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+        inputRef: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly id?: string | undefined;
+                readonly modelValue: string;
+                readonly type?: "text" | "number" | "time" | "date" | "password" | "datetime-local" | undefined;
+                readonly label?: string | undefined;
+                readonly placeholder?: string | undefined;
+                readonly autofocus?: boolean | undefined;
+                readonly chevron?: boolean | undefined;
+                readonly readonly?: boolean | undefined;
+                readonly disabled?: boolean | undefined;
+                readonly isDateTimePicker?: boolean | undefined;
+                readonly autocomplete?: string | undefined;
+                readonly isInvalid?: boolean | undefined;
+                readonly errorMessage?: string | undefined;
+                readonly showWarning?: boolean | undefined;
+                readonly warningMessage?: string | undefined;
+                readonly isTextarea?: boolean | undefined;
+                readonly hasInfo?: boolean | undefined;
+                readonly infoText?: string | undefined;
+                readonly inputStatus?: "default" | "info" | "readonly" | "warning" | "error" | undefined;
+                readonly isUiAutocomplete?: boolean | undefined;
+                readonly onFocus?: ((...args: any[]) => any) | undefined;
+                readonly onBlur?: ((...args: any[]) => any) | undefined;
+                readonly onInput?: ((...args: any[]) => any) | undefined;
+                readonly onKeyup?: ((...args: any[]) => any) | undefined;
+                readonly "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            } & {
+                inputRef: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: ((event: "focus", ...args: any[]) => void) & ((event: "blur", ...args: any[]) => void) & ((event: "input", ...args: any[]) => void) & ((event: "keyup", ...args: any[]) => void) & ((event: "update:modelValue", ...args: any[]) => void);
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<{
+                id?: string;
+                modelValue: string;
+                type?: "text" | "number" | "time" | "date" | "password" | "datetime-local";
+                label?: string;
+                placeholder?: string;
+                autofocus?: boolean;
+                chevron?: boolean;
+                readonly?: boolean;
+                disabled?: boolean;
+                isDateTimePicker?: boolean;
+                autocomplete?: string;
+                isInvalid?: boolean;
+                errorMessage?: string;
+                showWarning?: boolean;
+                warningMessage?: string;
+                isTextarea?: boolean;
+                hasInfo?: boolean;
+                infoText?: string;
+                inputStatus?: "default" | "info" | "readonly" | "warning" | "error";
+                isUiAutocomplete?: boolean;
+            }> & Readonly<{
+                onFocus?: ((...args: any[]) => any) | undefined;
+                onBlur?: ((...args: any[]) => any) | undefined;
+                onInput?: ((...args: any[]) => any) | undefined;
+                onKeyup?: ((...args: any[]) => any) | undefined;
+                "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+            }>, {
+                inputRef: import('vue').Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                focus: (...args: any[]) => void;
+                blur: (...args: any[]) => void;
+                input: (...args: any[]) => void;
+                keyup: (...args: any[]) => void;
+                "update:modelValue": (...args: any[]) => void;
+            }, string, {
+                type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
+                disabled: boolean;
+                label: string;
+                readonly: boolean;
+                id: string;
+                placeholder: string;
+                autofocus: boolean;
+                chevron: boolean;
+                isDateTimePicker: boolean;
+                autocomplete: string;
+                isInvalid: boolean;
+                errorMessage: string;
+                showWarning: boolean;
+                warningMessage: string;
+                isTextarea: boolean;
+                hasInfo: boolean;
+                infoText: string;
+                inputStatus: "default" | "info" | "readonly" | "warning" | "error";
+                isUiAutocomplete: boolean;
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            type: "text" | "number" | "time" | "date" | "password" | "datetime-local";
+            disabled: boolean;
+            label: string;
+            readonly: boolean;
+            id: string;
+            placeholder: string;
+            autofocus: boolean;
+            chevron: boolean;
+            isDateTimePicker: boolean;
+            autocomplete: string;
+            isInvalid: boolean;
+            errorMessage: string;
+            showWarning: boolean;
+            warningMessage: string;
+            isTextarea: boolean;
+            hasInfo: boolean;
+            infoText: string;
+            inputStatus: "default" | "info" | "readonly" | "warning" | "error";
+            isUiAutocomplete: boolean;
+        }> & Omit<Readonly<{
+            id?: string;
+            modelValue: string;
+            type?: "text" | "number" | "time" | "date" | "password" | "datetime-local";
+            label?: string;
+            placeholder?: string;
+            autofocus?: boolean;
+            chevron?: boolean;
+            readonly?: boolean;
+            disabled?: boolean;
+            isDateTimePicker?: boolean;
+            autocomplete?: string;
+            isInvalid?: boolean;
+            errorMessage?: string;
+            showWarning?: boolean;
+            warningMessage?: string;
+            isTextarea?: boolean;
+            hasInfo?: boolean;
+            infoText?: string;
+            inputStatus?: "default" | "info" | "readonly" | "warning" | "error";
+            isUiAutocomplete?: boolean;
+        }> & Readonly<{
+            onFocus?: ((...args: any[]) => any) | undefined;
+            onBlur?: ((...args: any[]) => any) | undefined;
+            onInput?: ((...args: any[]) => any) | undefined;
+            onKeyup?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        }>, "inputRef" | ("type" | "disabled" | "label" | "readonly" | "id" | "placeholder" | "autofocus" | "chevron" | "isDateTimePicker" | "autocomplete" | "isInvalid" | "errorMessage" | "showWarning" | "warningMessage" | "isTextarea" | "hasInfo" | "infoText" | "inputStatus" | "isUiAutocomplete")> & import('vue').ShallowUnwrapRef<{
+            inputRef: import('vue').Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+        }> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                buttons?(_: {}): any;
+            };
+        }) | null;
+        dropdownRef: HTMLDivElement;
+    }, HTMLDivElement>;
     argTypes: {
         label: {
             control: "text";