@tekkare/romulus 0.1.117 → 0.1.119

package/dist/module.json

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

package/dist/runtime/components/AlertForm.vue

@@ -112,8 +112,8 @@ const FR = {
   kindProduct: 'Une marque',
   kindProductHint: 'Une à {max} marques, suivies partout : prix, avis HAS, indications, ANSM, PUT, MITM, Journal officiel.',
   brands: 'Marques surveillées',
-  brandsSearch: 'Rechercher une marque, une molécule, une classe ATC',
-  brandsHint: 'Cherchez une marque et ajoutez-la. L’alerte couvre tout le hub pour chacune.',
+  brandsSearch: 'Rechercher',
+  brandsHint: 'Cherchez par marque, molécule, classe ATC ou laboratoire. L’alerte couvre tout le hub pour chaque marque retenue.',
   brandsRequired: 'Choisissez au moins une marque.',
   brandsTooMany: 'Une alerte suit {max} marques au maximum.',
   productFields: 'Tous les champs sont suivis : une alerte de marque ne se restreint pas, elle rapporte tout ce qui bouge.',
@@ -154,7 +154,7 @@ const FR = {
   reseed: 'Changer les champs suivis repart d’une nouvelle référence : vous ne serez prévenu que de ce qui bouge ensuite.',
   cancel: 'Annuler',
   baseline:
-    'À la création, la référence est capturée sans rien signaler : vous ne serez prévenu que de ce qui bouge ensuite.',
+    'L’alerte commence par relever l’état actuel, sans rien signaler. Restez quelques instants sur la page : elle passe à « Active » dans le panneau une fois ce relevé fait, et vous préviendra ensuite de ce qui bouge.',
   scope: 'éléments dans la vue actuellement',
 }
 
@@ -165,8 +165,8 @@ const EN = {
   kindProduct: 'A brand',
   kindProductHint: 'One to {max} brands, watched everywhere: prices, HAS opinions, indications, ANSM, PUT, MITM, official journal.',
   brands: 'Watched brands',
-  brandsSearch: 'Search a brand, a molecule, an ATC class',
-  brandsHint: 'Search a brand and add it. The alert covers the whole hub for each one.',
+  brandsSearch: 'Search',
+  brandsHint: 'Search by brand, molecule, ATC class or company. The alert covers the whole hub for each brand kept.',
   brandsRequired: 'Pick at least one brand.',
   brandsTooMany: 'An alert watches at most {max} brands.',
   productFields: 'Every field is watched: a brand alert does not narrow down, it reports whatever moves.',
@@ -207,7 +207,7 @@ const EN = {
   reseed: 'Changing the watched fields restarts from a new baseline: you are only told about what moves afterwards.',
   cancel: 'Cancel',
   baseline:
-    'On creation the baseline is captured silently: you are only told about what moves afterwards.',
+    'The alert starts by recording the current state, without reporting anything. Stay on the page a moment: it turns “Active” in the panel once that record is taken, and will then tell you what moves.',
   scope: 'items in the view right now',
 }
 
@@ -430,7 +430,12 @@ function submit() {
     <fieldset v-if="watchesProduct" class="rm-alert-form__group">
       <legend class="rm-alert-form__label">{{ T.brands }}</legend>
       <p class="rm-alert-form__hint">{{ T.brandsHint }}</p>
-      <!-- Le filtre complexe plutot qu'un simple choix multiple : le
+      <!-- L'intitule du filtre dit l'action, pas le titre de la section :
+           repeter « Marques surveillees » juste sous la legende ne dit rien de
+           plus, et l'utilisateur a besoin de savoir qu'il peut chercher par
+           molecule ou par classe.
+
+           Le filtre complexe plutot qu'un simple choix multiple : le
            referentiel des marques ne tient pas dans une liste, il se cherche.
            Son mode `remote` amortit la saisie et laisse l'appelant servir les
            options, au lieu de filtrer cent valeurs deja chargees et de laisser
@@ -438,13 +443,10 @@ function submit() {
       <RmFilterComplex
         v-model="brands"
         v-model:search="brandSearch"
-        <!-- L'intitule du filtre dit l'action, pas le titre de la section :
-             repeter « Marques surveillees » juste sous la legende ne dit rien
-             de plus, et l'utilisateur a besoin de savoir qu'il peut chercher
-             par molecule ou par classe. -->
         :label="T.brandsSearch"
         :options="brandOptions.map((brand) => ({ label: brand, value: brand }))"
         remote
+        panel-width="100%"
         :lang="lang"
       />
       <p v-if="brands.length > maxBrands" class="rm-alert-form__error">
@@ -501,7 +503,7 @@ function submit() {
         :key="entry.key"
         :model-value="triggers.includes(entry.key as any)"
         :label="entry.label"
-        :tooltip="entry.hint"
+        :description="entry.hint"
         @update:model-value="toggleTrigger(entry.key as RmAlertTrigger)"
       />
     </fieldset>

package/dist/runtime/components/Checkbox.vue

@@ -21,12 +21,22 @@ withDefaults(defineProps<{
   label: string
   /** Intitule du champ, au-dessus de la boite. Absent, rien ne sort. */
   fieldLabel?: string
+  /**
+   * Explication posee sous l'intitule, en petit.
+   *
+   * A preferer a `tooltip` des que l'explication aide a CHOISIR : une bulle
+   * au survol se decouvre par hasard, ne s'atteint pas au doigt, et dans une
+   * liste de cases a cocher elle oblige a survoler chaque ligne pour
+   * comprendre laquelle prendre.
+   */
+  description?: string
   /** Bulle d'aide, sortie par une icone a droite. */
   tooltip?: string
   tooltipDir?: 'top' | 'right' | 'bottom' | 'left'
   disabled?: boolean
 }>(), {
   fieldLabel: '',
+  description: '',
   tooltip: '',
   tooltipDir: 'top',
   disabled: false,
@@ -54,7 +64,10 @@ const checked = defineModel<boolean>({ default: false })
             :size="20"
           />
         </span>
-        <span class="rm-checkbox__label">{{ label }}</span>
+        <span class="rm-checkbox__text">
+          <span class="rm-checkbox__label">{{ label }}</span>
+          <span v-if="description" class="rm-checkbox__desc">{{ description }}</span>
+        </span>
       </label>
 
       <RmTooltip v-if="tooltip" :text="tooltip" :dir="tooltipDir" class="rm-checkbox__help">
@@ -65,5 +78,5 @@ const checked = defineModel<boolean>({ default: false })
 </template>
 
 <style scoped>
-.rm-checkbox__field-label{color:var(--text-secondary);font-size:var(--font-12,12px);font-weight:600;margin-bottom:6px}.rm-checkbox__wrap{position:relative}.rm-checkbox__box,.rm-checkbox__wrap{align-items:center;display:flex;gap:var(--space-8)}.rm-checkbox__box{background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;flex:1;font-size:var(--font-14,14px);font-weight:600;min-height:40px;padding:0 var(--space-12);transition:border-color var(--duration-fast,.15s) var(--ease-out,ease)}.rm-checkbox__box:hover:not(.is-disabled){border-color:var(--color-primary)}.rm-checkbox__box:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.1)}.rm-checkbox__box.is-disabled{color:var(--text-muted);cursor:not-allowed}.rm-checkbox__input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.rm-checkbox__icon{color:var(--text-muted);display:flex;flex-shrink:0}.rm-checkbox__icon.is-checked{color:var(--color-primary)}.rm-checkbox__box.is-disabled .rm-checkbox__icon{color:var(--border-default)}.rm-checkbox__label{min-width:0}.rm-checkbox__help{color:var(--text-muted)}
+.rm-checkbox__field-label{color:var(--text-secondary);font-size:var(--font-12,12px);font-weight:600;margin-bottom:6px}.rm-checkbox__wrap{position:relative}.rm-checkbox__box,.rm-checkbox__wrap{align-items:center;display:flex;gap:var(--space-8)}.rm-checkbox__box{background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;flex:1;font-size:var(--font-14,14px);font-weight:600;min-height:40px;padding:0 var(--space-12);transition:border-color var(--duration-fast,.15s) var(--ease-out,ease)}.rm-checkbox__box:hover:not(.is-disabled){border-color:var(--color-primary)}.rm-checkbox__box:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.1)}.rm-checkbox__box.is-disabled{color:var(--text-muted);cursor:not-allowed}.rm-checkbox__input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.rm-checkbox__icon{color:var(--text-muted);display:flex;flex-shrink:0}.rm-checkbox__icon.is-checked{color:var(--color-primary)}.rm-checkbox__box.is-disabled .rm-checkbox__icon{color:var(--border-default)}.rm-checkbox__text{display:flex;flex-direction:column;gap:2px;min-width:0}.rm-checkbox__label{min-width:0}.rm-checkbox__desc{font-size:var(--font-12);font-weight:400;line-height:1.4}.rm-checkbox__desc,.rm-checkbox__help{color:var(--text-muted)}
 </style>

package/dist/runtime/components/FilterComplex.vue

@@ -54,11 +54,18 @@ const props = withDefaults(defineProps<{
    * cent premieres valeurs laisse croire que le reste n'existe pas).
    */
   remote?: boolean
+  /**
+   * Largeur du panneau. Les 720px par defaut valent pour une page ; dans une
+   * modale ou un panneau de rail, ils debordent du cadre et le contenu se
+   * fait couper.
+   */
+  panelWidth?: string
 }>(), {
   icon: undefined,
   presets: () => [],
   lang: 'en',
   remote: false,
+  panelWidth: '720px',
 })
 
 const selected = defineModel<string[]>({ default: () => [] })
@@ -308,7 +315,11 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="wrapperRef" class="filter-complex">
+  <div
+    ref="wrapperRef"
+    class="filter-complex"
+    :style="{ '--rm-fcx-panel-w': panelWidth }"
+  >
     <button
       class="filter-complex__trigger"
       :class="{ 'filter-complex__trigger--active': isActive }"
@@ -455,5 +466,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:var(--space-6);height:var(--rm-fbar-field-h,32px);max-width:320px;padding:0 var(--space-12);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 var(--space-6)}.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:var(--space-10);overflow:hidden;padding:var(--space-20)}.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:var(--space-12);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:var(--space-8)}.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 var(--space-12);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:var(--space-8);padding:7px var(--space-10)}.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__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:var(--space-10);padding:7px var(--space-8);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{font-size:var(--font-12)}.filter-complex__empty,.filter-complex__more{color:var(--text-muted);padding:var(--space-8)}.filter-complex__empty{font-size:var(--font-14);font-style:italic}.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:var(--space-6);height:var(--rm-fbar-field-h,32px);max-width:320px;padding:0 var(--space-12);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 var(--space-6)}.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:var(--rm-fcx-panel-w,720px);z-index:50}.filter-complex__left,.filter-complex__right{display:flex;flex-direction:column;gap:var(--space-10);overflow:hidden;padding:var(--space-20)}.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:var(--space-12);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:var(--space-8)}.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 var(--space-12);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:var(--space-8);padding:7px var(--space-10)}.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__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:var(--space-10);padding:7px var(--space-8);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{font-size:var(--font-12)}.filter-complex__empty,.filter-complex__more{color:var(--text-muted);padding:var(--space-8)}.filter-complex__empty{font-size:var(--font-14);font-style:italic}.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/package.json

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