@tekkare/romulus 0.1.54 → 0.1.56

package/dist/module.json

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

package/dist/runtime/components/FilterComplex.vue

@@ -110,7 +110,7 @@ const WORDS = {
     clear: 'Tout effacer',
     searchSelection: 'Filtrer la sélection...',
     noResult: 'Aucun résultat',
-    noSelection: 'Aucune sélection',
+    noSelection: 'Aucune sélection, ajoutez des éléments depuis la gauche',
     more: 'valeurs de plus, faites défiler',
   },
   en: {
@@ -123,7 +123,7 @@ const WORDS = {
     clear: 'Clear all',
     searchSelection: 'Filter selection...',
     noResult: 'No results',
-    noSelection: 'No selection',
+    noSelection: 'No selection, add items from the left',
     more: 'more values, keep scrolling',
   },
 } as const
@@ -212,8 +212,21 @@ const summaryNames = computed(() => {
   return names
 })
 
-const summary = computed(() => summaryNames.value.join(', '))
-const overflow = computed(() => Math.max(0, selected.value.length - summaryNames.value.length))
+/**
+ * La selection rapide qui decrit exactement l'ecran, s'il y en a une. Elle
+ * nomme alors la pastille : « Pays : Big 5 Europe » se lit d'un coup, la liste
+ * des cinq pays non.
+ */
+const activePreset = computed(() => props.presets.find(isPresetActive))
+
+const summary = computed(() =>
+  activePreset.value ? activePreset.value.label : summaryNames.value.join(', '),
+)
+const overflow = computed(() =>
+  activePreset.value
+    ? 0
+    : Math.max(0, selected.value.length - summaryNames.value.length),
+)
 
 /** Une selection rapide est active quand elle decrit exactement l'ecran. */
 function isPresetActive(preset: FilterComplexPreset) {
@@ -257,19 +270,35 @@ function toggle() {
   }
 }
 
+/**
+ * Fermer laisse la selection en place : le panneau n'a pas de bouton
+ * « Appliquer », chaque clic a deja porte.
+ */
+function close() {
+  isOpen.value = false
+  addInput.value = ''
+  addSearch.value = ''
+  delSearch.value = ''
+}
+
 function onClickOutside(e: Event) {
-  if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) {
-    isOpen.value = false
-    addInput.value = ''
-    addSearch.value = ''
-    delSearch.value = ''
-  }
+  if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) close()
+}
+
+// Echap ferme, comme partout ailleurs. Sans ca, un panneau ouvert au clavier
+// ne se referme qu'a la souris.
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && isOpen.value) close()
 }
 
-onMounted(() => document.addEventListener('click', onClickOutside))
+onMounted(() => {
+  document.addEventListener('click', onClickOutside)
+  document.addEventListener('keydown', onKeydown)
+})
 onUnmounted(() => {
   clearTimeout(debounce)
   document.removeEventListener('click', onClickOutside)
+  document.removeEventListener('keydown', onKeydown)
 })
 </script>
 
