@zeedhi/common 1.111.1 → 3.0.0

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

@@ -0,0 +1,52 @@
+import { Metadata } from '@zeedhi/core';
+import { Button } from '../zd-button/button';
+import { IMenuButton } from './interfaces';
+import { Menu } from './menu';
+
+/**
+ * Base class for MenuButton component.
+ */
+export class MenuButton extends Button implements IMenuButton {
+	/**
+	 * Makes the background transparent (equal to text prop in Vuetify).
+	 */
+	public flat = true;
+
+	/**
+	 * Designates the button as icon, round and flat.
+	 */
+	public icon = true;
+
+	/**
+	 * Designates the button icon, that will be rendered before the label.
+	 */
+	public iconName = 'menu';
+
+	/**
+	 * Name of the menu component controlled by this button.
+	 */
+	public menuName = '';
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Menu Button.
+	 * @param props Menu Button properties
+	 */
+	constructor(props: IMenuButton) {
+		super(props);
+		this.flat = this.getInitValue('flat', props.flat, this.flat);
+		this.icon = this.getInitValue('icon', props.icon, this.icon);
+		this.iconName = this.getInitValue('iconName', props.iconName, this.iconName);
+		this.menuName = this.getInitValue('menuName', props.menuName, this.menuName);
+	}
+
+	public onCreated(): void {
+		super.onCreated();
+		this.events.click = () => {
+			if (this.menuName) {
+				const menu: Menu = Metadata.getInstance(this.menuName);
+				if (menu) menu.toggleMenu();
+			}
+		};
+	}
+}

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

@@ -0,0 +1,105 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IMenuGroup, IMenuItem } from './interfaces';
+import { Menu } from './menu';
+
+/**
+ * Base class for MenuGroup component.
+ */
+export class MenuGroup extends ComponentRender implements IMenuGroup {
+	/**
+	 * item label
+	 */
+	public label = '';
+
+	/**
+	 * Item icon
+	 */
+	public icon = '';
+
+	/**
+	 * Items grouped
+	 */
+	public items: IMenuItem[] = [];
+
+	/**
+	 * Group state
+	 */
+	public opened: boolean | string = false;
+
+	/**
+	 * Menu that contains the item
+	 */
+	public parentMenu?: Menu;
+
+	/**
+	 * Group that contains the item
+	 */
+	public parentGroup?: MenuGroup;
+
+	/**
+	 * Expansion icon
+	 */
+	public expandIcon = 'expand';
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Menu Group.
+	 * @param props Menu Group properties
+	 */
+	constructor(props: IMenuGroup) {
+		super(props);
+		this.label = this.getInitValue('label', props.label, this.label);
+		this.icon = this.getInitValue('icon', props.icon, this.icon);
+		this.items = props.items;
+		this.opened = this.getInitValue('opened', props.opened, this.opened);
+		this.parentMenu = <Menu>props.parentMenu;
+		this.parentGroup = <MenuGroup>props.parentGroup;
+		this.expandIcon = this.getInitValue('expandIcon', props.expandIcon, this.expandIcon);
+	}
+
+	/**
+	 * @returns item is selected or not
+	 */
+	public isSelected() {
+		return this.parentMenu ? this.parentMenu.isSelected(this) : false;
+	}
+
+	/**
+	 * Open group
+	 */
+	public open() {
+		this.opened = true;
+	}
+
+	/**
+	 * Close group
+	 */
+	public close() {
+		this.opened = false;
+	}
+
+	/**
+	 * Event triggered when this item is clicked
+	 */
+	public click(event?: Event) {
+		let preventDefault: boolean | void = false;
+		preventDefault = this.callEvent('click', {
+			event: event || new MouseEvent('click'),
+			component: this,
+		});
+		if (preventDefault) {
+			event?.preventDefault();
+		}
+		this.setFocus();
+	}
+
+	/**
+	 * Event triggered when this item is focus
+	 */
+	public focus(event: Event) {
+		this.callEvent('focus', { event, component: this });
+		if (this.parentMenu) {
+			this.parentMenu.currentItem = this;
+		}
+	}
+}

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

