@zeedhi/common 1.112.0 → 3.0.0

package/src/components/zd-list/list-item.ts

@@ -0,0 +1,71 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IComponent } from '../zd-component/interfaces';
+import { IListItem } from './interfaces';
+
+/**
+ * Base class for ListItem component.
+ */
+export class ListItem extends ComponentRender implements IListItem {
+	/**
+	 * Append an icon inside the item.
+	 */
+	public appendIcon?: string;
+
+	/**
+	 * Removes the ability to click or target the item.
+	 */
+	public disabled = false;
+
+	/**
+	 * Prepend a component inside the item.
+	 */
+	public leftField?: IComponent;
+
+	/**
+	 * Prepend an icon inside the item.
+	 */
+	public prependIcon?: string;
+
+	/**
+	 * Append a component inside the item.
+	 */
+	public rightField?: IComponent;
+
+	/**
+	 * Apply the ripple effect to show action from a user.
+	 */
+	public ripple = true;
+
+	/**
+	 * Defines the item subtitle.
+	 */
+	public subtitle?: string;
+
+	/**
+	 * Increases the item height to better support more lines of text.
+	 */
+	public lines?: false | 'one' | 'two' | 'three' = 'one';
+
+	/**
+	 * Defines the item title.
+	 */
+	public title?: string;
+
+	public dense = false;
+
+	constructor(props: IListItem) {
+		super(props);
+		this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, this.appendIcon);
+		this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
+		this.leftField = props.leftField || this.leftField;
+		this.prependIcon = this.getInitValue('prependIcon', props.prependIcon, this.prependIcon);
+		this.rightField = props.rightField || this.rightField;
+		this.ripple = this.getInitValue('ripple', props.ripple, this.ripple);
+		this.subtitle = this.getInitValue('subtitle', props.subtitle, this.subtitle);
+		this.lines = this.getInitValue('lines', props.lines, this.lines);
+		this.title = this.getInitValue('title', props.title, this.title);
+		this.dense = this.getInitValue('dense', props.dense, this.dense);
+
+		this.createAccessors();
+	}
+}

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

@@ -0,0 +1,125 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IList, IListItem } from './interfaces';
+import { ItemNotFoundError } from './item-not-found';
+
+/**
+ * Base class for List component.
+ */
+export class List extends ComponentRender implements IList {
+	/**
+	 * Applies specified color to the entire list.
+	 * It can be the name of material or css color in hexa or rgba.
+	 */
+	public color?: string;
+
+	/**
+	 * Create the list with smaller items.
+	 */
+	public dense = false;
+
+	/**
+	 * Removes the ability to click or target the list.
+	 */
+	public disabled = false;
+
+	/**
+	 * Render list with dividers between the items.
+	 */
+	public divided = false;
+
+	/**
+	 * List items structure.
+	 */
+	public items!: IListItem[];
+
+	/**
+	 * Increases the height of all the list items to better support more lines of text.
+	 */
+	public lines: false | 'one' | 'two' | 'three' = 'one';
+
+	/**
+	 * Designates an elevation applied to the list between 0 and 24.
+	 */
+	public elevation: number | string = 0;
+
+	/**
+	 * Will only collapse when explicitly closed.
+	 */
+	public openStrategy: 'single' | 'multiple' | 'list' = 'single';
+
+	/**
+	 * Defines the component height. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public height: string | number = 'auto';
+
+	/**
+	 * Defines the component min height. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public minHeight: string | number = 'auto';
+
+	/**
+	 * Defines the component max height. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public maxHeight: string | number = 'none';
+
+	/**
+	 * Set component height to fill all space available
+	 */
+	public fillHeight = false;
+
+	/**
+	 * Defines the component width. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public width: string | number = '100%';
+
+	/**
+	 * Defines the component min width. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public minWidth: string | number = 'auto';
+
+	/**
+	 * Defines the component max height. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public maxWidth: string | number = 'none';
+
+	constructor(props: IList) {
+		super(props);
+		this.theme = this.getInitValue('theme', props.theme, this.theme);
+		this.dense = this.getInitValue('dense', props.dense, this.dense);
+		this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
+		this.divided = this.getInitValue('divided', props.divided, this.divided);
+		this.items = this.getInitValue('items', props.items, this.items);
+		this.lines = this.getInitValue('lines', props.lines, this.lines);
+		this.color = this.getInitValue('color', props.color, this.color);
+		this.elevation = this.getInitValue('elevation', props.elevation, this.elevation);
+		this.openStrategy = this.getInitValue('openStrategy', props.openStrategy, this.openStrategy);
+		this.height = this.getInitValue('height', props.height, this.height);
+		this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+		this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+		this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+		this.width = this.getInitValue('width', props.width, this.width);
+		this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+		this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
+
+		this.createAccessors();
+	}
+
+	/**
+	 * Get item by name
+	 * @param name name property of the item
+	 * @throws ItemNotFoundError
+	 */
+	public getItem(name: string) {
+		const item = this.items.find((listItem: IListItem) => listItem.name === name);
+		if (item) {
+			return item;
+		}
+		throw new ItemNotFoundError(name, this.name);
+	}
+}

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

