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

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

@@ -119,7 +119,9 @@ export const Default: Story = {
     setup() {
       return { args };
     },
-    template: `<UiDatePicker v-bind='args' />`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };
 
@@ -138,8 +140,12 @@ export const Inline: Story = {
       });
       return { args, date, formattedDate };
     },
-    template: `<div class="space-y-8">
-      <UiDatePicker v-bind='args' v-model="date"></UiDatePicker><div>Selected Date: {{ formattedDate }}</div></div>`,
+    template: /*html*/ `
+      <div class="space-y-8">
+        <UiDatePicker v-bind="args" v-model="date" />
+        <div>Selected Date: {{ formattedDate }}</div>
+      </div>
+    `,
   }),
 };
 
@@ -150,16 +156,18 @@ export const WithResetButton: Story = {
       const date = ref([new Date(), new Date()]);
       return { args, date };
     },
-    template: `<UiDatePicker v-bind='args' v-model="date">
-      <template #action-extra="{ reset }">
-        <div class="text-left">
-          <UiButton  appearance="secondary" size="xs" @click="reset">
-            <UiIcon name="reset" />
-            <span>Zurücksetzen</span>
-          </UiButton>
-      </div>
-      </template>
-    </UiDatePicker>`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" v-model="date">
+        <template #action-extra="{ reset }">
+          <div class="text-left">
+            <UiButton  appearance="secondary" size="xs" @click="reset">
+              <UiIcon name="reset" />
+              <span>Zurücksetzen</span>
+            </UiButton>
+          </div>
+        </template>
+      </UiDatePicker>
+    `,
   }),
 };
 
@@ -173,16 +181,18 @@ export const WithActionRow: Story = {
       const date = ref();
       return { args, date };
     },
-    template: `<UiDatePicker v-bind='args' v-model="date">
-      <template #action-row="{ selectDate, closePicker }">
-            <UiButton  appearance="secondary" size="xs" @click="closePicker">
-              <span>Abbrechen</span>
-            </UiButton>
-            <UiButton  appearance="primary" size="xs" @click="selectDate">
-              <span>Anwenden</span>
-            </UiButton>
-      </template>
-    </UiDatePicker>`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" v-model="date">
+        <template #action-row="{ selectDate, closePicker }">
+          <UiButton appearance="secondary" size="xs" @click="closePicker">
+            Abbrechen
+          </UiButton>
+          <UiButton size="xs" @click="selectDate">
+            Anwenden
+          </UiButton>
+        </template>
+      </UiDatePicker>
+    `,
   }),
 };
 
@@ -204,7 +214,9 @@ export const MonthPicker: Story = {
     setup() {
       return { args };
     },
-    template: "<UiDatePicker v-bind='args' />",
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };
 
@@ -222,7 +234,9 @@ export const WithQuickfilters: Story = {
     setup() {
       return { args };
     },
-    template: "<UiDatePicker v-bind='args' />",
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };
 
@@ -238,7 +252,9 @@ export const WithMultiCalendars: Story = {
     setup() {
       return { args };
     },
-    template: "<UiDatePicker v-bind='args' />",
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };
 
@@ -255,7 +271,9 @@ export const WithCustomFormatter: Story = {
       const date = ref([new Date(), new Date()]);
       return { args, date };
     },
