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-item.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-item.vue')
| -rw-r--r-- | src/ui/c-key-value-list/c-key-value-list-item.vue | 27 |
1 files changed, 27 insertions, 0 deletions
diff --git a/src/ui/c-key-value-list/c-key-value-list-item.vue b/src/ui/c-key-value-list/c-key-value-list-item.vue new file mode 100644 index 0000000..d21ef5d --- /dev/null +++ b/src/ui/c-key-value-list/c-key-value-list-item.vue @@ -0,0 +1,27 @@ +<script lang="ts" setup> +import _ from 'lodash'; +import type { CKeyValueListItem } from './c-key-value-list.types'; + +const props = defineProps<{ item: CKeyValueListItem }>(); +const { item } = toRefs(props); +</script> + +<template> + <div 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> + </div> + <div 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" /> + </div> + <div v-else-if="_.isNumber(item.value)" font-mono> + <c-text-copyable :value="String(item.value)" :show-icon="item.showCopyButton ?? true" /> + </div> + <div v-else-if="_.isNil(item.value) || item.value === ''" op-70> + {{ item.placeholder ?? 'N/A' }} + </div> + <div v-else> + <c-text-copyable :value="item.value" :show-icon="item.showCopyButton ?? true" /> + </div> +</template> |