mgv-backoffice 1.37.0 → 1.40.0

package/src/components/BaseLogo.vue

@@ -1,12 +1,18 @@
 <template>
   <router-link to="/" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
-    <svg :height="computePx()" :width="computePx()" viewBox="33.6 130.6 499.7 242.9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset=".085" stop-color="#469e43"/><stop offset="1" stop-color="#132d13"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="64.863" x2="64.863" xlink:href="#a" y1="288.291" y2="369.4"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="138.367" x2="138.367" xlink:href="#a" y1="308.454" y2="370.601"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="195.475" x2="195.475" xlink:href="#a" y1="288.291" y2="369.85"/><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="249.634" x2="249.634" xlink:href="#a" y1="307.312" y2="369.511"/><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="302.884" x2="302.884" xlink:href="#a" y1="288.291" y2="367.857"/><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="354.118" x2="354.118" xlink:href="#a" y1="307.312" y2="369.511"/><linearGradient id="h" gradientUnits="userSpaceOnUse" x1="428.02" x2="428.02" xlink:href="#a" y1="306.156" y2="367.742"/><linearGradient id="i" gradientUnits="userSpaceOnUse" x1="502.066" x2="502.066" xlink:href="#a" y1="288.291" y2="369.4"/><linearGradient id="j" gradientUnits="userSpaceOnUse" x1="283.264" x2="283.264" xlink:href="#a" y1="131.629" y2="232.559"/><linearGradient id="k" gradientUnits="userSpaceOnUse" x1="283.46" x2="283.46" y1="202.275" y2="183.785"><stop offset="0" stop-color="#969799" stop-opacity="0"/><stop offset="1" stop-color="#808183"/></linearGradient><path d="m65 307.2c-6.8 0-13.1 2.2-18.2 5.9v-24.8h-13.2v81.1h31.4c17.2 0 31.1-13.9 31.1-31.1s-13.9-31.1-31.1-31.1zm0 49.3h-18.2v-18.2c0-10.1 8.2-18.2 18.2-18.2 10.1 0 18.2 8.2 18.2 18.2.1 10.1-8.1 18.2-18.2 18.2z" fill="url(#b)"/><path d="m168.8 343.9h-46.7c1.4 7.1 6.6 12 14.1 12.7 6.4.6 12.9.1 19.9.1v11.9c-15.2 4.9-33.3.5-42.1-10.4-3.8-4.7-17.3-34.7 11.5-47.4 39-11.4 45.3 22.4 43.3 33.1zm-14.2-12.7c-1.7-8.1-8.8-12.9-17.9-12.3-7.6.5-14 5.8-14.5 12.3z" fill="url(#c)"/><path d="m195.5 320.2c0 10.5-.2 20 .1 29.6.2 5.8 4.4 8.4 13.2 8.6v10.5c-13.8 3.9-26.2-4.5-26.4-18-.2-18.7-.1-43.9-.1-62.6h14.1l-.3 18.5 12.7-.1v13.4h-13.3z" fill="url(#d)"/><path d="m249.6 307.3c-17.2 0-31.1 13.9-31.1 31.1s13.9 31.1 31.1 31.1h31.1v-31.1c0-17.2-13.9-31.1-31.1-31.1zm18.6 49.7h-18.5c-10.2 0-18.5-8.3-18.5-18.5s8.3-18.5 18.5-18.5 18.5 8.3 18.5 18.5z" fill="url(#e)"/><path d="m296.4 288.3h13v79.6h-13z" fill="url(#f)"/><path d="m354.1 307.3c-17.2 0-31.1 13.9-31.1 31.1s13.9 31.1 31.1 31.1h31.1v-31.1c0-17.2-13.9-31.1-31.1-31.1zm18.6 49.7h-18.5c-10.2 0-18.5-8.3-18.5-18.5s8.3-18.5 18.5-18.5 18.5 8.3 18.5 18.5z" fill="url(#g)"/><path d="m442.2 367.7c0-12.3.2-23.6 0-34.9-.2-3.4-3.6-13.8-14.1-13.4-10.3-.3-14.4 10-14.3 12.7.1 10.2.5 35.1.5 35.1l-13.6.1s-.3-25.7.2-36.2c.6-14.1 12.7-25 27.5-25 14.7 0 26.2 10.4 26.7 24.9.4 10.4.5 36.3.5 36.3z" fill="url(#h)"/><path d="m501.9 307.2c6.8 0 13.1 2.2 18.2 5.9v-24.8h13.2v81.1h-31.4c-17.2 0-31.1-13.9-31.1-31.1s13.9-31.1 31.1-31.1zm0 49.3h18.2v-18.2c0-10.1-8.2-18.2-18.2-18.2-10.1 0-18.2 8.2-18.2 18.2 0 10.1 8.1 18.2 18.2 18.2z" fill="url(#i)"/><path d="m309.2 180.6h-24v-24c0-12.6 10.2-24.1 22.8-25 14.8-1 27.1 11.3 26.1 26.1-.8 12.7-12.3 22.9-24.9 22.9zm-50.7-48.9c-14.8-1-27.1 11.3-26.1 26.1.8 12.6 12.4 22.8 25 22.8h23.9v-24c0-12.6-10.3-24.1-22.8-24.9zm50.7 51.9h-24v23.9c0 12.6 10.2 24.1 22.8 25 14.8 1 27.1-11.3 26.1-26.1-.8-12.6-12.3-22.8-24.9-22.8zm-52.4 0c-14 0-25.3 11.8-24.4 26 .8 12.2 10.7 22.1 22.9 22.9 14.2.9 26-10.4 26-24.4v-24.5z" fill="url(#j)"/><path d="m281.7 183.8h3.6v18.5h-3.6z" fill="url(#k)"/></svg>
+    <svg :height="computePx()" :width="computePx()" viewBox="33.6 130.6 499.7 242.9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient :id="`${uid}-a`"><stop offset=".085" stop-color="#469e43"/><stop offset="1" stop-color="#132d13"/></linearGradient><linearGradient :id="`${uid}-b`" gradientUnits="userSpaceOnUse" x1="64.863" x2="64.863" :href="`#${uid}-a`" y1="288.291" y2="369.4"/><linearGradient :id="`${uid}-c`" gradientUnits="userSpaceOnUse" x1="138.367" x2="138.367" :href="`#${uid}-a`" y1="308.454" y2="370.601"/><linearGradient :id="`${uid}-d`" gradientUnits="userSpaceOnUse" x1="195.475" x2="195.475" :href="`#${uid}-a`" y1="288.291" y2="369.85"/><linearGradient :id="`${uid}-e`" gradientUnits="userSpaceOnUse" x1="249.634" x2="249.634" :href="`#${uid}-a`" y1="307.312" y2="369.511"/><linearGradient :id="`${uid}-f`" gradientUnits="userSpaceOnUse" x1="302.884" x2="302.884" :href="`#${uid}-a`" y1="288.291" y2="367.857"/><linearGradient :id="`${uid}-g`" gradientUnits="userSpaceOnUse" x1="354.118" x2="354.118" :href="`#${uid}-a`" y1="307.312" y2="369.511"/><linearGradient :id="`${uid}-h`" gradientUnits="userSpaceOnUse" x1="428.02" x2="428.02" :href="`#${uid}-a`" y1="306.156" y2="367.742"/><linearGradient :id="`${uid}-i`" gradientUnits="userSpaceOnUse" x1="502.066" x2="502.066" :href="`#${uid}-a`" y1="288.291" y2="369.4"/><linearGradient :id="`${uid}-j`" gradientUnits="userSpaceOnUse" x1="283.264" x2="283.264" :href="`#${uid}-a`" y1="131.629" y2="232.559"/><linearGradient :id="`${uid}-k`" gradientUnits="userSpaceOnUse" x1="283.46" x2="283.46" y1="202.275" y2="183.785"><stop offset="0" stop-color="#969799" stop-opacity="0"/><stop offset="1" stop-color="#808183"/></linearGradient><path d="m65 307.2c-6.8 0-13.1 2.2-18.2 5.9v-24.8h-13.2v81.1h31.4c17.2 0 31.1-13.9 31.1-31.1s-13.9-31.1-31.1-31.1zm0 49.3h-18.2v-18.2c0-10.1 8.2-18.2 18.2-18.2 10.1 0 18.2 8.2 18.2 18.2.1 10.1-8.1 18.2-18.2 18.2z" :fill="`url(#${uid}-b)`"/><path d="m168.8 343.9h-46.7c1.4 7.1 6.6 12 14.1 12.7 6.4.6 12.9.1 19.9.1v11.9c-15.2 4.9-33.3.5-42.1-10.4-3.8-4.7-17.3-34.7 11.5-47.4 39-11.4 45.3 22.4 43.3 33.1zm-14.2-12.7c-1.7-8.1-8.8-12.9-17.9-12.3-7.6.5-14 5.8-14.5 12.3z" :fill="`url(#${uid}-c)`"/><path d="m195.5 320.2c0 10.5-.2 20 .1 29.6.2 5.8 4.4 8.4 13.2 8.6v10.5c-13.8 3.9-26.2-4.5-26.4-18-.2-18.7-.1-43.9-.1-62.6h14.1l-.3 18.5 12.7-.1v13.4h-13.3z" :fill="`url(#${uid}-d)`"/><path d="m249.6 307.3c-17.2 0-31.1 13.9-31.1 31.1s13.9 31.1 31.1 31.1h31.1v-31.1c0-17.2-13.9-31.1-31.1-31.1zm18.6 49.7h-18.5c-10.2 0-18.5-8.3-18.5-18.5s8.3-18.5 18.5-18.5 18.5 8.3 18.5 18.5z" :fill="`url(#${uid}-e)`"/><path d="m296.4 288.3h13v79.6h-13z" :fill="`url(#${uid}-f)`"/><path d="m354.1 307.3c-17.2 0-31.1 13.9-31.1 31.1s13.9 31.1 31.1 31.1h31.1v-31.1c0-17.2-13.9-31.1-31.1-31.1zm18.6 49.7h-18.5c-10.2 0-18.5-8.3-18.5-18.5s8.3-18.5 18.5-18.5 18.5 8.3 18.5 18.5z" :fill="`url(#${uid}-g)`"/><path d="m442.2 367.7c0-12.3.2-23.6 0-34.9-.2-3.4-3.6-13.8-14.1-13.4-10.3-.3-14.4 10-14.3 12.7.1 10.2.5 35.1.5 35.1l-13.6.1s-.3-25.7.2-36.2c.6-14.1 12.7-25 27.5-25 14.7 0 26.2 10.4 26.7 24.9.4 10.4.5 36.3.5 36.3z" :fill="`url(#${uid}-h)`"/><path d="m501.9 307.2c6.8 0 13.1 2.2 18.2 5.9v-24.8h13.2v81.1h-31.4c-17.2 0-31.1-13.9-31.1-31.1s13.9-31.1 31.1-31.1zm0 49.3h18.2v-18.2c0-10.1-8.2-18.2-18.2-18.2-10.1 0-18.2 8.2-18.2 18.2 0 10.1 8.1 18.2 18.2 18.2z" :fill="`url(#${uid}-i)`"/><path d="m309.2 180.6h-24v-24c0-12.6 10.2-24.1 22.8-25 14.8-1 27.1 11.3 26.1 26.1-.8 12.7-12.3 22.9-24.9 22.9zm-50.7-48.9c-14.8-1-27.1 11.3-26.1 26.1.8 12.6 12.4 22.8 25 22.8h23.9v-24c0-12.6-10.3-24.1-22.8-24.9zm50.7 51.9h-24v23.9c0 12.6 10.2 24.1 22.8 25 14.8 1 27.1-11.3 26.1-26.1-.8-12.6-12.3-22.8-24.9-22.8zm-52.4 0c-14 0-25.3 11.8-24.4 26 .8 12.2 10.7 22.1 22.9 22.9 14.2.9 26-10.4 26-24.4v-24.5z" :fill="`url(#${uid}-j)`"/><path d="m281.7 183.8h3.6v18.5h-3.6z" :fill="`url(#${uid}-k)`"/></svg>
   </router-link>
 </template>
 
 <script lang="ts" setup>