@@ -0,0 +1,84 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IMenuLink, IMenuLinkEvents } from './interfaces';
+import { Menu } from './menu';
+import { MenuGroup } from './menu-group';
+
+/**
+ * Base class for MenuLink component.
+ */
+export class MenuLink extends ComponentRender implements IMenuLink {
+	/**
+	 * Item label
+	 */
+	public label = '';
+
+	/**
+	 * Item events
+	 */
+	declare events: IMenuLinkEvents;
+
+	/**
+	 * Item icon
+	 */
+	public icon = '';
+
+	/**
+	 * Url to redirect
+	 */
+	public route = '';
+
+	/**
+	 * Menu that contains the item
+	 */
+	public parentMenu?: Menu;
+
+	/**
+	 * Group that contains the item
+	 */
+	public parentGroup?: MenuGroup;
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Menu Link.
+	 * @param props Menu Link properties
+	 */
+	constructor(props: IMenuLink) {
+		super(props);
+		this.label = this.getInitValue('label', props.label, this.label);
+		this.icon = this.getInitValue('icon', props.icon, this.icon);
+		this.route = this.getInitValue('route', props.route, this.route);
+		this.parentMenu = <Menu>props.parentMenu;
+		this.parentGroup = <MenuGroup>props.parentGroup;
+	}
+
+	/**
+	 * Event triggered when this item is clicked
+	 */
+	public click(event?: Event) {
+		let preventDefault: boolean | void = false;
+		preventDefault = this.callEvent('click', {
+			event: event || new MouseEvent('click'),
+			component: this,
+		});
+		if (preventDefault) {
+			event?.preventDefault();
+		}
+		this.setFocus();
+	}
+
+	/**
+	 * Event triggered when this item is focus
+	 */
+	public focus() {
+		if (this.parentMenu) {
+			this.parentMenu.currentItem = this;
+		}
+	}
+
+	/**
+	 * @returns item is selected or not
+	 */
+	public isSelected() {
+		return this.parentMenu ? this.parentMenu.isSelected(this) : false;
+	}
+}

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

@@ -0,0 +1,7 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IMenuSeparator } from './interfaces';
+
+/**
+ * Base class for MenuSeparator component.
+ */
+export class MenuSeparator extends ComponentRender implements IMenuSeparator {}

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

