Buttons 9: Use view button from backend for Lab

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(),

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>

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

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();

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);

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>