@zeedhi/common 1.111.1 → 3.0.0

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

@@ -0,0 +1,139 @@
+import { IButton } from '../zd-button/interfaces';
+import { Component } from '../zd-component/component';
+import { IAlert } from './interfaces';
+
+/**
+ * Base class for Alert component.
+ */
+export class Alert extends Component implements IAlert {
+	/**
+	 * Align the component towards the bottom
+	 */
+	public bottom = true;
+
+	/**
+	 * Slot to display flat buttons
+	 */
+	public buttonsSlot: IButton[] = [];
+
+	/**
+	 * Applies specified color to the control.
+	 * It can be the name of material color or an hexadecimal color
+	 */
+	public color = '';
+
+	/**
+	 * Applies specified color to the dismiss button.
+	 * It can be the name of material color or an hexadecimal color
+	 */
+	public dismissColor = '';
+
+	/**
+	 * Align the component towards the left
+	 */
+	public left = true;
+
+	/**
+	 * Creates a better spacing for multiple content lines
+	 */
+	public multiLine = false;
+
+	/**
+	 * Align the component towards the right
+	 */
+	public right = false;
+
+	/**
+	 * Controls dismiss button visibility
+	 */
+	public showDismiss = false;
+
+	/**
+	 * Time (in milliseconds) to wait until alert is automatically hidden.
+	 * Use 0 to keep open indefinitely.
+	 */
+	public timeout = 5000;
+
+	/**
+	 * Text displayed on alert
+	 */
+	public text = '';
+
+	/**
+	 * Align the content towards the top
+	 */
+	public top = false;
+
+	/**
+	 * Stacks alert content and actions vertically
+	 */
+	public vertical = false;
+
+	public id = 0;
+
+	protected defaultValues = {
+		name: this.name,
+		color: this.color,
+		text: this.text,
+		timeout: this.timeout,
+		top: this.top,
+		right: this.right,
+		bottom: this.bottom,
+		left: this.left,
+		vertical: this.vertical,
+		multiLine: this.multiLine,
+		showDismiss: this.showDismiss,
+		dismissColor: this.dismissColor,
+		buttonsSlot: this.buttonsSlot,
+		id: this.id,
+	};
+
+	/**
+	 * Creates a new Alert
+	 * @param props Alert structure
+	 */
+	constructor(props: IAlert) {
+		super(props);
+		this.assignAlertProperties(props);
+	}
+
+	/**
+	 * Assign all alert properties
+	 * @param alert Alert structure
+	 */
+	public assignAlertProperties(alert: IAlert) {
+		this.name = this.getInitValue('name', alert.name, this.defaultValues.name);
+		this.color = this.getInitValue('color', alert.color, this.defaultValues.color);
+		this.text = this.getInitValue('text', alert.text, this.defaultValues.text);
+		this.timeout = this.getInitValue('timeout', alert.timeout, this.defaultValues.timeout);
+		this.top = this.getInitValue('top', alert.top, this.defaultValues.top);
+		this.right = this.getInitValue('right', alert.right, this.defaultValues.right);
+		this.bottom = this.getInitValue('bottom', alert.bottom, this.defaultValues.bottom);
+		this.left = this.getInitValue('left', alert.left, this.defaultValues.left);
+		this.vertical = this.getInitValue('vertical', alert.vertical, this.defaultValues.vertical);
+		this.multiLine = this.getInitValue('multiLine', alert.multiLine, this.defaultValues.multiLine);
+		this.showDismiss = this.getInitValue('showDismiss', alert.showDismiss, this.defaultValues.showDismiss);
+		this.dismissColor = this.getInitValue('dismissColor', alert.dismissColor, this.defaultValues.dismissColor);
+		this.buttonsSlot = alert.buttonsSlot || this.defaultValues.buttonsSlot;
+		this.id = alert.id || this.defaultValues.id;
+		this.isVisible = false;
+
+		// call createAccessors because this component's onCreated is not
+		// supposed to trigger
+		this.createAccessors();
+	}
+
+	/**
+	 * Displays alert
+	 */
+	public show() {
+		this.isVisible = true;
+	}
+
+	/**
+	 * Hides alert
+	 */
+	public hide() {
+		this.isVisible = false;
+	}
+}

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

