@tekkare/romulus 0.1.87 → 0.1.88
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/FileRow.vue +19 -19
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -12,6 +12,12 @@
|
|
|
12
12
|
et `ph-file-csv` ne se confondent pas en noir et blanc. Elle vient des tokens
|
|
13
13
|
du theme et non d'un hexadecimal en dur, pour suivre le mode nuit.
|
|
14
14
|
|
|
15
|
+
Elle passe par la prop `color` de RmIcon et non par une classe : le style
|
|
16
|
+
scope de ce fichier n'atteint pas le `<svg>` que RmIcon monte derriere son
|
|
17
|
+
`<ClientOnly>`, et l'icone retombait sur la couleur du texte. Les classes
|
|
18
|
+
posees sur RmIcon ne servent donc qu'a la mise en place, jamais a la
|
|
19
|
+
couleur.
|
|
20
|
+
|
|
15
21
|
Le composant ne navigue pas et n'ouvre rien lui-meme : il emet `select`, la
|
|
16
22
|
page decide (un apercu dans un tiroir, un onglet, un telechargement).
|
|
17
23
|
-->
|
|
@@ -46,18 +52,18 @@ const emit = defineEmits<{ select: [] }>()
|
|
|
46
52
|
* neutre dit « document » sans se tromper, ce qu'une icone approchante ne
|
|
47
53
|
* ferait pas.
|
|
48
54
|
*/
|
|
49
|
-
const FORMATS: { match: string[]; icon: string;
|
|
50
|
-
{ match: ['pdf'], icon: 'FilePdf',
|
|
51
|
-
{ match: ['csv'], icon: 'FileCsv',
|
|
52
|
-
{ match: ['sheet', 'excel', 'xls'], icon: 'FileXls',
|
|
53
|
-
{ match: ['word', 'doc'], icon: 'FileDoc',
|
|
55
|
+
const FORMATS: { match: string[]; icon: string; color: string }[] = [
|
|
56
|
+
{ match: ['pdf'], icon: 'FilePdf', color: 'var(--color-danger)' },
|
|
57
|
+
{ match: ['csv'], icon: 'FileCsv', color: 'var(--color-info)' },
|
|
58
|
+
{ match: ['sheet', 'excel', 'xls'], icon: 'FileXls', color: 'var(--color-success)' },
|
|
59
|
+
{ match: ['word', 'doc'], icon: 'FileDoc', color: 'var(--color-primary)' },
|
|
54
60
|
]
|
|
55
61
|
|
|
56
62
|
const format = computed(() => {
|
|
57
63
|
const value = props.format.toLowerCase()
|
|
58
64
|
return (
|
|
59
65
|
FORMATS.find(entry => entry.match.some(word => value.includes(word)))
|
|
60
|
-
?? { icon: 'FileText',
|
|
66
|
+
?? { icon: 'FileText', color: 'var(--text-muted)' }
|
|
61
67
|
)
|
|
62
68
|
})
|
|
63
69
|
|
|
@@ -70,23 +76,17 @@ const ACTION_ICONS: Record<string, string> = {
|
|
|
70
76
|
|
|
71
77
|
<template>
|
|
72
78
|
<button type="button" class="rm-file-row" @click="emit('select')">
|
|
73
|
-
<
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
:name="format.icon"
|
|
77
|
-
:size="16"
|
|
78
|
-
/>
|
|
79
|
+
<span class="rm-file-row__icon">
|
|
80
|
+
<RmIcon :name="format.icon" :size="16" :color="format.color" />
|
|
81
|
+
</span>
|
|
79
82
|
<span class="rm-file-row__name">{{ name }}</span>
|
|
80
83
|
<span v-if="size" class="rm-file-row__size">{{ size }}</span>
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
:name="ACTION_ICONS[action]"
|
|
85
|
-
:size="14"
|
|
86
|
-
/>
|
|
84
|
+
<span v-if="action !== 'none'" class="rm-file-row__action">
|
|
85
|
+
<RmIcon :name="ACTION_ICONS[action]" :size="14" color="var(--text-muted)" />
|
|
86
|
+
</span>
|
|
87
87
|
</button>
|
|
88
88
|
</template>
|
|
89
89
|
|
|
90
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-
|
|
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__action,.rm-file-row__icon{display:inline-flex;flex:none}.rm-file-row__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-file-row__size{color:var(--text-muted);flex:none;font-size:var(--font-12)}
|
|
92
92
|
</style>
|