@zeedhi/common 3.0.6 → 3.1.0

package/package.json

@@ -1,37 +1,35 @@
 {
   "name": "@zeedhi/common",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
   "main": "src/index.ts",
-  "types": "dist/types/index.d.ts",
+  "types": "dist/zd-common.d.mts",
   "type": "module",
-  "module": "dist/zd-common.js",
-  "packageManager": "npm@8.19.2",
+  "module": "dist/zd-common.mjs",
+  "packageManager": "npm@10.0.0",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "rollup -c && npm run build:scss",
+    "build": "npm run types && tsdown",
+    "types": "tsc --noEmit",
     "clean": "rm -rf ./dist",
-    "build:scss": "rollup -c rollup.scss.config.js",
     "test": "jest --verbose=false",
-    "watch": "rollup -cw"
+    "watch": "tsdown --watch"
   },
   "dependencies": {
     "@zeedhi/autonumeric": "^4.6.3",
-    "@zeedhi/core": "^3.0.6",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.get": "^4.4.2",
     "lodash.isundefined": "^3.0.1",
     "lodash.merge": "^4.6.2",
     "lodash.set": "^4.3.2",
-    "typescript": "^4.9.3"
+    "node-fetch": "^2.7.0"
   },
   "devDependencies": {
-    "@rollup/plugin-json": "^6.0.0",
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.get": "^4.4.7",
@@ -39,11 +37,17 @@
     "@types/lodash.merge": "^4.6.7",
     "@types/lodash.set": "^4.3.7",
     "@types/lodash.times": "^4.3.7",
+    "@zeedhi/core": "^3.1.0",
     "lodash.times": "^4.3.2",
-    "mockdate": "^3.0.5"
+    "mockdate": "^3.0.5",
+    "postcss": "^8.5.6",
+    "rollup-plugin-postcss": "^4.0.2"
+  },
+  "peerDependencies": {
+    "@zeedhi/core": "^3.0.6"
   },
   "env": {
     "NODE_ENV": "production"
   },
-  "gitHead": "8968e2b143f77acec2e51a6ca22f2e25646d0078"
+  "gitHead": "d0d97cf376fb326379610526f3ce7efed4261838"
 }

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

@@ -48,6 +48,6 @@ export interface ICarousel extends IComponentRender {
 	height?: number | string;
 	maxHeight?: number | string;
 	minHeight?: number | string;
-	fillHeight?: boolean;
+	fillHeight?: boolean | string;
 	events?: ICarouselEvents;
 }

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

@@ -60,7 +60,7 @@ export class Component<T extends IComponent = IComponent> implements IComponentI
 	/**
 	 * Set component height to fill all space available
 	 */
