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

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
@@ -57,52 +57,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 +122,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,
@@ -224,17 +215,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 +248,7 @@ export const WithGroupedOptions: Story = {
       };
     },
     components: { UiMenu },
-    template: `
+    template: /*html*/ `
       <UiMenu
         v-bind="args"
         v-model:query="args.query"
@@ -292,67 +285,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 +309,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); }"
       />

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

@@ -1,5 +1,10 @@
 <template>
-  <UiPopover :initially-open="isOpen" :animate :placement="floatingUiPlacement">
+  <UiPopover
+    :initially-open="isOpen"
+    :animate
+    :placement="floatingUiPlacement"
+    @toggle="$event ? $emit('open') : $emit('close')"
+  >
     <template #button="{ toggle, isOpen: isPopoverOpen }">
       <UiButton
         class="w-full justify-between"
@@ -10,10 +15,7 @@
         :disabled
         :size="filterButtonSize"
         data-testid="menu-button"
-        @click="
-          toggle();
-          isPopoverOpen ? $emit('close') : $emit('open');
-        "
+        @click="toggle"
       >
         <div class="flex items-center gap-2">
           <UiIcon v-if="iconLeft" :name="iconLeft" size="sm" />
@@ -23,106 +25,100 @@
       </UiButton>
     </template>
 
-    <template #default="{ close }">
+    <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"
+    >
       <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"
+        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"
       >
-        <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"
-        >
-          <UiIcon
-            class="shrink-0 text-neutral-emphasis"
-            name="search"
-            size="sm"
-          />
-          <input
-            ref="search-input"
-            v-model="queryModel"
-            type="text"
-            spellcheck="false"
-            class="w-full text-sm focus:outline-hidden"
-            :placeholder="searchPlaceholder"
-            data-testid="menu-search-input"
-          />
-        </div>
+        <UiIcon
+          class="shrink-0 text-neutral-emphasis"
+          name="search"
+          size="sm"
+        />
+        <input
+          ref="search-input"
+          v-model="queryModel"
+          type="text"
+          spellcheck="false"
+          class="w-full text-sm focus:outline-hidden"
+          :placeholder="searchPlaceholder"
+          data-testid="menu-search-input"
+        />
+      </div>
 
-        <slot
-          v-bind="{
-            checkboxAppearance,
-            checkboxSize,
-            iconSize,
-            imageShape,
-            listVariant,
-            options,
-            groupedOptions,
-          }"
+      <slot
+        v-bind="{
+          checkboxAppearance,
+          checkboxSize,
+          iconSize,
+          imageShape,
+          listVariant,
+          options,
+          groupedOptions,
+        }"
+      >
+        <ul
+          v-if="processedOptions.some(({ options }) => options.length > 0)"
+          class="max-h-80 overflow-y-auto"
+          data-testid="menu-option-list"
         >
-          <ul
-            v-if="processedOptions.some(({ options }) => options.length > 0)"
-            class="max-h-80 overflow-y-auto"
-            data-testid="menu-option-list"
+          <template
+            v-for="group in processedOptions"
+            :key="`group-${group.groupLabel ?? 'default'}`"
           >
-            <template
-              v-for="group in processedOptions"
-              :key="`group-${group.groupLabel ?? 'default'}`"
-            >
-              <template v-if="group.options.length > 0">
-                <li
-                  v-if="group.groupLabel"
-                  class="flex h-6 items-center bg-neutral-whisper px-4 text-xs font-semibold tracking-wider text-neutral-subtle uppercase"
-                >
-                  {{ group.groupLabel }}
-                </li>
+            <template v-if="group.options.length > 0">
+              <li
+                v-if="group.groupLabel"
+                class="flex h-6 items-center bg-neutral-whisper px-4 text-xs font-semibold tracking-wider text-neutral-subtle uppercase"
+              >
+                {{ group.groupLabel }}
+              </li>
 
