aboutsummaryrefslogtreecommitdiff
path: root/src/ui/c-key-value-list/c-key-value-list.vue
diff options
context:
space:
mode:
authorGravatar Corentin THOMASSET <corentin.thomasset74@gmail.com> 2023-09-03 18:12:22 +0200
committerGravatar GitHub <noreply@github.com> 2023-09-03 16:12:22 +0000
commit7ab9204e96e21050760cf3280197c139551829f5 (patch)
tree533ecf18545b79bfef2d2b5db85caa144a4173f3 /src/ui/c-key-value-list/c-key-value-list.vue
parentc7d4562d3b196d2f03d35e88679773d509e7d21f (diff)
downloadit-tools-7ab9204e96e21050760cf3280197c139551829f5.tar.gz
it-tools-7ab9204e96e21050760cf3280197c139551829f5.tar.zst
it-tools-7ab9204e96e21050760cf3280197c139551829f5.zip
refactor(c-key-value-list): got rid of table for layout (#611)
Diffstat (limited to 'src/ui/c-key-value-list/c-key-value-list.vue')
-rw-r--r--src/ui/c-key-value-list/c-key-value-list.vue30
1 files changed, 7 insertions, 23 deletions
diff --git a/src/ui/c-key-value-list/c-key-value-list.vue b/src/ui/c-key-value-list/c-key-value-list.vue
index e3b19af..d8a2b00 100644
--- a/src/ui/c-key-value-list/c-key-value-list.vue
+++ b/src/ui/c-key-value-list/c-key-value-list.vue
@@ -9,29 +9,13 @@ const formattedItems = computed(() => items.value.filter(item => !_.isNil(item.v
</script>
<template>
- <table border-collapse table-fixed>
- <tr v-for="item in formattedItems" :key="item.label">
- <td py-1 pr-2 text-right font-bold>
+ <div my-5>
+ <div v-for="item in formattedItems" :key="item.label" flex gap-2 py-1 class="c-key-value-list__item">
+ <div flex-basis-180px text-right font-bold class="c-key-value-list__key">
{{ item.label }}
- </td>
+ </div>
- <td v-if="_.isArray(item.value)">
- <div v-for="value in item.value" :key="value">
- <c-text-copyable :value="value" :show-icon="item.showCopyButton ?? true" />
- </div>
- </td>
- <td v-else-if="_.isBoolean(item.value)">
- <c-text-copyable :value="item.value ? 'true' : 'false'" :displayed-value="item.value ? 'Yes' : 'No'" :show-icon="item.showCopyButton ?? true" />
- </td>
- <td v-else-if="_.isNumber(item.value)" font-mono>
- <c-text-copyable :value="String(item.value)" :show-icon="item.showCopyButton ?? true" />
- </td>
- <td v-else-if="_.isNil(item.value) || item.value === ''" op-70>
- {{ item.placeholder ?? 'N/A' }}
- </td>
- <td v-else>
- <c-text-copyable :value="item.value" :show-icon="item.showCopyButton ?? true" />
- </td>
- </tr>
- </table>
+ <c-key-value-list-item :item="item" class="c-key-value-list__value" />
+ </div>
+ </div>
</template>