-	public fillHeight = false;
+	public fillHeight: boolean | string = false;
 
 	/**
 	 * Parent component instance. This property should be used when is
@@ -83,8 +83,6 @@ export class Component<T extends IComponent = IComponent> implements IComponentI
 	// Properties accessors to controller.
 	private accessorManager!: IAccessorManager;
 
-	private element?: any;
-
 	// Sets view focus method.
 	protected viewFocus?: () => void;
 
@@ -245,7 +243,6 @@ export class Component<T extends IComponent = IComponent> implements IComponentI
 	 * @param element Element mounted reference
 	 */
 	public onMounted(element: any) {
-		this.element = element;
 		if (Object.keys(this.keyMap).length) {
 			ZdKeyMap.bind(this.keyMap, this, element);
 		}
@@ -274,7 +271,7 @@ export class Component<T extends IComponent = IComponent> implements IComponentI
 	public click(event?: Event, element?: any) {
 		this.callEvent('click', {
 			event: event || new MouseEvent('click'),
-			element: element || this.element,
+			element: element,
 			component: this,
 		});
 	}
@@ -302,7 +299,7 @@ export class Component<T extends IComponent = IComponent> implements IComponentI
 	public mouseenter(event?: Event, element?: any) {
 		this.callEvent('mouseenter', {
 			event: event || new MouseEvent('mouseenter'),
-			element: element || this.element,
+			element: element,
 			component: this,
 		});
 	}
@@ -310,7 +307,7 @@ export class Component<T extends IComponent = IComponent> implements IComponentI
 	public mouseleave(event?: Event, element?: any) {
 		this.callEvent('mouseleave', {
 			event: event || new MouseEvent('mouseleave'),
-			element: element || this.element,
+			element: element,
 			component: this,
 		});
 	}
@@ -318,7 +315,7 @@ export class Component<T extends IComponent = IComponent> implements IComponentI
 	public mouseout(event?: Event, element?: any) {
 		this.callEvent('mouseout', {
 			event: event || new MouseEvent('mouseout'),
-			element: element || this.element,
+			element: element,
 			component: this,
 		});
 	}
@@ -326,7 +323,7 @@ export class Component<T extends IComponent = IComponent> implements IComponentI
 	public mouseover(event?: Event, element?: any) {
 		this.callEvent('mouseover', {
 			event: event || new MouseEvent('mouseover'),
-			element: element || this.element,
+			element: element,
 			component: this,
 		});
 	}

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

@@ -41,7 +41,7 @@ export interface IComponent {
 	parent?: IComponentInstance;
 	tabStop?: boolean;
 	userProperties?: IDictionary;
-	fillHeight?: boolean;
+	fillHeight?: boolean | string;
 	[key: string]: any;
 }
 
@@ -65,7 +65,7 @@ export interface IComponentInstance {
 	parent?: IComponentInstance;
 	tabStop: boolean;
 	userProperties: IDictionary;
-	fillHeight: boolean;
+	fillHeight: boolean | string;
 }
 
 export interface IComponentRender extends IComponent {

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

@@ -1,9 +1,9 @@
 import { Config, DateHelper, FormatterParserProvider, I18n, Mask, Utils, dayjs } from '@zeedhi/core';
-import isUndefined from 'lodash.isundefined';
 import { InputFactory } from '../zd-input/input-factory';
 import { TextInput } from '../zd-text-input/text-input';
 import { IDateInput } from './interfaces';
 import { isDateAllowed } from '../../utils/date-utils/date-utils';
+import { getDateMask, validateThenFormat } from './utils';
 
 /**
  * Base class for Date component.
@@ -91,10 +91,6 @@ export class DateInput extends TextInput implements IDateInput {
 
 	protected parserFn = FormatterParserProvider.getParser('ZdDateInput');
 
-	protected initialMask?: string;
-
-	protected isSimpleDisplay!: boolean;
-
 	public inputMode?: string = 'none';
 
 	/* istanbul ignore next */
@@ -125,9 +121,6 @@ export class DateInput extends TextInput implements IDateInput {
 
 		this.dateValidation = this.dateValidation.bind(this);
 		this.rules.push(this.dateValidation);
-
-		this.initialMask = this.getInitialMask();
-		this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
 	}
 
 	public appendIconClick(event: Event, element: any) {
@@ -135,14 +128,6 @@ export class DateInput extends TextInput implements IDateInput {
 		super.appendIconClick(event, element);
 	}
 
-	private getInitialMask() {
-		if (isUndefined(this.mask)) {
-			this.mask = this.inputFormat && this.maskFormat(this.inputFormat);
-		}
-
-		return this.mask;
-	}
-
 	public formatter(value: string): string {
 		return this.formatterFn(value, this);
 	}
@@ -192,30 +177,6 @@ export class DateInput extends TextInput implements IDateInput {
 		this.value = parsedValue; // forces value accessor to be called if necessary
 	}
 
-	/**
-	 * Assign the updated mask to mask property
-	 */
-	public updateMask() {
-		this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
-		this.mask = this.getUpdatedMask();
-		return this.mask;
-	}
-
-	/**
-	 * Gets the updated masked, based on displayFormat if the initial mask is undefined
-	 */
-	protected getUpdatedMask(): string | undefined {
-		if (isUndefined(this.initialMask)) {
-			return this.maskFormat(this.displayFormat);
-		}
-
-		return this.mask;
-	}
-
-	protected maskFormat(format: string) {
-		return format.replace(/[A-Za-z]/gi, '#');
-	}
-
 	public setDateValue(displayValue: string) {
 		if (this.isValidDate(displayValue, this.displayFormat)) {
 			this.setValidDateValue(displayValue);
@@ -307,9 +268,8 @@ export class DateInput extends TextInput implements IDateInput {
 	}
 
 	public blur(event: Event, element: any) {
-		this.removeDateMask();
-		this.setDateValue(this.formatter(this.value));
 		super.blur(event, element);
+		this.setDateValue(this.formatter(this.value));
 		if (!Utils.isMobile()) {
 			this.showDatePicker = false;
 		}
@@ -324,34 +284,13 @@ export class DateInput extends TextInput implements IDateInput {
 	}
 
 	public focus(event: Event, element: any) {
-		this.addDateMask();
 		super.focus(event, element);
-	}
-
-	/**
-	 * Add date mask
-	 */
-	protected addDateMask() {
-		if (isUndefined(this.initialMask) || !this.value) return;
-
-		this.internalDisplayValue = dayjs(this.value, this.dateFormat).format(this.inputFormat || this.displayFormat);
-		this.mask = this.initialMask;
-	}
-
-	/**
-	 * Removes the component mask if value is valid
-	 */
-	protected removeDateMask() {
-		if (
-			isUndefined(this.initialMask) ||
-			!this.value ||
-			this.dateError ||
-			!this.isValidDate(this.value, this.dateFormat)
-		) {
-			return;
-		}
+		if (!this.inputFormat || !this.value) return;
 
-		this.mask = '';
+		const dayObj = dayjs(this.value, this.dateFormat, true);
+		if (!dayObj.isValid()) return;
+		// on focus, should use the inputFormat
+		this.internalDisplayValue = dayObj.format(this.inputFormat);
 	}
 
 	/**
@@ -373,23 +312,6 @@ export class DateInput extends TextInput implements IDateInput {
 		}
 	}
 
-	/**
-	 * Checks if a date format is simple.
-	 * Simple date formats are the ones that consists only of 'DD', 'MM' or 'YYYY', and mask delimiters
-	 * @param format The format to be checked
-	 * @returns true if it is simple, false otherwise
-	 */
-	protected isSimpleFormat(format: string): boolean {
-		const simpleTokens = ['DD', 'MM', 'YYYY'];
-
-		// remove the simple tokens from the string
-		const replaced = simpleTokens.reduce((result, token) => result.replace(token, ''), format);
-
-		const chars = replaced.split('');
-
-		return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
-	}
-
 	private previousHint = '';
 
 	private previousPersistentHint = false;
@@ -411,18 +333,8 @@ export class DateInput extends TextInput implements IDateInput {
 		this.persistentHint = this.previousPersistentHint;
 	}
 
-	/**
-	 * Converts a date format to a mask
-	 */
-	private toMask(format: string) {
-		return format.replace(/[A-Za-z]/gi, '#'); // .split('').map((char: string) => (char === '#' ? /\d/ : char));
-	}
-
 	public getMask() {
-		if (this.isFocused) {
-			return this.toMask(this.inputFormat || this.displayFormat || '');
-		}
-		return '';
+		return getDateMask(this.inputFormat || this.displayFormat || '', this.isFocused);
 	}
 }
 
@@ -434,10 +346,13 @@ FormatterParserProvider.registerFormatter(
 			dateFormat = Config.dateFormat,
 			displayFormat = Config.displayFormat,
 			inputFormat = Config.dateInputFormat,
-			mask = '',
-			initialMask,
-			isSimpleDisplay = false,
-		}: any = {},
+			isFocused = false,
+		}: {
+			dateFormat?: string;
+			displayFormat?: string;
+			inputFormat?: string;
+			isFocused?: boolean;
+		} = {},
 	) => {
 		if (!value) {
 			return '';
@@ -449,22 +364,13 @@ FormatterParserProvider.registerFormatter(
 			return value;
 		}
 
-		if (mask && initialMask) {
-			if (inputFormat) {
-				return dayjs(value, dateFormat).format(inputFormat);
-			}
+		const mask = getDateMask(inputFormat || displayFormat, isFocused);
 
-			let valueToUnmask = value;
-			if (isSimpleDisplay) {
-				valueToUnmask = dayjs(value, dateFormat).format(displayFormat);
-			}
-
-			const unmasked = Mask.getValueWithoutMask(valueToUnmask);
-			const masked = Mask.getValueWithMask(unmasked, mask);
-			return masked;
+		if (!mask || !isFocused || !inputFormat) {
+			return dayjs(value, dateFormat).format(displayFormat);
 		}
 
-		return dayjs(value, dateFormat).format(displayFormat);
+		return dayjs(value, dateFormat).format(inputFormat);
 	},
 );
 
@@ -476,51 +382,38 @@ FormatterParserProvider.registerParser(
 			dateFormat = Config.dateFormat,
 			displayFormat = Config.displayFormat,
 			inputFormat = Config.dateInputFormat,
-			mask = '',
-			initialMask,
-			isSimpleDisplay = false,
-		}: any = {},
+			isFocused = false,
+		}: {
+			dateFormat?: string;
+			displayFormat?: string;
+			inputFormat?: string;
+			isFocused?: boolean;
+		} = {},
 	) => {
 		if (!value) {
 			return null;
 		}
 
-		if (dayjs(value, displayFormat, true).isValid()) {
-			return dayjs(value, displayFormat).format(dateFormat);
-		}
-
-		if (mask && Mask.checkMask(value, mask)) {
-			if (inputFormat) {
-				if (dayjs(value, inputFormat, true).isValid()) {
-					return dayjs(value, inputFormat).format(dateFormat);
-				}
+		const mask = getDateMask(inputFormat || displayFormat, isFocused);
+		if (!Mask.checkMask(value, mask)) return value;
 
-				return value;
+		// when using inputFormat and focused, should parse according to inputFormat
+		if (inputFormat && isFocused) {
+			const { valid, newValue } = validateThenFormat(value, inputFormat, dateFormat);
+			if (valid) {
+				return newValue;
 			}
 
-			const unmasked = Mask.getValueWithoutMask(value);
-			let masked;
-
-			if (!initialMask || isSimpleDisplay) {
-				const displayFmtMask = displayFormat.replace(/[A-Za-z]/gi, '#');
-
-				masked = Mask.getValueWithMask(unmasked, displayFmtMask);
-
-				if (dayjs(masked, displayFormat, true).format(displayFormat) === masked) {
-					return dayjs(masked, displayFormat).format(dateFormat);
-				}
-			}
-
-			const dateFmtMask = dateFormat.replace(/[A-Za-z]/gi, '#');
-
-			masked = Mask.getValueWithMask(unmasked, dateFmtMask);
+			return value;
+		}
 
-			if (dayjs(masked, dateFormat, true).format(dateFormat) === masked) {
-				return masked;
-			}
+		// should parse according to displayFormat
+		const { valid, newValue } = validateThenFormat(value, displayFormat, dateFormat);
+		if (!valid) {
+			return value;
 		}
 
-		return value;
+		return newValue;
 	},
 );
 

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

@@ -0,0 +1,17 @@
+import { dayjs } from '@zeedhi/core';
+import { toMask } from '../../utils/date-utils/date-utils';
+
+export function getDateMask(format: string, focused: boolean) {
+    if (focused) {
+        return toMask(format);
+    }
+    return '';
+}
+
+export function validateThenFormat(value: string, fromFormat: string, toFormat: string) {
+    if (dayjs(value, fromFormat, true).isValid()) {
+        return { valid: true, newValue: dayjs(value, fromFormat).format(toFormat) };
+    }
+
+    return { valid: false, newValue: null };
+}