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

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

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

@@ -9,35 +9,23 @@
     "
   >
     <slot v-if="labelPosition === 'left'" />
-    <div class="relative">
-      <input
-        :id="toggleId"
-        v-model="modelValue"
-        type="checkbox"
-        data-testid="toggleButton"
-        role="switch"
-        class="sr-only"
-        v-bind="{ ...$attrs, class: null }"
-      />
-      <div
-        class="line rounded-full shadow-inner transition-opacity duration-200 ease-in-out"
-        :class="{
-          'bg-secondary opacity-50': modelValue,
-          'bg-neutral-faint': !modelValue,
-          'h-3 w-6': size === 'sm',
-          'h-4 w-10': size === 'lg',
-        }"
-      />
-      <div
-        :class="{
-          'translate-x-full bg-secondary': modelValue,
-          'bg-neutral-muted': !modelValue,
-          '-top-0.5 size-4': size === 'sm',
-          '-top-1 size-6': size === 'lg',
-        }"
-        class="dot absolute -left-1 rounded-full shadow-sm transition-transform duration-200 ease-in-out"
-      />
-    </div>
+
+    <input
+      :id="toggleId"
+      v-model="model"
+      class="relative appearance-none rounded-full shadow-inner transition-opacity duration-200 ease-in-out after:absolute after:-left-1 after:block after:rounded-full after:shadow-sm after:transition-transform after:duration-200 after:ease-in-out after:content-[''] enabled:cursor-pointer"
+      :class="{
+        'bg-secondary-emphasis after:translate-x-full after:bg-secondary':
+          model,
+        'bg-neutral-faint after:bg-neutral-muted': !model,
+        'h-3 w-6 after:-top-0.5 after:size-4': size === 'sm',
+        'h-4 w-10 after:-top-1 after:size-6': size === 'lg',
+      }"
+      type="checkbox"
+      role="switch"
+      data-testid="toggleButton"
+      v-bind="{ ...$attrs, class: null }"
+    />
 
     <slot v-if="labelPosition === 'right'" />
   </UiLabel>
@@ -51,13 +39,13 @@ import UiLabel from "../UiLabel/UiLabel.vue";
 
 defineOptions({ inheritAttrs: false });
 
-const modelValue = defineModel<boolean>({ default: false });
+const model = defineModel<boolean>({ default: false });
 
 defineSlots<{
   /**
    * Label content.
    */
-  default?: () => any;
+  default: () => any;
 }>();
 
 const {