@@ -0,0 +1,9 @@
+import { IComponent } from '../zd-component/interfaces';
+
+export interface ILoading extends IComponent {
+	text?: string;
+	defaultText?: string;
+	zIndex?: number | string;
+	// Zeedhi 3.0
+	opacity?: number | string;
+}

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

@@ -0,0 +1,44 @@
+import { Component } from '../zd-component/component';
+import { ILoading } from './interfaces';
+
+export class Loading extends Component implements ILoading {
+	/**
+	 * text to show in Loader Overlay
+	 */
+	public text?: string = 'Loading';
+
+	public defaultText?: string;
+
+	public opacity?: number | string = 0.5;
+
+	public isVisible = false;
+
+	public zIndex: number | string = 1999;
+
+	/*
+	 * Creates a new Loading Overlay
+	 * @param props Modal structure
+	 */
+	constructor(props: ILoading) {
+		super(props);
+		this.text = this.getInitValue('text', props.text, this.text);
+		this.zIndex = this.getInitValue('zIndex', props.zIndex, this.zIndex);
+		this.defaultText = this.text;
+	}
+
+	/**
+	 * Displays overlay
+	 */
+	public show(text?: string) {
+		if (text) this.text = text;
+		else this.text = this.defaultText;
+		this.isVisible = true;
+	}
+
+	/**
+	 * Close overlay
+	 */
+	public hide() {
+		this.isVisible = false;
+	}
+}

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

@@ -0,0 +1,28 @@
+import { IDictionary, IEventParam } from '@zeedhi/core';
+import { IButton } from '../zd-button/interfaces';
+import { IComponentRender } from '../zd-component/interfaces';
+import { Login } from './login';
+import { LoginButton } from './login-button';
+
+export type ILoginEvent = IEventParam<Login>;
+export type ILoginButtonEvent = IEventParam<LoginButton>;
+
+export interface ILogin extends IComponentRender {
+	backgroundStyle?: string;
+	bottomLink?: IComponentRender[];
+	color?: string;
+	cardWidth?: string | number;
+	layout?: string;
+	logo?: string;
+	logoMessage?: string;
+	poweredByImage?: string;
+	poweredByImageCard?: string;
+	socialLogin?: IComponentRender[];
+	flatForm?: boolean;
+}
+
+export interface ILoginButton extends IButton {
+	authUrl?: string;
+	redirectUrl?: string;
+	requestParams?: IDictionary<any>;
+}

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

