Lab: Section Field Adapter

panel/src/components/Forms/Field/SectionField.vue

@@ -0,0 +1,23 @@
+<template>
+	<component
+		:is="'k-' + sectionType + '-section'"
+		:content="$panel.view.props.versions.changes"
+		:name="name"
+		:lock="$panel.view.props.lock"
+		:parent="$panel.view.props.api"
+		:timestamp="$panel.view.timestamp"
+		:class="'k-section-name-' + name"
+		@input="$emit('input', $event)"
+		@submit="$emit('submit', $event)"
+	/>
+</template>
+
+<script>
+export default {
+	props: {
+		name: String,
+		sectionType: String
+	},
+	emits: ["input", "submit"]
+};
+</script>

panel/src/components/Forms/Field/index.js

@@ -20,6 +20,7 @@ import PagePickerField from "./PagePickerField.vue";
 import PasswordField from "./PasswordField.vue";
 import RadioField from "./RadioField.vue";
 import RangeField from "./RangeField.vue";
+import SectionField from "./SectionField.vue";
 import SelectField from "./SelectField.vue";
 import SlugField from "./SlugField.vue";
 import StatsField from "./StatsField.vue";
@@ -65,6 +66,7 @@ export default {
 		app.component("k-password-field", PasswordField);
 		app.component("k-radio-field", RadioField);
 		app.component("k-range-field", RangeField);
+		app.component("k-section-field", SectionField);
 		app.component("k-select-field", SelectField);
 		app.component("k-slug-field", SlugField);
 		app.component("k-stats-field", StatsField);

panel/src/components/Forms/ModelForm.vue

@@ -0,0 +1,57 @@
+<template>
+	<form
+		class="k-model-form"
+		method="POST"
+		@submit.prevent="$emit('submit', $event)"
+	>
+		<k-grid variant="columns">
+			<k-column
+				v-for="(column, columnIndex) in columns"
+				:key="api + '-column-' + columnIndex"
+				:width="column.width"
+				:sticky="column.sticky"
+			>
+				<k-fieldset
+					ref="fields"
+					:disabled="lock && lock.state === 'lock'"
+					:fields="fieldsWithAdditionalData(column.fields)"
+					:value="content"
+					:validate="true"
+					@input="$emit('input', $event)"
+					@submit="$emit('submit', $event)"
+				/>
+			</k-column>
+		</k-grid>
+	</form>
+</template>
+
+<script>
+export default {
+	props: {
+		api: String,
+		columns: Object,
+		content: Object,
+		diff: Object,
+		lock: [Boolean, Object]
+	},
+	emits: ["input", "submit"],
+	methods: {
+		fieldsWithAdditionalData(fields) {
+			const result = {};
+
+			for (const name in fields) {
+				result[name] = {
+					...fields[name],
+					endpoints: {
+						field: this.api + "/fields/" + name,
+						model: this.api
+					},
+					hasDiff: Object.hasOwn(this.diff ?? {}, name)
+				};
+			}
+
+			return result;
+		}
+	}
+};
+</script>

panel/src/components/Forms/index.js

@@ -5,6 +5,7 @@ import Fieldset from "./Fieldset.vue";
 import Form from "./Form.vue";
 import FormControls from "./FormControls.vue";
 import Input from "./Input.vue";
+import ModelForm from "./ModelForm.vue";
 
 /* Form parts */
 import Blocks from "./Blocks/index.js";
@@ -22,6 +23,7 @@ export default {
 		app.component("k-form", Form);
 		app.component("k-form-controls", FormControls);
 		app.component("k-input", Input);
+		app.component("k-model-form", ModelForm);
 
 		app.use(Blocks);
 		app.use(Inputs);

panel/src/components/Views/Files/FileView.vue

@@ -43,17 +43,12 @@
 
 		<k-model-tabs :diff="diff" :tab="tab.name" :tabs="tabs" />
 
-		<k-sections
-			:blueprint="blueprint"
+		<k-model-form
+			:api="api"
+			:columns="tab.columns"
 			:content="content"
-			:empty="
-				$panel.config.debug
-					? $t('file.blueprint', { blueprint: $esc(blueprint) })
-					: null
-			"
+			:diff="diff"
 			:lock="lock"
-			:parent="api"
-			:tab="tab"
 			@input="onInput"
 			@submit="onSubmit"
 		/>

panel/src/components/Views/Pages/PageView.vue

@@ -36,17 +36,12 @@
 
 		<k-model-tabs :diff="diff" :tab="tab.name" :tabs="tabs" />
 
-		<k-sections
-			:blueprint="blueprint"
+		<k-model-form
+			:api="api"
+			:columns="tab.columns"
 			:content="content"
-			:empty="
-				$panel.config.debug
-					? $t('page.blueprint', { blueprint: $esc(blueprint) })
-					: null
-			"
+			:diff="diff"
 			:lock="lock"
-			:parent="api"
-			:tab="tab"
 			@input="onInput"
 			@submit="onSubmit"
 		/>

panel/src/components/Views/Pages/SiteView.vue

@@ -40,13 +40,12 @@
 
 		<k-model-tabs :diff="diff" :tab="tab.name" :tabs="tabs" />
 
-		<k-sections
-			:blueprint="blueprint"
+		<k-model-form
+			:api="api"
+			:columns="tab.columns"
 			:content="content"
-			:empty="$panel.config.debug ? $t('site.blueprint') : null"
+			:diff="diff"
 			:lock="lock"
-			:tab="tab"
-			parent="site"
 			@input="onInput"
 			@submit="onSubmit"
 		/>

panel/src/components/Views/Preview/PreviewForm.vue

@@ -21,17 +21,16 @@
 		</header>
 
 		<div class="k-preview-form-body">
-			<k-sections
-				:blueprint="blueprint"
+			<k-model-form
+				:api="api"
+				:columns="tab.columns"
 				:content="content"
 				:empty="
 					$panel.config.debug
 						? $t('page.blueprint', { blueprint: $esc(blueprint) })
 						: null
 				"
 				:lock="lock"
-				:parent="api"
-				:tab="tab"
 				@input="$emit('input', $event)"
 				@submit="$emit('submit', $event)"
 			/>

panel/src/components/Views/Users/UserView.vue

@@ -57,17 +57,12 @@
 
 		<k-model-tabs :diff="diff" :tab="tab.name" :tabs="tabs" />
 
-		<k-sections
-			:blueprint="blueprint"
+		<k-model-form
+			:api="api"
+			:columns="tab.columns"
 			:content="content"
-			:empty="
-				$panel.config.debug
-					? $t('user.blueprint', { blueprint: $esc(blueprint) })
-					: null
-			"
+			:diff="diff"
 			:lock="lock"
-			:parent="api"
-			:tab="tab"
 			@input="onInput"
 			@submit="onSubmit"
 		/>

src/Blueprint/Blueprint.php

@@ -10,6 +10,7 @@
 use Kirby\Exception\NotFoundException;
 use Kirby\Filesystem\F;
 use Kirby\Form\Field;
+use Kirby\Form\Field\SectionField;
 use Kirby\Toolkit\A;
 use Kirby\Toolkit\I18n;
 use Kirby\Toolkit\Str;
@@ -819,7 +820,7 @@ protected function resolveFieldReferences(array $fields): array
 	public function section(string $name): Section|null
 	{
 		if (empty($this->sections[$name]) === true) {
-			return null;
+			return $this->sectionFromField($name);
 		}
 
 		if ($this->sections[$name] instanceof Section) {
@@ -836,6 +837,24 @@ public function section(string $name): Section|null
 		return $this->sections[$name] = new Section($props['type'], $props);
 	}
 
+	protected function sectionFromField(string $name): Section|null
+	{
+		if ($fieldProps = $this->field($name)) {
+			if ($fieldProps['type'] !== 'section') {
+				return null;
+			}
+
+			unset($fieldProps['type']);
+
+			$field = new SectionField(...$fieldProps);
+			$field->setModel($this->model());
+
+			return $field->section();
+		}
+
+		return null;
+	}
+
 	/**
 	 * Returns all sections
 	 */

src/Cms/Core.php

@@ -32,6 +32,7 @@
 use Kirby\Form\Field\PasswordField;
 use Kirby\Form\Field\RadioField;
 use Kirby\Form\Field\RangeField;
+use Kirby\Form\Field\SectionField;
 use Kirby\Form\Field\SelectField;
 use Kirby\Form\Field\SlugField;
 use Kirby\Form\Field\StatsField;
@@ -272,6 +273,7 @@ public function fields(): array
 			'password'    => PasswordField::class,
 			'radio'       => RadioField::class,
 			'range'       => RangeField::class,
+			'section'     => SectionField::class,
 			'select'      => SelectField::class,
 			'slug'        => SlugField::class,
 			'stats'       => StatsField::class,

src/Form/Field/SectionField.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace Kirby\Form\Field;
+
+use Kirby\Blueprint\Section;
+
+class SectionField extends BaseField
+{
+	protected string $section;
+	protected array $props;
+
+	public function __construct(
+		string $section,
+		string|null $name = null,
+		array|null $when = null,
+		string|null $width = null,
+		...$props
+	) {
+		parent::__construct(
+			name: $name,
+			when: $when,
+			width: $width
+		);
+
+		$this->props   = $props;
+		$this->section = $section;
+	}
+
+	public function props(): array
+	{
+		return [
+			...parent::props(),
+			'sectionType' => $this->section,
+		];
+	}
+
+	public function section(): Section
+	{
+		return new Section($this->section, [
+			'model' => $this->model(),
+			...$this->props
+		]);
+	}
+}