Menu/MenuItem as Ui Components

panel/src/components/View/Inside.vue

@@ -1,6 +1,15 @@
 <template>
 	<k-panel class="k-panel-inside">
-		<k-panel-menu />
+		<k-panel-menu
+			v-bind="$panel.menu.props"
+			:hover="$panel.menu.hover"
+			:is-open="$panel.menu.isOpen"
+			:license="$panel.license"
+			:searches="$panel.searches"
+			@hover="$panel.menu.hover = $event"
+			@search="$panel.search()"
+			@toggle="$panel.menu.toggle()"
+		/>
 		<main class="k-panel-main">
 			<k-topbar :breadcrumb="$panel.view.breadcrumb" :view="$panel.view">
 				<!-- @slot Additional content for the Topbar  -->

panel/src/components/View/Menu.vue

@@ -2,9 +2,9 @@
 	<nav
 		class="k-panel-menu"
 		:aria-label="$t('menu')"
-		:data-hover="$panel.menu.hover"
-		@mouseenter="$panel.menu.hover = true"
-		@mouseleave="$panel.menu.hover = false"
+		:data-hover="hover"
+		@mouseenter="$emit('hover', true)"
+		@mouseleave="$emit('hover', false)"
 	>
 		<div class="k-panel-menu-body">
 			<!-- Search button -->
@@ -13,7 +13,7 @@
 				:text="$t('search')"
 				icon="search"
 				class="k-panel-menu-search k-panel-menu-button"
-				@click="$panel.search()"
+				@click="$emit('search')"
 			/>
 
 			<!-- Menus -->
@@ -23,13 +23,14 @@
 				:data-second-last="menuIndex === menus.length - 2"
 				class="k-panel-menu-buttons"
 			>
-				<k-button
-					v-for="entry in menu"
-					:key="entry.id"
-					v-bind="entry"
-					:title="entry.title ?? entry.text"
-					class="k-panel-menu-button"
-				/>
+				<template v-for="entry in menu">
+					<component
+						:is="entry.component"
+						:key="entry.key"
+						v-bind="entry.props"
+						class="k-panel-menu-button"
+					/>
+				</template>
 			</menu>
 
 			<menu v-if="activationButton">
@@ -40,17 +41,17 @@
 					theme="love"
 					variant="filled"
 				/>
-				<k-activation :status="$panel.license" />
+				<k-activation :status="license" />
 			</menu>
 		</div>
 
 		<!-- Collapse/expand toggle -->
 		<k-button
-			:icon="$panel.menu.isOpen ? 'angle-left' : 'angle-right'"
-			:title="$panel.menu.isOpen ? $t('collapse') : $t('expand')"
+			:icon="isOpen ? 'angle-left' : 'angle-right'"
+			:title="isOpen ? $t('collapse') : $t('expand')"
 			size="xs"
 			class="k-panel-menu-toggle"
-			@click="$panel.menu.toggle()"
+			@click="$emit('toggle')"
 		/>
 	</nav>
 </template>
