@dpa-id-components/dpa-shared-components 22.0.0-next.4 → 22.0.0-next.5

package/dist/{print-BLPvvCA8.js → print-DPDfMQTz.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/print.vue
 var i = {}, a = {

package/dist/{refresh-CU1dwwoY.js → refresh-1gzhEzRl.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/refresh.vue
 var i = {}, a = {

package/dist/{reset-Dgbd_O_e.js → reset-Cqepci78.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/reset.vue
 var i = {}, a = {

package/dist/{responsive-BQ5xjhN4.js → responsive-HisoeUq7.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/responsive.vue
 var i = {}, a = {

package/dist/{rubix-thema-OSZXu-Md.js → rubix-thema-D5jmA6bw.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/rubix-thema.vue
 var i = {}, a = {

package/dist/{save-CIg7q65b.js → save-DoP23FsL.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/save.vue
 var i = {}, a = {

package/dist/{saved-search-CeLi3iw6.js → saved-search-BY5aeZXd.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/saved-search.vue
 var i = {}, a = {

package/dist/{saved-search-filled-BTrN8F4r.js → saved-search-filled-D6t8P4EP.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/saved-search-filled.vue
 var i = {}, a = {

package/dist/{search-CQIKBYqi.js → search-Bb5cl_0r.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/search.vue
 var i = {}, a = {

package/dist/{settings-BMFNH3LB.js → settings-CCxd6N9K.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/settings.vue
 var i = {}, a = {

package/dist/{share-DMoEV0Gq.js → share-Cpx2YjXm.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/share.vue
 var i = {}, a = {

package/dist/{share-alternative-P6c3Vi7L.js → share-alternative-ZW-jTsIU.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/share-alternative.vue
 var i = {}, a = {

package/dist/{sidebar-D2uDpQM0.js → sidebar-DY7SHRNO.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createStaticVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/sidebar.vue
 var i = {}, a = {

package/dist/{sidebar-filled-LiiR992T.js → sidebar-filled-gmJ2_ZY2.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/sidebar-filled.vue
 var i = {}, a = {

package/dist/{slack-CP6YIaQf.js → slack-OnnXQ7Rc.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/slack.vue
 var i = {}, a = {

package/dist/{slider-config-B_eNooTe.js → slider-config-CPC1To1k.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/slider-config.vue
 var i = {}, a = {

package/dist/{spellcheck-B0Il_eZe.js → spellcheck-D3iOEOk5.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/spellcheck.vue
 var i = {}, a = {

package/dist/{spinner-CRHdpyRR.js → spinner-DghFg6Uk.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/spinner.vue
 var i = {}, a = {

package/dist/src/components/DpaMediaItem/DpaMediaItem.spec.ts

@@ -1,10 +1,10 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import DpaMediaItem from "./DpaMediaItem.vue";
 
 describe("DpaMediaItem", () => {
-  it("displays items in the time published slot", () => {
+  test("displays items in the time published slot", () => {
     const wrapper = mount(DpaMediaItem, {
       slots: {
         timePublished: "Time Slot",
@@ -13,7 +13,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.text()).toBe("Time Slot");
   });
 
-  it("displays items in the description slot", () => {
+  test("displays items in the description slot", () => {
     const wrapper = mount(DpaMediaItem, {
       slots: {
         description: "Description",
@@ -22,7 +22,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.text()).toBe("Description");
   });
 
-  it("displays items in the planning slot", () => {
+  test("displays items in the planning slot", () => {
     const wrapper = mount(DpaMediaItem, {
       slots: {
         planning: "Planning",
@@ -31,7 +31,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.text()).toBe("Planning");
   });
 
-  it("displays items in the textLength slot", () => {
+  test("displays items in the textLength slot", () => {
     const wrapper = mount(DpaMediaItem, {
       slots: {
         textLength: "Text Length",
@@ -40,7 +40,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.text()).toBe("Text Length");
   });
 
-  it("changes icon according to the genre", () => {
+  test("changes icon according to the genre", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         genre: "audio",
@@ -52,7 +52,7 @@ describe("DpaMediaItem", () => {
     });
   });
 
-  it("changes icon when fulfilled", () => {
+  test("changes icon when fulfilled", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         genre: "audio",
@@ -66,7 +66,7 @@ describe("DpaMediaItem", () => {
     });
   });
 
-  it("is styled differently when fulfilled", () => {
+  test("is styled differently when fulfilled", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         isFulfilled: true,
@@ -77,7 +77,7 @@ describe("DpaMediaItem", () => {
     expect(rootDiv.classes("border-neutral-faint")).toBe(true);
   });
 
-  it("renders images with the correct source", () => {
+  test("renders images with the correct source", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         imgSrc: "Source",
@@ -87,7 +87,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.find("img").attributes().src).toBe("Source");
   });
 
-  it("renders images with correct alt-text", () => {
+  test("renders images with correct alt-text", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         imgSrc: "Source",
@@ -98,7 +98,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.find("img").attributes().alt).toBe("Thumbnail :Alternative");
   });
 
-  it("displays the correct image count", () => {
+  test("displays the correct image count", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         imgSrc: "Source",
@@ -109,7 +109,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.find("[data-testid='imageCount']").text()).toBe("2");
   });
 
-  it("is styled differently when disabled", () => {
+  test("is styled differently when disabled", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         isFulfilled: true,

package/dist/src/components/UiBadge/UiBadge.spec.ts

@@ -1,15 +1,15 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiBadge from "./UiBadge.vue";
 
 describe("UiBadge", () => {
-  it("renders red color by default", () => {
+  test("renders red color by default", () => {
     const wrapper = mount(UiBadge);
     expect(wrapper.classes("bg-accent-red")).toBe(true);
   });
 
-  it("renders badge for top-entry case", () => {
+  test("renders badge for top-entry case", () => {
     const wrapper = mount(UiBadge, {
       props: {
         appearance: "accent-green",

package/dist/src/components/UiButton/UiButton.spec.ts

@@ -10,7 +10,9 @@ const router = createRouter({
     {
       path: "/",
       component: {
-        template: "<RouterView />",
+        template: /*html*/ `
+          <RouterView />
+        `,
       },
     },
   ],

package/dist/src/components/UiButtonGroup/UiButtonGroup.spec.ts

@@ -1,10 +1,10 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiButtonGroup from "./UiButtonGroup.vue";
 
 describe("UiButtonGroup", () => {
-  it("renders UiButtonGroup with default slot content", () => {
+  test("renders UiButtonGroup with default slot content", () => {
     const wrapper = mount(UiButtonGroup, {
       slots: {
         default: "Default Slot",

package/dist/src/components/UiCard/UiCard.spec.ts

@@ -1,10 +1,10 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiCard from "./UiCard.vue";
 
 describe("UiCard", () => {
-  it("renders Card with default slot content", () => {
+  test("renders Card with default slot content", () => {
     const wrapper = mount(UiCard, {
       slots: {
         default: "Default Slot",

package/dist/src/components/UiCheckBoxGroup/UiCheckBoxGroup.spec.ts

@@ -1,7 +1,7 @@
 import { randomInt } from "node:crypto";
 
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiCheckBoxGroup, { type CheckboxItem } from "./UiCheckBoxGroup.vue";
 
@@ -25,7 +25,7 @@ const entries = [
 ] as CheckboxItem[];
 
 describe("UiCheckBoxGroup", () => {
-  it("renders menu with prop values", async () => {
+  test("renders menu with prop values", async () => {
     const wrapper = mount(UiCheckBoxGroup, {
       props: {
         item: entries,
@@ -41,7 +41,7 @@ describe("UiCheckBoxGroup", () => {
     });
   });
 
-  it("emits checked-all when first item is clicked", async () => {
+  test("emits checked-all when first item is clicked", async () => {
     const wrapper = mount(UiCheckBoxGroup, {
       props: {
         item: entries,
@@ -55,7 +55,7 @@ describe("UiCheckBoxGroup", () => {
     expect(wrapper.emitted()).toHaveProperty("checked-all");
   });
 
-  it("emits item-checked when one item is clicked", async () => {
+  test("emits item-checked when one item is clicked", async () => {
     const wrapper = mount(UiCheckBoxGroup, {
       props: {
         item: entries,

package/dist/src/components/UiCheckbox/UiCheckbox.stories.ts

@@ -14,6 +14,7 @@ type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiCheckbox> & {
 
 const meta = {
   title: "forms/UiCheckbox",
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   component: UiCheckbox,
   argTypes: {
     // Attributes
@@ -39,12 +40,13 @@ export default meta;
 type Story = StoryObj<PropsAndCustomArgs>;
 
 export const Default: Story = {
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   render: (args) => ({
     components: { UiCheckbox },
     setup() {
       return { args };
     },
-    template: `
+    template: /*html*/ `
       <UiCheckbox v-bind="args">
         {{ args.default }}
         <template v-if="args.errors" #errors>
@@ -59,12 +61,13 @@ export const Errors: Story = {
   args: {
     errors: "This field is required.",
   },
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   render: (args) => ({
     components: { UiCheckbox },
     setup() {
       return { args };
     },
-    template: `
+    template: /*html*/ `
       <UiCheckbox v-bind="args">
         {{ args.default }}
         <template #errors>
@@ -76,6 +79,7 @@ export const Errors: Story = {
 };
 
 export const Group: Story = {
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   render: (args) => ({
     components: { UiCheckbox },
     setup() {
@@ -83,7 +87,7 @@ export const Group: Story = {
 
       return { args, languages };
     },
-    template: `
+    template: /*html*/ `
       <div class="space-y-2">
         <UiCheckbox v-model="languages" v-bind="args" value="en">English</UiCheckbox>
         <UiCheckbox v-model="languages" v-bind="args" value="de">German</UiCheckbox>

package/dist/src/components/UiCheckbox/UiCheckbox.vue

@@ -41,7 +41,11 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+  generic="ModelValue extends string[] | string | boolean"
+>
 import { computed, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
@@ -75,7 +79,7 @@ const {
   size?: "sm" | "md";
 }>();
 
-const model = defineModel<boolean | string | string[]>();
+const model = defineModel<ModelValue>();
 
 const defaultId = useId();
 const uniqueId = computed(() => id ?? `id-${defaultId}`);

package/dist/src/components/UiChip/UiChip.spec.ts

@@ -1,14 +1,14 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiChip from "./UiChip.vue";
 
 describe("UiChip", () => {
-  it("renders sm size by default", () => {
+  test("renders sm size by default", () => {
     const wrapper = mount(UiChip);
     expect(wrapper.classes("text-sm/5.5")).toBe(true);
   });
-  it("renders md size", () => {
+  test("renders md size", () => {
     const wrapper = mount(UiChip, {
       props: {
         size: "md",

package/dist/src/components/UiCollapseNavigation/UiCollapseNavigation.spec.ts

@@ -1,10 +1,10 @@
 import { shallowMount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiCollapseNavigation from "./UiCollapseNavigation.vue";
 
 describe("UiCollapseNavigation", () => {
-  it("should toggle the menu when the button is clicked", async () => {
+  test("should toggle the menu when the button is clicked", async () => {
     const wrapper = shallowMount(UiCollapseNavigation);
     const button = wrapper.findComponent({ name: "UiButton" });
 

package/dist/src/components/UiColorPicker/UiColorPicker.spec.ts

@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import { COLORS } from "./lib/colors.ts";
 import UiColorPicker from "./UiColorPicker.vue";
 
 describe("UiColorPicker", () => {
-  it("should have a default color selected", () => {
+  test("should have a default color selected", () => {
     const wrapper = mount(UiColorPicker);
     const defaultColor = wrapper.find(
       `[data-testid='color-btn-${COLORS[0].substring(1)}']`,
@@ -13,7 +13,7 @@ describe("UiColorPicker", () => {
     expect(defaultColor.find("#cp-checkmark")).toBeTruthy();
   });
 
-  it("should have a custom color set from v-model", () => {
+  test("should have a custom color set from v-model", () => {
     const wrapper = mount(UiColorPicker, {
       props: {
         modelValue: "#00c58e",
@@ -23,7 +23,7 @@ describe("UiColorPicker", () => {
     expect(colorInputContainer.find("#cp-checkmark")).toBeTruthy();
   });
 
-  it("should switch selected color from available options", async () => {
+  test("should switch selected color from available options", async () => {
     const wrapper = mount(UiColorPicker);
     const thirdOption = wrapper.findAll("button").at(2);
     await thirdOption?.trigger("click");
@@ -31,7 +31,7 @@ describe("UiColorPicker", () => {
     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([COLORS[2]]);
   });
 
-  it("should switch selected color from native color input", () => {
+  test("should switch selected color from native color input", () => {
     const wrapper = mount(UiColorPicker);
     const colorInputContainer = wrapper.find(".UiColorPicker-input");
     colorInputContainer.setValue("#00c58e");

package/dist/src/components/UiDatePicker/UiDatePicker.spec.ts

@@ -9,7 +9,7 @@ import {
   subMonths,
   subYears,
 } from "date-fns";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiDatePicker, { type PresetRange } from "./UiDatePicker.vue";
 
@@ -41,21 +41,21 @@ function createWrapper(
 }
 
 describe("UiDatePicker", () => {
-  it("renders Datepicker", () => {
+  test("renders Datepicker", () => {
     const wrapper = createWrapper();
     expect(wrapper.find('[data-testid="datepicker-trigger"]').exists()).toBe(
       true,
     );
   });
 
-  it("should emit an open event", async () => {
+  test("should emit an open event", async () => {
     const wrapper = createWrapper();
     const trigger = wrapper.find('[data-testid="datepicker-trigger"]');
     await trigger.trigger("click");
     expect(wrapper.emitted("open")).toBeTruthy();
   });
 
-  it("should emit a closed event", async () => {
+  test("should emit a closed event", async () => {
     const wrapper = createWrapper();
     const trigger = wrapper.find('[data-testid="datepicker-trigger"]');
     await trigger.trigger("click");
@@ -63,7 +63,7 @@ describe("UiDatePicker", () => {
     expect(wrapper.emitted().closed[0]).toBeTruthy();
   });
 
-  it("should show QuickFilters when leftSidebar is true", async () => {
+  test("should show QuickFilters when leftSidebar is true", async () => {
     const wrapper = createWrapper({
       leftSidebar: true,
       quickFilterHeadline: "Schnellfilter",
@@ -80,7 +80,7 @@ describe("UiDatePicker", () => {
     }
   });
 
-  it("should emit range for Heute Quickfilter", async () => {
+  test("should emit range for Heute Quickfilter", async () => {
     const wrapper = createWrapper({
       leftSidebar: true,
       quickFilterRanges,
@@ -93,7 +93,7 @@ describe("UiDatePicker", () => {
     );
   });
 
-  it("should emit range for Dieser Monat Quickfilter", async () => {
+  test("should emit range for Dieser Monat Quickfilter", async () => {
     const wrapper = createWrapper({
       leftSidebar: true,
       quickFilterRanges,
@@ -107,7 +107,7 @@ describe("UiDatePicker", () => {
   });
 
   describe("action-extra slot", () => {
-    it("should show string when prop is set and no slot", async () => {
+    test("should show string when prop is set and no slot", async () => {
       const wrapper = createWrapper({
         actionExtraContent: "Extra info text",
         inline: true,
@@ -116,7 +116,7 @@ describe("UiDatePicker", () => {
       expect(wrapper.text()).toContain("Extra info text");
     });
 
-    it("should override text when slot action-extra is used and prop is set", async () => {
+    test("should override text when slot action-extra is used and prop is set", async () => {
       const wrapper = createWrapper(
         {
           actionExtraContent: "Prop text",
@@ -131,7 +131,7 @@ describe("UiDatePicker", () => {
       expect(wrapper.text()).not.toContain("Prop text");
     });
 
-    it("should be empty when neither prop nor slot is set", async () => {
+    test("should be empty when neither prop nor slot is set", async () => {
       const wrapper = createWrapper({ inline: true });
 
       const actionExtra = wrapper.find(".dp__action_extra");