@kinetis/vector-ui 0.0.0-stage → 0.9.1

package/app/components/Vx/Cell/Text.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { VectorField } from '#vector/app/types/vector'
+
+const props = defineProps<{ field: VectorField, value: unknown, context: 'index' | 'show' }>()
+const text = computed(() => props.value === null || props.value === undefined ? '' : String(props.value))
+const truncated = computed(() => props.context === 'index' && text.value.length > 80 ? text.value.slice(0, 77) + '…' : text.value)
+const { t } = useVectorT()
+</script>
+
+<template>
+    <span v-if="text === ''" class="text-disabled">{{ t('common.none') }}</span>
+    <span v-else :title="truncated !== text ? text : undefined">{{ truncated }}</span>
+</template>

package/app/components/Vx/Cell/Url.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{ value: unknown }>()
+const { t } = useVectorT()
+</script>
+
+<template>
+    <a v-if="typeof value === 'string' && value && allowedHref(value)" :href="value" target="_blank" rel="noopener noreferrer" @click.stop>{{ value }}</a>
+    <!-- a value with another scheme is shown, never followed -->
+    <span v-else-if="typeof value === 'string' && value">{{ value }}</span>
+    <span v-else class="text-disabled">{{ t('common.none') }}</span>
+</template>

package/app/components/Vx/Cell.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { VectorField, VectorResource } from '#vector/app/types/vector'
+
+// Dispatches a value to the component the field registry names. A
+// built-in arrives as a component; an app override arrives as the name
+// of a globally registered one and is resolved here, in setup.
+const props = defineProps<{
+    field: VectorField
+    value: unknown
+    record: Record<string, unknown>
+    resource: VectorResource
+    context: 'index' | 'show'
+}>()
+
+const { cellFor } = useVectorFields()
+const component = computed(() => {
+    const cell = cellFor(props.field)
+
+    return typeof cell === 'string' ? resolveComponent(cell) : cell
+})
+</script>
+
+<template>
+    <component :is="component" :field="field" :value="value" :record="record" :resource="resource" :context="context" />
+</template>

