@zeedhi/common 3.0.0 → 3.0.2

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

@@ -161,13 +161,103 @@ export class Form extends ComponentRender implements IForm {
 		return this.children.map(({ grid, ...otherAttrs }) => otherAttrs);
 	}
 
+	/**
+	 * Checks if the value matches a col value (1, 2, ... 12) or auto
+	 */
+	private matchColumn = (value: string) => (!Number.isNaN(Number(value)) || value === 'auto');
+
+	private breakpoints = ['lg', 'md', 'sm', 'xl', 'xxl'] as const;
+
+	private matchBreakpoint = (value: string): value is typeof this.breakpoints[number] => (this.breakpoints.includes(value as any))
+
+	private handleColClass(cssClass: string): { key: keyof IFormGrid, value: string } | null {
+		const dataString = cssClass.replace('zd-col-', '');
+
+		const splittedData = dataString.split('-');
+		const firstData = splittedData[0];
+		const secondData = splittedData[1];
+
+		// in this case the class is zd-col-{n} or zd-col-auto
+		if (this.matchColumn(firstData)) {
+			return { key: 'cols', value: firstData };
+		}
+
+		const matchWithBreakpoints = this.matchBreakpoint(firstData) && this.matchColumn(secondData);
+		if (!matchWithBreakpoints) return null;
+
+		// in this case the class is zd-col-{breakpoint}-{n} or zd-col-{breakpoint}-auto
+		return { key: firstData, value: secondData };
+	}
+
+	private handleOffsetClass(cssClass: string): { key: keyof IFormGrid, value: string } | null {
+		const dataString = cssClass.replace('zd-offset-', '');
+
+		const splittedData = dataString.split('-');
+		const firstData = splittedData[0];
+		const secondData = splittedData[1];
+
+		// in this case the class is zd-offset-{n} or zd-offset-auto
+		if (this.matchColumn(firstData)) {
+			return { key: 'offset', value: firstData };
+		}
+
+		const matchWithBreakpoints = this.matchBreakpoint(firstData) && this.matchColumn(secondData);
+		if (!matchWithBreakpoints) return null;
+
+		// in this case the class is zd-offset-{breakpoint}-{n} or zd-offset-{breakpoint}-auto
+		return { key: `offset-${firstData}`, value: secondData };
+	}
+
+	/**
+	 * This method searches in a css class string to find classes related to grid cols \
+	 * Parses all of the grid cols classes found to form grid object entries, for example
+	 * the following class: 'zd-col-sm-12 zd-col-md-6' will become { sm: '12', md: '6' }
+	 */
+	private parseGridClasses(classes: string) {
+		const classesArray = classes.split(' ');
+		const gridObject: IFormGrid = {};
+
+		classesArray.forEach((cssClass) => {
+			if (cssClass.startsWith('zd-col-')) {
+				const result = this.handleColClass(cssClass);
+				if (!result) return;
+
+				const { key, value } = result;
+				gridObject[key] = value;
+				return;
+			}
+
+			if (cssClass.startsWith('zd-offset-')) {
+				const result = this.handleOffsetClass(cssClass);
+				if (!result) return;
+
+				const { key, value } = result;
+				gridObject[key] = value;
+				return;
+			}
+
+			return;
+		});
+
+		return gridObject;
+	}
+
+	private getChildGrid(child: IFormComponent) {
+		if (child.grid && Object.keys(child.grid).length > 0) return child.grid;
+
+		if (child.cssClass) return this.parseGridClasses(child.cssClass);
+
+		return {};
+	}
+
 	/**
 	 * Grid system for each child.
 	 */
 	get childrenGrid() {
 		const childrenGrid: IDictionary<IFormGrid> = {};
 		this.children.forEach((child) => {
-			childrenGrid[child.name] = { cols: '3', ...(child.grid || {}) };
+			const grid = this.getChildGrid(child);
+			childrenGrid[child.name] = { cols: '3', ...grid };
 		});
 		return childrenGrid;
 	}

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

