feat: entry list at /content/:key

web/src/components/ColumnPickerList.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { fieldIcon } from '@/lib/schemaFields'
+import { COLUMN_CAP } from '@/lib/entryColumns'
+import type { BuiltinField } from '@/lib/contentTypes'
+
+const props = defineProps<{
+	fields: BuiltinField[]
+	keys: string[]
+	atCap: boolean
+	touch?: boolean
+}>()
+
+const emit = defineEmits<{ toggle: [key: string, on: boolean] }>()
+
+function isLocked(key: string) {
+	const checked = props.keys.includes(key)
+	return checked ? props.keys.length === 1 : props.atCap
+}
+
+const ROW = 'flex items-center gap-2.5 px-2'
+</script>
+
+<template>
+	<div class="flex flex-col">
+		<div
+			v-for="field in fields"
+			:key="field.key"
+			data-testid="column-row"
+			:class="[ROW, touch ? 'min-h-12' : 'min-h-9']"
+		>
+			<UCheckbox
+				:model-value="keys.includes(field.key)"
+				:disabled="isLocked(field.key)"
+				:ui="{
+					root: 'w-full items-center',
+					base: 'rounded-none',
+					container: 'h-auto',
+					wrapper: 'ms-2.5 min-w-0 flex-1',
+					label: 'flex w-full items-center gap-2.5 font-normal text-default',
+				}"
+				@update:model-value="emit('toggle', field.key, $event === true)"
+			>
+				<template #label>
+					<UIcon :name="fieldIcon(field.type)" class="size-3.5 shrink-0 text-muted" />
+					<span class="min-w-0 flex-1 truncate">{{ field.label }}</span>
+					<span class="font-mono text-xs text-muted">{{ field.key }}</span>
+				</template>
+			</UCheckbox>
+		</div>
+		<div data-testid="column-fixed-row" :class="[ROW, touch ? 'min-h-12' : 'min-h-9']">
+			<UCheckbox
+				:model-value="false"
+				disabled
+				:ui="{
+					root: 'w-full items-center',
+					base: 'rounded-none',
+					container: 'h-auto',
+					wrapper: 'ms-2.5 min-w-0 flex-1',
+					label: 'flex w-full items-center gap-2.5 font-normal text-muted',
+				}"
+			>
+				<template #label>
+					<UIcon name="i-lucide-clock" class="size-3.5 shrink-0" />
+					<span>{{ t('Created and updated dates always show') }}</span>
+				</template>
+			</UCheckbox>
+		</div>
+		<p v-if="atCap" role="status" class="px-2 pt-1 text-xs text-muted">
+			{{ t('You can show up to {0} fields.', [COLUMN_CAP]) }}
+		</p>
+	</div>
+</template>