package/app/components/Vx/CommandPalette.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { fieldProps, type VectorSearchResult } from '#vector/app/types/vector'
+
+// Ctrl/Cmd+K: search every globally searchable resource, jump to a
+// record or a resource. A dialog and a list — no Labs dependency.
+const appConfig = useAppConfig()
+const api = useVectorApi()
+const { menu, resource: resourceOf } = useVectorSchema()
+const open = ref(false)
+const query = ref<string | null>('')
+const results = ref<VectorSearchResult[]>([])
+const loading = ref(false)
+let requestId = 0
+const { t } = useVectorT()
+
+const search = useDebounceFn(async (q: string) => {
+    const id = ++requestId
+    const term = q.trim()
+
+    if (term === '') {
+        results.value = []
+        return
+    }
+
+    loading.value = true
+    try {
+        const response = await api<{ results: VectorSearchResult[] }>('/vector/search', { query: { q: term } })
+        if (id === requestId) results.value = response.results
+    } finally {
+        if (id === requestId) loading.value = false
+    }
+}, 200)
+
+watch(query, q => search(q ?? ''))
+watch(open, (o) => { if (!o) { query.value = ''; results.value = [] } })
+
+const keyOf = (r: VectorSearchResult) => `${r.resource}-${r.id}`
+
+/** The subtitle as its field shows it — an enum by its label — then the resource. */
+function subtitleOf(r: VectorSearchResult): string {
+    const resource = resourceOf(r.resource)
+    const field = resource?.fields.find(f => f.name === resource.searchResult?.subtitle)
+    let text = r.subtitle ?? null
+    if (text !== null && field?.type === 'enum') text = field.options?.find(o => String(o.value) === text)?.label ?? text
+    else if (text !== null && field?.type === 'number' && text !== '' && !Number.isNaN(Number(text))) {
+        const decimals = fieldProps(field).decimals
+        text = formatNumber(Number(text), typeof decimals === 'number' ? decimals : undefined)
+    }
+    return [text, r.resourceLabel].filter(Boolean).join(' · ')
+}
+
+// Thumbnails come through the API client, like the image cells, so a
+// bearer-authenticated admin sees them too; a missing file keeps the icon.
+const thumbs = reactive<Record<string, string>>({})
+watch(results, (list) => {
+    for (const key of Object.keys(thumbs)) {
+        delete thumbs[key]
+    }
+    for (const r of list) {
+        if (!r.image) continue
+        api<Blob>(`/vector/r/${encodeURIComponent(r.resource)}/${encodeURIComponent(String(r.id))}/files/${encodeURIComponent(r.image)}`, { responseType: 'blob' })
+            .then(dataUrl)
+            .then((url) => { if (results.value.includes(r)) thumbs[keyOf(r)] = url })
+            .catch(() => {})
+    }
+})
+
+const pages = useVectorPages()
+const pageItems = computed(() => Object.entries(pages.value).filter(([, p]) => (query.value ?? '').trim() === '' || p.title.toLowerCase().includes((query.value ?? '').trim().toLowerCase())))
+const resources = computed(() => menu.value.flatMap(g => g.items).filter(r => (query.value ?? '').trim() === '' || r.label.toLowerCase().includes((query.value ?? '').trim().toLowerCase())))
+
+function go(path: string) {
+    open.value = false
+    navigateTo(`${appConfig.vector.basePath}${path}`)
+}
+
+if (import.meta.client) {
+    useEventListener(window, 'keydown', (event: KeyboardEvent) => {
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+            event.preventDefault()
+            open.value = !open.value
+        }
+    })
+}
+
+defineExpose({ open })
+</script>
+
+<template>
+    <v-dialog v-model="open" max-width="600" scrollable>
+        <v-card>
+            <v-text-field v-model="query" autofocus variant="solo" flat :placeholder="t('shell.palette.placeholder')" :aria-label="t('common.search')" prepend-inner-icon="mdi-magnify" :loading="loading" hide-details clearable class="flex-grow-0" />
+            <v-divider />
+            <v-card-text class="pa-0" style="max-height: 420px">
+                <v-list density="compact">
+                    <template v-if="results.length">
+                        <v-list-subheader>{{ t('shell.palette.records') }}</v-list-subheader>
+                        <v-list-item v-for="r in results" :key="keyOf(r)" :title="r.title" :subtitle="subtitleOf(r)" @click="go(`/r/${r.resource}/${encodeURIComponent(String(r.id))}`)">
+                            <template #prepend>
+                                <v-avatar v-if="thumbs[keyOf(r)]" rounded size="32" class="me-4">
+                                    <v-img :src="thumbs[keyOf(r)]" alt="" cover />
+                                </v-avatar>
+                                <v-icon v-else icon="mdi-file-document-outline" />
+                            </template>
+                        </v-list-item>
+                    </template>
+                    <v-list-subheader>{{ t('shell.palette.resources') }}</v-list-subheader>
+                    <v-list-item v-for="r in resources" :key="r.slug" :title="r.label" :prepend-icon="r.icon ?? 'mdi-table'" @click="go(`/r/${r.slug}`)" />
+                    <template v-if="pageItems.length">
+                        <v-list-subheader>{{ t('shell.nav.pages') }}</v-list-subheader>
+                        <v-list-item v-for="[name, p] in pageItems" :key="name" :title="p.title" :prepend-icon="p.icon ?? 'mdi-file-document-outline'" @click="go(`/p/${name}`)" />
+                    </template>
+                    <v-list-item v-if="(query ?? '').trim() && !loading && results.length === 0" :title="t('shell.palette.noMatch')" disabled />
+                </v-list>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+</template>