@@ -0,0 +1,19 @@
+import { IButton } from '../zd-button/interfaces';
+import { IComponent } from '../zd-component/interfaces';
+
+export interface IAlert extends IComponent {
+	id?: number;
+	color?: string;
+	text?: string;
+	timeout?: number;
+	type?: string;
+	top?: boolean;
+	right?: boolean;
+	bottom?: boolean;
+	left?: boolean;
+	vertical?: boolean;
+	multiLine?: boolean;
+	showDismiss?: boolean;
+	dismissColor?: string;
+	buttonsSlot?: IButton[];
+}

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

@@ -0,0 +1,47 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IBadge, IBadgeEvents } from './interfaces';
+
+/**
+ * Base class for Badge component.
+ */
+export class Badge extends ComponentRender implements IBadge {
+	/**
+	 * Wrap a number to badge
+	 */
+	public badge = 0;
+
+	/**
+	 * Events registered to the badge
+	 */
+	public declare events: IBadgeEvents;
+
+	/**
+	 * Highlight information to a user or to just draw attention
+	 */
+	public showBadgeCounter = true;
+
+	/* istanbul ignore next */
+	/**
+	 * Create a new Badge
+	 * @param props Badge definition
+	 */
+	constructor(props: IBadge) {
+		super(props);
+		this.badge = this.getInitValue('badge', props.badge, this.badge);
+		this.showBadgeCounter = this.getInitValue('showBadgeCounter', props.showBadgeCounter, this.showBadgeCounter);
+		this.createAccessors();
+	}
+
+	/**
+	 * Returns a string with the badge counter
+	 */
+	public getBadgeText(): string {
+		if (!this.badge) {
+			return '0';
+		}
+		if (this.badge >= 100) {
+			return '99+';
+		}
+		return this.badge.toString();
+	}
+}

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

@@ -0,0 +1,12 @@
+import { IEventParam } from '@zeedhi/core';
+import { IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { Badge } from './badge';
+
+export type IBadgeEvent = IEventParam<Badge>;
+export type IBadgeEvents = IComponentEvents<IBadgeEvent>;
+
+export interface IBadge extends IComponentRender {
+	badge?: number;
+	events?: IBadgeEvents;
+	showBadgeCounter?: boolean;
+}

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

@@ -0,0 +1,47 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IBreadcrumbs, IBreadcrumbsItem } from './interfaces';
+
+/**
+ * Base class for Breadcrumbs component.
+ */
+export class Breadcrumbs extends ComponentRender implements IBreadcrumbs {
+	/**
+	 * Specifies the dividing string between items.
+	 */
+	public divider = '/';
+
+	/**
+	 * Array of objects for each breadcrumb.
+	 */
+	public items: IBreadcrumbsItem[] = [];
+
+	/**
+	 * Defines the divider icon name.
+	 */
+	public iconName = '';
+
+	/**
+	 * Increase the font-size of the breadcrumb item text to 16px.
+	 */
+	public large = false;
+
+	/**
+	 * Decrease the font-size of the breadcrumb item text to 12px.
+	 */
+	public small = false;
+
+	/* istanbul ignore next */
+	/**
+	 * Create a new Breadcrumbs
+	 * @param props Breadcrumbs definition
+	 */
+	constructor(props: IBreadcrumbs) {
+		super(props);
+		this.divider = this.getInitValue('divider', props.divider, this.divider);
+		this.items = this.getInitValue('items', props.items, this.items);
+		this.large = this.getInitValue('large', props.large, this.large);
+		this.iconName = this.getInitValue('iconName', props.iconName, this.iconName);
+		this.small = this.getInitValue('small', props.small, this.small);
+		this.createAccessors();
+	}
+}

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

@@ -0,0 +1,27 @@
+import { IComponentRender } from '../zd-component/interfaces';
+
+export interface IBreadcrumbs extends IComponentRender {
+	dark?: boolean;
+	divider?: string;
+	iconName?: string;
+	items?: IBreadcrumbsItem[];
+	large?: boolean;
+	light?: boolean;
+	small?: boolean;
+}
+
+export interface IBreadcrumbsItem {
+	activeClass?: string;
+	append?: boolean;
+	disabled?: boolean;
+	exact?: boolean;
+	exactActiveClass?: string;
+	href?: string | object;
+	link?: boolean;
+	replace?: boolean;
+	ripple?: boolean | object;
+	text?: string | number;
+	to?: string | object;
+	// Zeedhi 3
+	title?: string;
+}

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

