@tekkare/romulus 0.1.100 → 0.1.102

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.99",
+  "version": "0.1.101",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/ExportButton.vue

@@ -0,0 +1,226 @@
+<!--
+  RmExportButton - exporter le contenu d'une carte, en un clic.
+
+  Le pendant court de RmExportPanel. Le panneau pose quatre questions depuis
+  le rail parce qu'il exporte un ecran entier ; ce bouton n'en pose aucune
+  parce qu'il exporte une carte, dont le lecteur voit deja ce qu'elle
+  contient. Poser un assistant sur un resultat de liste demanderait de choisir
+  ce qui n'a qu'une reponse.
+
+  Il ne genere rien lui-meme : le classeur sort de `useRmExport`, le meme que
+  le panneau. Page de garde « OIP Healthcare par Tekkare », en-tetes, plafond
+  de 32 767 caracteres par cellule : un export de carte et un export de page
+  se presentent donc a l'identique devant un client.
+
+  Le garde-fou du plafond est garde d'Auriga : au-dela de `limit` lignes, une
+  modale dit combien la selection contient et combien partiront, plutot que de
+  livrer un fichier tronque en silence. Elle ne parait que si la page passe
+  `total`, le seul a connaitre le compte reel : `sheets` ne porte que les
+  lignes deja chargees.
+
+  ORIGINE AURIGA
+  --------------
+  Remplace `<ArgExportXLSX>` (`argExportXLSX.vue`), et le wrapper applicatif
+  `AppExportXLSX` qui lui greffait le suivi Posthog.
+
+  | Auriga             | Romulus      | Note                                   |
+  |--------------------|--------------|----------------------------------------|
+  | `name`             | `label`      | libelle du bouton, pas le nom du fichier |
+  | `export-name`      | `file-name`  | sans extension ni date, ajoutees ici     |
+  | `subtitle`         | `subtitle`   | va sur la page de garde                  |
+  | `tabs: Tab[]`      | `sheets: RmExportSheet[]` | meme forme : `{ name, schema, data }`, et `schema` garde `{ column, value }` |
+  | `kpi`              | `kpi`        | inchange                                 |
+  | `sources`          | `sources`    | `{ name, date }`                         |
+  | `limit`            | `limit`      | inchange                                 |
+  | `actualAmount`     | `total`      | `null` devient absent                    |
+  | `style`            | `variant`    | les noms de RmButton                     |
+  | `beforeExport`     | `@before`    | evenement plutot que prop fonction ; attendu s'il rend une promesse |
+  | `lang`             | `lang`       | `es` n'est pas repris, personne ne l'appelait |
+  | `posthog-key` / `posthog-host` / `posthog-properties` | - | le suivi ne regarde pas un composant de rendu : la page l'accroche a `@export` |
+  | `cut`              | -            | jamais passe par aucun appelant          |
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRmExport } from '../composables/useRmExport'
+import type { RmExportKpi, RmExportSheet, RmExportSource } from '../utils/export'
+
+const props = withDefaults(
+  defineProps<{
+    /** Nom du fichier, sans extension : la date et `.xlsx` sont ajoutees ici. */
+    fileName?: string
+    /** Libelle du bouton. */
+    label?: string
+    /** Titre du document, sur la page de garde. Absent : le libelle sert. */
+    title?: string
+    subtitle?: string
+    /** Les onglets du classeur. Un seul dans le cas courant. */
+    sheets?: RmExportSheet[]
+    kpi?: RmExportKpi[]
+    sources?: RmExportSource[]
+    /** Lignes ecrites au plus, par onglet. */
+    limit?: number
+    /**
+     * Lignes que la selection contient vraiment, quand elle depasse ce qui est
+     * charge. Au-dela de `limit`, elle declenche la confirmation. Absente,
+     * aucune confirmation : le composant ne peut pas deviner qu'il tronque.
+     */
+    total?: number
+    variant?: string
+    size?: 'sm' | 'md' | 'lg'
+    lang?: 'fr' | 'en'
+  }>(),
+  {
+    fileName: 'export-tekkare',
+    label: '',
+    title: '',
+    subtitle: '',
+    sheets: () => [],
+    kpi: () => [],
+    sources: () => [],
+    limit: 1000,
+    total: undefined,
+    variant: 'secondary',
+    size: 'sm',
+    lang: 'fr',
+  },
+)
+
+const emit = defineEmits<{
+  /**
+   * Emis avant de construire le classeur, pour la page qui doit d'abord aller
+   * chercher les lignes. Rendre une promesse par `until` la fait attendre.
+   */
+  before: [hold: (promise: Promise<unknown>) => void]
+  /** Emis apres l'ecriture, avec le nom du fichier et le nombre de lignes. */
+  export: [result: { fileName: string, rows: number }]
+  /** Emis quand l'ecriture echoue. */
+  error: [error: unknown]
+}>()
+
+const WORDS = {
+  fr: {
+    label: 'Exporter',
+    limitTitle: 'Limite de téléchargement atteinte',
+    cancel: 'Annuler',
+    confirm: 'Continuer le téléchargement',
+    body: (total: number, limit: number) =>
+      `Votre sélection contient ${total} éléments. Pour des raisons d’optimisation, seuls les ${limit} premiers seront téléchargés.`,
+  },
+  en: {
+    label: 'Export',
+    limitTitle: 'Download limit reached',
+    cancel: 'Cancel',
+    confirm: 'Continue the download',
+    body: (total: number, limit: number) =>
+      `Your selection contains ${total} items. For optimisation reasons, only the first ${limit} will be downloaded.`,
+  },
+} as const
+
+const t = computed(() => WORDS[props.lang] ?? WORDS.fr)
+const buttonLabel = computed(() => props.label || t.value.label)
+
+const busy = ref(false)
+const confirming = ref(false)
+
+/** Le fichier porte sa date : deux exports du meme ecran ne s'ecrasent pas. */
+const stampedName = computed(() => {
+  const today = new Date().toISOString().slice(0, 10)
+  return `${props.fileName}-from_${today}`
+})
+
+const overLimit = computed(
+  () => props.total !== undefined && props.total > props.limit,
+)
+
+async function start() {
+  if (overLimit.value) {
+    confirming.value = true
+    return
+  }
+  await write()
+}
+
+async function write() {
+  busy.value = true
+  try {
+    // La page peut avoir a charger ses lignes : elle retient le bouton en
+    // passant sa promesse, plutot que le composant ne prenne une prop fonction
+    // que la moitie des appelants laissent vide.
+    const held: Promise<unknown>[] = []
+    emit('before', promise => held.push(promise))
+    if (held.length) await Promise.all(held)
+
+    const { run } = useRmExport()
+    const result = await run(
+      {
+        format: 'xlsx',
+        range: 'all',
+        sections: [],
+        columns: [],
+        options: [],
+        fileName: stampedName.value,
+        layout: '',
+        schedule: 'once',
+        frequency: '',
+        email: false,
+      },
+      {
+        title: props.title || buttonLabel.value,
+        subtitle: props.subtitle,
+        kpi: props.kpi,
+        sources: props.sources,
+        sheets: props.sheets,
+        limit: props.limit,
+      },
+      props.lang,
+    )
+    emit('export', { fileName: result.fileName, rows: result.rows })
+  }
+  catch (error) {
+    emit('error', error)
+  }
+  finally {
+    busy.value = false
+    confirming.value = false
+  }
+}
+</script>
+
+<template>
+  <RmButton
+    :variant="variant"
+    :size="size"
+    prefix-icon="FileXls"
+    :loading="busy"
+    @click="start"
+  >
+    {{ buttonLabel }}
+  </RmButton>
+
+  <RmModal
+    v-model="confirming"
+    size="sm"
+    mode="free"
+    :label="t.limitTitle"
+    :close-label="t.cancel"
+  >
+    <template #header>
+      <h2 class="rm-export-button__title">{{ t.limitTitle }}</h2>
+    </template>
+
+    <p class="rm-export-button__body">{{ t.body(total ?? 0, limit) }}</p>
+
+    <template #footer>
+      <RmButton variant="secondary" @click="confirming = false">
+        {{ t.cancel }}
+      </RmButton>
+      <RmButton variant="primary" :loading="busy" @click="write">
+        {{ t.confirm }}
+      </RmButton>
+    </template>
+  </RmModal>
+</template>
+
+<style scoped>
+.rm-export-button__title{color:var(--text-primary);font-size:var(--font-16);font-weight:700;margin:0}.rm-export-button__body{color:var(--text-secondary);font-size:var(--font-14);line-height:1.6;margin:0}
+</style>

