mgv-backoffice 1.38.0 → 1.40.0

package/package.json

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

package/src/components/BaseAuthLayout.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest'
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import BaseAuthLayout from './BaseAuthLayout.vue'
+import BaseBooleanBadge from './BaseBooleanBadge.vue'
+
+const global = { stubs: { RouterLink: RouterLinkStub } }
+
+describe('BaseAuthLayout', () => {
+  it('renders the default logo, title, content and footer', () => {
+    const wrapper = mount(BaseAuthLayout, {
+      props: { title: 'Sign in' },
+      slots: { default: '<form>form</form>', footer: 'No account? <a>Sign up</a>' },
+      global,
+    })
+    expect(wrapper.find('svg').exists()).toBe(true)
+    expect(wrapper.find('h1').text()).toBe('Sign in')
+    expect(wrapper.find('form').text()).toBe('form')
+    expect(wrapper.text()).toContain('No account? Sign up')
+  })
+
+  it('lets the logo slot replace the default logo', () => {
+    const wrapper = mount(BaseAuthLayout, { slots: { logo: '<img alt="brand" />' }, global })
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('svg').exists()).toBe(false)
+  })
+
+  it('widens the card with `wide`', () => {
+    const card = (w: ReturnType<typeof mount>) => w.find('.rounded-xl')
+    expect(card(mount(BaseAuthLayout, { global })).classes()).toContain('max-w-md')
+    expect(card(mount(BaseAuthLayout, { props: { wide: true }, global })).classes()).toContain('max-w-3xl')
+  })
+})
+
+describe('BaseBooleanBadge', () => {
+  it('renders a green "Yes" pill for true and a neutral "No" pill for false', () => {
+    const yes = mount(BaseBooleanBadge, { props: { value: true } })
+    expect(yes.text()).toBe('Yes')
+    expect(yes.classes()).toContain('bg-emerald-50')
+    const no = mount(BaseBooleanBadge, { props: { value: false } })
+    expect(no.text()).toBe('No')
+    expect(no.classes()).toContain('bg-slate-100')
+  })
+
+  it('uses custom labels and treats null as false', () => {
+    const w = mount(BaseBooleanBadge, { props: { value: null, trueLabel: 'Verified', falseLabel: 'Not verified' } })
+    expect(w.text()).toBe('Not verified')
+  })
+})

package/src/components/BaseAuthLayout.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex min-h-screen w-full flex-col items-center justify-center bg-slate-50 px-4 py-10 dark:bg-slate-950">
+    <div class="mb-6 flex justify-center">
+      <slot name="logo">
+        <BaseLogo :size="BaseLogoEnum.MEDIUM" />
+      </slot>
+    </div>
+    <div
+      class="w-full rounded-xl border border-slate-200 bg-white p-6 text-left shadow-sm sm:p-8 dark:border-slate-700 dark:bg-slate-900"
+      :class="wide ? 'max-w-3xl' : 'max-w-md'"
+    >
+      <h1 v-if="title" class="mb-1 text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ title }}</h1>
+      <p v-if="subtitle" class="text-sm text-slate-500 dark:text-slate-400">{{ subtitle }}</p>
+      <div :class="title || subtitle ? 'mt-6' : ''">
+        <slot />
+      </div>
+      <div
+        v-if="$slots.footer"
+        class="mt-6 border-t border-slate-200 pt-4 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400"
+      >
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Full-page, centred shell for sign-in / sign-up / password-recovery screens:
+ * logo on top (defaults to BaseLogo, override via the `logo` slot), then a
+ * bordered card with the title, the page content (default slot) and an
+ * optional `footer` ("Don't have an account? Sign up"). `wide` widens the card
+ * for multi-column forms such as registration.
+ */
+import BaseLogo from './BaseLogo.vue'
+import { BaseLogoEnum } from '../enums/BaseLogoEnum'
+
+interface Props {
+  title?: string
+  subtitle?: string
+  /** max-w-3xl card instead of max-w-md (multi-column forms). */
+  wide?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+  subtitle: '',
+  wide: false,
+})
+</script>

