feat(SPA): media field type

web/src/components/FieldInspector.vue

@@ -7,6 +7,7 @@ import ChoiceList from '@/components/ChoiceList.vue'
 import DirectoryField from '@/components/DirectoryField.vue'
 import FieldTypePicker from '@/components/FieldTypePicker.vue'
 import SlugField from '@/components/SlugField.vue'
+import { fieldTypeSpec } from '@/lib/fieldTypes'
 import {
 	BUILDER_LIMITS,
 	STARTER_KEY,
@@ -50,8 +51,14 @@ const emit = defineEmits<{
 const root = ref<HTMLElement | null>(null)
 
 const type = computed(() => props.field.type)
+const spec = computed(() => fieldTypeSpec(type.value))
 const hasLimits = computed(() => supportsLimits(type.value))
 const canUnique = computed(() => supportsUnique(type.value))
+const showUnique = computed(() => canUnique.value || spec.value.showsUnsupportedOptions)
+const showRuleGrid = computed(
+	() => hasLimits.value || spec.value.supportsDefault || spec.value.showsUnsupportedOptions,
+)
+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'))
 
@@ -196,6 +203,7 @@ watch(
 				@update:model-value="emit('required', Boolean($event))"
 			/>
 			<AppSwitch
+				v-if="showUnique"
 				:model-value="canUnique && field.unique"
 				:label="t('Unique values')"
 				:description="uniqueHelp"
@@ -214,7 +222,7 @@ watch(
 			/>
 		</div>
 
-		<div class="grid items-start gap-3.5" :class="gridClass">
+		<div v-if="showRuleGrid" class="grid items-start gap-3.5" :class="gridClass">
 			<template v-if="hasLimits">
 				<DirectoryField :label="limitLabels[0]" name="min" :error="errors.min">
 					<UInput
@@ -255,7 +263,7 @@ watch(
 				</DirectoryField>
 			</template>
 			<DirectoryField
-				v-if="type !== 'boolean'"
+				v-if="type !== 'boolean' && spec.supportsDefault"
 				:label="t('Default value')"
 				name="default"
 				:error="errors.default"
@@ -292,14 +300,26 @@ watch(
 					@update:model-value="emit('default', String($event))"
 				/>
 			</DirectoryField>
-			<div v-if="!hasLimits" class="flex min-w-0 flex-col gap-1.5">
+			<div
+				v-if="!hasLimits && spec.showsUnsupportedOptions"
+				class="flex min-w-0 flex-col gap-1.5"
+			>
 				<span class="font-medium text-highlighted">{{ t('Limits') }}</span>
 				<span class="text-xs/4.5 text-muted">{{ noLimitsText }}</span>
 			</div>
 		</div>
 
+		<div
+			v-if="hint"
+			data-testid="builder-hint"
+			class="flex gap-2 bg-(--rc-info-soft) px-3 py-2.5 text-info"
+		>
+			<span class="flex pt-0.5"><UIcon name="i-lucide-info" class="size-4" /></span>
+			<span class="text-pretty text-toned">{{ hint }}</span>
+		</div>
+
 		<ChoiceList
-			v-if="type === 'select'"
+			v-if="spec.supportsChoices"
 			:options="field.options"
 			:row-errors="errors.choices"
 			:list-error="errors.options"