package/app/components/Vx/Confirm.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const { t } = useVectorT()
+const { pending, settle } = useConfirm()
+const open = computed({ get: () => pending.value !== null, set: (value) => { if (!value) settle(false) } })
+</script>
+
+<template>
+    <v-dialog v-model="open" max-width="440" persistent>
+        <v-card v-if="pending">
+            <v-card-title>{{ pending.title }}</v-card-title>
+            <v-card-text v-if="pending.text">{{ pending.text }}</v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn variant="text" @click="settle(false)">{{ pending.cancelText ?? t('common.cancel') }}</v-btn>
+                <v-btn :color="pending.destructive ? 'error' : 'primary'" @click="settle(true)">{{ pending.confirmText ?? t('common.confirm') }}</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>

package/app/components/Vx/Dashboard.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { VectorDashboard } from '#vector/app/types/vector'
+
+// One dashboard page: its cards in a responsive grid, each loading its own data.
+// The server translates its labels, so it is fetched again when the language changes.
+const props = defineProps<{ name: string }>()
+const dashboards = useVectorDashboards()
+const { t } = useVectorT()
+const { current: locale } = useVectorLocale()
+const { data, error } = await useAsyncData(() => `vector.dashboard.${props.name}`, () => dashboards.show(props.name), { watch: [locale] })
+const dashboard = computed<VectorDashboard | null>(() => data.value ?? null)
+</script>
+
+<template>
+    <div>
+        <div class="d-flex align-center mb-4">
+            <v-icon v-if="dashboard?.icon" :icon="dashboard.icon" class="me-2" />
+            <h1 class="text-h4">{{ dashboard?.label ?? t('dashboard.title') }}</h1>
+        </div>
+        <v-alert v-if="error" type="error" variant="tonal" :text="vectorErrorMessage(error)" />
+        <v-row v-else-if="dashboard" density="compact">
+            <v-col v-for="widget in dashboard.widgets" :key="widget.name" cols="12" :md="widget.width">
+                <VxWidgetCard :widget="widget" :load="(range: string | undefined) => dashboards.widget(props.name, widget.name, range)" />
+            </v-col>
+        </v-row>
+    </div>
+</template>

package/app/components/Vx/FieldsForm.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { VectorField, VectorFieldState } from '#vector/app/types/vector'
+
+// A block of inputs for a loose field list — an action's dialog, a
+// settings group — sharing the record form's registry, rules and 422
+// mapping. The owner holds the values and the server errors.
+const props = defineProps<{
+    fields: VectorField[]
+    values: Record<string, unknown>
+    serverErrors: Record<string, string[]>
+    resource?: string
+}>()
+
+const emit = defineEmits<{ clear: [name: string] }>()
+const { inputFor } = useVectorInputs()
+const wide = (field: VectorField) => ['markdown', 'richtext', 'text', 'json'].includes(field.type)
+
+// Conditions (visibleWhen, requiredWhen, disabledWhen) follow the values as they are edited.
+const states = computed<Record<string, VectorFieldState>>(() => Object.fromEntries(props.fields.map(f => [f.name, fieldState(f, props.values)])))
+const shownFields = computed(() => props.fields.filter(f => states.value[f.name]?.visible !== false))
+
+function set(name: string, value: unknown) {
+    // The parent owns the values object and hands it down to be filled in.
+    // eslint-disable-next-line vue/no-mutating-props
+    props.values[name] = value
+    emit('clear', name)
+}
+</script>
+
+<template>
+    <v-row density="compact">
+        <v-col v-for="field in shownFields" :key="field.name" cols="12" :md="wide(field) || fields.length === 1 ? 12 : 6">
+            <component
+                :is="inputFor(field)"
+                :model-value="values[field.name]"
+                :field="field"
+                :disabled="states[field.name]?.disabled === true"
+                :rules="rulesFor(field, 'create', states[field.name])"
+                :error-messages="serverErrors[field.name] ?? []"
+                :record="values"
+                :resource="resource ?? ''"
+                @update:model-value="(v: unknown) => set(field.name, v)"
+            />
+        </v-col>
+    </v-row>
+</template>

