@tekkare/romulus 0.1.85 → 0.1.86
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,92 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Ligne de fichier : une icone qui dit le format, le nom du document, et a
|
|
3
|
+
droite ce que le clic va en faire.
|
|
4
|
+
|
|
5
|
+
Remplace `arg-file-btn` d'Auriga, et la ligne que le panneau « Documents »
|
|
6
|
+
du rail redessinait chez lui. Les deux faisaient le meme objet : la carte
|
|
7
|
+
bordee d'Auriga portait un nom, une taille et deux liens (« Preview »,
|
|
8
|
+
« Download ») qui appelaient en pratique la meme chose. Il ne reste que ce
|
|
9
|
+
qui sert : le format, le nom, une action.
|
|
10
|
+
|
|
11
|
+
La couleur de l'icone double la forme, elle ne la remplace pas : `ph-file-pdf`
|
|
12
|
+
et `ph-file-csv` ne se confondent pas en noir et blanc. Elle vient des tokens
|
|
13
|
+
du theme et non d'un hexadecimal en dur, pour suivre le mode nuit.
|
|
14
|
+
|
|
15
|
+
Le composant ne navigue pas et n'ouvre rien lui-meme : il emet `select`, la
|
|
16
|
+
page decide (un apercu dans un tiroir, un onglet, un telechargement).
|
|
17
|
+
-->
|
|
18
|
+
<script setup lang="ts">
|
|
19
|
+
import { computed } from 'vue'
|
|
20
|
+
|
|
21
|
+
const props = withDefaults(
|
|
22
|
+
defineProps<{
|
|
23
|
+
/** Nom du document, tel qu'il s'affiche. */
|
|
24
|
+
name: string
|
|
25
|
+
/**
|
|
26
|
+
* Format, pour l'icone : un type MIME (`application/pdf`) ou un mot
|
|
27
|
+
* (`pdf`, `csv`, `xlsx`). Inconnu ou absent : icone de document neutre.
|
|
28
|
+
*/
|
|
29
|
+
format?: string
|
|
30
|
+
/** Taille lisible (« 2,4 Mo »), a la suite du nom. Absente : rien. */
|
|
31
|
+
size?: string
|
|
32
|
+
/**
|
|
33
|
+
* Ce que le clic declenche, dit par l'icone de droite : `preview` un
|
|
34
|
+
* apercu (oeil), `open` un onglet (fleche), `download` un enregistrement.
|
|
35
|
+
* `none` n'en pose aucune, pour une ligne qui ne se clique pas.
|
|
36
|
+
*/
|
|
37
|
+
action?: 'preview' | 'open' | 'download' | 'none'
|
|
38
|
+
}>(),
|
|
39
|
+
{ format: '', size: '', action: 'open' },
|
|
40
|
+
)
|
|
41
|
+
|
|
42
|
+
const emit = defineEmits<{ select: [] }>()
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Les formats reconnus. La liste est courte a dessein : au-dela, l'icone
|
|
46
|
+
* neutre dit « document » sans se tromper, ce qu'une icone approchante ne
|
|
47
|
+
* ferait pas.
|
|
48
|
+
*/
|
|
49
|
+
const FORMATS: { match: string[]; icon: string; tone: string }[] = [
|
|
50
|
+
{ match: ['pdf'], icon: 'FilePdf', tone: 'pdf' },
|
|
51
|
+
{ match: ['csv'], icon: 'FileCsv', tone: 'csv' },
|
|
52
|
+
{ match: ['sheet', 'excel', 'xls'], icon: 'FileXls', tone: 'sheet' },
|
|
53
|
+
{ match: ['word', 'doc'], icon: 'FileDoc', tone: 'doc' },
|
|
54
|
+
]
|
|
55
|
+
|
|
56
|
+
const format = computed(() => {
|
|
57
|
+
const value = props.format.toLowerCase()
|
|
58
|
+
return (
|
|
59
|
+
FORMATS.find(entry => entry.match.some(word => value.includes(word)))
|
|
60
|
+
?? { icon: 'FileText', tone: 'plain' }
|
|
61
|
+
)
|
|
62
|
+
})
|
|
63
|
+
|
|
64
|
+
const ACTION_ICONS: Record<string, string> = {
|
|
65
|
+
preview: 'Eye',
|
|
66
|
+
open: 'ArrowSquareOut',
|
|
67
|
+
download: 'DownloadSimple',
|
|
68
|
+
}
|
|
69
|
+
</script>
|
|
70
|
+
|
|
71
|
+
<template>
|
|
72
|
+
<button type="button" class="rm-file-row" @click="emit('select')">
|
|
73
|
+
<RmIcon
|
|
74
|
+
class="rm-file-row__icon"
|
|
75
|
+
:class="`rm-file-row__icon--${format.tone}`"
|
|
76
|
+
:name="format.icon"
|
|
77
|
+
:size="16"
|
|
78
|
+
/>
|
|
79
|
+
<span class="rm-file-row__name">{{ name }}</span>
|
|
80
|
+
<span v-if="size" class="rm-file-row__size">{{ size }}</span>
|
|
81
|
+
<RmIcon
|
|
82
|
+
v-if="action !== 'none'"
|
|
83
|
+
class="rm-file-row__action"
|
|
84
|
+
:name="ACTION_ICONS[action]"
|
|
85
|
+
:size="14"
|
|
86
|
+
/>
|
|
87
|
+
</button>
|
|
88
|
+
</template>
|
|
89
|
+
|
|
90
|
+
<style scoped>
|
|
91
|
+
.rm-file-row{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-13);gap:8px;line-height:1.4;padding:8px;text-align:left;transition:background-color var(--duration-fast) linear;width:100%}.rm-file-row:hover{background:var(--bg-surface-2)}.rm-file-row__icon{color:var(--text-muted);flex:none}.rm-file-row__icon--pdf{color:var(--color-danger)}.rm-file-row__icon--csv{color:var(--color-info)}.rm-file-row__icon--sheet{color:var(--color-success)}.rm-file-row__icon--doc{color:var(--color-primary)}.rm-file-row__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-file-row__size{font-size:var(--font-12)}.rm-file-row__action,.rm-file-row__size{color:var(--text-muted);flex:none}
|
|
92
|
+
</style>
|