@dpa-id-components/dpa-shared-components 14.1.1 → 15.1.0

package/README.md

@@ -4,8 +4,7 @@ Collection of vue 3 components for usage across dpa projects.
 
 ## Pre-requirements
 
-This project requires a node version of 16.x or higher. For Node environments such as nuxt.js Node v20 or higher is
-required to prevent errors from the missing `crypto` library, which is needed for uuid.
+This project requires a node version of 20.x or higher.
 
 You need to add and integrate the Inter font that can be found in `src/assets/fonts` to your project manually.
 An example how the CSS could look can be found in `src/tailwind/fonts.css`
@@ -56,35 +55,60 @@ 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
+### Code quality linting with 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`. 
+A shared ESLint configuration is provided at `@dpa-id-components/dpa-shared-components/eslintConfig`. Use it as a base configuration for code quality linting via ESLint.
 
-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"`
+**Example ESLint configuration**:
 
-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";
+```js
+import sharedConfig from "@dpa-id-components/dpa-shared-components/eslintConfig";
+import { globalIgnores } from "eslint/config";
 
 export default [
-  // Files to include or ignore under linting
   {
-    files: ["**/*.js", "**/*.mjs", "**/*.ts", "**/*.mts", "**/*.vue"],
+    files: ["**/*.ts", "**/*.mts", "**/*.vue"],
   },
+
+  globalIgnores(["**/dist/", "**/coverage/"]),
+
+  ...sharedConfig,
+
   {
-    ignores: ["_infrastructure/*", "**/dist/**", "**/coverage/**"],
+    files: ["**/*.vue"],
+    rules: {
+      "vue/no-undef-components": [
+        "error",
+        {
+          // Add globally-registered components here:
+          ignorePatterns: ["i18n-t", "RouterLink", "RouterView"],
+        },
+      ],
+    },
   },
-  ...sharedConfig,
-  pluginCypress.configs.recommended,
 ];
 ```
 
+### Code formatting with Prettier
+
+A shared Prettier configuration is provided at `@dpa-id-components/dpa-shared-components/prettierConfig`. Use it as a base configuration for code formatting via Prettier.
+
+**Example Prettier configuration**:
+
+```js
+import config from "@dpa-id-components/dpa-shared-components/prettierConfig";
+
+/**
+ * @see https://prettier.io/docs/configuration
+ * @type {import("prettier").Config}
+ */
+export default {
+  ...config,
+};
+```
+
+You might also want to add a Prettier ignore file (e.g. for ignoring Markdown files) and set up Prettier in your code editor to automatically format on save.
+
 ## Add a component
 
 To add a new component please add at least the following files:
@@ -166,9 +190,9 @@ Custom optimizations right now are:
 
 ## Releasing
 
-To publish a new release just go to the Actions tab and click "Publish new version". 
+To publish a new release just go to the Actions tab and click "Publish new version".
 You are prompted with the option to choose which version to bump. Behind the scenes it just does one of those commands below.
