@tekkare/romulus 0.1.154 → 0.1.155

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/AppHeader.vue +6 -0
  3. package/dist/runtime/components/DropdownSelect.vue +22 -3
  4. package/dist/runtime/components/PageHeader.vue +2 -0
  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.153",
7
+ "version": "0.1.154",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "0.8.4",
10
10
  "unbuild": "2.0.0"
package/dist/runtime/components/AppHeader.vue CHANGED
@@ -68,6 +68,12 @@ export interface RmHeaderTab {
68
68
  * paquet de lignes.
69
69
  */
70
70
  count?: number | string
71
+ /**
72
+ * Phrase d'aide, montree au survol et annoncee par le titre accessible :
73
+ * ce que l'onglet contient quand son libelle ne suffit pas (« Diagnostics
74
+ * enregistres lors du sejour »). Absente, l'onglet n'en porte pas.
75
+ */
76
+ hint?: string
71
77
  }
72
78
 
73
79
  withDefaults(defineProps<{
package/dist/runtime/components/DropdownSelect.vue CHANGED
@@ -55,6 +55,13 @@ const props = withDefaults(defineProps<{
55
55
  filterSearch?: boolean
56
56
  /** Le panneau se ferme des qu'une valeur est prise. */
57
57
  closeOnClick?: boolean
58
+ /**
59
+ * Options montrees mais non selectionnables. Elles restent dans la liste a
60
+ * dessein : une mesure absente d'un jeu (un montant sur un perimetre qui
61
+ * n'en porte pas) se lit mieux grisee que disparue, sinon le lecteur croit
62
+ * l'avoir mal cherchee.
63
+ */
64
+ disabledOptions?: string[]
58
65
  lang?: 'fr' | 'en'
59
66
  }>(), {
60
67
  search: true,
@@ -66,6 +73,7 @@ const props = withDefaults(defineProps<{
66
73
  searchPlaceholder: undefined,
67
74
  filterSearch: true,
68
75
  closeOnClick: true,
76
+ disabledOptions: () => [],
69
77
  lang: 'fr',
70
78
  })
71
79
 
@@ -91,6 +99,11 @@ const activeIndex = ref(-1)
91
99
  const rootRef = ref<HTMLElement>()
92
100
  const searchRef = ref<HTMLInputElement>()
93
101
 
102
+ /** Cette option est-elle montree sans etre prenable ? */
103
+ function isDisabled(option: string): boolean {
104
+ return props.disabledOptions.includes(option)
105
+ }
106
+
94
107
  const visibleOptions = computed(() => {
95
108
  const needle = searchTerm.value.trim().toLowerCase()
96
109
  if (!needle || !props.filterSearch) return props.options
@@ -165,6 +178,7 @@ async function toggle() {
165
178
  }
166
179
 
167
180
  function pick(option: string) {
181
+ if (isDisabled(option)) return
168
182
  selected.value = option
169
183
  emit('change', option)
170
184
  if (props.closeOnClick) close()
@@ -256,9 +270,14 @@ onUnmounted(() => {
256
270
  :key="option"
257
271
  role="option"
258
272
  class="rm-dsel__option"
259
- :class="{ 'is-selected': option === selected, 'is-active': index === activeIndex }"
273
+ :class="{
274
+ 'is-selected': option === selected,
275
+ 'is-active': index === activeIndex && !isDisabled(option),
276
+ 'is-disabled': isDisabled(option),
277
+ }"
260
278
  :aria-selected="option === selected"
261
- @click="pick(option)"
279
+ :aria-disabled="isDisabled(option) || undefined"
280
+ @click="isDisabled(option) ? undefined : pick(option)"
262
281
  @mousemove="activeIndex = index"
263
282
  >
264
283
  <component
@@ -274,5 +293,5 @@ onUnmounted(() => {
274
293
  </template>
275
294
 
276
295
  <style scoped>
277
- .rm-dsel{align-items:stretch;display:flex;flex-direction:column;gap:var(--space-4);position:relative;width:196px}.rm-dsel__label{color:var(--text-secondary);font-size:var(--font-12,12px);line-height:14px}.rm-dsel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);box-sizing:border-box;color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:var(--space-4);line-height:16px;padding:var(--space-12);text-align:left;width:100%}.rm-dsel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-dsel__field.is-open{border-color:var(--color-primary)}.rm-dsel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-dsel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-dsel__value-slot{display:block;flex:1;min-width:0}.rm-dsel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-dsel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-dsel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-dsel__panel{background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-lg,12px);box-shadow:var(--r-shadow-lg,0 8px 24px rgba(0,0,0,.12));box-sizing:border-box;display:flex;flex-direction:column;left:0;margin-top:8px;max-height:500px;max-width:420px;min-width:max(230px,100%);padding:var(--space-16);position:absolute;top:100%;z-index:12}.rm-dsel__panel--up{bottom:100%;margin-bottom:8px;margin-top:0;top:auto}.rm-dsel__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:var(--space-8) var(--space-12)}.rm-dsel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-14,14px);width:100%}.rm-dsel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input:focus-visible{outline:none}.rm-dsel__loading{display:flex;flex-direction:column;gap:var(--space-10);padding-top:var(--space-8)}.rm-dsel__sr{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.rm-dsel__state{color:var(--text-secondary);font-size:var(--font-14,14px);font-style:italic;padding-top:var(--space-16);text-align:center}.rm-dsel__list{display:flex;flex-direction:column;list-style:none;margin:0;min-height:10px;overflow-y:auto;padding:0}.rm-dsel__list:not(:only-child){margin-top:16px}.rm-dsel__option{align-items:center;border-radius:var(--radius-sm,4px);cursor:pointer;display:flex;font-size:var(--font-14,14px);gap:var(--space-8);line-height:160%;margin:4px 0;min-height:24px;padding:var(--space-2) var(--space-4)}.rm-dsel__option :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__option.is-active{background:rgba(var(--brand-rgb),.05)}.rm-dsel__option.is-selected{font-weight:700}.rm-dsel__option.is-active :deep(svg),.rm-dsel__option.is-selected :deep(svg){color:var(--color-primary)}
296
+ .rm-dsel{align-items:stretch;display:flex;flex-direction:column;gap:var(--space-4);position:relative;width:196px}.rm-dsel__label{color:var(--text-secondary);font-size:var(--font-12,12px);line-height:14px}.rm-dsel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);box-sizing:border-box;color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:var(--space-4);line-height:16px;padding:var(--space-12);text-align:left;width:100%}.rm-dsel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-dsel__field.is-open{border-color:var(--color-primary)}.rm-dsel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-dsel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-dsel__value-slot{display:block;flex:1;min-width:0}.rm-dsel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-dsel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-dsel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-dsel__panel{background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-lg,12px);box-shadow:var(--r-shadow-lg,0 8px 24px rgba(0,0,0,.12));box-sizing:border-box;display:flex;flex-direction:column;left:0;margin-top:8px;max-height:500px;max-width:420px;min-width:max(230px,100%);padding:var(--space-16);position:absolute;top:100%;z-index:12}.rm-dsel__panel--up{bottom:100%;margin-bottom:8px;margin-top:0;top:auto}.rm-dsel__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:var(--space-8) var(--space-12)}.rm-dsel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-14,14px);width:100%}.rm-dsel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input:focus-visible{outline:none}.rm-dsel__loading{display:flex;flex-direction:column;gap:var(--space-10);padding-top:var(--space-8)}.rm-dsel__sr{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.rm-dsel__state{color:var(--text-secondary);font-size:var(--font-14,14px);font-style:italic;padding-top:var(--space-16);text-align:center}.rm-dsel__list{display:flex;flex-direction:column;list-style:none;margin:0;min-height:10px;overflow-y:auto;padding:0}.rm-dsel__list:not(:only-child){margin-top:16px}.rm-dsel__option.is-disabled{color:var(--text-muted);cursor:not-allowed}.rm-dsel__option{align-items:center;border-radius:var(--radius-sm,4px);cursor:pointer;display:flex;font-size:var(--font-14,14px);gap:var(--space-8);line-height:160%;margin:4px 0;min-height:24px;padding:var(--space-2) var(--space-4)}.rm-dsel__option :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__option.is-active{background:rgba(var(--brand-rgb),.05)}.rm-dsel__option.is-selected{font-weight:700}.rm-dsel__option.is-active :deep(svg),.rm-dsel__option.is-selected :deep(svg){color:var(--color-primary)}
278
297
  </style>
package/dist/runtime/components/PageHeader.vue CHANGED
@@ -14,6 +14,7 @@
14
14
  | `tabs: string[]` | `tabs: RmHeaderTab[]` | `{ key, label, active }` |
15
15
  | `index_menu` (a partir de 1) | `active` porte par l'onglet | cote fr_drugs_app, `app/utils/headerTabs.ts` fait le pont |
16
16
  | `@updateMenu` / `@update:Menu` | `@tab` | rend la cle, pas l'indice |
17
+ | `header-tooltips: string[]` | `hint` porte par l'onglet | Auriga prenait un tableau parallele a celui des onglets, ou un trou se lisait `null` : l'aide vit desormais sur l'onglet qu'elle decrit |
17
18
  | `sur-titre dans #Title` | `eyebrow` | ATTENTION : le slot `#title` impose sa police et sa taille, un petit libelle pose dedans ressort en serif 32 px |
18
19
 
19
20
  Il porte aussi les onglets de la page, sous le titre : c'etait la derniere
@@ -84,6 +85,7 @@ const router = useRouter()
84
85
  type="button"
85
86
  role="tab"
86
87
  :aria-selected="tab.active ? 'true' : 'false'"
88
+ :title="tab.hint || undefined"
87
89
  @click="emit('tab', tab.key)"
88
90
  >
89
91
  {{ tab.label }}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tekkare/romulus",
3
- "version": "0.1.154",
3
+ "version": "0.1.155",
4
4
  "description": "Romulus Design System - Nuxt module by Tekkare",
5
5
  "license": "MIT",
6
6
  "type": "module",