@zeedhi/vuetify 1.111.0 → 3.0.0

package/src/components/zd-menu/ZdMenu.ts

@@ -0,0 +1,337 @@
+import {
+	IComponentRender,
+	IMenu,
+	IMenuGroup,
+	IMenuItem,
+	ITextInput,
+	Menu,
+	MenuGroup,
+	MenuLink,
+	TextInput,
+} from '@zeedhi/common';
+import { IEventParam, KeyMap, Metadata } from '@zeedhi/core';
+import debounce from 'lodash.debounce';
+import { defineComponent, onBeforeUnmount, onMounted, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useDisplay } from 'vuetify';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdMenuProps = buildProps({
+	...ZdComponentRenderProps,
+	app: {
+		type: [Boolean, String],
+		default: false,
+	},
+	absolute: {
+		type: [Boolean, String],
+		default: false,
+	},
+	clipped: {
+		type: [Boolean, String],
+		default: false,
+	},
+	dense: {
+		type: [Boolean, String],
+		default: true,
+	},
+	fixed: {
+		type: [Boolean, String],
+		default: false,
+	},
+	floating: {
+		type: [Boolean, String],
+		default: false,
+	},
+	isVisible: {
+		type: [Boolean, String],
+		default: false,
+	},
+	mini: {
+		type: [Boolean, String],
+		default: false,
+	},
+	miniState: {
+		type: [Boolean, String],
+		default: false,
+	},
+	miniWidth: {
+		type: [Number, String],
+		default: 58,
+	},
+	temporary: {
+		type: [Boolean, String],
+		default: false,
+	},
+	isLocal: {
+		type: [Boolean, String],
+		default: false,
+	},
+	closeToMini: {
+		type: [Boolean, String],
+		default: true,
+	},
+	showSearch: {
+		type: [Boolean, String],
+		default: false,
+	},
+	opened: {
+		type: [Boolean, String],
+		default: undefined,
+	},
+	itemsUrl: {
+		type: String,
+		default: '',
+	},
+	topSlot: {
+		type: Array<IComponentRender>,
+		default: () => [] as IComponentRender[],
+	},
+	width: {
+		type: [Number, String],
+		default: 256,
+	},
+	cache: {
+		type: Boolean,
+		default: false,
+	},
+	disableRouteWatcher: {
+		type: Boolean,
+		default: false,
+	},
+	items: {
+		type: Array<IMenuItem>,
+		default: () => [],
+	},
+	// Zeedhi 3.x
+	permanent: {
+		type: [String, Boolean],
+		default: false,
+	},
+});
+
+export function positionTooltip(menuItem: IMenuItem, rootElement: HTMLElement | undefined) {
+	if (!rootElement) return;
+
+	const title = rootElement.querySelector<HTMLDivElement>('.v-list-item-title');
+	if (menuItem.parentMenu) {
+		if (title?.innerText && title.clientWidth < title.scrollWidth) {
+			menuItem.parentMenu.showTooltip = true;
+			menuItem.parentMenu.tooltipText = title.innerText;
+			const position = {
+				x: rootElement.offsetLeft + rootElement.clientWidth,
+				y: rootElement.offsetTop,
+			};
+			menuItem.parentMenu.tooltipContentProps = {
+				style: `left: ${position.x}px; top: ${position.y}px;`,
+			};
+		} else {
+			menuItem.parentMenu.showTooltip = false;
+		}
+	}
+}
+
+const menuComponent = defineComponent({
+	props: ZdMenuProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Menu>(props, ctx, Menu);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		const { mobile } = useDisplay();
+
+		const checkMiniVariant = () => {
+			return !!(
+				(!instance.opened && instance.mini) ||
+				(instance.miniState && !instance.mouseOver && instance.miniState && !mobile) ||
+				(instance.miniState && instance.mini)
+			);
+		};
+
+		const showSlotOnHover = () => {
+			return (instance.miniState && instance.mouseOver) || !instance.miniState || instance.mini;
+		};
+
+		const route = useRoute();
+
+		let unWatchRouteFn: any;
+
+		const doSearch = ({ component }: IEventParam<TextInput>) => {
+			instance.search = component.value;
+		};
+
+		const searchInputProps: ITextInput = {
+			name: 'menuSearchInput',
+			component: 'ZdTextInput',
+			cssClass: 'zd-menu-search-input',
+			showHelper: false,
+			showLabel: false,
+			placeholder: 'SEARCH',
+			appendIcon: 'magnify',
+			events: {
+				input: debounce(doSearch, 500),
+			},
+		};
+
+		const findIndex = (parentComp?: IMenu | IMenuGroup, comp?: IMenuItem | null): number => {
+			return parentComp?.items?.findIndex((item: IMenuItem) => item.name === comp?.name) || 0;
+		};
+
+		const getParentComp = (): IMenu | IMenuGroup | undefined => {
+			return instance.currentItem?.parentGroup || instance.currentItem?.parentMenu;
+		};
+
+		const navigateNextItem = () => {
+			const parentComp = getParentComp();
+			let currentItemIndex = findIndex(parentComp, instance.currentItem);
+			let nextItemName;
+			if (instance.showSearch && document.activeElement?.id === searchInputProps.name) {
+				nextItemName = instance.items[0].name || undefined;
+			} else if (currentItemIndex === -1 || !instance.currentItem || !parentComp?.items?.length) return;
+
+			if (!nextItemName) {
+				if (instance.currentItem && instance.currentItem.component === 'ZdMenuGroup' && instance.currentItem.opened) {
+					nextItemName = instance.currentItem.items[0].name;
+				} else {
+					const lastItem = instance.currentItem;
+					const lastItemName = instance.currentItem!.name;
+
+					while (parentComp && currentItemIndex === parentComp.items!.length - 1) {
+						instance.currentItem = parentComp;
+						currentItemIndex = findIndex(parentComp, instance.currentItem);
+					}
+					if (instance.currentItem!.component !== 'ZdMenu') {
+						let newIndex;
+
+						if (currentItemIndex < parentComp!.items!.length - 1) {
+							newIndex = currentItemIndex + 1;
+						} else {
+							newIndex = currentItemIndex;
+						}
+
+						nextItemName = parentComp!.items![newIndex].name;
+					} else {
+						instance.currentItem = lastItem;
+						nextItemName = lastItemName;
+					}
+				}
+			}
+			const nextItem = Metadata.getInstance<MenuGroup | MenuLink>(nextItemName);
+			nextItem.setFocus();
+		};
+
+		const navigatePreviousItem = () => {
+			const parentComp = getParentComp();
+			const currentItemIndex = findIndex(parentComp, instance.currentItem);
+
+			if (currentItemIndex === -1 || !parentComp?.items?.length) return;
+
+			let nextItemName;
+
+			if (currentItemIndex === 0 && instance.currentItem) {
+				if (parentComp.component !== 'ZdMenu') {
+					instance.currentItem = parentComp;
+					nextItemName = instance.currentItem.name;
+				} else if (instance.showSearch) {
+					nextItemName = searchInputProps.name;
+					instance.currentItem = null;
+				} else nextItemName = instance.currentItem.name;
+			} else {
+				let newIndex;
+				if (currentItemIndex >= 0) {
+					newIndex = currentItemIndex - 1;
+				} else {
+					newIndex = currentItemIndex;
+				}
+
+				nextItemName = parentComp.items[newIndex].name;
+				let nextGroupInstance = Metadata.getInstance<MenuGroup>(nextItemName);
+
+				while (nextGroupInstance.opened && nextGroupInstance.items.length) {
+					nextItemName = nextGroupInstance.items[nextGroupInstance.items.length - 1].name;
+					nextGroupInstance = Metadata.getInstance<MenuGroup>(nextItemName);
+				}
+			}
+			const nextItem = Metadata.getInstance<MenuGroup | MenuLink>(nextItemName);
+			nextItem.setFocus();
+		};
+
+		const toogleGroup = (collapse: boolean) => {
+			if (instance.currentItem && instance.currentItem.component === 'ZdMenuGroup') {
+				if (instance.currentItem.opened && collapse) {
+					instance.currentItem.close();
+				} else if (!collapse) {
+					instance.currentItem.open();
+				}
+			}
+		};
+
+		const navigationKeyMapping: any = {
+			down: {
+				event: navigateNextItem.bind(this),
+				index: 99,
+				active: true,
+			},
+			up: {
+				event: navigatePreviousItem.bind(this),
+				index: 99,
+				active: true,
+			},
+			left: {
+				event: toogleGroup.bind(this, true),
+				index: 99,
+				active: true,
+			},
+			right: {
+				event: toogleGroup.bind(this, false),
+				index: 99,
+				active: true,
+			},
+		};
+
+		onMounted(() => {
+			instance.urlChanged(route);
+
+			const rootElement = getRootElement(root);
+
+			if (rootElement.value) instance.tooltipAnchor = rootElement.value;
+
+			KeyMap.bind(navigationKeyMapping, this, rootElement.value);
+
+			unWatchRouteFn = watch(
+				() => route.path,
+				(current, previous) => {
+					if (current !== previous) {
+						instance.urlChanged({ path: current });
+					}
+				},
+			);
+		});
+
+		onBeforeUnmount(() => {
+			KeyMap.unbind(navigationKeyMapping, this);
+			if (unWatchRouteFn) {
+				unWatchRouteFn();
+			}
+		});
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+			searchInputProps,
+			navigationKeyMapping,
+			// methods
+			checkMiniVariant,
+			showSlotOnHover,
+		};
+	},
+});
+
+export default menuComponent;