package/src/components/BaseBooleanBadge.vue

@@ -0,0 +1,33 @@
+<template>
+  <span
+    class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset"
+    :class="value
+      ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-500/10 dark:text-emerald-300 dark:ring-emerald-400/30'
+      : 'bg-slate-100 text-slate-600 ring-slate-500/20 dark:bg-slate-700/50 dark:text-slate-300 dark:ring-slate-400/20'"
+  >
+    <CheckCircleIcon v-if="value" class="h-3.5 w-3.5" aria-hidden="true" />
+    <XCircleIcon v-else class="h-3.5 w-3.5" aria-hidden="true" />
+    {{ value ? trueLabel : falseLabel }}
+  </span>
+</template>
+
+<script setup lang="ts">
+/**
+ * Yes/no status pill for boolean columns ("Verified", "Has API", …):
+ * a green check pill when true, a neutral cross pill when false — so a
+ * `false` reads as a state, not as an error.
+ */
+import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/20/solid'
+
+interface Props {
+  value?: boolean | null
+  trueLabel?: string
+  falseLabel?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  value: false,
+  trueLabel: 'Yes',
+  falseLabel: 'No',
+})
+</script>

package/src/components/BaseButton.vue

@@ -40,7 +40,7 @@ const props = defineProps({
   color: {
     type: String,
     required: false,
-    default: BaseButtonEnum.BLUE
+    default: BaseButtonEnum.GREEN
   },
   to: {
     type: String,

package/src/components/BaseDetailList.test.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseDetailList from './BaseDetailList.vue'
+
+describe('BaseDetailList', () => {
+  it('renders each label with its value', () => {
+    const wrapper = mount(BaseDetailList, {
+      props: { items: [{ label: 'Status', value: 'PUBLISHED' }, { label: 'Count', value: 3 }] },
+    })
+    expect(wrapper.findAll('dt').map((d) => d.text())).toEqual(['Status', 'Count'])
+    expect(wrapper.findAll('dd').map((d) => d.text())).toEqual(['PUBLISHED', '3'])
+  })
+
+  it('shows the empty text for missing values', () => {
+    const wrapper = mount(BaseDetailList, {
+      props: { items: [{ label: 'Link', value: null }, { label: 'Tags', value: '' }], emptyText: 'n/a' },
+    })
+    expect(wrapper.findAll('dd').map((d) => d.text())).toEqual(['n/a', 'n/a'])
+  })
+
+  it('renders href values as external links and applies mono', () => {
+    const wrapper = mount(BaseDetailList, {
+      props: { items: [{ label: 'Link', value: 'open', href: 'https://x.test' }, { label: 'Id', value: 'abc', mono: true }] },
+    })
+    const a = wrapper.find('a')
+    expect(a.attributes('href')).toBe('https://x.test')
+    expect(a.attributes('target')).toBe('_blank')
+    expect(wrapper.findAll('dd')[1].classes()).toContain('font-mono')
+  })
+
+  it('switches the grid columns', () => {
+    expect(mount(BaseDetailList, { props: { items: [], columns: 1 } }).classes()).not.toContain('sm:grid-cols-2')
+    expect(mount(BaseDetailList, { props: { items: [] } }).classes()).toContain('sm:grid-cols-2')
+    expect(mount(BaseDetailList, { props: { items: [], columns: 3 } }).classes()).toContain('lg:grid-cols-3')
+  })
+})

package/src/components/BaseDetailList.vue

@@ -0,0 +1,43 @@
+<template>
+  <dl class="grid grid-cols-1 gap-x-6 gap-y-4 text-left" :class="columns === 2 ? 'sm:grid-cols-2' : columns === 3 ? 'sm:grid-cols-2 lg:grid-cols-3' : ''">
+    <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">
+/**
+ * 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>

package/src/components/BasePageHeader.vue

@@ -47,10 +47,18 @@
           <slot name="icon" :icon-class="iconTextClass" />
         </div>
         <div>
-          <h1 class="text-2xl font-bold" :class="t.primaryTextSoft">
+          <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="text-sm" :class="t.dimTextAlt">
+          <p v-if="subtitle || $slots.subtitle" class="max-w-[72ch] text-sm" :class="t.dimTextAlt">
             <slot name="subtitle">{{ subtitle }}</slot>
           </p>
         </div>
@@ -77,6 +85,8 @@ const props = withDefaults(
     maxWidthClass?: string
     align?: 'center' | 'end'
     marginClass?: string
+    /** Brand-green gauge bar in front of the title (icon-less headers). */
+    accent?: boolean
   }>(),
   {
     subtitle: '',
@@ -84,6 +94,7 @@ const props = withDefaults(
     maxWidthClass: 'max-w-4xl',
     align: 'center',
     marginClass: 'mb-8',
+    accent: false,
   },
 )
 

package/src/components/BaseSelect.test.ts

@@ -11,7 +11,7 @@ describe('BaseSelect', () => {
     const wrapper = mount(BaseSelect, { slots })
     const select = wrapper.find('select')
     expect(select.classes()).toEqual(
-      expect.arrayContaining(['rounded-lg', 'border', 'w-full', 'pl-2.5', 'py-1.5', 'text-sm']),
+      expect.arrayContaining(['rounded-lg', 'border', 'w-full', 'pl-2.5', 'py-1.5', 'text-sm', 'appearance-none', 'bg-none']),
     )
   })
 

package/src/components/BaseSelect.vue

@@ -3,7 +3,7 @@
     <select
       v-bind="$attrs"
       :value="modelValue"
-      class="w-full appearance-none rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm cursor-pointer transition-colors hover:border-slate-400 dark:hover:border-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/40 focus-visible:border-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
+      class="w-full appearance-none bg-none rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm cursor-pointer transition-colors hover:border-slate-400 dark:hover:border-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/40 focus-visible:border-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
       :class="size === 'md' ? 'py-2 pl-3 pr-9' : 'py-1.5 pl-2.5 pr-8'"
       @change="onChange"
     >
@@ -28,7 +28,8 @@
 import { ChevronDownIcon } from '@heroicons/vue/24/outline'
 
 // Attrs (id, name, disabled, extra classes) go to the <select>, not the
-// chevron wrapper.
+// chevron wrapper. `bg-none` drops any arrow a forms reset (e.g. Flowbite /
+// @tailwindcss/forms) paints as a background image, so only our chevron shows.
 defineOptions({ inheritAttrs: false })
 
 // String-valued only — a DOM select always yields strings; use v-model.number

package/src/components/BaseToggle.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseToggle from './BaseToggle.vue'
+
+describe('BaseToggle', () => {
+  it('reflects the value in aria-checked and the track colour', () => {
+    const off = mount(BaseToggle, { props: { modelValue: false } })
+    expect(off.find('[role=switch]').attributes('aria-checked')).toBe('false')
+    expect(off.find('[role=switch]').classes()).toContain('bg-slate-200')
+
+    const on = mount(BaseToggle, { props: { modelValue: true, color: 'red' } })
+    expect(on.find('[role=switch]').attributes('aria-checked')).toBe('true')
+    expect(on.find('[role=switch]').classes()).toContain('bg-red-600')
+  })
+
+  it('uses the red off track with offTone="red"', () => {
+    const w = mount(BaseToggle, { props: { modelValue: false, offTone: 'red' } })
+    expect(w.find('[role=switch]').classes()).toContain('bg-red-200')
+  })
+
+  it('emits update:modelValue and change with the flipped value', async () => {
+    const w = mount(BaseToggle, { props: { modelValue: false } })
+    await w.find('[role=switch]').trigger('click')
+    expect(w.emitted('update:modelValue')).toEqual([[true]])
+    expect(w.emitted('change')).toEqual([[true]])
+  })
+
+  it('does nothing while disabled', async () => {
+    const w = mount(BaseToggle, { props: { modelValue: true, disabled: true } })
+    await w.find('[role=switch]').trigger('click')
+    expect(w.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('renders the label, or uses ariaLabel when there is none', () => {
+    expect(mount(BaseToggle, { props: { label: 'Crawler' } }).text()).toBe('Crawler')
+    const w = mount(BaseToggle, { props: { ariaLabel: 'Alive' } })
+    expect(w.find('[role=switch]').attributes('aria-label')).toBe('Alive')
+  })
+})

package/src/components/BaseToggle.vue

@@ -0,0 +1,73 @@
+<template>
+  <label
+    class="inline-flex items-center gap-3 select-none"
+    :class="disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'"
+  >
+    <button
+      type="button"
+      role="switch"
+      :aria-checked="modelValue"
+      :aria-label="label ? undefined : ariaLabel || undefined"
+      :disabled="disabled"
+      class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900 disabled:cursor-not-allowed"
+      :class="modelValue ? ON[color] : offTone === 'red' ? 'bg-red-200 dark:bg-red-900/50' : 'bg-slate-200 dark:bg-slate-700'"
+      @click="toggle"
+    >
+      <span
+        class="inline-block h-5 w-5 rounded-full bg-white shadow ring-1 ring-black/5 transition-transform"
+        :class="modelValue ? 'translate-x-[22px]' : 'translate-x-0.5'"
+        aria-hidden="true"
+      />
+    </button>
+    <span v-if="label" class="text-sm font-medium text-slate-700 dark:text-slate-200">{{ label }}</span>
+  </label>
+</template>
+
+<script setup lang="ts">
+/**
+ * On/off switch (role="switch"). `v-model` is the boolean; `change` fires
+ * after every user toggle with the new value, so callers can persist it.
+ * `color` tints the on state; `offTone="red"` shows a red track while off
+ * (e.g. "account is down" states).
+ */
+type Color = 'emerald' | 'red' | 'sky' | 'amber'
+
+interface Props {
+  modelValue?: boolean
+  /** Visible label beside the switch (also its accessible name). */
+  label?: string
+  /** Accessible name when there is no visible label. */
+  ariaLabel?: string
+  color?: Color
+  offTone?: 'slate' | 'red'
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  label: '',
+  ariaLabel: '',
+  color: 'emerald',
+  offTone: 'slate',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'change', value: boolean): void
+}>()
+
+const ON: Record<Color, string> = {
+  emerald: 'bg-emerald-500',
+  red: 'bg-red-600',
+  sky: 'bg-sky-500',
+  amber: 'bg-amber-500',
+}
+
+function toggle() {
+  if (props.disabled) return
+  const next = !props.modelValue
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+</script>

package/src/components/Pagination.test.ts

@@ -1,85 +1,93 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Pagination from './Pagination.vue'
-
-/** Visible cell labels in DOM order ('…' for the ellipsis span). */
-function cellLabels(wrapper: ReturnType<typeof mount>): string[] {
-  return wrapper.findAll('li').map(li => li.text().trim())
-}
-
-async function clickPage(wrapper: ReturnType<typeof mount>, page: number) {
-  const link = wrapper.findAll('button').find(b => b.text().trim() === String(page))
-  expect(link, `expected a visible cell for page ${page}`).toBeTruthy()
-  await link!.trigger('click')
-}
-
-describe('Pagination', () => {
-  it('renders every page without an ellipsis when totalPages <= 5', () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 100, itemsPerPage: 20 },
-    })
-    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5'])
-  })
-
-  it('renders a window with a trailing ellipsis on the first page', () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 200, itemsPerPage: 20 },
-    })
-    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '...', '10'])
-  })
-
-  it('keeps cells in ascending order around a middle page', async () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 200, itemsPerPage: 20 },
-    })
-    await clickPage(wrapper, 3)
-    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5', '...', '10'])
-
-    await clickPage(wrapper, 5)
-    expect(cellLabels(wrapper)).toEqual(['1', '...', '3', '4', '5', '6', '7', '...', '10'])
-
-    expect(wrapper.emitted('page-changed')).toEqual([[3], [5]])
-  })
-
-  it('omits the ellipsis when no pages are hidden next to the edges', async () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 200, itemsPerPage: 20 },
-    })
-    await clickPage(wrapper, 3)
-    await clickPage(wrapper, 4)
-    // window is 2..6, so only page 1 precedes it — no gap, no ellipsis
-    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5', '6', '...', '10'])
-  })
-
-  it('renders the trailing window on the last page', async () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 200, itemsPerPage: 20 },
-    })
-    await clickPage(wrapper, 3)
-    await clickPage(wrapper, 5)
-    await clickPage(wrapper, 7)
-    await clickPage(wrapper, 9)
-    await clickPage(wrapper, 10)
-    expect(cellLabels(wrapper)).toEqual(['1', '...', '8', '9', '10'])
-  })
-
-  it('does not emit when the active page is clicked again', async () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 200, itemsPerPage: 20 },
-    })
-    await clickPage(wrapper, 1)
-    expect(wrapper.emitted('page-changed')).toBeUndefined()
-  })
-
-  it('clamps the current page when the item count shrinks', async () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 200, itemsPerPage: 20 },
-    })
-    await clickPage(wrapper, 3)
-    await clickPage(wrapper, 5)
-    await clickPage(wrapper, 7)
-    await wrapper.setProps({ totalItems: 40 })
-    expect(cellLabels(wrapper)).toEqual(['1', '2'])
-    expect(wrapper.find('button.active').text()).toBe('2')
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Pagination from './Pagination.vue'
+
+/** Visible cell labels in DOM order ('…' for the ellipsis span). */
+function cellLabels(wrapper: ReturnType<typeof mount>): string[] {
+  return wrapper.findAll('li').map(li => li.text().trim())
+}
+
+async function clickPage(wrapper: ReturnType<typeof mount>, page: number) {
+  const link = wrapper.findAll('button').find(b => b.text().trim() === String(page))
+  expect(link, `expected a visible cell for page ${page}`).toBeTruthy()
+  await link!.trigger('click')
+}
+
+describe('Pagination', () => {
+  it('renders every page without an ellipsis when totalPages <= 5', () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 100, itemsPerPage: 20 },
+    })
+    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5'])
+  })
+
+  it('renders a window with a trailing ellipsis on the first page', () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '...', '10'])
+  })
+
+  it('keeps cells in ascending order around a middle page', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 3)
+    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5', '...', '10'])
+
+    await clickPage(wrapper, 5)
+    expect(cellLabels(wrapper)).toEqual(['1', '...', '3', '4', '5', '6', '7', '...', '10'])
+
+    expect(wrapper.emitted('page-changed')).toEqual([[3], [5]])
+  })
+
+  it('omits the ellipsis when no pages are hidden next to the edges', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 3)
+    await clickPage(wrapper, 4)
+    // window is 2..6, so only page 1 precedes it — no gap, no ellipsis
+    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5', '6', '...', '10'])
+  })
+
+  it('renders the trailing window on the last page', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 3)
+    await clickPage(wrapper, 5)
+    await clickPage(wrapper, 7)
+    await clickPage(wrapper, 9)
+    await clickPage(wrapper, 10)
+    expect(cellLabels(wrapper)).toEqual(['1', '...', '8', '9', '10'])
+  })
+
+  it('does not emit when the active page is clicked again', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 1)
+    expect(wrapper.emitted('page-changed')).toBeUndefined()
+  })
+
+  it('clamps the current page when the item count shrinks', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 3)
+    await clickPage(wrapper, 5)
+    await clickPage(wrapper, 7)
+    await wrapper.setProps({ totalItems: 40 })
+    expect(cellLabels(wrapper)).toEqual(['1', '2'])
+    expect(wrapper.find('button.active').text()).toBe('2')
+  })
+
+  it('falls back to 20 per page when itemsPerPage is null or 0 (no "Infinity")', () => {
+    for (const itemsPerPage of [null, 0]) {
+      const wrapper = mount(Pagination, { props: { totalItems: 16, itemsPerPage: itemsPerPage as unknown as number } })
+      expect(wrapper.text()).not.toContain('Infinity')
+      expect(wrapper.findAll('button').map((b) => b.text()).filter((t) => /^\d+$/.test(t))).toEqual(['1'])
+    }
+  })
+})