mgv-backoffice 1.47.0 → 1.49.0

package/dist/utils/format.d.ts

@@ -110,3 +110,12 @@ export declare function stringifyValue(value: unknown): string;
  * Renders an em-dash for null/undefined/non-finite input.
  */
 export declare function fmtDuration(ms: number | null | undefined, maxUnits?: number): string;
+/**
+ * Normalize a backend time string for display: "11:00:00" → "11:00".
+ * Leaves already-short ("11:00") or unexpected values untouched.
+ */
+export declare function fmtTime(time?: string | null): string;
+/** ISO instant → "YYYY-MM-DDTHH:mm" in the browser's time zone, for <input type="datetime-local">. */
+export declare function toLocalInput(iso?: string | null): string;
+/** Value of an <input type="datetime-local"> → ISO instant (null when empty). */
+export declare function fromLocalInput(value: string): string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mgv-backoffice",
-  "version": "1.47.0",
+  "version": "1.49.0",
   "description": "Shared Vue 3 UI component library",
   "type": "module",
   "main": "./dist/ui-lib.umd.cjs",

package/src/components/BaseBadge.vue

@@ -31,16 +31,16 @@ const props = defineProps({
 })
 
 const colorMap: Record<string, string> = {
-  [ColorsEnums.RED]:    'bg-red-100 text-red-700 border-red-200',
-  [ColorsEnums.GREEN]:  'bg-green-100 text-green-700 border-green-200',
-  [ColorsEnums.BLUE]:   'bg-blue-100 text-blue-700 border-blue-200',
-  [ColorsEnums.YELLOW]: 'bg-yellow-100 text-yellow-700 border-yellow-200',
-  [ColorsEnums.GRAY]:   'bg-gray-100 text-gray-700 border-gray-200',
+  [ColorsEnums.RED]:    'bg-red-100 text-red-700 border-red-200 dark:bg-red-500/15 dark:text-red-300 dark:border-red-500/30',
+  [ColorsEnums.GREEN]:  'bg-green-100 text-green-700 border-green-200 dark:bg-green-500/15 dark:text-green-300 dark:border-green-500/30',
+  [ColorsEnums.BLUE]:   'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-500/15 dark:text-blue-300 dark:border-blue-500/30',
+  [ColorsEnums.YELLOW]: 'bg-yellow-100 text-yellow-700 border-yellow-200 dark:bg-yellow-500/15 dark:text-yellow-300 dark:border-yellow-500/30',
+  [ColorsEnums.GRAY]:   'bg-gray-100 text-gray-700 border-gray-200 dark:bg-gray-500/15 dark:text-gray-300 dark:border-gray-500/30',
   [ColorsEnums.BLACK]:  'bg-gray-800 text-gray-100 border-gray-700',
-  [ColorsEnums.NONE]:   'bg-gray-50 text-gray-600 border-gray-200',
+  [ColorsEnums.NONE]:   'bg-gray-50 text-gray-600 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700',
 }
 