@@ -0,0 +1,433 @@
+import { Accessor, Config, I18n, Loader, Metadata, Utils } from '@zeedhi/core';
+import { ComponentRender } from '../zd-component/component-render';
+import { IComponentRender } from '../zd-component/interfaces';
+import { IMenu, IMenuItem } from './interfaces';
+import { MenuGroup } from './menu-group';
+
+/**
+ * Base class for Menu component.
+ */
+export class Menu extends ComponentRender implements IMenu {
+	/**
+	 * Defines if the menu is an application menu
+	 */
+	public app: boolean | string = false;
+
+	/**
+	 * Defines if the menu must be rendered inside an absolute div
+	 */
+	public absolute: boolean | string = false;
+
+	/**
+	 * Defines if the menu should rests under the application toolbar
+	 */
+	public clipped: boolean | string = false;
+
+	/**
+	 * Applies position: fixed to the menu
+	 */
+	public fixed: boolean | string = false;
+
+	/**
+	 * Defines if the menu should have a visible container
+	 */
+	public floating: boolean | string = false;
+
+	/**
+	 * Defines if the menu should stay visible regardless of screen size
+	 */
+	public permanent: boolean | string = false;
+
+	/**
+	 * Create the menu with smaller items.
+	 */
+	public dense: boolean | string = true;
+
+	/**
+	 * Create the menu with condensed width. Only icons and no label.
+	 */
+	public mini: boolean | string = false;
+
+	/**
+	 * Defines the width of the menu when in mini state
+	 */
+	public miniWidth: number | string = 58;
+
+	/**
+	 * Defines if the menu is mini
+	 */
+	public miniState = false;
+
+	/**
+	 * Defines if the menu is temporary. Temporary menu sits over above the application and uses a overlay div.
+	 */
+	public temporary: boolean | string = false;
+
+	/**
+	 * Array of menu items
+	 */
+	private menuItems: IMenuItem[] = [];
+
+	/**
+	 * Defines if the close event will turn menu to mini
+	 */
+	public closeToMini: boolean | string = true;
+
+	/**
+	 * Defines if the search is shown
+	 */
+	public showSearch: boolean | string = false;
+
+	/**
+	 * Defines if items are local
+	 */
+	public isLocal: boolean | string = false;
+
+	/**
+	 * Defines if menu is opened
+	 */
+	public drawer: boolean;
+
+	/**
+	 * Initial opened prop value
+	 */
+	public openedInitialValue?: boolean;
+
+	/**
+	 * Defines if the mouse is over the menu
+	 */
+	public mouseOver = false;
+
+	/**
+	 * Defines the menu width in pixels
+	 */
+	public width: number | string = 256;
+
+	/**
+	 * Defines the mobile breakpoint in pixels
+	 */
+	public mobileBreakpoint: number | string = 600;
+
+	/**
+	 * Array of components to be rendered on the top part of the menu
+	 */
+	public topSlot: IComponentRender[] = [];
+
+	/**
+	 * Object to store all the routes
+	 */
+	private routes: any = {};
+
+	/**
+	 * Selected path
+	 */
+	private selectedPath = '';
+
+	/**
+	 * Array of selected items
+	 */
+	private selectedItems: IMenuItem[] = [];
+
+	/**
+	 * Defines the url to get menu items
+	 */
+	private menuItemsUrl = '';
+
+	private openingMenuTimeout!: NodeJS.Timeout;
+
+	/** Control toolip for overflown items */
+	public showTooltip = false;
+
+	/** Toolip text for overflown items */
+	public tooltipText = '';
+
+	/** Toolip anchor */
+	public tooltipAnchor?: HTMLElement;
+
+	/** Toolip content props */
+	public tooltipContentProps?: any = {};
+
+	/** Filtered menu items */
+	private filteredMenuItems: IMenuItem[] = [];
+
+	/** Search value */
+	private searchValue = '';
+
+	/** Store the current item focused */
+	public currentItem: IMenuItem | null = null;
+
+	public cache?: boolean = false;
+
+	public disableRouteWatcher?: boolean = false;
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Menu.
+	 * @param props Menu properties
+	 */
+	constructor(props: IMenu) {
+		super(props);
+		this.app = this.getInitValue('app', props.app, this.app);
+		this.absolute = this.getInitValue('absolute', props.absolute, this.absolute);
+		this.clipped = this.getInitValue('clipped', props.clipped, this.clipped);
+		this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
+		this.floating = this.getInitValue('floating', props.floating, this.floating);
+		this.dense = this.getInitValue('dense', props.dense, this.dense);
+		this.mini = this.getInitValue('mini', props.mini, this.mini);
+		this.miniState = this.getInitValue('miniState', props.miniState, this.miniState);
+		this.miniWidth = this.getInitValue('miniWidth', props.miniWidth, this.miniWidth);
+		this.temporary = this.getInitValue('temporary', props.temporary, this.temporary);
+		this.menuItems = props.items || this.menuItems;
+		if (this.menuItems.length) this.saveLinkRoutes(this.menuItems);
+		this.menuItemsUrl = this.getInitValue('itemsUrl', props.itemsUrl, this.menuItemsUrl);
+		this.isLocal = this.getInitValue('isLocal', props.isLocal, this.isLocal);
+		this.closeToMini = this.getInitValue('closeToMini', props.closeToMini, this.closeToMini);
+		this.showSearch = this.getInitValue('showSearch', props.showSearch, this.showSearch);
+		this.width = this.getInitValue('width', props.width, this.width);
+		this.cache = this.getInitValue('cache', props.cache, this.cache);
+		this.disableRouteWatcher = this.getInitValue(
+			'disableRouteWatcher',
+			props.disableRouteWatcher,
+			this.disableRouteWatcher,
+		);
+		this.permanent = this.getInitValue('permanent', props.permanent, this.permanent);
+		this.mobileBreakpoint = Config.mobileBreakpoint || 600;
+		this.drawer = window.innerWidth > Number(this.mobileBreakpoint);
+		this.openedInitialValue = this.getInitValue('opened', props.opened, this.opened);
+		if (this.openedInitialValue !== undefined) {
+			this.opened = this.openedInitialValue;
+		}
+		this.topSlot = props.topSlot || this.topSlot;
+	}
+
+	/**
+	 * Defines the url to get menu items
+	 */
+	get itemsUrl() {
+		return this.menuItemsUrl;
+	}
+
+	set itemsUrl(url: string) {
+		if (this.menuItemsUrl !== url) {
+			this.menuItemsUrl = url;
+
+			if (url) {
+				this.loadMetadata(url);
+			} else {
+				this.items = [];
+				this.routes = {};
+			}
+		}
+	}
+
+	/**
+	 * Menu items
+	 */
+	get items() {
+		return this.searchValue ? this.filteredMenuItems : this.menuItems;
+	}
+
+	set items(items: IMenuItem[]) {
+		this.menuItems = items;
+		this.saveLinkRoutes(items);
+		if (this.selectedPath && this.routes[this.selectedPath]) {
+			this.selectItem(this.routes[this.selectedPath]);
+		}
+	}
+
+	public get opened() {
+		return this.drawer;
+	}
+
+	public set opened(openedValue: boolean) {
+		this.drawer = openedValue;
+	}
+
+	/**
+	 * Get menu items from a given url
+	 * @param element Element mounted reference
+	 */
+	public onMounted(element: any) {
+		super.onMounted(element);
+		if (this.itemsUrl) {
+			this.loadMetadata(this.itemsUrl);
+		}
+	}
+
+	/**
+	 * Load the menu metadata
+	 * @param url url of the json file
+	 */
+	public async loadMetadata(url: string) {
+		this.items = (await Metadata.get(url, Boolean(this.isLocal), this.cache)) as IMenuItem[];
+	}
+
+	/**
+	 * Save all Link routes parent groups
+	 */
+	private saveLinkRoutes(items: IMenuItem[], parents: IMenuItem[] = []) {
+		items.forEach((item: IMenuItem) => {
+			if (item.component === 'ZdMenuLink') {
+				this.routes[item.route] = parents.concat([item]);
+			} else if (item.component === 'ZdMenuGroup') {
+				this.saveLinkRoutes(item.items, parents.concat([item]));
+			}
+		});
+	}
+
+	/**
+	 * Toggle menu
+	 */
+	public toggleMenu() {
+		const isMobile = window.innerWidth <= Number(this.mobileBreakpoint);
+		if (this.closeToMini && !isMobile) {
+			this.miniState = !this.miniState;
+			if (this.miniState) {
+				this.closeAllMenus();
+			} else {
+				this.openSelectedTree();
+			}
+			this.opened = true;
+		} else {
+			this.opened = !this.opened;
+		}
+	}
+
+	/**
+	 * Close all menu
+	 */
+	public closeAllMenus() {
+		this.items.forEach((item) => {
+			if (item.component === 'ZdMenuGroup') {
+				item.opened = false;
+				try {
+					Metadata.getInstance<MenuGroup>(item.name).close();
+				} catch (_error) {
+					// instance not yet created
+				}
+			}
+		});
+	}
+
+	/**
+	 * Saves the selected path
+	 * @param path Path name
+	 */
+	public selectPath(path: string) {
+		this.selectedPath = path;
+		if (this.routes[path]) {
+			this.selectItem(this.routes[path]);
+		}
+	}
+
+	/**
+	 * Select an item
+	 * @param item Menu item
+	 */
+	public selectItem(items: IMenuItem[]) {
+		this.selectedItems = items;
+		this.openSelectedTree();
+	}
+
+	/**
+	 * @param item Menu item
+	 * @returns Item is selected or not
+	 */
+	public isSelected(item: IMenuItem) {
+		return this.selectedItems.filter((selected) => selected.name === item.name).length > 0;
+	}
+
+	public menuMouseEnter() {
+		if (this.miniState) {
+			this.openingMenuTimeout = setTimeout(() => {
+				this.mouseOver = true;
+				this.openSelectedTree();
+			}, 200);
+		}
+	}
+
+	/**
+	 * Open all selected items
+	 */
+	public openSelectedTree() {
+		this.selectedItems.forEach((item) => {
+			if (item.component === 'ZdMenuGroup') {
+				item.opened = true;
+				try {
+					Metadata.getInstance<MenuGroup>(item.name).open();
+				} catch (_error) {
+					// instance not yet created
+				}
+			}
+		});
+	}
+
+	public menuMouseLeave() {
+		this.mouseOver = false;
+		this.showTooltip = false;
+		clearTimeout(this.openingMenuTimeout);
+		if (this.miniState) {
+			this.closeAllMenus();
+		}
+	}
+
+	/**
+	 * Responds to Url changes
+	 */
+	public urlChanged(current: any) {
+		this.selectPath(current.path);
+	}
+
+	get search() {
+		return this.searchValue;
+	}
+
+	set search(value: string) {
+		this.searchValue = value;
+		this.doSearch();
+	}
+
+	public clearSearch() {
+		this.search = '';
+	}
+
+	/**
+	 * Search inside menu items
+	 */
+	public doSearch() {
+		const items: IMenuItem[] = this.menuItems;
+
+		this.filteredMenuItems = [];
+
+		if (this.searchValue) {
+			this.searchItems(items);
+		}
+	}
+
+	private getAccessorValue(accessorName: string) {
+		const [controller, accessor] = Accessor.getAccessor(accessorName);
+		const instance = Loader.getInstance(controller);
+
+		return instance[accessor];
+	}
+
+	private isItemVisible(item: IMenuItem) {
+		if (typeof item.isVisible === 'string') {
+			return this.getAccessorValue(item.isVisible);
+		}
+
+		return item.isVisible !== false;
+	}
+
+	private searchItems(items: IMenuItem[]) {
+		items.forEach((item) => {
+			if (this.isItemVisible(item)) {
+				if (item.component === 'ZdMenuGroup') {
+					this.searchItems(item.items);
+				} else if (Utils.normalize(I18n.translate(item.label)).indexOf(Utils.normalize(this.searchValue)) !== -1) {
+					this.filteredMenuItems.push(item);
+				}
+			}
+		});
+	}
+}

