@dpa-id-components/dpa-shared-components 15.1.2 → 16.0.1

package/README.md

@@ -36,19 +36,17 @@ To have the styling working correctly you have to extend the tailwind config in
 
 Please ensure that the version of Tailwind in your host application meets the version specified under `peerDependencies` in `package.json`.
 
-```JavaScript
-import sharedComponentsConfig from '@dpa-id-components/dpa-shared-components/tailwindConfig'
-import { Config } from 'tailwindcss'
+```typescript
+import sharedComponentsConfig from "@dpa-id-components/dpa-shared-components/tailwindConfig";
+import { Config } from "tailwindcss";
 
 export default {
   presets: [sharedComponentsConfig],
   content: [
     // ... your content globs ...
-    './node_modules/@dpa-id-components/dpa-shared-components/**/*.{js,mjs,cjs}'
-  ]
-}
-satisfies
-Config
+    "./node_modules/@dpa-id-components/dpa-shared-components/**/*.js",
+  ],
+} satisfies Config
 ```
 
 The tailwind config is located at `./src/tailwind/tailwind.config.ts`.
@@ -129,7 +127,7 @@ a `jsdom` environment.
 To run the tests run
 
 ```shell
-npm run test
+npm run test:unit:watch
 ```
 
 The tests automatically are run as a watch task.
@@ -143,7 +141,7 @@ storybook can't handle the vue plugin.
 To start storybook locally run
 
 ```shell
