@zeedhi/common 3.0.6 → 3.1.0

package/src/styles/_variables.scss

@@ -25,20 +25,21 @@
  * (https://github.com/vuetifyjs/vuetify/blob/v1.5.16/packages/vuetify/src/styles/settings/_variables.sass)
  */
  
- @import '_functions';
+ @use "sass:map";
+@use '_functions';
 
  $spacer: 4px !default;
  $spacers: ();
  @for $i from 0 through 12 {
-   $spacers: map-merge($spacers, ($i: $spacer * $i))
+   $spacers: map.merge($spacers, ($i: $spacer * $i))
  }
  $negative-spacers: ();
  @for $i from 1 through 12 {
-   $negative-spacers: map-merge($negative-spacers, ("n" + $i: -$spacer * $i))
+   $negative-spacers: map.merge($negative-spacers, ("n" + $i: -$spacer * $i))
  }
  
  $grid-breakpoints: () !default;
- $grid-breakpoints: map-deep-merge(
+ $grid-breakpoints: functions.map-deep-merge(
    (
      'xs': 0,
      'sm': 600px,
@@ -50,21 +51,21 @@
  );
  
  $display-breakpoints: () !default;
- $display-breakpoints: map-deep-merge(
+ $display-breakpoints: functions.map-deep-merge(
    (
      'print-only': 'only print',
      'screen-only': 'only screen',
-     'xs-only': 'only screen and (max-width: #{map-get($grid-breakpoints, 'sm') - 1})',
-     'sm-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
-     'sm-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
-     'sm-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')})',
-     'md-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
-     'md-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
-     'md-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')})',
-     'lg-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
-     'lg-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
-     'lg-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')})',
-     'xl-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'xl')})'
+     'xs-only': 'only screen and (max-width: #{map.get($grid-breakpoints, 'sm') - 1})',
+     'sm-only': 'only screen and (min-width: #{map.get($grid-breakpoints, 'sm')}) and (max-width: #{map.get($grid-breakpoints, 'md') - 1})',
+     'sm-and-down': 'only screen and (max-width: #{map.get($grid-breakpoints, 'md') - 1})',
+     'sm-and-up': 'only screen and (min-width: #{map.get($grid-breakpoints, 'sm')})',
+     'md-only': 'only screen and (min-width: #{map.get($grid-breakpoints, 'md')}) and (max-width: #{map.get($grid-breakpoints, 'lg') - 1})',
+     'md-and-down': 'only screen and (max-width: #{map.get($grid-breakpoints, 'lg') - 1})',
+     'md-and-up': 'only screen and (min-width: #{map.get($grid-breakpoints, 'md')})',
+     'lg-only': 'only screen and (min-width: #{map.get($grid-breakpoints, 'lg')}) and (max-width: #{map.get($grid-breakpoints, 'xl') - 1})',
+     'lg-and-down': 'only screen and (max-width: #{map.get($grid-breakpoints, 'xl') - 1})',
+     'lg-and-up': 'only screen and (min-width: #{map.get($grid-breakpoints, 'lg')})',
+     'xl-only': 'only screen and (min-width: #{map.get($grid-breakpoints, 'xl')})'
    ), 
    $display-breakpoints
  ); 

package/src/styles/index.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'display';
-@import 'elevation';
-@import 'text';
-@import 'utilities';
+@use 'variables';
+@use 'display';
+@use 'elevation';
+@use 'text';
+@use 'utilities';

package/src/utils/date-utils/date-utils.ts

@@ -16,3 +16,12 @@ export function isDateAllowed(
 	}
 	return allowedDates.indexOf(dateString) !== -1;
 }
+
+/**
+ * Translates a date format into a mask format
+ * @param format The format to be translated
+ * @returns The mask format
+ */
+export function toMask(format: string): string {
+	return format.replace(/[A-Za-z]/gi, '#');
+}

package/src/utils/omit/omit.ts

@@ -7,7 +7,11 @@ import { IDictionary } from '@zeedhi/core';
  * @param key property to be removed
  * @returns object without said property
  */
