78 lines
2.1 KiB
Vue
78 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { fieldTypeSpec } from '@/lib/fieldTypes'
|
|
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="fieldTypeSpec(field.type).icon"
|
|
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>
|