From 618af5bfa87adac1cf62e0613832c43e348437e8 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sat, 20 Jul 2024 14:45:44 +0200
Subject: [PATCH 1/3] `k-view-button` component

---
 panel/src/components/View/Buttons/SettingsButton.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/panel/src/components/View/Buttons/SettingsButton.vue b/panel/src/components/View/Buttons/SettingsButton.vue
index 60ac623ab2..c34dd84667 100644
--- a/panel/src/components/View/Buttons/SettingsButton.vue
+++ b/panel/src/components/View/Buttons/SettingsButton.vue
@@ -27,7 +27,7 @@
  */
 export default {
 	inheritAttrs: false,
-	emits: ["action"],
+	emits: ["action", "click"],
 	computed: {
 		dropdown() {
 			return this.model?.link;
@@ -42,7 +42,7 @@ export default {
 				return this.$refs.dropdown.toggle();
 			}
 
-			this.$emit("action", "settings");
+			this.$emit("click");
 		}
 	}
 };

From 0eec5d04d587839e96656636bfb58732dd8b0b06 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sat, 20 Jul 2024 19:22:59 +0200
Subject: [PATCH 2/3] Use `k-view-button` for view buttons

---
 .../src/components/View/Buttons/AddButton.vue |  4 +-
 .../View/Buttons/AddLanguagesButton.vue       |  4 +-
 .../View/Buttons/AddUsersButton.vue           |  4 +-
 .../View/Buttons/LanguagesButton.vue          | 22 ++++------
 .../components/View/Buttons/PreviewButton.vue |  6 +--
 .../components/View/Buttons/RemoveButton.vue  |  4 +-
 .../View/Buttons/RemoveLanguageButton.vue     |  4 +-
 .../View/Buttons/SettingsButton.vue           | 41 ++++++-------------
 .../components/View/Buttons/StatusButton.vue  |  6 +--
 .../components/View/Buttons/ThemeButton.vue   | 20 ++++-----
 10 files changed, 40 insertions(+), 75 deletions(-)

diff --git a/panel/src/components/View/Buttons/AddButton.vue b/panel/src/components/View/Buttons/AddButton.vue
index ccdfe028ae..6a7b86351d 100644
--- a/panel/src/components/View/Buttons/AddButton.vue
+++ b/panel/src/components/View/Buttons/AddButton.vue
@@ -1,11 +1,9 @@
 <template>
 	<component :is="component" v-if="component" />
-	<k-button
+	<k-view-button
 		v-else
 		:text="$t('add')"
 		icon="add"
-		size="sm"
-		variant="filled"
 		@click="$emit('action', 'add')"
 	/>
 </template>
diff --git a/panel/src/components/View/Buttons/AddLanguagesButton.vue b/panel/src/components/View/Buttons/AddLanguagesButton.vue
index 55e21147a6..b9ea9eebbb 100644
--- a/panel/src/components/View/Buttons/AddLanguagesButton.vue
+++ b/panel/src/components/View/Buttons/AddLanguagesButton.vue
@@ -1,9 +1,7 @@
 <template>
-	<k-button
+	<k-view-button
 		:text="$t('language.create')"
 		icon="add"
-		size="sm"
-		variant="filled"
 		@click="$dialog('languages/create')"
 	/>
 </template>
diff --git a/panel/src/components/View/Buttons/AddUsersButton.vue b/panel/src/components/View/Buttons/AddUsersButton.vue
index ea104404e0..056f0abf61 100644
--- a/panel/src/components/View/Buttons/AddUsersButton.vue
+++ b/panel/src/components/View/Buttons/AddUsersButton.vue
@@ -1,11 +1,9 @@
 <template>
-	<k-button
+	<k-view-button
 		v-if="$panel.view.component === 'k-users-view'"
 		:disabled="!$panel.permissions.users.create"
 		:text="$t('user.create')"
 		icon="add"