-export const omit = (obj: IDictionary, key: string) => {
-	const { [key]: _, ...newObj } = obj;
-	return newObj;
+export const omit = (obj: IDictionary, key: string | string[]) => {
+	const keys = Array.isArray(key) ? key : [key];
+	return Object.fromEntries(
+    Object.entries(obj).filter(
+      ([currentKey]) => !keys.includes(currentKey)
+    )
+  );
 };

package/src/utils/tree-data-structure/tree-data-structure.ts

@@ -279,7 +279,7 @@ export class TreeDataStructure implements ITreeDataStructure {
 
 		if (row[columns[index]] === nextRow[columns[index]]) {
 			const nextIndex = index + 1;
-			if (Object.prototype.hasOwnProperty.call(columns, nextIndex)) {
+			if (Object.hasOwn(columns, nextIndex)) {
 				return this.sort(row, nextRow, columns, types, nextIndex);
 			}
 			return orderTypes.same;

package/tests/unit/components/zd-date-input/date-input.spec.ts

@@ -146,6 +146,7 @@ describe('DateInput', () => {
         displayFormat: 'MMMM DD, YYYY',
         inputFormat: 'DD MM YYYY',
       });
+      instance.focus(new Event('focus'), {});
       // set value directly
       instance.value = '10/12/2020'; // DD/MM/YYYY
       expect(instance.value).toBe('10/12/2020');
@@ -164,69 +165,6 @@ describe('DateInput', () => {
       });
     });
 
-    it('when initial mask and complex displayFormat, should behave the same when setting via value/displayValue', () => {
-      const instance = new DateInput({
-        name: 'date',
-        component: 'DateInput',
-        dateFormat: 'DD/MM/YYYY',
-        displayFormat: 'MMMM DD, YYYY',
-        mask: '## ## ####',
-      });
-      instance.value = '08/12/2020'; // DD/MM/YYYY
-      expect(instance.value).toBe('08/12/2020');
-      expect(instance.displayValue).toBe('08 12 2020');
-
-      instance.displayValue = '09 12 2020'; // DD MM YYYY
-      expect(instance.value).toBe('09/12/2020');
-      expect(instance.displayValue).toBe('09 12 2020');
-
-      instance.blur(new Event('blur'), {});
-      expect(instance.value).toBe('09/12/2020');
-      expect(instance.displayValue).toBe('December 09, 2020');
-    });
-
-    it('when initial mask is defined and simple displayFormat, should use displayFormat as mask fallback', () => {
-      const instance = new DateInput({
-        name: 'date',
-        component: 'DateInput',
-        dateFormat: 'DD/MM/YYYY',
-        displayFormat: 'MM/DD/YYYY',
-        mask: '## ## ####',
-      });
-      instance.value = '08/12/2020'; // DD/MM/YYYY
-      expect(instance.value).toBe('08/12/2020');
-      expect(instance.displayValue).toBe('12 08 2020');
-
-      instance.displayValue = '12 09 2020'; // DD MM YYYY
-      expect(instance.value).toBe('09/12/2020');
-      expect(instance.displayValue).toBe('12 09 2020');
-
-      instance.blur(new Event('blur'), {});
-      expect(instance.value).toBe('09/12/2020');
-      expect(instance.displayValue).toBe('12/09/2020');
-    });
-
-    it('should display value with no delimiters', () => {
-      const instance = new DateInput({
-        name: 'date',
-        component: 'DateInput',
-        dateFormat: 'DD/MM/YYYY',
-        displayFormat: 'MMDDYYYY',
-        mask: '## ## ####',
-      });
-      instance.value = '08/12/2020'; // DD/MM/YYYY
-      expect(instance.value).toBe('08/12/2020');
-      expect(instance.displayValue).toBe('12 08 2020');
-
-      instance.displayValue = '12 09 2020'; // DD MM YYYY
-      expect(instance.value).toBe('09/12/2020');
-      expect(instance.displayValue).toBe('12 09 2020');
-
-      instance.blur(new Event('blur'), {});
-      expect(instance.value).toBe('09/12/2020');
-      expect(instance.displayValue).toBe('12092020');
-    });
-
     it('should not call change event if the value is the same', () => {
       const changeFn = jest.fn();
       const instance = new DateInput({
@@ -254,6 +192,7 @@ describe('DateInput', () => {
         displayFormat: 'MMMM DD, YYYY',
         inputFormat: 'MM/DD/YYYY',
       });
+      instance.focus(new Event('focus'), {});
       // set value directly
       instance.value = '10/12/2020'; // DD/MM/YYYY
       expect(instance.value).toBe('10/12/2020');
@@ -280,6 +219,7 @@ describe('DateInput', () => {
         displayFormat: 'MMMM DD, YYYY',
         inputFormat: 'MM/DD/YYYY',
       });
+      instance.focus(new Event('focus'), {});
       instance.value = '08/12/2020'; // DD/MM/YYYY
       expect(instance.value).toBe('08/12/2020');
       expect(instance.displayValue).toBe('12/08/2020');
@@ -516,26 +456,6 @@ describe('DateInput', () => {
       expect(eventFn).toHaveBeenCalled();
       expect(instance.value).toBeNull();
     });
-
-    it('should remove date mask if initial mask is set and value is valid', () => {
-      const eventFn = jest.fn();
-      const instance = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        mask: '## ## ####',
-      });
-
-      instance.displayValue = '12 21 2020';
-      expect(eventFn).not.toHaveBeenCalled();
-
-      instance.events = {
-        blur: eventFn,
-      };
-      instance.blur(new Event('blur'), {});
-
-      expect(eventFn).toHaveBeenCalled();
-      expect(instance.mask).toBe<string>('');
-    });
   });
 
   describe('mounted', () => {
@@ -550,7 +470,7 @@ describe('DateInput', () => {
       instance.setDateValue = setDateValueSpy;
       instance.formatter = formatterSpy;
 
-      instance.onMounted();
+      instance.onMounted({});
 
       expect(formatterSpy).not.toHaveBeenCalled();
       expect(setDateValueSpy).not.toHaveBeenCalled();
@@ -567,7 +487,7 @@ describe('DateInput', () => {
       instance.setDateValue = setDateValueSpy;
       instance.formatter = formatterSpy;
 
-      instance.onMounted();
+      instance.onMounted({});
 
       expect(formatterSpy).toHaveBeenCalledWith('02/02/2002');
       expect(setDateValueSpy).toHaveBeenCalled();
@@ -575,65 +495,31 @@ describe('DateInput', () => {
   });
 
   describe('focus()', () => {
-    it('if initial mask and value is set, should assign initialMask to mask', () => {
-      const eventFn = jest.fn();
-      const instance = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        mask: '## ## ####',
-      });
-
-      instance.mask = '';
-      instance.setDateValue('02-28-2020');
-
-      expect(eventFn).not.toHaveBeenCalled();
-
-      instance.events = {
-        focus: eventFn,
-      };
-      instance.focus(new Event('focus'), {});
-
-      jest.runAllTimers();
-
-      expect(eventFn).toHaveBeenCalled();
-
-      expect(instance.mask).toBe('## ## ####');
-    });
-
-    it('if initial mask or value is not set, should not assign initialMask to mask', () => {
-      const eventFn = jest.fn();
+    it('when value is invalid, should not change the displayValue on focus', () => {
       const instance = new DateInput({
         name: 'date',
         component: 'ZdDateInput',
-        displayFormat: 'DD/MM/YYYY',
+        inputFormat: 'DD/MM/YYYY',
       });
-
-      instance.setDateValue('21-12-2020');
-
-      expect(eventFn).not.toHaveBeenCalled();
-
-      instance.events = {
-        focus: eventFn,
-      };
+      instance.value = '99/99/9999';
       instance.focus(new Event('focus'), {});
-
-      expect(eventFn).toHaveBeenCalled();
-      expect(instance.updateMask()).toBe<string>('##/##/####');
-      expect(instance.mask).toBe<string>('##/##/####');
+      expect(instance.displayValue).toBe('99/99/9999');
     });
   });
 
   describe('FormatterParserProvider', () => {
+    const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
+    const formatterDateTimeFn = FormatterParserProvider.getFormatter('ZdDateTime');
+    const parserFn = FormatterParserProvider.getParser('ZdDateInput');
+    const parserDateTimeFn = FormatterParserProvider.getParser('ZdDateTime');
+
     it('should return formatter function', () => {
-      const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
       expect(formatterFn).toBeInstanceOf(Function);
 
-      const formatterDateTimeFn = FormatterParserProvider.getFormatter('ZdDateTime');
       expect(formatterDateTimeFn).toBeInstanceOf(Function);
     });
 
     it('should format date', () => {
-      const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
       expect(formatterFn('12-20-2019')).toBe('12-20-2019');
       expect(formatterFn('20-12-2019')).toBe('20-12-2019');
       expect(formatterFn('aaa')).toBe('aaa');
@@ -641,88 +527,31 @@ describe('DateInput', () => {
     });
 
     it('when value is invalid and mask is set, should get same value', () => {
-      const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
-
       const formatted = formatterFn('20/12', {
         dateFormat: 'DD/MM/YYYY',
         displayFormat: 'YYYY-MM-DD',
-        mask: '####/##/##',
-        initialMask: '####/##/##',
       });
 
       expect(formatted).toBe('20/12');
     });
 
-    it('when value is valid and mask is set, should get masked value', () => {
-      const formatterFn = FormatterParserProvider.getFormatter('ZdDateInput');
-
-      const formatted = formatterFn('20/12/2020', {
-        dateFormat: 'DD/MM/YYYY',
-        displayFormat: 'YYYY-MM-DD',
-        mask: '##/##/####',
-        initialMask: '##/##/####',
-      });
-
-      expect(formatted).toBe('20/12/2020');
-    });
-
     it('should format date time', () => {
-      const formatterFn = FormatterParserProvider.getFormatter('ZdDateTime');
-      expect(formatterFn('12-20-2019 12:34:56')).toBe('12-20-2019 12:34:56');
-      expect(formatterFn('20-12-2019 12:34:56')).toBe('20-12-2019 12:34:56');
-      expect(formatterFn('aaa')).toBe('aaa');
-      expect(formatterFn('')).toBe('');
-      expect(formatterFn('20/12/2019 12:34:56', {
+      expect(formatterDateTimeFn('12-20-2019 12:34:56')).toBe('12-20-2019 12:34:56');
+      expect(formatterDateTimeFn('20-12-2019 12:34:56')).toBe('20-12-2019 12:34:56');
+      expect(formatterDateTimeFn('aaa')).toBe('aaa');
+      expect(formatterDateTimeFn('')).toBe('');
+      expect(formatterDateTimeFn('20/12/2019 12:34:56', {
         dateTimeFormat: 'DD/MM/YYYY HH:mm:ss',
         displayFormat: 'YYYY-MM-DD HH:mm:ss',
       })).toBe('2019-12-20 12:34:56');
     });
 
     it('should return parser function', () => {
-      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
       expect(parserFn).toBeInstanceOf(Function);
-      const parserDateTimeFn = FormatterParserProvider.getParser('ZdDateTime');
       expect(parserDateTimeFn).toBeInstanceOf(Function);
     });
 
-    it('when formatted value is masked, should remove mask and parse using displayFormat mask', () => {
-      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
-
-      const parsed = parserFn('2019/12/20', {
-        dateFormat: 'DD/MM/YYYY',
-        displayFormat: 'YYYY-MM-DD',
-        mask: '####/##/##',
-      });
-
-      expect(parsed).toBe('20/12/2019');
-    });
-
-    it('when formatted value is masked and can\'t be masked using displayFmt mask, should parse using dateFmt mask', () => {
-      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
-
-      const parsed = parserFn('20-12-2019', {
-        dateFormat: 'DD/MM/YYYY',
-        displayFormat: 'YYYY MMMM, Do',
-        mask: '##-##-####',
-      });
-
-      expect(parsed).toBe('20/12/2019');
-    });
-
-    it('when formatted value is masked and can\'t use neither displayFmt or dateFmt mask, should not parse', () => {
-      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
-
-      const parsed = parserFn('20-12-2019', {
-        dateFormat: 'Do/MM/YYYY',
-        displayFormat: 'YYYY MMMM, Do',
-        mask: '##-##-####',
-      });
-
-      expect(parsed).toBe('20-12-2019');
-    });
-
     it('should parse date', () => {
-      const parserFn = FormatterParserProvider.getParser('ZdDateInput');
       expect(parserFn('12-20-2019')).toBe('12-20-2019');
       expect(parserFn('20-12-2019')).toBe('20-12-2019');
       expect(parserFn('aaa')).toBe('aaa');
@@ -730,16 +559,27 @@ describe('DateInput', () => {
     });
 
     it('should parse date time', () => {
-      const parserFn = FormatterParserProvider.getParser('ZdDateTime');
-      expect(parserFn('12-20-2019 12:34:56')).toBe('12-20-2019 12:34:56');
-      expect(parserFn('20-12-2019 12:34:56')).toBe('20-12-2019 12:34:56');
-      expect(parserFn('aaa')).toBe('aaa');
-      expect(parserFn('')).toBeNull();
-      expect(parserFn('2019-12-20 12:34:56', {
+      expect(parserDateTimeFn('12-20-2019 12:34:56')).toBe('12-20-2019 12:34:56');
+      expect(parserDateTimeFn('20-12-2019 12:34:56')).toBe('20-12-2019 12:34:56');
+      expect(parserDateTimeFn('aaa')).toBe('aaa');
+      expect(parserDateTimeFn('')).toBeNull();
+      expect(parserDateTimeFn('2019-12-20 12:34:56', {
         dateTimeFormat: 'DD/MM/YYYY HH:mm:ss',
         displayFormat: 'YYYY-MM-DD HH:mm:ss',
       })).toBe('20/12/2019 12:34:56');
     });
+
+    it('when using inputFormat, if the value is invalid should not parse it', () => {
+      expect(parserFn('99 99 9999', { inputFormat: 'DD MM YYYY', isFocused: true })).toBe('99 99 9999')
+    });
+
+    it('when value is incomplete, should not parse', () => {
+      expect(parserFn('01 01', { inputFormat: 'DD MM YYYY', isFocused: true })).toBe('01 01')
+    });
+
+    it('when focused should format according to displayFormat', () => {
+      expect(formatterFn('01-01-2000', { displayFormat: 'DD/MM/YYYY', isFocused: true })).toBe('01/01/2000')
+    });
   });
 
   describe('togglePicker', () => {
@@ -790,91 +630,6 @@ describe('DateInput', () => {
     });
   });
 
-  describe('updateMask', () => {
-    it('should not change mask when initial mask is empty string', () => {
-      const date = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        mask: '',
-      });
-
-      expect(date.mask).toEqual('');
-      expect(date.updateMask()).toEqual('');
-    });
-
-    it('when no mask is set, should get mask based on displayFormat', () => {
-      const date = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        displayFormat: 'DD MM YYYY',
-      });
-
-      expect(date.updateMask()).toBe('## ## ####');
-      expect(date.mask).toBe('## ## ####');
-    });
-
-    it('when initial mask is undefined but mask is set, should get mask based on displayFormat', () => {
-      const date = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        displayFormat: 'DD MM YYYY',
-      });
-
-      date.mask = '#';
-
-      expect(date.updateMask()).toBe('## ## ####');
-      expect(date.mask).toBe('## ## ####');
-    });
-
-    it('when initial mask is set, should not get mask based on displayFormat', () => {
-      const date = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        mask: '##-##-####',
-        displayFormat: 'DD MM YYYY',
-      });
-
-      expect(date.updateMask()).toBe('##-##-####');
-      expect(date.mask).toBe('##-##-####');
-    });
-
-    it('when initial mask is set and value is valid, should not remove masks', () => {
-      const date = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        dateFormat: 'DD/MM/YYYY',
-        mask: '##-##-####',
-        displayFormat: 'DD MM YYYY',
-      });
-
-      expect(date.updateMask()).toBe('##-##-####');
-      expect(date.mask).toBe('##-##-####');
-
-      date.value = '17/11/2020';
-
-      expect(date.updateMask()).toBe('##-##-####');
-      expect(date.mask).toBe('##-##-####');
-    });
-
-    it('when initial mask is set and value is set but invalid, should not change mask', () => {
-      const date = new DateInput({
-        name: 'date',
-        component: 'ZdDateInput',
-        dateFormat: 'DD/MM/YYYY',
-        mask: '##-##-####',
-        displayFormat: 'DD MM YYYY',
-      });
-
-      expect(date.updateMask()).toBe('##-##-####');
-      expect(date.mask).toBe('##-##-####');
-
-      date.value = '17/11';
-
-      expect(date.updateMask()).toBe('##-##-####');
-      expect(date.mask).toBe('##-##-####');
-    });
-  });
-
   describe('events', () => {
     it('should call onDateClick event', () => {
       const spy = jest.fn();