@@ -0,0 +1,207 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IButton, IButtonEvents } from './interfaces';
+
+/**
+ * Base class for Button component.
+ */
+export class Button extends ComponentRender implements IButton {
+	// Applies position absolute to the button
+	public absolute = false;
+
+	// Expands the button to 100% of available space
+	public block = false;
+
+	/**
+	 * Aligns the button towards the bottom.
+	 * This should be used with the absolute or fixed props
+	 */
+	public bottom = false;
+
+	/**
+	 * Applies specified color to the control.
+	 * It can be the name of material or css color in hexa
+	 */
+	public color = 'primary';
+
+	// * Removes the ability to click or target the button
+	public disabled = false;
+
+	// Events registered to the button
+	public declare events: IButtonEvents;
+
+	// Designates the button as a floating-action-button
+	public fab = false;
+
+	// Applies position fixed to the button
+	public fixed = false;
+
+	// Makes the background transparent (equal to text prop in Vuetify)
+	public flat = false;
+
+	// Designates the component as anchor and applies the href attribute
+	public href = '';
+
+	// Designates the button as icon, round and flat
+	public icon = false;
+
+	// Defines the button icon, that will be rendered before the label
+	public iconName = '';
+
+	// Defines the button label
+	public label = '';
+
+	// Makes the button large
+	public large = false;
+
+	/**
+	 * Aligns the button towards the left.
+	 * This should be used with the absolute or fixed props
+	 */
+	public left = false;
+
+	// Makes the background transparent and applies a thin border
+	public outline = false;
+
+	// Change the icon to the right.
+	public reverse = false;
+
+	/**
+	 * Aligns the button towards the right.
+	 * This should be used with the absolute or fixed props
+	 */
+	public right = false;
+
+	// Applies a large border radius on the button
+	public round: string | number | boolean = false;
+
+	// Makes the button small
+	public small = false;
+
+	// Designates the target attribute when the button has href or to prop
+	public target = '_self';
+
+	// Removes the component's border-radius
+	public tile = false;
+
+	// Denotes the target route of the link
+	public to = '';
+
+	/**
+	 * Aligns the content towards the top.
+	 * This should be used with the absolute or fixed props
+	 */
+	public top = false;
+
+	// Sets button type
+	public type = 'button';
+
+	/**
+	 * Sets the width for the card.
+	 * Possible values for width can be 'auto', '100%', '400px' or 400
+	 */
+	public width: number | string = '';
+
+	// Controls the active state of the item. This is typically used to highlight the component
+	public active?: boolean = undefined;
+
+	// Icon to be added after the text.
+	public appendIcon?: string;
+
+	// Applies border style to component
+	public border: string | number | boolean = false;
+
+	/**
+	 * Adjusts the vertical height of the component
+	 * Possible values: 'default', 'comfortable' and 'compact'
+	 */
+	public density: 'default' | 'comfortable' | 'compact' = 'default';
+
+	// Defines the elevation (0 to 24) of the component
+	public elevation?: string | number;
+
+	// Displays the loading progress bar
+	public loading: string | boolean = false;
+
+	/**
+	 * Defines the position of the component.
+	 * Possible values: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky'
+	 */
+	public position?: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky';
+
+	// Icon to be added before the text.
+	public prependIcon?: string;
+
+	// Defines if the component will call router.replace() or router.push()
+	public replace = false;
+
+	// Shows the ripple when clicked
+	public ripple = true;
+
+	// Class to be added when selected
+	public selectedClass?: string;
+
+	/**
+	 * Defines the height and width of the component
+	 * Possible values: x-small, small, default, large, and x-large
+	 */
+	public size?: 'x-small' | 'small' | 'default' | 'large' | 'x-large';
+
+	// Displays the component as flex column (icon above the text)
+	public stacked = false;
+
+	// Root element tag
+	public tag?: string;
+
+	// Applies style to component
+	public variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain';
+
+	/* istanbul ignore next */
+	/**
+	 * Create a new Button
+	 * @param props Button definition
+	 */
+	constructor(props: IButton) {
+		super(props);
+		this.absolute = this.getInitValue('absolute', props.absolute, this.absolute);
+		this.block = this.getInitValue('block', props.block, this.block);
+		this.bottom = this.getInitValue('bottom', props.bottom, this.bottom);
+		this.color = this.getInitValue('color', props.color, this.color);
+		this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
+		this.fab = this.getInitValue('fab', props.fab, this.fab);
+		this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
+		this.flat = this.getInitValue('flat', props.flat, this.flat);
+		this.href = this.getInitValue('href', props.href, this.href);
+		this.icon = this.getInitValue('icon', props.icon, this.icon);
+		this.iconName = this.getInitValue('iconName', props.iconName, this.iconName);
+		this.label = this.getInitValue('label', props.label, this.label);
+		this.large = this.getInitValue('large', props.large, this.large);
+		this.left = this.getInitValue('left', props.left, this.left);
+		this.outline = this.getInitValue('outline', props.outline, this.outline);
+		this.right = this.getInitValue('right', props.right, this.right);
+		this.reverse = this.getInitValue('reverse', props.reverse, this.reverse);
+		this.round = this.getInitValue('round', props.round, this.round);
+		this.small = this.getInitValue('small', props.small, this.small);
+		this.target = this.getInitValue('target', props.target, this.target);
+		this.tile = this.getInitValue('tile', props.tile, this.tile);
+		this.to = this.getInitValue('to', props.to, this.to);
+		this.top = this.getInitValue('top', props.top, this.top);
+		this.type = this.getInitValue('type', props.type, this.type);
+		this.width = this.getInitValue('width', props.width, this.width);
+		// Zeedhi 3.0
+		this.active = this.getInitValue('active', props.active, this.active);
+		this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, this.appendIcon);
+		this.border = this.getInitValue('border', props.border, this.border);
+		this.density = this.getInitValue('density', props.density, this.density);
+		this.elevation = this.getInitValue('elevation', props.elevation, this.elevation);
+		this.loading = this.getInitValue('loading', props.loading, this.loading);
+		this.position = this.getInitValue('position', props.position, this.position);
+		this.prependIcon = this.getInitValue('prependIcon', props.prependIcon, this.prependIcon);
+		this.replace = this.getInitValue('replace', props.replace, this.replace);
+		this.ripple = this.getInitValue('ripple', props.ripple, this.ripple);
+		this.selectedClass = this.getInitValue('selectedClass', props.selectedClass, this.selectedClass);
+		this.size = this.getInitValue('size', props.size, this.size);
+		this.stacked = this.getInitValue('stacked', props.stacked, this.stacked);
+		this.tag = this.getInitValue('tag', props.tag, this.tag);
+		this.variant = this.getInitValue('variant', props.variant, this.variant);
+	}
+}

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