-npm run storybook
+npm run dev
 ```
 
 A deployed version of the storybook can be found [here](https://dpa-gmbh.github.io/dpa-shared-components/).
@@ -179,7 +177,7 @@ If linking doesn't seem to work, you can try to clear your vite-cache by deletin
 ## SVG icons
 
 To add SVG icons, just copy the .svg file to `./src/assets/icons`. Preferably you add the filename also to
-the `ìconNames.ts` so it's available in Storybook as option and in the overview.
+the `iconNames.ts` so it's available in Storybook as option and in the overview.
 SVGs get loaded by [vite-svg-loader](https://github.com/jpkleemans/vite-svg-loader), which optimizes the SVGs
 with [svgo](https://github.com/svg/svgo). Config can be added in `vite.config.ts` and `./.storybook/main.ts` (
 duplicated since Storybook can't handle the vite config plugins).

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

@@ -46,7 +46,7 @@ declare const meta: {
                 readonly warningMessage?: string | undefined;
                 readonly isTextarea?: boolean | undefined;
                 readonly infoText?: string | undefined;
-                readonly inputStatus?: ("info" | "default" | "error" | "readonly" | "warning") | undefined;
+                readonly inputStatus?: ("default" | "info" | "error" | "readonly" | "warning") | undefined;
                 readonly isUiAutocomplete?: boolean | undefined;
                 readonly onBlur?: ((args_0: FocusEvent) => any) | undefined;
                 readonly onFocus?: ((args_0: FocusEvent) => any) | undefined;
@@ -87,7 +87,7 @@ declare const meta: {
                 warningMessage?: string;
                 isTextarea?: boolean;
                 infoText?: string;
-                inputStatus?: "info" | "default" | "error" | "readonly" | "warning";
+                inputStatus?: "default" | "info" | "error" | "readonly" | "warning";
                 isUiAutocomplete?: boolean;
             }> & Readonly<{
                 onBlur?: ((args_0: FocusEvent) => any) | undefined;
@@ -118,7 +118,7 @@ declare const meta: {
                 warningMessage: string;
                 isTextarea: boolean;
                 infoText: string;
-                inputStatus: "info" | "default" | "error" | "readonly" | "warning";
+                inputStatus: "default" | "info" | "error" | "readonly" | "warning";
                 isUiAutocomplete: boolean;
             }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
                 beforeCreate?: (() => void) | (() => void)[];
@@ -155,7 +155,7 @@ declare const meta: {
             warningMessage: string;
             isTextarea: boolean;
             infoText: string;
-            inputStatus: "info" | "default" | "error" | "readonly" | "warning";
+            inputStatus: "default" | "info" | "error" | "readonly" | "warning";
             isUiAutocomplete: boolean;
         }> & Omit<Readonly<{
             modelValue?: string;
@@ -174,7 +174,7 @@ declare const meta: {
             warningMessage?: string;
             isTextarea?: boolean;
             infoText?: string;
-            inputStatus?: "info" | "default" | "error" | "readonly" | "warning";
+            inputStatus?: "default" | "info" | "error" | "readonly" | "warning";
             isUiAutocomplete?: boolean;
         }> & Readonly<{
             onBlur?: ((args_0: FocusEvent) => any) | undefined;

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

@@ -37,7 +37,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             readonly warningMessage?: string | undefined;
             readonly isTextarea?: boolean | undefined;
             readonly infoText?: string | undefined;
-            readonly inputStatus?: ("info" | "default" | "error" | "readonly" | "warning") | undefined;
+            readonly inputStatus?: ("default" | "info" | "error" | "readonly" | "warning") | undefined;
             readonly isUiAutocomplete?: boolean | undefined;
             readonly onBlur?: ((args_0: FocusEvent) => any) | undefined;
             readonly onFocus?: ((args_0: FocusEvent) => any) | undefined;
@@ -78,7 +78,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             warningMessage?: string;
             isTextarea?: boolean;
             infoText?: string;
-            inputStatus?: "info" | "default" | "error" | "readonly" | "warning";
+            inputStatus?: "default" | "info" | "error" | "readonly" | "warning";
             isUiAutocomplete?: boolean;
         }> & Readonly<{
             onBlur?: ((args_0: FocusEvent) => any) | undefined;
@@ -109,7 +109,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             warningMessage: string;
             isTextarea: boolean;
             infoText: string;
-            inputStatus: "info" | "default" | "error" | "readonly" | "warning";
+            inputStatus: "default" | "info" | "error" | "readonly" | "warning";
             isUiAutocomplete: boolean;
         }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -146,7 +146,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         warningMessage: string;
         isTextarea: boolean;
         infoText: string;
-        inputStatus: "info" | "default" | "error" | "readonly" | "warning";
+        inputStatus: "default" | "info" | "error" | "readonly" | "warning";
         isUiAutocomplete: boolean;
     }> & Omit<Readonly<{
         modelValue?: string;
@@ -165,7 +165,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         warningMessage?: string;
         isTextarea?: boolean;
         infoText?: string;
-        inputStatus?: "info" | "default" | "error" | "readonly" | "warning";
+        inputStatus?: "default" | "info" | "error" | "readonly" | "warning";
         isUiAutocomplete?: boolean;
     }> & Readonly<{
         onBlur?: ((args_0: FocusEvent) => any) | undefined;

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

@@ -11,9 +11,9 @@ declare const meta: {
             small?: boolean;
             screenReaderText?: string;
         }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
-            text: string;
             trim: boolean;
             small: boolean;
+            text: string;
             color: "red" | "red-dark" | "orange" | "purple" | "blue" | "white" | "gray-300" | "gray-600" | "gray-800" | "black" | "green-neon" | "green-primary" | "neon-green" | "primary-green";
             iconName: import('..').UiIconName | null;
             mobileTrim: boolean;
@@ -34,9 +34,9 @@ declare const meta: {
             small?: boolean;
             screenReaderText?: string;
         }> & Readonly<{}>, {}, {}, {}, {}, {
-            text: string;
             trim: boolean;
             small: boolean;
+            text: string;
             color: "red" | "red-dark" | "orange" | "purple" | "blue" | "white" | "gray-300" | "gray-600" | "gray-800" | "black" | "green-neon" | "green-primary" | "neon-green" | "primary-green";
             iconName: import('..').UiIconName | null;
             mobileTrim: boolean;
@@ -54,9 +54,9 @@ declare const meta: {
         small?: boolean;
         screenReaderText?: string;
     }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
-        text: string;
         trim: boolean;
         small: boolean;
+        text: string;
         color: "red" | "red-dark" | "orange" | "purple" | "blue" | "white" | "gray-300" | "gray-600" | "gray-800" | "black" | "green-neon" | "green-primary" | "neon-green" | "primary-green";
         iconName: import('..').UiIconName | null;
         mobileTrim: boolean;
@@ -76,7 +76,7 @@ declare const meta: {
         };
         iconName: {
             control: "select";
-            options: ("activities" | "alert" | "alert-fill" | "alert-octagon" | "ai" | "apps" | "archive" | "arrow-left" | "arrow-nav-left" | "arrow-nav-right" | "arrow-up" | "arrow-right" | "arrow-down" | "arrowhead-left" | "arrowhead-right" | "arrowhead-top" | "atmo" | "audio" | "audio-circled" | "audio-filled" | "bag" | "bell" | "bell-fill" | "book" | "bookmark" | "bookmark-fill" | "bookmark-outlined" | "box" | "bulb" | "call" | "camera" | "check" | "checklist" | "checkmark" | "checkmark-double" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clipboard" | "clock" | "close" | "cloud-save" | "code" | "collapse" | "color-palette" | "comment" | "comment-fill" | "copy" | "copy-link" | "delete" | "download" | "dpa-id" | "edit" | "edit-add" | "eil" | "emoji" | "emoji-add" | "envelope" | "event" | "expand" | "external-link" | "file" | "file-pdf" | "filter" | "filter-outline" | "flag" | "flag-fill" | "flag-filled" | "flag-outline" | "flags" | "flash" | "folder" | "folder-add" | "folder-fill" | "folder-filled" | "gallery" | "graphic" | "graphic-circled" | "graphic-filled" | "graphics" | "grid-1" | "grid-2" | "grid-3" | "grid-4" | "grid-6" | "grid-9" | "grid-masonry" | "grid-masonry-9" | "help" | "home" | "image" | "image focus point" | "impact-high" | "impact-low" | "impact-medium" | "impact-very-high" | "impact-very-low" | "info" | "info-fill" | "info-filled" | "label" | "label-filled" | "language" | "latest" | "lightbulb" | "list" | "list-search" | "lock" | "lock-filled" | "mail" | "map" | "map-outline" | "menu" | "minus" | "more-horizontal" | "more-vertical" | "move" | "move-up-down" | "navigation" | "note" | "offline" | "package" | "paper-plane" | "paperplane" | "pause" | "pause-circle" | "pdf" | "pen" | "pen-check" | "people" | "phone" | "picture" | "picture-circled" | "picture-filled" | "pin" | "planning" | "play" | "play-circle" | "play-fill" | "plus" | "plus-circle" | "print" | "refresh" | "reset" | "responsive" | "rubix-thema" | "save" | "saved-search" | "saved-search-fill" | "search" | "settings" | "share" | "share-alternative" | "sidebar" | "sidebar-fill" | "slack" | "slider-config" | "spellcheck" | "spinner" | "standard-view" | "star" | "star-fill" | "star-filled" | "stop" | "story" | "sync" | "tasks" | "text" | "text-circled" | "text-filled" | "thumbs-down" | "thumbs-up" | "thumbs-up-double" | "topic" | "union" | "upload" | "video" | "video overlay" | "video-circled" | "video-filled" | "video-rounded" | "view" | "view-off" | "volume-up" | null)[];
+            options: ("search" | "print" | "responsive" | "activities" | "alert" | "alert-fill" | "alert-octagon" | "ai" | "apps" | "archive" | "arrow-left" | "arrow-nav-left" | "arrow-nav-right" | "arrow-up" | "arrow-right" | "arrow-down" | "arrowhead-left" | "arrowhead-right" | "arrowhead-top" | "atmo" | "audio" | "audio-circled" | "audio-filled" | "bag" | "bell" | "bell-fill" | "book" | "bookmark" | "bookmark-fill" | "bookmark-outlined" | "box" | "bulb" | "call" | "camera" | "check" | "checklist" | "checkmark" | "checkmark-double" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clipboard" | "clock" | "close" | "cloud-save" | "code" | "collapse" | "color-palette" | "comment" | "comment-fill" | "copy" | "copy-link" | "delete" | "download" | "dpa-id" | "edit" | "edit-add" | "eil" | "emoji" | "emoji-add" | "envelope" | "event" | "expand" | "external-link" | "file" | "file-pdf" | "filter" | "filter-outline" | "flag" | "flag-fill" | "flag-filled" | "flag-outline" | "flags" | "flash" | "folder" | "folder-add" | "folder-fill" | "folder-filled" | "gallery" | "graphic" | "graphic-circled" | "graphic-filled" | "graphics" | "grid-1" | "grid-2" | "grid-3" | "grid-4" | "grid-6" | "grid-9" | "grid-masonry" | "grid-masonry-9" | "help" | "home" | "image" | "image focus point" | "impact-high" | "impact-low" | "impact-medium" | "impact-very-high" | "impact-very-low" | "info" | "info-fill" | "info-filled" | "label" | "label-filled" | "language" | "latest" | "lightbulb" | "list" | "list-search" | "lock" | "lock-filled" | "mail" | "map" | "map-outline" | "menu" | "minus" | "more-horizontal" | "more-vertical" | "move" | "move-up-down" | "navigation" | "note" | "offline" | "package" | "paper-plane" | "paperplane" | "pause" | "pause-circle" | "pdf" | "pen" | "pen-check" | "people" | "phone" | "picture" | "picture-circled" | "picture-filled" | "pin" | "planning" | "play" | "play-circle" | "play-fill" | "plus" | "plus-circle" | "refresh" | "reset" | "rubix-thema" | "save" | "saved-search" | "saved-search-fill" | "settings" | "share" | "share-alternative" | "sidebar" | "sidebar-fill" | "slack" | "slider-config" | "spellcheck" | "spinner" | "standard-view" | "star" | "star-fill" | "star-filled" | "stop" | "story" | "sync" | "tasks" | "text" | "text-circled" | "text-filled" | "thumbs-down" | "thumbs-up" | "thumbs-up-double" | "topic" | "union" | "upload" | "video" | "video overlay" | "video-circled" | "video-filled" | "video-rounded" | "view" | "view-off" | "volume-up" | null)[];
         };
         mobileTrim: {
             control: "boolean";

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

@@ -18,9 +18,9 @@ declare function __VLS_template(): {
 };
 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<{}>, {
-    text: string;
     trim: boolean;
     small: boolean;
+    text: string;
     color: "red" | "red-dark" | "orange" | "purple" | "blue" | "white" | "gray-300" | "gray-600" | "gray-800" | "black" | "green-neon" | "green-primary" | "neon-green" | "primary-green";
     iconName: UiIconName | null;
     mobileTrim: boolean;

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

@@ -79,7 +79,7 @@ declare const meta: {
     argTypes: {
         iconName: {
             control: "select";
-            options: ("activities" | "alert" | "alert-fill" | "alert-octagon" | "ai" | "apps" | "archive" | "arrow-left" | "arrow-nav-left" | "arrow-nav-right" | "arrow-up" | "arrow-right" | "arrow-down" | "arrowhead-left" | "arrowhead-right" | "arrowhead-top" | "atmo" | "audio" | "audio-circled" | "audio-filled" | "bag" | "bell" | "bell-fill" | "book" | "bookmark" | "bookmark-fill" | "bookmark-outlined" | "box" | "bulb" | "call" | "camera" | "check" | "checklist" | "checkmark" | "checkmark-double" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clipboard" | "clock" | "close" | "cloud-save" | "code" | "collapse" | "color-palette" | "comment" | "comment-fill" | "copy" | "copy-link" | "delete" | "download" | "dpa-id" | "edit" | "edit-add" | "eil" | "emoji" | "emoji-add" | "envelope" | "event" | "expand" | "external-link" | "file" | "file-pdf" | "filter" | "filter-outline" | "flag" | "flag-fill" | "flag-filled" | "flag-outline" | "flags" | "flash" | "folder" | "folder-add" | "folder-fill" | "folder-filled" | "gallery" | "graphic" | "graphic-circled" | "graphic-filled" | "graphics" | "grid-1" | "grid-2" | "grid-3" | "grid-4" | "grid-6" | "grid-9" | "grid-masonry" | "grid-masonry-9" | "help" | "home" | "image" | "image focus point" | "impact-high" | "impact-low" | "impact-medium" | "impact-very-high" | "impact-very-low" | "info" | "info-fill" | "info-filled" | "label" | "label-filled" | "language" | "latest" | "lightbulb" | "list" | "list-search" | "lock" | "lock-filled" | "mail" | "map" | "map-outline" | "menu" | "minus" | "more-horizontal" | "more-vertical" | "move" | "move-up-down" | "navigation" | "note" | "offline" | "package" | "paper-plane" | "paperplane" | "pause" | "pause-circle" | "pdf" | "pen" | "pen-check" | "people" | "phone" | "picture" | "picture-circled" | "picture-filled" | "pin" | "planning" | "play" | "play-circle" | "play-fill" | "plus" | "plus-circle" | "print" | "refresh" | "reset" | "responsive" | "rubix-thema" | "save" | "saved-search" | "saved-search-fill" | "search" | "settings" | "share" | "share-alternative" | "sidebar" | "sidebar-fill" | "slack" | "slider-config" | "spellcheck" | "spinner" | "standard-view" | "star" | "star-fill" | "star-filled" | "stop" | "story" | "sync" | "tasks" | "text" | "text-circled" | "text-filled" | "thumbs-down" | "thumbs-up" | "thumbs-up-double" | "topic" | "union" | "upload" | "video" | "video overlay" | "video-circled" | "video-filled" | "video-rounded" | "view" | "view-off" | "volume-up")[];
+            options: ("search" | "print" | "responsive" | "activities" | "alert" | "alert-fill" | "alert-octagon" | "ai" | "apps" | "archive" | "arrow-left" | "arrow-nav-left" | "arrow-nav-right" | "arrow-up" | "arrow-right" | "arrow-down" | "arrowhead-left" | "arrowhead-right" | "arrowhead-top" | "atmo" | "audio" | "audio-circled" | "audio-filled" | "bag" | "bell" | "bell-fill" | "book" | "bookmark" | "bookmark-fill" | "bookmark-outlined" | "box" | "bulb" | "call" | "camera" | "check" | "checklist" | "checkmark" | "checkmark-double" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clipboard" | "clock" | "close" | "cloud-save" | "code" | "collapse" | "color-palette" | "comment" | "comment-fill" | "copy" | "copy-link" | "delete" | "download" | "dpa-id" | "edit" | "edit-add" | "eil" | "emoji" | "emoji-add" | "envelope" | "event" | "expand" | "external-link" | "file" | "file-pdf" | "filter" | "filter-outline" | "flag" | "flag-fill" | "flag-filled" | "flag-outline" | "flags" | "flash" | "folder" | "folder-add" | "folder-fill" | "folder-filled" | "gallery" | "graphic" | "graphic-circled" | "graphic-filled" | "graphics" | "grid-1" | "grid-2" | "grid-3" | "grid-4" | "grid-6" | "grid-9" | "grid-masonry" | "grid-masonry-9" | "help" | "home" | "image" | "image focus point" | "impact-high" | "impact-low" | "impact-medium" | "impact-very-high" | "impact-very-low" | "info" | "info-fill" | "info-filled" | "label" | "label-filled" | "language" | "latest" | "lightbulb" | "list" | "list-search" | "lock" | "lock-filled" | "mail" | "map" | "map-outline" | "menu" | "minus" | "more-horizontal" | "more-vertical" | "move" | "move-up-down" | "navigation" | "note" | "offline" | "package" | "paper-plane" | "paperplane" | "pause" | "pause-circle" | "pdf" | "pen" | "pen-check" | "people" | "phone" | "picture" | "picture-circled" | "picture-filled" | "pin" | "planning" | "play" | "play-circle" | "play-fill" | "plus" | "plus-circle" | "refresh" | "reset" | "rubix-thema" | "save" | "saved-search" | "saved-search-fill" | "settings" | "share" | "share-alternative" | "sidebar" | "sidebar-fill" | "slack" | "slider-config" | "spellcheck" | "spinner" | "standard-view" | "star" | "star-fill" | "star-filled" | "stop" | "story" | "sync" | "tasks" | "text" | "text-circled" | "text-filled" | "thumbs-down" | "thumbs-up" | "thumbs-up-double" | "topic" | "union" | "upload" | "video" | "video overlay" | "video-circled" | "video-filled" | "video-rounded" | "view" | "view-off" | "volume-up")[];
         };
         disabled: {
             control: "boolean";