feat(NcActions): submenus

src/components/NcActionButton/NcActionButton.vue

@@ -323,7 +323,8 @@ export default {
 			:title="title"
 			:type="nativeType"
 			v-bind="buttonAttributes"
-			@click="handleClick">
+			@click="handleClick"
+			@keydown="handleKeydown">
 			<!-- @slot Manually provide icon -->
 			<slot name="icon">
 				<span :class="[isIconUrl ? 'action-button__icon--url' : icon]"
@@ -387,6 +388,10 @@ export default {
 			from: 'NcActions:isSemanticMenu',
 			default: false,
 		},
+		openSubmenu: {
+			from: 'NcActions:openSubmenu',
+			default: () => () => {},
+		},
 	},
 
 	props: {
@@ -409,11 +414,12 @@ export default {
 		},
 
 		/**
-		 * If this is a menu, a chevron icon will
-		 * be added at the end of the line
+		 * Whether the button opens a submenu
+		 * - Boolean value makes button looks like a submenu opener
+		 * - String value can be used to open a specific submenu slot in NcActions
 		 */
 		isMenu: {
-			type: Boolean,
+			type: [Boolean, String],
 			default: false,
 		},
 
@@ -518,6 +524,11 @@ export default {
 		 */
 		handleClick(event) {
 			this.onClick(event)
+
+			if (typeof this.isMenu === 'string') {
+				this.openSubmenu(this.isMenu)
+			}
+
 			// If modelValue or type is set (so modelValue might be null for tri-state) we need to update it
 			if (this.modelValue !== null || this.type !== 'button') {
 				if (this.type === 'radio') {
@@ -536,6 +547,17 @@ export default {
 				}
 			}
 		},
+
+		handleKeydown(event) {
+			if (typeof this.isMenu !== 'string') {
+				return
+			}
+
+			// TODO RTL support
+			if (event.key === 'ArrowRight') {
+				this.openSubmenu(this.isMenu)
+			}
+		},
 	},
 }
 </script>

src/components/NcActions/NcActions.vue

@@ -788,6 +788,39 @@
 </style>
 ```
 
+## Submenus
+
+To create multi-level menus:
+- Add `<NcActionButton is-menu="NAME" />` where NAME is the name of the submenu
+- Pass submenu to a `submenu:NAME` slot
+
+```vue
+<template>
+	<NcActions>
+		<template #default>
+			<NcActionButton>Option 1</NcActionButton>
+			<NcActionButton is-menu="two">Option 2</NcActionButton>
+			<NcActionButton is-menu="three">Option 3</NcActionButton>
+			<NcActionButton>Option 4</NcActionButton>
+		</template>
+		<template #submenu:two>
+			<NcActionButton>Option 2.1</NcActionButton>
+			<NcActionButton is-menu="two-two">Option 2.2</NcActionButton>
+			<NcActionButton>Option 2.3</NcActionButton>
+		</template>
+		<template #submenu:two-two>
+			<NcActionButton>Option 2.2.1</NcActionButton>
+			<NcActionButton>Option 2.2.2</NcActionButton>
+		</template>
+		<template #submenu:three>
+			<NcActionButton>Option 3.1</NcActionButton>
+			<NcActionButton>Option 3.2</NcActionButton>
+			<NcActionButton>Option 3.3</NcActionButton>
+		</template>
+	</NcActions>
+</template>
+```
+
 ## NcActions children limitations
 
 `<NcActions>` is supposed to be used with direct `<NcAction*>` children.
@@ -959,6 +992,8 @@
 import Vue, { ref, computed, toRef } from 'vue'
 
 import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
+import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+import NcActionButton from '../NcActionButton/NcActionButton.vue'
 
 const focusableSelector = '.focusable'
 
@@ -990,6 +1025,7 @@
 			 * @type {import('vue').ComputedRef<boolean>}
 			 */
 			'NcActions:isSemanticMenu': computed(() => this.actionsMenuSemanticType === 'menu'),
+			'NcActions:openSubmenu': this.pushSubmenu,
 		}
 	},
 
@@ -1208,6 +1244,8 @@
 		return {
 			opened: this.open,
 			focusIndex: 0,
+			submenuStack: [],
+			submenuIndexStack: [],
 			/**
 			 * @type {'menu'|'expanded'|'dialog'|'tooltip'|'unknown'}
 			 */
@@ -1407,6 +1445,31 @@
 			}
 		},
 
+		pushSubmenu(submenu) {
+			// Only allow existing submenus
+			if (!this.$slots[`submenu:${submenu}`]) {
+				return
+			}
+
+			this.submenuStack.push(submenu)
+			this.submenuIndexStack.push(this.focusIndex)
+			this.$nextTick(() => {
+				this.focusFirstAction()
+			})
+		},
+
+		popSubmenu() {
+			if (!this.submenuStack.length) {
+				return
+			}
+
+			this.submenuStack.pop()
+			this.focusIndex = this.submenuIndexStack.pop()
+			this.$nextTick(() => {
+				this.focusAction()
+			})
+		},
+
 		// MENU STATE MANAGEMENT
 		openMenu(e) {
 			if (this.opened) {
@@ -1432,6 +1495,12 @@
 				return
 			}
 
+			// Only close submenu
+			if (this.submenuStack.length) {
+				this.popSubmenu()
+				return
+			}
+
 			// Wait for the next tick to keep the menu in DOM, allowing other components to find what button in what menu was used,
 			// for example, to implement auto set return focus.
 			// NcPopover will actually remove the menu from DOM also on the next tick.
@@ -1520,7 +1589,7 @@
 			return this.$refs.menu.querySelector('li.active')
 		},
 		/**
 		 * @return {NodeListOf<HTMLElement>}
 		 */
 		getFocusableMenuItemElements() {
 			return this.$refs.menu.querySelectorAll(focusableSelector)
@@ -1615,6 +1684,14 @@
 			this.handleEscapePressed(event)
 		},
 
+		onKeyup(event) {
+			// Escape is handled globally on body by keydown
+			// Prevent floating-vue to handle it again on keyup
+			if (event.key === 'Escape') {
+				event.stopPropagation()
+			}
+		},
+
 		onTriggerKeydown(event) {
 			if (event.key === 'Escape') {
 				// Tooltip has no focusable elements and the focus remains on the trigger button.
@@ -1736,12 +1813,14 @@
 	 * @return {object|undefined} The created VNode
 	 */
 	render(h) {
+		const menuSlot = this.submenuStack.length ? `submenu:${this.submenuStack.at(-1)}` : 'default'
+
 		/**
 		 * Filter the Actions, so that we only get allowed components.
 		 * This also ensure that we don't get 'text' elements, which would
 		 * become problematic later on.
 		 */
-		const actions = (this.$slots.default || []).filter(action => this.getActionName(action))
+		const actions = (this.$slots[menuSlot] || []).filter(action => this.getActionName(action))
 
 		// Check that we have at least one action
 		if (actions.length === 0) {
@@ -1769,6 +1848,27 @@
 		 */
 		const menuActions = actions.filter(action => !inlineActions.includes(action))
 
+		if (this.submenuStack.length) {
+			const backButton = h(NcActionButton, {
+				on: {
+					click: () => {
+						this.popSubmenu()
+					},
+				},
+				nativeOn: {
+					keydown: (event) => {
+						if (event.key === 'ArrowLeft') {
+							this.popSubmenu()
+						}
+					},
+				},
+			}, [
+				t('Back'),
+				h(IconArrowLeft, { slot: 'icon' }),
+			])
+			menuActions.unshift(backButton)
+		}
+
 		/**
 		 * Determine what kind of menu we have.
 		 * It defines keyboard navigation and a11y.
@@ -1968,6 +2068,7 @@
 							...this.config.popoverContainerA11yAttrs,
 						},
 						on: {
+							keyup: this.onKeyup,
 							keydown: this.onKeydown,
 							mousemove: this.onMouseFocusAction,
 						},
@@ -2054,7 +2155,7 @@
 				],
 			},
 			[
-				renderActionsPopover(actions),
+				renderActionsPopover(menuActions),
 			],
 		)
 	},