@@ -0,0 +1,51 @@
+import { IEventParam } from '@zeedhi/core';
+import { IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { Button } from './button';
+
+export type IButtonEvent = IEventParam<Button>;
+export type IButtonEvents = IComponentEvents<IButtonEvent>;
+
+export interface IButton extends IComponentRender {
+	absolute?: boolean;
+	block?: boolean;
+	bottom?: boolean;
+	color?: string;
+	disabled?: boolean;
+	events?: IButtonEvents;
+	fab?: boolean;
+	fixed?: boolean;
+	flat?: boolean;
+	href?: string;
+	icon?: boolean;
+	iconName?: string;
+	label?: string;
+	large?: boolean;
+	left?: boolean;
+	outline?: boolean;
+	reverse?: boolean;
+	right?: boolean;
+	round?: string | number | boolean;
+	small?: boolean;
+	target?: string;
+	tile?: boolean;
+	to?: string;
+	top?: boolean;
+	type?: string;
+	width?: number | string;
+	// Zeedhi 3
+	active?: boolean;
+	appendIcon?: string;
+	border?: string | number | boolean;
+	density?: 'default' | 'comfortable' | 'compact';
+	elevation?: string | number;
+	loading?: boolean | string;
+	position?: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky';
+	prependIcon?: string;
+	replace?: boolean;
+	ripple?: boolean;
+	selectedClass?: string;
+	size?: 'x-small' | 'small' | 'default' | 'large' | 'x-large';
+	stacked?: boolean;
+	tag?: string;
+	variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain';
+}

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

@@ -0,0 +1,109 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IButtonGroup } from './interfaces';
+/**
+ * Base class for Button Group component.
+ */
+export class ButtonGroup extends ComponentRender implements IButtonGroup {
+	/**
+	 * Changes the background-color for the component.
+	 */
+	public backgroundColor = '';
+
+	/**
+	 * Removes the group's border.
+	 */
+	public borderless = false;
+
+	/**
+	 * Applies specified color to the control.
+	 * It can be the name of material or css color in hexa
+	 */
+	public color = 'primary';
+
+	/**
+	 * Reduces the button size and padding.
+	 */
+	public dense = false;
+
+	/**
+	 * Applies mandatory selected button
+	 */
+	public mandatory = false;
+
+	/**
+	 * The multiple prop will allow a user to select multiple
+	 * return values as an array.
+	 */
+	public multiple = false;
+
+	/**
+	 * Round edge buttons
+	 */
+	public rounded = false;
+
+	/**
+	 * Applies a large border radius on the top left and
+	 * bottom right of the card.
+	 */
+	public shaped = false;
+
+	/**
+	 * Specify a custom tag used on the root element.
+	 */
+	public tag = 'div';
+
+	/**
+	 * Removes the component's border-radius.
+	 */
+	public tile = false;
+
+	/**
+	 * Buttons selected.
+	 */
+	public selectedButtons: number | string | number[] | null = null;
+
+	// Makes the button large
+
+	public large = false;
+
+	// Makes the button small
+
+	public small = false;
+
+	/* istanbul ignore next */
+	/**
+	 * Create a new ButtonGroup
+	 * @param props ButtonGroup definition
+	 */
+	constructor(props: IButtonGroup) {
+		super(props);
+		this.backgroundColor = this.getInitValue('backgroundColor', props.backgroundColor, this.backgroundColor);
+		this.borderless = this.getInitValue('block', props.borderless, this.borderless);
+		this.color = this.getInitValue('color', props.color, this.color);
+		this.dense = this.getInitValue('disabled', props.dense, this.dense);
+		this.mandatory = this.getInitValue('mandatory', props.mandatory, this.mandatory);
+		this.multiple = this.getInitValue('multiple', props.multiple, this.multiple);
+		this.rounded = this.getInitValue('rounded', props.rounded, this.rounded);
+		this.shaped = this.getInitValue('shaped', props.shaped, this.shaped);
+		this.tag = this.getInitValue('tag', props.tag, this.tag);
+		this.tile = this.getInitValue('tile', props.tile, this.tile);
+		this.selectedButtons = this.getInitValue('selectedButtons', props.selectedButtons, this.selectedButtons);
+		this.large = this.getInitValue('large', props.large, this.large);
+		this.small = this.getInitValue('small', props.small, this.small);
+		if (this.multiple && !Array.isArray(this.selectedButtons)) {
+			this.selectedButtons = [];
+		}
+		if (Array.isArray(this.selectedButtons) && this.selectedButtons.length > 0) {
+			this.multiple = true;
+		}
+	}
+
+	/**
+	 * Triggered when the input value changes.
+	 * @param event DOM event
+	 * @param element Element clicked
+	 */
+	public change(event?: Event, element?: any) {
+		this.callEvent('change', { event, element, component: this });
+	}
+}

package/src/components/zd-button-group/interfaces.ts

@@ -0,0 +1,27 @@
+import { IEventParam } from '@zeedhi/core';
+import { IButton } from '../zd-button/interfaces';
+import { EventDef, IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { ButtonGroup } from './button-group';
+
+export type IButtonGroupEvent = IEventParam<ButtonGroup>;
+export interface IButtonGroupEvents<T = IEventParam<any>> extends IComponentEvents<T> {
+	change?: EventDef<T>;
+}
+
+export interface IButtonGroup extends IComponentRender {
+	children?: IButton[];
+	backgroundColor?: string;
+	borderless?: boolean;
+	color?: string;
+	dense?: boolean;
+	events?: IButtonGroupEvents;
+	mandatory?: boolean;
+	multiple?: boolean;
+	rounded?: boolean;
+	shaped?: boolean;
+	large?: boolean;
+	small?: boolean;
+	tag?: string;
+	tile?: boolean;
+	selectedButtons?: number | string | number[] | null;
+}