@@ -421,5 +450,5 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.filter-complex{position:relative}.filter-complex__trigger{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);box-sizing:border-box;color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h,32px);max-width:320px;padding:0 12px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap}.filter-complex__trigger:hover{background:var(--bg-surface-3)}.filter-complex__icon{color:var(--color-primary);flex-shrink:0}.filter-complex__trigger--active{border-color:var(--color-primary)}.filter-complex__label{color:var(--text-muted);flex-shrink:0;font-weight:var(--weight-normal)}.filter-complex__summary{font-weight:var(--weight-semibold);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-complex__badge{align-items:center;background-color:color-mix(in srgb,var(--color-primary) 10%,transparent);border-radius:var(--radius-pill);color:var(--color-primary);display:inline-flex;flex-shrink:0;font-size:var(--font-12);font-weight:var(--weight-semibold);height:18px;justify-content:center;line-height:1;min-width:18px;padding:0 6px}.filter-complex__caret{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.filter-complex__caret--open{transform:rotate(180deg)}.filter-complex__panel{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl,12px);box-shadow:0 4px 24px rgba(var(--shadow-rgb),.1),0 2px 8px rgba(var(--shadow-rgb),.05);display:flex;left:0;max-height:460px;max-width:calc(100vw - 32px);overflow:hidden;position:absolute;top:calc(100% + 6px);width:720px;z-index:50}.filter-complex__left,.filter-complex__right{display:flex;flex-direction:column;gap:10px;overflow:hidden;padding:20px}.filter-complex__left{flex:1 1 50%}.filter-complex__right{border-left:1px solid var(--border-default);flex:1 1 50%}.filter-complex__head{align-items:center;display:flex;gap:12px;justify-content:space-between}.filter-complex__title{color:var(--text-primary);font-size:var(--font-14);font-weight:var(--weight-bold);margin:0}.filter-complex__presets{display:flex;flex-wrap:wrap;gap:8px}.filter-complex__preset{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-12);font-weight:var(--weight-medium);height:26px;padding:0 12px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap}.filter-complex__preset:hover{border-color:var(--color-primary);color:var(--color-primary)}.filter-complex__preset.is-active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.filter-complex__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md,8px);display:flex;gap:8px;padding:7px 10px}.filter-complex__search:focus-within{border-color:var(--color-primary)}.filter-complex__search-input{background:transparent;border:none;color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:var(--font-14);outline:none}.filter-complex__search-input::-moz-placeholder{color:var(--text-muted)}.filter-complex__search-input::placeholder{color:var(--text-muted)}.filter-complex__search-clear{color:var(--text-muted);cursor:pointer;flex-shrink:0}.filter-complex__search-clear:hover{color:var(--text-secondary)}.filter-complex__action{background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--font-12);font-weight:var(--weight-medium);padding:0;text-decoration:underline;white-space:nowrap}.filter-complex__action--add{color:var(--color-primary)}.filter-complex__action--add:hover{color:var(--color-primary-hover)}.filter-complex__action--clear{color:var(--color-danger)}.filter-complex__list{display:flex;flex:1;flex-direction:column;overflow-y:auto}.filter-complex__list::-webkit-scrollbar{width:4px}.filter-complex__list::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:100px}.filter-complex__list::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.filter-complex__item{align-items:center;background:none;border:none;border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);gap:10px;padding:7px 8px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out)}.filter-complex__item:hover{background-color:var(--bg-surface-3)}.filter-complex__item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-complex__item-icon{flex-shrink:0}.filter-complex__item-icon--add{color:var(--color-primary)}.filter-complex__item-icon--remove{color:var(--color-danger)}.filter-complex__more{color:var(--text-muted);font-size:var(--font-12);padding:8px}.filter-complex__empty{color:var(--text-muted);font-size:var(--font-14);font-style:italic;padding:8px}.dropdown-enter-active,.dropdown-leave-active{transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-4px)}
+.filter-complex{position:relative}.filter-complex__trigger{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);box-sizing:border-box;color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h,32px);max-width:320px;padding:0 12px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap}.filter-complex__trigger:hover{background:var(--bg-surface-3)}.filter-complex__icon{color:var(--color-primary);flex-shrink:0}.filter-complex__trigger--active{border-color:var(--color-primary)}.filter-complex__label{color:var(--text-muted);flex-shrink:0;font-weight:var(--weight-normal)}.filter-complex__summary{font-weight:var(--weight-semibold);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-complex__badge{align-items:center;background-color:color-mix(in srgb,var(--color-primary) 10%,transparent);border-radius:var(--radius-pill);color:var(--color-primary);display:inline-flex;flex-shrink:0;font-size:var(--font-12);font-weight:var(--weight-semibold);height:18px;justify-content:center;line-height:1;min-width:18px;padding:0 6px}.filter-complex__caret{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.filter-complex__caret--open{transform:rotate(180deg)}.filter-complex__panel{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl,12px);box-shadow:0 4px 24px rgba(var(--shadow-rgb),.1),0 2px 8px rgba(var(--shadow-rgb),.05);display:flex;left:0;max-height:460px;max-width:calc(100vw - 32px);overflow:hidden;position:absolute;top:calc(100% + 6px);width:720px;z-index:50}.filter-complex__left,.filter-complex__right{display:flex;flex-direction:column;gap:10px;overflow:hidden;padding:20px}.filter-complex__left{flex:1 1 50%}.filter-complex__right{border-left:1px solid var(--border-default);flex:1 1 50%}@media (max-width:767px){.filter-complex__panel{border:none;border-radius:0;flex-direction:column;inset:0;left:0;max-height:none;max-width:none;position:fixed;top:0;width:100%;z-index:100}.filter-complex__left,.filter-complex__right{flex:1 1 50%;min-height:0}.filter-complex__right{border-left:none;border-top:1px solid var(--border-default)}}.filter-complex__head{align-items:center;display:flex;gap:12px;justify-content:space-between}.filter-complex__title{color:var(--text-primary);font-size:var(--font-14);font-weight:var(--weight-bold);margin:0}.filter-complex__presets{display:flex;flex-wrap:wrap;gap:8px}.filter-complex__preset{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-12);font-weight:var(--weight-medium);height:26px;padding:0 12px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap}.filter-complex__preset:hover{border-color:var(--color-primary);color:var(--color-primary)}.filter-complex__preset.is-active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.filter-complex__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md,8px);display:flex;gap:8px;padding:7px 10px}.filter-complex__search:focus-within{border-color:var(--color-primary)}.filter-complex__search-input{background:transparent;border:none;color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:var(--font-14);outline:none}.filter-complex__search-input::-moz-placeholder{color:var(--text-muted)}.filter-complex__search-input::placeholder{color:var(--text-muted)}.filter-complex__search-clear{color:var(--text-muted);cursor:pointer;flex-shrink:0}.filter-complex__search-clear:hover{color:var(--text-secondary)}.filter-complex__action{background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--font-12);font-weight:var(--weight-medium);padding:0;text-decoration:underline;white-space:nowrap}.filter-complex__action--add{color:var(--color-primary)}.filter-complex__action--add:hover{color:var(--color-primary-hover)}.filter-complex__action--clear{color:var(--color-danger)}.filter-complex__list{display:flex;flex:1;flex-direction:column;overflow-y:auto}.filter-complex__list::-webkit-scrollbar{width:4px}.filter-complex__list::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:100px}.filter-complex__list::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.filter-complex__item{align-items:center;background:none;border:none;border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);gap:10px;padding:7px 8px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out)}.filter-complex__item:hover{background-color:var(--bg-surface-3)}.filter-complex__item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-complex__item-icon{flex-shrink:0}.filter-complex__item-icon--add{color:var(--color-primary)}.filter-complex__item-icon--remove{color:var(--color-danger)}.filter-complex__more{color:var(--text-muted);font-size:var(--font-12);padding:8px}.filter-complex__empty{color:var(--text-muted);font-size:var(--font-14);font-style:italic;padding:8px}.dropdown-enter-active,.dropdown-leave-active{transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-4px)}
 </style>

