Buttons 8: Connect frontend with view button classes

config/areas/account.php

@@ -7,6 +7,7 @@
 		'icon'      => 'account',
 		'label'     => I18n::translate('view.account'),
 		'search'    => 'users',
+		'buttons'   => require __DIR__ . '/account/buttons.php',
 		'dialogs'   => require __DIR__ . '/account/dialogs.php',
 		'drawers'   => require __DIR__ . '/account/drawers.php',
 		'dropdowns' => require __DIR__ . '/account/dropdowns.php',

config/areas/account/buttons.php

@@ -0,0 +1,13 @@
+<?php
+
+use Kirby\Cms\App;
+use Kirby\Cms\User;
+use Kirby\Panel\Ui\Buttons\ViewButton;
+
+return [
+	'user.theme' => function (App $kirby, User $user) {
+		if ($kirby->user()->is($user) === true) {
+			return new ViewButton(component: 'k-view-theme-button');
+		}
+	}
+];

config/areas/files/buttons.php

@@ -0,0 +1,14 @@
+<?php
+
+use Kirby\Cms\File;
+use Kirby\Panel\Ui\Buttons\PreviewButton;
+use Kirby\Panel\Ui\Buttons\SettingsButton;
+
+return [
+	'file.preview' => function (File $file) {
+		return new PreviewButton(link: $file->previewUrl());
+	},
+	'file.settings' => function (File $file) {
+		return new SettingsButton(model: $file);
+	}
+];

config/areas/languages.php

@@ -7,6 +7,7 @@
 		'icon'    => 'translate',
 		'label'   => I18n::translate('view.languages'),
 		'menu'    => true,
+		'buttons' => require __DIR__ . '/languages/buttons.php',
 		'dialogs' => require __DIR__ . '/languages/dialogs.php',
 		'views'   => require __DIR__ . '/languages/views.php'
 	];

config/areas/languages/buttons.php

@@ -0,0 +1,35 @@
+<?php
+
+use Kirby\Cms\Language;
+use Kirby\Panel\Ui\Buttons\PreviewButton;
+use Kirby\Panel\Ui\Buttons\ViewButton;
+use Kirby\Toolkit\I18n;
+
+return [
+	'languages.add' => function () {
+		return new ViewButton(
+			dialog: 'languages/create',
+			icon: 'add',
+			text: I18n::translate('language.create'),
+		);
+	},
+	'language.preview' => function (Language $language) {
+		return new PreviewButton(link: $language->url());
+	},
+	'language.settings' => function (Language $language) {
+		return new ViewButton(
+			dialog: 'languages/' . $language->id() . '/update',
+			icon: 'cog',
+			title: I18n::translate('settings'),
+		);
+	},
+	'language.remove' => function (Language $language) {
+		if ($language->isDeletable() === true) {
+			return new ViewButton(
+				dialog: 'languages/' . $language->id() . '/delete',
+				icon: 'trash',
+				title: I18n::translate('delete'),
+			);
+		}
+	}
+];

config/areas/languages/views.php

@@ -2,6 +2,7 @@
 
 use Kirby\Cms\App;
 use Kirby\Cms\Find;
+use Kirby\Panel\Ui\Buttons\ViewButtons;
 use Kirby\Toolkit\Escape;
 use Kirby\Toolkit\I18n;
 
