feat: relation field and picker

web/src/components/FieldInspector.vue

@@ -6,6 +6,7 @@ import AppSwitch from '@/components/AppSwitch.vue'
 import ChoiceList from '@/components/ChoiceList.vue'
 import DirectoryField from '@/components/DirectoryField.vue'
 import FieldTypePicker from '@/components/FieldTypePicker.vue'
+import RelationPicker from '@/components/RelationPicker.vue'
 import SlugField from '@/components/SlugField.vue'
 import { fieldTypeSpec } from '@/lib/fieldTypes'
 import {
@@ -18,6 +19,7 @@ import {
 	type BuilderField,
 	type FieldType,
 } from '@/lib/schemaBuilderModel'
+import type { RelationKind } from '@/lib/relationField'
 import type { FieldErrors } from '@/lib/schemaBuilderValidation'
 
 const NO_DEFAULT = 'none'
@@ -29,6 +31,7 @@ const props = defineProps<{
 	disabled: boolean
 	compact: boolean
 	focusToken: number
+	ownerName?: string
 }>()
 
 const emit = defineEmits<{
@@ -37,6 +40,8 @@ const emit = defineEmits<{
 	unlock: []
 	reset: []
 	type: [type: FieldType]
+	relationType: [key: string]
+	relationKind: [kind: RelationKind]
 	required: [value: boolean]
 	unique: [value: boolean]
 	limit: [which: 'min' | 'max', value: string]
@@ -58,6 +63,7 @@ const showUnique = computed(() => canUnique.value || spec.value.showsUnsupported
 const showRuleGrid = computed(
 	() => hasLimits.value || spec.value.supportsDefault || spec.value.showsUnsupportedOptions,
 )
+const holdsRelation = computed(() => spec.value.holdsRelation)
 const hint = computed(() => spec.value.builderHint?.() ?? '')
 const keyMode = computed(() => keyDisplayMode(props.field.keyMode, props.field.key))
 const gridClass = computed(() => (props.compact ? 'grid-cols-1' : 'md:grid-cols-2'))
@@ -193,6 +199,20 @@ watch(
 			@update:model-value="emit('type', $event)"
 		/>
 
+		<RelationPicker
+			v-if="holdsRelation"
+			:label="field.label"
+			:owner-name="ownerName ?? ''"
+			:type-key="field.relationType"
+			:kind="field.relationKind"
+			:locked="field.saved"
+			:disabled="disabled"
+			:compact="compact"
+			:error="errors.relation"
+			@type="emit('relationType', $event)"
+			@kind="emit('relationKind', $event)"
+		/>
+
 		<div class="flex min-w-0 flex-col border-t border-default">
 			<AppSwitch
 				:model-value="field.required"