package/app/components/Vx/Import/Dialog.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { VectorImportMode, VectorImportPreview, VectorResource } from '#vector/app/types/vector'
+
+// CSV import in two steps: upload for a preview and a suggested
+// mapping, adjust the mapping, then queue the import and follow the job.
+// An import creates records, or updates the records a key column finds
+// (the key or a unique field), or does either row by row.
+const props = defineProps<{ resource: VectorResource }>()
+const emit = defineEmits<{ queued: [jobId: number], cancel: [] }>()
+
+const appConfig = useAppConfig()
+const client = useVectorResource(() => props.resource.slug)
+const { t, noun } = useVectorT()
+const notifications = useVectorNotifications()
+const file = ref<File | null>(null)
+const preview = ref<VectorImportPreview | null>(null)
+const mapping = reactive<Record<string, string>>({})
+const busy = ref(false)
+const error = ref<string | null>(null)
+const mode = ref<VectorImportMode>(props.resource.permissions.create ? 'create' : 'update')
+const key = ref('')
+
+const modes = computed(() => (['create', 'update', 'upsert'] as const)
+    .filter(m => m === 'create' ? props.resource.permissions.create : m === 'update' ? props.resource.permissions.update : props.resource.permissions.create && props.resource.permissions.update)
+    .map(m => ({ title: t(`list.import.modes.${m}`), value: m })))
+
+// what the mode writes; an update also maps the column it matches rows by
+const fields = computed(() => {
+    const views = mode.value === 'create' ? ['create'] : mode.value === 'update' ? ['update'] : ['create', 'update']
+    const writable = props.resource.fields.filter(f => !f.readonly && f.views.some(v => views.includes(v)) && !['id', 'hasOne', 'hasMany', 'computed'].includes(f.type))
+    const keys = mode.value === 'create' ? [] : keyFields.value.filter(f => !writable.includes(f))
+
+    return [...keys, ...writable].map(f => ({ title: f.label, value: f.name }))
+})
+const keyFields = computed(() => props.resource.fields.filter(f => f.name === props.resource.primaryKey.field || f.unique))
+const keyChoices = computed(() => keyFields.value.filter(f => Object.values(mapping).includes(f.name)).map(f => ({ title: f.label, value: f.name })))
+
+watch(keyChoices, choices => {
+    if (!choices.some(c => c.value === key.value)) key.value = choices[0]?.value ?? ''
+})
+// the suggestion maps the key column too; a mode that does not take a field skips its column
+const suggested = ref<Record<string, string>>({})
+watch(mode, applyMapping)
+
+function applyMapping() {
+    const allowed = new Set(fields.value.map(f => f.value))
+    for (const key of Object.keys(mapping)) delete mapping[key]
+    for (const header of preview.value?.headers ?? []) {
+        const field = suggested.value[header] ?? ''
+        mapping[header] = allowed.has(field) ? field : ''
+    }
+}
+
+async function analyse() {
+    if (!file.value) return
+    busy.value = true
+    error.value = null
+
+    try {
+        preview.value = await client.importPreview(file.value)
+        suggested.value = preview.value.mapping
+        applyMapping()
+    } catch (caught) {
+        error.value = vectorErrorMessage(caught)
+    } finally {
+        busy.value = false
+    }
+}
+
+async function start() {
+    if (!file.value) return
+    busy.value = true
+    error.value = null
+
+    try {
+        const chosen = Object.fromEntries(Object.entries(mapping).filter(([, v]) => v))
+        const { jobId, rows } = await client.importCsv(file.value, chosen, mode.value, key.value)
+        notifications.success(t('list.import.queued', { rows }))
+        emit('queued', jobId)
+        await navigateTo(`${appConfig.vector.basePath}/jobs/${jobId}`)
+    } catch (caught) {
+        error.value = vectorErrorMessage(caught)
+    } finally {
+        busy.value = false
+    }
+}
+</script>
+
+<template>
+    <v-dialog :model-value="true" max-width="720" persistent scrollable @update:model-value="emit('cancel')">
+        <v-card :title="t('list.import.title', { label: noun(resource.label) })">
+            <v-card-text>
+                <v-alert v-if="error" type="error" variant="tonal" class="mb-4" :text="error" />
+                <v-file-input v-model="file" :label="t('list.import.file')" accept=".csv,text/csv" prepend-icon="mdi-file-delimited-outline" :disabled="busy" @update:model-value="preview = null" />
+                <v-btn v-if="!preview" color="primary" :disabled="!file" :loading="busy" @click="analyse">{{ t('list.import.analyse') }}</v-btn>
+                <template v-else>
+                    <p class="text-body-2 mb-3">{{ t('list.import.instructions', { rows: preview.rows, pipe: '|' }) }}</p>
+                    <div class="d-flex flex-wrap ga-3 mb-3">
+                        <v-select v-model="mode" :items="modes" :label="t('list.import.mode')" density="compact" hide-details style="min-width: 220px" />
+                        <v-select
+                            v-if="mode !== 'create'"
+                            v-model="key"
+                            :items="keyChoices"
+                            :label="t('list.import.key')"
+                            :no-data-text="t('list.import.noKey')"
+                            density="compact"
+                            hide-details
+                            style="min-width: 220px"
+                        />
+                    </div>
+                    <p v-if="mode !== 'create'" class="text-body-2 text-medium-emphasis mb-3">{{ t(`list.import.modeHelp.${mode}`) }}</p>
+                    <v-table density="compact">
+                        <thead><tr><th>{{ t('list.import.csvColumn') }}</th><th>{{ t('list.import.sample') }}</th><th style="width: 260px">{{ t('list.field') }}</th></tr></thead>
+                        <tbody>
+                            <tr v-for="header in preview.headers" :key="header">
+                                <td>{{ header }}</td>
+                                <td class="text-medium-emphasis text-truncate" style="max-width: 200px">{{ preview.sample[0]?.[header] ?? '' }}</td>
+                                <td><v-select v-model="mapping[header]" :items="[{ title: t('list.import.skip'), value: '' }, ...fields]" density="compact" hide-details /></td>
+                            </tr>
+                        </tbody>
+                    </v-table>
+                </template>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn variant="text" :disabled="busy" @click="emit('cancel')">{{ t('common.cancel') }}</v-btn>
+                <v-btn v-if="preview" color="primary" :loading="busy" :disabled="mode !== 'create' && !key" @click="start">{{ t('list.import.start', { rows: preview.rows }) }}</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>