-const defaultColor = 'bg-red-100 text-red-700 border-red-200'
+const defaultColor = colorMap[ColorsEnums.RED]
 
 const badgeClasses = computed(() => {
   const colorClasses = (props.color && colorMap[props.color]) || defaultColor

package/src/components/BaseBooleanIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <span v-if="value == null">{{ emptyText }}</span>
+  <span v-else class="inline-flex align-middle" :title="value ? trueLabel : falseLabel">
+    <CheckCircleIcon v-if="value" class="h-5 w-5 shrink-0 text-emerald-500" :aria-label="trueLabel" />
+    <XCircleIcon v-else class="h-5 w-5 shrink-0 text-red-500" :aria-label="falseLabel" />
+  </span>
+</template>
+
+<script setup lang="ts">
+// Icon-only yes/no flag for dense tables: green tick or red cross with the label in the tooltip, emptyText when the value is unknown. Use BaseBooleanBadge when the label should be visible.
+import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/20/solid'
+
+withDefaults(
+  defineProps<{
+    value?: boolean | null
+    trueLabel?: string
+    falseLabel?: string
+    emptyText?: string
+  }>(),
+  { value: null, trueLabel: 'Yes', falseLabel: 'No', emptyText: '—' },
+)
+</script>

package/src/components/BaseDetailList.vue

@@ -1,47 +1,50 @@
-<template>
-  <dl class="grid grid-cols-[minmax(0,1fr)] gap-x-6 gap-y-4 text-left" :class="columns === 2 ? 'sm:grid-cols-[repeat(2,minmax(0,1fr))]' : columns === 3 ? 'sm:grid-cols-[repeat(2,minmax(0,1fr))] lg:grid-cols-[repeat(3,minmax(0,1fr))]' : ''">
-    <div v-for="item in items" :key="item.label" class="min-w-0">
-      <dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{{ item.label }}</dt>
-      <dd class="mt-1 break-words text-sm text-slate-900 dark:text-slate-100" :class="item.mono ? 'font-mono' : ''">
-        <a
-          v-if="item.href && !isEmpty(item.value)"
-          :href="item.href"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-emerald-600 hover:underline dark:text-emerald-400"
-        >{{ item.value }}</a>
-        <span v-else-if="isEmpty(item.value)" class="text-slate-400 dark:text-slate-500">{{ emptyText }}</span>
-        <template v-else>{{ item.value }}</template>
-      </dd>
-    </div>
-  </dl>
-</template>
-
-<script setup lang="ts">
-// Column classes use the arbitrary-value form on purpose (see
-// noSharedResponsiveGrid.test.ts): plain responsive column utilities would ship
-// in the lib CSS, which consumers import AFTER their own utilities, and override
-// the consumers' larger-breakpoint grid columns.
-/**
- * Read-only label/value grid for detail pages — the "view" counterpart of a
- * form. Empty values render `emptyText` (—); `href` makes the value an
- * external link; `mono` sets it in the monospace face (ids, hashes).
- */
-import type { DetailItem } from '../types/detail'
-
-interface Props {
-  items: readonly DetailItem[]
-  /** Columns from `sm` up (1 column on phones). */
-  columns?: 1 | 2 | 3
-  emptyText?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  columns: 2,
-  emptyText: '—',
-})
-
-function isEmpty(v: DetailItem['value']): boolean {
-  return v === null || v === undefined || v === ''
-}
-</script>
+<template>
+  <dl class="grid grid-cols-[minmax(0,1fr)] gap-x-6 gap-y-4 text-left" :class="columns === 2 ? 'sm:grid-cols-[repeat(2,minmax(0,1fr))]' : columns === 3 ? 'sm:grid-cols-[repeat(2,minmax(0,1fr))] lg:grid-cols-[repeat(3,minmax(0,1fr))]' : ''">
+    <div v-for="item in items" :key="item.label" class="min-w-0">
+      <dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{{ item.label }}</dt>
+      <dd class="mt-1 break-words text-sm text-slate-900 dark:text-slate-100" :class="item.mono ? 'font-mono' : ''">
+        <slot name="value" :item="item">
+        <a
+          v-if="item.href && !isEmpty(item.value)"
+          :href="item.href"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-emerald-600 hover:underline dark:text-emerald-400"
+        >{{ item.value }}</a>
+        <span v-else-if="isEmpty(item.value)" class="text-slate-400 dark:text-slate-500">{{ emptyText }}</span>
+        <template v-else>{{ item.value }}</template>
+        </slot>
+      </dd>
+    </div>
+  </dl>
+</template>
+
+<script setup lang="ts">
+// Column classes use the arbitrary-value form on purpose (see
+// noSharedResponsiveGrid.test.ts): plain responsive column utilities would ship
+// in the lib CSS, which consumers import AFTER their own utilities, and override
+// the consumers' larger-breakpoint grid columns.
+/**
+ * Read-only label/value grid for detail pages — the "view" counterpart of a
+ * form. Empty values render `emptyText` (—); `href` makes the value an
+ * external link; `mono` sets it in the monospace face (ids, hashes). The scoped
+ * `value` slot (`{ item }`) overrides how a value renders, e.g. a badge.
+ */
+import type { DetailItem } from '../types/detail'
+
+interface Props {
+  items: readonly DetailItem[]
+  /** Columns from `sm` up (1 column on phones). */
+  columns?: 1 | 2 | 3
+  emptyText?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  columns: 2,
+  emptyText: '—',
+})
+
+function isEmpty(v: DetailItem['value']): boolean {
+  return v === null || v === undefined || v === ''
+}
+</script>

