@tekkare/romulus 0.1.59 → 0.1.60
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
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
RmTagRow - une rangee d'etiquettes sur une seule ligne, le reste compte.
|
|
3
|
+
|
|
4
|
+
Reprend `arg-tags-row` d'Auriga : les etiquettes qui tiennent s'affichent, les
|
|
5
|
+
autres deviennent « +N » avec la liste complete en bulle. Une carte de
|
|
6
|
+
resultat porte parfois quinze laboratoires ; les laisser passer a la ligne
|
|
7
|
+
ferait grandir la carte au point de repousser ce qui suit.
|
|
8
|
+
|
|
9
|
+
Le tri se fait sur la position reelle des etiquettes dans le DOM : on les
|
|
10
|
+
pose toutes, puis on garde celles qui sont restees sur la premiere ligne.
|
|
11
|
+
Auriga mesurait le texte au canvas avec « 12px Figtree » ecrit en dur, ce qui
|
|
12
|
+
se decalait des que la police n'etait pas chargee ou pas celle-la.
|
|
13
|
+
-->
|
|
14
|
+
<script setup lang="ts">
|
|
15
|
+
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
|
16
|
+
import type { RmTagVariant } from './Tag.vue'
|
|
17
|
+
|
|
18
|
+
const props = withDefaults(defineProps<{
|
|
19
|
+
tags: string[]
|
|
20
|
+
variant?: RmTagVariant
|
|
21
|
+
/** Cote ou sort la bulle du compteur. */
|
|
22
|
+
tooltipDir?: 'top' | 'right' | 'bottom' | 'left'
|
|
23
|
+
}>(), {
|
|
24
|
+
variant: 'gray',
|
|
25
|
+
tooltipDir: 'bottom',
|
|
26
|
+
})
|
|
27
|
+
|
|
28
|
+
const rowRef = ref<HTMLElement>()
|
|
29
|
+
const visibleCount = ref(props.tags.length)
|
|
30
|
+
|
|
31
|
+
const shown = computed(() => props.tags.slice(0, visibleCount.value))
|
|
32
|
+
const hidden = computed(() => props.tags.slice(visibleCount.value))
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Compte les etiquettes restees sur la premiere ligne. La rangee est mesuree
|
|
36
|
+
* en affichage complet : sans cette remise a zero, un redimensionnement qui
|
|
37
|
+
* elargit la carte ne reafficherait jamais ce qui avait ete masque.
|
|
38
|
+
*/
|
|
39
|
+
async function measure() {
|
|
40
|
+
visibleCount.value = props.tags.length
|
|
41
|
+
await nextTick()
|
|
42
|
+
const row = rowRef.value
|
|
43
|
+
if (!row) return
|
|
44
|
+
const items = [...row.querySelectorAll<HTMLElement>('[data-rm-tag]')]
|
|
45
|
+
if (items.length === 0) return
|
|
46
|
+
|
|
47
|
+
const firstTop = items[0].offsetTop
|
|
48
|
+
// Au moins une etiquette reste, meme trop large : « +15 » tout seul ne dit
|
|
49
|
+
// plus de quoi la carte parle.
|
|
50
|
+
let count = 1
|
|
51
|
+
for (let i = 1; i < items.length; i++) {
|
|
52
|
+
if (items[i].offsetTop > firstTop) break
|
|
53
|
+
count++
|
|
54
|
+
}
|
|
55
|
+
visibleCount.value = count
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
let observer: ResizeObserver | undefined
|
|
59
|
+
|
|
60
|
+
onMounted(() => {
|
|
61
|
+
measure()
|
|
62
|
+
if (typeof ResizeObserver !== 'undefined' && rowRef.value) {
|
|
63
|
+
observer = new ResizeObserver(() => measure())
|
|
64
|
+
observer.observe(rowRef.value)
|
|
65
|
+
}
|
|
66
|
+
})
|
|
67
|
+
onBeforeUnmount(() => observer?.disconnect())
|
|
68
|
+
watch(() => props.tags, measure, { deep: true })
|
|
69
|
+
</script>
|
|
70
|
+
|
|
71
|
+
<template>
|
|
72
|
+
<div class="rm-tag-row">
|
|
73
|
+
<div ref="rowRef" class="rm-tag-row__items">
|
|
74
|
+
<RmTag v-for="tag in shown" :key="tag" data-rm-tag :variant="variant">{{ tag }}</RmTag>
|
|
75
|
+
</div>
|
|
76
|
+
<RmTooltip v-if="hidden.length > 0" :text="hidden.join('\n')" :dir="tooltipDir" full>
|
|
77
|
+
<span class="rm-tag-row__more">+{{ hidden.length }}</span>
|
|
78
|
+
</RmTooltip>
|
|
79
|
+
</div>
|
|
80
|
+
</template>
|
|
81
|
+
|
|
82
|
+
<style scoped>
|
|
83
|
+
.rm-tag-row{align-items:center;display:flex;gap:8px;width:100%}.rm-tag-row__items{display:flex;flex:1;flex-wrap:wrap;gap:8px;max-height:24px;min-width:0;overflow:hidden}.rm-tag-row__more{color:var(--text-secondary);font-size:var(--font-12,12px);white-space:nowrap}
|
|
84
|
+
</style>
|