@tekkare/romulus 0.1.129 → 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.
package/dist/module.json
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 «
|
|
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
|
|
@@ -29,6 +29,16 @@ const props = withDefaults(
|
|
|
29
29
|
haveSaveScope?: boolean
|
|
30
30
|
haveClear?: boolean
|
|
31
31
|
clearMsg?: string | null
|
|
32
|
+
/**
|
|
33
|
+
* Seconde commande de remise a zero, posee a cote de la premiere.
|
|
34
|
+
*
|
|
35
|
+
* « Effacer les filtres » ne touche qu'aux filtres de l'ecran : la vue,
|
|
36
|
+
* perimetre qu'elle designe et l'affichage lui survivent. Une page qui
|
|
37
|
+
* porte une vue a donc besoin d'un second geste, plus large ; il se lit a
|
|
38
|
+
* cote du premier, sinon la difference entre les deux ne se voit pas.
|
|
39
|
+
*/
|
|
40
|
+
haveReset?: boolean
|
|
41
|
+
resetMsg?: string | null
|
|
32
42
|
saveScopeMsg?: string | null
|
|
33
43
|
lang?: 'fr' | 'en'
|
|
34
44
|
/**
|
|
@@ -43,17 +53,19 @@ const props = withDefaults(
|
|
|
43
53
|
haveSaveScope: false,
|
|
44
54
|
haveClear: true,
|
|
45
55
|
clearMsg: null,
|
|
56
|
+
haveReset: false,
|
|
57
|
+
resetMsg: null,
|
|
46
58
|
saveScopeMsg: null,
|
|
47
59
|
lang: 'fr',
|
|
48
60
|
stickyTo: 'rm_page_header',
|
|
49
61
|
},
|
|
50
62
|
)
|
|
51
63
|
|
|
52
|
-
const emit = defineEmits<{ clearFilters: []; saveScope: [] }>()
|
|
64
|
+
const emit = defineEmits<{ clearFilters: []; resetAll: []; saveScope: [] }>()
|
|
53
65
|
|
|
54
66
|
const LABELS = {
|
|
55
|
-
fr: { title: 'Filtres', save: 'Sauvegarder un scope', clear: 'Tout
|
|
56
|
-
en: { title: 'Filters', save: 'Save a scope', clear: 'Clear
|
|
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' },
|
|
57
69
|
} as const
|
|
58
70
|
|
|
59
71
|
const t = computed(() => LABELS[props.lang] ?? LABELS.fr)
|
|
@@ -250,6 +262,18 @@ onBeforeUnmount(() => {
|
|
|
250
262
|
>
|
|
251
263
|
{{ clearMsg || t.clear }}
|
|
252
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" />
|
|
269
|
+
<button
|
|
270
|
+
v-if="haveReset"
|
|
271
|
+
type="button"
|
|
272
|
+
class="rm-fbar__action rm-fbar__action--clear"
|
|
273
|
+
@click="emit('resetAll')"
|
|
274
|
+
>
|
|
275
|
+
{{ resetMsg || t.reset }}
|
|
276
|
+
</button>
|
|
253
277
|
</div>
|
|
254
278
|
<div class="rm-fbar__filters">
|
|
255
279
|
<slot name="Filters" />
|
|
@@ -275,5 +299,5 @@ onBeforeUnmount(() => {
|
|
|
275
299
|
</template>
|
|
276
300
|
|
|
277
301
|
<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: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}
|
|
279
303
|
</style>
|
|
@@ -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
|
|
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
|
|
@@ -31,6 +31,12 @@ export interface RmViewPillAction {
|
|
|
31
31
|
label: string
|
|
32
32
|
/** Icone Phosphor, sans le prefixe `Ph`. */
|
|
33
33
|
icon?: string
|
|
34
|
+
/**
|
|
35
|
+
* Action qui defait ce qui est a l'ecran (remettre a zero, vider). Elle se
|
|
36
|
+
* lit en rouge : rangee dans la meme liste que « Toutes les vues », rien ne
|
|
37
|
+
* la distinguerait d'un simple deplacement.
|
|
38
|
+
*/
|
|
39
|
+
danger?: boolean
|
|
34
40
|
}
|
|
35
41
|
|
|
36
42
|
const props = withDefaults(
|
|
@@ -198,6 +204,7 @@ onBeforeUnmount(() => {
|
|
|
198
204
|
type="button"
|
|
199
205
|
role="menuitem"
|
|
200
206
|
class="rm-vpill__item"
|
|
207
|
+
:class="{ 'is-danger': action.danger }"
|
|
201
208
|
@click="run(action.key)"
|
|
202
209
|
>
|
|
203
210
|
<RmIcon v-if="action.icon" :name="action.icon" :size="14" />
|
|
@@ -209,5 +216,5 @@ onBeforeUnmount(() => {
|
|
|
209
216
|
</template>
|
|
210
217
|
|
|
211
218
|
<style scoped>
|
|
212
|
-
.rm-vpill{position:relative}.rm-vpill,.rm-vpill__pill{align-items:center;display:flex}.rm-vpill__pill{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:var(--space-6);height:var(--rm-fbar-field-h,32px);padding:0 14px;white-space:nowrap}.rm-vpill__pill:hover{background:var(--bg-surface-3)}.rm-vpill__pill.is-open{border-color:var(--color-primary);color:var(--color-primary)}.rm-vpill__icon{color:currentColor;flex-shrink:0}.rm-vpill__key{color:var(--text-muted);font-weight:var(--weight-normal)}.rm-vpill__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__pill.has-unsaved{border-color:var(--color-warning)}.rm-vpill__dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.rm-vpill__dot--applied{animation:rm-vpill-pulse-applied 2s ease-out infinite;background:var(--color-success)}.rm-vpill__dot--unsaved{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning)}@keyframes rm-vpill-pulse{0%{box-shadow:0 0 0 0 rgba(217,119,6,.6)}70%{box-shadow:0 0 0 6px rgba(217,119,6,0)}to{box-shadow:0 0 0 0 rgba(217,119,6,0)}}@keyframes rm-vpill-pulse-applied{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}to{box-shadow:0 0 0 0 rgba(22,163,74,0)}}@media (prefers-reduced-motion:reduce){.rm-vpill__dot,.rm-vpill__unsaved-dot:before{animation:none}}.rm-vpill__caret{color:var(--text-muted);flex-shrink:0}.rm-vpill__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);box-sizing:border-box;font-family:var(--font-sans);left:0;max-width:460px;min-width:320px;padding:var(--space-6);position:absolute;top:calc(100% + 6px);z-index:60}.rm-vpill__unsaved{align-items:center;background:var(--color-warning-bg);border-radius:var(--radius-md);color:var(--color-warning);display:flex;font-size:var(--font-12);gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-vpill__unsaved-dot{align-items:center;display:inline-flex;flex-shrink:0;height:14px;justify-content:center;width:14px}.rm-vpill__unsaved-dot:before{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;content:"";height:7px;width:7px}.rm-vpill__unsaved-label{flex:1;font-weight:var(--weight-semibold)}.rm-vpill__unsaved-cta{background:transparent;border:none;color:var(--color-warning);cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--weight-bold);padding:0;text-decoration:underline;text-underline-offset:2px}.rm-vpill__unsaved-cta:hover{color:var(--text-primary)}.rm-vpill__divider{background:var(--border-soft);height:1px;margin:6px -6px}.rm-vpill__section{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;padding:var(--space-8) var(--space-12) var(--space-4) 34px;text-align:left;text-transform:uppercase}.rm-vpill__item{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);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;transition:background .1s,color .1s;width:100%}.rm-vpill__item:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-vpill__item.is-active{background:var(--bg-hover);color:var(--color-secondary);font-weight:var(--weight-semibold)}.rm-vpill__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__item--view .rm-vpill__check{color:var(--color-secondary);flex-shrink:0;opacity:0;transition:opacity .1s}.rm-vpill__item--view.is-active .rm-vpill__check{opacity:1}
|
|
219
|
+
.rm-vpill{position:relative}.rm-vpill,.rm-vpill__pill{align-items:center;display:flex}.rm-vpill__pill{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:var(--space-6);height:var(--rm-fbar-field-h,32px);padding:0 14px;white-space:nowrap}.rm-vpill__pill:hover{background:var(--bg-surface-3)}.rm-vpill__pill.is-open{border-color:var(--color-primary);color:var(--color-primary)}.rm-vpill__icon{color:currentColor;flex-shrink:0}.rm-vpill__key{color:var(--text-muted);font-weight:var(--weight-normal)}.rm-vpill__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__pill.has-unsaved{border-color:var(--color-warning)}.rm-vpill__dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.rm-vpill__dot--applied{animation:rm-vpill-pulse-applied 2s ease-out infinite;background:var(--color-success)}.rm-vpill__dot--unsaved{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning)}@keyframes rm-vpill-pulse{0%{box-shadow:0 0 0 0 rgba(217,119,6,.6)}70%{box-shadow:0 0 0 6px rgba(217,119,6,0)}to{box-shadow:0 0 0 0 rgba(217,119,6,0)}}@keyframes rm-vpill-pulse-applied{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}to{box-shadow:0 0 0 0 rgba(22,163,74,0)}}@media (prefers-reduced-motion:reduce){.rm-vpill__dot,.rm-vpill__unsaved-dot:before{animation:none}}.rm-vpill__caret{color:var(--text-muted);flex-shrink:0}.rm-vpill__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);box-sizing:border-box;font-family:var(--font-sans);left:0;max-width:460px;min-width:320px;padding:var(--space-6);position:absolute;top:calc(100% + 6px);z-index:60}.rm-vpill__unsaved{align-items:center;background:var(--color-warning-bg);border-radius:var(--radius-md);color:var(--color-warning);display:flex;font-size:var(--font-12);gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-vpill__unsaved-dot{align-items:center;display:inline-flex;flex-shrink:0;height:14px;justify-content:center;width:14px}.rm-vpill__unsaved-dot:before{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;content:"";height:7px;width:7px}.rm-vpill__unsaved-label{flex:1;font-weight:var(--weight-semibold)}.rm-vpill__unsaved-cta{background:transparent;border:none;color:var(--color-warning);cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--weight-bold);padding:0;text-decoration:underline;text-underline-offset:2px}.rm-vpill__unsaved-cta:hover{color:var(--text-primary)}.rm-vpill__divider{background:var(--border-soft);height:1px;margin:6px -6px}.rm-vpill__section{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;padding:var(--space-8) var(--space-12) var(--space-4) 34px;text-align:left;text-transform:uppercase}.rm-vpill__item{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);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;transition:background .1s,color .1s;width:100%}.rm-vpill__item:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-vpill__item.is-active{background:var(--bg-hover);color:var(--color-secondary);font-weight:var(--weight-semibold)}.rm-vpill__item.is-danger,.rm-vpill__item.is-danger:hover{color:var(--color-danger)}.rm-vpill__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__item--view .rm-vpill__check{color:var(--color-secondary);flex-shrink:0;opacity:0;transition:opacity .1s}.rm-vpill__item--view.is-active .rm-vpill__check{opacity:1}
|
|
213
220
|
</style>
|