From 299e42906771bab978a6f0a8220b794eb13bd81e Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sat, 20 Jul 2024 20:38:52 +0200
Subject: [PATCH 1/3] Remove outdated Vue view button components

---
 .../src/components/View/Buttons/AddButton.vue | 26 -----------
 .../View/Buttons/AddLanguagesButton.vue       |  7 ---
 .../View/Buttons/AddUsersButton.vue           | 15 -------
 .../components/View/Buttons/PreviewButton.vue | 44 -------------------
 .../components/View/Buttons/RemoveButton.vue  | 26 -----------
 .../View/Buttons/RemoveLanguageButton.vue     | 10 -----
 panel/src/components/View/Buttons/index.js    | 12 -----
 7 files changed, 140 deletions(-)
 delete mode 100644 panel/src/components/View/Buttons/AddButton.vue
 delete mode 100644 panel/src/components/View/Buttons/AddLanguagesButton.vue
 delete mode 100644 panel/src/components/View/Buttons/AddUsersButton.vue
 delete mode 100644 panel/src/components/View/Buttons/PreviewButton.vue
 delete mode 100644 panel/src/components/View/Buttons/RemoveButton.vue
 delete mode 100644 panel/src/components/View/Buttons/RemoveLanguageButton.vue

diff --git a/panel/src/components/View/Buttons/AddButton.vue b/panel/src/components/View/Buttons/AddButton.vue
deleted file mode 100644
index 6a7b86351d..0000000000
--- a/panel/src/components/View/Buttons/AddButton.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-	<component :is="component" v-if="component" />
-	<k-view-button
-		v-else
-		:text="$t('add')"
-		icon="add"
-		@click="$emit('action', 'add')"
-	/>
-</template>
-
-<script>
-export default {
-	computed: {
-		component() {
-			const view = this.$panel.view.component.match(/^^k-(.*)-view$/)[1];
-			const component = `k-view-add-${view}-button`;
-
-			if (this.$helper.isComponent(component)) {
-				return component;
-			}
-
-			return null;
-		}
-	}
-};
-</script>
diff --git a/panel/src/components/View/Buttons/AddLanguagesButton.vue b/panel/src/components/View/Buttons/AddLanguagesButton.vue
deleted file mode 100644
index b9ea9eebbb..0000000000
--- a/panel/src/components/View/Buttons/AddLanguagesButton.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-	<k-view-button
-		:text="$t('language.create')"
-		icon="add"
-		@click="$dialog('languages/create')"
-	/>
-</template>
diff --git a/panel/src/components/View/Buttons/AddUsersButton.vue b/panel/src/components/View/Buttons/AddUsersButton.vue
deleted file mode 100644
index 056f0abf61..0000000000
--- a/panel/src/components/View/Buttons/AddUsersButton.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-	<k-view-button
-		v-if="$panel.view.component === 'k-users-view'"
-		:disabled="!$panel.permissions.users.create"
-		:text="$t('user.create')"
-		icon="add"
-		@click="
-			$dialog('users/create', {
-				query: {
-					role: $panel.view.props.role?.id
-				}
-			})
-		"
-	/>
-</template>
diff --git a/panel/src/components/View/Buttons/PreviewButton.vue b/panel/src/components/View/Buttons/PreviewButton.vue
deleted file mode 100644
index 909b6ab5d3..0000000000
--- a/panel/src/components/View/Buttons/PreviewButton.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-	<k-view-button
-		v-if="isAvailable"
-		:link="link"
-		:title="$t('open')"
-		icon="open"
-		target="_blank"
-		class="k-view-preview-button"
-	/>
-</template>
-
-<script>
-/**
- * View header button to open the model's preview in a new tab
- * @displayName ViewPreviewButton
- * @since 5.0.0
- * @internal
- */
-export default {
-	computed: {
-		isAvailable() {
-			if (!this.link) {
-				return false;
-			}
-
-			if (Object.hasOwn(this.permissions, "preview") === false) {
-				return true;
-			}
-
-			return this.permissions.preview;
-		},
-		link() {
-			return (
-				this.$panel.view.props.model?.previewUrl ??
-				this.$panel.view.props.preview?.url ??
-				this.$panel.view.props.url
-			);
-		},
-		permissions() {
-			return this.$panel.view.props.permissions ?? {};
-		}
-	}
-};
-</script>
diff --git a/panel/src/components/View/Buttons/RemoveButton.vue b/panel/src/components/View/Buttons/RemoveButton.vue
deleted file mode 100644
index 1fc7ebf7a0..0000000000
--- a/panel/src/components/View/Buttons/RemoveButton.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-	<component :is="component" v-if="component" />
-	<k-view-button
-		v-else
-		:text="$t('delete')"
-		icon="trash"
-		@click="$emit('action', 'remove')"
-	/>
-</template>
-
-<script>
-export default {
-	computed: {
-		component() {
-			const view = this.$panel.view.component.match(/^^k-(.*)-view$/)[1];
-			const component = `k-view-remove-${view}-button`;
-
-			if (this.$helper.isComponent(component)) {
-				return component;
-			}
-
-			return null;
-		}
-	}
-};
-</script>
diff --git a/panel/src/components/View/Buttons/RemoveLanguageButton.vue b/panel/src/components/View/Buttons/RemoveLanguageButton.vue
deleted file mode 100644
index 4b7ddaf82f..0000000000
--- a/panel/src/components/View/Buttons/RemoveLanguageButton.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-	<k-view-button
-		v-if="
-			$panel.view.component === 'k-language-view' && $panel.view.props.deletable
-		"
-		:title="$t('delete')"
-		icon="trash"
-		@click="$dialog(`languages/${$panel.view.props.id}/delete`)"
-	/>
-</template>
diff --git a/panel/src/components/View/Buttons/index.js b/panel/src/components/View/Buttons/index.js
index b9e1f9681a..2821051faa 100644
--- a/panel/src/components/View/Buttons/index.js
+++ b/panel/src/components/View/Buttons/index.js
@@ -1,10 +1,4 @@
-import Add from "./AddButton.vue";
-import AddLanguages from "./AddLanguagesButton.vue";
-import AddUsers from "./AddUsersButton.vue";
 import Languages from "./LanguagesButton.vue";