package/src/components/zd-modal/interfaces.ts

@@ -0,0 +1,39 @@
+import { IEventParam } from '@zeedhi/core';
+import { IButton } from '../zd-button/interfaces';
+import { EventDef, IComponent, IComponentEvents } from '../zd-component/interfaces';
+import { Modal } from './modal';
+
+export type IModalEvent = IEventParam<Modal>;
+export interface IModalEvents<T = IEventParam<any>> extends IComponentEvents<T> {
+	onShow?: EventDef<T>;
+	onHide?: EventDef<T>;
+}
+
+export interface IModalGrid {
+	cols?: number | string;
+	xs?: number | string;
+	sm?: number | string;
+	md?: number | string;
+	lg?: number | string;
+	xl?: number | string;
+	'offset-xs'?: number | string;
+	'offset-sm'?: number | string;
+	'offset-md'?: number | string;
+	'offset-lg'?: number | string;
+	'offset-xl'?: number | string;
+}
+
+export interface IModal extends IComponent {
+	title?: string;
+	fullscreen?: boolean;
+	grid?: IModalGrid;
+	persistent?: boolean;
+	draggable?: boolean;
+	dragHandle?: string;
+	escKeydownStop?: boolean;
+	events?: IModalEvents;
+}
+
+export interface IModalCloseButton extends IButton {
+	modalName: string;
+}