@tekkare/romulus 0.1.74 → 0.1.76

package/dist/module.json

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

package/dist/runtime/components/ComplexSelect.vue

@@ -26,7 +26,8 @@
   commentaire dans Auriga, et aucune page ne l'appelait.
 -->
 <script setup lang="ts">
-import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { rmPanelOpened, rmPanelRegister } from '../utils/panels'
 
 export interface RmComplexSelectPreset {
   label: string
@@ -179,6 +180,7 @@ async function toggle() {
   if (isOpen.value) return close()
 
   isOpen.value = true
+  rmPanelOpened(close)
   document.addEventListener('click', onDocumentClick)
   await nextTick()
   addRef.value?.focus()
@@ -219,7 +221,13 @@ function applyPreset(preset: RmComplexSelectPreset) {
   activePreset.value = preset.label
 }
 
+let unregister: (() => void) | undefined
+onMounted(() => {
+  unregister = rmPanelRegister(close)
+})
+
 onUnmounted(() => {
+  unregister?.()
   clearTimeout(debounceId)
   document.removeEventListener('click', onDocumentClick)
 })
@@ -241,7 +249,7 @@ onUnmounted(() => {
       :disabled="disabled"
       :aria-expanded="isOpen"
       aria-haspopup="true"
-      @click.stop="toggle"
+      @click="toggle"
     >
       <RmTooltip :text="summary" :disabled="selected.length === 0" class="rm-csel__value-slot">
         <span class="rm-csel__value" :class="{ 'is-empty': selected.length === 0 }">

package/dist/runtime/components/DropdownSelect.vue

@@ -26,7 +26,8 @@
   JSON de locale au montage.
 -->
 <script setup lang="ts">
-import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { rmPanelOpened, rmPanelRegister } from '../utils/panels'
 
 const props = withDefaults(defineProps<{
   /** Intitule pose au-dessus du champ. */
@@ -120,6 +121,7 @@ async function toggle() {
   if (isOpen.value) return close()
 
   isOpen.value = true
+  rmPanelOpened(close)
   searchTerm.value = ''
   activeIndex.value = props.options.indexOf(selected.value ?? '')
   document.addEventListener('click', onDocumentClick)
@@ -155,7 +157,13 @@ function onKeydown(event: KeyboardEvent) {
   }
 }
 
+let unregister: (() => void) | undefined
+onMounted(() => {
+  unregister = rmPanelRegister(close)
+})
+
 onUnmounted(() => {
+  unregister?.()
   clearTimeout(debounceId)
   document.removeEventListener('click', onDocumentClick)
 })
@@ -172,7 +180,7 @@ onUnmounted(() => {
       :disabled="disabled"
       :aria-expanded="isOpen"
       aria-haspopup="listbox"
-      @click.stop="toggle"
+      @click="toggle"
     >
       <RmTooltip :text="selected ?? ''" :disabled="!selected" class="rm-dsel__value-slot">
         <span class="rm-dsel__value" :class="{ 'is-empty': !selected }">

package/dist/runtime/components/FilterBar.vue

@@ -275,5 +275,5 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.rm-fbar{margin-inline:calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%))/2);position:sticky;width:var(--oip-main-w,100%);z-index:91;--rm-fbar-field-h:32px;backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;font-family:var(--font-sans)}.rm-fbar__views{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__views:empty{display:none}.rm-fbar__row{align-items:flex-start;display:flex;gap:12px;padding-block:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__row:not(:has(~.rm-fbar__rail-row)){border-bottom:1px solid var(--border-default)}.rm-fbar__toggle :deep(p),.rm-fbar__toggle :deep(span){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-fbar__toggle{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h);justify-content:center;padding:0 14px}.rm-fbar__toggle:hover{background:var(--bg-surface-3)}.rm-fbar__toggle.is-active,.rm-fbar__toggle.is-active:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-fbar__toggle.is-active .rm-fbar__badge{background:var(--color-text-inverse);color:var(--color-primary)}.rm-fbar__badge{align-items:center;background:var(--color-primary);border-radius:16px;color:var(--color-text-inverse);display:inline-flex;font-size:var(--font-11);font-weight:var(--weight-bold);justify-content:center;min-width:18px;padding:0 5px}.rm-fbar__view{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__advanced{align-items:center;background:none;border:none;border-left:1px solid var(--border-default);color:var(--color-primary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-medium);height:var(--rm-fbar-field-h);padding:0 0 0 12px;position:absolute;right:14px;text-decoration-line:underline;top:0;white-space:nowrap;z-index:2}.rm-fbar__advanced.is-active,.rm-fbar__advanced:hover{color:var(--color-primary-hover,var(--color-primary));text-decoration-thickness:2px}.rm-fbar__rail-row{display:flex;padding-bottom:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__rail-row{border-bottom:1px solid var(--border-default)}.rm-fbar__rail{align-items:center;display:flex;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}.rm-fbar__rail:empty{display:none}.rm-fbar__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;min-width:0;position:relative}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.search-bar-wrapper){flex:1 1 auto;min-width:0}.rm-fbar__search :deep(.search-bar){background:var(--bg-surface);box-sizing:border-box;display:flex;height:var(--rm-fbar-field-h);width:100%}.rm-fbar__search :deep(.filters_input_search){border-radius:var(--radius-pill);box-sizing:border-box;height:auto;min-height:var(--rm-fbar-field-h);padding-right:calc(var(--rm-fbar-advanced-w, 0px) + 12px);width:100%}.rm-fbar__search :deep(.research_tags:not(:has(*))){display:none}.rm-fbar__search :deep(.select_shortcut){box-sizing:border-box;font-size:var(--font-11);height:24px;padding-block:0}.rm-fbar__search :deep(.select_shortcut:hover){background:var(--bg-surface-3)!important;border-color:var(--border-default)!important;color:inherit!important}.rm-fbar__search :deep(.select_shortcut:hover svg){color:inherit!important}.rm-fbar__search :deep(.remove_search_section){border-left:none;border-radius:0 var(--radius-pill) var(--radius-pill) 0}.rm-fbar__search :deep(.remove_search_section:hover){background:transparent!important}.rm-fbar__search :deep(.remove_search_section:hover svg){color:var(--text-primary)!important}.rm-fbar__search :deep(.filters_input_search.no_bottom){border-bottom:1.5px solid var(--color-primary)!important;border-radius:var(--radius-pill)}.rm-fbar__search :deep(.search_suggestions){border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);left:0;padding:6px;right:0;top:calc(100% + 6px);width:auto}.rm-fbar__search :deep(.sugg_container>*){border-radius:var(--radius-lg)}.rm-fbar__search :deep(.sugg_container>.selected){background:color-mix(in srgb,var(--color-primary) 6%,transparent)!important}.rm-fbar__panel{--rm-filter-col:224px;--rm-fbar-panel-field-h:40px;align-items:end;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(0,var(--rm-filter-col)));justify-content:center;padding-block:16px 20px;padding-inline:56px}.rm-fbar__panel--wide{align-items:stretch;display:flex;flex-direction:column;gap:12px}.rm-fbar__filters{display:contents}.rm-fbar__filters :deep(.filter-chip),.rm-fbar__filters :deep(.filter-complex__trigger),.rm-fbar__filters :deep(.rm-number__box){border-radius:var(--radius-lg);height:var(--rm-fbar-panel-field-h);width:100%}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__customize{grid-column:1/-1}.rm-fbar__panel :deep(.filters_row_break){grid-column:1/-1}.rm-fbar__panel-title{font-size:var(--font-18);font-weight:800;margin:0}.rm-fbar__action{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);padding:0;text-decoration-line:underline}.rm-fbar__action--save{color:var(--color-primary)}.rm-fbar__action--clear{color:var(--color-danger)}.rm-fbar__action--clear:hover{opacity:.8;text-decoration-thickness:2px}
+.rm-fbar{margin-inline:calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%))/2);position:sticky;width:var(--oip-main-w,100%);z-index:91;--rm-fbar-field-h:32px;backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;font-family:var(--font-sans)}.rm-fbar__views{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__views:empty{display:none}.rm-fbar__row{align-items:flex-start;display:flex;gap:12px;padding-block:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__row:not(:has(~.rm-fbar__rail-row)){border-bottom:1px solid var(--border-default)}.rm-fbar__toggle :deep(p),.rm-fbar__toggle :deep(span){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-fbar__toggle{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h);justify-content:center;padding:0 14px}.rm-fbar__toggle:hover{background:var(--bg-surface-3)}.rm-fbar__toggle.is-active,.rm-fbar__toggle.is-active:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-fbar__toggle.is-active .rm-fbar__badge{background:var(--color-text-inverse);color:var(--color-primary)}.rm-fbar__badge{align-items:center;background:var(--color-primary);border-radius:16px;color:var(--color-text-inverse);display:inline-flex;font-size:var(--font-11);font-weight:var(--weight-bold);justify-content:center;min-width:18px;padding:0 5px}.rm-fbar__view{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__advanced{align-items:center;background:none;border:none;border-left:1px solid var(--border-default);color:var(--color-primary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-medium);height:var(--rm-fbar-field-h);padding:0 0 0 12px;position:absolute;right:14px;text-decoration-line:underline;top:0;white-space:nowrap;z-index:2}.rm-fbar__advanced.is-active,.rm-fbar__advanced:hover{color:var(--color-primary-hover,var(--color-primary));text-decoration-thickness:2px}.rm-fbar__rail-row{display:flex;padding-bottom:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__rail-row{border-bottom:1px solid var(--border-default)}.rm-fbar__rail{align-items:center;display:flex;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}.rm-fbar__rail:empty{display:none}.rm-fbar__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;min-width:0;position:relative}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.search-bar-wrapper){flex:1 1 auto;min-width:0}.rm-fbar__search :deep(.search-bar){background:var(--bg-surface);box-sizing:border-box;display:flex;height:var(--rm-fbar-field-h);width:100%}.rm-fbar__search :deep(.filters_input_search){border-radius:var(--radius-pill);box-sizing:border-box;height:auto;min-height:var(--rm-fbar-field-h);padding-right:calc(var(--rm-fbar-advanced-w, 0px) + 12px);width:100%}.rm-fbar__search :deep(.research_tags:not(:has(*))){display:none}.rm-fbar__search :deep(.select_shortcut){box-sizing:border-box;font-size:var(--font-11);height:24px;padding-block:0}.rm-fbar__search :deep(.select_shortcut:hover){background:var(--bg-surface-3)!important;border-color:var(--border-default)!important;color:inherit!important}.rm-fbar__search :deep(.select_shortcut:hover svg){color:inherit!important}.rm-fbar__search :deep(.remove_search_section){border-left:none;border-radius:0 var(--radius-pill) var(--radius-pill) 0}.rm-fbar__search :deep(.remove_search_section:hover){background:transparent!important}.rm-fbar__search :deep(.remove_search_section:hover svg){color:var(--text-primary)!important}.rm-fbar__search :deep(.filters_input_search.no_bottom){border-bottom:1.5px solid var(--color-primary)!important;border-radius:var(--radius-pill)}.rm-fbar__search :deep(.search_suggestions){border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);left:0;padding:6px;right:0;top:calc(100% + 6px);width:auto}.rm-fbar__search :deep(.sugg_container>*){border-radius:var(--radius-lg)}.rm-fbar__search :deep(.sugg_container>.selected){background:color-mix(in srgb,var(--color-primary) 6%,transparent)!important}.rm-fbar__panel{--rm-filter-col:224px;--rm-fbar-panel-field-h:40px;align-items:end;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(0,var(--rm-filter-col)));justify-content:center;padding-block:16px 20px;padding-inline:56px}.rm-fbar__panel--wide{align-items:stretch;display:flex;flex-direction:column;gap:12px}.rm-fbar__filters{display:contents}.rm-fbar__filters :deep(.filter-chip),.rm-fbar__filters :deep(.filter-complex__trigger),.rm-fbar__filters :deep(.rm-number__box){border-radius:var(--radius-lg);height:var(--rm-fbar-panel-field-h);width:100%}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__customize{grid-column:1/-1}.rm-fbar__panel :deep(.filters_row_break){grid-column:1/-1}.rm-fbar__panel-title{font-size:var(--font-18);font-weight:800;margin:0}.rm-fbar__action{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);padding:0;text-decoration-line:underline}.rm-fbar__action--save{color:var(--color-primary)}.rm-fbar__action--clear{color:var(--color-danger)}.rm-fbar__action--clear:hover{opacity:.8;text-decoration-thickness:2px}
 </style>