+import { useId } from "vue";
 import { BaseLogoEnum } from "../enums/BaseLogoEnum";
 
+// Per-instance prefix for the SVG gradient ids. With fixed ids, every logo on
+// the page pointed at the FIRST logo's gradients, so when that one was hidden
+// (e.g. the sidebar's mobile top bar on desktop) the visible logos lost their fill.
+const uid = `logo-${useId()}`;
+
 const props = defineProps({
   size: {
     type: String,

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/BaseSearchSelect.test.ts

@@ -0,0 +1,117 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import BaseSearchSelect from './BaseSearchSelect.vue'
+import type { DropdownOption } from '../types/dropdown'
+
+const options: DropdownOption[] = [
+  { value: 1, label: 'Alice' },
+  { value: 2, label: 'Bob' },
+  { value: 3, label: 'Carol', disabled: true },
+]
+
+let wrapper: VueWrapper | undefined
+afterEach(() => wrapper?.unmount())
+
+function mountIt(props: Record<string, unknown> = {}) {
+  wrapper = mount(BaseSearchSelect, { props: { options, ...props }, attachTo: document.body })
+  return wrapper
+}
+
+describe('BaseSearchSelect', () => {
+  it('shows the placeholder, or the selected label in single mode', async () => {
+    const w = mountIt({ placeholder: 'Select User' })
+    expect(w.find('input').attributes('placeholder')).toBe('Select User')
+    await w.setProps({ modelValue: 2 })
+    expect(w.find('input').attributes('placeholder')).toBe('Bob')
+  })
+
+  it('opens on focus and filters options by the typed text', async () => {
+    const w = mountIt()
+    const input = w.find('input')
+    await input.trigger('focus')
+    expect(w.findAll('[role=option]')).toHaveLength(3)
+    await input.setValue('ali')
+    expect(w.findAll('[role=option]').map((o) => o.text())).toEqual(['Alice'])
+  })
+
+  it('shows a no-results row when nothing matches', async () => {
+    const w = mountIt({ noResultsText: 'Nothing.' })
+    await w.find('input').trigger('focus')
+    await w.find('input').setValue('zzz')
+    expect(w.find('[role=listbox]').text()).toBe('Nothing.')
+  })
+
+  it('emits the picked value and closes in single mode', async () => {
+    const w = mountIt()
+    await w.find('input').trigger('focus')
+    await w.findAll('[role=option]')[1].trigger('click')
+    expect(w.emitted('update:modelValue')).toEqual([[2]])
+    expect(w.find('[role=listbox]').exists()).toBe(false)
+  })
+
+  it('ignores disabled options', async () => {
+    const w = mountIt()
+    await w.find('input').trigger('focus')
+    await w.findAll('[role=option]')[2].trigger('click')
+    expect(w.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('toggles values and stays open in multiple mode', async () => {
+    const w = mountIt({ multiple: true, modelValue: [1] })
+    await w.find('input').trigger('focus')
+    await w.findAll('[role=option]')[1].trigger('click')
+    expect(w.emitted('update:modelValue')?.[0]).toEqual([[1, 2]])
+    await w.findAll('[role=option]')[0].trigger('click')
+    expect(w.emitted('update:modelValue')?.[1]).toEqual([[]])
+    expect(w.find('[role=listbox]').exists()).toBe(true)
+  })
+
+  it('renders chips for selected values and removes one on ×', async () => {
+    const w = mountIt({ multiple: true, modelValue: [1, 2] })
+    const remove = w.find('[aria-label="Remove Alice"]')
+    expect(remove.exists()).toBe(true)
+    await remove.trigger('click')
+    expect(w.emitted('update:modelValue')).toEqual([[[2]]])
+  })
+
+  it('removes the last chip on Backspace with an empty search', async () => {
+    const w = mountIt({ multiple: true, modelValue: [1, 2] })
+    await w.find('input').trigger('keydown', { key: 'Backspace' })
+    expect(w.emitted('update:modelValue')).toEqual([[[1]]])
+  })
+
+  it('picks with the keyboard, skipping disabled rows', async () => {
+    const w = mountIt()
+    const input = w.find('input')
+    await input.trigger('keydown', { key: 'ArrowDown' }) // opens, Alice active
+    await input.trigger('keydown', { key: 'ArrowDown' }) // Bob
+    await input.trigger('keydown', { key: 'ArrowDown' }) // Carol disabled → wraps to Alice
+    await input.trigger('keydown', { key: 'Enter' })
+    expect(w.emitted('update:modelValue')).toEqual([[1]])
+  })
+
+  it('clears to null (single) or [] (multiple)', async () => {
+    const single = mountIt({ modelValue: 1 })
+    await single.find('[aria-label="Clear selection"]').trigger('click')
+    expect(single.emitted('update:modelValue')).toEqual([[null]])
+    single.unmount()
+
+    const multi = mountIt({ multiple: true, modelValue: [1] })
+    await multi.find('[aria-label="Clear selection"]').trigger('click')
+    expect(multi.emitted('update:modelValue')).toEqual([[[]]])
+  })
+
+  it('closes on Escape and on an outside click', async () => {
+    const w = mountIt()
+    await w.find('input').trigger('focus')
+    await w.find('input').trigger('keydown', { key: 'Escape' })
+    expect(w.find('[role=listbox]').exists()).toBe(false)
+
+    await w.find('input').trigger('blur')
+    await w.find('input').trigger('focus')
+    expect(w.find('[role=listbox]').exists()).toBe(true)
+    document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+    await w.vm.$nextTick()
+    expect(w.find('[role=listbox]').exists()).toBe(false)
+  })
+})

package/src/components/BaseSearchSelect.vue

@@ -0,0 +1,318 @@
+<template>
+  <!--
+    Searchable select ("combobox"). Type to filter the options, pick with the
+    mouse or ArrowUp/ArrowDown + Enter. `multiple` turns it into a tag picker:
+    picked options show as removable chips and the menu stays open so several
+    can be picked in a row (Backspace on an empty search removes the last one).
+
+    Options are data ({ value, label, title?, disabled? } — the same shape as
+    BaseDropdown), and the field skin matches BaseInput/BaseSelect so it can sit
+    in the same filter row. Escape and an outside click close the menu.
+  -->
+  <div ref="rootEl" :class="block ? 'relative w-full' : 'relative inline-block min-w-48'">
+    <div
+      class="flex min-h-[38px] items-center gap-1.5 rounded-lg border bg-white px-3 py-1.5 text-sm transition-colors dark:bg-slate-900"
+      :class="[
+        open
+          ? 'border-emerald-500 ring-2 ring-emerald-500/30'
+          : 'border-slate-300 hover:border-slate-400 dark:border-slate-600 dark:hover:border-slate-500',
+        disabled ? 'cursor-not-allowed opacity-60' : 'cursor-text',
+      ]"
+      @mousedown="onControlMouseDown"
+    >
+      <div class="flex min-w-0 flex-1 flex-wrap items-center gap-1">
+        <span
+          v-for="opt in selectedOptions"
+          v-show="multiple"
+          :key="String(opt.value)"
+          class="inline-flex max-w-full items-center gap-1 rounded-md bg-emerald-50 py-0.5 pl-2 pr-1 text-xs font-medium text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
+        >
+          <span class="truncate">{{ opt.label }}</span>
+          <button
+            type="button"
+            class="rounded p-0.5 hover:bg-emerald-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 dark:hover:bg-emerald-500/25"
+            :aria-label="`Remove ${opt.label}`"
+            :disabled="disabled"
+            @mousedown.stop.prevent
+            @click.stop="remove(opt)"
+          >
+            <XMarkIcon class="h-3 w-3" aria-hidden="true" />
+          </button>
+        </span>
+        <input
+          ref="inputEl"
+          v-model="query"
+          type="text"
+          role="combobox"
+          autocomplete="off"
+          :disabled="disabled"
+          :readonly="!searchable"
+          :aria-label="ariaLabel || placeholder"
+          aria-autocomplete="list"
+          :aria-expanded="open"
+          :aria-controls="listId"
+          :aria-activedescendant="open && activeIndex >= 0 ? `${listId}-${activeIndex}` : undefined"
+          :placeholder="inputPlaceholder"
+          class="min-w-16 flex-1 border-0 bg-transparent p-0 py-0.5 text-sm text-slate-900 outline-none focus:ring-0 dark:text-slate-100 disabled:cursor-not-allowed"
+          :class="hasSingleValue
+            ? 'placeholder:text-slate-900 dark:placeholder:text-slate-100'
+            : 'placeholder:text-slate-400 dark:placeholder:text-slate-500'"
+          @focus="openMenu"
+          @input="openMenu"
+          @keydown="onKeydown"
+        />
+      </div>
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="shrink-0 rounded p-0.5 text-slate-400 hover:text-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 dark:hover:text-slate-200"
+        aria-label="Clear selection"
+        @mousedown.stop.prevent
+        @click.stop="clear"
+      >
+        <XMarkIcon class="h-4 w-4" aria-hidden="true" />
+      </button>
+      <ChevronDownIcon
+        class="h-4 w-4 shrink-0 text-slate-500 transition-transform dark:text-slate-400"
+        :class="open ? 'rotate-180' : ''"
+        aria-hidden="true"
+      />
+    </div>
+
+    <ul
+      v-if="open"
+      :id="listId"
+      role="listbox"
+      :aria-multiselectable="multiple || undefined"
+      class="absolute z-30 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-slate-200 bg-white py-1 shadow-lg dark:border-slate-700 dark:bg-slate-900"
+    >
+      <li
+        v-for="(opt, i) in filtered"
+        :id="`${listId}-${i}`"
+        :key="String(opt.value)"
+        role="option"
+        :aria-selected="isSelected(opt)"
+        :aria-disabled="opt.disabled || undefined"
+        :title="opt.title"
+        class="flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-left text-sm"
+        :class="rowClass(opt, i)"
+        @mousedown.prevent
+        @mouseenter="activeIndex = i"
+        @click="pick(opt)"
+      >
+        <span class="truncate">{{ opt.label }}</span>
+        <CheckIcon v-if="isSelected(opt)" class="h-4 w-4 shrink-0" aria-hidden="true" />
+      </li>
+      <li v-if="filtered.length === 0" class="px-3 py-2 text-sm text-slate-500 dark:text-slate-400">
+        {{ options.length === 0 ? emptyText : noResultsText }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'
+import { CheckIcon, ChevronDownIcon, XMarkIcon } from '@heroicons/vue/24/outline'
+import type { DropdownOption } from '../types/dropdown'
+
+type Value = string | number
+
+interface Props {
+  options: readonly DropdownOption[]
+  /** Selected value (single) or values (`multiple`). */
+  modelValue?: Value | null | readonly Value[]
+  /** Pick several options, shown as removable chips. */
+  multiple?: boolean
+  placeholder?: string
+  /** Allow typing to filter. False makes it a plain (non-typing) picker. */
+  searchable?: boolean
+  /** Show the clear (×) button while something is selected. */
+  clearable?: boolean
+  /** Full-width (w-full). Set false for an inline field. */
+  block?: boolean
+  disabled?: boolean
+  /** Accessible name when there is no visible label. */
+  ariaLabel?: string
+  /** Shown when the search matches nothing. */
+  noResultsText?: string
+  /** Shown when there are no options at all. */
+  emptyText?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  multiple: false,
+  placeholder: 'Select',
+  searchable: true,
+  clearable: true,
+  block: true,
+  disabled: false,
+  ariaLabel: '',
+  noResultsText: 'No matches.',
+  emptyText: 'No options.',
+})
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: 'update:modelValue', value: any): void
+}>()
+
+const rootEl = ref<HTMLElement | null>(null)
+const inputEl = ref<HTMLInputElement | null>(null)
+const open = ref(false)
+const query = ref('')
+const activeIndex = ref(-1)
+const listId = `search-select-${useId()}`
+
+const selectedValues = computed<Value[]>(() => {
+  const v = props.modelValue
+  if (Array.isArray(v)) return [...v]
+  return v === null || v === undefined || v === '' ? [] : [v as Value]
+})
+
+const selectedOptions = computed(() =>
+  selectedValues.value
+    .map((v) => props.options.find((o) => o.value === v))
+    .filter((o): o is DropdownOption => !!o),
+)
+
+const hasValue = computed(() => selectedValues.value.length > 0)
+const hasSingleValue = computed(() => !props.multiple && selectedOptions.value.length > 0)
+
+// Single mode shows the picked label as the input's placeholder, so typing
+// starts a fresh search while the current choice stays visible until then.
+const inputPlaceholder = computed(() => {
+  if (hasSingleValue.value) return selectedOptions.value[0].label
+  if (props.multiple && hasValue.value) return ''
+  return props.placeholder
+})
+
+const filtered = computed(() => {
+  const q = query.value.trim().toLowerCase()
+  return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : [...props.options]
+})
+
+watch(filtered, (list) => {
+  activeIndex.value = list.findIndex((o) => !o.disabled)
+})
+
+function isSelected(opt: DropdownOption): boolean {
+  return selectedValues.value.includes(opt.value)
+}
+
+function rowClass(opt: DropdownOption, i: number): string {
+  if (opt.disabled) return 'cursor-not-allowed text-slate-400 dark:text-slate-600'
+  if (isSelected(opt)) {
+    return i === activeIndex.value
+      ? 'bg-emerald-600 text-white'
+      : 'bg-emerald-500 text-white'
+  }
+  return i === activeIndex.value
+    ? 'bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-100'
+    : 'text-slate-700 dark:text-slate-200'
+}
+
+function openMenu() {
+  if (props.disabled || open.value) return
+  open.value = true
+  activeIndex.value = filtered.value.findIndex((o) => !o.disabled)
+}
+
+function closeMenu() {
+  open.value = false
+  query.value = ''
+}
+
+function onControlMouseDown(e: MouseEvent) {
+  if (props.disabled) return
+  // Keep focus in the input; toggle the menu when clicking the chrome.
+  if (e.target !== inputEl.value) e.preventDefault()
+  if (open.value && e.target !== inputEl.value) {
+    closeMenu()
+  } else {
+    inputEl.value?.focus()
+    openMenu()
+  }
+}
+
+function pick(opt: DropdownOption) {
+  if (opt.disabled) return
+  if (props.multiple) {
+    const next = isSelected(opt)
+      ? selectedValues.value.filter((v) => v !== opt.value)
+      : [...selectedValues.value, opt.value]
+    emit('update:modelValue', next)
+    query.value = ''
+    nextTick(() => inputEl.value?.focus())
+  } else {
+    emit('update:modelValue', opt.value)
+    closeMenu()
+    inputEl.value?.blur()
+  }
+}
+
+function remove(opt: DropdownOption) {
+  emit('update:modelValue', selectedValues.value.filter((v) => v !== opt.value))
+}
+
+function clear() {
+  emit('update:modelValue', props.multiple ? [] : null)
+  query.value = ''
+}
+
+function move(step: 1 | -1) {
+  const list = filtered.value
+  if (list.length === 0) return
+  let i = activeIndex.value
+  for (let n = 0; n < list.length; n++) {
+    i = (i + step + list.length) % list.length
+    if (!list[i].disabled) break
+  }
+  activeIndex.value = i
+  nextTick(() => document.getElementById(`${listId}-${i}`)?.scrollIntoView?.({ block: 'nearest' }))
+}
+
+function onKeydown(e: KeyboardEvent) {
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault()
+      if (!open.value) openMenu()
+      else move(1)
+      break
+    case 'ArrowUp':
+      e.preventDefault()
+      if (!open.value) openMenu()
+      else move(-1)
+      break
+    case 'Enter':
+      if (open.value && activeIndex.value >= 0) {
+        e.preventDefault()
+        pick(filtered.value[activeIndex.value])
+      }
+      break
+    case 'Escape':
+      if (open.value) {
+        e.preventDefault()
+        closeMenu()
+      }
+      break
+    case 'Tab':
+      closeMenu()
+      break
+    case 'Backspace':
+      if (props.multiple && query.value === '' && selectedOptions.value.length) {
+        remove(selectedOptions.value[selectedOptions.value.length - 1])
+      }
+      break
+  }
+}
+
+function onDocumentMouseDown(e: MouseEvent) {
+  if (open.value && rootEl.value && !rootEl.value.contains(e.target as Node)) {
+    closeMenu()
+  }
+}
+
+onMounted(() => document.addEventListener('mousedown', onDocumentMouseDown))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocumentMouseDown))
+</script>