-		size="sm"
-		variant="filled"
 		@click="
 			$dialog('users/create', {
 				query: {
diff --git a/panel/src/components/View/Buttons/LanguagesButton.vue b/panel/src/components/View/Buttons/LanguagesButton.vue
index 6650ddb798..dcb68ce856 100644
--- a/panel/src/components/View/Buttons/LanguagesButton.vue
+++ b/panel/src/components/View/Buttons/LanguagesButton.vue
@@ -1,25 +1,19 @@
 <template>
-	<div
-		v-if="languages.length > 1"
+	<k-view-button
+		:options="options"
+		:text="code"
+		icon="translate"
+		responsive="text"
 		class="k-view-languages-button k-languages-dropdown"
-	>
-		<k-button
-			:dropdown="true"
-			:text="code"
-			icon="translate"
-			responsive="text"
-			size="sm"
-			variant="filled"
-			@click="$refs.languages.toggle()"
-		/>
-		<k-dropdown-content ref="languages" :options="options" />
-	</div>
+	/>
 </template>
 
 <script>
 /**
  * View header button to switch between content languages
+ * @displayName ViewLanguagesButton
  * @since 4.0.0
+ * @internal
  */
 export default {
 	computed: {
diff --git a/panel/src/components/View/Buttons/PreviewButton.vue b/panel/src/components/View/Buttons/PreviewButton.vue
index a19c1d0172..909b6ab5d3 100644
--- a/panel/src/components/View/Buttons/PreviewButton.vue
+++ b/panel/src/components/View/Buttons/PreviewButton.vue
@@ -1,12 +1,10 @@
 <template>
-	<k-button
+	<k-view-button
 		v-if="isAvailable"
 		:link="link"
 		:title="$t('open')"
 		icon="open"
-		size="sm"
 		target="_blank"
-		variant="filled"
 		class="k-view-preview-button"
 	/>
 </template>
@@ -14,7 +12,9 @@
 <script>
 /**
  * View header button to open the model's preview in a new tab
+ * @displayName ViewPreviewButton
  * @since 5.0.0
+ * @internal
  */
 export default {
 	computed: {
diff --git a/panel/src/components/View/Buttons/RemoveButton.vue b/panel/src/components/View/Buttons/RemoveButton.vue
index a2830272e9..1fc7ebf7a0 100644
--- a/panel/src/components/View/Buttons/RemoveButton.vue
+++ b/panel/src/components/View/Buttons/RemoveButton.vue
@@ -1,11 +1,9 @@
 <template>
 	<component :is="component" v-if="component" />
-	<k-button
+	<k-view-button
 		v-else
 		:text="$t('delete')"
 		icon="trash"
-		size="sm"
-		variant="filled"
 		@click="$emit('action', 'remove')"
 	/>
 </template>
diff --git a/panel/src/components/View/Buttons/RemoveLanguageButton.vue b/panel/src/components/View/Buttons/RemoveLanguageButton.vue
index c3a378caa7..4b7ddaf82f 100644
--- a/panel/src/components/View/Buttons/RemoveLanguageButton.vue
+++ b/panel/src/components/View/Buttons/RemoveLanguageButton.vue
@@ -1,12 +1,10 @@
 <template>
-	<k-button
+	<k-view-button
 		v-if="
 			$panel.view.component === 'k-language-view' && $panel.view.props.deletable
 		"
 		:title="$t('delete')"
 		icon="trash"
-		size="sm"
-		variant="filled"
 		@click="$dialog(`languages/${$panel.view.props.id}/delete`)"
 	/>
 </template>
diff --git a/panel/src/components/View/Buttons/SettingsButton.vue b/panel/src/components/View/Buttons/SettingsButton.vue
index c34dd84667..94d5a7bb02 100644
--- a/panel/src/components/View/Buttons/SettingsButton.vue
+++ b/panel/src/components/View/Buttons/SettingsButton.vue
@@ -1,49 +1,34 @@
 <template>
-	<div>
-		<k-button
-			:disabled="$panel.content.isLocked"
-			:dropdown="true"
-			:title="$t('settings')"
-			icon="cog"
-			variant="filled"
-			size="sm"
-			class="k-view-settings-button k-view-options"
-			@click="onClick"
-		/>
-		<k-dropdown-content
-			v-if="dropdown"
-			ref="dropdown"
-			:options="$dropdown(dropdown)"
-			align-x="end"
-			@action="$emit('action', $event)"
-		/>
-	</div>
+	<k-view-button
+		:disabled="$panel.content.isLocked"
+		:title="$t('settings')"
+		icon="cog"
+		class="k-view-settings-button k-view-options"
+		:options="hasDropdown ? dropdown : null"
+		@click="$emit('action', 'settings')"
+	/>
 </template>
 
 <script>
 /**
  * View header button to open the model's settings dropdown
+ * @displayName ViewSettingsButton
  * @since 5.0.0
+ * @internal
  */
 export default {
 	inheritAttrs: false,
 	emits: ["action", "click"],
 	computed: {
+		hasDropdown() {
+			return Boolean(this.dropdown);
+		},
 		dropdown() {
 			return this.model?.link;
 		},
 		model() {
 			return this.$panel.view.props.model;
 		}
-	},
-	methods: {
-		onClick() {
-			if (this.dropdown) {
-				return this.$refs.dropdown.toggle();
-			}
-
-			this.$emit("click");
-		}
 	}
 };
 </script>
diff --git a/panel/src/components/View/Buttons/StatusButton.vue b/panel/src/components/View/Buttons/StatusButton.vue
index 7480a120cb..d919b6974a 100644
--- a/panel/src/components/View/Buttons/StatusButton.vue
+++ b/panel/src/components/View/Buttons/StatusButton.vue
@@ -1,11 +1,9 @@
 <template>
-	<k-button
+	<k-view-button
 		v-if="$panel.view.component === 'k-page-view' && status"
 		v-bind="button"
 		:responsive="true"
 		:text="status.label"
-		size="sm"
-		variant="filled"
 		class="k-view-status-button k-page-status-button"
 		@click="$dialog(model.link + '/changeStatus')"
 	/>
@@ -14,7 +12,9 @@
 <script>
 /**
  * View header button to change the page status
+ * @displayName ViewStatusButton
  * @since 5.0.0
+ * @internal
  */
 export default {
 	inheritAttrs: false,
diff --git a/panel/src/components/View/Buttons/ThemeButton.vue b/panel/src/components/View/Buttons/ThemeButton.vue
index 84acf06b89..1050ddf4d9 100644
--- a/panel/src/components/View/Buttons/ThemeButton.vue
+++ b/panel/src/components/View/Buttons/ThemeButton.vue
@@ -1,22 +1,18 @@
 <template>
-	<div v-if="$panel.view.id === 'account'">
-		<k-button
-			:dropdown="true"
-			:icon="current === 'light' ? 'sun' : 'moon'"
-			:text="$t('theme')"
-			size="sm"
-			variant="filled"
-			class="k-view-theme-button"
-			@click="$refs.dropdown.toggle()"
-		/>
-		<k-dropdown-content ref="dropdown" :options="options" align-x="end" />
-	</div>
+	<k-view-button
+		v-if="$panel.view.id === 'account'"
+		:icon="current === 'light' ? 'sun' : 'moon'"
+		:options="options"
+		:text="$t('theme')"
+	/>
 </template>
 
 <script>
 /**
  * View header button to toggle the Panel theme
+ * @displayName ViewThemeButton
  * @since 5.0.0
+ * @internal
  */
 export default {
 	computed: {

From 668ed783a361d5b9952358735556fea0f5252e39 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Mon, 22 Jul 2024 11:31:39 +0200
Subject: [PATCH 3/3] Fix the button size for the status button

---
 panel/src/components/View/Buttons/StatusButton.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/panel/src/components/View/Buttons/StatusButton.vue b/panel/src/components/View/Buttons/StatusButton.vue
index d919b6974a..9b1e30b976 100644
--- a/panel/src/components/View/Buttons/StatusButton.vue
+++ b/panel/src/components/View/Buttons/StatusButton.vue
@@ -20,11 +20,14 @@ export default {
 	inheritAttrs: false,
 	computed: {
 		button() {
-			return this.$helper.page.status.call(
-				this,
-				this.model.status,
-				!this.permissions.changeStatus || this.$panel.content.isLocked
-			);
+			return {
+				...this.$helper.page.status.call(
+					this,
+					this.model.status,
+					!this.permissions.changeStatus || this.$panel.content.isLocked
+				),
+				size: "sm"
+			};
 		},
 		model() {
 			return this.$panel.view.props.model;