@tekkare/romulus 0.1.101 → 0.1.102

package/dist/module.json

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

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.101",
+  "version": "0.1.102",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",