feat: integration page (PART 3/3)

web/src/components/ApiFieldTable.vue

@@ -0,0 +1,76 @@
+<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>