77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
import type { ApiField } from '@/data/apiCatalogue'
|
|
|
|
defineProps<{
|
|
fields: ApiField[]
|
|
}>()
|
|
|
|
function fixed(width: string) {
|
|
return { meta: { class: { th: width, td: width } } }
|
|
}
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
accessorKey: 'name',
|
|
get header() {
|
|
return t('Name')
|
|
},
|
|
...fixed('w-33'),
|
|
},
|
|
{
|
|
accessorKey: 'type',
|
|
get header() {
|
|
return t('Type')
|
|
},
|
|
...fixed('w-21'),
|
|
},
|
|
{
|
|
accessorKey: 'required',
|
|
get header() {
|
|
return t('Required')
|
|
},
|
|
...fixed('w-21'),
|
|
},
|
|
{
|
|
accessorKey: 'rule',
|
|
get header() {
|
|
return t('Rule')
|
|
},
|
|
},
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<UTable
|
|
:data="fields"
|
|
:columns="columns"
|
|
:ui="{
|
|
root: 'border border-default',
|
|
base: 'table-fixed',
|
|
thead: 'bg-elevated [&>tr]:border-t-0',
|
|
separator: 'hidden',
|
|
th: 'px-2.5 py-1.5 text-sm font-medium text-muted',
|
|
td: 'px-2.5 py-2 align-top text-sm whitespace-normal text-toned',
|
|
tbody: 'divide-y-0',
|
|
tr: 'border-t border-default',
|
|
}"
|
|
>
|
|
<template #name-cell="{ row }">
|
|
<span class="font-mono text-xs font-medium break-words text-highlighted">{{
|
|
row.original.name
|
|
}}</span>
|
|
</template>
|
|
<template #type-cell="{ row }">
|
|
<span class="font-mono text-xs">{{ row.original.type }}</span>
|
|
</template>
|
|
<template #required-cell="{ row }">
|
|
{{ row.original.required ? t('Yes') : t('No') }}
|
|
</template>
|
|
<template #rule-cell="{ row }">
|
|
<span class="text-pretty">{{ row.original.rule }}</span>
|
|
</template>
|
|
</UTable>
|
|
</template>
|