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

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

@@ -1,19 +1,21 @@
 <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"
         :class="{
           'border-neutral-subtle': isPopoverOpen,
         }"
-        :appearance="active ? 'primary' : buttonAppearance"
+        :appearance="active ? 'fill-emphasis' : buttonAppearance"
         :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,98 @@
       </UiButton>
     </template>
 
-    <template #default="{ close }">
+    <div
+      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
-        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-lg px-4 pt-2.5 pb-1.5 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,
+          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-faint 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-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-2 pt-1.5 pb-2 text-neutral-primary">
+        <UiButton
+          appearance="outline-emphasis"
+          :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>
 
@@ -158,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;
@@ -180,7 +173,7 @@ const {
   disabled = false,
   active = false,
   iconLeft = null,
-  buttonAppearance = "secondary-alt",
+  buttonAppearance = "outline-subtle",
   filterButtonSize = "sm",
   defaultTitle = "",
   multiLabel = "",
@@ -196,7 +189,6 @@ const {
   // Menu
   iconSize = "sm",
   imageShape = "square",
-  checkboxSize = "md",
   checkboxAppearance = "primary",
   listVariant = "blank",
 } = defineProps<{
@@ -210,7 +202,12 @@ const {
   disabled?: boolean;
   active?: boolean;
   iconLeft?: UiIconName;
-  buttonAppearance?: "primary" | "secondary" | "secondary-alt" | "ghost";
+  buttonAppearance?:
+    | "fill-emphasis"
+    | "fill-subtle"
+    | "outline-emphasis"
+    | "outline-subtle"
+    | "ghost";
   filterButtonSize?: "sm" | "xs";
   defaultTitle?: string;
   multiLabel?: string;
@@ -226,7 +223,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

@@ -1,13 +1,13 @@
 <template>
-  <div ref="reference" v-click-away="close" class="w-fit" @click="update">
+  <div ref="reference" class="w-fit" @click="update">
     <slot name="button" v-bind="{ open, close, toggle, isOpen }" />
 
     <Transition :name="animate ? 'fade-up' : 'none'">
       <div
-        v-show="isOpen"
+        v-if="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 }" />
@@ -25,9 +25,8 @@ import {
   shift,
   useFloating,
 } from "@floating-ui/vue";
-import { ref, useTemplateRef } from "vue";
-
-import { vClickAway } from "../../directives/vClickAway.ts";
+import { onClickOutside } from "@vueuse/core";
+import { ref, useTemplateRef, watch } from "vue";
 
 defineSlots<{
   button: (props: {
@@ -61,9 +60,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 +73,12 @@ const { floatingStyles, update } = useFloating(reference, floating, {
   whileElementsMounted: autoUpdate,
 });
 
+const isOpen = ref(initiallyOpen);
+
+watch(isOpen, (isOpen) => {
+  emit("toggle", isOpen);
+});
+
 function open() {
   isOpen.value = true;
 }
@@ -83,6 +91,21 @@ function toggle() {
   isOpen.value = !isOpen.value;
 }
 
+onClickOutside(
+  floating,
+  () => {
+    if (isOpen.value) {
+      close();
+    }
+  },
+  {
+    ignore: [
+      // Ignore clicks on the reference element
+      reference,
+    ],
+  },
+);
+
 defineExpose({ open, close });
 </script>
 

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

@@ -1,19 +1,28 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import type {
+  ComponentPropsAndSlots,
+  Meta,
+  StoryObj,
+} from "@storybook/vue3-vite";
 import { ref } from "vue";
 
 import UiRadioButton from "./UiRadioButton.vue";
 
+type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiRadioButton> & {
+  name?: string;
+  disabled?: boolean;
+};
+
 const meta = {
   title: "forms/UiRadioButton",
   component: UiRadioButton,
   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" },
     disabled: { control: "boolean" },
   },
   args: {
     // Attributes
-    // @ts-ignore Storybook doesn't know that **any** component can receive arbitrary attributes and enforces this on the type level.
+    name: "name",
     disabled: false,
 
     // Props
@@ -24,10 +33,10 @@ const meta = {
     default: "Radio",
     errors: "",
   },
-} satisfies Meta<typeof UiRadioButton>;
+} satisfies Meta<PropsAndCustomArgs>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<PropsAndCustomArgs>;
 
 export const Default: Story = {
   render: (args) => ({
@@ -35,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>
@@ -55,7 +64,7 @@ export const Errors: Story = {
     setup() {
       return { args };
     },
-    template: `
+    template: /*html*/ `
       <UiRadioButton v-bind="args">
         {{ args.default }}
         <template #errors>
@@ -74,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/UiRadioButton/UiRadioButton.vue

@@ -13,7 +13,7 @@
       <input
         :id="uniqueId"
         v-model="model"
-        class="inline-flex aspect-square appearance-none items-center justify-center rounded-full border-2 bg-neutral align-middle transition-colors after:size-2 after:rounded-full checked:after:content-[''] not-read-only:enabled:cursor-pointer disabled:border-neutral-muted disabled:text-neutral-soft disabled:checked:after:bg-neutral-muted"
+        class="inline-flex aspect-square appearance-none items-center justify-center rounded-full border-2 bg-neutral align-middle transition-colors after:size-2 after:rounded-full checked:after:content-[''] enabled:cursor-pointer disabled:border-neutral-muted disabled:text-neutral-soft disabled:checked:after:bg-neutral-muted"
         :class="{
           'size-4': size === 'sm',
           'size-5': size === 'md',

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

@@ -51,7 +51,7 @@
           <UiButton
             :aria-label="executeSearchButtonTitle"
             :appearance="
-              isInputFocused || searchIconHover ? 'primary' : 'ghost'
+              isInputFocused || searchIconHover ? 'fill-emphasis' : 'ghost'
             "
             size="sm"
             @click="handleSearchButton"

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",
     });