feat: Preview view live editing mode

Author: distantnative

config/areas/site/buttons.php

@@ -18,11 +18,11 @@
 	'site.preview' => function (Site $site) {
 		if ($site->previewUrl() !== null) {
 			return new PreviewButton(
-				link: $site->panel()->url(true) . '/preview/changes',
+				link: $site->panel()->url(true) . '/preview/form',
 			);
 		}
 	},
-	'site.versions' => fn (Site $site, string $mode = 'latest') => new VersionsButton(
+	'site.versions' => fn (Site $site, string $mode = 'form') => new VersionsButton(
 		model: $site,
 		mode:  $mode
 	),
@@ -33,11 +33,11 @@
 	'page.preview' => function (Page $page) {
 		if ($page->previewUrl() !== null) {
 			return new PreviewButton(
-				link: $page->panel()->url(true) . '/preview/changes',
+				link: $page->panel()->url(true) . '/preview/form',
 			);
 		}
 	},
-	'page.versions' => fn (Page $page, string $mode = 'latest') => new VersionsButton(
+	'page.versions' => fn (Page $page, string $mode = 'form') => new VersionsButton(
 		model: $page,
 		mode:  $mode
 	),

config/areas/site/views.php

@@ -17,7 +17,7 @@
 		'action'  => PageFileViewController::class
 	],
 	'page.preview' => [
-		'pattern' => '(pages/.*?)/preview/(changes|latest|compare)',
+		'pattern' => '(pages/.*?)/preview/(changes|latest|compare|form)',
 		'action'  => PagePreviewViewController::class
 	],
 	'site' => [
@@ -29,7 +29,7 @@
 		'action'  => SiteFileViewController::class
 	],
 	'site.preview' => [
-		'pattern' => '(site)/preview/(changes|latest|compare)',
+		'pattern' => '(site)/preview/(changes|latest|compare|form)',
 		'action'  => SitePreviewViewController::class
 	],
 ];

i18n/translations/en.json

@@ -632,7 +632,9 @@
 	"plugin": "Plugin",
 	"plugins": "Plugins",
 	"prev": "Previous",
+
 	"preview": "Preview",
+	"preview.browser.pin": "Toggle whether preview navigation should be in sync or independent",
 
 	"publish": "Publish",
 	"published": "Published",
@@ -789,6 +791,7 @@
 	"version.changes": "Changed version",
 	"version.compare": "Compare versions",
 	"version.current": "Current version",
+	"version.form": "Edit content",
 	"version.latest": "Latest version",
 	"versionInformation": "Version information",
 

panel/public/img/icons.svg

@@ -63,6 +63,6 @@ export default {
 	margin-block: 0;
 }
 .k-drawer-tabs .k-tabs-button[aria-current="true"]::after {
-	z-index: 1;
+	z-index: var(--z-toolbar);
 }
 </style>

panel/src/components/Drawers/Elements/Tabs.vue

@@ -111,7 +111,6 @@ export default {
 				text: tab.label ?? tab.text ?? tab.name
 			};
 
-
 			if (typeof tab.badge === "string") {
 				button.badge = {
 					text: tab.badge

panel/src/components/Layout/Tabs.vue

@@ -160,6 +160,13 @@ export default {
 				title: this.title
 			};
 
+			// support all aria- attributes
+			for (const attr of Object.keys(this.$attrs).filter((key) =>
+				key.startsWith("aria-")
+			)) {
+				attrs[attr] = this.$attrs[attr];
+			}
+
 			if (this.component === "k-link") {
 				// For `<a>`/`<k-link>` element:
 				attrs["disabled"] = this.disabled;

panel/src/components/Navigation/Button.vue

@@ -68,6 +68,8 @@ export default {
 				this.issue = error;
 			} finally {
 				this.isLoading = false;
+				await this.$nextTick();
+				this.$events.emit("section.loaded", this);
 			}
 		}
 	}

panel/src/components/Sections/FieldsSection.vue

@@ -278,6 +278,9 @@ export default {
 			} finally {
 				this.isProcessing = false;
 				this.isLoading = false;
+
+				await this.$nextTick();
+				this.$events.emit("section.loaded", this);
 			}
 		},
 		onAction() {},

panel/src/components/Sections/ModelsSection.vue

@@ -5,6 +5,7 @@
 		:text="empty"
 		theme="info"
 	/>
+
 	<k-grid v-else class="k-sections" variant="columns">
 		<k-column
 			v-for="(column, columnIndex) in tab.columns"