fix(menubar): separate NcActionButton from ActionSingle

- ActionSingle was used in 2 places:
  1. As a single button in the menu
  2. As an item in NcActions
- NcActions doesn't fully support non-direct NcAction* children
- Move NcActionButton usage from ActionSingle to a new component
- This new component is named NcActionButton so that NcActions will consider it to be a valid NcAction* component

Signed-off-by: Grigorii K. Shartsev <[email protected]>

src/components/Menu/ActionList.vue

@@ -34,7 +34,7 @@
 		<template #icon>
 			<component :is="icon" :key="iconKey" />
 		</template>
-		<ActionSingle v-for="child in children"
+		<NcActionButton v-for="child in children"
 			:key="`child-${child.key}`"
 			:active="currentChild?.key === child.key"
 			is-item
@@ -48,7 +48,7 @@
 <script>
 import { NcActions } from '@nextcloud/vue'
 import { BaseActionEntry } from './BaseActionEntry.js'
-import ActionSingle from './ActionSingle.vue'
+import NcActionButton from './NcActionButton.vue'
 import { getIsActive } from './utils.js'
 import { useOutlineStateMixin } from '../Editor/Wrapper.provider.js'
 import useStore from '../../mixins/store.js'
@@ -58,7 +58,7 @@ export default {
 	name: 'ActionList',
 	components: {
 		NcActions,
-		ActionSingle,
+		NcActionButton,
 	},
 	extends: BaseActionEntry,
 	mixins: [useStore, useOutlineStateMixin, useMenuIDMixin],

src/components/Menu/ActionSingle.vue

@@ -21,65 +21,46 @@
   -->
 
 <template>
-	<component :is="component"
-		class="entry-single-action entry-action"
-		:class="[state.class, { 'entry-action-item': isItem }]"
+	<NcButton class="entry-single-action entry-action"
+		:class="state.class"
 		:disabled="state.disabled"
 		:aria-keyshortcuts="keyshortcuts || undefined"
 		:data-text-action-entry="actionEntry.key"
-		v-bind="componentSpecificParams"
+		:aria-label="label"
+		:title="tooltip"
+		type="tertiary"
+		:pressed="state.type !== 'button' ? state.active : undefined"
 		v-on="$listeners"
 		@click="runAction">
 		<template #icon>
 			<component :is="icon" />
 		</template>
 
-		<template v-if="isItem || actionEntry.forceLabel" #default>
+		<template v-if="actionEntry.forceLabel" #default>
 			{{ label }}
 		</template>
-	</component>
+	</NcButton>
 </template>
 
 <script>
-import { NcButton, NcActionButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import { BaseActionEntry } from './BaseActionEntry.js'
 
 export default {
 	name: 'ActionSingle',
+
+	components: {
+		NcButton,
+	},
+
 	extends: BaseActionEntry,
+
 	props: {
 		isItem: {
 			type: Boolean,
 			default: false,
 		},
 	},
-	computed: {
-		component() {
-			// Button and NcActionButton shares styles and behaviours
-			// to keep it simple, this component handle the small differences
-			return this.isItem
-				? NcActionButton
-				: NcButton
-		},
-		componentSpecificParams() {
-			const ncActionButtonParams = {
-				type: this.state.type,
-				modelValue: this.state.type !== 'button' ? this.state.active : undefined,
-				closeAfterClick: true,
-			}
-
-			const ncButtonParams = {
-				ariaLabel: this.label,
-				title: this.tooltip,
-				type: 'tertiary',
-				pressed: this.state.type !== 'button' ? this.state.active : undefined,
-			}
-
-			return this.isItem
-				? ncActionButtonParams
-				: ncButtonParams
-		},
-	},
 
 	mounted() {
 		this.$editor.on('transaction', () => this.updateState())

src/components/Menu/NcActionButton.vue

@@ -0,0 +1,81 @@
+<!--
+  - @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
+  -
+  - @author Vinicius Reis <[email protected]>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<NextcloudVueNcActionButton class="entry-single-action entry-action entry-action-item"
+		:class="state.class"
+		:disabled="state.disabled"
+		:aria-keyshortcuts="keyshortcuts || undefined"
+		:data-text-action-entry="actionEntry.key"
+		:type="state.type"
+		:model-value="state.type !== 'button' ? state.active : undefined"
+		close-after-click
+		v-on="$listeners"
+		@click="runAction">
+		<template #icon>
+			<component :is="icon" />
+		</template>
+		{{ label }}
+	</NextcloudVueNcActionButton>
+</template>
+
+<script>
+import { NcActionButton as NextcloudVueNcActionButton } from '@nextcloud/vue'
+import { BaseActionEntry } from './BaseActionEntry.js'
+
+export default {
+	// This component may be used as a direct child of NcActions.
+	// Even if it actually renders NcActionButton, NcActions cannot see it due to rendering limitations in Vue 2.
+	// Though it works in general, NcActions doesn't handle it correctly.
+	// Hotfix - rename the component to NcActionButton because it represents and renders it.
+	// eslint-disable-next-line vue/match-component-file-name
+	name: 'NcActionButton',
+
+	components: {
+		NextcloudVueNcActionButton,
+	},
+
+	extends: BaseActionEntry,
+
+	mounted() {
+		this.$editor.on('transaction', () => this.updateState())
+	},
+
+	methods: {
+		runAction() {
+			const { actionEntry } = this
+
+			if (actionEntry.click) {
+				actionEntry.click(this)
+			} else {
+				// Some actions run themselves.
+				// others still need to have .run() called upon them.
+				actionEntry.action(this.$editor.chain().focus())?.run()
+			}
+
+			this.$nextTick(() => {
+				this.$emit('trigged', { ...actionEntry })
+			})
+		},
+	},
+}
+</script>