@tekkare/romulus 0.1.164 → 0.1.166
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
|
@@ -167,7 +167,12 @@ onBeforeUnmount(() => {
|
|
|
167
167
|
:class="panel ? 'rm-fbar--open' : 'rm-fbar--closed'"
|
|
168
168
|
:style="{ top: `${stickyTop}px`, '--rm-fbar-advanced-w': `${advancedWidth}px` }"
|
|
169
169
|
>
|
|
170
|
-
|
|
170
|
+
<!-- La bande traverse le cadre ; la rangee, elle, se cale sur la colonne
|
|
171
|
+
de contenu et ne s'en ecarte que si son contenu ne tient pas : un rail
|
|
172
|
+
de huit niveaux defilait dans une colonne de 1000px alors que la bande
|
|
173
|
+
en offrait le double. -->
|
|
174
|
+
<div class="rm-fbar__band">
|
|
175
|
+
<div class="rm-fbar__row">
|
|
171
176
|
<button type="button" class="rm-fbar__toggle" :class="{ 'is-active': open }" @click="toggle('filters')">
|
|
172
177
|
<RmIcon name="Funnel" :size="16" />
|
|
173
178
|
<span v-if="customTitle"><slot name="CardTitle" /></span>
|
|
@@ -227,6 +232,7 @@ onBeforeUnmount(() => {
|
|
|
227
232
|
</button>
|
|
228
233
|
</div>
|
|
229
234
|
|
|
235
|
+
</div>
|
|
230
236
|
</div>
|
|
231
237
|
|
|
232
238
|
<!-- Un reglage pose SUR la barre : le niveau d'agregation, une periode.
|
|
@@ -239,10 +245,12 @@ onBeforeUnmount(() => {
|
|
|
239
245
|
ses derniers segments coupes, et le champ tombait a sa largeur
|
|
240
246
|
minimale. Chacun sur sa ligne prend alors toute la largeur de la
|
|
241
247
|
colonne. -->
|
|
242
|
-
<div v-if="railBelow" class="rm-
|
|
248
|
+
<div v-if="railBelow" class="rm-fbar__band rm-fbar__band--rail">
|
|
249
|
+
<div class="rm-fbar__rail-row">
|
|
243
250
|
<div class="rm-fbar__rail">
|
|
244
251
|
<slot name="Rail" />
|
|
245
252
|
</div>
|
|
253
|
+
</div>
|
|
246
254
|
</div>
|
|
247
255
|
|
|
248
256
|
<div v-show="open" class="rm-fbar__panel">
|
|
@@ -303,5 +311,5 @@ onBeforeUnmount(() => {
|
|
|
303
311
|
</template>
|
|
304
312
|
|
|
305
313
|
<style scoped>
|
|
306
|
-
.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
|
|
314
|
+
.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__band{display:flex;justify-content:center;padding-inline:32px}.rm-fbar__rail-row,.rm-fbar__row{max-width:100%;min-width:min(100%,var(--oip-content-max,100%));width:-moz-max-content;width:max-content}.rm-fbar__row{align-items:flex-start;display:flex;gap:var(--space-12);padding-block:8px}.rm-fbar--open .rm-fbar__band:not(:has(~.rm-fbar__band--rail)){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)}.rm-fbar--open .rm-fbar__band--rail{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}
|
|
307
315
|
</style>
|
|
@@ -6,11 +6,13 @@
|
|
|
6
6
|
affiche « FR » dans deux carres. Le detail est dans internal/flags.ts, qui
|
|
7
7
|
porte aussi la table.
|
|
8
8
|
|
|
9
|
-
Un code absent de la table retombe
|
|
10
|
-
|
|
9
|
+
Un code absent de la table retombe d'abord sur `flags-world.ts`, les 173 pays
|
|
10
|
+
repris d'Auriga, charges a la demande : une app qui ne montre que cinq pays
|
|
11
|
+
n'embarque pas les 147 Ko du monde entier. Si le code n'y est pas non plus,
|
|
12
|
+
l'emoji reste le dernier recours.
|
|
11
13
|
-->
|
|
12
14
|
<script setup lang="ts">
|
|
13
|
-
import { computed } from 'vue'
|
|
15
|
+
import { computed, shallowRef, watchEffect } from 'vue'
|
|
14
16
|
import { RM_FLAGS, rmFlagEmoji } from '../internal/flags'
|
|
15
17
|
|
|
16
18
|
const props = withDefaults(defineProps<{
|
|
@@ -22,25 +24,45 @@ const props = withDefaults(defineProps<{
|
|
|
22
24
|
title?: string
|
|
23
25
|
/** Coins arrondis. Un drapeau a angles vifs jure a cote d'une icone. */
|
|
24
26
|
rounded?: boolean
|
|
27
|
+
/**
|
|
28
|
+
* Pastille ronde plutot que rectangle. Pour une tuile de pays, ou le drapeau
|
|
29
|
+
* est le sujet et non une mention a cote d'un libelle : le dessin est recadre
|
|
30
|
+
* au carre puis decoupe au disque.
|
|
31
|
+
*/
|
|
32
|
+
circle?: boolean
|
|
25
33
|
}>(), {
|
|
26
34
|
height: 14,
|
|
27
35
|
title: undefined,
|
|
28
36
|
rounded: true,
|
|
37
|
+
circle: false,
|
|
29
38
|
})
|
|
30
39
|
|
|
31
40
|
const key = computed(() => (props.code || '').toLowerCase())
|
|
32
|
-
|
|
33
|
-
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* La table du monde entier n'est demandee que si le code manque a la table de
|
|
44
|
+
* base : elle pese plus lourd que tout le reste du paquet.
|
|
45
|
+
*/
|
|
46
|
+
const world = shallowRef<Record<string, string>>({})
|
|
47
|
+
watchEffect(async () => {
|
|
48
|
+
if (!key.value || RM_FLAGS[key.value] || world.value[key.value]) return
|
|
49
|
+
const mod = await import('../internal/flags-world')
|
|
50
|
+
world.value = mod.RM_FLAGS_WORLD
|
|
51
|
+
})
|
|
52
|
+
|
|
53
|
+
const svg = computed(() => RM_FLAGS[key.value] ?? world.value[key.value])
|
|
54
|
+
const width = computed(() => (props.circle ? props.height : (props.height * 21) / 15))
|
|
34
55
|
</script>
|
|
35
56
|
|
|
36
57
|
<template>
|
|
37
58
|
<svg
|
|
38
59
|
v-if="svg"
|
|
39
60
|
class="rm-flag"
|
|
40
|
-
:class="{ 'rm-flag--rounded': rounded }"
|
|
61
|
+
:class="{ 'rm-flag--rounded': rounded && !circle, 'rm-flag--circle': circle }"
|
|
41
62
|
:width="width"
|
|
42
63
|
:height="height"
|
|
43
|
-
viewBox="0 0 21 15"
|
|
64
|
+
:viewBox="circle ? '3 0 15 15' : '0 0 21 15'"
|
|
65
|
+
:preserveAspectRatio="circle ? 'xMidYMid slice' : undefined"
|
|
44
66
|
:role="title ? 'img' : undefined"
|
|
45
67
|
:aria-hidden="title ? undefined : true"
|
|
46
68
|
v-html="(title ? `<title>${title}</title>` : '') + svg"
|
|
@@ -49,5 +71,5 @@ const width = computed(() => (props.height * 21) / 15)
|
|
|
49
71
|
</template>
|
|
50
72
|
|
|
51
73
|
<style scoped>
|
|
52
|
-
.rm-flag{display:inline-block;flex-shrink:0;vertical-align:-.15em}.rm-flag--rounded{border-radius:2px
|
|
74
|
+
.rm-flag{display:inline-block;flex-shrink:0;vertical-align:-.15em}.rm-flag--rounded{border-radius:2px}.rm-flag--circle,.rm-flag--rounded{box-shadow:inset 0 0 0 .5px rgba(30,41,59,.18)}.rm-flag--circle{border-radius:50%}
|
|
53
75
|
</style>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const RM_FLAGS_WORLD: Record<string, string>;
|