@@ -14,10 +14,13 @@ export interface IFormGrid {
 	md?: string;
 	sm?: string;
 	xl?: string;
+	xxl?: string;
+	offset?: string;
 	'offset-lg'?: string;
 	'offset-md'?: string;
 	'offset-sm'?: string;
 	'offset-xl'?: string;
+	'offset-xxl'?: string;
 }
 
 export interface IFormComponent extends IComponentRender {

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

@@ -3,6 +3,7 @@ import debounce from 'lodash.debounce';
 import { ComponentRender } from '../zd-component/component-render';
 import { Form } from '../zd-form/form';
 import { IInput, IInputEvents } from './interfaces';
+import { IFormGrid } from '../zd-form/interfaces';
 
 /**
  * Base class for Input component.
@@ -149,6 +150,8 @@ export class Input extends ComponentRender implements IInput {
 
 	public formParent?: Form = this.getFormParent();
 
+	public grid: IFormGrid = {};
+
 	/* istanbul ignore next */
 	/**
 	 * Creates a new Input.
@@ -178,6 +181,7 @@ export class Input extends ComponentRender implements IInput {
 		this.storePath = this.getInitValue('storePath', props.storePath, this.storePath);
 		this.value = this.getInitValue('value', props.value, this.value);
 		this.validations = this.getInitValue('validations', props.validations, this.validations);
+		this.grid = this.getInitValue('grid', props.grid, this.grid);
 		this.parseValidations(props.validations || {});
 	}
 

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

@@ -1,6 +1,7 @@
 import { IDictionary, IEventParam } from '@zeedhi/core';
 import { EventDef, IComponentEvents, IComponentRender } from '../zd-component/interfaces';
 import { Input } from './input';
+import { IFormGrid } from '../zd-form/interfaces';
 
 export type IInputEvent = IEventParam<Input>;
 export interface IInputEvents<T = IEventParam<any>> extends IComponentEvents<T> {
@@ -35,4 +36,5 @@ export interface IInput extends IComponentRender {
 	storePath?: string;
 	validations?: IDictionary<IDictionary<string | number>>;
 	value?: any;
+	grid?: IFormGrid;
 }

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

@@ -1,24 +1,24 @@
 import { IEventParam } from '@zeedhi/core';
-import { Time } from './time';
 import { ITextInput, ITextInputEvents } from '../zd-text-input/interfaces';
+import { Time } from './time';
 
 export type ITimeEvent = IEventParam<Time>;
 export type ITimeEvents = ITextInputEvents<ITimeEvent>;
 
 export interface ITime extends ITextInput {
-  allowedHours?: any[];
-  allowedMinutes?: any[];
-  allowedSeconds?: any[];
-  displayValue?: string;
-  displayFormat?: string;
-  fullWidth?: boolean;
-  maxTime?: string;
-  minTime?: string;
-  events?: ITimeEvents;
-  scrollable?: boolean;
-  showTimePicker?: boolean;
-  timeFormat?: string;
-  useSeconds?: boolean;
-  valueFormat?: string;
-  inputFormat?: string;
+	allowedHours?: any[];
+	allowedMinutes?: any[];
+	allowedSeconds?: any[];
+	displayValue?: string;
+	displayFormat?: string;
+	fullWidth?: boolean;
+	maxTime?: string;
+	minTime?: string;
+	events?: ITimeEvents;
+	scrollable?: boolean;
+	showTimePicker?: boolean;
+	timeFormat?: string;
+	useSeconds?: boolean;
+	valueFormat?: string;
+	inputFormat?: string;
 }

package/src/components/zd-time/time-format-selector.ts

@@ -6,19 +6,19 @@ import { IDictionary } from '@zeedhi/core';
  * and if the format is a common format, it will be overriden by timeFormat
  */
 export class TimeFormatSelector {
-  getFormat(format: string, timeFormat: string, useSeconds: boolean) {
-    const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
-    const seconds = useSeconds ? ':ss' : '';
-    const defaultFormats: IDictionary = {
-      ampm: `hh:mm${seconds} A`,
-      '24hr': `HH:mm${seconds}`,
-    };
-    const timeFormats = ['ampm', '24hr'];
+	getFormat(format: string, timeFormat: string, useSeconds: boolean) {
+		const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
+		const seconds = useSeconds ? ':ss' : '';
+		const defaultFormats: IDictionary = {
+			ampm: `hh:mm${seconds} A`,
+			'24hr': `HH:mm${seconds}`,
+		};
+		const timeFormats = ['ampm', '24hr'];
 
-    if (commonsDisplay.includes(format) && timeFormats.includes(timeFormat)) {
-      return defaultFormats[timeFormat];
-    }
+		if (commonsDisplay.includes(format) && timeFormats.includes(timeFormat)) {
+			return defaultFormats[timeFormat];
+		}
 
-    return format;
-  }
+		return format;
+	}
 }