package/src/components/zd-menu/ZdMenu.vue

@@ -0,0 +1,160 @@
+<template>
+  <div
+    :id="instance.name"
+    ref="root"
+    v-show="instance.isVisible"
+    @mouseenter="instance.menuMouseEnter()"
+    @mouseleave="instance.menuMouseLeave()"
+  >
+    <v-tooltip
+      v-model="instance.showTooltip"
+      :attach="instance.tooltipAnchor"
+      :content-props="instance.tooltipContentProps"
+      :theme="instance.theme"
+      location="end"
+      class="zd-menu-tooltip"
+    >
+      <span>{{ instance.tooltipText }}</span>
+    </v-tooltip>
+    <v-navigation-drawer
+      v-if="instance.isVisible"
+      ref="menu"
+      :class="['zd-menu', instance.cssClass]"
+      :style="{
+        ...$styleObject(instance.cssStyle),
+      }"
+      :name="instance.name"
+      v-model="instance.drawer"
+      v-bind="{
+        floating: !!instance.floating,
+        temporary: !!instance.temporary,
+        width: instance.width,
+        absolute: !!instance.absolute,
+        rail: instance.miniState,
+        theme: instance.theme,
+        'rail-width': instance.miniWidth,
+        'expand-on-hover': true,
+        permanent: !!instance.permanent,
+        'disable-route-watcher': instance.disableRouteWatcher,
+      }"
+    >
+      <v-list nav :dense="instance.dense" expand :theme="instance.theme">
+        <!-- SLOT -->
+        <span
+          class="zd-menu-top-slot"
+          v-if="instance.topSlot.length || instance.showSearch || !!$slots.topSlot"
+          v-show="showSlotOnHover()"
+        >
+          <zd-text-input
+            v-if="instance.showSearch"
+            v-bind="searchInputProps"
+          ></zd-text-input>
+          <template v-if="!$slots.topSlot">
+            <component
+              v-for="(item,i) in instance.topSlot"
+              :key="item.name"
+              :itemIndex="i"
+              :is="item.component"
+              v-bind="item"
+              :parent="instance"
+            />
+          </template>
+          <slot name="topSlot"></slot>
+        </span>
+
+        <component
+          v-for="item in instance.items"
+          :key="item.name"
+          :is="item.component"
+          :class="instance.mini ? 'menu-item-mini' : ''"
+          :miniVariant="checkMiniVariant()"
+          :parent-menu="instance"
+          v-bind="item"
+        />
+        <slot name="items"></slot>
+      </v-list>
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script lang="ts" src="./ZdMenu.ts"></script>
+
+<style lang="scss">
+.zd-menu {
+  &-tooltip{
+    z-index: 900;
+  }
+
+  .v-list {
+    .v-list-item {
+      .v-list-item-title {
+        font-weight: var(--zd-font-body1-weight);
+        font-size: var(--zd-font-body1-size);
+        color: var(--zd-font-color);
+        text-align: left;
+      }
+
+      .v-list-item__prepend {
+        width: 36px;
+
+        .v-icon {
+          color: var(--zd-font-color);
+        }
+      }
+
+      &.selected .v-list-item-title {
+        font-weight: var(--zd-font-body2-weight);
+        color: var(--v-primary-base);
+      }
+
+      &.selected .v-list-item__prepend .v-icon {
+        color: var(--v-primary-base);
+      }
+
+      &.v-list-item--active:not(.focus-visible):not(:focus):not([data-focus-visible-added]):not(:hover):before {
+        opacity: 0;
+      }
+    }
+
+    .v-list-group {
+      &.selected > .v-list-group__header .v-list-item-title {
+        font-weight: var(--zd-font-body2-weight);
+        color: var(--v-primary-base);
+      }
+
+      &.selected > .v-list-group__header .v-list-item__prepend .v-icon {
+        color: var(--v-primary-base);
+      }
+    }
+
+    .zd-menu-top-slot {
+      margin-bottom: 10px;
+      display: block;
+    }
+  }
+
+  &.v-navigation-drawer--mini-variant .v-list-item {
+    justify-content: inherit;
+  }
+
+  &.v-navigation-drawer--is-mobile {
+    div > .zd-menu-top-slot {
+      display: block !important;
+    }
+  }
+
+  &.theme--dark {
+    .v-list {
+      .v-list-item {
+        .v-list-item-title {
+          color: rgba(var(--v-theme-grey-lighten-5));
+        }
+
+        .v-list-item__prepend .v-icon {
+          color: rgba(var(--v-theme-grey-lighten-5));
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/zd-menu/ZdMenuButton.ts

@@ -0,0 +1,47 @@
+import { MenuButton } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { ZdButtonProps } from '../zd-button/ZdButton';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+
+export const ZdMenuButtonProps = buildProps({
+	...ZdButtonProps,
+	menuName: {
+		type: String,
+		default: '',
+	},
+	iconName: {
+		type: String,
+		default: 'menu',
+	},
+	flat: {
+		type: [Boolean, String],
+		default: true,
+	},
+	icon: {
+		type: [Boolean, String],
+		default: true,
+	},
+});
+
+const menuButtonComponent = defineComponent({
+	props: ZdMenuButtonProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<MenuButton>(props, ctx, MenuButton);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default menuButtonComponent;

package/src/components/zd-menu/ZdMenuButton.vue

@@ -0,0 +1,11 @@
+<template>
+  <zd-button
+    :id="instance.name"
+    :instance-object="instance"
+    ref="root"
+    class="zd-menu-button"
+    name="menu-button"
+  />
+</template>
+
+<script lang="ts" src="./ZdMenuButton.ts"></script>

package/src/components/zd-menu/ZdMenuGroup.ts

@@ -0,0 +1,73 @@
+import { IMenuItem, Menu, MenuGroup } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+import { positionTooltip } from './ZdMenu';
+
+export const ZdMenuGroupProps = buildProps({
+	...ZdComponentRenderProps,
+	label: {
+		type: String,
+		default: '',
+	},
+	icon: {
+		type: String,
+		default: '',
+	},
+	opened: {
+		type: [Boolean, String],
+		default: false,
+	},
+	items: {
+		type: Array<IMenuItem>,
+		default: () => [] as IMenuItem[],
+	},
+	menuLevel: {
+		type: Number,
+		default: 1,
+	},
+	expandIcon: {
+		type: String,
+		default: 'expand',
+	},
+	parentMenu: {
+		type: Menu,
+	},
+	parentGroup: {
+		type: MenuGroup,
+	},
+	miniVariant: {
+		type: Boolean,
+	},
+});
+
+const menuGroupComponent = defineComponent({
+	props: ZdMenuGroupProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<MenuGroup>(props, ctx, MenuGroup);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		const mouseEnter = () => {
+			const rootElement = getRootElement(root);
+
+			positionTooltip(instance, rootElement.value);
+		};
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+			// methods
+			mouseEnter,
+		};
+	},
+});
+
+export default menuGroupComponent;

package/src/components/zd-menu/ZdMenuGroup.vue

@@ -0,0 +1,92 @@
+<template>
+  <v-list-group
+    v-show="instance.isVisible && !(miniVariant && menuLevel !== 1)"
+    v-model="instance.opened"
+    ref="root"
+    :id="instance.name"
+    :class="['zd-menu-group', { selected: instance.isSelected() }, 'zd-menu-item-level-' + menuLevel, instance.cssClass]"
+    :style="{
+      ...$styleObject(instance.cssStyle),
+    }"
+    @mouseenter="mouseEnter"
+    @click="instance.click($event)"
+    @focus="instance.focus($event)"
+  >
+    <template v-slot:activator="{ props }">
+      <v-list-item 
+        v-bind="props"
+        ref="itemText" 
+        class="zd-menu-group-title"
+        :title="$t(instance.label)"
+        :prepend-icon="$getIcon(instance.icon)"
+      />
+    </template>
+
+    <component
+      v-for="(item, i) in instance.items"
+      :key="i"
+      :is="item.component"
+      :parent-menu="instance.parentMenu"
+      :parent-group="instance"
+      v-bind="item"
+      :menu-level="menuLevel+1"
+      :miniVariant="miniVariant"
+      sub-group
+      no-action
+      class="zd-menu-group-child"
+    />
+    <slot name="items"></slot>
+  </v-list-group>
+</template>
+
+<script lang="ts" src="./ZdMenuGroup.ts"></script>
+
+<style lang="scss">
+.zd-menu-group {
+  .v-list-group__header {
+    .v-list-group__header__prepend-icon {
+      margin-right: var(--zd-default-padding);
+      margin-left: 2px;
+    }
+  }
+
+  .zd-menu-group-arrow-icon {
+    position: absolute;
+    top: 10px;
+    font-size: 18px;
+    transform: rotate(-90deg);
+  }
+
+  &.zd-menu-item-level-1 {
+    .v-list-group__items {
+      .v-list-item, .v-list-group .v-list-group__header {
+        padding-left: 48px !important;
+      }
+    }
+  }
+
+  &.zd-menu-item-level-2 {
+    .v-list-group__items {
+      .v-list-item, .v-list-group .v-list-group__header {
+        padding-left: 58px !important;
+      }
+    }
+  }
+
+  &.zd-menu-item-level-3 {
+    .v-list-group__items {
+      .v-list-item, .v-list-group .v-list-group__header {
+        padding-left: 68px !important;
+      }
+    }
+  }
+
+  &.zd-menu-item-level-4 {
+    .v-list-group__items {
+      .v-list-item, .v-list-group .v-list-group__header {
+        padding-left: 78px !important;
+      }
+    }
+  }
+}
+</style>