@dpa-id-components/dpa-shared-components 14.1.0 → 15.0.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/dpa-shared-components.mjs

@@ -8185,27 +8185,29 @@ const ys = /* @__PURE__ */ Qa(Wf, [["render", jf]]), Qf = ["data-testid"], Gf =
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const n = t, r = e, a = F(() => {
-      const l = r.rounded ? "rounded-full" : "rounded-none";
+    const n = t, r = e, a = F(
+      () => typeof r.to == "string" ? "a" : r.to ? "RouterLink" : "button"
+    ), o = F(() => {
+      const i = r.rounded ? "rounded-full" : "rounded-none";
       switch (r.disabled ? "disabled" : r.color) {
         case "blue":
-          return `${l} text-white bg-blue-default hover:bg-blue-dark`;
+          return `${i} text-white bg-blue-default hover:bg-blue-dark`;
         case "primary-green":
-          return `${l} text-white bg-green-primary hover:bg-night-green`;
+          return `${i} text-white bg-green-primary hover:bg-night-green`;
         case "transparent":
-          return `${l} text-blue-default bg-transparent border-[1px] border-gray-300 hover:text-blue-dark hover:border-gray-700`;
+          return `${i} text-blue-default bg-transparent border-[1px] border-gray-300 hover:text-blue-dark hover:border-gray-700`;
         case "white":
-          return `${l} text-blue-default bg-white border-[1px] border-gray-300 hover:text-blue-dark hover:border-gray-700`;
+          return `${i} text-blue-default bg-white border-[1px] border-gray-300 hover:text-blue-dark hover:border-gray-700`;
         case "gray":
-          return `${l} text-white bg-gray-700 hover:bg-gray-800`;
+          return `${i} text-white bg-gray-700 hover:bg-gray-800`;
         case "light-gray":
-          return `${l} text-gray-800 bg-gray-100`;
+          return `${i} text-gray-800 bg-gray-100`;
         case "disabled":
-          return r.disabledVariant === "primary" ? `${l} text-gray-400 bg-gray-100 cursor-not-allowed` : `${l} text-gray-400 bg-white cursor-not-allowed border border-gray-400`;
+          return r.disabledVariant === "primary" ? `${i} text-gray-400 bg-gray-100 cursor-not-allowed` : `${i} text-gray-400 bg-white cursor-not-allowed border border-gray-400`;
         default:
-          return `${l} text-white bg-blue-default hover:bg-blue-dark`;
+          return `${i} text-white bg-blue-default hover:bg-blue-dark`;
       }
-    }), o = F(() => {
+    }), s = F(() => {
       switch (r.size) {
         case "xs":
           return "h-6 text-xs";
@@ -8218,30 +8220,31 @@ const ys = /* @__PURE__ */ Qa(Wf, [["render", jf]]), Qf = ["data-testid"], Gf =
         default:
           return "h-10 text-base";
       }
-    }), s = F(() => r.size === "xs" ? "xs" : r.size === "small" ? "small" : "medium");
-    return (l, i) => (P(), xe(tn(l.to ? "RouterLink" : "button"), {
+    }), l = F(() => r.size === "xs" ? "xs" : r.size === "small" ? "small" : "medium");
+    return (i, u) => (P(), xe(tn(a.value), {
       class: oe(["UiButton focus-visible:outline-blue inline-flex items-center whitespace-nowrap font-medium leading-normal focus:outline-none", {
-        "px-4": l.size !== "xs",
-        "px-2": l.size === "xs",
-        [a.value]: !0,
-        [o.value]: !0
+        "px-4": i.size !== "xs",
+        "px-2": i.size === "xs",
+        [o.value]: !0,
+        [s.value]: !0
       }]),
-      to: l.to,
-      type: l.to ? void 0 : "button",
-      disabled: l.to ? void 0 : l.disabled,
-      onClick: i[0] || (i[0] = (u) => n("click"))
+      to: a.value === "RouterLink" ? i.to : void 0,
+      href: a.value === "a" ? i.to : void 0,
+      type: a.value === "button" ? "button" : void 0,
+      disabled: a.value === "button" ? i.disabled : void 0,
+      onClick: u[0] || (u[0] = (c) => n("click"))
     }, {
       default: Te(() => [
-        l.iconName ? (P(), xe(wt, {
+        i.iconName ? (P(), xe(wt, {
           key: 0,
-          name: l.iconName,
-          size: s.value,
+          name: i.iconName,
+          size: l.value,
           class: "mr-2"
         }, null, 8, ["name", "size"])) : j("", !0),
-        se(l.$slots, "default")
+        se(i.$slots, "default")
       ]),
       _: 3
-    }, 8, ["class", "to", "type", "disabled"]));
+    }, 8, ["class", "to", "href", "type", "disabled"]));
   }
 }), ap = {}, op = { class: "flex [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r [&>*]:border [&>*]:border-r-0 [&>*]:border-gray-300" };
 function sp(e, t) {