@tekkare/romulus 0.1.34 → 0.1.35
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
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
c'est la barre de volumetrie d'une liste.
|
|
8
8
|
-->
|
|
9
9
|
<script setup lang="ts">
|
|
10
|
+
import { computed } from 'vue'
|
|
10
11
|
import { rmNumber } from '../utils/format'
|
|
11
12
|
|
|
12
13
|
export type RmKpiBarItem = {
|
|
@@ -19,7 +20,24 @@ export type RmKpiBarItem = {
|
|
|
19
20
|
subtitle?: string
|
|
20
21
|
}
|
|
21
22
|
|
|
22
|
-
|
|
23
|
+
const props = withDefaults(
|
|
24
|
+
defineProps<{
|
|
25
|
+
/** Les tuiles. Vide pendant un chargement, ou la barre pose son squelette. */
|
|
26
|
+
kpis?: RmKpiBarItem[]
|
|
27
|
+
/**
|
|
28
|
+
* Pose le squelette a la place des valeurs. La barre garde sa carte, ses
|
|
29
|
+
* tuiles et sa hauteur : la structure de la page est bonne des le premier
|
|
30
|
+
* rendu, au lieu de se former quand la donnee arrive.
|
|
31
|
+
*/
|
|
32
|
+
loading?: boolean
|
|
33
|
+
/** Nombre de tuiles simulees pendant le chargement. */
|
|
34
|
+
tiles?: number
|
|
35
|
+
}>(),
|
|
36
|
+
{ kpis: () => [], loading: false, tiles: 0 },
|
|
37
|
+
)
|
|
38
|
+
|
|
39
|
+
/** Autant de tuiles que la barre en portera, sinon quatre. */
|
|
40
|
+
const skeletonTiles = computed(() => props.tiles || props.kpis.length || 4)
|
|
23
41
|
|
|
24
42
|
function display(value: RmKpiBarItem['value']) {
|
|
25
43
|
if (value === null || value === undefined) return '-'
|
|
@@ -28,19 +46,30 @@ function display(value: RmKpiBarItem['value']) {
|
|
|
28
46
|
</script>
|
|
29
47
|
|
|
30
48
|
<template>
|
|
31
|
-
<div class="rm-kpibar">
|
|
49
|
+
<div class="rm-kpibar" :aria-busy="loading || undefined">
|
|
32
50
|
<slot />
|
|
33
51
|
<div class="rm-kpibar__items">
|
|
34
|
-
<
|
|
35
|
-
<div class="rm-
|
|
36
|
-
<
|
|
52
|
+
<template v-if="loading">
|
|
53
|
+
<div v-for="index in skeletonTiles" :key="`skeleton-${index}`" class="rm-kpibar__item">
|
|
54
|
+
<RmSkeleton :width="48" :height="48" radius="var(--radius-lg)" />
|
|
55
|
+
<div class="rm-kpibar__text">
|
|
56
|
+
<RmSkeleton :width="64" :height="22" />
|
|
57
|
+
<RmSkeleton :width="88" :height="12" />
|
|
58
|
+
</div>
|
|
37
59
|
</div>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<
|
|
60
|
+
</template>
|
|
61
|
+
<template v-else>
|
|
62
|
+
<div v-for="(kpi, index) in kpis" :key="index" class="rm-kpibar__item">
|
|
63
|
+
<div class="rm-kpibar__icon">
|
|
64
|
+
<RmIcon :name="kpi.icon" :size="32" />
|
|
65
|
+
</div>
|
|
66
|
+
<div class="rm-kpibar__text">
|
|
67
|
+
<p class="rm-kpibar__value">{{ display(kpi.value) }}</p>
|
|
68
|
+
<p class="rm-kpibar__legend">{{ kpi.legend }}</p>
|
|
69
|
+
<p v-if="kpi.subtitle" class="rm-kpibar__subtitle">{{ kpi.subtitle }}</p>
|
|
70
|
+
</div>
|
|
42
71
|
</div>
|
|
43
|
-
</
|
|
72
|
+
</template>
|
|
44
73
|
</div>
|
|
45
74
|
</div>
|
|
46
75
|
</template>
|
|
@@ -12,18 +12,21 @@ import { rmNumber } from '../utils/format'
|
|
|
12
12
|
withDefaults(
|
|
13
13
|
defineProps<{
|
|
14
14
|
/** Une entree par volume a annoncer : { count, label }. */
|
|
15
|
-
items
|
|
15
|
+
items?: { count: number; label: string }[]
|
|
16
16
|
/** Icone Phosphor posee en tete de ligne. */
|
|
17
17
|
icon?: string
|
|
18
|
+
/** Squelette a la place des comptes, pour garder la ligne pendant l'attente. */
|
|
19
|
+
loading?: boolean
|
|
18
20
|
}>(),
|
|
19
|
-
{ icon: 'Pill' },
|
|
21
|
+
{ items: () => [], icon: 'Pill', loading: false },
|
|
20
22
|
)
|
|
21
23
|
</script>
|
|
22
24
|
|
|
23
25
|
<template>
|
|
24
|
-
<div class="rm-rline">
|
|
26
|
+
<div class="rm-rline" :aria-busy="loading || undefined">
|
|
25
27
|
<RmIcon :name="icon" :size="14" />
|
|
26
|
-
<
|
|
28
|
+
<RmSkeleton v-if="loading" :width="180" :height="12" />
|
|
29
|
+
<p v-else class="rm-rline__text">
|
|
27
30
|
<template v-for="(item, index) in items" :key="item.label">
|
|
28
31
|
<span v-if="index > 0" class="rm-rline__sep">·</span>
|
|
29
32
|
{{ rmNumber(item.count) }} {{ item.label }}
|