-    template: `<UiDatePicker v-bind='args' v-model="date" />`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" v-model="date" />
+    `,
   }),
 };
 
@@ -283,6 +301,8 @@ export const WithAllSettings: Story = {
     setup() {
       return { args };
     },
-    template: `<UiDatePicker v-bind='args'></UiDatePicker>`,
+    template: /*html*/ `
+      <UiDatePicker v-bind="args" />
+    `,
   }),
 };

package/dist/src/components/UiDialog/UiDialog.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 UiDialog from "./UiDialog.vue";
 
 describe("UiDialog", () => {
-  it("renders dialog with default slot content", () => {
+  test("renders dialog with default slot content", () => {
     const wrapper = mount(UiDialog, {
       slots: {
         header: "Header Slot",
@@ -14,7 +14,7 @@ describe("UiDialog", () => {
     expect(wrapper.text()).toContain("Default Slot");
   });
 
-  it("renders dialog with header slot content", () => {
+  test("renders dialog with header slot content", () => {
     const wrapper = mount(UiDialog, {
       slots: {
         header: "Header Slot",
@@ -25,7 +25,7 @@ describe("UiDialog", () => {
     expect(wrapper.find("header").text()).toBe("Header Slot");
   });
 
-  it("renders dialog with close button if by prop provided", () => {
+  test("renders dialog with close button if by prop provided", () => {
     const wrapper = mount(UiDialog, {
       slots: {
         header: "Header Slot",
@@ -39,7 +39,7 @@ describe("UiDialog", () => {
     expect(wrapper.find("button")).toBeTruthy();
   });
 
-  it("renders dialog with footer slot content", () => {
+  test("renders dialog with footer slot content", () => {
     const wrapper = mount(UiDialog, {
       slots: {
         header: "Header Slot",

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

@@ -9,6 +9,7 @@ const meta = {
   title: "Ui/UiDialog",
   args: {
     hasCloseButton: true,
+    animate: true,
   },
   render: (args) => ({
     setup() {

package/dist/src/components/UiDialog/UiDialog.vue

@@ -5,6 +5,7 @@
       cn(
         'fixed inset-0 m-auto w-120 rounded-2xl bg-surface-level-1 text-current shadow-lg backdrop:bg-shadow-strong',
         $attrs.class,
+        { animate },
       )
     "
     @click.self="dialog?.requestClose()"
@@ -64,9 +65,14 @@ defineSlots<{
   }) => any;
 }>();
 
-const { hasCloseButton = true, closeLabel = undefined } = defineProps<{
+const {
+  hasCloseButton = true,
+  closeLabel = undefined,
+  animate = false,
+} = defineProps<{
   hasCloseButton?: boolean;
   closeLabel?: string;
+  animate?: boolean;
 }>();
 
 function close() {
@@ -87,3 +93,45 @@ defineExpose({
   requestClose,
 });
 </script>
+
+<style scoped>
+@media (prefers-reduced-motion: no-preference) {
+  /* Backdrop */
+  .animate::backdrop {
+    background: rgb(0 0 0 / 0%);
+    transition:
+      background 0.3s ease,
+      display 0.2s ease allow-discrete,
+      overlay 0.2s ease allow-discrete;
+  }
+
+  .animate[open]::backdrop {
+    background: rgb(0 0 0 / 50%);
+
+    @starting-style {
+      background: rgb(0 0 0 / 0%);
+    }
+  }
+
+  /* Dialog box — fade + scale */
+  .animate {
+    opacity: 0;
+    transform: scale(0.95);
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease,
+      display 0.2s ease allow-discrete,
+      overlay 0.2s ease allow-discrete;
+  }
+
+  .animate[open] {
+    opacity: 1;
+    transform: scale(1);
+
+    @starting-style {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+}
+</style>

package/dist/src/components/UiFilterBadge/UiFilterBadge.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 UiFilterBadge from "./UiFilterBadge.vue";
 
 describe("UiFilterBadge", () => {
-  it("renders with colors set", () => {
+  test("renders with colors set", () => {
     const wrapper = mount(UiFilterBadge, {
       props: {
         textColor: "#000",
@@ -17,7 +17,7 @@ describe("UiFilterBadge", () => {
     expect(innerText.attributes().style).toBe("color: rgb(0, 0, 0);");
   });
 
-  it("renders large size by default", () => {
+  test("renders large size by default", () => {
     const wrapper = mount(UiFilterBadge);
     const innerText = wrapper.find('[data-testid="innerText"]');
 
@@ -26,7 +26,7 @@ describe("UiFilterBadge", () => {
     expect(innerText.classes("leading-relaxed")).toBe(true);
   });
 
-  it("renders small size", () => {
+  test("renders small size", () => {
     const wrapper = mount(UiFilterBadge, {
       props: { size: "sm" },
     });
@@ -37,7 +37,7 @@ describe("UiFilterBadge", () => {
     expect(innerText.classes("leading-normal")).toBe(true);
   });
 
-  it("renders medium size", () => {
+  test("renders medium size", () => {
     const wrapper = mount(UiFilterBadge, {
       props: { size: "md" },
     });
@@ -48,7 +48,7 @@ describe("UiFilterBadge", () => {
     expect(innerText.classes("leading-normal")).toBe(true);
   });
 
-  it("renders xl size", () => {
+  test("renders xl size", () => {
     const wrapper = mount(UiFilterBadge, {
       props: { size: "xl" },
     });

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

@@ -1,5 +1,5 @@
 import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiFilterButton from "./UiFilterButton.vue";
 
@@ -16,7 +16,7 @@ function createWrapper(
 }
 
 describe("UiFilterBadge", () => {
-  it("renders attributes on correct element", () => {
+  test("renders attributes on correct element", () => {
     const wrapper = createWrapper({
       props: {
         id: "id",
@@ -35,12 +35,12 @@ describe("UiFilterBadge", () => {
     expect(button.element.getAttribute("data-testid")).not.toBe("testId");
   });
 
-  it("renders with given Title", () => {
+  test("renders with given Title", () => {
     const wrapper = createWrapper();
     expect(wrapper.text()).toBe("Foo Bar");
   });
 
-  it("changes colour according to prop change", () => {
+  test("changes colour according to prop change", () => {
     const wrapper = createWrapper({
       props: {
         variant: "blue-rounded",
@@ -49,7 +49,7 @@ describe("UiFilterBadge", () => {
     expect(wrapper.classes("bg-primary")).toBe(true);
   });
 
-  it("emits click event", async () => {
+  test("emits click event", async () => {
     const wrapper = createWrapper();
     const button = wrapper.find('[data-testid="filter-button"]');
     await button.trigger("click");
@@ -58,7 +58,7 @@ describe("UiFilterBadge", () => {
     expect(lastEvent).toEqual([]);
   });
 
-  it("renders attributes on correct element", () => {
+  test("renders attributes on correct element", () => {
     const wrapper = mount(UiFilterButton, {
       props: {
         options: [],

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

@@ -1,5 +1,5 @@
 import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, test, vi } from "vitest";
 
 import { icons } from "./icons.ts";
 import UiIcon from "./UiIcon.vue";
@@ -16,7 +16,7 @@ describe("UiIcon", () => {
     vi.resetModules();
   });
 
-  it.each<[Partial<InstanceType<typeof UiIcon>["$props"]>, string]>([
+  test.each<[Partial<InstanceType<typeof UiIcon>["$props"]>, string]>([
     [{ size: "xs" }, "size-3"],
     [{ size: "sm" }, "size-4"],
     [{ size: "md" }, "size-5"],
@@ -35,11 +35,11 @@ describe("UiIcon", () => {
     expect(wrapper.classes(expectedClassNames)).toBe(true);
   });
 
-  it("should be able to resolve all icons", async () => {
+  test("should be able to resolve all icons", async () => {
     await Promise.all(Object.values(icons));
   });
 
-  it("throws on non-existing icon name", async () => {
+  test("throws on non-existing icon name", async () => {
     function callback() {
       createWrapper({
         props: {

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

@@ -1,5 +1,5 @@
 import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiIconButton from "./UiIconButton.vue";
 
@@ -12,7 +12,7 @@ function createWrapper(
 }
 
 describe("UiIconButton", () => {
-  it("should have no background when color none is taken  ", () => {
+  test("should have no background when color none is taken  ", () => {
     const wrapper = createWrapper({
       props: {
         title: "Title",
@@ -25,7 +25,7 @@ describe("UiIconButton", () => {
     expect(wrapper.classes("bg-primary")).toBe(false);
   });
 
-  it("should render small sized button by default", () => {
+  test("should render small sized button by default", () => {
     const wrapper = createWrapper({
       props: {
         iconName: "alert",
@@ -39,7 +39,7 @@ describe("UiIconButton", () => {
     expect(wrapper.classes("w-8")).toBe(true);
   });
 
-  it("should emit a click event when clicked", async () => {
+  test("should emit a click event when clicked", async () => {
     const wrapper = createWrapper({
       props: {
         title: "Title",
@@ -52,7 +52,7 @@ describe("UiIconButton", () => {
     expect(wrapper.emitted().click).toBeTruthy();
   });
 
-  it("should not emit click event when disabled", async () => {
+  test("should not emit click event when disabled", async () => {
     const wrapper = createWrapper({
       props: {
         title: "Title",
@@ -65,7 +65,7 @@ describe("UiIconButton", () => {
     expect(wrapper.emitted().click).toBeFalsy();
   });
 
-  it("should have no hover effect when disabled", async () => {
+  test("should have no hover effect when disabled", async () => {
     const wrapper = createWrapper({
       props: {
         title: "Title",

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

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiInfoContent from "./UiInfoContent.vue";
 
@@ -15,7 +15,7 @@ describe("UiInfoContent", () => {
     props: { appearance: "default", iconName: "search" },
   });
 
-  it("renders slot content for title, text and action content", () => {
+  test("renders slot content for title, text and action content", () => {
     expect(wrapper.find("[data-testid='info-title']").text()).toBe(
       "Keine Ergebnisse",
     );
@@ -25,23 +25,23 @@ describe("UiInfoContent", () => {
     expect(wrapper.find("button").text()).toBe("Klick mich");
   });
 
-  it("renders correct icon classes for default appearance", () => {
+  test("renders correct icon classes for default appearance", () => {
     const icon = wrapper.find("[data-testid='info-icon']");
     expect(icon.classes("bg-surface-base")).toBe(true);
     expect(icon.classes("text-neutral-subtle")).toBe(true);
   });
 
-  it("renders responsive icon size classes", () => {
+  test("renders responsive icon size classes", () => {
     const icon = wrapper.find("[data-testid='icon']");
     expect(icon.classes("size-6")).toBe(true);
     expect(icon.classes("sm:size-10")).toBe(true);
   });
 
-  it("renders correct layout background for default appearance", () => {
+  test("renders correct layout background for default appearance", () => {
     expect(wrapper.find("div").classes("bg-surface-level-1")).toBe(true);
   });
 
-  it("renders correct layout background for default-alt appearance", () => {
+  test("renders correct layout background for default-alt appearance", () => {
     const defaultAltWrapper = mount(UiInfoContent, {
       slots: defaultSlots,
       props: { appearance: "default-alt", iconName: "search" },

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

@@ -12,6 +12,7 @@ type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiInput> & {
   placeholder?: string;
   disabled?: boolean;
   readonly?: boolean;
+  autocomplete?: string;
 };
 
 const meta = {
@@ -20,13 +21,16 @@ const meta = {
   args: {
     // Attributes
     name: "name",
+    placeholder: undefined,
     disabled: false,
     readonly: false,
+    autocomplete: "on",
 
     // Props
     modelValue: "",
     type: "text",
     inputStatus: undefined,
+    label: "",
     isTextarea: false,
 
     // Slots

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

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

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

@@ -1,5 +1,5 @@
 import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiIcon from "../UiIcon/UiIcon.vue";
 
@@ -18,7 +18,7 @@ function createWrapper(
 }
 
 describe("UiListItem", () => {
-  it("renders attributes on correct element", () => {
+  test("renders attributes on correct element", () => {
     const wrapper = createWrapper({
       props: {
         checkBoxMenu: true,
@@ -36,18 +36,18 @@ describe("UiListItem", () => {
     expect(input.element.classList.contains("testClass")).toBe(false);
   });
 
-  it("renders default slot", () => {
+  test("renders default slot", () => {
     const wrapper = createWrapper();
     expect(wrapper.text()).toBe("Default Slot");
   });
 
-  it("emits list-item-click event", async () => {
+  test("emits list-item-click event", async () => {
     const wrapper = createWrapper();
     await wrapper.trigger("click");
     expect(wrapper.emitted("list-item-click")).toBeTruthy();
   });
 
-  it("renders checkbox within and gets checked", () => {
+  test("renders checkbox within and gets checked", () => {
     const wrapper = createWrapper({
       props: { checkBoxMenu: true, isChecked: true },
     });
@@ -55,7 +55,7 @@ describe("UiListItem", () => {
     expect(checkbox.element.checked).toBe(true);
   });
 
-  it("renders checkmark within", () => {
+  test("renders checkmark within", () => {
     const wrapper = createWrapper({
       props: {
         checkBoxMenu: false,
@@ -69,7 +69,7 @@ describe("UiListItem", () => {
     expect(checkmark.props("name")).toBe("checkmark");
   });
 
-  it("renders custom icon within", () => {
+  test("renders custom icon within", () => {
     const wrapper = createWrapper({
       props: {
         selected: false,
@@ -82,7 +82,7 @@ describe("UiListItem", () => {
     expect(icon.props("name")).toBe("alert");
   });
 
-  it("renders custom image within", () => {
+  test("renders custom image within", () => {
     const wrapper = createWrapper({
       props: {
         imageSrc:

package/dist/src/components/UiListItem/UiListItem.vue

@@ -13,7 +13,7 @@
       )
     "
     tabindex="0"
-    @click.prevent.stop="$emit('list-item-click', value, true)"
+    @click.prevent.stop="$emit('list-item-click', value)"
   >
     <UiCheckbox
       v-if="checkBoxMenu"
@@ -21,7 +21,7 @@
       :model-value="isChecked"
       :disabled="disabled"
       :size="checkboxSize"
-      @click.stop="$emit('list-item-click', value, false)"
+      @click.stop="$emit('list-item-click', value)"
     >
       <span class="sr-only"><slot /></span>
     </UiCheckbox>
@@ -85,6 +85,6 @@ const {
 }>();
 
 defineEmits<{
-  "list-item-click": [value: string, shouldCloseMenu: boolean];
+  "list-item-click": [value: string];
 }>();
 </script>

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

@@ -301,7 +301,7 @@ describe("UiMenu", () => {
 
     await items[0].trigger("click");
     expect(wrapper.find('[data-testid="menu-option-list"]').isVisible()).toBe(
-      false,
+      true,
     );
   });
 });