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

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

@@ -34,7 +34,7 @@ const meta = {
     buttonAppearance: "secondary-alt",
     filterButtonSize: undefined,
     defaultTitle: "Default Title",
-    multiLabel: "selected Options",
+    multiLabel: "selected options",
     noTitle: false,
 
     // Search
@@ -48,7 +48,6 @@ const meta = {
     // Menu
     iconSize: "sm",
     imageShape: "square",
-    checkboxSize: "md",
     checkboxAppearance: "primary",
     listVariant: "blank",
   },
@@ -57,52 +56,61 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const renderDefault: Story["render"] = (args) => ({
-  setup() {
-    const options = ref<UiMenuOptionType<string>[]>([
-      {
-        label: "Option 1",
-        value: "value 1",
-        selected: true,
-      },
-      {
-        label: "Option 2 is really long, much longer than the rest",
-        value: "value 2",
-        selected: false,
-        hasDividerAbove: true,
-      },
-      {
-        label: "Option 3",
-        value: "value 3",
-        selected: false,
-      },
-      {
-        label: "Option 4",
-        value: "value 4",
-        selected: false,
-      },
-    ]);
-    const filteredOptions = ref(Array.from(options.value));
-    const onSelect = (option: UiMenuSelectedOption<string>) => {
-      filteredOptions.value[option.index].selected =
-        !filteredOptions.value[option.index].selected;
-    };
-    const onUpdateQuery = (value: string) => {
-      filteredOptions.value = options.value.filter((option) =>
-        option.label.toLowerCase().includes(value.toLowerCase()),
-      );
-    };
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      const options = ref<UiMenuOptionType<string>[]>([
+        {
+          label: "Option 1",
+          value: "value 1",
+          selected: true,
+          iconName: "info",
+        },
+        {
+          label: "Option 2 is really long, much longer than the rest",
+          value: "value 2",
+          selected: false,
+          iconName: "alert",
+          hasDividerAbove: true,
+        },
+        {
+          label: "Option 3",
+          value: "value 3",
+          selected: false,
+          iconName: "bulb",
+        },
+        {
+          label: "Option 4",
+          value: "value 4",
+          selected: false,
+          iconName: "language",
+        },
+      ]);
+      const filteredOptions = ref(Array.from(options.value));
 
-    return {
-      args,
-      onSelect,
-      onUpdateQuery,
-      filteredOptions,
-      options,
-    };
-  },
-  components: { UiMenu },
-  template: `
+      const onSelect = (selectedOption: UiMenuSelectedOption<string>) => {
+        for (const option of filteredOptions.value) {
+          option.selected =
+            option.value === selectedOption.value ? true : false;
+        }
+      };
+
+      const onUpdateQuery = (value: string) => {
+        filteredOptions.value = options.value.filter((option) =>
+          option.label.toLowerCase().includes(value.toLowerCase()),
+        );
+      };
+
+      return {
+        args,
+        onSelect,
+        onUpdateQuery,
+        filteredOptions,
+        options,
+      };
+    },
+    components: { UiMenu },
+    template: /*html*/ `
     <aside class="w-50 h-200 p-4 bg-accent-green">
       <UiMenu
         v-bind="args"
@@ -113,32 +121,14 @@ const renderDefault: Story["render"] = (args) => ({
       />
     </aside>
   `,
-  methods: {
-    optionSelected: action("option-selected"),
-    updateQuery: action("update:query"),
-  },
-});
-
-export const Default: Story = {
-  render: renderDefault,
-};
-
-export const WithResetAndSearch: Story = {
-  render: renderDefault,
-  args: {
-    hasResetOption: true,
-    hasSearch: true,
-    resetLabel: "Zurücksetzen",
-    searchPlaceholder: "Suchen",
-    buttonAppearance: "secondary-alt",
-    listVariant: "checkbox",
-    checkboxSize: "sm",
-    defaultTitle: "Optionen",
-    hasAutoFocus: true,
-  },
+    methods: {
+      optionSelected: action("option-selected"),
+      updateQuery: action("update:query"),
+    },
+  }),
 };
 
-export const WithGroupedOptions: Story = {
+export const GroupedOptions: Story = {
   args: {
     hasResetOption: true,
     hasSearch: true,
@@ -146,7 +136,6 @@ export const WithGroupedOptions: Story = {
     searchPlaceholder: "Suchen",
     buttonAppearance: "secondary-alt",
     listVariant: "checkbox",
-    checkboxSize: "sm",
     defaultTitle: "Optionen",
     hasAutoFocus: true,
   },
@@ -224,17 +213,19 @@ export const WithGroupedOptions: Story = {
         },
       ]);
       const filteredOptions = ref(Array.from(groupedOptions.value));
-      const onSelect = (option: UiMenuSelectedOption<string>) => {
-        filteredOptions.value.forEach(({ options }, groupIndex) => {
-          options.forEach(({ value }, optionsIndex) => {
-            if (value === option.value) {
-              filteredOptions.value[groupIndex].options[optionsIndex].selected =
-                !filteredOptions.value?.[groupIndex].options?.[optionsIndex]
-                  .selected;
-            }
-          });
-        });
+
+      const onSelect = (selectedOption: UiMenuSelectedOption<string>) => {
+        for (const { options } of filteredOptions.value) {
+          const option = options.find(
+            ({ value }) => value === selectedOption.value,
+          );
+          if (option) {
+            option.selected = !option.selected;
+            break;
+          }
+        }
       };
+
       const onUpdateQuery = (value: string) => {
         filteredOptions.value = groupedOptions.value.map(
           ({ groupLabel, options }) => ({
@@ -255,7 +246,7 @@ export const WithGroupedOptions: Story = {
       };
     },
     components: { UiMenu },
-    template: `
+    template: /*html*/ `
       <UiMenu
         v-bind="args"
         v-model:query="args.query"
@@ -292,67 +283,15 @@ export const WithImages: Story = {
         },
       ]);
       const filteredOptions = ref(Array.from(options.value));
-      const onSelect = (option: UiMenuSelectedOption<string>) => {
-        filteredOptions.value[option.index].selected =
-          !filteredOptions.value[option.index].selected;
-      };
-      const onUpdateQuery = (value: string) => {
-        filteredOptions.value = options.value.filter((option) =>
-          option.label.toLowerCase().includes(value.toLowerCase()),
-        );
-      };
 
-      return {
-        args,
-        onSelect,
-        onUpdateQuery,
-        filteredOptions,
-        options,
+      const onSelect = (selectedOption: UiMenuSelectedOption<string>) => {
+        for (const option of filteredOptions.value) {
+          if (option.value === selectedOption.value) {
+            option.selected = !option.selected;
+          }
+        }
       };
-    },
-    components: { UiMenu },
-    template: `
-      <UiMenu
-        v-bind="args"
-        v-model:query="args.query"
-        :options="filteredOptions"
-        @option-selected="(option)=> { onSelect(option); optionSelected(option); }"
-        @update:query="(value) => { onUpdateQuery(value); updateQuery(value); }"
-      />
-    `,
-    methods: {
-      optionSelected: action("option-selected"),
-      updateQuery: action("update:query"),
-    },
-  }),
-  args: {
-    listVariant: "checkbox",
-    checkboxSize: "sm",
-  },
-};
 
-export const WithIcons: Story = {
-  render: (args) => ({
-    setup() {
-      const options = ref<UiMenuOptionType<string>[]>([
-        {
-          label: "Update me",
-          value: "updateme",
-          selected: true,
-          iconName: "user-need-update-me",
-        },
-        {
-          label: "Help me",
-          value: "helpme",
-          selected: true,
-          iconName: "user-need-help-me",
-        },
-      ]);
-      const filteredOptions = ref(Array.from(options.value));
-      const onSelect = (option: UiMenuSelectedOption<string>) => {
-        filteredOptions.value[option.index].selected =
-          !filteredOptions.value[option.index].selected;
-      };
       const onUpdateQuery = (value: string) => {
         filteredOptions.value = options.value.filter((option) =>
           option.label.toLowerCase().includes(value.toLowerCase()),
@@ -368,12 +307,11 @@ export const WithIcons: Story = {
       };
     },
     components: { UiMenu },
-    template: `
+    template: /*html*/ `
       <UiMenu
         v-bind="args"
         v-model:query="args.query"
         :options="filteredOptions"
-        :button-variant="filteredOptions.some((option) => option.selected) ? 'primary' : 'secondary-alt'"
         @option-selected="(option)=> { onSelect(option); optionSelected(option); }"
         @update:query="(value) => { onUpdateQuery(value); updateQuery(value); }"
       />
@@ -385,6 +323,5 @@ export const WithIcons: Story = {
   }),
   args: {
     listVariant: "checkbox",
-    checkboxSize: "sm",
   },
 };

package/dist/src/components/UiMenu/UiMenu.vue

@@ -26,11 +26,11 @@
     </template>
 
     <div
-      class="block w-max max-w-full divide-y overflow-hidden rounded-sm text-base/6 shadow-lg focus:outline-hidden sm:text-sm/5"
+      class="block w-max max-w-full divide-y overflow-hidden rounded-lg border border-neutral-faint bg-neutral text-base/6 shadow-md focus:outline-hidden sm:text-sm/5"
     >
       <div
         v-if="hasSearch"
-        class="flex items-center gap-2 rounded-t-sm px-4 py-2 text-neutral-primary [&:has(>input:focus-visible)]:focus-outline [&:has(>input:focus-visible)]:-outline-offset-2"
+        class="flex items-center gap-2 rounded-t-lg px-4 py-1.5 text-neutral-primary [&:has(>input:focus-visible)]:focus-outline [&:has(>input:focus-visible)]:-outline-offset-2"
       >
         <UiIcon
           class="shrink-0 text-neutral-emphasis"
@@ -51,7 +51,6 @@
       <slot
         v-bind="{
           checkboxAppearance,
-          checkboxSize,
           iconSize,
           imageShape,
           listVariant,
@@ -87,7 +86,6 @@
                 :image-shape="imageShape"
                 :image-src="option.imageSrc"
                 :icon-name="option.iconName"
-                :checkbox-size="checkboxSize"
                 :checkbox-appearance="checkboxAppearance"
                 class="hover:bg-neutral-whisper focus:bg-neutral-faint"
                 :class="{
@@ -102,7 +100,7 @@
         </ul>
       </slot>
 
-      <div v-if="hasResetOption" class="px-4 py-2 text-neutral-primary">
+      <div v-if="hasResetOption" class="px-4 py-1.5 text-neutral-primary">
         <UiButton
           appearance="secondary"
           :disabled="disabledReset"
@@ -154,7 +152,6 @@ export type UiMenuGroupedOption<Value = unknown> = {
 defineSlots<{
   default?: (props: {
     checkboxAppearance: typeof checkboxAppearance;
-    checkboxSize: typeof checkboxSize;
     iconSize: typeof iconSize;
     imageShape: typeof imageShape;
     listVariant: typeof listVariant;
@@ -192,7 +189,6 @@ const {
   // Menu
   iconSize = "sm",
   imageShape = "square",
-  checkboxSize = "md",
   checkboxAppearance = "primary",
   listVariant = "blank",
 } = defineProps<{
@@ -222,7 +218,6 @@ const {
   // Menu
   iconSize?: "sm" | "md" | "lg";
   imageShape?: "rounded" | "square";
-  checkboxSize?: "sm" | "md";
   checkboxAppearance?: "primary" | "secondary";
   listVariant?: "checkbox" | "selectable" | "blank";
 }>();

package/dist/src/components/UiOverlay/UiOverlay.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 UiOverlay from "./UiOverlay.vue";
 
 describe("UiOverlay", () => {
   const wrapper = mount(UiOverlay, {});
 
-  it("emits correct event when clicked", async () => {
+  test("emits correct event when clicked", async () => {
     const bg = wrapper.find('[data-testid="background"]');
 
     await bg.trigger("click");

package/dist/src/components/UiOverlayMenu/UiOverlayMenu.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 { vClickAway } from "../../directives/vClickAway.ts";
 import UiButton from "../UiButton/UiButton.vue";
@@ -26,7 +26,7 @@ describe("UiOverlayMenu", () => {
     attachTo: document.getElementById("app") || "#app",
   });
 
-  it("emits correct event when clicked outside of slot content", async () => {
+  test("emits correct event when clicked outside of slot content", async () => {
     await buttonWrapper.trigger("mousedown");
     expect(overlayWrapper.emitted().close).toBeTruthy();
   });

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

@@ -29,7 +29,7 @@ const meta = {
           </template>
 
           <template #default="{ close }">
-            <div class="space-y-2 rounded-sm border border-neutral-soft p-2 shadow-sm">
+            <div class="space-y-2 rounded-lg border border-neutral-faint bg-neutral p-2 shadow-md">
               <p>Popover content</p>
 
               <UiButton @click="close">

package/dist/src/components/UiPopover/UiPopover.vue

@@ -18,7 +18,7 @@
         v-show="isOpen"
         ref="floating"
         :style="floatingStyles"
-        class="z-10 w-fit rounded-sm bg-neutral [text-align:initial] [--transition-close-duration:100ms] [--transition-duration:200ms]"
+        class="z-10 w-fit [text-align:initial] [--transition-close-duration:100ms] [--transition-duration:200ms]"
         :data-side="placement"
       >
         <slot v-bind="{ close }" />

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

@@ -44,7 +44,7 @@ export const Default: Story = {
     setup() {
       return { args };
     },
-    template: `
+    template: /*html*/ `
       <UiRadioButton v-bind="args">
         {{ args.default }}
         <template v-if="args.errors" #errors>
@@ -64,7 +64,7 @@ export const Errors: Story = {
     setup() {
       return { args };
     },
-    template: `
+    template: /*html*/ `
       <UiRadioButton v-bind="args">
         {{ args.default }}
         <template #errors>
@@ -83,7 +83,7 @@ export const Group: Story = {
 
       return { args, language };
     },
-    template: `
+    template: /*html*/ `
       <div class="space-y-2">
         <UiRadioButton v-model="language" name="language" v-bind="args" value="en">English</UiRadioButton>
         <UiRadioButton v-model="language" name="language" v-bind="args" value="de">German</UiRadioButton>

package/dist/src/components/UiRadioInputGroup/UiRadioInputGroup.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 UiRadioInputGroup from "./UiRadioInputGroup.vue";
 
 describe("UiRadioInputGroup", () => {
-  it("renders UiRadioInputGroup with props content", () => {
+  test("renders UiRadioInputGroup with props content", () => {
     const wrapper = mount(UiRadioInputGroup, {
       props: {
         options: [
@@ -20,7 +20,7 @@ describe("UiRadioInputGroup", () => {
     expect(wrapper.text()).toBe("default name");
   });
 
-  it("should click change value", async () => {
+  test("should click change value", async () => {
     const wrapper = mount(UiRadioInputGroup, {
       props: {
         modelValue: "default value",
@@ -45,7 +45,7 @@ describe("UiRadioInputGroup", () => {
     expect(wrapper.props("modelValue")).toBe("second option");
   });
 
-  it("renders attributes on correct element", () => {
+  test("renders attributes on correct element", () => {
     const wrapper = mount(UiRadioInputGroup, {
       props: {
         options: [],

package/dist/src/components/UiSearchBar/UiSearchBar.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 UiSearchBar from "./UiSearchBar.vue";
 
@@ -12,7 +12,7 @@ function createWrapper(
 }
 
 describe("UiSearchBar", () => {
-  it("renders the placeholder", () => {
+  test("renders the placeholder", () => {
     const placeholder = "Example query";
     const wrapper = createWrapper({ props: { placeholder } });
 
@@ -20,7 +20,7 @@ describe("UiSearchBar", () => {
     expect(textInput.element.placeholder).toBe(placeholder);
   });
 
-  it("renders the value", async () => {
+  test("renders the value", async () => {
     const wrapper = createWrapper();
 
     const searchQuery = "Ein Suchbegriff";
@@ -30,7 +30,7 @@ describe("UiSearchBar", () => {
     expect(textInput.element.value).toBe(searchQuery);
   });
 
-  it("emits focus event", async () => {
+  test("emits focus event", async () => {
     const wrapper = createWrapper();
 
     const textInput = wrapper.find("input");
@@ -38,7 +38,7 @@ describe("UiSearchBar", () => {
     expect(wrapper.emitted("focus")).toBeTruthy();
   });
 
-  it("emits blur event", async () => {
+  test("emits blur event", async () => {
     const wrapper = createWrapper();
 
     const textInput = wrapper.find("input");
@@ -46,7 +46,7 @@ describe("UiSearchBar", () => {
     expect(wrapper.emitted("blur")).toBeTruthy();
   });
 
-  it("renders chips and action slot", async () => {
+  test("renders chips and action slot", async () => {
     const wrapper = createWrapper({
       props: {
         placeholder: "Suchen",

package/dist/src/components/UiSearchInput/UiSearchInput.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 UiSearchInput from "./UiSearchInput.vue";
 
@@ -12,7 +12,7 @@ describe("UiSearchInput", () => {
     },
   });
 
-  it("displays and emits entries", async () => {
+  test("displays and emits entries", async () => {
     const searchQuery = "Suchbegriff";
     const textInput = wrapper.find("input");
     await textInput.setValue(searchQuery);
@@ -20,7 +20,7 @@ describe("UiSearchInput", () => {
     expect(textInput.element.value).toBe(searchQuery);
   });
 
-  it("adds searchbar row when addRow button is clicked", async () => {
+  test("adds searchbar row when addRow button is clicked", async () => {
     const searchQuery = "Suchbegriff";
     const textInput = wrapper.find("input");
     await textInput.setValue(searchQuery);
@@ -30,7 +30,7 @@ describe("UiSearchInput", () => {
     expect(wrapper.findAll("input")).toHaveLength(2);
   });
 
-  it("deletes second row when there is no text in the searchbar", async () => {
+  test("deletes second row when there is no text in the searchbar", async () => {
     const searchQuery = "Suchbegriff";
     const textInput = wrapper.find("input");
     await textInput.setValue(searchQuery);

package/dist/src/components/UiSection/UiSection.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 UiSection from "./UiSection.vue";
 
@@ -10,13 +10,13 @@ describe("UiSection", () => {
     },
   });
 
-  it("renders with slot content", () => {
+  test("renders with slot content", () => {
     const inner = wrapper.find('[data-testid="inner"]');
 
     expect(inner.text()).toBe("Slot text");
   });
 
-  it("renders with border classes", async () => {
+  test("renders with border classes", async () => {
     await wrapper.setProps({
       borderTop: true,
       borderBottom: true,
@@ -25,7 +25,7 @@ describe("UiSection", () => {
     expect(wrapper.classes("border-b")).toBe(true);
   });
 
-  it("renders with padding classes", async () => {
+  test("renders with padding classes", async () => {
     await wrapper.setProps({
       verticalPadding: "small",
     });
@@ -36,7 +36,7 @@ describe("UiSection", () => {
     expect(inner.classes("pb-12")).toBe(true);
   });
 
-  it("renders with size classes", async () => {
+  test("renders with size classes", async () => {
     await wrapper.setProps({
       size: "small",
     });

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

@@ -1,16 +1,16 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSectionDivider from "./UiSectionDivider.vue";
 
 describe("UiSectionDivider", () => {
   const wrapper = mount(UiSectionDivider);
 
-  it("renders default size class", () => {
+  test("renders default size class", () => {
     expect(wrapper.classes("h-4")).toBe(true);
   });
 
-  it("renders small size class", async () => {
+  test("renders small size class", async () => {
     await wrapper.setProps({
       size: "small",
     });

package/dist/src/components/UiSelect/{UIiSelect.spec.ts → UiSelect.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 UiSelect from "./UiSelect.vue";
 
@@ -10,7 +10,7 @@ function createWrapper(
 }
 
 describe("UiSelect", () => {
-  it("renders attributes on correct element", () => {
+  test("renders attributes on correct element", () => {
     const wrapper = createWrapper({
       props: {
         id: "id",
@@ -38,12 +38,16 @@ describe("UiSelect", () => {
     expect(select.element.getAttribute("aria-errormessage")).toBe("message");
   });
 
-  it("implements working v-model interface", async () => {
+  test("implements working v-model interface", async () => {
     const wrapper = createWrapper({
       slots: {
-        default: { template: "Options" },
+        default: {
+          template: /*html*/ `
+            Options
+          `,
+        },
         options: {
-          template: `
+          template: /*html*/ `
             <option value="primary">Primary</option>
             <option value="secondary">Secondary</option>
             <option value="tertiary">Tertiary</option>
@@ -71,12 +75,16 @@ describe("UiSelect", () => {
     expect(lastEvent).toEqual(["tertiary"]);
   });
 
-  it("works without v-model", async () => {
+  test("works without v-model", async () => {
     const wrapper = createWrapper({
       slots: {
-        default: { template: "Options" },
+        default: {
+          template: /*html*/ `
+            Options
+          `,
+        },
         options: {
-          template: `
+          template: /*html*/ `
             <option value="">None</option>
             <option value="primary">Primary</option>
             <option value="secondary">Secondary</option>