package/dist/runtime/components/SearchTags.vue

@@ -0,0 +1,492 @@
+<!--
+  RmSearchTags - recherche a plusieurs termes, chacun relie aux precedents par
+  ET, OU ou SAUF.
+
+  La barre n'accumule pas du texte mais des etiquettes : chaque terme valide
+  devient une pastille portant son operateur, et l'appelant recoit la liste.
+  C'est ce qui la separe de RmSearchBar, qui ne porte qu'une chaine, et de
+  RmAdvancedSearch, qui pose les memes operateurs en lignes dans un panneau.
+  Les trois partagent le meme vocabulaire (`and`, `or`, `not`) : une recherche
+  construite dans l'un se relit dans l'autre.
+
+  L'operateur du prochain terme se choisit avant de taper, dans le panneau qui
+  s'ouvre a la saisie, ou en prefixant directement (`+`, `/`, `!`). Celui d'une
+  etiquette posee se change en cliquant son operateur.
+
+  Le composant ne trie ni ne filtre les suggestions : il rend ce qu'on lui
+  donne, dans l'ordre donne. La pertinence appartient a qui interroge la
+  source, seul a savoir sur quels champs elle porte.
+
+  ORIGINE AURIGA
+  --------------
+  Remplace `<arg-advanced-search-bar>` (`argAdvancedSearchBar.vue`).
+
+  | Auriga               | Romulus            | Note                          |
+  |----------------------|--------------------|-------------------------------|
+  | `v-model:Value`      | `v-model`          | meme charge : `[{ type, value }]`, pas la saisie brute |
+  | `default-inputs`     | valeur du `v-model`| plus de prop separee ; poser le modele suffit |
+  | `place-holder-value` | `placeholder`      |                               |
+  | `suggestions`        | `suggestions`      | `{text}` devient `{label}`, `icon` garde son nom |
+  | `loading-suggs`      | `loading`          |                               |
+  | `highlight-input`    | `highlight-match`  | surligne la saisie dans le libelle ; le `html` en `v-html` cede la place au slot `#suggestion` |
+  | `fuzzy-threshold`    | -                  | Auriga refiltrait par Fuse.js des suggestions deja filtrees par la source |
+  | `custom-shortcuts`   | -                  | jamais passe par aucun appelant |
+  | `search-bar-id`      | `input-id`         | garde pour les tests et les libelles |
+  | `lang`               | `lang`             | `es` n'est pas repris          |
+  | `@onTyping`          | `@typing`          |                               |
+  | `@onClose`           | -                  | n'etait emis nulle part        |
+  | `posthog-*`          | -                  | le suivi s'accroche a `@update:modelValue` |
+
+  Le panneau d'aide au clavier d'Auriga, en anglais seulement et fige dans le
+  composant, devient le slot `#help` : son contenu depend de l'application.
+-->
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+export type RmSearchTagOperator = 'and' | 'or' | 'not'
+
+/** Un terme de la recherche, et la facon dont il se lie aux precedents. */
+export interface RmSearchTag {
+  type: RmSearchTagOperator
+  value: string
+}
+
+export interface RmSearchTagSuggestion {
+  label: string
+  /** Icone Phosphor : elle dit de quel champ la valeur vient. */
+  icon?: string
+  /** Libelle secondaire, a droite (le champ, un decompte). */
+  meta?: string
+}
+
+const model = defineModel<RmSearchTag[]>({ default: () => [] })
+
+const props = withDefaults(
+  defineProps<{
+    placeholder?: string
+    /**
+     * Suggestions a proposer sous le champ. `undefined` n'ouvre aucune liste ;
+     * un tableau vide ouvre la liste sur « aucun resultat ».
+     */
+    suggestions?: RmSearchTagSuggestion[]
+    loading?: boolean
+    /** Surligne la saisie dans le libelle de chaque suggestion. */
+    highlightMatch?: boolean
+    /** Id du champ, pour un `<label>` externe ou un test. */
+    inputId?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  {
+    placeholder: '',
+    suggestions: undefined,
+    loading: false,
+    highlightMatch: false,
+    inputId: 'rm-search-tags',
+    lang: 'fr',
+  },
+)
+
+const emit = defineEmits<{
+  /** La saisie brute, a chaque frappe : de quoi aller chercher des suggestions. */
+  typing: [text: string]
+}>()
+
+const WORDS = {
+  fr: {
+    placeholder: 'Rechercher…',
+    options: 'Options de recherche',
+    operator: 'Opérateur',
+    keyword: 'terme',
+    help: 'Aide',
+    closeHelp: 'Fermer l’aide',
+    clear: 'Effacer la recherche',
+    remove: 'Retirer ce terme',
+    change: 'Changer l’opérateur',
+    loading: 'Recherche en cours…',
+    empty: 'Aucune suggestion',
+    and: { keyword: 'et', hint: 'ajoute le terme' },
+    or: { keyword: 'ou', hint: 'au moins un des termes' },
+    not: { keyword: 'sauf', hint: 'exclut le terme' },
+  },
+  en: {
+    placeholder: 'Search…',
+    options: 'Research options',
+    operator: 'Operator',
+    keyword: 'keyword',
+    help: 'Help',
+    closeHelp: 'Close help',
+    clear: 'Clear the search',
+    remove: 'Remove this term',
+    change: 'Change the operator',
+    loading: 'Searching…',
+    empty: 'No suggestion',
+    and: { keyword: 'and', hint: 'add the word' },
+    or: { keyword: 'or', hint: 'matches at least one word' },
+    not: { keyword: 'not', hint: 'exclude the word' },
+  },
+} as const
+
+const t = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+/** Les trois operateurs, et le prefixe qui les pose directement a la saisie. */
+const OPERATORS: { type: RmSearchTagOperator, symbol: string }[] = [
+  { type: 'and', symbol: '+' },
+  { type: 'or', symbol: '/' },
+  { type: 'not', symbol: '!' },
+]
+
+/**
+ * Ce qui ne fait pas partie d'un terme : espaces et prefixes en tete, en
+ * queue, ou colles a un separateur. Sans ce nettoyage, « + aspirine » et
+ * « aspirine » entrent comme deux termes differents et la source est
+ * interrogee deux fois pour le meme mot.
+ */
+const NOISE = /^[\s./!]+|[\s./!]+$/g
+
+const text = ref('')
+const nextType = ref<RmSearchTagOperator>('and')
+/**
+ * Le panneau d'operateurs et la liste de suggestions occupent la meme place
+ * sous le champ : ils ne s'ouvrent jamais ensemble. Le panneau sert avant de
+ * taper, la liste des qu'il y a de quoi chercher.
+ */
+const panelOpen = ref(false)
+const suggOpen = ref(false)
+const showHelp = ref(false)
+/** 0 = aucune suggestion visee ; 1..n = la n-ieme. */
+const cursor = ref(0)
+/** Etiquettes qui viennent d'etre refusees en double, le temps d'un clignotement. */
+const duplicates = ref<string[]>([])
+/** Etiquette dont l'operateur est en cours de changement. */
+const editing = ref<number | null>(null)
+
+const root = ref<HTMLElement | null>(null)
+const input = ref<HTMLInputElement | null>(null)
+
+const placeholder = computed(() => props.placeholder || t.value.placeholder)
+const listOpen = computed(
+  () => suggOpen.value && !panelOpen.value && props.suggestions !== undefined,
+)
+const items = computed(() => props.suggestions ?? [])
+const word = computed(() => t.value[nextType.value].keyword)
+
+/** La saisie sans son prefixe d'operateur : ce que la source doit chercher. */
+const query = computed(() => text.value.replace(/^[+/!]+/, '').trim())
+
+function labelOf(type: RmSearchTagOperator) {
+  return t.value[type].keyword
+}
+
+/** Le libelle decoupe autour de la saisie, pour la mettre en gras. */
+function parts(label: string) {
+  const q = query.value
+  if (!props.highlightMatch || !q) return [{ text: label, match: false }]
+  const at = label.toLowerCase().indexOf(q.toLowerCase())
+  if (at < 0) return [{ text: label, match: false }]
+  return [
+    { text: label.slice(0, at), match: false },
+    { text: label.slice(at, at + q.length), match: true },
+    { text: label.slice(at + q.length), match: false },
+  ].filter(part => part.text)
+}
+
+function onInput() {
+  // Taper ferme le panneau : le choix d'operateur est fait, la place revient
+  // aux suggestions.
+  panelOpen.value = false
+  suggOpen.value = true
+  cursor.value = 0
+  // Un prefixe tape a la main vaut selection dans le panneau.
+  const hit = OPERATORS.find(o => text.value.startsWith(o.symbol))
+  if (hit) nextType.value = hit.type
+  emit('typing', text.value)
+}
+
+function flashDuplicate(value: string) {
+  duplicates.value = [...duplicates.value, value]
+  setTimeout(() => {
+    duplicates.value = duplicates.value.filter(d => d !== value)
+  }, 1000)
+}
+
+/**
+ * Ajoute les termes a une liste, en sautant ceux qui y sont deja. La liste est
+ * passee et rendue plutot que `model` ecrit a chaque terme : `defineModel` ne
+ * repercute pas l'ecriture dans le meme tick, si bien qu'une boucle relisait
+ * l'etat d'avant et chaque terme effacait le precedent. Une seule virgule
+ * suffisait a n'en garder qu'un, et le controle de doublon portait sur une
+ * liste perimee.
+ */
+function collect(values: string[], type: RmSearchTagOperator, into: RmSearchTag[]) {
+  const out = [...into]
+  for (const value of values) {
+    const clean = value.replace(NOISE, '').trim()
+    if (!clean) continue
+    if (out.some(tag => tag.value === clean)) {
+      flashDuplicate(clean)
+      continue
+    }
+    out.push({ type, value: clean })
+  }
+  return out
+}
+
+/**
+ * Valide la saisie. La virgule separe plusieurs termes d'un coup : ils
+ * prennent tous le meme operateur, c'est la facon rapide de poser une liste.
+ */
+function commit() {
+  if (cursor.value > 0 && items.value[cursor.value - 1]) {
+    select(items.value[cursor.value - 1]!)
+    return
+  }
+  const raw = text.value.replace(/^[+/!]+/, '')
+  if (!raw.trim()) return
+  model.value = collect(raw.split(','), nextType.value, model.value)
+  reset()
+}
+
+function select(suggestion: RmSearchTagSuggestion) {
+  model.value = collect([suggestion.label], nextType.value, model.value)
+  reset()
+}
+
+function reset() {
+  text.value = ''
+  cursor.value = 0
+  suggOpen.value = false
+  panelOpen.value = false
+  input.value?.focus()
+}
+
+function removeTag(index: number) {
+  model.value = model.value.filter((_, i) => i !== index)
+  editing.value = null
+  input.value?.focus()
+}
+
+function setType(index: number, type: RmSearchTagOperator) {
+  model.value = model.value.map((tag, i) => (i === index ? { ...tag, type } : tag))
+  editing.value = null
+}
+
+function clearAll() {
+  model.value = []
+  text.value = ''
+  editing.value = null
+  input.value?.focus()
+}
+
+/**
+ * `Retour arriere` sur un champ vide retire le dernier terme : c'est le geste
+ * attendu d'une barre a etiquettes, et il evite d'aller viser une croix de
+ * douze pixels a la souris.
+ */
+function onBackspace(event: KeyboardEvent) {
+  if (text.value.length || !model.value.length) return
+  event.preventDefault()
+  removeTag(model.value.length - 1)
+}
+
+/** Les fleches parcourent la liste ouverte, sinon elles changent l'operateur. */
+function move(step: 1 | -1) {
+  if (listOpen.value && items.value.length) {
+    const next = cursor.value + step
+    cursor.value = next < 0
+      ? items.value.length
+      : next > items.value.length ? 0 : next
+    return
+  }
+  const at = OPERATORS.findIndex(o => o.type === nextType.value)
+  const to = (at + step + OPERATORS.length) % OPERATORS.length
+  nextType.value = OPERATORS[to]!.type
+}
+
+function onClickOutside(event: MouseEvent) {
+  if (root.value && !root.value.contains(event.target as Node)) {
+    suggOpen.value = false
+    panelOpen.value = false
+    editing.value = null
+    showHelp.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onClickOutside))
+onBeforeUnmount(() => document.removeEventListener('click', onClickOutside))
+
+defineExpose({
+  focus: () => nextTick(() => input.value?.focus()),
+})
+</script>
+
+<template>
+  <div ref="root" class="rm-search-tags">
+    <div class="rm-search-tags__field" :class="{ 'is-open': listOpen, 'is-panel': panelOpen }">
+      <RmIcon name="MagnifyingGlass" :size="20" color="var(--text-muted)" />
+
+      <!-- L'operateur du prochain terme, toujours visible : sans lui le
+           lecteur tape « aspirine » sans savoir s'il ajoute ou exclut. -->
+      <button
+        type="button"
+        class="rm-search-tags__operator"
+        :aria-label="t.operator"
+        :aria-expanded="panelOpen"
+        @click="panelOpen = !panelOpen; suggOpen = false"
+      >
+        {{ word }} :
+      </button>
+
+      <input
+        :id="inputId"
+        ref="input"
+        v-model="text"
+        class="rm-search-tags__input"
+        type="text"
+        autocomplete="off"
+        role="combobox"
+        aria-autocomplete="list"
+        :aria-expanded="listOpen"
+        :placeholder="placeholder"
+        @input="onInput"
+        @focus="suggOpen = true"
+        @keydown.enter.prevent="commit"
+        @keydown.down.prevent="move(1)"
+        @keydown.up.prevent="move(-1)"
+        @keydown.delete="onBackspace"
+        @keydown.esc="suggOpen = false"
+      >
+
+      <button
+        v-if="model.length || text"
+        type="button"
+        class="rm-search-tags__clear"
+        :aria-label="t.clear"
+        @click="clearAll"
+      >
+        <RmIcon name="XCircle" :size="20" color="var(--text-muted)" />
+      </button>
+    </div>
+
+    <!-- Suggestions -->
+    <div v-if="listOpen" class="rm-search-tags__list" role="listbox">
+      <p v-if="loading" class="rm-search-tags__note">{{ t.loading }}</p>
+      <p v-else-if="!items.length" class="rm-search-tags__note">{{ t.empty }}</p>
+      <button
+        v-for="(suggestion, index) in items"
+        v-else
+        :key="`${suggestion.label}-${index}`"
+        type="button"
+        class="rm-search-tags__option"
+        :class="{ 'is-active': cursor === index + 1 }"
+        role="option"
+        :aria-selected="cursor === index + 1"
+        @mousemove="cursor = 0"
+        @click="select(suggestion)"
+      >
+        <slot name="suggestion" :suggestion="suggestion" :query="query">
+          <RmIcon
+            v-if="suggestion.icon"
+            :name="suggestion.icon"
+            :size="14"
+            color="var(--text-muted)"
+          />
+          <span class="rm-search-tags__option-label">
+            <template v-for="(part, at) in parts(suggestion.label)" :key="at">
+              <mark v-if="part.match">{{ part.text }}</mark>
+              <template v-else>{{ part.text }}</template>
+            </template>
+          </span>
+          <span v-if="suggestion.meta" class="rm-search-tags__option-meta">
+            {{ suggestion.meta }}
+          </span>
+        </slot>
+      </button>
+    </div>
+
+    <!-- Choix de l'operateur du prochain terme -->
+    <div v-if="panelOpen" class="rm-search-tags__panel">
+      <div class="rm-search-tags__panel-head">
+        <p class="rm-search-tags__panel-title">{{ t.options }}</p>
+        <button
+          v-if="$slots.help"
+          type="button"
+          class="rm-search-tags__help-toggle"
+          :aria-label="showHelp ? t.closeHelp : t.help"
+          @click="showHelp = !showHelp"
+        >
+          <RmIcon name="Question" :size="16" color="var(--text-secondary)" />
+        </button>
+      </div>
+
+      <button
+        v-for="operator in OPERATORS"
+        :key="operator.type"
+        type="button"
+        class="rm-search-tags__choice"
+        :class="{ 'is-active': nextType === operator.type }"
+        @click="nextType = operator.type; panelOpen = false; input?.focus()"
+      >
+        <span class="rm-search-tags__choice-word">{{ labelOf(operator.type) }} :</span>
+        <span class="rm-search-tags__choice-hint">{{ t[operator.type].hint }}</span>
+        <span class="rm-search-tags__choice-symbol">{{ operator.symbol }}</span>
+      </button>
+
+      <div v-if="showHelp" class="rm-search-tags__help">
+        <slot name="help" />
+      </div>
+    </div>
+
+    <!-- Les termes poses -->
+    <div v-if="model.length" class="rm-search-tags__tags">
+      <span
+        v-for="(tag, index) in model"
+        :key="`${tag.value}-${index}`"
+        class="rm-search-tags__tag"
+        :class="{ 'is-duplicate': duplicates.includes(tag.value) }"
+      >
+        <button
+          type="button"
+          class="rm-search-tags__tag-type"
+          :aria-label="t.change"
+          @click="editing = editing === index ? null : index"
+        >
+          {{ labelOf(tag.type) }} :
+        </button>
+
+        <span class="rm-search-tags__tag-value">{{ tag.value }}</span>
+
+        <button
+          type="button"
+          class="rm-search-tags__tag-remove"
+          :aria-label="`${t.remove} : ${tag.value}`"
+          @click="removeTag(index)"
+        >
+          <RmIcon name="X" :size="12" color="currentColor" />
+        </button>
+
+        <span v-if="editing === index" class="rm-search-tags__tag-menu">
+          <button
+            v-for="operator in OPERATORS"
+            :key="operator.type"
+            type="button"
+            class="rm-search-tags__tag-choice"
+            :class="{ 'is-active': tag.type === operator.type }"
+            @click="setType(index, operator.type)"
+          >
+            {{ labelOf(operator.type) }}
+            <RmIcon
+              v-if="tag.type === operator.type"
+              name="Check"
+              :size="14"
+              color="var(--color-primary)"
+            />
+          </button>
+        </span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-search-tags{position:relative;width:100%}.rm-search-tags__field{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);display:flex;gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-search-tags__field:focus-within{border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.rm-search-tags__field.is-open,.rm-search-tags__field.is-panel{border-bottom-left-radius:0;border-bottom-right-radius:0}.rm-search-tags__operator{color:var(--color-primary);cursor:pointer;flex:none;font-size:var(--font-13);font-weight:600;padding:0}.rm-search-tags__input,.rm-search-tags__operator{background:none;border:none;font-family:var(--font-sans)}.rm-search-tags__input{color:var(--text-primary);flex:1;font-size:var(--font-14);min-width:0;outline:none}.rm-search-tags__clear{background:none;border:none;cursor:pointer;display:inline-flex;flex:none;padding:0}.rm-search-tags__list{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:0 0 var(--radius-lg) var(--radius-lg);border-top:none;box-shadow:var(--shadow-md);left:0;max-height:320px;overflow-y:auto;position:absolute;right:0;z-index:var(--z-sticky)}.rm-search-tags__note{color:var(--text-muted);font-size:var(--font-13);margin:0;padding:var(--space-12)}.rm-search-tags__option{align-items:center;background:none;border:none;color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-13);gap:var(--space-8);padding:var(--space-8) var(--space-12);text-align:left;width:100%}.rm-search-tags__option.is-active,.rm-search-tags__option:hover{background:var(--bg-hover)}.rm-search-tags__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-search-tags__option-label mark{background:none;color:var(--color-primary);font-weight:700}.rm-search-tags__option-meta{color:var(--text-muted);flex:none;font-size:var(--font-12)}.rm-search-tags__panel{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:0 0 var(--radius-lg) var(--radius-lg);border-top:none;box-shadow:var(--shadow-md);left:0;padding:var(--space-8);position:absolute;right:0;z-index:var(--z-sticky)}.rm-search-tags__panel-head{align-items:center;display:flex;justify-content:space-between;padding:var(--space-4) var(--space-8)}.rm-search-tags__panel-title{color:var(--text-muted);font-size:var(--font-11);font-weight:600;margin:0;text-transform:uppercase}.rm-search-tags__help-toggle{background:none;border:none;cursor:pointer;display:inline-flex;padding:0}.rm-search-tags__choice{align-items:center;background:none;border:none;border-radius:var(--radius-md);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-13);gap:var(--space-8);padding:var(--space-6) var(--space-8);text-align:left;width:100%}.rm-search-tags__choice.is-active,.rm-search-tags__choice:hover{background:var(--bg-hover)}.rm-search-tags__choice-word{color:var(--text-primary);font-weight:600}.rm-search-tags__choice-hint{color:var(--text-muted);flex:1;font-size:var(--font-12)}.rm-search-tags__choice-symbol{background:var(--bg-surface-3);border-radius:var(--radius-sm);color:var(--text-secondary);flex:none;font-family:var(--font-mono,monospace);font-size:var(--font-12);padding:0 var(--space-6)}.rm-search-tags__help{border-top:1px solid var(--border-default);color:var(--text-secondary);font-size:var(--font-12);line-height:1.6;padding:var(--space-8)}.rm-search-tags__tags{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-8)}.rm-search-tags__tag{align-items:center;background:var(--bg-surface-2);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);display:inline-flex;font-size:var(--font-12);gap:var(--space-4);padding:var(--space-2) var(--space-6);position:relative}.rm-search-tags__tag.is-duplicate{animation:rm-search-tags-flash 1s ease-in-out}@keyframes rm-search-tags-flash{0%,to{border-color:var(--border-default)}25%,75%{border-color:var(--color-warning)}}.rm-search-tags__tag-type{background:none;border:none;color:var(--color-primary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-12);font-weight:600;padding:0}.rm-search-tags__tag-remove{background:none;border:none;color:var(--text-muted);cursor:pointer;display:inline-flex;padding:0}.rm-search-tags__tag-remove:hover{color:var(--color-danger)}.rm-search-tags__tag-menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:flex;flex-direction:column;left:0;min-width:120px;padding:var(--space-4);position:absolute;top:calc(100% + 4px);z-index:var(--z-sticky)}.rm-search-tags__tag-choice{align-items:center;background:none;border:none;border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-12);gap:var(--space-8);justify-content:space-between;padding:var(--space-4) var(--space-6);text-align:left}.rm-search-tags__tag-choice.is-active,.rm-search-tags__tag-choice:hover{background:var(--bg-hover)}@media (prefers-reduced-motion:reduce){.rm-search-tags__tag.is-duplicate{animation:none;border-color:var(--color-warning)}}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.100",
+  "version": "0.1.102",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",