package/dist/runtime/components/FilterComplex.vue

@@ -15,6 +15,7 @@
 -->
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { rmPanelOpened, rmPanelRegister } from '../utils/panels'
 import {
   PhCaretDown,
   PhMagnifyingGlass,
@@ -263,6 +264,7 @@ function clearAll() {
 
 function toggle() {
   isOpen.value = !isOpen.value
+  if (isOpen.value) rmPanelOpened(close)
   if (!isOpen.value) {
     addInput.value = ''
     addSearch.value = ''
@@ -291,11 +293,14 @@ function onKeydown(e: KeyboardEvent) {
   if (e.key === 'Escape' && isOpen.value) close()
 }
 
+let unregister: (() => void) | undefined
 onMounted(() => {
+  unregister = rmPanelRegister(close)
   document.addEventListener('click', onClickOutside)
   document.addEventListener('keydown', onKeydown)
 })
 onUnmounted(() => {
+  unregister?.()
   clearTimeout(debounce)
   document.removeEventListener('click', onClickOutside)
   document.removeEventListener('keydown', onKeydown)

package/dist/runtime/components/FilterDropdown.vue

@@ -2,6 +2,7 @@
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { PhCaretDown, PhCheck, PhMagnifyingGlass } from '@phosphor-icons/vue'
 import type { Component } from 'vue'
+import { rmPanelOpened, rmPanelRegister } from '../utils/panels'
 
 export interface FilterDropdownOption {
   label: string
@@ -101,8 +102,13 @@ const rows = computed<DropdownRow[]>(() => {
   return out
 })
 
+function close() {
+  isOpen.value = false
+}
+
 function toggle() {
   isOpen.value = !isOpen.value
+  if (isOpen.value) rmPanelOpened(close)
 }
 
 // La recherche repart vide a chaque ouverture, et prend le curseur : sinon le
@@ -151,8 +157,15 @@ function onClickOutside(e: Event) {
   }
 }
 
-onMounted(() => document.addEventListener('click', onClickOutside))
-onUnmounted(() => document.removeEventListener('click', onClickOutside))
+let unregister: (() => void) | undefined
+onMounted(() => {
+  unregister = rmPanelRegister(close)
+  document.addEventListener('click', onClickOutside)
+})
+onUnmounted(() => {
+  unregister?.()
+  document.removeEventListener('click', onClickOutside)
+})
 </script>
 
 <template>

package/dist/runtime/components/MultipleSelect.vue

@@ -24,7 +24,8 @@
   identifiant cassait des que la liste etait filtree.
 -->
 <script setup lang="ts">
-import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { rmPanelOpened, rmPanelRegister } from '../utils/panels'
 
 const props = withDefaults(defineProps<{
   /** Intitule pose au-dessus du champ. */
@@ -134,6 +135,7 @@ async function toggle() {
   if (isOpen.value) return close()
 
   isOpen.value = true
+  rmPanelOpened(close)
   searchTerm.value = ''
   document.addEventListener('click', onDocumentClick)
   if (!props.search) return
@@ -156,7 +158,13 @@ function toggleAll() {
   commit(allSelected.value ? [] : [...props.options])
 }
 
+let unregister: (() => void) | undefined
+onMounted(() => {
+  unregister = rmPanelRegister(close)
+})
+
 onUnmounted(() => {
+  unregister?.()
   clearTimeout(debounceId)
   document.removeEventListener('click', onDocumentClick)
 })
@@ -178,7 +186,7 @@ onUnmounted(() => {
       :disabled="disabled"
       :aria-expanded="isOpen"
       aria-haspopup="true"
-      @click.stop="toggle"
+      @click="toggle"
     >
       <RmTooltip :text="summary" :disabled="selected.length === 0" class="rm-msel__value-slot">
         <span class="rm-msel__value" :class="{ 'is-empty': selected.length === 0 }">

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

@@ -0,0 +1,8 @@
+/**
+ * Inscrit un panneau. A appeler au montage, cote client seulement : sur le
+ * serveur le registre est partage par toutes les requetes et personne ne le
+ * vide.
+ */
+export declare function rmPanelRegister(close: () => void): () => boolean;
+/** Ferme tous les panneaux sauf celui qui vient de s'ouvrir. */
+export declare function rmPanelOpened(self: () => void): void;

package/dist/runtime/utils/panels.js

@@ -0,0 +1,10 @@
+const closers = /* @__PURE__ */ new Set();
+export function rmPanelRegister(close) {
+  closers.add(close);
+  return () => closers.delete(close);
+}
+export function rmPanelOpened(self) {
+  closers.forEach((close) => {
+    if (close !== self) close();
+  });
+}

package/package.json

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