| 1 | <template> |
| 2 | <n-card size="small" content-class="divide-border flex flex-col divide-y px-3.5! py-1!" :embedded :title :segmented> |
| 3 | <div v-for="(value, key) of list" :key class="group/prop-item flex items-center justify-between gap-4 py-2"> |
| 4 | <div class="text-secondary text-sm whitespace-nowrap">{{ key }}</div> |
| 5 | <div class="group-hover/prop-item:text-primary text-right font-mono text-sm"> |
| 6 | {{ stringFormat(key, value) }} |
| 7 | </div> |
| 8 | </div> |
| 9 | </n-card> |
| 10 | </template> |
| 11 | |
| 12 | <script setup lang="ts"> |
| 13 | import { NCard } from "naive-ui" |
| 14 | import { useSettingsStore } from "@/stores/settings" |
| 15 | import { isDate } from "@/utils" |
| 16 | import { formatDate } from "@/utils/format" |
| 17 | |
| 18 | export type TransformerValue = string | Date | number | null | object |
| 19 | export type Transformer = (val?: TransformerValue) => TransformerValue |
| 20 | |
| 21 | const { list, embedded, dateAutodetect, transformer, title, segmented } = defineProps<{ |
| 22 | list: object |
| 23 | embedded?: boolean |
| 24 | dateAutodetect?: boolean |
| 25 | transformer?: Record<"all" | string, Transformer> |
| 26 | title?: string |
| 27 | segmented?: boolean |
| 28 | }>() |
| 29 | |
| 30 | const dFormats = useSettingsStore().dateFormat |
| 31 | |
| 32 | function stringFormat(key: string, val?: string | Date | number | null) { |
| 33 | if (transformer?.[key]) { |
| 34 | return transformer[key](val) |
| 35 | } |
| 36 | |
| 37 | if (dateAutodetect && isDate(val)) { |
| 38 | return formatDate(val as string, dFormats.datetimesec) |
| 39 | } |
| 40 | |
| 41 | if (transformer?.all) { |
| 42 | return transformer.all(val) |
| 43 | } |
| 44 | |
| 45 | return JSON.stringify(val) |
| 46 | } |
| 47 | </script> |