Lab examples for k-panel-menu

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

@@ -2,11 +2,11 @@
 	<k-panel class="k-panel-inside">
 		<k-panel-menu
 			v-bind="$panel.menu.props"
-			:hover="$panel.menu.hover"
+			:is-hovered="$panel.menu.isHovered"
 			:is-open="$panel.menu.isOpen"
 			:license="$panel.license"
 			:searches="$panel.searches"
-			@hover="$panel.menu.hover = $event"
+			@hover="$panel.menu.isHovered = $event"
 			@search="$panel.search()"
 			@toggle="$panel.menu.toggle()"
 		/>

panel/src/components/View/Menu.vue

@@ -2,7 +2,7 @@
 	<nav
 		class="k-panel-menu"
 		:aria-label="$t('menu')"
-		:data-hover="hover"
+		:data-hover="isHovered"
 		@mouseenter="$emit('hover', true)"
 		@mouseleave="$emit('hover', false)"
 	>
@@ -63,7 +63,7 @@
  */
 export default {
 	props: {
-		hover: Boolean,
+		isHovered: Boolean,
 		isOpen: Boolean,
 		items: {
 			type: Array,
@@ -76,11 +76,6 @@ export default {
 		}
 	},
 	emits: ["search", "toggle"],
-	data() {
-		return {
-			over: false
-		};
-	},
 	computed: {
 		activationButton() {
 			if (this.license === "missing") {

panel/src/panel/menu.js

@@ -4,7 +4,7 @@ import State from "./state.js";
 export const defaults = () => {
 	return {
 		props: {},
-		hover: false,
+		isHovered: false,
 		isOpen: false
 	};
 };