@@ -68,11 +69,10 @@
 					]
 				],
 				'props'      => [
-					'buttons' => $kirby->option('panel.viewButtons.language', [
-						'preview',
-						'settings',
-						'remove'
-					]),
+					'buttons' => fn () =>
+						ViewButtons::view('language')
+							->defaults('preview', 'settings', 'remove')
+							->render(['language' => $language]),
 					'deletable'    => $language->isDeletable(),
 					'code'         => Escape::html($language->code()),
 					'default'      => $language->isDefault(),
@@ -113,9 +113,10 @@
 			return [
 				'component' => 'k-languages-view',
 				'props'     => [
-					'buttons' => $kirby->option('panel.viewButtons.languages', [
-						'add'
-					]),
+					'buttons' => fn () =>
+						ViewButtons::view('languages')
+							->defaults('add')
+							->render(),
 					'languages' => $kirby->languages()->values(fn ($language) => [
 						'deletable' => $language->isDeletable(),
 						'default'   => $language->isDefault(),

config/areas/site.php

@@ -12,6 +12,7 @@
 		'icon'      => $blueprint->icon() ?? 'home',
 		'label'     => $blueprint->title() ?? I18n::translate('view.site'),
 		'menu'      => true,
+		'buttons'   => require __DIR__ . '/site/buttons.php',
 		'dialogs'   => require __DIR__ . '/site/dialogs.php',
 		'drawers'   => require __DIR__ . '/site/drawers.php',
 		'dropdowns' => require __DIR__ . '/site/dropdowns.php',

config/areas/site/buttons.php

@@ -0,0 +1,33 @@
+<?php
+
+use Kirby\Cms\Page;
+use Kirby\Cms\Site;
+use Kirby\Panel\Ui\Buttons\LanguagesButton;
+use Kirby\Panel\Ui\Buttons\PageStatusButton;
+use Kirby\Panel\Ui\Buttons\PreviewButton;
+use Kirby\Panel\Ui\Buttons\SettingsButton;
+
+return [
+	'site.preview' => function (Site $site) {
+		return new PreviewButton(link: $site->url());
+	},
+	'page.preview' => function (Page $page) {
+		if ($page->permissions()->can('preview') === true) {
+			return new PreviewButton(link: $page->previewUrl());
+		}
+	},
+	'page.settings' => function (Page $page) {
+		return new SettingsButton(model: $page);
+	},
+	'page.status' => function (Page $page) {
+		return new PageStatusButton($page);
+	},
+	// `languages` button needs to be in site area, as languages area itself
+	// is only loaded when in multilang setup
+	'languages' => function () {
+		return new LanguagesButton();
+	},
+
+	// file buttons
+	...require __DIR__ . '/../files/buttons.php'
+];

config/areas/system/views.php

@@ -1,6 +1,7 @@
 <?php
 
 use Kirby\Cms\App;
+use Kirby\Panel\Ui\Buttons\ViewButtons;
 use Kirby\Toolkit\I18n;
 
 return [
@@ -87,7 +88,8 @@
 			return [
 				'component' => 'k-system-view',
 				'props'     => [
-					'buttons'     => $kirby->option('panel.viewButtons.system', []),
+					'buttons'     => fn () =>
+						ViewButtons::view('system')->render(),
 					'environment' => $environment,
 					'exceptions'  => $kirby->option('debug') === true ? $exceptions : [],
 					'info'        => $system->info(),

config/areas/users.php

@@ -8,6 +8,7 @@
 		'label'     => I18n::translate('view.users'),
 		'search'    => 'users',
 		'menu'      => true,
+		'buttons'   => require __DIR__ . '/users/buttons.php',
 		'dialogs'   => require __DIR__ . '/users/dialogs.php',
 		'drawers'   => require __DIR__ . '/users/drawers.php',
 		'dropdowns' => require __DIR__ . '/users/dropdowns.php',

config/areas/users/buttons.php

@@ -0,0 +1,20 @@
+<?php
+
+use Kirby\Cms\User;
+use Kirby\Panel\Ui\Buttons\SettingsButton;
+use Kirby\Panel\Ui\Buttons\ViewButton;
+use Kirby\Toolkit\I18n;
+
+return [
+	'users.add' => function (User $user, string|null $role = null) {
+		return new ViewButton(
+			dialog: 'users/create?role=' . $role,
+			disabled: $user->role()->permissions()->for('users', 'create') !== true,
+			icon: 'add',
+			text: I18n::translate('user.create'),
+		);
+	},
+	'user.settings' => function (User $user) {
+		return new SettingsButton(model: $user);
+	}
+];

config/areas/users/views.php

@@ -2,6 +2,7 @@
 
 use Kirby\Cms\App;
 use Kirby\Cms\Find;
+use Kirby\Panel\Ui\Buttons\ViewButtons;
 use Kirby\Toolkit\Escape;
 
 return [
@@ -18,9 +19,10 @@
 			return [
 				'component' => 'k-users-view',
 				'props'     => [
-					'buttons' => $kirby->option('panel.viewButtons.users', [
-						'add'
-					]),
+					'buttons' => fn () =>
+						ViewButtons::view('users')
+							->defaults('add')
+							->render(['role' => $role]),
 					'role' => function () use ($roles, $role) {
 						if ($role) {
 							return $roles[$role] ?? null;

panel/src/components/View/Buttons/Buttons.vue

@@ -1,9 +1,10 @@
 <template>
-	<k-button-group class="k-view-buttons">
+	<k-button-group v-if="buttons.length" class="k-view-buttons">
 		<component
-			:is="`k-view-${button}-button`"
+			:is="component(button)"
 			v-for="button in buttons"
-			:key="button"
+			:key="button.key"
+			v-bind="button.props"
 			@action="$emit('action', $event)"
 		/>
 	</k-button-group>
@@ -13,12 +14,27 @@
 /**
  * Wrapper button group that dynamically renders the
  * respective view button components passed as `buttons` prop.
+ *
+ * @displayName ViewButtons
+ * @since 5.0.0
  * @internal
  */
 export default {
 	props: {
-		buttons: Array
+		buttons: {
+			type: Array,
+			default: () => []
+		}
 	},
-	emits: ["action"]
+	emits: ["action"],
+	methods: {
+		component(button) {
+			if (this.$helper.isComponent(button.component)) {
+				return button.component;
+			}
+
+			return "k-view-button";
+		}
+	}
 };
 </script>

panel/src/components/View/Buttons/LanguagesButton.vue

@@ -1,52 +1,36 @@
 <template>
-	<k-view-button
-		:options="options"
-		:text="code"
-		icon="translate"
-		responsive="text"
-		class="k-view-languages-button k-languages-dropdown"
-	/>
+	<k-view-button v-bind="$props" :options="languages" />
 </template>
 
 <script>
+import { props as ButtonProps } from "@/components/Navigation/Button.vue";
+
 /**
  * View header button to switch between content languages
  * @displayName ViewLanguagesButton
  * @since 4.0.0
  * @internal
  */
 export default {
+	mixins: [ButtonProps],
+	props: {
+		options: {
+			type: Array,
+			default: () => []
+		}
+	},
 	computed: {
-		code() {
-			return this.language.code.toUpperCase();
-		},
-		language() {
-			return this.$panel.language;
-		},
 		languages() {
-			return this.$panel.languages;
-		},
-		options() {
-			const options = [];
-
-			// add the primary/default language first
-			const primaryLanguage = this.languages.find(
-				(language) => language.default === true
-			);
-
-			options.push(this.item(primaryLanguage));
-			options.push("-");
-
-			// add all secondary languages after the separator
-			const secondaryLanguages = this.languages.filter(
-				(language) => language.default === false
-			);
-
-			for (const language of secondaryLanguages) {
-				options.push(this.item(language));
-			}
+			return this.options.map((option) => {
+				if (option === "-") {
+					return option;
+				}
 
-			return options;
+				return {
+					...option,
+					click: () => this.change(option)
+				};
+			});
 		}
 	},
 	methods: {
@@ -56,13 +40,6 @@ export default {
 					language: language.code
 				}
 			});
-		},
-		item(language) {
-			return {
-				click: () => this.change(language),
-				current: language.code === this.language.code,
-				text: language.name
-			};
 		}
 	}
 };