@@ -0,0 +1,112 @@
+import { Config, Cookie, Http, IDictionary, Router } from '@zeedhi/core';
+import { Button } from '../zd-button/button';
+import { Form } from '../zd-form/form';
+import { ILoginButton } from './interfaces';
+
+/**
+ * The Login button component <code>zd-login-button</code> is used to handle login.
+ */
+export class LoginButton extends Button implements ILoginButton {
+	public parent?: Form = undefined;
+
+	/**
+	 * Endpoint used to authentication
+	 */
+	public authUrl = '';
+
+	/**
+	 * Url to redirect
+	 */
+	public redirectUrl: string = Config.homeUrl;
+
+	/**
+	 * Extra params to be added on login request
+	 */
+	public requestParams: IDictionary<any> = {};
+
+	/* istanbul ignore next */
+	/**
+	 * Create a new LoginButton
+	 * @param props LoginButton definition
+	 */
+	constructor(props: ILoginButton) {
+		super(props);
+		this.authUrl = Config.env?.authUrl || props.authUrl;
+		this.redirectUrl = this.getInitValue('redirectUrl', props.redirectUrl, this.redirectUrl);
+		this.requestParams = this.getInitValue('requestParams', props.requestParams, this.requestParams);
+		this.createAccessors();
+	}
+
+	/**
+	 * Click event
+	 */
+	public async click(event: Event, element: any) {
+		try {
+			const test = await this.parent?.validate();
+			if (test?.valid && this.parent) {
+				const parentValue = this.parent.value;
+				const response = await this.sendRequest(parentValue);
+				this.handleLoginSuccess(event, element, response);
+			}
+		} catch (error) {
+			this.handleLoginFail(event, element, error);
+		}
+	}
+
+	/**
+	 * Send request to the configured endpoint
+	 */
+	private async sendRequest(parentValue: IDictionary<any>) {
+		const requestHeader: any = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
+		return Http.post(this.authUrl, this.getQueryString(parentValue), requestHeader);
+	}
+
+	/**
+	 * Returns a parsed query string
+	 * @param args Params to the query string
+	 */
+	private getQueryString(args: IDictionary<any>): string {
+		const allParams = { ...this.requestParams, ...args };
+		const params = new URLSearchParams();
+		Object.keys(allParams).forEach((key) => {
+			params.set(key, allParams[key]);
+		});
+		return params.toString();
+	}
+
+	/**
+	 * Redirect the app to the configured url
+	 * @param args Response
+	 */
+	private handleLoginSuccess(event: Event, element: any, response: any) {
+		if (response.status === 200) {
+			let preventDefault: boolean | void = false;
+			preventDefault = this.callEvent('loginSuccess', {
+				element,
+				response,
+				event,
+				component: this,
+			});
+
+			if (!preventDefault) {
+				Cookie.setCookie('token', response.data.token);
+				Router.replace(this.redirectUrl);
+			}
+		} else {
+			this.handleLoginFail(event, element, response);
+		}
+	}
+
+	/**
+	 * Emit the LoginFail event
+	 * @param args Response
+	 */
+	private handleLoginFail(event: Event, element: any, error: any) {
+		this.callEvent('loginFail', {
+			element,
+			error,
+			event,
+			component: this,
+		});
+	}
+}

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

@@ -0,0 +1,85 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IComponentRender } from '../zd-component/interfaces';
+import { ILogin } from './interfaces';
+
+/**
+ * Base class for Login component.
+ */
+export class Login extends ComponentRender implements ILogin {
+	/**
+	 * Value set int the css property background.
+	 */
+	public backgroundStyle = '';
+
+	/**
+	 * An area in the bottom of the card to display a link.
+	 */
+	public bottomLink: IComponentRender[] = [];
+
+	/**
+	 * Set card width.
+	 */
+	public cardWidth: string | number = '33%';
+
+	/**
+	 * Applies specified color to the control.
+	 * It can be the name of material or css color in hexa.
+	 */
+	public color = '';
+
+	/**
+	 * Card position orientation.
+	 */
+	public layout = 'center';
+
+	/**
+	 * Logo displayed in the top of the card.
+	 */
+	public logo = '';
+
+	/**
+	 * Text displayed under the logo.
+	 */
+	public logoMessage = '';
+
+	/**
+	 * Image displayed out of the card.
+	 */
+	public poweredByImage = '';
+
+	/**
+	 * Image displayed in the card.
+	 */
+	public poweredByImageCard = '';
+
+	/**
+	 * If form is flat
+	 */
+	public flatForm = false;
+
+	/**
+	 * Buttons displayed in the bottom of the card.
+	 */
+	public socialLogin: IComponentRender[] = [];
+
+	/* istanbul ignore next */
+	constructor(props: ILogin) {
+		super(props);
+		this.backgroundStyle = this.getInitValue('backgroundStyle', props.backgroundStyle, this.backgroundStyle);
+		this.bottomLink = props.bottomLink || this.bottomLink;
+		this.cardWidth = this.getInitValue('cardWidth', props.cardWidth, this.cardWidth);
+		this.color = this.getInitValue('color', props.color, this.color);
+		this.layout = this.getInitValue('layout', props.layout, this.layout);
+		this.logo = this.getInitValue('logo', props.logo, this.logo);
+		this.logoMessage = this.getInitValue('logoMessage', props.logoMessage, this.logoMessage);
+		this.poweredByImage = this.getInitValue('poweredByImage', props.poweredByImage, this.poweredByImage);
+		this.poweredByImageCard = this.getInitValue(
+			'poweredByImageCard',
+			props.poweredByImageCard,
+			this.poweredByImageCard,
+		);
+		this.flatForm = this.getInitValue('flatForm', props.flatForm, this.flatForm);
+		this.socialLogin = props.socialLogin || this.socialLogin;
+		this.createAccessors();
+	}
+}

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

