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

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

@@ -12,21 +12,26 @@ type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiInput> & {
   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
     name: "name",
+    placeholder: undefined,
     disabled: false,
     readonly: false,
+    autocomplete: "on",
 
     // Props
     modelValue: "",
     type: "text",
     inputStatus: undefined,
+    label: "",
     isTextarea: false,
 
     // Slots
@@ -80,7 +85,7 @@ export const Placeholder: Story = {
   },
 };
 
-export const Value: Story = {
+export const StringValue: Story = {
   args: {
     // Props
     modelValue: "Text value",
@@ -90,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:

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

@@ -2,11 +2,10 @@
   <li
     :class="
       cn(
-        'flex cursor-pointer list-none items-center gap-2 px-4 py-2 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
+        'flex cursor-pointer list-none items-center gap-2 px-4 py-1.5 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
         {
           'cursor-default text-neutral-medium': disabled,
           'is-selected': selected,
-          'py-3': checkboxSize === 'md',
         },
         overrideClasses,
         $attrs.class,
@@ -20,7 +19,7 @@
       :appearance="checkboxAppearance"
       :model-value="isChecked"
       :disabled="disabled"
-      :size="checkboxSize"
+      size="sm"
       @click.stop="$emit('list-item-click', value)"
     >
       <span class="sr-only"><slot /></span>
@@ -65,7 +64,6 @@ const {
   imageSrc = undefined,
   imageShape = "rounded",
   checkboxAppearance = "primary",
-  checkboxSize = "md",
   isChecked = false,
   disabled = false,
 } = defineProps<{
@@ -79,7 +77,6 @@ const {
   imageShape?: "rounded" | "square";
   iconSize?: "sm" | "md" | "lg";
   checkboxAppearance?: "primary" | "secondary";
-  checkboxSize?: "sm" | "md";
   isChecked?: boolean;
   disabled?: boolean;
 }>();

package/dist/src/components/UiMediaTypeIcon/UiMediaTypeIcon.vue

@@ -42,7 +42,7 @@ const iconComponent = computed(() =>
 
 watchEffect(() => {
   if (!icons[name]) {
-    throw new Error(`UiMediaFormatIcon: No icon named “${name}” exists.`);
+    throw new Error(`UiMediaTypeIcon: No icon named “${name}” exists.`);
   }
 });
 </script>

package/dist/src/components/UiMenu/README.md

@@ -89,7 +89,6 @@ const options = ref([
 | `buttonAppearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, or `"ghost"` | `"secondary-alt"` |  |
 | `listVariant`          | `"checkbox" | "selectable" | "blank"`                                                                 | `"blank"`                     | Menu style.                                                                                                                                                                                                                                  |
 | `checkboxColor`        | `"blue" | "gray"`                                                                                          | `"blue"`                      | Checkbox color style.                                                                                                                                                                                                                        |
-| `checkboxSize`         | `"small" | "medium"`                                                                                       | `"medium"`                    | Checkbox size style.                                                                                                                                                                                                                         |
 | `imageShape`           | `"rounded" | "square"`                                                                                     | `"square"`                    | shape of image.                                                                                                                                                                                                                              |
 | `hasResetOption`       | `boolean`                                                                                                       | `false`                       | Toggles option for a reset button                                                                                                                                                                                                            |
 | `resetLabel`           | `string`                                                                                                        | `""`                         | Sets text of reset button.                                                                                                                                                                                                                   |
@@ -142,7 +141,6 @@ Wraps the UiListItem and uses the same settings as in the original UiMenu, helps
 | `listVariant?`   | `"checkbox" | "selectable" | "blank"`   | `blank`     | Provide the list variant, same as in UiMenu.vue           |
 | `iconSize?`      | `"small" | "medium" | "large"`      | `small`     | Provide the icon size, same as in UiMenu.vue              |
 | `imageShape?`    | `"rounded" | "square"`    | `square`    | Provide the imageShape, same as in UiMenu.vue             |
-| `checkboxSize?`  | `"small" | "medium"`  | `medium`    | Provide the checkboxSize, same as in UiMenu.vue           |
 | `checkboxColor?` | `"blue" | "gray"` | `blue`      | Provide the checkboxColor, same as in UiMenu.vue          |
 
 #### Slots