38 lines
990 B
Vue
38 lines
990 B
Vue
<template>
|
|
<table v-if="dataSource.length" class="w-full border-collapse border">
|
|
<tbody>
|
|
<tr v-for="item in dataSource" :key="item.key" class="h-8 border-b">
|
|
<td class="border-r bg-gray-300 px-4 dark:bg-gray-800">
|
|
{{ item.key }}
|
|
</td>
|
|
<td class="break-all px-4">{{ item.value }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div v-else class="flex flex-col items-center gap-2 py-5">
|
|
<i class="pi pi-info-circle text-lg"></i>
|
|
<div>no metadata</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useModelMetadata } from 'hooks/model'
|
|
import { computed } from 'vue'
|
|
|
|
const { metadata } = useModelMetadata()
|
|
|
|
const dataSource = computed(() => {
|
|
const dataSource: { key: string; value: any }[] = []
|
|
|
|
for (const key in metadata.value) {
|
|
if (Object.prototype.hasOwnProperty.call(metadata.value, key)) {
|
|
const value = metadata.value[key]
|
|
dataSource.push({ key, value })
|
|
}
|
|
}
|
|
|
|
return dataSource
|
|
})
|
|
</script>
|