package/src/components/BaseField.label.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import BaseField from './BaseField.vue'
+
+describe('BaseField label association', () => {
+  it('links the label to the slotted control when labelFor is not set', async () => {
+    const wrapper = mount(BaseField, { props: { label: 'Name' }, slots: { default: '<input />' } })
+    await nextTick()
+    const id = wrapper.find('input').attributes('id')
+    expect(id).toBeTruthy()
+    expect(wrapper.find('label').attributes('for')).toBe(id)
+  })
+
+  it('keeps an id the control already has', async () => {
+    const wrapper = mount(BaseField, { props: { label: 'Name' }, slots: { default: '<input id="own" />' } })
+    await nextTick()
+    expect(wrapper.find('label').attributes('for')).toBe('own')
+  })
+
+  it('prefers an explicit labelFor', async () => {
+    const wrapper = mount(BaseField, {
+      props: { label: 'Name', labelFor: 'x' },
+      slots: { default: '<input />' },
+    })
+    await nextTick()
+    expect(wrapper.find('label').attributes('for')).toBe('x')
+    expect(wrapper.find('input').attributes('id')).toBeUndefined()
+  })
+})

package/src/components/BaseField.vue

@@ -1,8 +1,8 @@
 <template>
-  <div :class="grow ? 'min-w-48 flex-1' : ''" class="text-left">
+  <div ref="root" :class="grow ? 'min-w-48 flex-1' : ''" class="text-left">
     <label
       v-if="label"
-      :for="labelFor || undefined"
+      :for="labelFor || autoFor"
       class="mb-1 block"
       :class="compact
         ? 'text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400'