package/app/components/Vx/Inbox.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// The bell: unread count polled every 30 seconds, the latest messages in a menu.
+const appConfig = useAppConfig()
+const inbox = useVectorNotificationsInbox()
+const open = ref(false)
+const { t } = useVectorT()
+
+onMounted(() => inbox.refresh().catch(() => undefined))
+const { pause } = useIntervalFn(() => inbox.refresh().catch(() => undefined), 30000)
+onUnmounted(pause)
+watch(open, o => { if (o) inbox.refresh().catch(() => undefined) })
+
+async function go(id: number, link: string | null) {
+    await inbox.markRead(id)
+    open.value = false
+    if (link) navigateTo(`${appConfig.vector.basePath}${link}`)
+}
+</script>
+
+<template>
+    <v-menu v-model="open" :close-on-content-click="false" location="bottom end" width="380">
+        <template #activator="{ props: activator }">
+            <v-btn v-bind="activator" icon variant="text" :aria-label="t('shell.inbox.title')">
+                <v-badge :content="inbox.unread.value" :model-value="inbox.unread.value > 0" color="error">
+                    <v-icon icon="mdi-bell-outline" />
+                </v-badge>
+            </v-btn>
+        </template>
+        <v-card>
+            <v-card-title class="d-flex align-center text-subtitle-1">
+                {{ t('shell.inbox.title') }}
+                <v-spacer />
+                <v-btn v-if="inbox.unread.value" size="small" variant="text" @click="inbox.markAllRead()">{{ t('shell.inbox.markAllRead') }}</v-btn>
+            </v-card-title>
+            <v-divider />
+            <v-list density="compact" max-height="420" style="overflow-y: auto">
+                <v-list-item v-for="n in inbox.items.value" :key="n.id" :title="n.title" :subtitle="n.body ?? undefined" :class="{ 'bg-surface-light': !n.readAt }" @click="go(n.id, n.link)">
+                    <template #prepend>
+                        <v-icon :icon="{ info: 'mdi-information-outline', success: 'mdi-check-circle-outline', warning: 'mdi-alert-outline', error: 'mdi-alert-circle-outline' }[n.kind]" :color="n.kind === 'info' ? undefined : n.kind" />
+                    </template>
+                    <template #append>
+                        <span class="text-caption text-medium-emphasis">{{ formatDateTime(n.createdAt) }}</span>
+                    </template>
+                </v-list-item>
+                <v-list-item v-if="inbox.items.value.length === 0" :title="t('shell.inbox.empty')" disabled />
+            </v-list>
+        </v-card>
+    </v-menu>
+</template>