-import Preview from "./PreviewButton.vue";
-import Remove from "./RemoveButton.vue";
-import RemoveLanguage from "./RemoveLanguageButton.vue";
 import Settings from "./SettingsButton.vue";
 import Status from "./StatusButton.vue";
 import Theme from "./ThemeButton.vue";
@@ -14,13 +8,7 @@ import Buttons from "./Buttons.vue";
 
 export default {
 	install(app) {
-		app.component("k-view-add-button", Add);
-		app.component("k-view-add-languages-button", AddLanguages);
-		app.component("k-view-add-users-button", AddUsers);
 		app.component("k-view-languages-button", Languages);
-		app.component("k-view-preview-button", Preview);
-		app.component("k-view-remove-button", Remove);
-		app.component("k-view-remove-language-button", RemoveLanguage);
 		app.component("k-view-settings-button", Settings);
 		app.component("k-view-status-button", Status);
 		app.component("k-view-theme-button", Theme);

From 995e5f154af787f635ea3513f79882231d255825 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sat, 20 Jul 2024 20:39:11 +0200
Subject: [PATCH 2/3] Use view button from backend for Lab

---
 config/areas/lab/views.php                  | 48 ++++++++++++++++++++-
 panel/src/components/Lab/DocsView.vue       | 22 ++--------
 panel/src/components/Lab/PlaygroundView.vue | 23 +---------
 phpunit.xml.dist                            |  1 +
 4 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/config/areas/lab/views.php b/config/areas/lab/views.php
index edac094b26..ae55b0da05 100644
--- a/config/areas/lab/views.php
+++ b/config/areas/lab/views.php
@@ -72,14 +72,36 @@
 
 			$docs = new Docs($component);
 
+			// header buttons
+			$buttons = [];
+
+			if ($lab = $docs->lab()) {
+				$buttons[] = [
+					'props' => [
+						'text' => 'Lab examples',
+						'icon' => 'lab',
+						'link' => '/lab/' . $lab
+					]
+				];
+			}
+
+			$buttons[] = [
+				'props' => [
+					'icon'   => 'github',
+					'link'   => $docs->github(),
+					'target' => '_blank'
+				]
+			];
+
 			return [
 				'component'  => 'k-lab-docs-view',
 				'title'      => $component,
 				'breadcrumb' => $crumbs,
 				'props'      => [
+					'buttons'   => $buttons,
 					'component' => $component,
 					'docs'      => $docs->toArray(),
-					'lab'       => $docs->lab()
+					'lab'       => $lab
 				]
 			];
 		}
@@ -126,6 +148,29 @@
 				$github ??= 'https://github.com/getkirby/kirby/tree/main/' . $source;
 			}
 
