@tekkare/romulus 0.1.130 → 0.1.131

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 (4) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/components/FilterBar.vue +9 -5
  3. package/dist/runtime/components/Table.vue +16 -1
  4. 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.129",
7
+ "version": "0.1.130",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "0.8.4",
10
10
  "unbuild": "2.0.0"
package/dist/runtime/components/FilterBar.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  selecteur de vue si la page en publie un (useRmFilterBarView), une puce
6
6
  « Filtres » et la recherche, rien d'autre. La puce ouvre en accordeon le
7
7
  panneau qui contient tous les filtres ; c'est la que vivent « Sauvegarder un
8
- scope » et « Tout effacer ». Le nombre de filtres actifs reste visible sur la
8
+ scope » et « Effacer les filtres ». Le nombre de filtres actifs reste visible
9
9
  puce.
10
10
 
11
11
  Slots : #CardTitle (libelle de la puce si `customTitle`), #Rail (sur la
@@ -32,7 +32,7 @@ const props = withDefaults(
32
32
  /**
33
33
  * Seconde commande de remise a zero, posee a cote de la premiere.
34
34
  *
35
- * « Tout effacer » ne touche qu'aux filtres de l'ecran : la vue posee, le
35
+ * « Effacer les filtres » ne touche qu'aux filtres de l'ecran : la vue,
36
36
  * perimetre qu'elle designe et l'affichage lui survivent. Une page qui
37
37
  * porte une vue a donc besoin d'un second geste, plus large ; il se lit a
38
38
  * cote du premier, sinon la difference entre les deux ne se voit pas.
@@ -64,8 +64,8 @@ const props = withDefaults(
64
64
  const emit = defineEmits<{ clearFilters: []; resetAll: []; saveScope: [] }>()
65
65
 
66
66
  const LABELS = {
67
- fr: { title: 'Filtres', save: 'Sauvegarder un scope', clear: 'Tout effacer', reset: 'Tout réinitialiser', customize: 'Personnaliser', advanced: 'Recherche avancée' },
68
- en: { title: 'Filters', save: 'Save a scope', clear: 'Clear all', reset: 'Reset everything', customize: 'Customize', advanced: 'Advanced search' },
67
+ fr: { title: 'Filtres', save: 'Sauvegarder un scope', clear: 'Effacer les filtres', reset: 'Tout réinitialiser', customize: 'Personnaliser', advanced: 'Recherche avancée' },
68
+ en: { title: 'Filters', save: 'Save a scope', clear: 'Clear filters', reset: 'Reset everything', customize: 'Customize', advanced: 'Advanced search' },
69
69
  } as const
70
70
 
71
71
  const t = computed(() => LABELS[props.lang] ?? LABELS.fr)
@@ -262,6 +262,10 @@ onBeforeUnmount(() => {
262
262
  >
263
263
  {{ clearMsg || t.clear }}
264
264
  </button>
265
+ <!-- Les deux gestes se suivent et ne font pas la meme chose : l'un
266
+ vide les filtres, l'autre defait la vue avec. Le trait les separe
267
+ pour qu'on ne clique pas le second en visant le premier. -->
268
+ <span v-if="haveClear && haveReset" class="rm-fbar__action-sep" aria-hidden="true" />
265
269
  <button
266
270
  v-if="haveReset"
267
271
  type="button"
@@ -295,5 +299,5 @@ onBeforeUnmount(() => {
295
299
  </template>
296
300
 
297
301
  <style scoped>
298
- .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:color-mix(in srgb,var(--bg-surface-3) 80%,transparent);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:var(--space-12);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:var(--space-6);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 var(--space-12);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:var(--space-8);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:var(--space-8);min-width:0;position:relative}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.rm-search-tags__field){border-radius:var(--radius-pill);box-sizing:border-box;height:var(--rm-fbar-field-h);padding-block:0;padding-right:calc(var(--rm-fbar-advanced-w, 0px) + 14px + var(--space-12))}.rm-fbar__search :deep(.rm-search-tags__field.is-open),.rm-fbar__search :deep(.rm-search-tags__field.is-panel){border-radius:var(--radius-pill)}.rm-fbar__search :deep(.rm-search-tags__list),.rm-fbar__search :deep(.rm-search-tags__panel){border-radius:var(--radius-2xl);border-top:1px solid var(--border-default);box-shadow:var(--shadow-lg);margin-top:var(--space-6);padding:var(--space-6)}.rm-fbar__search :deep(.rm-search-tags__option){border-radius:var(--radius-lg)}.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) + var(--space-12));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:var(--space-6);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:var(--space-8);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:var(--space-12)}.rm-fbar__filters{display:contents}.rm-fbar__filters :deep(.filter-chip),.rm-fbar__filters :deep(.filter-complex__trigger),.rm-fbar__filters :deep(.rm-csel__field),.rm-fbar__filters :deep(.rm-dsel__field),.rm-fbar__filters :deep(.rm-msel__field),.rm-fbar__filters :deep(.rm-number__box){border-radius:var(--radius-lg);height:var(--rm-fbar-panel-field-h);width:100%}.rm-fbar__filters :deep(.rm-csel),.rm-fbar__filters :deep(.rm-dsel),.rm-fbar__filters :deep(.rm-msel){align-items:stretch;width:100%}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:var(--space-16);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-family:var(--font-serif);font-size:var(--font-18);font-weight:700;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}
302
+ .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:color-mix(in srgb,var(--bg-surface-3) 80%,transparent);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:var(--space-12);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:var(--space-6);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 var(--space-12);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:var(--space-8);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:var(--space-8);min-width:0;position:relative}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.rm-search-tags__field){border-radius:var(--radius-pill);box-sizing:border-box;height:var(--rm-fbar-field-h);padding-block:0;padding-right:calc(var(--rm-fbar-advanced-w, 0px) + 14px + var(--space-12))}.rm-fbar__search :deep(.rm-search-tags__field.is-open),.rm-fbar__search :deep(.rm-search-tags__field.is-panel){border-radius:var(--radius-pill)}.rm-fbar__search :deep(.rm-search-tags__list),.rm-fbar__search :deep(.rm-search-tags__panel){border-radius:var(--radius-2xl);border-top:1px solid var(--border-default);box-shadow:var(--shadow-lg);margin-top:var(--space-6);padding:var(--space-6)}.rm-fbar__search :deep(.rm-search-tags__option){border-radius:var(--radius-lg)}.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) + var(--space-12));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:var(--space-6);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:var(--space-8);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:var(--space-12)}.rm-fbar__filters{display:contents}.rm-fbar__filters :deep(.filter-chip),.rm-fbar__filters :deep(.filter-complex__trigger),.rm-fbar__filters :deep(.rm-csel__field),.rm-fbar__filters :deep(.rm-dsel__field),.rm-fbar__filters :deep(.rm-msel__field),.rm-fbar__filters :deep(.rm-number__box){border-radius:var(--radius-lg);height:var(--rm-fbar-panel-field-h);width:100%}.rm-fbar__filters :deep(.rm-csel),.rm-fbar__filters :deep(.rm-dsel),.rm-fbar__filters :deep(.rm-msel){align-items:stretch;width:100%}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:var(--space-16);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-family:var(--font-serif);font-size:var(--font-18);font-weight:700;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__action-sep{align-self:center;background:var(--border-default);height:14px;width:1px}
299
303
  </style>
package/dist/runtime/components/Table.vue CHANGED
@@ -50,6 +50,12 @@ export interface RmTableColumn {
50
50
  sortable?: boolean
51
51
  align?: 'left' | 'center' | 'right'
52
52
  width?: string
53
+ /**
54
+ * Largeur plancher de la colonne. `width` est une part que la mise en page
55
+ * automatique peut rogner ; `minWidth` ne se rogne pas : la table deborde et
56
+ * defile plutot que d'ecraser une colonne de libelles longs.
57
+ */
58
+ minWidth?: string
53
59
  /**
54
60
  * Colonne de nombres : alignee a droite, chiffres a chasse fixe. C'est ce
55
61
  * qui aligne les unites entre elles et rend la colonne comparable d'un coup
@@ -158,6 +164,15 @@ function toggleSort(col: RmTableColumn) {
158
164
  emit('sort', currentSort.value, currentOrder.value)
159
165
  }
160
166
 
167
+ /**
168
+ * Les largeurs se posent sur l'en-tete : en mise en page automatique, c'est la
169
+ * cellule d'en-tete qui fixe la colonne entiere.
170
+ */
171
+ function colStyle(col: RmTableColumn) {
172
+ if (!col.width && !col.minWidth) return undefined
173
+ return { width: col.width, minWidth: col.minWidth }
174
+ }
175
+
161
176
  /** `aria-sort` ne se pose que sur la colonne triee : ailleurs c'est `none`. */
162
177
  function ariaSort(col: RmTableColumn) {
163
178
  if (!col.sortable) return undefined
@@ -340,7 +355,7 @@ function heatClass(col: RmTableColumn, row: Record<string, any>) {
340
355
  :class="[
341
356
  (col.numeric ? 'rm-table__th--num' : col.align && `rm-table__th--${col.align}`),
342
357
  ]"
343
- :style="col.width ? { width: col.width } : undefined"
358
+ :style="colStyle(col)"
344
359
  :aria-sort="ariaSort(col)"
345
360
  >
346
361
  <!-- Le tri passe par un bouton : un `<th>` cliquable n'est ni
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tekkare/romulus",
3
- "version": "0.1.130",
3
+ "version": "0.1.131",
4
4
  "description": "Romulus Design System - Nuxt module by Tekkare",
5
5
  "license": "MIT",
6
6
  "type": "module",