mgv-backoffice 1.42.0 → 1.43.0

package/package.json

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

package/src/components/BaseDropdown.test.ts

@@ -1,87 +1,102 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import BaseDropdown from './BaseDropdown.vue'
-import type { DropdownOption } from '../types/dropdown'
-
-const options: DropdownOption[] = [
-  { value: '1', label: 'Alice' },
-  { value: '2', label: 'Bob', title: 'Bob the builder' },
-  { value: '3', label: 'Carol', disabled: true },
-]
-
-describe('BaseDropdown', () => {
-  it('shows the placeholder when nothing is selected', () => {
-    const wrapper = mount(BaseDropdown, {
-      props: { options, modelValue: null, placeholder: 'Select Social User' },
-    })
-    const trigger = wrapper.get('button')
-    expect(trigger.text()).toContain('Select Social User')
-    expect(trigger.attributes('aria-expanded')).toBe('false')
-    // Menu is closed until the trigger is clicked.
-    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
-  })
-
-  it('shows the selected option label instead of the placeholder', () => {
-    const wrapper = mount(BaseDropdown, {
-      props: { options, modelValue: '2', placeholder: 'Select Social User' },
-    })
-    expect(wrapper.get('button').text()).toContain('Bob')
-    expect(wrapper.get('button').text()).not.toContain('Select Social User')
-  })
-
-  it('opens the menu and renders one row per option on click', async () => {
-    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
-    await wrapper.get('button').trigger('click')
-    expect(wrapper.get('button').attributes('aria-expanded')).toBe('true')
-    const rows = wrapper.findAll('[role="option"]')
-    expect(rows.map((r) => r.text())).toEqual(['Alice', 'Bob', 'Carol'])
-    expect(rows[1].attributes('title')).toBe('Bob the builder')
-  })
-
-  it('emits update:modelValue and closes when a row is chosen', async () => {
-    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
-    await wrapper.get('button').trigger('click')
-    await wrapper.findAll('[role="option"] button')[1].trigger('click')
-    expect(wrapper.emitted('update:modelValue')).toEqual([['2']])
-    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
-  })
-
-  it('does not emit for a disabled row', async () => {
-    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
-    await wrapper.get('button').trigger('click')
-    await wrapper.findAll('[role="option"] button')[2].trigger('click')
-    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
-  })
-
-  it('marks the selected row with aria-selected and the active fill', async () => {
-    const wrapper = mount(BaseDropdown, { props: { options, modelValue: '1' } })
-    await wrapper.get('button').trigger('click')
-    const rows = wrapper.findAll('[role="option"]')
-    expect(rows[0].attributes('aria-selected')).toBe('true')
-    expect(rows[1].attributes('aria-selected')).toBe('false')
-    expect(rows[0].get('button').classes()).toContain('bg-emerald-500')
-  })
-
-  it('replaces the default trigger skin when triggerClass is set', () => {
-    const wrapper = mount(BaseDropdown, {
-      props: { options, modelValue: '1', triggerClass: 'rounded border bg-red-100 text-red-700 px-1.5 py-0.5' },
-    })
-    const classes = wrapper.get('button').classes()
-    // Custom skin applied…
-    expect(classes).toContain('bg-red-100')
-    expect(classes).toContain('text-red-700')
-    // …and the default slate skin dropped (layout/focus classes remain).
-    expect(classes).not.toContain('border-slate-300')
-    expect(classes).not.toContain('bg-white')
-    expect(classes).toContain('cursor-pointer')
-  })
-
-  it('sizes the chevron via chevronClass', () => {
-    const wrapper = mount(BaseDropdown, {
-      props: { options, modelValue: '1', chevronClass: 'w-3 h-3' },
-    })
-    const chevron = wrapper.get('button svg')
-    expect(chevron.classes()).toContain('w-3')
-    expect(chevron.classes()).not.toContain('w-5')
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseDropdown from './BaseDropdown.vue'
+import type { DropdownOption } from '../types/dropdown'
+
+const options: DropdownOption[] = [
+  { value: '1', label: 'Alice' },
+  { value: '2', label: 'Bob', title: 'Bob the builder' },
+  { value: '3', label: 'Carol', disabled: true },
+]
+
+describe('BaseDropdown', () => {
+  it('shows the placeholder when nothing is selected', () => {
+    const wrapper = mount(BaseDropdown, {
+      props: { options, modelValue: null, placeholder: 'Select Social User' },
+    })
+    const trigger = wrapper.get('button')
+    expect(trigger.text()).toContain('Select Social User')
+    expect(trigger.attributes('aria-expanded')).toBe('false')
+    // Menu is closed until the trigger is clicked.
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('shows the selected option label instead of the placeholder', () => {
+    const wrapper = mount(BaseDropdown, {
+      props: { options, modelValue: '2', placeholder: 'Select Social User' },
+    })
+    expect(wrapper.get('button').text()).toContain('Bob')
+    expect(wrapper.get('button').text()).not.toContain('Select Social User')
+  })
+
+  it('opens the menu and renders one row per option on click', async () => {
+    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
+    await wrapper.get('button').trigger('click')
+    expect(wrapper.get('button').attributes('aria-expanded')).toBe('true')
+    const rows = wrapper.findAll('[role="option"]')
+    expect(rows.map((r) => r.text())).toEqual(['Alice', 'Bob', 'Carol'])
+    expect(rows[1].attributes('title')).toBe('Bob the builder')
+  })
+
+  it('emits update:modelValue and closes when a row is chosen', async () => {
+    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
+    await wrapper.get('button').trigger('click')
+    await wrapper.findAll('[role="option"] button')[1].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toEqual([['2']])
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('does not emit for a disabled row', async () => {
+    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
+    await wrapper.get('button').trigger('click')
+    await wrapper.findAll('[role="option"] button')[2].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('marks the selected row with aria-selected and the active fill', async () => {
+    const wrapper = mount(BaseDropdown, { props: { options, modelValue: '1' } })
+    await wrapper.get('button').trigger('click')
+    const rows = wrapper.findAll('[role="option"]')
+    expect(rows[0].attributes('aria-selected')).toBe('true')
+    expect(rows[1].attributes('aria-selected')).toBe('false')
+    expect(rows[0].get('button').classes()).toContain('bg-emerald-500')
+  })
+
+  it('replaces the default trigger skin when triggerClass is set', () => {
+    const wrapper = mount(BaseDropdown, {
+      props: { options, modelValue: '1', triggerClass: 'rounded border bg-red-100 text-red-700 px-1.5 py-0.5' },
+    })
+    const classes = wrapper.get('button').classes()
+    // Custom skin applied…
+    expect(classes).toContain('bg-red-100')
+    expect(classes).toContain('text-red-700')
+    // …and the default slate skin dropped (layout/focus classes remain).
+    expect(classes).not.toContain('border-slate-300')
+    expect(classes).not.toContain('bg-white')
+    expect(classes).toContain('cursor-pointer')
+  })
+
+  it('sizes the chevron via chevronClass', () => {
+    const wrapper = mount(BaseDropdown, {
+      props: { options, modelValue: '1', chevronClass: 'w-3 h-3' },
+    })
+    const chevron = wrapper.get('button svg')
+    expect(chevron.classes()).toContain('w-3')
+    expect(chevron.classes()).not.toContain('w-5')
+  })
+
+  it('tints the default skin by tone while keeping the size padding', () => {
+    const danger = mount(BaseDropdown, { props: { options, modelValue: '1', size: 'sm', tone: 'danger' } })
+    const cls = danger.get('button').classes()
+    expect(cls).toEqual(expect.arrayContaining(['border-red-300', 'bg-red-50', 'text-red-700', 'px-3', 'py-2']))
+    expect(cls).not.toContain('bg-white')
+
+    const success = mount(BaseDropdown, { props: { options, modelValue: '1', tone: 'success' } })
+    expect(success.get('button').classes()).toEqual(expect.arrayContaining(['bg-emerald-50', 'px-4']))
+  })
+
+  it('defaults to the neutral slate skin', () => {
+    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
+    expect(wrapper.get('button').classes()).toContain('bg-white')
+  })
+})

package/src/components/BaseDropdown.vue

@@ -1,172 +1,188 @@
-<template>
-  <!--
-    Button-style single-select dropdown ("Select Social User ⌄"). Unlike
-    BaseSelect (a themed native <select>), this renders a trigger button plus
-    a floating menu, so the closed control shows a placeholder and a chevron
-    that rotates while open — matching the app's filter dropdowns.
-
-    Options are passed as data (not <option> slots) so the menu rows can carry
-    tooltips and disabled state. Selecting a row emits its `value` and closes
-    the menu; Escape and an outside click also close it.
-
-    Same `dark:`-variant note as BaseSelect: the slate skin ships static
-    light/dark classes so consumers get both themes without extra config.
-  -->
-  <div
-    ref="rootEl"
-    :class="block ? 'relative w-full' : 'relative inline-block'"
-  >
-    <button
-      type="button"
-      :class="[triggerClass, block ? 'w-full' : '']"
-      :disabled="disabled"
-      :aria-label="ariaLabel || undefined"
-      aria-haspopup="listbox"
-      :aria-expanded="open"
-      @click="toggle"
-    >
-      <!-- min-w-0 + truncate so long labels ellipsize inside narrow
-           (fixed-column) triggers instead of wrapping or widening them. -->
-      <span class="min-w-0 truncate" :class="selectedOption ? '' : 'text-slate-400 dark:text-slate-500'">
-        {{ selectedOption ? selectedOption.label : placeholder }}
-      </span>
-      <ChevronDownIcon
-        class="shrink-0 transition-transform"
-        :class="[chevronClass, open ? 'rotate-180' : '']"
-        aria-hidden="true"
-      />
-    </button>
-
-    <ul
-      v-if="open"
-      role="listbox"
-      :aria-label="ariaLabel || placeholder"
-      class="absolute z-20 mt-1 w-full min-w-max max-w-xs max-h-60 overflow-auto rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 py-1 shadow-lg focus:outline-none"
-    >
-      <li
-        v-for="opt in options"
-        :key="String(opt.value)"
-        role="option"
-        :aria-selected="opt.value === modelValue"
-        :title="opt.title"
-      >
-        <button
-          type="button"
-          :disabled="opt.disabled"
-          :class="rowClass(opt)"
-          @click="select(opt)"
-        >
-          {{ opt.label }}
-        </button>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import { ChevronDownIcon } from '@heroicons/vue/24/outline'
-import { useEscapeKey } from '../composables/useEscapeKey'
-import type { DropdownOption } from '../types/dropdown'
-
-// NOT generic on purpose: vite-plugin-dts flattens SFC generics out of the
-// emitted declarations, so consumers would see the erased constraint anyway.
-// The update:modelValue payload is `any` so `v-model` on a union-typed ref
-// type-checks; the actual payload is always one of the options' values.
-interface Props {
-  options: readonly DropdownOption[]
-  modelValue?: string | number | null
-  /** Trigger text shown when nothing is selected. */
-  placeholder?: string
-  /** 'md' = px-4 py-2.5 (default, the app filter height); 'sm' = px-3 py-2. */
-  size?: 'sm' | 'md'
-  /** Full-width (w-full). Set false for an inline, content-width dropdown. */
-  block?: boolean
-  disabled?: boolean
-  /** Accessible name for the trigger/listbox when there is no visible label. */
-  ariaLabel?: string
-  /**
-   * Replaces the trigger's default slate skin (border/background/text/padding)
-   * with the given classes — layout, focus ring and disabled classes are kept.
-   * Lets a consumer render the trigger as e.g. a coloured status pill while
-   * keeping the shared menu behaviour. `size` is ignored when this is set.
-   */
-  triggerClass?: string
-  /** Chevron sizing/colour classes; shrink for compact triggers. */
-  chevronClass?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: null,
-  placeholder: 'Select',
-  size: 'md',
-  block: true,
-  disabled: false,
-  ariaLabel: '',
-  triggerClass: '',
-  chevronClass: 'w-5 h-5 text-slate-500 dark:text-slate-400',
-})
-
-const emit = defineEmits<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (e: 'update:modelValue', value: any): void
-}>()
-
-const open = ref(false)
-const rootEl = ref<HTMLElement | null>(null)
-
-const selectedOption = computed(() =>
-  props.options.find((o) => o.value === props.modelValue) ?? null,
-)
-
-const triggerClass = computed(() => {
-  const layout =
-    'flex items-center justify-between gap-2 text-left transition-colors ' +
-    'focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 ' +
-    'cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed '
-  if (props.triggerClass) return layout + props.triggerClass
-  const padding = props.size === 'sm' ? 'px-3 py-2' : 'px-4 py-2.5'
-  return (
-    layout +
-    'rounded-lg border text-sm ' +
-    'border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100 ' +
-    'hover:bg-slate-50 dark:hover:bg-slate-800 ' +
-    padding
-  )
-})
-
-function rowClass(opt: DropdownOption): string {
-  const selected = opt.value === props.modelValue
-  const base =
-    'block w-full px-4 py-2 text-left text-sm transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed'
-  const fill = selected
-    ? 'bg-emerald-500 text-white'
-    : 'text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800'
-  return `${base} ${fill}`
-}
-
-function toggle() {
-  if (props.disabled) return
-  open.value = !open.value
-}
-
-function select(opt: DropdownOption) {
-  if (opt.disabled) return
-  emit('update:modelValue', opt.value)
-  open.value = false
-}
-
-useEscapeKey(() => {
-  open.value = false
-})
-
-function onDocumentClick(e: MouseEvent) {
-  if (!open.value) return
-  if (rootEl.value && !rootEl.value.contains(e.target as Node)) {
-    open.value = false
-  }
-}
-
-onMounted(() => document.addEventListener('click', onDocumentClick))
-onBeforeUnmount(() => document.removeEventListener('click', onDocumentClick))
-</script>
+<template>
+  <!--
+    Button-style single-select dropdown ("Select Social User ⌄"). Unlike
+    BaseSelect (a themed native <select>), this renders a trigger button plus
+    a floating menu, so the closed control shows a placeholder and a chevron
+    that rotates while open — matching the app's filter dropdowns.
+
+    Options are passed as data (not <option> slots) so the menu rows can carry
+    tooltips and disabled state. Selecting a row emits its `value` and closes
+    the menu; Escape and an outside click also close it.
+
+    Same `dark:`-variant note as BaseSelect: the slate skin ships static
+    light/dark classes so consumers get both themes without extra config.
+  -->
+  <div
+    ref="rootEl"
+    :class="block ? 'relative w-full' : 'relative inline-block'"
+  >
+    <button
+      type="button"
+      :class="[triggerClass, block ? 'w-full' : '']"
+      :disabled="disabled"
+      :aria-label="ariaLabel || undefined"
+      aria-haspopup="listbox"
+      :aria-expanded="open"
+      @click="toggle"
+    >
+      <!-- min-w-0 + truncate so long labels ellipsize inside narrow
+           (fixed-column) triggers instead of wrapping or widening them. -->
+      <span class="min-w-0 truncate" :class="selectedOption ? '' : 'text-slate-400 dark:text-slate-500'">
+        {{ selectedOption ? selectedOption.label : placeholder }}
+      </span>
+      <ChevronDownIcon
+        class="shrink-0 transition-transform"
+        :class="[chevronClass, open ? 'rotate-180' : '']"
+        aria-hidden="true"
+      />
+    </button>
+
+    <ul
+      v-if="open"
+      role="listbox"
+      :aria-label="ariaLabel || placeholder"
+      class="absolute z-20 mt-1 w-full min-w-max max-w-xs max-h-60 overflow-auto rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 py-1 shadow-lg focus:outline-none"
+    >
+      <li
+        v-for="opt in options"
+        :key="String(opt.value)"
+        role="option"
+        :aria-selected="opt.value === modelValue"
+        :title="opt.title"
+      >
+        <button
+          type="button"
+          :disabled="opt.disabled"
+          :class="rowClass(opt)"
+          @click="select(opt)"
+        >
+          {{ opt.label }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { ChevronDownIcon } from '@heroicons/vue/24/outline'
+import { useEscapeKey } from '../composables/useEscapeKey'
+import type { DropdownOption } from '../types/dropdown'
+
+// NOT generic on purpose: vite-plugin-dts flattens SFC generics out of the
+// emitted declarations, so consumers would see the erased constraint anyway.
+// The update:modelValue payload is `any` so `v-model` on a union-typed ref
+// type-checks; the actual payload is always one of the options' values.
+interface Props {
+  options: readonly DropdownOption[]
+  modelValue?: string | number | null
+  /** Trigger text shown when nothing is selected. */
+  placeholder?: string
+  /** 'md' = px-4 py-2.5 (default, the app filter height); 'sm' = px-3 py-2. */
+  size?: 'sm' | 'md'
+  /** Full-width (w-full). Set false for an inline, content-width dropdown. */
+  block?: boolean
+  disabled?: boolean
+  /** Accessible name for the trigger/listbox when there is no visible label. */
+  ariaLabel?: string
+  /**
+   * Replaces the trigger's default slate skin (border/background/text/padding)
+   * with the given classes — layout, focus ring and disabled classes are kept.
+   * Lets a consumer render the trigger as e.g. a coloured status pill while
+   * keeping the shared menu behaviour. `size` is ignored when this is set.
+   */
+  triggerClass?: string
+  /** Chevron sizing/colour classes; shrink for compact triggers. */
+  chevronClass?: string
+  /**
+   * Colour of the default trigger skin, keeping the standard `size` padding:
+   * 'neutral' (slate, default), 'success' (emerald) or 'danger' (red). Use it
+   * for a status dropdown (e.g. Active / Paused) that should match the height
+   * of the plain dropdowns beside it. Ignored when `triggerClass` is set.
+   */
+  tone?: 'neutral' | 'success' | 'danger'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  placeholder: 'Select',
+  size: 'md',
+  block: true,
+  disabled: false,
+  ariaLabel: '',
+  triggerClass: '',
+  chevronClass: 'w-5 h-5 text-slate-500 dark:text-slate-400',
+  tone: 'neutral',
+})
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: 'update:modelValue', value: any): void
+}>()
+
+const open = ref(false)
+const rootEl = ref<HTMLElement | null>(null)
+
+const selectedOption = computed(() =>
+  props.options.find((o) => o.value === props.modelValue) ?? null,
+)
+
+const triggerClass = computed(() => {
+  const layout =
+    'flex items-center justify-between gap-2 text-left transition-colors ' +
+    'focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 ' +
+    'cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed '
+  if (props.triggerClass) return layout + props.triggerClass
+  const padding = props.size === 'sm' ? 'px-3 py-2' : 'px-4 py-2.5'
+  return layout + 'rounded-lg border text-sm ' + TONE_SKIN[props.tone] + ' ' + padding
+})
+
+// Full literal class strings (no concatenated fragments) so Tailwind's
+// scanner keeps every one of them in consumer builds.
+const TONE_SKIN: Record<NonNullable<Props['tone']>, string> = {
+  neutral:
+    'border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100 ' +
+    'hover:bg-slate-50 dark:hover:bg-slate-800',
+  success:
+    'font-medium border-emerald-300 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 ' +
+    'hover:bg-emerald-100 dark:hover:bg-emerald-900/50',
+  danger:
+    'font-medium border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 ' +
+    'hover:bg-red-100 dark:hover:bg-red-900/50',
+}
+
+function rowClass(opt: DropdownOption): string {
+  const selected = opt.value === props.modelValue
+  const base =
+    'block w-full px-4 py-2 text-left text-sm transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed'
+  const fill = selected
+    ? 'bg-emerald-500 text-white'
+    : 'text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800'
+  return `${base} ${fill}`
+}
+
+function toggle() {
+  if (props.disabled) return
+  open.value = !open.value
+}
+
+function select(opt: DropdownOption) {
+  if (opt.disabled) return
+  emit('update:modelValue', opt.value)
+  open.value = false
+}
+
+useEscapeKey(() => {
+  open.value = false
+})
+
+function onDocumentClick(e: MouseEvent) {
+  if (!open.value) return
+  if (rootEl.value && !rootEl.value.contains(e.target as Node)) {
+    open.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onDocumentClick))
+onBeforeUnmount(() => document.removeEventListener('click', onDocumentClick))
+</script>