diff options
| author |  Corentin THOMASSET <corentin.thomasset74@gmail.com>
| 2023-09-03 18:12:22 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-09-03 16:12:22 +0000 |
| commit | 7ab9204e96e21050760cf3280197c139551829f5 (patch) | |
| tree | 533ecf18545b79bfef2d2b5db85caa144a4173f3 /src/ui/c-key-value-list/c-key-value-list.vue | |
| parent | c7d4562d3b196d2f03d35e88679773d509e7d21f (diff) | |
| download | it-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.vue | 30 |
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> |