@tekkare/romulus 0.1.142 → 0.1.144
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
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
Barre de filtres d'une page de liste.
|
|
3
3
|
|
|
4
|
-
Au repos, une barre fine collee sous le bandeau de page (RmPageHeader) :
|
|
5
|
-
selecteur de vue si la page en publie un
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
Au repos, une barre fine collee sous le bandeau de page (RmPageHeader) : la
|
|
5
|
+
puce « Filtres », puis le selecteur de vue si la page en publie un
|
|
6
|
+
(useRmFilterBarView), puis la recherche, rien d'autre. « Filtres » ouvre en
|
|
7
|
+
tete parce que c'est le geste de tous les jours ; la vue se lit ensuite,
|
|
8
|
+
comme le perimetre sous lequel les filtres s'appliquent.
|
|
9
|
+
|
|
10
|
+
La puce ouvre en accordeon le panneau qui contient tous les filtres ; c'est
|
|
11
|
+
la que vivent « Sauvegarder un scope » et « Effacer les filtres ». Le nombre
|
|
12
|
+
de filtres actifs reste visible puce.
|
|
10
13
|
|
|
11
14
|
Slots : #CardTitle (libelle de la puce si `customTitle`), #Rail (sur la
|
|
12
15
|
barre, a cote de la puce : le reglage qu'on change tout le temps et qui ne
|
|
@@ -165,9 +168,17 @@ onBeforeUnmount(() => {
|
|
|
165
168
|
:style="{ top: `${stickyTop}px`, '--rm-fbar-advanced-w': `${advancedWidth}px` }"
|
|
166
169
|
>
|
|
167
170
|
<div class="rm-fbar__row">
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
+
<button type="button" class="rm-fbar__toggle" :class="{ 'is-active': open }" @click="toggle('filters')">
|
|
172
|
+
<RmIcon name="Funnel" :size="16" />
|
|
173
|
+
<span v-if="customTitle"><slot name="CardTitle" /></span>
|
|
174
|
+
<span v-else>{{ t.title }}</span>
|
|
175
|
+
<span v-if="filtersAmount" class="rm-fbar__badge">{{ filtersAmount }}</span>
|
|
176
|
+
</button>
|
|
177
|
+
|
|
178
|
+
<!-- Emplacement de la pastille de vue, juste apres « Filtres » : le
|
|
179
|
+
geste de tous les jours ouvre la barre, la vue dit sous quel
|
|
180
|
+
perimetre il se lit. Le cadre de l'app l'y pose par un Teleport, la
|
|
181
|
+
barre n'a pas a connaitre les vues. -->
|
|
171
182
|
<div id="rm_fbar_views" class="rm-fbar__views">
|
|
172
183
|
<slot name="Views" />
|
|
173
184
|
</div>
|
|
@@ -181,13 +192,6 @@ onBeforeUnmount(() => {
|
|
|
181
192
|
/>
|
|
182
193
|
</div>
|
|
183
194
|
|
|
184
|
-
<button type="button" class="rm-fbar__toggle" :class="{ 'is-active': open }" @click="toggle('filters')">
|
|
185
|
-
<RmIcon name="Funnel" :size="16" />
|
|
186
|
-
<span v-if="customTitle"><slot name="CardTitle" /></span>
|
|
187
|
-
<span v-else>{{ t.title }}</span>
|
|
188
|
-
<span v-if="filtersAmount" class="rm-fbar__badge">{{ filtersAmount }}</span>
|
|
189
|
-
</button>
|
|
190
|
-
|
|
191
195
|
<button
|
|
192
196
|
v-if="hasCustomize"
|
|
193
197
|
type="button"
|
|
@@ -396,5 +396,5 @@ function onCardClick() {
|
|
|
396
396
|
</template>
|
|
397
397
|
|
|
398
398
|
<style scoped>
|
|
399
|
-
.rm-view{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);padding:14px 18px;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.rm-view:not(.rm-view--active):hover{background:var(--bg-hover);border-color:var(--color-accent-soft)}.rm-view--active{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.08);cursor:default}.rm-view__strip{align-items:center;background:var(--bg-hover);border-bottom:1px solid var(--border-soft);border-radius:7px 7px 0 0;color:var(--color-secondary);display:flex;font-size:var(--font-11);font-weight:var(--weight-bold);gap:var(--space-8);letter-spacing:.06em;margin:-14px -18px var(--space-12);padding:var(--space-8) var(--space-16);text-transform:uppercase}.rm-view__strip-mark{align-items:center;display:inline-flex;gap:var(--space-6)
|
|
399
|
+
.rm-view{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);padding:14px 18px;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.rm-view:not(.rm-view--active):hover{background:var(--bg-hover);border-color:var(--color-accent-soft)}.rm-view--active{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.08);cursor:default}.rm-view__strip{align-items:center;background:var(--bg-hover);border-bottom:1px solid var(--border-soft);border-radius:7px 7px 0 0;color:var(--color-secondary);display:flex;flex-wrap:wrap;font-size:var(--font-11);font-weight:var(--weight-bold);gap:var(--space-8);letter-spacing:.06em;margin:-14px -18px var(--space-12);padding:var(--space-8) var(--space-16);text-transform:uppercase}.rm-view__strip-mark{align-items:center;display:inline-flex;gap:var(--space-6);white-space:nowrap}.rm-view__head{align-items:center;display:flex;gap:var(--space-10)}.rm-view__icon{align-items:center;border-radius:var(--radius-md);display:inline-flex;flex:0 0 auto;height:34px;justify-content:center;width:34px}.rm-view__icon--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-view__icon--success{background:var(--color-success-bg);color:var(--color-success)}.rm-view__icon--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-view__icon--danger{background:var(--color-danger-bg);color:var(--color-danger)}.rm-view__icon--info{background:var(--color-info-bg);color:var(--color-info)}.rm-view__star{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;flex:0 0 auto;height:28px;justify-content:center;padding:0;width:28px}.rm-view__star:hover{background:var(--bg-hover)}.rm-view__star--on,.rm-view__star:hover{color:var(--color-warning)}.rm-view__title,.rm-view__title-edit{flex:1;font-size:var(--font-16);font-weight:var(--weight-bold);min-width:0}.rm-view__title-edit{background:var(--bg-surface);border:1px solid var(--color-secondary);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;outline:none;padding:var(--space-2) var(--space-8)}.rm-view__title-edit:focus{box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}.rm-view__actions{align-items:center;display:flex;gap:var(--space-8)}.rm-view__badge{align-items:center;background:var(--color-success-bg);border-radius:var(--radius-pill);color:var(--color-success);display:inline-flex;font-size:var(--font-10);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;padding:3px var(--space-8);text-transform:uppercase}.rm-view__menu-wrap{position:relative}.rm-view__more{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;height:28px;justify-content:center;padding:0;width:28px}.rm-view__more:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-view__menu-shade{inset:0;position:fixed;z-index:60}.rm-view__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;min-width:200px;padding:var(--space-4);position:absolute;right:0;top:calc(100% + 6px);z-index:61}.rm-view__menu-item{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);gap:var(--space-8);padding:var(--space-8) var(--space-12);text-align:left;width:100%}.rm-view__menu-item:hover{background:var(--bg-hover);color:var(--color-secondary)}.rm-view__menu-item--danger{color:var(--color-danger)}.rm-view__menu-item--danger:hover{background:var(--color-danger-bg);color:var(--color-danger)}.rm-view__desc{color:var(--text-secondary);font-size:var(--font-13);margin:var(--space-8) 0 var(--space-12)}.rm-view__config{background:var(--bg-surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-6);margin:10px 0 var(--space-12);padding:var(--space-10) 14px}.rm-view__row{align-items:flex-start;display:flex;flex-wrap:wrap;font-size:var(--font-12);gap:14px}.rm-view__row-key{color:var(--text-muted);display:inline-flex;flex-shrink:0;font-size:var(--font-10);font-weight:var(--weight-semibold);letter-spacing:.04em;min-width:96px;padding-top:var(--space-4);text-transform:uppercase}.rm-view__row-key,.rm-view__row-val{align-items:center;gap:var(--space-6)}.rm-view__row-val{color:var(--text-primary);display:flex;flex:1 1 200px;flex-wrap:wrap;padding:var(--space-2) 0}.rm-view__pill{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);display:inline-flex;font-size:var(--font-12);gap:var(--space-4);padding:5px var(--space-10)}.rm-view__pill-k{color:var(--color-primary);font-weight:var(--weight-semibold)}.rm-view__pill-tip{min-width:0}.rm-view__pill-tip :deep(.rm-tooltip__bubble){max-width:320px}.rm-view__pill-v{display:-webkit-box;-webkit-box-orient:vertical;color:var(--text-primary);font-weight:var(--weight-medium);-webkit-line-clamp:3;overflow:hidden}.rm-view__foot{border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:var(--font-11);gap:var(--space-16);padding-top:var(--space-10)}.rm-view__foot span{align-items:center;display:inline-flex;gap:var(--space-4)}.rm-view__confirm{align-items:center;background:var(--color-danger-bg);border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);display:flex;flex-wrap:wrap;font-size:var(--font-13);gap:var(--space-12);margin-top:var(--space-12);padding:var(--space-8) var(--space-12)}.rm-view__confirm>span{align-items:center;display:inline-flex;flex:1 1 220px;gap:var(--space-8)}.rm-view__confirm-actions{display:flex;flex-shrink:0;gap:var(--space-8)}
|
|
400
400
|
</style>
|
|
@@ -160,12 +160,21 @@ const scopes = computed<Array<{ key: RmShareScope; icon: string; label: string;
|
|
|
160
160
|
:label="T.heading"
|
|
161
161
|
@update:model-value="close"
|
|
162
162
|
>
|
|
163
|
-
|
|
163
|
+
<!--
|
|
164
|
+
En-tete et pied passent par les emplacements de la modale, pas par le
|
|
165
|
+
corps : sinon le pied descend avec le contenu et les deux boutons
|
|
166
|
+
sortent de la boite des qu'il y a quelques membres a lister. Pour la
|
|
167
|
+
meme raison la liste ne defile plus elle-meme — un seul defilement,
|
|
168
|
+
celui du corps de la modale, plutot qu'un ascenseur dans un ascenseur.
|
|
169
|
+
-->
|
|
170
|
+
<template #header>
|
|
164
171
|
<header class="rm-share__head">
|
|
165
172
|
<h2 class="rm-share__title">{{ T.heading }}</h2>
|
|
166
173
|
<p v-if="title" class="rm-share__subject">{{ title }}</p>
|
|
167
174
|
</header>
|
|
175
|
+
</template>
|
|
168
176
|
|
|
177
|
+
<div class="rm-share">
|
|
169
178
|
<!--
|
|
170
179
|
Trois choix exclusifs : des boutons radio natifs, pas trois boutons.
|
|
171
180
|
Le groupe s'annonce alors comme un choix, se parcourt aux fleches et
|
|
@@ -232,19 +241,21 @@ const scopes = computed<Array<{ key: RmShareScope; icon: string; label: string;
|
|
|
232
241
|
|
|
233
242
|
<p v-if="picked.length" class="rm-share__count">{{ T.count(picked.length) }}</p>
|
|
234
243
|
</div>
|
|
244
|
+
</div>
|
|
235
245
|
|
|
236
|
-
|
|
246
|
+
<template #footer>
|
|
247
|
+
<div class="rm-share__foot">
|
|
237
248
|
<RmButton variant="ghost" size="sm" @click="close">
|
|
238
249
|
{{ T.cancel }}
|
|
239
250
|
</RmButton>
|
|
240
251
|
<RmButton variant="primary" size="sm" :disabled="loading" @click="save">
|
|
241
252
|
{{ T.save }}
|
|
242
253
|
</RmButton>
|
|
243
|
-
</
|
|
244
|
-
</
|
|
254
|
+
</div>
|
|
255
|
+
</template>
|
|
245
256
|
</RmModal>
|
|
246
257
|
</template>
|
|
247
258
|
|
|
248
259
|
<style scoped>
|
|
249
|
-
.rm-share{gap:var(--space-16)
|
|
260
|
+
.rm-share{gap:var(--space-16)}.rm-share,.rm-share__head{display:flex;flex-direction:column}.rm-share__head{gap:var(--space-4)}.rm-share__title{color:var(--color-primary);font-size:var(--font-16);font-weight:var(--weight-bold)}.rm-share__subject{color:var(--color-secondary);font-size:var(--font-13)}.rm-share__scopes{display:flex;flex-direction:column;gap:var(--space-8);list-style:none}.rm-share__scope{align-items:flex-start;background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);color:var(--color-primary);cursor:pointer;display:flex;gap:var(--space-10);padding:var(--space-10) var(--space-12);text-align:left;width:100%}.rm-share__scope:hover{background:var(--bg-hover)}.rm-share__check,.rm-share__radio{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);white-space:nowrap}.rm-share__scope:has(.rm-share__radio:focus-visible){outline:2px solid var(--color-secondary);outline-offset:2px}.rm-share__scope.is-on{background:var(--bg-hover);border-color:var(--color-secondary)}.rm-share__scope-text{display:flex;flex:1;flex-direction:column;gap:2px}.rm-share__scope-label{font-size:var(--font-13);font-weight:var(--weight-medium)}.rm-share__scope-hint{font-size:var(--font-12)}.rm-share__scope-hint,.rm-share__scope-mark{color:var(--color-secondary)}.rm-share__people{display:flex;flex-direction:column;gap:var(--space-8)}.rm-share__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-pill);color:var(--color-secondary);display:flex;gap:var(--space-8);padding:var(--space-6) var(--space-10)}.rm-share__search input{background:none;border:none;color:var(--color-primary);flex:1;font-size:var(--font-13);outline:none}.rm-share__list{display:flex;flex-direction:column;gap:2px;list-style:none}.rm-share__member{align-items:center;border-radius:var(--radius-md);cursor:pointer;display:flex;gap:var(--space-8);padding:var(--space-6) var(--space-8)}.rm-share__member:hover{background:var(--bg-hover)}.rm-share__member:has(.rm-share__check:focus-visible){outline:2px solid var(--color-secondary);outline-offset:2px}.rm-share__member-text{display:flex;flex-direction:column}.rm-share__member-name{color:var(--color-primary);font-size:var(--font-13)}.rm-share__member-mail{color:var(--color-secondary);font-size:var(--font-11)}.rm-share__count,.rm-share__empty{color:var(--color-secondary);font-size:var(--font-12)}.rm-share__foot{display:flex;gap:var(--space-8);justify-content:flex-end}
|
|
250
261
|
</style>
|