-They will still work on their own but the #shared-components Slack channel won't be notified. 
+They will still work on their own but the #shared-components Slack channel won't be notified.
 
 ```shell
 npm run release:patch

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

@@ -42,14 +42,11 @@ declare const meta: {
                 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 inputStatus?: ("info" | "default" | "error" | "readonly" | "warning") | undefined;
                 readonly isUiAutocomplete?: boolean | undefined;
                 readonly onBlur?: ((args_0: FocusEvent) => any) | undefined;
                 readonly onFocus?: ((args_0: FocusEvent) => any) | undefined;
@@ -86,14 +83,11 @@ declare const meta: {
                 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";
+                inputStatus?: "info" | "default" | "error" | "readonly" | "warning";
                 isUiAutocomplete?: boolean;
             }> & Readonly<{
                 onBlur?: ((args_0: FocusEvent) => any) | undefined;
@@ -120,14 +114,11 @@ declare const meta: {
                 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";
+                inputStatus: "info" | "default" | "error" | "readonly" | "warning";
                 isUiAutocomplete: boolean;
             }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
                 beforeCreate?: (() => void) | (() => void)[];
@@ -160,14 +151,11 @@ declare const meta: {
             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";
+            inputStatus: "info" | "default" | "error" | "readonly" | "warning";
             isUiAutocomplete: boolean;
         }> & Omit<Readonly<{
             modelValue?: string;
@@ -182,14 +170,11 @@ declare const meta: {
             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";
+            inputStatus?: "info" | "default" | "error" | "readonly" | "warning";
             isUiAutocomplete?: boolean;
         }> & Readonly<{
             onBlur?: ((args_0: FocusEvent) => any) | undefined;
@@ -197,11 +182,15 @@ declare const meta: {
             onInput?: ((args_0: string) => any) | undefined;
             onKeyup?: ((args_0: KeyboardEvent) => any) | undefined;
             "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-        }>, "inputRef" | ("label" | "type" | "disabled" | "readonly" | "id" | "placeholder" | "autofocus" | "chevron" | "isDateTimePicker" | "autocomplete" | "isInvalid" | "errorMessage" | "showWarning" | "warningMessage" | "isTextarea" | "hasInfo" | "infoText" | "inputStatus" | "isUiAutocomplete")> & import('vue').ShallowUnwrapRef<{
+        }>, "inputRef" | ("label" | "type" | "disabled" | "readonly" | "id" | "placeholder" | "autofocus" | "chevron" | "isDateTimePicker" | "autocomplete" | "errorMessage" | "warningMessage" | "isTextarea" | "infoText" | "inputStatus" | "isUiAutocomplete")> & import('vue').ShallowUnwrapRef<{
             inputRef: import('vue').Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
         }> & {} & import('vue').ComponentCustomProperties & {} & {
-            $slots: {
-                buttons?(_: {}): any;
+            $slots: Readonly<{
+                buttons?: () => any;
+                errors?: () => any;
+            }> & {
+                buttons?: () => any;
+                errors?: () => any;
             };
         }) | null;
         dropdownRef: HTMLDivElement;

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

@@ -33,14 +33,11 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             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 inputStatus?: ("info" | "default" | "error" | "readonly" | "warning") | undefined;
             readonly isUiAutocomplete?: boolean | undefined;
             readonly onBlur?: ((args_0: FocusEvent) => any) | undefined;
             readonly onFocus?: ((args_0: FocusEvent) => any) | undefined;
@@ -77,14 +74,11 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             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";
+            inputStatus?: "info" | "default" | "error" | "readonly" | "warning";
             isUiAutocomplete?: boolean;
         }> & Readonly<{
             onBlur?: ((args_0: FocusEvent) => any) | undefined;
@@ -111,14 +105,11 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             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";
+            inputStatus: "info" | "default" | "error" | "readonly" | "warning";
             isUiAutocomplete: boolean;
         }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -151,14 +142,11 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         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";
+        inputStatus: "info" | "default" | "error" | "readonly" | "warning";
         isUiAutocomplete: boolean;
     }> & Omit<Readonly<{
         modelValue?: string;
@@ -173,14 +161,11 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         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";
+        inputStatus?: "info" | "default" | "error" | "readonly" | "warning";
         isUiAutocomplete?: boolean;
     }> & Readonly<{
         onBlur?: ((args_0: FocusEvent) => any) | undefined;
@@ -188,11 +173,15 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         onInput?: ((args_0: string) => any) | undefined;
         onKeyup?: ((args_0: KeyboardEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    }>, "inputRef" | ("label" | "type" | "disabled" | "readonly" | "id" | "placeholder" | "autofocus" | "chevron" | "isDateTimePicker" | "autocomplete" | "isInvalid" | "errorMessage" | "showWarning" | "warningMessage" | "isTextarea" | "hasInfo" | "infoText" | "inputStatus" | "isUiAutocomplete")> & import('vue').ShallowUnwrapRef<{
+    }>, "inputRef" | ("label" | "type" | "disabled" | "readonly" | "id" | "placeholder" | "autofocus" | "chevron" | "isDateTimePicker" | "autocomplete" | "errorMessage" | "warningMessage" | "isTextarea" | "infoText" | "inputStatus" | "isUiAutocomplete")> & import('vue').ShallowUnwrapRef<{
         inputRef: import('vue').Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
     }> & {} & import('vue').ComponentCustomProperties & {} & {
-        $slots: {
-            buttons?(_: {}): any;
+        $slots: Readonly<{
+            buttons?: () => any;
+            errors?: () => any;
+        }> & {
+            buttons?: () => any;
+            errors?: () => any;
         };
     }) | null;
     dropdownRef: HTMLDivElement;

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

@@ -3,6 +3,7 @@ declare const meta: {
     title: string;
     component: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+            id?: string;
             color?: "blue" | "gray";
             size?: "small" | "medium";
             disabled?: boolean;
@@ -16,6 +17,7 @@ declare const meta: {
         }, import('vue').PublicProps, {
             size: "small" | "medium";
             disabled: boolean;
+            id: string;
             errorMessage: string;
             color: "blue" | "gray";
             checked: boolean;
@@ -28,6 +30,7 @@ declare const meta: {
             M: {};
             Defaults: {};
         }, Readonly<{
+            id?: string;
             color?: "blue" | "gray";
             size?: "small" | "medium";
             disabled?: boolean;
@@ -39,6 +42,7 @@ declare const meta: {
         }>, {}, {}, {}, {}, {
             size: "small" | "medium";
             disabled: boolean;
+            id: string;
             errorMessage: string;
             color: "blue" | "gray";
             checked: boolean;
@@ -48,6 +52,7 @@ declare const meta: {
         __isTeleport?: never;
         __isSuspense?: never;
     } & import('vue').ComponentOptionsBase<Readonly<{
+        id?: string;
         color?: "blue" | "gray";
         size?: "small" | "medium";
         disabled?: boolean;
@@ -61,13 +66,18 @@ declare const meta: {
     }, string, {
         size: "small" | "medium";
         disabled: boolean;
+        id: string;
         errorMessage: string;
         color: "blue" | "gray";
         checked: boolean;
         showError: boolean;
     }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: {
-            default?(_: {}): any;
+        $slots: Readonly<{
+            default: () => any;
+            errors?: () => any;
+        }> & {
+            default: () => any;
+            errors?: () => any;
         };
     });
     argTypes: {

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

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    id?: string;
     color?: "blue" | "gray";
     size?: "small" | "medium";
     disabled?: boolean;
@@ -8,8 +9,12 @@ type __VLS_Props = {
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+    slots: Readonly<{
+        default: () => any;
+        errors?: () => any;
+    }> & {
+        default: () => any;
+        errors?: () => any;
     };
     refs: {};
     rootEl: any;
@@ -22,6 +27,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }>, {
     size: "small" | "medium";
     disabled: boolean;
+    id: string;
     errorMessage: string;
     color: "blue" | "gray";
     checked: boolean;