@@ -0,0 +1,6 @@
+import { IComponentRender } from '../zd-component/interfaces';
+
+export interface IMain extends IComponentRender {
+	scrollable?: boolean;
+	tag?: string;
+}

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

@@ -0,0 +1,16 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IMain } from './interfaces';
+
+export class Main extends ComponentRender implements IMain {
+	public scrollable = false;
+
+	public tag?: string = 'main';
+
+	constructor(props: IMain) {
+		super(props);
+
+		this.scrollable = this.getInitValue('scrollable', props.scrollable, this.scrollable);
+
+		this.tag = this.getInitValue('tag', props.tag, this.tag);
+	}
+}

package/src/components/zd-master-detail/detail-not-found.ts

@@ -0,0 +1,11 @@
+import { ZeedhiCommonError } from '../../error/zeedhi-error';
+
+/**
+ * Detail not found error
+ */
+export class DetailNotFoundError extends ZeedhiCommonError {
+	constructor(name: string) {
+		super(`Detail component '${name}' not found.`);
+		this.name = 'DetailNotFoundError';
+	}
+}

package/src/components/zd-master-detail/interfaces.ts

@@ -0,0 +1,11 @@
+import { IDictionary } from '@zeedhi/core';
+import { IComponentRender } from '../zd-component/interfaces';
+
+export interface IMasterDetail extends IComponentRender {
+	config?: IDictionary<any>;
+	lazyRelate?: boolean;
+	height?: number | string;
+	maxHeight?: number | string;
+	minHeight?: number | string;
+	fillHeight?: boolean;
+}

package/src/components/zd-master-detail/master-detail.ts

