@dpa-id-components/dpa-shared-components 22.0.0-next.1 → 22.0.0-next.11

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/UiIcon/UiIcon.stories.ts

@@ -1,9 +1,13 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import type {
+  ComponentPropsAndSlots,
+  Meta,
+  StoryObj,
+} from "@storybook/vue3-vite";
 
 import { icons } from "./icons.ts";
 import UiIcon from "./UiIcon.vue";
 
-type PropsAndStoryProps = InstanceType<typeof UiIcon> & {
+type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiIcon> & {
   outline: boolean;
 };
 
@@ -18,10 +22,10 @@ const meta = {
   argTypes: {
     outline: { control: "boolean" },
   },
-} satisfies Meta<PropsAndStoryProps>;
+} satisfies Meta<PropsAndCustomArgs>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<PropsAndCustomArgs>;
 
 export const Default: Story = {
   render: (args) => ({

package/dist/src/components/UiIcon/UiIconLoading.vue

@@ -1 +1,8 @@
-<template><div></div></template>
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  ></svg>
+</template>

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

@@ -100,6 +100,7 @@ export const icons = {
   "list": () => import("../../assets/icons/list.vue"),
   "list-search": () => import("../../assets/icons/list-search.vue"),
   "lock": () => import("../../assets/icons/lock.vue"),
+  "lock-filled": () => import("../../assets/icons/lock-filled.vue"),
   "mail": () => import("../../assets/icons/mail.vue"),
   "map": () => import("../../assets/icons/map.vue"),
   "map-filled": () => import("../../assets/icons/map-filled.vue"),
@@ -124,6 +125,7 @@ export const icons = {
   "pin": () => import("../../assets/icons/pin.vue"),
   "planning": () => import("../../assets/icons/planning.vue"),
   "play": () => import("../../assets/icons/play.vue"),
+  "play-filled": () => import("../../assets/icons/play-filled.vue"),
   "plus": () => import("../../assets/icons/plus.vue"),
   "print": () => import("../../assets/icons/print.vue"),
   "refresh": () => import("../../assets/icons/refresh.vue"),

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/README.md

@@ -3,29 +3,40 @@
 ## Usage
 
 ```vue
-<template>
-  <UiInput
-    label="Postal code"
-    id="postal_code-1"
-    name="postal_code"
-    value="04277"
-    required
-    placeholder="12345"
-  ></UiInput>
-</template>
-
-<script setup lang="ts">
-import { UiInput } from "@dpa-id-components/dpa-shared-components";
-</script>
+<UiInput
+  id="postal-code"
+  name="postal_code"
+  value="04277"
+  required
+  placeholder="12345"
+>
+  Postal code
+</UiInput>
+```
+
+**Using `v-model`**:
+
+```vue
+<UiInput v-model="postalCode">
+  Postal code
+</UiInput>
+```
+
+**With `number` value**:
+
+```vue
+<UiInput v-model="count" type="number">
+  Count
+</UiInput>
 ```
 
 ## API
 
 ### Models
 
-| Name      | Type     | Default     | Description          |
-|-----------|----------|-------------|----------------------|
-| _default_ | `string` | `undefined` | Sets the input value |
+| Name      | Type               | Default     | Description          |
+|-----------|--------------------|-------------|----------------------|
+| _default_ | `string \| number` | `undefined` | Sets the input value |
 
 ### Props
 

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

@@ -205,4 +205,24 @@ describe("UiInput", () => {
     await wrapper.setProps({ modelValue: "" });
     expect(input.element.value).toBe("");
   });
+
+  test("works with number model", async () => {
+    const wrapper = mount(UiInput, {
+      props: {
+        type: "number",
+        modelValue: 1,
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.element.value).toBe("1");
+
+    await input.setValue(2);
+    expect(input.element.value).toBe("2");
+    expect((wrapper.emitted("update:modelValue") ?? []).at(-1)).toEqual([2]);
+
+    await input.setValue(3);
+    expect(input.element.value).toBe("3");
+    expect((wrapper.emitted("update:modelValue") ?? []).at(-1)).toEqual([3]);
+  });
 });

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

@@ -1,22 +1,37 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import type {
+  ComponentPropsAndSlots,
+  Meta,
+  StoryObj,
+} from "@storybook/vue3-vite";
 import { action } from "storybook/actions";
 
 import UiInput from "./UiInput.vue";
 
+type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiInput> & {
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  autocomplete?: string;
+};
+
 const meta = {
   title: "forms/UiInput",
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   component: UiInput,
   args: {
     // Attributes
-    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
     name: "name",
+    placeholder: undefined,
     disabled: false,
     readonly: false,
+    autocomplete: "on",
 
     // Props
     modelValue: "",
     type: "text",
     inputStatus: undefined,
+    label: "",
     isTextarea: false,
 
     // Slots
@@ -24,8 +39,8 @@ const meta = {
   },
   argTypes: {
     // Attributes
-    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
     name: { control: "text" },
+    placeholder: { control: "text" },
     disabled: { control: "boolean" },
     readonly: { control: "boolean" },
   },
@@ -53,17 +68,16 @@ const meta = {
       update: action("update:modelValue"),
     },
   }),
-} satisfies Meta<typeof UiInput>;
+} satisfies Meta<PropsAndCustomArgs>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<PropsAndCustomArgs>;
 
 export const Default: Story = {};
 
 export const Placeholder: Story = {
   args: {
     // Attributes
-    // @ts-ignore
     placeholder: "Some placeholder text",
 
     // Slots
@@ -71,7 +85,7 @@ export const Placeholder: Story = {
   },
 };
 
-export const Value: Story = {
+export const StringValue: Story = {
   args: {
     // Props
     modelValue: "Text value",
@@ -81,6 +95,19 @@ export const Value: Story = {
   },
 };
 
+export const NumberValue: Story = {
+  args: {
+    // Attributes
+    type: "number",
+
+    // Props
+    modelValue: 2,
+
+    // Slots
+    default: "Count",
+  },
+};
+
 export const Errors: Story = {
   args: {
     // Props

package/dist/src/components/UiInput/UiInput.vue

@@ -34,7 +34,7 @@
       data-testid="input-value"
       v-bind="{ ...$attrs, class: null }"
       :data-is-label-raised="
-        $attrs.placeholder || isFocused || model ? '' : undefined
+        $attrs.placeholder || isFocused || hasInput ? '' : undefined
       "
       @focus="isFocused = true"
       @blur="isFocused = false"
@@ -55,7 +55,7 @@
       data-testid="input-value"
       v-bind="{ ...$attrs, class: null }"
       :data-is-label-raised="
-        $attrs.placeholder || isFocused || model ? '' : undefined
+        $attrs.placeholder || isFocused || hasInput ? '' : undefined
       "
       @focus="isFocused = true"
       @blur="isFocused = false"
@@ -82,7 +82,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="ModelValue extends string | number">
 import { computed, ref, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
@@ -130,8 +130,11 @@ const {
   inputStatus?: "info" | "warning" | "error";
 }>();
 
-const model = defineModel<string>();
+const model = defineModel<ModelValue>();
 
+const hasInput = computed(
+  () => model.value !== undefined && model.value !== "",
+);
 const isFocused = ref(false);
 
 const defaultId = useId();

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/README.md

@@ -31,7 +31,6 @@
 | `imageSrc`        | `String`                    | `""`       | Image to be displayed at the beginning of the list item. |
 | `imageShape`      | `"rounded" | "square"` | `"square"` | Shape pf the image to be displayed.                      |
 | `checkboxColor`   | `"blue" | "gray"`      | `"blue"`   | Checkbox color style.                                    |
-| `checkboxSize`    | `"small" | "medium"`   | `"medium"` | Checkbox size style.                                     |
 
 ### Events
 

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: