@tekkare/romulus 0.1.118 → 0.1.119

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/components/AlertForm.vue +8 -7
  3. package/dist/runtime/components/Checkbox.vue +15 -2
  4. package/dist/runtime/components/FilterComplex.vue +13 -2
  5. package/package.json +1 -1
package/dist/module.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "compatibility": {
5
5
  "nuxt": ">=3.16.0"
6
6
  },
7
- "version": "0.1.116",
7
+ "version": "0.1.117",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "0.8.4",
10
10
  "unbuild": "2.0.0"
package/dist/runtime/components/AlertForm.vue CHANGED
@@ -112,8 +112,8 @@ const FR = {
112
112
  kindProduct: 'Une marque',
113
113
  kindProductHint: 'Une à {max} marques, suivies partout : prix, avis HAS, indications, ANSM, PUT, MITM, Journal officiel.',
114
114
  brands: 'Marques surveillées',
115
- brandsSearch: 'Rechercher une marque, une molécule, une classe ATC',
116
- brandsHint: 'Cherchez une marque et ajoutez-la. L’alerte couvre tout le hub pour chacune.',
115
+ brandsSearch: 'Rechercher',
116
+ brandsHint: 'Cherchez par marque, molécule, classe ATC ou laboratoire. L’alerte couvre tout le hub pour chaque marque retenue.',
117
117
  brandsRequired: 'Choisissez au moins une marque.',
118
118
  brandsTooMany: 'Une alerte suit {max} marques au maximum.',
119
119
  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 = {
154
154
  reseed: 'Changer les champs suivis repart d’une nouvelle référence : vous ne serez prévenu que de ce qui bouge ensuite.',
155
155
  cancel: 'Annuler',
156
156
  baseline:
157
- 'À la création, la référence est capturée sans rien signaler : vous ne serez prévenu que de ce qui bouge ensuite.',
157
+ '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.',
158
158
  scope: 'éléments dans la vue actuellement',
159
159
  }
160
160
 
@@ -165,8 +165,8 @@ const EN = {
165
165
  kindProduct: 'A brand',
166
166
  kindProductHint: 'One to {max} brands, watched everywhere: prices, HAS opinions, indications, ANSM, PUT, MITM, official journal.',
167
167
  brands: 'Watched brands',
168
- brandsSearch: 'Search a brand, a molecule, an ATC class',
169
- brandsHint: 'Search a brand and add it. The alert covers the whole hub for each one.',
168
+ brandsSearch: 'Search',
169
+ brandsHint: 'Search by brand, molecule, ATC class or company. The alert covers the whole hub for each brand kept.',
170
170
  brandsRequired: 'Pick at least one brand.',
171
171
  brandsTooMany: 'An alert watches at most {max} brands.',
172
172
  productFields: 'Every field is watched: a brand alert does not narrow down, it reports whatever moves.',
@@ -207,7 +207,7 @@ const EN = {
207
207
  reseed: 'Changing the watched fields restarts from a new baseline: you are only told about what moves afterwards.',
208
208
  cancel: 'Cancel',
209
209
  baseline:
210
- 'On creation the baseline is captured silently: you are only told about what moves afterwards.',
210
+ '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.',
211
211
  scope: 'items in the view right now',
212
212
  }
213
213
 
@@ -446,6 +446,7 @@ function submit() {
446
446
  :label="T.brandsSearch"
447
447
  :options="brandOptions.map((brand) => ({ label: brand, value: brand }))"
448
448
  remote
449
+ panel-width="100%"
449
450
  :lang="lang"
450
451
  />
451
452
  <p v-if="brands.length > maxBrands" class="rm-alert-form__error">
@@ -502,7 +503,7 @@ function submit() {
502
503
  :key="entry.key"
503
504
  :model-value="triggers.includes(entry.key as any)"
504
505
  :label="entry.label"
505
- :tooltip="entry.hint"
506
+ :description="entry.hint"
506
507
  @update:model-value="toggleTrigger(entry.key as RmAlertTrigger)"
507
508
  />
508
509
  </fieldset>
package/dist/runtime/components/Checkbox.vue CHANGED
@@ -21,12 +21,22 @@ withDefaults(defineProps<{
21
21
  label: string
22
22
  /** Intitule du champ, au-dessus de la boite. Absent, rien ne sort. */
23
23
  fieldLabel?: string
24
+ /**
25
+ * Explication posee sous l'intitule, en petit.
26
+ *
27
+ * A preferer a `tooltip` des que l'explication aide a CHOISIR : une bulle
28
+ * au survol se decouvre par hasard, ne s'atteint pas au doigt, et dans une
29
+ * liste de cases a cocher elle oblige a survoler chaque ligne pour
30
+ * comprendre laquelle prendre.
31
+ */
32
+ description?: string
24
33
  /** Bulle d'aide, sortie par une icone a droite. */
25
34
  tooltip?: string
26
35
  tooltipDir?: 'top' | 'right' | 'bottom' | 'left'
27
36
  disabled?: boolean
28
37
  }>(), {
29
38
  fieldLabel: '',
39
+ description: '',
30
40
  tooltip: '',
31
41
  tooltipDir: 'top',
32
42
  disabled: false,
@@ -54,7 +64,10 @@ const checked = defineModel<boolean>({ default: false })
54
64
  :size="20"
55
65
  />
56
66
  </span>
57
- <span class="rm-checkbox__label">{{ label }}</span>
67
+ <span class="rm-checkbox__text">
68
+ <span class="rm-checkbox__label">{{ label }}</span>
69
+ <span v-if="description" class="rm-checkbox__desc">{{ description }}</span>
70
+ </span>
58
71
  </label>
59
72
 
60
73
  <RmTooltip v-if="tooltip" :text="tooltip" :dir="tooltipDir" class="rm-checkbox__help">
@@ -65,5 +78,5 @@ const checked = defineModel<boolean>({ default: false })
65
78
  </template>
66
79
 
67
80
  <style scoped>
68
- .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)}
81
+ .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)}
69
82
  </style>
package/dist/runtime/components/FilterComplex.vue CHANGED
@@ -54,11 +54,18 @@ const props = withDefaults(defineProps<{
54
54
  * cent premieres valeurs laisse croire que le reste n'existe pas).
55
55
  */
56
56
  remote?: boolean
57
+ /**
58
+ * Largeur du panneau. Les 720px par defaut valent pour une page ; dans une
59
+ * modale ou un panneau de rail, ils debordent du cadre et le contenu se
60
+ * fait couper.
61
+ */
62
+ panelWidth?: string
57
63
  }>(), {
58
64
  icon: undefined,
59
65
  presets: () => [],
60
66
  lang: 'en',
61
67
  remote: false,
68
+ panelWidth: '720px',
62
69
  })
63
70
 
64
71
  const selected = defineModel<string[]>({ default: () => [] })
@@ -308,7 +315,11 @@ onUnmounted(() => {
308
315
  </script>
309
316
 
310
317
  <template>
311
- <div ref="wrapperRef" class="filter-complex">
318
+ <div
319
+ ref="wrapperRef"
320
+ class="filter-complex"
321
+ :style="{ '--rm-fcx-panel-w': panelWidth }"
322
+ >
312
323
  <button
313
324
  class="filter-complex__trigger"
314
325
  :class="{ 'filter-complex__trigger--active': isActive }"
@@ -455,5 +466,5 @@ onUnmounted(() => {
455
466
  </template>
456
467
 
457
468
  <style scoped>
458
- .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)}
469
+ .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)}
459
470
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tekkare/romulus",
3
- "version": "0.1.118",
3
+ "version": "0.1.119",
4
4
  "description": "Romulus Design System - Nuxt module by Tekkare",
5
5
  "license": "MIT",
6
6
  "type": "module",