@@ -0,0 +1,82 @@
+import { Datasource, IDictionary, InstanceNotFoundError, Metadata } from '@zeedhi/core';
+import { Component } from '../zd-component/component';
+import { ComponentRender } from '../zd-component/component-render';
+import { DetailNotFoundError } from './detail-not-found';
+import { IMasterDetail } from './interfaces';
+import { MasterNotFoundError } from './master-not-found';
+
+/**
+ * Base class for Master Detail component.
+ */
+export class MasterDetail extends ComponentRender implements IMasterDetail {
+	public config: IDictionary<any> = {};
+	public lazyRelate = false;
+	public height: string | number = 'auto';
+	public minHeight: string | number = 'auto';
+	public maxHeight: string | number = 'none';
+	public fillHeight = false;
+
+	constructor(props: IMasterDetail) {
+		super(props);
+		this.config = this.getInitValue('config', props.config, this.config);
+		this.lazyRelate = this.getInitValue('lazyRelate', props.lazyRelate, this.lazyRelate);
+		this.height = this.getInitValue('height', props.height, this.height);
+		this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+		this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+		this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+	}
+
+	private createRelationship(master: any, details: IDictionary<any>[] = []) {
+		if (master.datasource && details.length) {
+			const masterDatasource = master.datasource as Datasource;
+			const { onChangeCurrentRow } = masterDatasource.events;
+
+			masterDatasource.events.onChangeCurrentRow = ({ component }: any) => {
+				if (onChangeCurrentRow) {
+					onChangeCurrentRow({ component });
+				}
+
+				const key = masterDatasource.currentRow[masterDatasource.uniqueKey];
+
+				details.forEach((detail: any) => {
+					try {
+						const detailComponent: any = Metadata.getInstance(detail.name);
+						if (!detailComponent.datasource) {
+							detailComponent.value = masterDatasource.currentRow;
+						} else if (key) {
+							detailComponent.datasource.addFilter(detail.column, key);
+						} else {
+							detailComponent.datasource.data = [];
+						}
+
+						if (detail.details) {
+							this.createRelationship(detailComponent, detail.details);
+						}
+					} catch (e) {
+						if (e instanceof InstanceNotFoundError) {
+							throw new DetailNotFoundError(detail.name);
+						}
+						throw e;
+					}
+				});
+			};
+		}
+	}
+
+	public createRelationships() {
+		try {
+			const masterComponent: any = Metadata.getInstance<Component>(this.config.name);
+			this.createRelationship(masterComponent, this.config.details);
+		} catch (e) {
+			if (e instanceof InstanceNotFoundError) {
+				throw new MasterNotFoundError(this.config.name);
+			}
+			throw e;
+		}
+	}
+
+	public onMounted(element: any) {
+		super.onMounted(element);
+		if (!this.lazyRelate) this.createRelationships();
+	}
+}

package/src/components/zd-master-detail/master-not-found.ts

@@ -0,0 +1,11 @@
+import { ZeedhiCommonError } from '../../error/zeedhi-error';
+
+/**
+ * Master not found error
+ */
+export class MasterNotFoundError extends ZeedhiCommonError {
+	constructor(name: string) {
+		super(`Master component '${name}' not found.`);
+		this.name = 'MasterNotFoundError';
+	}
+}

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

@@ -0,0 +1,76 @@
+import { IEventParam } from '@zeedhi/core';
+import { IButton } from '../zd-button/interfaces';
+import { IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { MenuLink } from './menu-link';
+
+export type IMenuLinkEvent = IEventParam<MenuLink>;
+export type IMenuLinkEvents = IComponentEvents<IMenuLinkEvent>;
+
+/**
+ * Interface for menu component
+ */
+export interface IMenu extends IComponentRender {
+	app?: boolean | string;
+	absolute?: boolean | string;
+	clipped?: boolean | string;
+	dense?: boolean | string;
+	fixed?: boolean | string;
+	floating?: boolean | string;
+	mini?: boolean | string;
+	miniWidth?: number | string;
+	temporary?: boolean | string;
+	items?: IMenuItem[];
+	itemsUrl?: string;
+	isLocal?: boolean | string;
+	closeToMini?: boolean | string;
+	showSearch?: boolean | string;
+	opened?: boolean | string;
+	topSlot?: IComponentRender[];
+	width?: number | string;
+	mobileBreakpoint?: number | string;
+	cache?: boolean;
+	disableRouteWatcher?: boolean;
+	permanent?: boolean | string;
+}
+
+/**
+ * Interface for menu itens
+ */
+export interface IMenuItem extends IComponentRender {
+	parentMenu?: IMenu;
+	parentGroup?: IMenuGroup;
+}
+
+export interface IInteractiveMenuItem {
+	label: string;
+	icon?: string;
+}
+
+/**
+ * Interface for menu link
+ */
+export interface IMenuLink extends IMenuItem, IInteractiveMenuItem {
+	route: string;
+	events?: IMenuLinkEvents;
+}
+
+/**
+ * Interface for menu group
+ */
+export interface IMenuGroup extends IMenuItem, IInteractiveMenuItem {
+	items: IMenuItem[];
+	opened?: boolean | string;
+	expandIcon?: string;
+}
+
+/**
+ * Interface for menu separator
+ */
+export type IMenuSeparator = IMenuItem;
+
+/**
+ * Interface for menu button
+ */
+export interface IMenuButton extends IButton {
+	menuName: string;
+}