@tekkare/romulus 0.1.79 → 0.1.81
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.
- package/dist/module.json +1 -1
- package/dist/runtime/components/ComplexSelect.vue +63 -25
- package/dist/runtime/components/DropdownSelect.vue +1 -1
- package/dist/runtime/components/FilterBar.vue +1 -1
- package/dist/runtime/components/KpiBar.vue +5 -4
- package/dist/runtime/components/MultipleSelect.vue +1 -1
- package/dist/runtime/components/PageHeader.vue +1 -1
- package/dist/runtime/components/ToolbarSources.vue +1 -1
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -35,10 +35,20 @@ export interface RmComplexSelectPreset {
|
|
|
35
35
|
values: string[]
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
/**
|
|
39
|
+
* Une option dont le libelle differe de la valeur retenue : la liste montre
|
|
40
|
+
* « KEYTRUDA », le filtre porte sur le code. Une chaine seule vaut pour les
|
|
41
|
+
* deux.
|
|
42
|
+
*/
|
|
43
|
+
export interface RmComplexSelectOption {
|
|
44
|
+
label: string
|
|
45
|
+
value: string
|
|
46
|
+
}
|
|
47
|
+
|
|
38
48
|
const props = withDefaults(defineProps<{
|
|
39
49
|
/** Intitule pose au-dessus du champ. */
|
|
40
50
|
label: string
|
|
41
|
-
options: string[]
|
|
51
|
+
options: (string | RmComplexSelectOption)[]
|
|
42
52
|
loading?: boolean
|
|
43
53
|
disabled?: boolean
|
|
44
54
|
/** Selections rapides. Vides, la section ne sort pas. */
|
|
@@ -96,6 +106,18 @@ const emit = defineEmits<{
|
|
|
96
106
|
}>()
|
|
97
107
|
|
|
98
108
|
const selected = defineModel<string[]>({ default: () => [] })
|
|
109
|
+
/**
|
|
110
|
+
* Saisie de la colonne « ajouter ». Exposee pour que la page aille chercher
|
|
111
|
+
* les options correspondantes quand la liste vient du serveur.
|
|
112
|
+
*/
|
|
113
|
+
const addSearch = defineModel<string>('search', { default: '' })
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Ce qui est tape, avant amortissement. Le modele `search` ne recoit la
|
|
117
|
+
* saisie qu'une fois la frappe finie : la page s'en sert pour interroger
|
|
118
|
+
* l'index, et une requete par lettre le noierait.
|
|
119
|
+
*/
|
|
120
|
+
const addInput = ref('')
|
|
99
121
|
|
|
100
122
|
const WORDS = {
|
|
101
123
|
fr: {
|
|
@@ -131,7 +153,6 @@ const WORDS = {
|
|
|
131
153
|
const t = computed(() => WORDS[props.lang])
|
|
132
154
|
|
|
133
155
|
const isOpen = ref(false)
|
|
134
|
-
const addSearch = ref('')
|
|
135
156
|
const removeSearch = ref('')
|
|
136
157
|
const activePreset = ref<string>()
|
|
137
158
|
const alignRight = ref(false)
|
|
@@ -152,23 +173,37 @@ function placePanel() {
|
|
|
152
173
|
alignRight.value = rect.left + PANEL_WIDTH > window.innerWidth - 8
|
|
153
174
|
}
|
|
154
175
|
|
|
176
|
+
/** Les chaines nues valent libelle et valeur a la fois. */
|
|
177
|
+
const allOptions = computed<RmComplexSelectOption[]>(() =>
|
|
178
|
+
props.options.map(option =>
|
|
179
|
+
typeof option === 'string' ? { label: option, value: option } : option,
|
|
180
|
+
),
|
|
181
|
+
)
|
|
182
|
+
|
|
183
|
+
/** Le libelle d'une valeur retenue, meme si elle a quitte la liste. */
|
|
184
|
+
const labelOf = computed(() => {
|
|
185
|
+
const map = new Map(allOptions.value.map(option => [option.value, option.label]))
|
|
186
|
+
return (value: string) => map.get(value) ?? value
|
|
187
|
+
})
|
|
188
|
+
|
|
155
189
|
/** La colonne de gauche ne propose que ce qui n'est pas deja retenu. */
|
|
156
190
|
const addOptions = computed(() => {
|
|
157
|
-
const needle =
|
|
191
|
+
const needle = addInput.value.trim().toLowerCase()
|
|
158
192
|
const parts = needle && props.filterSearch ? needle.split(' ').filter(Boolean) : []
|
|
159
|
-
return
|
|
160
|
-
.filter(option => !selected.value.includes(option))
|
|
161
|
-
.filter(option => parts.every(part => option.toLowerCase().includes(part)))
|
|
193
|
+
return allOptions.value
|
|
194
|
+
.filter(option => !selected.value.includes(option.value))
|
|
195
|
+
.filter(option => parts.every(part => option.label.toLowerCase().includes(part)))
|
|
162
196
|
.slice(0, props.maxOptions)
|
|
163
197
|
})
|
|
164
198
|
|
|
165
|
-
const removeOptions = computed(() => {
|
|
199
|
+
const removeOptions = computed<RmComplexSelectOption[]>(() => {
|
|
200
|
+
const chosen = selected.value.map(value => ({ label: labelOf.value(value), value }))
|
|
166
201
|
const needle = removeSearch.value.trim().toLowerCase()
|
|
167
|
-
if (!needle) return
|
|
168
|
-
return
|
|
202
|
+
if (!needle) return chosen
|
|
203
|
+
return chosen.filter(option => option.label.toLowerCase().includes(needle))
|
|
169
204
|
})
|
|
170
205
|
|
|
171
|
-
const summary = computed(() => selected.value.join(', '))
|
|
206
|
+
const summary = computed(() => selected.value.map(value => labelOf.value(value)).join(', '))
|
|
172
207
|
|
|
173
208
|
const selectAllLabel = computed(() => {
|
|
174
209
|
if (!props.selectAllCount) return t.value.all
|
|
@@ -177,9 +212,12 @@ const selectAllLabel = computed(() => {
|
|
|
177
212
|
})
|
|
178
213
|
|
|
179
214
|
let debounceId: ReturnType<typeof setTimeout> | undefined
|
|
180
|
-
watch(
|
|
215
|
+
watch(addInput, (value) => {
|
|
181
216
|
clearTimeout(debounceId)
|
|
182
|
-
debounceId = setTimeout(() =>
|
|
217
|
+
debounceId = setTimeout(() => {
|
|
218
|
+
addSearch.value = value
|
|
219
|
+
emit('search', value)
|
|
220
|
+
}, 500)
|
|
183
221
|
})
|
|
184
222
|
|
|
185
223
|
function close() {
|
|
@@ -208,19 +246,19 @@ function commit(values: string[]) {
|
|
|
208
246
|
emit('change', values)
|
|
209
247
|
}
|
|
210
248
|
|
|
211
|
-
function add(
|
|
249
|
+
function add(value: string) {
|
|
212
250
|
activePreset.value = undefined
|
|
213
|
-
commit([...selected.value,
|
|
251
|
+
commit([...selected.value, value])
|
|
214
252
|
}
|
|
215
253
|
|
|
216
|
-
function remove(
|
|
254
|
+
function remove(value: string) {
|
|
217
255
|
activePreset.value = undefined
|
|
218
|
-
commit(selected.value.filter(
|
|
256
|
+
commit(selected.value.filter(kept => kept !== value))
|
|
219
257
|
}
|
|
220
258
|
|
|
221
259
|
function addAll() {
|
|
222
260
|
activePreset.value = undefined
|
|
223
|
-
commit([...selected.value, ...addOptions.value])
|
|
261
|
+
commit([...selected.value, ...addOptions.value.map(option => option.value)])
|
|
224
262
|
}
|
|
225
263
|
|
|
226
264
|
function clearAll() {
|
|
@@ -320,7 +358,7 @@ onUnmounted(() => {
|
|
|
320
358
|
<PhMagnifyingGlass :size="14" />
|
|
321
359
|
<input
|
|
322
360
|
ref="addRef"
|
|
323
|
-
v-model="
|
|
361
|
+
v-model="addInput"
|
|
324
362
|
type="search"
|
|
325
363
|
class="rm-csel__search-input"
|
|
326
364
|
:placeholder="addPlaceholder || t.searchAdd"
|
|
@@ -338,13 +376,13 @@ onUnmounted(() => {
|
|
|
338
376
|
<div v-else class="rm-csel__list">
|
|
339
377
|
<button
|
|
340
378
|
v-for="option in addOptions"
|
|
341
|
-
:key="option"
|
|
379
|
+
:key="option.value"
|
|
342
380
|
type="button"
|
|
343
381
|
class="rm-csel__option rm-csel__option--add"
|
|
344
|
-
@click="add(option)"
|
|
382
|
+
@click="add(option.value)"
|
|
345
383
|
>
|
|
346
384
|
<PhPlusCircle :size="16" weight="fill" />
|
|
347
|
-
<span>{{ option }}</span>
|
|
385
|
+
<span>{{ option.label }}</span>
|
|
348
386
|
</button>
|
|
349
387
|
</div>
|
|
350
388
|
</div>
|
|
@@ -380,13 +418,13 @@ onUnmounted(() => {
|
|
|
380
418
|
<div v-else class="rm-csel__list">
|
|
381
419
|
<button
|
|
382
420
|
v-for="option in removeOptions"
|
|
383
|
-
:key="option"
|
|
421
|
+
:key="option.value"
|
|
384
422
|
type="button"
|
|
385
423
|
class="rm-csel__option rm-csel__option--remove"
|
|
386
|
-
@click="remove(option)"
|
|
424
|
+
@click="remove(option.value)"
|
|
387
425
|
>
|
|
388
426
|
<PhMinusCircle :size="16" weight="fill" />
|
|
389
|
-
<span>{{ option }}</span>
|
|
427
|
+
<span>{{ option.label }}</span>
|
|
390
428
|
</button>
|
|
391
429
|
</div>
|
|
392
430
|
</div>
|
|
@@ -395,5 +433,5 @@ onUnmounted(() => {
|
|
|
395
433
|
</template>
|
|
396
434
|
|
|
397
435
|
<style scoped>
|
|
398
|
-
.rm-csel{align-items:
|
|
436
|
+
.rm-csel{align-items:stretch;display:flex;flex-direction:column;gap:4px;position:relative;width:196px}.rm-csel__label{align-items:center;color:var(--text-secondary);display:flex;font-size:var(--font-12,12px);gap:4px;line-height:14px}.rm-csel__info{background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;padding:0}.rm-csel__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:4px;line-height:16px;padding:12px;text-align:left;width:100%}.rm-csel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-csel__field.is-open{border-color:var(--color-primary)}.rm-csel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-csel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-csel__value-slot{display:block;flex:1;min-width:0}.rm-csel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-csel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-csel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-csel__count{align-items:center;background:rgba(var(--brand-rgb),.1);border-radius:50%;color:var(--color-primary);display:flex;flex-shrink:0;font-size:var(--font-12,12px);font-weight:600;height:20px;justify-content:center;width:20px}.rm-csel__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;left:0;margin-top:8px;max-width:calc(100vw - 32px);position:absolute;right:auto;top:100%;width:820px;z-index:12}.rm-csel__panel--right{left:auto;right:0}.rm-csel__column{display:flex;flex:1;flex-direction:column;gap:8px;min-width:0;padding:16px}.rm-csel__column--right{border-left:1px solid var(--border-soft);flex:0 0 300px}.rm-csel__presets{border-bottom:1px solid var(--border-soft);display:flex;flex-direction:column;gap:8px;padding-bottom:8px}.rm-csel__pills{display:flex;flex-wrap:wrap;gap:4px}.rm-csel__pill{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:9999px;color:var(--text-secondary);cursor:pointer;font-family:inherit;font-size:var(--font-12,12px);padding:4px 10px}.rm-csel__pill.is-active,.rm-csel__pill:hover{border-color:var(--color-primary);color:var(--color-primary)}.rm-csel__pill.is-active{background:rgba(var(--brand-rgb),.1);font-weight:700}.rm-csel__head{align-items:center;display:flex;gap:8px;justify-content:space-between}.rm-csel__section{color:var(--text-secondary);font-size:var(--font-12,12px);font-weight:700;margin:0}.rm-csel__action{background:none;border:none;color:var(--color-primary);cursor:pointer;font-family:inherit;font-size:var(--font-12,12px);font-weight:600;padding:0}.rm-csel__action:disabled{color:var(--text-muted);cursor:not-allowed}.rm-csel__action:hover:not(:disabled){text-decoration:underline}.rm-csel__action--clear:not(:disabled){color:var(--color-danger)}.rm-csel__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md,8px);display:flex;gap:8px;padding:6px 10px}.rm-csel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-csel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-13,13px);width:100%}.rm-csel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-csel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-csel__search-input:focus-visible{outline:none}.rm-csel__state{color:var(--text-secondary);font-size:var(--font-13,13px);font-style:italic;padding-top:8px}.rm-csel__loading{display:flex;flex-direction:column;gap:10px;padding-top:8px}.rm-csel__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-csel__list{display:flex;flex-direction:column;gap:4px;height:260px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.rm-csel__option{align-items:flex-start;background:none;border:none;border-radius:var(--radius-sm,4px);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13,13px);gap:8px;line-height:150%;min-width:0;padding:2px 4px;text-align:left}.rm-csel__option span{min-width:0;overflow-wrap:anywhere}.rm-csel__option :deep(svg){background:var(--bg-surface);border-radius:50%;flex-shrink:0;margin-top:3px}.rm-csel__option:hover{background:rgba(var(--brand-rgb),.05)}.rm-csel__option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-csel__option--add :deep(svg){color:var(--color-primary)}.rm-csel__option--remove :deep(svg){color:var(--color-danger)}@media (max-width:767px){.rm-csel__panel{flex-direction:column;width:calc(100vw - 32px)}.rm-csel__column--right{border-left:none;border-top:1px solid var(--border-soft)}.rm-csel__list{height:180px}}
|
|
399
437
|
</style>
|
|
@@ -236,5 +236,5 @@ onUnmounted(() => {
|
|
|
236
236
|
</template>
|
|
237
237
|
|
|
238
238
|
<style scoped>
|
|
239
|
-
.rm-dsel{align-items:
|
|
239
|
+
.rm-dsel{align-items:stretch;display:flex;flex-direction:column;gap:4px;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:4px;line-height:16px;padding:12px;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{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;flex-direction:column;left:0;margin-top:8px;max-height:500px;max-width:320px;min-width:230px;padding:16px;position:absolute;top:100%;z-index:12}.rm-dsel__panel,.rm-dsel__search{background:var(--bg-surface);display:flex}.rm-dsel__search{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-md,8px);gap:8px;padding:8px 12px}.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:10px;padding-top:8px}.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:16px;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:8px;line-height:160%;margin:4px 0;min-height:24px;padding:2px 4px}.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)}
|
|
240
240
|
</style>
|
|
@@ -275,5 +275,5 @@ onBeforeUnmount(() => {
|
|
|
275
275
|
</template>
|
|
276
276
|
|
|
277
277
|
<style scoped>
|
|
278
|
-
.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:
|
|
278
|
+
.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-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: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-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}
|
|
279
279
|
</style>
|
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
Rangee de KPI en tete d'une page de liste : une carte, N tuiles cote a cote,
|
|
3
3
|
chacune avec son icone dans un carre clair, sa valeur et sa legende.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
Reprend la disposition d'`arg-home-kpis` d'Auriga. La valeur est en serif
|
|
6
|
+
comme partout ailleurs : une valeur KPI en sans-serif est l'anti-pattern
|
|
7
|
+
nomme par la fiche. RmKpi (tuile seule, avec tendance) reste la tuile des
|
|
8
|
+
tableaux de bord d'analyse ; ici c'est la barre de volumetrie d'une liste.
|
|
8
9
|
-->
|
|
9
10
|
<script setup lang="ts">
|
|
10
11
|
import { computed } from 'vue'
|
|
@@ -75,5 +76,5 @@ function display(value: RmKpiBarItem['value']) {
|
|
|
75
76
|
</template>
|
|
76
77
|
|
|
77
78
|
<style scoped>
|
|
78
|
-
.rm-kpibar{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xs);color:var(--text-primary);flex-direction:column;font-family:var(--font-sans);padding:16px}.rm-kpibar,.rm-kpibar__items{align-self:stretch;display:flex;gap:16px}.rm-kpibar__items{align-items:center}.rm-kpibar__item{align-items:center;display:flex;flex:1 0 0;gap:16px;min-width:0}.rm-kpibar__icon{align-items:center;background:var(--bg-surface-3);border-radius:var(--radius-lg);color:var(--text-secondary);display:flex;flex:0 0 auto;justify-content:center;padding:8px}.rm-kpibar__text{align-items:flex-start;display:flex;flex-direction:column;gap:4px;min-width:0}.rm-kpibar__value{color:var(--color-primary);font-size:var(--font-22);font-weight:var(--weight-bold);line-height:normal;margin:0}.rm-kpibar__legend{color:var(--text-secondary);font-size:var(--font-12);line-height:normal;margin:0}.rm-kpibar__subtitle{color:var(--text-muted);font-size:var(--font-11);line-height:1.3;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
79
|
+
.rm-kpibar{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xs);color:var(--text-primary);flex-direction:column;font-family:var(--font-sans);padding:16px}.rm-kpibar,.rm-kpibar__items{align-self:stretch;display:flex;gap:16px}.rm-kpibar__items{align-items:center}.rm-kpibar__item{align-items:center;display:flex;flex:1 0 0;gap:16px;min-width:0}.rm-kpibar__icon{align-items:center;background:var(--bg-surface-3);border-radius:var(--radius-lg);color:var(--text-secondary);display:flex;flex:0 0 auto;justify-content:center;padding:8px}.rm-kpibar__text{align-items:flex-start;display:flex;flex-direction:column;gap:4px;min-width:0}.rm-kpibar__value{color:var(--color-primary);font-family:var(--font-serif);font-size:var(--font-22);font-weight:var(--weight-bold);line-height:normal;margin:0}.rm-kpibar__legend{color:var(--text-secondary);font-size:var(--font-12);line-height:normal;margin:0}.rm-kpibar__subtitle{color:var(--text-muted);font-size:var(--font-11);line-height:1.3;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
79
80
|
</style>
|
|
@@ -264,5 +264,5 @@ onUnmounted(() => {
|
|
|
264
264
|
</template>
|
|
265
265
|
|
|
266
266
|
<style scoped>
|
|
267
|
-
.rm-msel{align-items:
|
|
267
|
+
.rm-msel{align-items:stretch;display:flex;flex-direction:column;gap:4px;position:relative;width:196px}.rm-msel__label{align-items:center;color:var(--text-secondary);display:flex;font-size:var(--font-12,12px);gap:4px;line-height:14px}.rm-msel__info{background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;padding:0}.rm-msel__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:4px;line-height:16px;padding:12px;text-align:left;width:100%}.rm-msel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-msel__field.is-open{border-color:var(--color-primary)}.rm-msel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-msel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-msel__value-slot{display:block;flex:1;min-width:0}.rm-msel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-msel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-msel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-msel__count{align-items:center;background:rgba(var(--brand-rgb),.1);border-radius:50%;color:var(--color-primary);display:flex;flex-shrink:0;font-size:var(--font-12,12px);font-weight:600;height:20px;justify-content:center;width:20px}.rm-msel__panel{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;flex-direction:column;left:0;margin-top:8px;max-height:500px;max-width:320px;min-width:230px;padding:16px;position:absolute;top:100%;z-index:12}.rm-msel__panel,.rm-msel__search{background:var(--bg-surface);display:flex}.rm-msel__search{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-md,8px);gap:8px;padding:8px 12px}.rm-msel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-msel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-14,14px);width:100%}.rm-msel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-msel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-msel__search-input:focus-visible{outline:none}.rm-msel__loading{display:flex;flex-direction:column;gap:10px;padding-top:8px}.rm-msel__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-msel__state{color:var(--text-secondary);font-size:var(--font-14,14px);font-style:italic;padding-top:16px;text-align:center}.rm-msel__list{display:flex;flex-direction:column;min-height:10px;overflow-y:auto}.rm-msel__list:not(:only-child){margin-top:16px}.rm-msel__indent{margin-left:16px}.rm-msel__option{align-items:center;background:none;border:none;border-radius:var(--radius-sm,4px);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);gap:8px;line-height:160%;margin:4px 0;min-height:24px;padding:2px 4px;text-align:left;width:100%}.rm-msel__option :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-msel__option:hover{background:rgba(var(--brand-rgb),.05)}.rm-msel__option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-msel__option.is-checked{font-weight:700}.rm-msel__option.is-checked :deep(svg),.rm-msel__option:hover :deep(svg){color:var(--color-primary)}
|
|
268
268
|
</style>
|
|
@@ -80,5 +80,5 @@ const router = useRouter()
|
|
|
80
80
|
</template>
|
|
81
81
|
|
|
82
82
|
<style scoped>
|
|
83
|
-
.rm-page-header{backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);gap:12px;padding:16px 32px 12px;position:sticky;top:0;width:100%;z-index:95}.rm-page-header__row{align-items:center;align-self:stretch;display:flex;gap:16px}.rm-page-header__back{background:transparent;border:none;color:inherit;cursor:pointer;display:inline-flex;padding:0}.rm-page-header__heading{flex-grow:2;min-width:0}.rm-page-header__eyebrow{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-medium);margin:0 0 2px}.rm-page-header__title{flex-grow:2;font-size:
|
|
83
|
+
.rm-page-header{backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);gap:12px;padding:16px 32px 12px;position:sticky;top:0;width:100%;z-index:95}.rm-page-header__row{align-items:center;align-self:stretch;display:flex;gap:16px}.rm-page-header__back{background:transparent;border:none;color:inherit;cursor:pointer;display:inline-flex;padding:0}.rm-page-header__heading{flex-grow:2;min-width:0}.rm-page-header__eyebrow{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-medium);margin:0 0 2px}.rm-page-header__title{flex-grow:2;font-family:var(--font-serif);font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0;min-width:0}.rm-page-header__title :deep(h1),.rm-page-header__title :deep(h2),.rm-page-header__title :deep(p){font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-page-header__actions{align-items:center;display:flex;flex:0 0 auto;gap:16px}.rm-page-header__tabs{display:flex;gap:8px;margin-bottom:-13px;overflow-x:auto}.rm-page-header__tab{background:none;border:none;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;color:var(--text-muted);cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;line-height:1.6;padding:8px 16px 10px;transition:background-color .3s,color .15s;white-space:nowrap}.rm-page-header__tab:hover{color:var(--color-primary)}.rm-page-header__tab--active{background:color-mix(in srgb,var(--color-primary) 6%,transparent);border-bottom-color:var(--color-primary);color:var(--color-primary);font-weight:600}
|
|
84
84
|
</style>
|
|
@@ -66,5 +66,5 @@ const t = computed(() => WORDS[props.lang])
|
|
|
66
66
|
</template>
|
|
67
67
|
|
|
68
68
|
<style scoped>
|
|
69
|
-
.rm-tbs{align-self:stretch;display:flex;flex-direction:column;gap:16px}.rm-tbs__title{color:var(--text-primary);font-size:var(--font-18,18px);font-weight:
|
|
69
|
+
.rm-tbs{align-self:stretch;display:flex;flex-direction:column;gap:16px}.rm-tbs__title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-18,18px);font-weight:700;margin:0}.rm-tbs__legal{color:var(--text-secondary);display:flex;flex-direction:column;font-size:var(--font-12,12px);gap:8px;line-height:1.6}.rm-tbs__legal p{margin:0}.rm-tbs__link{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}.rm-tbs__list{align-self:stretch;display:flex;flex-direction:column;gap:12px}
|
|
70
70
|
</style>
|