@tekkare/romulus 0.1.41 → 0.1.43
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/FilterBar.vue +12 -2
- package/dist/runtime/components/LineChart.vue +6 -2
- package/dist/runtime/components/Segmented.vue +10 -2
- package/dist/runtime/utils/chart.d.ts +4 -0
- package/dist/runtime/utils/chart.js +4 -2
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -8,7 +8,9 @@
|
|
|
8
8
|
scope » et « Tout effacer ». Le nombre de filtres actifs reste visible sur la
|
|
9
9
|
puce.
|
|
10
10
|
|
|
11
|
-
Slots : #CardTitle (libelle de la puce si `customTitle`), #
|
|
11
|
+
Slots : #CardTitle (libelle de la puce si `customTitle`), #Rail (sur la
|
|
12
|
+
barre, a cote de la puce : le reglage qu'on change tout le temps et qui ne
|
|
13
|
+
merite pas d'ouvrir le panneau), #Search, #Filters.
|
|
12
14
|
Le contenu projete vient encore, dans les apps, des champs Auriga
|
|
13
15
|
(arg-advanced-search-bar) : les regles `:deep` en bas les remettent a la
|
|
14
16
|
hauteur et au rayon de la rangee. Elles tomberont avec ces champs.
|
|
@@ -70,6 +72,7 @@ const customizeOpen = computed(() => panel.value === 'customize')
|
|
|
70
72
|
const slots = useSlots()
|
|
71
73
|
const hasAdvanced = computed(() => !!slots.Advanced)
|
|
72
74
|
const hasCustomize = computed(() => !!slots.Customize)
|
|
75
|
+
const hasRail = computed(() => !!slots.Rail)
|
|
73
76
|
|
|
74
77
|
function toggle(which: RmFilterBarPanel) {
|
|
75
78
|
panel.value = panel.value === which ? null : which
|
|
@@ -168,6 +171,13 @@ onBeforeUnmount(() => {
|
|
|
168
171
|
<span>{{ t.customize }}</span>
|
|
169
172
|
</button>
|
|
170
173
|
|
|
174
|
+
<!-- Un reglage pose SUR la barre : le niveau d'agregation, une periode.
|
|
175
|
+
A reserver a ce qu'on change a chaque lecture ; tout le reste va
|
|
176
|
+
dans le panneau, sinon la barre redevient un panneau ouvert. -->
|
|
177
|
+
<div v-if="hasRail" class="rm-fbar__rail">
|
|
178
|
+
<slot name="Rail" />
|
|
179
|
+
</div>
|
|
180
|
+
|
|
171
181
|
<div class="rm-fbar__search">
|
|
172
182
|
<slot name="Search" />
|
|
173
183
|
|
|
@@ -234,5 +244,5 @@ onBeforeUnmount(() => {
|
|
|
234
244
|
</template>
|
|
235
245
|
|
|
236
246
|
<style scoped>
|
|
237
|
-
.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__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{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__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;
|
|
247
|
+
.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__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{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{flex:0 1 auto}.rm-fbar__rail,.rm-fbar__search{align-items:center;display:flex;min-width:0}.rm-fbar__search{flex:1 1 auto;gap:8px;position:relative}.rm-fbar__search:empty{display:none}.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;align-items:end;display:grid;gap:16px;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__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:800;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(--text-secondary)}
|
|
238
248
|
</style>
|
|
@@ -11,7 +11,11 @@ import { rmCompact, rmNumber } from '../utils/format'
|
|
|
11
11
|
const props = withDefaults(defineProps<{
|
|
12
12
|
categories: (string | number)[]
|
|
13
13
|
series: RmSeriesInput[]
|
|
14
|
-
/**
|
|
14
|
+
/**
|
|
15
|
+
* Remplissage degrade sous la courbe. Laisse libre, il se pose tout seul
|
|
16
|
+
* jusqu'a cinq courbes et se retire au-dela, ou les zones se recouvrent.
|
|
17
|
+
* `true` ou `false` tranche a la place de la regle.
|
|
18
|
+
*/
|
|
15
19
|
area?: boolean
|
|
16
20
|
/** Marche d'escalier : prix, taux de remboursement, decisions datees. */
|
|
17
21
|
step?: boolean
|
|
@@ -47,7 +51,7 @@ const props = withDefaults(defineProps<{
|
|
|
47
51
|
height?: keyof typeof RM_CHART_HEIGHTS | number
|
|
48
52
|
description?: string
|
|
49
53
|
}>(), {
|
|
50
|
-
area:
|
|
54
|
+
area: undefined,
|
|
51
55
|
step: false,
|
|
52
56
|
smooth: true,
|
|
53
57
|
axisLabels: undefined,
|
|
@@ -38,10 +38,18 @@ const props = withDefaults(defineProps<{
|
|
|
38
38
|
size?: 'sm' | 'md'
|
|
39
39
|
/** Le rail prend toute la largeur, segments a parts egales. */
|
|
40
40
|
block?: boolean
|
|
41
|
+
/**
|
|
42
|
+
* `pill` habille le rail comme les puces de la barre de filtres (fond de
|
|
43
|
+
* surface, bord arrondi complet, hauteur de rangee) : c'est la forme a
|
|
44
|
+
* utiliser quand le rail se pose SUR la barre, a cote de « Filtres », et non
|
|
45
|
+
* dans le panneau. `default` garde le rail voile des panneaux et des cartes.
|
|
46
|
+
*/
|
|
47
|
+
variant?: 'default' | 'pill'
|
|
41
48
|
ariaLabel?: string
|
|
42
49
|
}>(), {
|
|
43
50
|
size: 'md',
|
|
44
51
|
block: false,
|
|
52
|
+
variant: 'default',
|
|
45
53
|
ariaLabel: undefined,
|
|
46
54
|
})
|
|
47
55
|
|
|
@@ -127,7 +135,7 @@ watch(() => [model.value, items.value.length, props.block], remeasure)
|
|
|
127
135
|
<div
|
|
128
136
|
ref="root"
|
|
129
137
|
class="rm-seg"
|
|
130
|
-
:class="[`rm-seg--${size}`, { 'rm-seg--block': block }]"
|
|
138
|
+
:class="[`rm-seg--${size}`, `rm-seg--${variant}`, { 'rm-seg--block': block }]"
|
|
131
139
|
role="radiogroup"
|
|
132
140
|
:aria-label="ariaLabel"
|
|
133
141
|
@keydown.left.prevent="move(-1)"
|
|
@@ -160,5 +168,5 @@ watch(() => [model.value, items.value.length, props.block], remeasure)
|
|
|
160
168
|
</template>
|
|
161
169
|
|
|
162
170
|
<style scoped>
|
|
163
|
-
.rm-seg{background:color-mix(in srgb,var(--color-primary) 5%,var(--bg-surface));border:1px solid var(--border-default);border-radius:var(--radius-lg);display:inline-flex;flex-wrap:wrap;font-family:var(--font-sans);gap:2px;max-width:100%;padding:3px;position:relative}.rm-seg--block{display:flex;width:100%}.rm-seg--block .rm-seg__option{flex:1}.rm-seg__thumb{background:var(--color-primary);border-radius:var(--radius-md);left:0;position:absolute;top:0;transition:transform var(--duration-base) var(--ease-in-out),width var(--duration-base) var(--ease-in-out),height var(--duration-base) var(--ease-in-out);z-index:0}.rm-seg__option{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:var(--radius-md);box-shadow:none;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-weight:500;gap:6px;justify-content:center;margin:0;position:relative;transition:color var(--duration-fast) var(--ease-in-out);white-space:nowrap;z-index:1}.rm-seg--md .rm-seg__option{font-size:14px;line-height:20px;padding:5px 12px}.rm-seg--sm .rm-seg__option{font-size:13px;line-height:18px;padding:3px 10px}.rm-seg__option i{font-size:16px;line-height:1}.rm-seg__option:hover:not(:disabled):not(.rm-seg__option--active){color:var(--color-primary)}.rm-seg__option--active{color:#fff;font-weight:600}.rm-seg__option:disabled{color:var(--text-muted);cursor:not-allowed;opacity:.6}.rm-seg__option:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.rm-seg__option--sep:before{background:var(--border-default);content:"";height:60%;left:-2px;position:absolute;top:20%;width:1px}@media (prefers-reduced-motion:reduce){.rm-seg__thumb{transition:none}}
|
|
171
|
+
.rm-seg{background:color-mix(in srgb,var(--color-primary) 5%,var(--bg-surface));border:1px solid var(--border-default);border-radius:var(--radius-lg);display:inline-flex;flex-wrap:wrap;font-family:var(--font-sans);gap:2px;max-width:100%;padding:3px;position:relative}.rm-seg--block{display:flex;width:100%}.rm-seg--block .rm-seg__option{flex:1}.rm-seg__thumb{background:var(--color-primary);border-radius:var(--radius-md);left:0;position:absolute;top:0;transition:transform var(--duration-base) var(--ease-in-out),width var(--duration-base) var(--ease-in-out),height var(--duration-base) var(--ease-in-out);z-index:0}.rm-seg__option{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:var(--radius-md);box-shadow:none;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-weight:500;gap:6px;justify-content:center;margin:0;position:relative;transition:color var(--duration-fast) var(--ease-in-out);white-space:nowrap;z-index:1}.rm-seg--md .rm-seg__option{font-size:14px;line-height:20px;padding:5px 12px}.rm-seg--sm .rm-seg__option{font-size:13px;line-height:18px;padding:3px 10px}.rm-seg__option i{font-size:16px;line-height:1}.rm-seg__option:hover:not(:disabled):not(.rm-seg__option--active){color:var(--color-primary)}.rm-seg__option--active{color:#fff;font-weight:600}.rm-seg__option:disabled{color:var(--text-muted);cursor:not-allowed;opacity:.6}.rm-seg__option:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.rm-seg--pill{background:var(--bg-surface);border-radius:var(--radius-pill);flex-wrap:nowrap;gap:0;overflow-x:auto;padding:2px;scrollbar-width:none}.rm-seg--pill::-webkit-scrollbar{display:none}.rm-seg--pill .rm-seg__option,.rm-seg--pill .rm-seg__thumb{border-radius:var(--radius-pill)}.rm-seg--pill .rm-seg__option{font-size:var(--font-14);height:26px;line-height:26px;padding:0 14px}.rm-seg--pill.rm-seg--sm .rm-seg__option{font-size:var(--font-13);height:24px;line-height:24px;padding:0 12px}.rm-seg--pill .rm-seg__option--sep:before{left:0}.rm-seg__option--sep:before{background:var(--border-default);content:"";height:60%;left:-2px;position:absolute;top:20%;width:1px}@media (prefers-reduced-motion:reduce){.rm-seg__thumb{transition:none}}
|
|
164
172
|
</style>
|
|
@@ -308,6 +308,10 @@ export declare function rmBarHorizontalOption(labels: string[], values: (number
|
|
|
308
308
|
};
|
|
309
309
|
/** Line ou area chart. `step` produit la marche d'escalier des series de prix. */
|
|
310
310
|
export declare function rmLineOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], options?: {
|
|
311
|
+
/**
|
|
312
|
+
* Remplissage degrade sous la courbe. Non precise : automatique jusqu'a
|
|
313
|
+
* AREA_MAX_SERIES courbes.
|
|
314
|
+
*/
|
|
311
315
|
area?: boolean;
|
|
312
316
|
step?: boolean;
|
|
313
317
|
smooth?: boolean;
|
|
@@ -161,7 +161,7 @@ export function rmBarHorizontalOption(labels, values, theme, palette, decal = fa
|
|
|
161
161
|
}
|
|
162
162
|
export function rmLineOption(categories, series, theme, palette, options = {}) {
|
|
163
163
|
const {
|
|
164
|
-
area
|
|
164
|
+
area,
|
|
165
165
|
step = false,
|
|
166
166
|
smooth = true,
|
|
167
167
|
decal = false,
|
|
@@ -172,6 +172,8 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
|
|
|
172
172
|
startAtZero = false,
|
|
173
173
|
valueFormatter
|
|
174
174
|
} = options;
|
|
175
|
+
const AREA_MAX_SERIES = 5;
|
|
176
|
+
const filled = area ?? series.length <= AREA_MAX_SERIES;
|
|
175
177
|
const dual = series.some((s) => s.axis === 1);
|
|
176
178
|
const bottomLegend = legendPosition === "bottom";
|
|
177
179
|
const format = (value) => valueFormatter ? valueFormatter(value) : String(value);
|
|
@@ -242,7 +244,7 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
|
|
|
242
244
|
} : void 0,
|
|
243
245
|
lineStyle: { color, width: 2.5 },
|
|
244
246
|
itemStyle: { color },
|
|
245
|
-
areaStyle:
|
|
247
|
+
areaStyle: filled ? {
|
|
246
248
|
color: {
|
|
247
249
|
type: "linear",
|
|
248
250
|
x: 0,
|