Merge pull request #6543 from getkirby/v5/buttons/5-use-k-view-button

Buttons 5: Use `k-view-button` for view buttons

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>

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>

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: {

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: {

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

@@ -1,20 +1,20 @@
 <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>
 
 <script>
 /**
  * View header button to open the model's preview in a new tab
+ * @displayName ViewPreviewButton
  * @since 5.0.0
+ * @internal
  */
 export default {
 	computed: {

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>

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>

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"],
+	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("action", "settings");
-		}
 	}
 };
 </script>

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,17 +12,22 @@
 <script>
 /**
  * View header button to change the page status
+ * @displayName ViewStatusButton
  * @since 5.0.0
+ * @internal
  */
 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;

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: {