package/app/components/Vx/Input/Boolean.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import type { VectorField } from '#vector/app/types/vector'
+
+defineProps<{ field: VectorField, rules: ((v: unknown) => true | string)[], errorMessages: string[], record?: Record<string, unknown>, resource?: string }>()
+const model = defineModel<boolean | null>()
+</script>
+
+<template>
+    <v-switch v-model="model" :label="field.label" :error-messages="errorMessages" :hint="field.help ?? undefined" :persistent-hint="!!field.help" color="primary" inset />
+</template>

package/app/components/Vx/Input/Currency.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { VectorField } from '#vector/app/types/vector'
+
+// A currency chosen from the field's codes, each named in the UI's
+// language and searchable by code or name.
+const props = defineProps<{ field: VectorField, rules: ((v: unknown) => true | string)[], errorMessages: string[], record?: Record<string, unknown>, resource?: string }>()
+const model = defineModel<string | null>()
+const { locale } = useVectorT()
+
+const items = computed(() => (props.field.options ?? []).map(o => ({ value: String(o.value), title: currencyLabel(String(o.value), locale.value) })))
+</script>
+
+<template>
+    <v-autocomplete
+        v-model="model"
+        :label="field.label"
+        :items="items"
+        :rules="rules"
+        :error-messages="errorMessages"
+        :clearable="field.nullable === true"
+        :hint="field.help ?? undefined"
+        :persistent-hint="!!field.help"
+        auto-select-first
+    />
+</template>

package/app/components/Vx/Input/DateTime.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { VectorField } from '#vector/app/types/vector'
+
+// A native date/datetime control: the wire value is ISO 8601 in UTC, the
+// control edits local time, and the conversion lives here.
+const props = defineProps<{ field: VectorField, rules: ((v: unknown) => true | string)[], errorMessages: string[], record?: Record<string, unknown>, resource?: string }>()
+const model = defineModel<string | null>()
+const dateOnly = computed(() => props.field.type === 'date')
+
+function pad(n: number) { return String(n).padStart(2, '0') }
+
+const local = computed({
+    get: () => {
+        if (!model.value) return ''
+        if (dateOnly.value) return model.value.slice(0, 10)
+        const d = new Date(model.value)
+        if (Number.isNaN(d.getTime())) return ''
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
+    },
+    set: (value: string) => {
+        if (!value) { model.value = null; return }
+        model.value = dateOnly.value ? value : new Date(value).toISOString()
+    },
+})
+</script>
+
+<template>
+    <v-text-field
+        v-model="local"
+        :label="field.label"
+        :type="dateOnly ? 'date' : 'datetime-local'"
+        :rules="rules"
+        :error-messages="errorMessages"
+        :clearable="field.nullable === true"
+        :hint="field.help ?? undefined"
+        :persistent-hint="!!field.help"
+    />
+</template>

package/app/components/Vx/Input/Enum.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { VectorField } from '#vector/app/types/vector'
+
+defineProps<{ field: VectorField, rules: ((v: unknown) => true | string)[], errorMessages: string[], record?: Record<string, unknown>, resource?: string }>()
+const model = defineModel<string | number | null>()
+</script>
+
+<template>
+    <v-select
+        v-model="model"
+        :label="field.label"
+        :items="field.options ?? []"
+        item-title="label"
+        item-value="value"
+        :rules="rules"
+        :error-messages="errorMessages"
+        :clearable="field.nullable === true"
+        :hint="field.help ?? undefined"
+        :persistent-hint="!!field.help"
+    />
+</template>