@@ -61,21 +62,35 @@
  * @internal
  */
 export default {
+	props: {
+		hover: Boolean,
+		isOpen: Boolean,
+		items: {
+			type: Array,
+			default: () => []
+		},
+		license: String,
+		searches: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	emits: ["search", "toggle"],
 	data() {
 		return {
 			over: false
 		};
 	},
 	computed: {
 		activationButton() {
-			if (this.$panel.license === "missing") {
+			if (this.license === "missing") {
 				return {
 					click: () => this.$dialog("registration"),
 					text: this.$t("activate")
 				};
 			}
 
-			if (this.$panel.license === "legacy") {
+			if (this.license === "legacy") {
 				return {
 					click: () => this.$dialog("license"),
 					text: this.$t("renew")
@@ -85,10 +100,10 @@ export default {
 			return false;
 		},
 		hasSearch() {
-			return this.$helper.object.length(this.$panel.searches) > 0;
+			return this.$helper.object.length(this.searches) > 0;
 		},
 		menus() {
-			return this.$helper.array.split(this.$panel.menu.entries, "-");
+			return this.$helper.array.split(this.items, "-");
 		}
 	}
 };

panel/src/panel/menu.js

@@ -3,7 +3,7 @@ import State from "./state.js";
 
 export const defaults = () => {
 	return {
-		entries: [],
+		props: {},
 		hover: false,
 		isOpen: false
 	};
@@ -100,8 +100,8 @@ export default (panel) => {
 		 *
 		 * @param {Array} entries
 		 */
-		set(entries) {
-			this.entries = entries;
+		set(menu) {
+			this.props = menu.props;
 			this.resize();
 			return this.state();
 		},

src/Panel/Area.php

@@ -150,11 +150,11 @@ public function menuItem(
 		// create a new menu item instance for the area
 		$item = new MenuItem(
 			current: $this->isCurrent($current),
-			icon: $this->icon() ?? $this->id(),
-			text: $this->label(),
-			dialog: $this->dialog(),
-			drawer: $this->drawer(),
-			link: $this->link(),
+			icon:    $this->icon() ?? $this->id(),
+			text:    $this->label(),
+			dialog:  $this->dialog(),
+			drawer:  $this->drawer(),
+			link:    $this->link(),
 		);
 
 		// add the custom menu settings

src/Panel/Fiber.php

@@ -213,12 +213,12 @@ public function license(): string
 	public function menu(): array
 	{
 		$menu = new Menu(
-			$this->areas,
-			$this->permissions,
-			$this->area?->id()
+			areas:       $this->areas,
+			permissions: $this->permissions,
+			current:     $this->area?->id()
 		);
 
-		return $menu->items();
+		return $menu->render();
 	}
 
 	public function multilang(): bool

src/Panel/Ui/Menu.php

@@ -5,6 +5,7 @@
 use Closure;
 use Kirby\Cms\App;
 use Kirby\Panel\Area;
+use Kirby\Toolkit\A;
 
 /**
  * The Menu class takes care of gathering
@@ -17,7 +18,7 @@
  * @copyright Bastian Allgeier
  * @license   https://getkirby.com/license
  */
-class Menu
+class Menu extends Component
 {
 	protected array $areas = [];
 
@@ -29,6 +30,10 @@ public function __construct(
 		foreach ($areas as $area) {
 			$this->areas[$area->id()] = $area;
 		}
+
+		parent::__construct(
+			component: 'k-panel-menu'
+		);
 	}
 
 	/**
@@ -66,6 +71,12 @@ public function areas(): array
 				continue;
 			}
 
+			// [$areaId => Ui() ]
+			if ($area instanceof Component) {
+				$areas[] = $area;
+				continue;
+			}
+
 			// [$areaId => [ ... ] ]
 			if (is_array($area) === true) {
 				// show the area in the
@@ -102,10 +113,10 @@ public function config(): array
 		// if no config is defined…
 		if ($items === null) {
 			// ensure that some defaults are on top in the right order
-			$defaults    = ['site', 'languages', 'users', 'system'];
+			$default    = ['site', 'languages', 'users', 'system'];
 			// add all other areas after that
-			$additionals = array_diff(array_keys($this->areas), $defaults);
-			$items       = [...$defaults, ...$additionals];
+			$additional = array_diff(array_keys($this->areas), $default);
+			$items      = [...$default, ...$additional];
 		}
 
 		return $items;
@@ -122,9 +133,9 @@ public function item(Area|null $area): MenuItem|null
 		}
 
 		return $area->menuItem(
-			areas: $this->areas,
+			areas:       $this->areas,
 			permissions: $this->permissions,
-			current: $this->current
+			current:     $this->current
 		);
 	}
 
@@ -133,19 +144,28 @@ public function item(Area|null $area): MenuItem|null
 	 */
 	public function items(): array
 	{
-		$items = [];
-
-		foreach ($this->areas() as $area) {
-			if ($area === '-') {
-				$items[] = '-';
-			} elseif ($item = $this->item($area)) {
-				$items[] = $item->toArray();
+		$items = A::map(
+			$this->areas(),
+			function (Area|Component|string $area) {
+				if ($area === '-') {
+					return '-';
+				}
+
+				if ($area instanceof Component) {
+					return $area->render();
+				}
+
+				if ($item = $this->item($area)) {
+					return $item->render();
+				}
 			}
-		}
-
-		$items[] = '-';
+		);
 
-		return array_filter([...$items, ...$this->options()]);
+		return array_filter([
+			...$items,
+			'-',
+			...$this->options()
+		]);
 	}
 
 	/**
@@ -155,9 +175,9 @@ public function items(): array
 	public function options(): array
 	{
 		$changes = new MenuItem(
-			icon: 'edit-line',
+			icon:   'edit-line',
 			dialog: 'changes',
-			text: 'changes'
+			text:   'changes'
 		);
 
 		$account = new MenuItem(
@@ -175,9 +195,17 @@ public function options(): array
 		);
 
 		return [
-			$changes->toArray(),
-			$account->toArray(),
-			$logout->toArray(),
+			$changes->render(),
+			$account->render(),
+			$logout->render(),
+		];
+	}
+
+	public function props(): array
+	{
+		return [
+			...parent::props(),
+			'items' => $this->items()
 		];
 	}
 }