@@ -17,6 +17,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref, useId } from 'vue'
+
 /**
  * Label + control + message wrapper for forms and filter bars. The control
  * goes in the default slot (BaseInput, BaseSelect, BaseSearchSelect, …).
@@ -35,7 +37,7 @@ interface Props {
   grow?: boolean
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   label: '',
   labelFor: '',
   required: false,
@@ -44,4 +46,18 @@ withDefaults(defineProps<Props>(), {
   compact: false,
   grow: false,
 })
+
+// Without labelFor, link the label to the control in the slot so clicking it
+// focuses the field and screen readers announce it.
+const root = ref<HTMLElement>()
+const autoFor = ref<string>()
+const generatedId = useId()
+
+onMounted(() => {
+  if (props.labelFor || !props.label) return
+  const control = root.value?.querySelector<HTMLElement>('input, select, textarea')
+  if (!control) return
+  control.id ||= generatedId
+  autoFor.value = control.id
+})
 </script>

package/src/components/BasePageHeader.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BasePageHeader from './BasePageHeader.vue'
+
+const hasGauge = (wrapper: ReturnType<typeof mount>) =>
+  wrapper.find('h1 span[aria-hidden="true"]').exists()
+
+describe('BasePageHeader accent', () => {
+  it('shows the gauge bar by default on icon-less headers', () => {
+    expect(hasGauge(mount(BasePageHeader, { props: { title: 'Dashboard' } }))).toBe(true)
+  })
+
+  it('hides the gauge bar when an icon badge is present', () => {
+    const wrapper = mount(BasePageHeader, {
+      props: { title: 'Dashboard' },
+      slots: { icon: '<svg />' },
+    })
+    expect(hasGauge(wrapper)).toBe(false)
+  })
+
+  it('honours an explicit opt-out and opt-in', () => {
+    expect(hasGauge(mount(BasePageHeader, { props: { title: 'A', accent: false } }))).toBe(false)
+    const withIcon = mount(BasePageHeader, {
+      props: { title: 'A', accent: true },
+      slots: { icon: '<svg />' },
+    })
+    expect(hasGauge(withIcon)).toBe(true)
+  })
+})

package/src/components/BasePageHeader.vue

@@ -1,131 +1,137 @@
-<template>
-  <!--
-    Page-level header. Standardises the "icon badge + title/subtitle on
-    the left, action buttons on the right" pattern for top-level views.
-
-    Slots:
-      • icon    — the page-specific Heroicon. Receives an `iconClass`
-        slot prop carrying the theme-aware text colour, so callers can
-        bind `:class="iconClass"` on their icon component. The badge
-        square only renders when this slot is filled, so icon-less apps
-        get a plain title/subtitle header.
-      • subtitle — rich subtitle content (links, emphasis); overrides
-        the `subtitle` prop.
-      • actions — refresh / destructive buttons rendered on the right.
-
-    Props:
-      • title     — the H1 text.
-      • subtitle  — optional muted line below the title.
-      • iconColor — badge background + icon text colour
-        ('emerald' | 'sky' | 'red' | 'amber'). Defaults to 'emerald'.
-      • maxWidthClass — Tailwind max-w utility constraining the header
-        width so sibling views can share a footprint. Defaults to
-        'max-w-4xl'; pass '' to skip the width wrapper entirely (the
-        header then spans whatever container it sits in).
-      • align — vertical alignment of the title block vs the actions:
-        'center' (default) or 'end' (actions sit on the title baseline).
-      • marginClass — space under the header. Defaults to 'mb-8'; pass
-        '' when the parent already manages vertical rhythm (space-y-*).
-  -->
-  <header :class="maxWidthClass ? ['mx-auto px-4 sm:px-6', maxWidthClass] : undefined">
-    <!--
-      flex-wrap + gap so a long title and the action buttons reflow onto
-      separate rows on narrow (mobile) viewports instead of the actions
-      overflowing off the right edge of the screen. min-w-0 on the title
-      group lets a long title truncate rather than shoving the actions out.
-    -->
-    <div
-      class="flex flex-wrap justify-between gap-3"
-      :class="[align === 'end' ? 'items-end' : 'items-center', marginClass]"
-    >
-      <div class="flex items-center gap-3 min-w-0">
-        <div
-          v-if="$slots.icon"
-          class="w-10 h-10 rounded-lg flex items-center justify-center"
-          :class="badgeBgClass"
-        >
-          <slot name="icon" :icon-class="iconTextClass" />
-        </div>
-        <div>
-          <h1
-            class="text-2xl font-bold"
-            :class="[t.primaryTextSoft, accent ? 'relative pl-3.5 tracking-tight' : '']"
-          >
-            <span
-              v-if="accent"
-              class="absolute left-0 top-[0.14em] h-[1.1em] w-1 rounded-full bg-gradient-to-b from-emerald-400 to-emerald-600"
-              aria-hidden="true"
-            />
-            {{ title }}
-          </h1>
-          <p v-if="subtitle || $slots.subtitle" class="max-w-[72ch] text-sm" :class="t.dimTextAlt">
-            <slot name="subtitle">{{ subtitle }}</slot>
-          </p>
-        </div>
-      </div>
-      <div class="flex items-center gap-2">
-        <slot name="actions" />
-      </div>
-    </div>
-  </header>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-import { useThemeClasses } from '../composables/useThemeClasses'
-
-type IconColor = 'emerald' | 'sky' | 'red' | 'amber'
-
-const props = withDefaults(
-  defineProps<{
-    title: string
-    subtitle?: string
-    iconColor?: IconColor
-    maxWidthClass?: string
-    align?: 'center' | 'end'
-    marginClass?: string
-    /** Brand-green gauge bar in front of the title (icon-less headers). */
-    accent?: boolean
-  }>(),
-  {
-    subtitle: '',
-    iconColor: 'emerald',
-    maxWidthClass: 'max-w-4xl',
-    align: 'center',
-    marginClass: 'mb-8',
-    accent: false,
-  },
-)
-
-const { isDark } = useTheme()
-const t = useThemeClasses()
-
-// Maps the named colour palette to the badge-background classes for
-// dark/light themes. Callers just pass `iconColor="sky"` and the
-// component resolves both modes.
-const badgeBgClass = computed(() => {
-  const palette: Record<IconColor, { dark: string; light: string }> = {
-    emerald: { dark: 'bg-emerald-500/10', light: 'bg-emerald-50' },
-    sky: { dark: 'bg-sky-500/10', light: 'bg-sky-50' },
-    red: { dark: 'bg-red-500/10', light: 'bg-red-50' },
-    amber: { dark: 'bg-amber-500/10', light: 'bg-amber-50' },
-  }
-  const entry = palette[props.iconColor]
-  return isDark.value ? entry.dark : entry.light
-})
-
-// Icon text colour, routed through the same name → palette mapping so
-// callers don't need to know the exact Tailwind shade per theme. Exposed
-// to the `icon` slot via the `iconClass` slot prop.
-const iconTextClass = computed(() => {
-  const palette: Record<IconColor, { dark: string; light: string }> = {
-    emerald: { dark: 'text-emerald-400', light: 'text-emerald-600' },
-    sky: { dark: 'text-sky-400', light: 'text-sky-600' },
-    red: { dark: 'text-red-400', light: 'text-red-500' },
-    amber: { dark: 'text-amber-400', light: 'text-amber-600' },
-  }
-  const entry = palette[props.iconColor]
-  return isDark.value ? entry.dark : entry.light
-})
-</script>
+<template>
+  <!--
+    Page-level header. Standardises the "icon badge + title/subtitle on
+    the left, action buttons on the right" pattern for top-level views.
+
+    Slots:
+      • icon    — the page-specific Heroicon. Receives an `iconClass`
+        slot prop carrying the theme-aware text colour, so callers can
+        bind `:class="iconClass"` on their icon component. The badge
+        square only renders when this slot is filled, so icon-less apps
+        get a plain title/subtitle header.
+      • subtitle — rich subtitle content (links, emphasis); overrides
+        the `subtitle` prop.
+      • actions — refresh / destructive buttons rendered on the right.
+
+    Props:
+      • title     — the H1 text.
+      • subtitle  — optional muted line below the title.
+      • iconColor — badge background + icon text colour
+        ('emerald' | 'sky' | 'red' | 'amber'). Defaults to 'emerald'.
+      • maxWidthClass — Tailwind max-w utility constraining the header
+        width so sibling views can share a footprint. Defaults to
+        'max-w-4xl'; pass '' to skip the width wrapper entirely (the
+        header then spans whatever container it sits in).
+      • align — vertical alignment of the title block vs the actions:
+        'center' (default) or 'end' (actions sit on the title baseline).
+      • marginClass — space under the header. Defaults to 'mb-8'; pass
+        '' when the parent already manages vertical rhythm (space-y-*).
+      • accent — brand-green gauge bar in front of the title. Defaults to
+        on for icon-less headers; pass :accent="false" to opt out.
+  -->
+  <header :class="maxWidthClass ? ['mx-auto px-4 sm:px-6', maxWidthClass] : undefined">
+    <!--
+      flex-wrap + gap so a long title and the action buttons reflow onto
+      separate rows on narrow (mobile) viewports instead of the actions
+      overflowing off the right edge of the screen. min-w-0 on the title
+      group lets a long title truncate rather than shoving the actions out.
+    -->
+    <div
+      class="flex flex-wrap justify-between gap-3"
+      :class="[align === 'end' ? 'items-end' : 'items-center', marginClass]"
+    >
+      <div class="flex items-center gap-3 min-w-0">
+        <div
+          v-if="$slots.icon"
+          class="w-10 h-10 rounded-lg flex items-center justify-center"
+          :class="badgeBgClass"
+        >
+          <slot name="icon" :icon-class="iconTextClass" />
+        </div>
+        <div>
+          <h1
+            class="text-2xl font-bold"
+            :class="[t.primaryTextSoft, showAccent ? 'relative pl-3.5 tracking-tight' : '']"
+          >
+            <span
+              v-if="showAccent"
+              class="absolute left-0 top-[0.14em] h-[1.1em] w-1 rounded-full bg-gradient-to-b from-emerald-400 to-emerald-600"
+              aria-hidden="true"
+            />
+            {{ title }}
+          </h1>
+          <p v-if="subtitle || $slots.subtitle" class="max-w-[72ch] text-sm" :class="t.dimTextAlt">
+            <slot name="subtitle">{{ subtitle }}</slot>
+          </p>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <slot name="actions" />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import { useThemeClasses } from '../composables/useThemeClasses'
+
+type IconColor = 'emerald' | 'sky' | 'red' | 'amber'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    subtitle?: string
+    iconColor?: IconColor
+    maxWidthClass?: string
+    align?: 'center' | 'end'
+    marginClass?: string
+    /** Brand-green gauge bar in front of the title. Defaults to on when there is no icon. */
+    accent?: boolean
+  }>(),
+  {
+    subtitle: '',
+    iconColor: 'emerald',
+    maxWidthClass: 'max-w-4xl',
+    align: 'center',
+    marginClass: 'mb-8',
+    // Explicit undefined: an absent Boolean prop would otherwise cast to false.
+    accent: undefined,
+  },
+)
+
+const { isDark } = useTheme()
+const t = useThemeClasses()
+const slots = useSlots()
+
+const showAccent = computed(() => props.accent ?? !slots.icon)
+
+// Maps the named colour palette to the badge-background classes for
+// dark/light themes. Callers just pass `iconColor="sky"` and the
+// component resolves both modes.
+const badgeBgClass = computed(() => {
+  const palette: Record<IconColor, { dark: string; light: string }> = {
+    emerald: { dark: 'bg-emerald-500/10', light: 'bg-emerald-50' },
+    sky: { dark: 'bg-sky-500/10', light: 'bg-sky-50' },
+    red: { dark: 'bg-red-500/10', light: 'bg-red-50' },
+    amber: { dark: 'bg-amber-500/10', light: 'bg-amber-50' },
+  }
+  const entry = palette[props.iconColor]
+  return isDark.value ? entry.dark : entry.light
+})
+
+// Icon text colour, routed through the same name → palette mapping so
+// callers don't need to know the exact Tailwind shade per theme. Exposed
+// to the `icon` slot via the `iconClass` slot prop.
+const iconTextClass = computed(() => {
+  const palette: Record<IconColor, { dark: string; light: string }> = {
+    emerald: { dark: 'text-emerald-400', light: 'text-emerald-600' },
+    sky: { dark: 'text-sky-400', light: 'text-sky-600' },
+    red: { dark: 'text-red-400', light: 'text-red-500' },
+    amber: { dark: 'text-amber-400', light: 'text-amber-600' },
+  }
+  const entry = palette[props.iconColor]
+  return isDark.value ? entry.dark : entry.light
+})
+</script>

package/src/components/BasePhotoViewer.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BasePhotoViewer from './BasePhotoViewer.vue'
+
+const photos = [
+  { src: 'a.png', label: 'A' },
+  { src: 'b.png', label: 'B' },
+]
+
+describe('BasePhotoViewer', () => {
+  it('wraps around with the arrow keys and closes on Escape', async () => {
+    const wrapper = mount(BasePhotoViewer, {
+      props: { photos, modelValue: 0 },
+      global: { stubs: { Teleport: true } },
+    })
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1])
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    expect(wrapper.emitted('close')).toHaveLength(1)
+    wrapper.unmount()
+  })
+})