package/app/components/Vx/Input/KeyValue.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { fieldProps, type VectorField } from '#vector/app/types/vector'
+
+// A key-value field's entries as rows of two text inputs. The rows are the
+// editing state — a row may be half typed — and the model is the object
+// they make: a row without a key is left out, a repeated key's last row wins.
+const props = defineProps<{ field: VectorField, rules?: unknown[], errorMessages: string[], record?: Record<string, unknown>, resource?: string, disabled?: boolean }>()
+const model = defineModel<Record<string, string> | null>()
+
+const { t } = useVectorT()
+const rows = ref<{ key: string, value: string }[]>([])
+const max = computed(() => Number(fieldProps(props.field).maxEntries ?? 50))
+const keyLabel = computed(() => String(fieldProps(props.field).keyLabel ?? t('fields.keyValue.key')))
+const valueLabel = computed(() => String(fieldProps(props.field).valueLabel ?? t('fields.keyValue.value')))
+
+// Adopt a value set from outside (a record loaded), not the one these rows
+// just made — which comes back as the form's reactive copy, so by content.
+let emitted = ''
+watch(model, (value) => {
+    if (JSON.stringify(value ?? {}) === emitted) return
+    rows.value = value && typeof value === 'object' ? Object.entries(value).map(([key, v]) => ({ key, value: String(v ?? '') })) : []
+}, { immediate: true })
+
+function sync() {
+    const made = Object.fromEntries(rows.value.filter(r => r.key.trim() !== '').map(r => [r.key.trim(), r.value]))
+    emitted = JSON.stringify(made)
+    model.value = made
+}
+
+function add() {
+    rows.value = [...rows.value, { key: '', value: '' }]
+}
+
+function remove(index: number) {
+    rows.value = rows.value.filter((_, i) => i !== index)
+    sync()
+}
+
+const repeated = computed(() => {
+    const seen = new Set<string>()
+    const twice = new Set<string>()
+    for (const row of rows.value) {
+        const key = row.key.trim()
+        if (key && seen.has(key)) twice.add(key)
+        seen.add(key)
+    }
+    return [...twice]
+})
+const messages = computed(() => [...(repeated.value.length ? [t('fields.keyValue.repeated', { keys: repeated.value.join(', ') })] : []), ...props.errorMessages])
+</script>
+
+<template>
+    <div role="group" :aria-label="field.label">
+        <div class="text-body-2 text-medium-emphasis mb-1">{{ field.label }}</div>
+        <div v-for="(row, index) in rows" :key="index" class="d-flex ga-2 align-start mb-1" role="group" :aria-label="t('fields.keyValue.entry', { n: index + 1 })">
+            <v-text-field
+                v-model="row.key"
+                :label="keyLabel"
+                density="compact"
+                hide-details
+                :disabled="disabled"
+                @update:model-value="sync"
+            />
+            <v-text-field
+                v-model="row.value"
+                :label="valueLabel"
+                density="compact"
+                hide-details
+                :disabled="disabled"
+                @update:model-value="sync"
+            />
+            <v-btn icon="mdi-close" variant="text" size="small" class="mt-1" :disabled="disabled" :aria-label="t('fields.keyValue.remove', { n: index + 1 })" @click="remove(index)" />
+        </div>
+        <v-btn variant="text" size="small" prepend-icon="mdi-plus" :disabled="disabled || rows.length >= max" @click="add">{{ t('fields.keyValue.add') }}</v-btn>
+        <div v-for="message in messages" :key="message" class="text-error text-caption" role="alert">{{ message }}</div>
+        <div v-if="field.help" class="text-caption text-medium-emphasis">{{ field.help }}</div>
+    </div>
+</template>