package/src/components/BaseSelect.test.ts

@@ -11,15 +11,15 @@ describe('BaseSelect', () => {
     const wrapper = mount(BaseSelect, { slots })
     const select = wrapper.find('select')
     expect(select.classes()).toEqual(
-      expect.arrayContaining(['rounded', 'border', 'w-full', 'px-2', 'py-1.5', 'text-sm']),
+      expect.arrayContaining(['rounded-lg', 'border', 'w-full', 'pl-2.5', 'py-1.5', 'text-sm', 'appearance-none', 'bg-none']),
     )
   })
 
   it('supports md size and inline (non-block) layout', () => {
     const wrapper = mount(BaseSelect, { props: { size: 'md', block: false }, slots })
     const select = wrapper.find('select')
-    expect(select.classes()).toEqual(expect.arrayContaining(['px-3', 'py-2']))
-    expect(select.classes()).not.toContain('w-full')
+    expect(select.classes()).toEqual(expect.arrayContaining(['pl-3', 'py-2']))
+    expect(wrapper.classes()).toContain('inline-block')
   })
 
   it('reflects modelValue and emits the selected value on change', async () => {

package/src/components/BaseSelect.vue

@@ -1,46 +1,62 @@
-<template>
-  <!--
-    Themed select sharing BaseInput's field skin. Options come from the
-    default slot so callers keep full control of <option> rendering (values,
-    titles, disabled entries). Attrs (id, disabled, extra classes) fall
-    through. Same `dark:`-variant note as BaseInput.
-  -->
-  <select
-    :value="modelValue"
-    class="rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:border-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
-    :class="[block ? 'w-full' : '', size === 'md' ? 'px-3 py-2' : 'px-2 py-1.5']"
-    @change="onChange"
-  >
-    <slot />
-  </select>
-</template>
-
-<script setup lang="ts">
-// String-valued only — a DOM select always yields strings; use v-model.number
-// semantics in the owner if needed. The update:modelValue payload is `any`
-// (not generic: vite-plugin-dts flattens SFC generics out of the emitted
-// declarations) so `v-model` on a union-typed ref ('7D' | '30D' | …)
-// type-checks; the actual payload is always the selected option's string.
-interface Props {
-  modelValue?: string | null
-  /** 'sm' = px-2 py-1.5 (default, the usual select height); 'md' = px-3 py-2. */
-  size?: 'sm' | 'md'
-  /** Full-width (w-full). Set false for inline selects. */
-  block?: boolean
-}
-
-withDefaults(defineProps<Props>(), {
-  modelValue: undefined,
-  size: 'sm',
-  block: true,
-})
-
-const emit = defineEmits<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (e: 'update:modelValue', value: any): void
-}>()
-
-function onChange(e: Event) {
-  emit('update:modelValue', (e.target as HTMLSelectElement).value)
-}
-</script>
+<template>
+  <div class="relative" :class="block ? 'w-full' : 'inline-block'">
+    <select
+      v-bind="$attrs"
+      :value="modelValue"
+      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"
+    >
+      <slot />
+    </select>
+    <ChevronDownIcon
+      class="pointer-events-none absolute top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500 dark:text-slate-400"
+      :class="size === 'md' ? 'right-3' : 'right-2.5'"
+      aria-hidden="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+/*
+ * Themed select sharing BaseInput's field skin. Options come from the
+ * default slot so callers keep full control of <option> rendering (values,
+ * titles, disabled entries). Attrs (id, disabled, extra classes) fall
+ * through. Same `dark:`-variant note as BaseInput.
+ *
+ */
+import { ChevronDownIcon } from '@heroicons/vue/24/outline'
+
+// Attrs (id, name, disabled, extra classes) go to the <select>, not the
+// 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
+// semantics in the owner if needed. The update:modelValue payload is `any`
+// (not generic: vite-plugin-dts flattens SFC generics out of the emitted
+// declarations) so `v-model` on a union-typed ref ('7D' | '30D' | …)
+// type-checks; the actual payload is always the selected option's string.
+interface Props {
+  modelValue?: string | null
+  /** 'sm' = px-2 py-1.5 (default, the usual select height); 'md' = px-3 py-2. */
+  size?: 'sm' | 'md'
+  /** Full-width (w-full). Set false for inline selects. */
+  block?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  modelValue: undefined,
+  size: 'sm',
+  block: true,
+})
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: 'update:modelValue', value: any): void
+}>()
+
+function onChange(e: Event) {
+  emit('update:modelValue', (e.target as HTMLSelectElement).value)
+}
+</script>