package/dist/runtime/utils/filterOptions.d.ts

@@ -80,3 +80,32 @@ export declare function rmFilterOptionsQuery(spec: RmFilterOptionsSpec): {
 };
 /** Les options, relues dans la reponse du moteur. */
 export declare function rmFilterOptions(response: any): RmFilterOption[];
+/** Un champ interroge par la saisie d'un filtre. */
+export interface RmFilterSearchField {
+    /** Champ interroge. La recherche porte sur son `.keyword`. */
+    field: string;
+    /**
+     * Chemins nested a traverser pour l'atteindre, du plus large au plus
+     * etroit (`['brand_history']`, ou `['a', 'a.b']` pour deux niveaux).
+     * Absent, le champ est a la racine du document.
+     */
+    nested?: string[];
+}
+/**
+ * La clause qui restreint les documents a la saisie, sur plusieurs champs a la
+ * fois. Meme regle que `rmFilterOptionsQuery`, pour un index ou le champ frere
+ * ne vit pas au meme niveau que le champ agrege : le filtre marque d'un index
+ * d'avis agrege `brand_group` a la racine et cherche la molecule dans
+ * `brand_history`, si bien que « pembro » sort KEYTRUDA. Un champ nested
+ * interroge sans son enveloppe `nested` ne repond jamais : c'est un filtre qui
+ * parait vide plutot qu'un filtre en erreur, d'ou cette enveloppe explicite.
+ *
+ * Trois facons de reconnaitre la saisie par champ : le fragment n'importe ou
+ * (`regexp`), la valeur entiere, et le debut. La derniere remonte en tete des
+ * listes ordonnees par pertinence.
+ */
+export declare function rmFilterSearchClause(fields: RmFilterSearchField[], input: string): {
+    bool: {
+        should: any[];
+    };
+};

package/dist/runtime/utils/filterOptions.js

@@ -38,3 +38,32 @@ export function rmFilterOptions(response) {
     (bucket) => Array.isArray(bucket.key) ? { label: String(bucket.key[0]), value: String(bucket.key[1]) } : { label: String(bucket.key), value: String(bucket.key) }
   );
 }
+export function rmFilterSearchClause(fields, input) {
+  return {
+    bool: {
+      should: fields.map(({ field, nested }) => {
+        const clause = {
+          bool: {
+            should: [
+              {
+                regexp: {
+                  [`${field}.keyword`]: {
+                    value: `.*${input}.*`,
+                    flags: "ALL",
+                    case_insensitive: true
+                  }
+                }
+              },
+              { match_phrase: { [`${field}.keyword`]: input } },
+              { prefix: { [`${field}.keyword`]: input } }
+            ]
+          }
+        };
+        return (nested ?? []).reduceRight(
+          (query, path) => ({ nested: { path, query } }),
+          clause
+        );
+      })
+    }
+  };
+}

package/package.json

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