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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "22.0.0-next.3",
+  "version": "22.0.0-next.5",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "src",
@@ -44,41 +44,39 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/preset-env": "7.29.3",
     "@eslint/js": "10.0.1",
-    "@storybook/addon-docs": "10.3.6",
-    "@storybook/addon-links": "10.3.6",
-    "@storybook/addon-themes": "10.3.6",
-    "@storybook/builder-vite": "10.3.6",
-    "@storybook/vue3-vite": "10.3.6",
+    "@storybook/addon-docs": "10.4.1",
+    "@storybook/addon-links": "10.4.1",
+    "@storybook/addon-themes": "10.4.1",
+    "@storybook/builder-vite": "10.4.1",
+    "@storybook/vue3-vite": "10.4.1",
     "@tailwindcss/typography": "0.5.19",
-    "@tailwindcss/vite": "4.2.4",
+    "@tailwindcss/vite": "4.3.0",
     "@tsconfig/node24": "24.0.4",
-    "@types/jsdom": "28.0.1",
-    "@types/node": "25.6.0",
-    "@vitejs/plugin-vue": "6.0.6",
+    "@types/jsdom": "28.0.3",
+    "@types/node": "25.9.1",
+    "@vitejs/plugin-vue": "6.0.7",
     "@vue/test-utils": "2.4.10",
     "@vue/tsconfig": "0.9.1",
     "ajv": "8.20.0",
-    "commit-and-tag-version": "12.7.1",
-    "eslint": "10.3.0",
-    "eslint-plugin-storybook": "10.3.6",
+    "commit-and-tag-version": "12.7.3",
+    "eslint": "10.4.0",
+    "eslint-plugin-storybook": "10.4.1",
     "husky": "9.1.7",
     "jsdom": "29.1.1",
-    "npm-run-all2": "8.0.4",
+    "npm-run-all2": "9.0.1",
     "prettier": "3.8.3",
     "rimraf": "6.1.3",
     "rollup-plugin-copy": "3.5.0",
-    "storybook": "10.3.6",
-    "tailwindcss": "4.2.4",
+    "storybook": "10.4.1",
+    "tailwindcss": "4.3.0",
     "typescript": "6.0.3",
-    "unplugin-dts": "1.0.0",
-    "vite": "8.0.10",
-    "vitest": "4.1.5",
-    "vue": "3.5.33",
-    "vue-router": "5.0.6",
-    "vue-tsc": "3.2.7"
+    "unplugin-dts": "1.0.1",
+    "vite": "8.0.14",
+    "vitest": "4.1.7",
+    "vue": "3.5.34",
+    "vue-router": "5.0.7",
+    "vue-tsc": "3.3.1"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.11",

package/src/components/UiCheckbox/UiCheckbox.vue

@@ -41,7 +41,11 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+  generic="ModelValue extends string[] | string | boolean"
+>
 import { computed, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
@@ -75,7 +79,7 @@ const {
   size?: "sm" | "md";
 }>();
 
-const model = defineModel<boolean | string | string[]>();
+const model = defineModel<ModelValue>();
 
 const defaultId = useId();
 const uniqueId = computed(() => id ?? `id-${defaultId}`);

package/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/src/components/UiListItem/UiListItem.vue

@@ -13,7 +13,7 @@
       )
     "
     tabindex="0"
-    @click.prevent.stop="$emit('list-item-click', value, true)"
+    @click.prevent.stop="$emit('list-item-click', value)"
   >
     <UiCheckbox
       v-if="checkBoxMenu"
@@ -21,7 +21,7 @@
       :model-value="isChecked"
       :disabled="disabled"
       :size="checkboxSize"
-      @click.stop="$emit('list-item-click', value, false)"
+      @click.stop="$emit('list-item-click', value)"
     >
       <span class="sr-only"><slot /></span>
     </UiCheckbox>
@@ -85,6 +85,6 @@ const {
 }>();
 
 defineEmits<{
-  "list-item-click": [value: string, shouldCloseMenu: boolean];
+  "list-item-click": [value: string];
 }>();
 </script>

package/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/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;
 }