feat: Section dialogs + drawers example

environments/lab/content/other/field-section-w-dialogs-drawers/field-section-dialogs-drawers.en.txt

@@ -0,0 +1,5 @@
+Title: Field/Section w/ dialogs + drawers
+
+----
+
+Uuid: 8zlvxwedzba0vvma

environments/lab/site/blueprints/pages/field-section-dialogs-drawers.yml

@@ -0,0 +1,9 @@
+sections:
+  fields:
+    type: fields
+    fields:
+      test:
+        label: Field with dialogs and drawers
+        type: field-with-dialogs-drawers
+  section:
+    type: section-with-dialogs-drawers

environments/lab/site/plugins/field-section-dialogs-drawers/index.js

@@ -0,0 +1,49 @@
+panel.plugin("plugins/field-dialogs-drawers", {
+	fields: {
+		"field-with-dialogs-drawers": {
+			props: {
+				endpoints: Object,
+			},
+			template: `
+				<k-field>
+					<k-button-group>
+						<k-button
+							text="Open dialog"
+							variant="filled"
+							@click="$dialog(endpoints.field + '/test')"
+						/>
+						<k-button
+							text="Open drawer"
+							variant="filled"
+							@click="$drawer(endpoints.field + '/test')"
+						/>
+					</k-button-group>
+				</k-field>
+			`,
+		},
+	},
+	sections: {
+		"section-with-dialogs-drawers": {
+			props: {
+				name: String,
+				parent: String,
+			},
+			template: `
+				<k-section label="Section with dialogs and drawers">
+					<k-button-group>
+						<k-button
+							text="Open dialog"
+							variant="filled"
+							@click="$dialog(parent + '/sections/' + name + '/test')"
+						/>
+						<k-button
+							text="Open drawer"
+							variant="filled"
+							@click="$drawer(parent + '/sections/' + name + '/test')"
+						/>
+					</k-button-group>
+				</k-section>
+			`,
+		},
+	},
+});

environments/lab/site/plugins/field-section-dialogs-drawers/index.php

@@ -0,0 +1,55 @@
+<?php
+
+Kirby::plugin(
+	name: 'plugins/field-section-dialogs-drawers',
+	extends: [
+		'fields' => [
+			'field-with-dialogs-drawers' => [
+				'dialogs' => fn () => [
+					'test' => [
+						'load' => fn () => [
+							'component' => 'k-text-dialog',
+							'props' => [
+								'text' => 'This is a test dialog'
+							]
+						]
+					]
+				],
+				'drawers' => fn () => [
+					'test' => [
+						'load' => fn () => [
+							'component' => 'k-text-drawer',
+							'props' => [
+								'text' => 'This is a test drawer'
+							]
+						]
+					]
+				]
+			]
+		],
+		'sections' => [
+			'section-with-dialogs-drawers' => [
+				'dialogs' => fn () => [
+					'test' => [
+						'load' => fn () => [
+							'component' => 'k-text-dialog',
+							'props' => [
+								'text' => 'This is a test dialog'
+							]
+						]
+					]
+				],
+				'drawers' => fn () => [
+					'test' => [
+						'load' => fn () => [
+							'component' => 'k-text-drawer',
+							'props' => [
+								'text' => 'This is a test drawer'
+							]
+						]
+					]
+				]
+			]
+		]
+	]
+);