-                <UiListItem
-                  v-for="(option, index) in group.options"
-                  :key="`option-${option.value}`"
-                  :selected="option.selected"
-                  :selectable="listVariant === 'selectable'"
-                  :is-checked="option.selected"
-                  :check-box-menu="listVariant === 'checkbox'"
-                  :icon-size="iconSize"
-                  :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="{
-                    'border-t': option.hasDividerAbove,
-                  }"
-                  :data-testid="`menu-option-button-${index}`"
-                  @list-item-click="
-                    (value, shouldCloseMenu) => {
-                      selectOption(option);
-                      if (shouldCloseMenu) {
-                        close();
-                      }
-                    }
-                  "
-                  >{{ option.label }}</UiListItem
-                >
-              </template>
+              <UiListItem
+                v-for="(option, index) in group.options"
+                :key="`option-${option.value}`"
+                :selected="option.selected"
+                :selectable="listVariant === 'selectable'"
+                :is-checked="option.selected"
+                :check-box-menu="listVariant === 'checkbox'"
+                :icon-size="iconSize"
+                :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="{
+                  'border-t': option.hasDividerAbove,
+                }"
+                :data-testid="`menu-option-button-${index}`"
+                @list-item-click="selectOption(option)"
+                >{{ option.label }}</UiListItem
+              >
             </template>
-          </ul>
-        </slot>
+          </template>
+        </ul>
+      </slot>
 
-        <div v-if="hasResetOption" class="px-4 py-2 text-neutral-primary">
-          <UiButton
-            appearance="secondary"
-            :disabled="disabledReset"
-            icon-name="reset"
-            size="xs"
-            data-testid="menu-search-reset-button"
-            @click="$emit('reset')"
-          >
-            <UiIcon name="reset" />
-            {{ resetLabel }}
-          </UiButton>
-        </div>
+      <div v-if="hasResetOption" class="px-4 py-2 text-neutral-primary">
+        <UiButton
+          appearance="secondary"
+          :disabled="disabledReset"
+          icon-name="reset"
+          size="xs"
+          data-testid="menu-search-reset-button"
+          @click="
+            queryModel = '';
+            $emit('reset');
+          "
+        >
+          <UiIcon name="reset" />
+          {{ resetLabel }}
+        </UiButton>
       </div>
-    </template>
+    </div>
   </UiPopover>
 </template>
 

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.vue

@@ -1,5 +1,16 @@
 <template>
-  <div ref="reference" v-click-away="close" class="w-fit" @click="update">
+  <div
+    ref="reference"
+    v-click-away="
+      () => {
+        if (isOpen) {
+          close();
+        }
+      }
+    "
+    class="w-fit"
+    @click="update"
+  >
     <slot name="button" v-bind="{ open, close, toggle, isOpen }" />
 
     <Transition :name="animate ? 'fade-up' : 'none'">
@@ -25,7 +36,7 @@ import {
   shift,
   useFloating,
 } from "@floating-ui/vue";
-import { ref, useTemplateRef } from "vue";
+import { ref, useTemplateRef, watch } from "vue";
 
 import { vClickAway } from "../../directives/vClickAway.ts";
 
@@ -61,9 +72,12 @@ const {
   placement?: Placement;
 }>();
 
+const emit = defineEmits<{
+  toggle: [isOpen: boolean];
+}>();
+
 const reference = useTemplateRef("reference");
 const floating = useTemplateRef("floating");
-const isOpen = ref(initiallyOpen);
 
 const { floatingStyles, update } = useFloating(reference, floating, {
   placement,
@@ -71,6 +85,12 @@ const { floatingStyles, update } = useFloating(reference, floating, {
   whileElementsMounted: autoUpdate,
 });
 
+const isOpen = ref(initiallyOpen);
+
+watch(isOpen, (isOpen) => {
+  emit("toggle", isOpen);
+});
+
 function open() {
   isOpen.value = true;
 }

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: [],