@tekkare/romulus 0.1.156 → 0.1.158
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
CHANGED
|
@@ -26,6 +26,14 @@ export interface RmDrawerProps {
|
|
|
26
26
|
labelledBy?: string
|
|
27
27
|
/** Libelle du bouton de fermeture, pour les lecteurs d'ecran. */
|
|
28
28
|
closeLabel?: string
|
|
29
|
+
/**
|
|
30
|
+
* Plan de superposition, quand le tiroir doit passer au-dessus d'un calque
|
|
31
|
+
* plus haut que le sien : un ecran qui pose son propre voile par-dessus le
|
|
32
|
+
* cadre laissait le tiroir derriere. Voile et panneau prennent la meme
|
|
33
|
+
* valeur, le panneau passe devant par l'ordre du DOM. Absent : la feuille
|
|
34
|
+
* decide (90 et 91).
|
|
35
|
+
*/
|
|
36
|
+
zIndex?: number | string
|
|
29
37
|
}
|
|
30
38
|
|
|
31
39
|
const props = withDefaults(defineProps<RmDrawerProps>(), {
|
|
@@ -36,6 +44,7 @@ const props = withDefaults(defineProps<RmDrawerProps>(), {
|
|
|
36
44
|
label: undefined,
|
|
37
45
|
labelledBy: undefined,
|
|
38
46
|
closeLabel: 'Fermer',
|
|
47
|
+
zIndex: undefined,
|
|
39
48
|
})
|
|
40
49
|
|
|
41
50
|
const emit = defineEmits<{
|
|
@@ -58,6 +67,8 @@ const sizeMap: Record<string, string> = {
|
|
|
58
67
|
}
|
|
59
68
|
|
|
60
69
|
const drawerWidth = computed(() => sizeMap[props.size] || props.size)
|
|
70
|
+
|
|
71
|
+
const layer = computed(() => (props.zIndex === undefined ? undefined : { zIndex: props.zIndex }))
|
|
61
72
|
</script>
|
|
62
73
|
|
|
63
74
|
<template>
|
|
@@ -66,6 +77,7 @@ const drawerWidth = computed(() => sizeMap[props.size] || props.size)
|
|
|
66
77
|
<div
|
|
67
78
|
v-if="modelValue && overlay"
|
|
68
79
|
class="rm-drawer-overlay"
|
|
80
|
+
:style="layer"
|
|
69
81
|
@click="close"
|
|
70
82
|
/>
|
|
71
83
|
</Transition>
|
|
@@ -76,7 +88,7 @@ const drawerWidth = computed(() => sizeMap[props.size] || props.size)
|
|
|
76
88
|
ref="surface"
|
|
77
89
|
class="rm-drawer"
|
|
78
90
|
:class="[`rm-drawer--${side}`]"
|
|
79
|
-
:style="{ width: drawerWidth, [side]: offset }"
|
|
91
|
+
:style="[{ width: drawerWidth, [side]: offset }, layer]"
|
|
80
92
|
role="dialog"
|
|
81
93
|
aria-modal="true"
|
|
82
94
|
:aria-label="labelledBy ? undefined : label"
|
|
@@ -54,6 +54,13 @@ export interface RmNote {
|
|
|
54
54
|
updated?: string
|
|
55
55
|
/** Icone Phosphor. Par defaut celle de la categorie. */
|
|
56
56
|
icon?: string
|
|
57
|
+
/**
|
|
58
|
+
* Etiquette libre, posee apres la categorie. Elle dit d'ou la note vient
|
|
59
|
+
* plutot que ce qu'elle raconte : l'appelant s'en sert pour un public
|
|
60
|
+
* particulier (une equipe qui relit ses rattachements), pas pour le lecteur.
|
|
61
|
+
* A ne pas confondre avec `badge`, qui signe le panneau entier.
|
|
62
|
+
*/
|
|
63
|
+
tag?: string
|
|
57
64
|
/** Teinte de la pastille. Par defaut celle de la categorie. */
|
|
58
65
|
tone?: RmNoteTone
|
|
59
66
|
sections: RmNoteSection[]
|
|
@@ -294,6 +301,9 @@ function onLink(to: string) {
|
|
|
294
301
|
<span class="rm-notes__tag" :class="`rm-notes__tag--${noteTone(note)}`">
|
|
295
302
|
{{ categoryLabel(note) }}
|
|
296
303
|
</span>
|
|
304
|
+
<span v-if="note.tag" class="rm-notes__tag rm-notes__tag--muted">
|
|
305
|
+
{{ note.tag }}
|
|
306
|
+
</span>
|
|
297
307
|
<span v-if="updatedLabel(note)" class="rm-notes__cell">
|
|
298
308
|
<RmIcon name="Clock" :size="13" />
|
|
299
309
|
{{ T.updated }} {{ updatedLabel(note) }}
|
|
@@ -376,5 +386,5 @@ function onLink(to: string) {
|
|
|
376
386
|
</template>
|
|
377
387
|
|
|
378
388
|
<style scoped>
|
|
379
|
-
.rm-notes{align-self:stretch;flex-direction:column;font-family:var(--font-sans)}.rm-notes,.rm-notes__head{display:flex;gap:var(--space-12)}.rm-notes__head{align-items:center;justify-content:space-between}.rm-notes__title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-22);font-weight:var(--weight-bold);margin:0}.rm-notes__badge{align-items:center;background:var(--bg-hover);border-radius:var(--radius-pill);color:var(--color-secondary);display:inline-flex;font-size:var(--font-10);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;padding:var(--space-4) var(--space-10);text-transform:uppercase}.rm-notes__desc{color:var(--text-secondary);font-size:var(--font-13);line-height:1.5;margin:0}.rm-notes__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-muted);display:flex;gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-notes__search:focus-within{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.1)}.rm-notes__search input{background:none;border:none;color:var(--text-primary);flex:1;font-family:inherit;font-size:var(--font-13);min-width:0;outline:none}.rm-notes__search input::-moz-placeholder{color:var(--text-muted)}.rm-notes__search input::placeholder{color:var(--text-muted)}.rm-notes__chips{display:flex;flex-wrap:wrap;gap:var(--space-6)}.rm-notes__chip{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-12);gap:var(--space-4);padding:5px var(--space-10)}.rm-notes__chip:hover{background:var(--bg-surface-3)}.rm-notes__chip--on{background:var(--bg-hover);border-color:var(--color-violet-pale);color:var(--color-primary);font-weight:var(--weight-semibold)}.rm-notes__chip-count{font-variant-numeric:tabular-nums;opacity:.8}.rm-notes__list,.rm-notes__note{display:flex;flex-direction:column;gap:var(--space-8)}.rm-notes__note{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-16);transition:border-color var(--duration-fast) var(--ease-out)}.rm-notes__note:hover{border-color:var(--color-violet-pale)}.rm-notes__note--open{border-color:var(--color-secondary)}.rm-notes__note-head,.rm-notes__note-id{align-items:flex-start;display:flex;gap:var(--space-12)}.rm-notes__note-id{background:none;border:none;cursor:pointer;flex:1;font-family:inherit;min-width:0;padding:0;text-align:left}.rm-notes__note-icon{align-items:center;border-radius:var(--radius-lg);display:flex;flex-shrink:0;height:36px;justify-content:center;width:36px}.rm-notes__note-icon--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-notes__note-icon--info{background:var(--color-info-bg);color:var(--color-info)}.rm-notes__note-icon--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-notes__note-icon--success{background:var(--color-success-bg);color:var(--color-success)}.rm-notes__note-icon--neutral{background:var(--bg-surface-2);color:var(--text-secondary)}.rm-notes__note-text{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}.rm-notes__note-title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-16);font-weight:var(--weight-bold)}.rm-notes__note-meta{align-items:center;color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:var(--font-11);gap:var(--space-8)}.rm-notes__cell{align-items:center;display:inline-flex;gap:var(--space-4)}.rm-notes__tag{border-radius:var(--radius-pill);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.04em;padding:var(--space-2) var(--space-6);text-transform:uppercase}.rm-notes__tag--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-notes__tag--info{background:var(--color-info-bg);color:var(--color-info)}.rm-notes__tag--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-notes__tag--success{background:var(--color-success-bg);color:var(--color-success)}.rm-notes__tag--neutral{background:var(--bg-surface-2);color:var(--text-secondary)}.rm-notes__caret{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.rm-notes__caret:hover{background:var(--bg-surface-3)}.rm-notes__summary{color:var(--text-secondary);font-size:var(--font-13);line-height:1.6;margin:0}.rm-notes__body{border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:var(--space-16);padding-top:var(--space-12)}.rm-notes__section{display:flex;flex-direction:column;gap:var(--space-8)}.rm-notes__eyebrow{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;text-transform:uppercase}.rm-notes__p,.rm-notes__ul{color:var(--text-secondary);font-size:var(--font-13);line-height:1.65;margin:0}.rm-notes__ul{padding-left:var(--space-20)}.rm-notes__ul--terms{list-style:none;padding-left:0}.rm-notes__p b,.rm-notes__ul b{color:var(--text-primary)}.rm-notes__example{background:var(--bg-surface-3);border-left:3px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--font-12);margin:0;padding:var(--space-8) var(--space-12)}.rm-notes__link{align-items:center;color:var(--color-primary);cursor:pointer;display:inline-flex;font-size:var(--font-13);font-weight:var(--weight-semibold);gap:var(--space-4);text-decoration:underline;text-underline-offset:3px}
|
|
389
|
+
.rm-notes{align-self:stretch;flex-direction:column;font-family:var(--font-sans)}.rm-notes,.rm-notes__head{display:flex;gap:var(--space-12)}.rm-notes__head{align-items:center;justify-content:space-between}.rm-notes__title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-22);font-weight:var(--weight-bold);margin:0}.rm-notes__badge{align-items:center;background:var(--bg-hover);border-radius:var(--radius-pill);color:var(--color-secondary);display:inline-flex;font-size:var(--font-10);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;padding:var(--space-4) var(--space-10);text-transform:uppercase}.rm-notes__desc{color:var(--text-secondary);font-size:var(--font-13);line-height:1.5;margin:0}.rm-notes__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-muted);display:flex;gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-notes__search:focus-within{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.1)}.rm-notes__search input{background:none;border:none;color:var(--text-primary);flex:1;font-family:inherit;font-size:var(--font-13);min-width:0;outline:none}.rm-notes__search input::-moz-placeholder{color:var(--text-muted)}.rm-notes__search input::placeholder{color:var(--text-muted)}.rm-notes__chips{display:flex;flex-wrap:wrap;gap:var(--space-6)}.rm-notes__chip{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-12);gap:var(--space-4);padding:5px var(--space-10)}.rm-notes__chip:hover{background:var(--bg-surface-3)}.rm-notes__chip--on{background:var(--bg-hover);border-color:var(--color-violet-pale);color:var(--color-primary);font-weight:var(--weight-semibold)}.rm-notes__chip-count{font-variant-numeric:tabular-nums;opacity:.8}.rm-notes__list,.rm-notes__note{display:flex;flex-direction:column;gap:var(--space-8)}.rm-notes__note{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-16);transition:border-color var(--duration-fast) var(--ease-out)}.rm-notes__note:hover{border-color:var(--color-violet-pale)}.rm-notes__note--open{border-color:var(--color-secondary)}.rm-notes__note-head,.rm-notes__note-id{align-items:flex-start;display:flex;gap:var(--space-12)}.rm-notes__note-id{background:none;border:none;cursor:pointer;flex:1;font-family:inherit;min-width:0;padding:0;text-align:left}.rm-notes__note-icon{align-items:center;border-radius:var(--radius-lg);display:flex;flex-shrink:0;height:36px;justify-content:center;width:36px}.rm-notes__note-icon--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-notes__note-icon--info{background:var(--color-info-bg);color:var(--color-info)}.rm-notes__note-icon--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-notes__note-icon--success{background:var(--color-success-bg);color:var(--color-success)}.rm-notes__note-icon--neutral{background:var(--bg-surface-2);color:var(--text-secondary)}.rm-notes__note-text{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}.rm-notes__note-title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-16);font-weight:var(--weight-bold)}.rm-notes__note-meta{align-items:center;color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:var(--font-11);gap:var(--space-8)}.rm-notes__cell{align-items:center;display:inline-flex;gap:var(--space-4)}.rm-notes__tag{border-radius:var(--radius-pill);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.04em;padding:var(--space-2) var(--space-6);text-transform:uppercase}.rm-notes__tag--muted{background:var(--bg-surface-2);color:var(--text-secondary)}.rm-notes__tag--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-notes__tag--info{background:var(--color-info-bg);color:var(--color-info)}.rm-notes__tag--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-notes__tag--success{background:var(--color-success-bg);color:var(--color-success)}.rm-notes__tag--neutral{background:var(--bg-surface-2);color:var(--text-secondary)}.rm-notes__caret{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.rm-notes__caret:hover{background:var(--bg-surface-3)}.rm-notes__summary{color:var(--text-secondary);font-size:var(--font-13);line-height:1.6;margin:0}.rm-notes__body{border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:var(--space-16);padding-top:var(--space-12)}.rm-notes__section{display:flex;flex-direction:column;gap:var(--space-8)}.rm-notes__eyebrow{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;text-transform:uppercase}.rm-notes__p,.rm-notes__ul{color:var(--text-secondary);font-size:var(--font-13);line-height:1.65;margin:0}.rm-notes__ul{padding-left:var(--space-20)}.rm-notes__ul--terms{list-style:none;padding-left:0}.rm-notes__p b,.rm-notes__ul b{color:var(--text-primary)}.rm-notes__example{background:var(--bg-surface-3);border-left:3px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--font-12);margin:0;padding:var(--space-8) var(--space-12)}.rm-notes__link{align-items:center;color:var(--color-primary);cursor:pointer;display:inline-flex;font-size:var(--font-13);font-weight:var(--weight-semibold);gap:var(--space-4);text-decoration:underline;text-underline-offset:3px}
|
|
380
390
|
</style>
|