+			// header buttons
+			$buttons = [];
+
+			if ($docs) {
+				$buttons[] = [
+					'props' => [
+						'text'   => $docs->name(),
+						'icon'   => 'book',
+						'drawer' => 'lab/docs/' . $docs->name()
+					]
+				];
+			}
+
+			if ($github) {
+				$buttons[] = [
+					'props' => [
+						'icon'   => 'github',
+						'link'   => $github,
+						'target' => '_blank'
+					]
+				];
+			}
+
 			return [
 				'component' => 'k-lab-playground-view',
 				'breadcrumb' => [
@@ -138,6 +183,7 @@
 					]
 				],
 				'props' => [
+					'buttons'  => $buttons,
 					'docs'     => $docs?->name(),
 					'examples' => $vue['examples'],
 					'file'     => $example->module(),
diff --git a/panel/src/components/Lab/DocsView.vue b/panel/src/components/Lab/DocsView.vue
index 83111419a3..0658199aa2 100644
--- a/panel/src/components/Lab/DocsView.vue
+++ b/panel/src/components/Lab/DocsView.vue
@@ -3,24 +3,9 @@
 		<k-header>
 			{{ component }}
 
-			<k-button-group v-if="docs.github || lab" slot="buttons">
-				<k-button
-					v-if="lab"
-					icon="lab"
-					text="Lab examples"
-					size="sm"
-					variant="filled"
-					:link="'/lab/' + lab"
-				/>
-				<k-button
-					v-if="docs.github"
-					icon="github"
-					size="sm"
-					variant="filled"
-					:link="docs.github"
-					target="_blank"
-				/>
-			</k-button-group>
+			<template #buttons>
+				<k-view-buttons :buttons="buttons" />
+			</template>
 		</k-header>
 
 		<k-lab-docs v-bind="docs" />
@@ -35,6 +20,7 @@ export default {
 		"k-lab-docs": Docs
 	},
 	props: {
+		buttons: Array,
 		component: String,
 		docs: Object,
 		lab: String
diff --git a/panel/src/components/Lab/PlaygroundView.vue b/panel/src/components/Lab/PlaygroundView.vue
index 8d4448b975..37ffce9190 100644
--- a/panel/src/components/Lab/PlaygroundView.vue
+++ b/panel/src/components/Lab/PlaygroundView.vue
@@ -7,24 +7,7 @@
 			{{ title }}
 
 			<template #buttons>
-				<k-button-group v-if="docs || github">
-					<k-button
-						v-if="docs"
-						:text="docs"
-						icon="book"
-						size="sm"
-						variant="filled"
-						@click="openDocs"
-					/>
-					<k-button
-						v-if="github"
-						:link="github"
-						icon="github"
-						size="sm"
-						target="_blank"
-						variant="filled"
-					/>
-				</k-button-group>
+				<k-view-buttons :buttons="buttons" />
 			</template>
 		</k-header>
 		<k-tabs :tab="tab" :tabs="tabs" />
@@ -56,6 +39,7 @@ Vue.component("k-lab-table-cell", TableCell);
 
 export default {
 	props: {
+		buttons: Array,
 		docs: String,
 		examples: [Object, Array],
 		file: String,
@@ -108,9 +92,6 @@ export default {
 			// update the code strings for each example
 			window.UiExamples = this.examples;
 		},
-		openDocs() {
-			this.$panel.drawer.open(`lab/docs/${this.docs}`);
-		},
 		async reloadComponent() {
 			await this.$panel.view.refresh();
 			this.createComponent();
diff --git a/phpunit.xml.dist b/phpunit.xml.dist
index 43a4c9d30e..9d3d8d65bd 100644
--- a/phpunit.xml.dist
+++ b/phpunit.xml.dist
@@ -28,6 +28,7 @@
 		</include>
 
 		<exclude>
+			<directory suffix=".php">./config/areas/lab</directory>
 			<directory suffix=".php">./config/blocks</directory>
 			<directory suffix=".php">./config/templates</directory>
 			<file>./config/areas/account/buttons.php</file>

From d87c48cf7713cb837a48a747450341599d1fe5cc Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Mon, 22 Jul 2024 13:02:22 +0200
Subject: [PATCH 3/3] Lab: add examples for core view buttons

---
 .../buttons/5_view-button/index.vue           | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/panel/lab/components/buttons/5_view-button/index.vue b/panel/lab/components/buttons/5_view-button/index.vue
index fc7316f342..c82bdf6a9a 100644
--- a/panel/lab/components/buttons/5_view-button/index.vue
+++ b/panel/lab/components/buttons/5_view-button/index.vue
@@ -17,5 +17,25 @@
 				:options="[{ text: 'Option A' }, { text: 'Option B' }]"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Languages button">
+			<k-view-languages-button
+				:options="[{ text: 'English' }, '-', { text: 'Deutsch' }]"
+				text="EN"
+				icon="translate"
+			/>
+		</k-lab-example>
+		<k-lab-example label="Settings button">
+			<k-view-settings-button icon="cog" options="pages/sections+info" />
+		</k-lab-example>
+		<k-lab-example label="Status button">
+			<k-view-status-button
+				text="Draft"
+				icon="status-draft"
+				theme="negative-icon"
+			/>
+		</k-lab-example>
+		<k-lab-example label="Theme button">
+			<k-view-theme-button />
+		</k-lab-example>
 	</k-lab-examples>
 </template>