Refactor Panel package

config/areas/account/dialogs.php

@@ -1,6 +1,6 @@
 <?php
 
-use Kirby\Panel\UserTotpEnableDialog;
+use Kirby\Panel\Ui\Dialogs\UserTotpEnableDialog;
 
 $dialogs = require __DIR__ . '/../users/dialogs.php';
 

config/areas/files/dialogs.php

@@ -2,7 +2,6 @@
 
 use Kirby\Cms\Find;
 use Kirby\Panel\Field;
-use Kirby\Panel\Panel;
 use Kirby\Toolkit\Escape;
 use Kirby\Toolkit\I18n;
 
@@ -40,7 +39,9 @@
 		},
 		'submit' => function (string $path, string $filename) {
 			$file     = Find::file($path, $filename);
-			$name     = $file->kirby()->request()->get('name');
+			$kirby    = $file->kirby();
+			$referrer = $kirby->panel()->referrer();
+			$name     = $kirby->request()->get('name');
 			$renamed  = $file->changeName($name);
 			$oldUrl   = $file->panel()->url(true);
 			$newUrl   = $renamed->panel()->url(true);
@@ -49,7 +50,7 @@
 			];
 
 			// check for a necessary redirect after the filename has changed
-			if (Panel::referrer() === $oldUrl && $oldUrl !== $newUrl) {
+			if ($referrer === $oldUrl && $oldUrl !== $newUrl) {
 				$response['redirect'] = $newUrl;
 			}
 
@@ -144,7 +145,7 @@
 		'submit' => function (string $path, string $filename) {
 			$file     = Find::file($path, $filename);
 			$redirect = false;
-			$referrer = Panel::referrer();
+			$referrer = $file->kirby()->panel()->referrer();
 			$url      = $file->panel()->url(true);
 
 			$file->delete();

config/areas/logout.php

@@ -5,7 +5,7 @@
 
 return function ($kirby) {
 	return [
-		'icon'  => 'user',
+		'icon'  => 'logout',
 		'label' => I18n::translate('logout'),
 		'views' => [
 			'logout' => [

config/areas/site/dialogs.php

@@ -7,10 +7,9 @@
 use Kirby\Exception\Exception;
 use Kirby\Exception\InvalidArgumentException;
 use Kirby\Exception\PermissionException;
-use Kirby\Panel\ChangesDialog;
 use Kirby\Panel\Field;
-use Kirby\Panel\PageCreateDialog;
-use Kirby\Panel\Panel;
+use Kirby\Panel\Ui\Dialogs\ChangesDialog;
+use Kirby\Panel\Ui\Dialogs\PageCreateDialog;
 use Kirby\Toolkit\Escape;
 use Kirby\Toolkit\I18n;
 use Kirby\Toolkit\Str;
@@ -268,12 +267,13 @@
 			if ($page->slug() !== $slug) {
 				$response['event'][] = 'page.changeSlug';
 
-				$newPage = $page->changeSlug($slug);
-				$oldUrl  = $page->panel()->url(true);
-				$newUrl  = $newPage->panel()->url(true);
+				$newPage  = $page->changeSlug($slug);
+				$oldUrl   = $page->panel()->url(true);
+				$newUrl   = $newPage->panel()->url(true);
+				$referrer = $page->kirby()->panel()->referrer();
 
 				// check for a necessary redirect after the slug has changed
-				if (Panel::referrer() === $oldUrl && $oldUrl !== $newUrl) {
+				if ($referrer === $oldUrl && $oldUrl !== $newUrl) {
 					$response['redirect'] = $newUrl;
 				}
 			}
@@ -358,7 +358,7 @@
 
 			$page     = Find::page($id);
 			$redirect = false;
-			$referrer = Panel::referrer();
+			$referrer = $page->kirby()->panel()->referrer();
 			$url      = $page->panel()->url(true);
 
 			if (

config/areas/users/dialogs.php

@@ -6,8 +6,7 @@
 use Kirby\Exception\Exception;
 use Kirby\Exception\InvalidArgumentException;
 use Kirby\Panel\Field;
-use Kirby\Panel\Panel;
-use Kirby\Panel\UserTotpDisableDialog;
+use Kirby\Panel\Ui\Dialogs\UserTotpDisableDialog;
 use Kirby\Toolkit\Escape;
 use Kirby\Toolkit\I18n;
 
@@ -139,7 +138,7 @@
 			return [
 				'event'  => 'user.changeLanguage',
 				'reload' => [
-					'globals' => '$translation'
+					'globals' => 'translation'
 				]
 			];
 		}
@@ -296,7 +295,7 @@
 		'submit' => function (string $id) {
 			$user     = Find::user($id);
 			$redirect = false;
-			$referrer = Panel::referrer();
+			$referrer = $user->kirby()->panel()->referrer();
 			$url      = $user->panel()->url(true);
 
 			$user->delete();

config/routes.php

@@ -3,7 +3,6 @@
 use Kirby\Cms\App;
 use Kirby\Cms\LanguageRoutes;
 use Kirby\Cms\Media;
-use Kirby\Panel\Panel;
 use Kirby\Panel\Plugins;
 use Kirby\Plugin\Assets;
 use Kirby\Toolkit\Str;
@@ -125,8 +124,8 @@
 			'pattern' => $panel . '/(:all?)',
 			'method'  => 'ALL',
 			'env'     => 'panel',
-			'action'  => function (string|null $path = null) {
-				return Panel::router($path);
+			'action'  => function (string|null $path = null) use ($kirby) {
+				return $kirby->panel()->router($path);
 			}
 		],
 		// permalinks for page/file UUIDs

panel/lab/components/menu/index.vue

@@ -0,0 +1,97 @@
+<template>
+	<k-lab-examples>
+		<k-box theme="info">
+			Try these examples with the actual Panel menu collapsed as otherwise the
+			global open state will overwrite the local example state.
+		</k-box>
+
+		<k-lab-example label="Sections">
+			<k-panel-menu :items="items" />
+		</k-lab-example>
+		<k-lab-example label="Has search">
+			<k-panel-menu :items="items" :searches="searches" />
+		</k-lab-example>
+		<k-lab-example label="Open/Close (and hovered)">
+			<div class="k-panel" :data-menu="isOpen">
+				<k-panel-menu
+					:items="items"
+					:is-hovered="isHovered"
+					:is-open="isOpen"
+					@hover="isHovered = $event"
+					@toggle="isOpen = !isOpen"
+				/>
+			</div>
+		</k-lab-example>
+		<k-lab-example label="License: missing">
+			<k-panel-menu :items="items" license="missing" />
+		</k-lab-example>
+		<k-lab-example label="License: legacy">
+			<k-panel-menu :items="items" license="legacy" />
+		</k-lab-example>
+	</k-lab-examples>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			isHovered: false,
+			isOpen: true
+		};
+	},
+	computed: {
+		items() {
+			return [
+				{
+					component: "k-button",
+					key: "a",
+					props: { text: "Site", icon: "home", current: true }
+				},
+				{
+					component: "k-button",
+					key: "b",
+					props: { text: "Users", icon: "users" }
+				},
+				{
+					component: "k-button",
+					key: "c",
+					props: { text: "Settings", icon: "settings" }
+				},
+				"-",
+				{
+					component: "k-button",
+					key: "d",
+					props: { text: "Changes", icon: "edit-line" }
+				},
+				{
+					component: "k-button",
+					key: "e",
+					props: { text: "Account", icon: "account" }
+				},
+				{
+					component: "k-button",
+					key: "f",
+					props: { text: "Sign out", icon: "logout" }
+				}
+			];
+		},
+		searches() {
+			return {
+				shops: {}
+			};
+		}
+	}
+};
+</script>
+
+<style>
+.k-lab-example-canvas {
+	position: relative;
+	min-height: 20rem;
+}
+
+.k-lab-example-canvas .k-panel-menu {
+	position: absolute;
+	z-index: var(--z-content);
+}
+</style>

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"
+			:is-hovered="$panel.menu.isHovered"
+			:is-open="$panel.menu.isOpen"
+			:license="$panel.license"
+			:searches="$panel.searches"
+			@hover="$panel.menu.isHovered = $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="isHovered"
+		@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,30 @@
  * @internal
  */
 export default {
-	data() {
-		return {
-			over: false
-		};
+	props: {
+		isHovered: Boolean,
+		isOpen: Boolean,
+		items: {
+			type: Array,
+			default: () => []
+		},
+		license: String,
+		searches: {
+			type: Object,
+			default: () => ({})
+		}
 	},
+	emits: ["search", "toggle"],
 	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 +95,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/feature.js

@@ -34,7 +34,7 @@ export const defaults = () => {
  * @since 4.0.0
  *
  * @param {Object} panel The panel singleton
- * @param {String} key Sets the $key for the feature. Backend responses use this key for features.
+ * @param {String} key Sets the key for the feature. Backend responses use this key for features.
  * @param {Object} defaults Sets the default state of the feature
  */
 export default (panel, key, defaults) => {
@@ -185,7 +185,7 @@ export default (panel, key, defaults) => {
 			options.url = options.url ?? this.url();
 
 			const response = await panel.get(options.url, options);
-			const state = response["$" + this.key()];
+			const state = response[this.key()];
 
 			// the state cannot be updated
 			if (!state || state.component !== this.component) {