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

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/UiIcon/UiIconLoading.vue

@@ -1 +1,8 @@
-<template><div></div></template>
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  ></svg>
+</template>

package/src/components/UiIcon/icons.ts

@@ -100,6 +100,7 @@ export const icons = {
   "list": () => import("../../assets/icons/list.vue"),
   "list-search": () => import("../../assets/icons/list-search.vue"),
   "lock": () => import("../../assets/icons/lock.vue"),
+  "lock-filled": () => import("../../assets/icons/lock-filled.vue"),
   "mail": () => import("../../assets/icons/mail.vue"),
   "map": () => import("../../assets/icons/map.vue"),
   "map-filled": () => import("../../assets/icons/map-filled.vue"),
@@ -124,6 +125,7 @@ export const icons = {
   "pin": () => import("../../assets/icons/pin.vue"),
   "planning": () => import("../../assets/icons/planning.vue"),
   "play": () => import("../../assets/icons/play.vue"),
+  "play-filled": () => import("../../assets/icons/play-filled.vue"),
   "plus": () => import("../../assets/icons/plus.vue"),
   "print": () => import("../../assets/icons/print.vue"),
   "refresh": () => import("../../assets/icons/refresh.vue"),

package/src/components/UiInput/README.md

@@ -3,29 +3,40 @@
 ## Usage
 
 ```vue
-<template>
-  <UiInput
-    label="Postal code"
-    id="postal_code-1"
-    name="postal_code"
-    value="04277"
-    required
-    placeholder="12345"
-  ></UiInput>
-</template>
-
-<script setup lang="ts">
-import { UiInput } from "@dpa-id-components/dpa-shared-components";
-</script>
+<UiInput
+  id="postal-code"
+  name="postal_code"
+  value="04277"
+  required
+  placeholder="12345"
+>
+  Postal code
+</UiInput>
+```
+
+**Using `v-model`**:
+
+```vue
+<UiInput v-model="postalCode">
+  Postal code
+</UiInput>
+```
+
+**With `number` value**:
+
+```vue
+<UiInput v-model="count" type="number">
+  Count
+</UiInput>
 ```
 
 ## API
 
 ### Models
 
-| Name      | Type     | Default     | Description          |
-|-----------|----------|-------------|----------------------|
-| _default_ | `string` | `undefined` | Sets the input value |
+| Name      | Type               | Default     | Description          |
+|-----------|--------------------|-------------|----------------------|
+| _default_ | `string \| number` | `undefined` | Sets the input value |
 
 ### Props
 

package/src/components/UiInput/UiInput.vue

@@ -34,7 +34,7 @@
       data-testid="input-value"
       v-bind="{ ...$attrs, class: null }"
       :data-is-label-raised="
-        $attrs.placeholder || isFocused || model ? '' : undefined
+        $attrs.placeholder || isFocused || hasInput ? '' : undefined
       "
       @focus="isFocused = true"
       @blur="isFocused = false"
@@ -55,7 +55,7 @@
       data-testid="input-value"
       v-bind="{ ...$attrs, class: null }"
       :data-is-label-raised="
-        $attrs.placeholder || isFocused || model ? '' : undefined
+        $attrs.placeholder || isFocused || hasInput ? '' : undefined
       "
       @focus="isFocused = true"
       @blur="isFocused = false"
@@ -82,7 +82,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="ModelValue extends string | number">
 import { computed, ref, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
@@ -130,8 +130,11 @@ const {
   inputStatus?: "info" | "warning" | "error";
 }>();
 
-const model = defineModel<string>();
+const model = defineModel<ModelValue>();
 
+const hasInput = computed(
+  () => model.value !== undefined && model.value !== "",
+);
 const isFocused = ref(false);
 
 const defaultId = useId();

package/src/components/UiListItem/README.md

@@ -31,7 +31,6 @@
 | `imageSrc`        | `String`                    | `""`       | Image to be displayed at the beginning of the list item. |
 | `imageShape`      | `"rounded" | "square"` | `"square"` | Shape pf the image to be displayed.                      |
 | `checkboxColor`   | `"blue" | "gray"`      | `"blue"`   | Checkbox color style.                                    |
-| `checkboxSize`    | `"small" | "medium"`   | `"medium"` | Checkbox size style.                                     |
 
 ### Events
 

package/src/components/UiListItem/UiListItem.vue

@@ -2,26 +2,25 @@
   <li
     :class="
       cn(
-        'flex cursor-pointer list-none items-center gap-2 px-4 py-2 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
+        'flex cursor-pointer list-none items-center gap-2 px-4 py-1.5 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
         {
           'cursor-default text-neutral-medium': disabled,
           'is-selected': selected,
-          'py-3': checkboxSize === 'md',
         },
         overrideClasses,
         $attrs.class,
       )
     "
     tabindex="0"
-    @click.prevent.stop="$emit('list-item-click', value, true)"
+    @click.prevent.stop="$emit('list-item-click', value)"
   >
     <UiCheckbox
       v-if="checkBoxMenu"
       :appearance="checkboxAppearance"
       :model-value="isChecked"
       :disabled="disabled"
-      :size="checkboxSize"
-      @click.stop="$emit('list-item-click', value, false)"
+      size="sm"
+      @click.stop="$emit('list-item-click', value)"
     >
       <span class="sr-only"><slot /></span>
     </UiCheckbox>
@@ -65,7 +64,6 @@ const {
   imageSrc = undefined,
   imageShape = "rounded",
   checkboxAppearance = "primary",
-  checkboxSize = "md",
   isChecked = false,
   disabled = false,
 } = defineProps<{
@@ -79,12 +77,11 @@ const {
   imageShape?: "rounded" | "square";
   iconSize?: "sm" | "md" | "lg";
   checkboxAppearance?: "primary" | "secondary";
-  checkboxSize?: "sm" | "md";
   isChecked?: boolean;
   disabled?: boolean;
 }>();
 
 defineEmits<{
-  "list-item-click": [value: string, shouldCloseMenu: boolean];
+  "list-item-click": [value: string];
 }>();
 </script>

package/src/components/UiMediaTypeIcon/UiMediaTypeIcon.vue

@@ -42,7 +42,7 @@ const iconComponent = computed(() =>
 
 watchEffect(() => {
   if (!icons[name]) {
-    throw new Error(`UiMediaFormatIcon: No icon named “${name}” exists.`);
+    throw new Error(`UiMediaTypeIcon: No icon named “${name}” exists.`);
   }
 });
 </script>

package/src/components/UiMenu/README.md

@@ -89,7 +89,6 @@ const options = ref([
 | `buttonAppearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, or `"ghost"` | `"secondary-alt"` |  |
 | `listVariant`          | `"checkbox" | "selectable" | "blank"`                                                                 | `"blank"`                     | Menu style.                                                                                                                                                                                                                                  |
 | `checkboxColor`        | `"blue" | "gray"`                                                                                          | `"blue"`                      | Checkbox color style.                                                                                                                                                                                                                        |
-| `checkboxSize`         | `"small" | "medium"`                                                                                       | `"medium"`                    | Checkbox size style.                                                                                                                                                                                                                         |
 | `imageShape`           | `"rounded" | "square"`                                                                                     | `"square"`                    | shape of image.                                                                                                                                                                                                                              |
 | `hasResetOption`       | `boolean`                                                                                                       | `false`                       | Toggles option for a reset button                                                                                                                                                                                                            |
 | `resetLabel`           | `string`                                                                                                        | `""`                         | Sets text of reset button.                                                                                                                                                                                                                   |
@@ -142,7 +141,6 @@ Wraps the UiListItem and uses the same settings as in the original UiMenu, helps
 | `listVariant?`   | `"checkbox" | "selectable" | "blank"`   | `blank`     | Provide the list variant, same as in UiMenu.vue           |
 | `iconSize?`      | `"small" | "medium" | "large"`      | `small`     | Provide the icon size, same as in UiMenu.vue              |
 | `imageShape?`    | `"rounded" | "square"`    | `square`    | Provide the imageShape, same as in UiMenu.vue             |
-| `checkboxSize?`  | `"small" | "medium"`  | `medium`    | Provide the checkboxSize, same as in UiMenu.vue           |
 | `checkboxColor?` | `"blue" | "gray"` | `blue`      | Provide the checkboxColor, same as in UiMenu.vue          |
 
 #### Slots

package/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/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/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/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"