@zeedhi/common 3.0.5 → 3.0.7

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

@@ -1,4 +1,4 @@
-import { Config, FormatterParserProvider, Mask, dayjs } from '@zeedhi/core';
+import { Config, FormatterParserProvider } from '@zeedhi/core';
 import { DateInput } from '../zd-date-input/date-input';
 import { IMonth } from './interfaces';
 
@@ -42,24 +42,6 @@ export class Month extends DateInput implements IMonth {
 		this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormat);
 		this.inputFormat = this.getInitValue('inputFormat', props.inputFormat, this.inputFormat);
 	}
-
-	public blur(event: Event, element: any) {
-		super.blur(event, element);
-		// Always set displayValue to long format if displayFormat contains MMMM
-		if (this.displayFormat.includes('MMMM') && this.value && dayjs(this.value, this.dateFormat, true).isValid()) {
-			this.internalDisplayValue = dayjs(this.value, this.dateFormat).format(this.displayFormat);
-		}
-	}
-
-	public focus(event: Event, element: any) {
-		super.focus(event, element);
-		// Always set displayValue to long format if displayFormat contains MMMM
-		if (this.displayFormat.includes('MMMM') && this.value && dayjs(this.value, this.dateFormat, true).isValid()) {
-			this.internalDisplayValue = dayjs(this.value, this.dateFormat).format(this.displayFormat);
-		} else if (this.inputFormat && this.value && dayjs(this.value, this.dateFormat, true).isValid()) {
-			this.internalDisplayValue = dayjs(this.value, this.dateFormat).format(this.inputFormat);
-		}
-	}
 }
 
 FormatterParserProvider.registerFormatter(
@@ -70,37 +52,17 @@ FormatterParserProvider.registerFormatter(
 			dateFormat = Config.monthFormat,
 			displayFormat = Config.monthDisplayFormat,
 			inputFormat = Config.monthInputFormat,
-			mask = '',
-			initialMask,
-			isSimpleDisplay = false,
-		}: any = {},
+			isFocused,
+		}: {
+			dateFormat?: string;
+			displayFormat?: string;
+			inputFormat?: string;
+			isFocused?: boolean;
+		} = {},
 	) => {
-		if (!value) {
-			return '';
-		}
-
-		const isDateValid = dayjs(value, dateFormat, true).isValid();
+		const dateFormatter = FormatterParserProvider.getFormatter('ZdDateInput');
 
-		if (!isDateValid) {
-			return value;
-		}
-
-		if (mask && initialMask) {
-			if (inputFormat) {
-				return dayjs(value, dateFormat).format(inputFormat);
-			}
-
-			let valueToUnmask = value;
-			if (isSimpleDisplay) {
-				valueToUnmask = dayjs(value, dateFormat).format(displayFormat);
-			}
-
-			const unmasked = Mask.getValueWithoutMask(valueToUnmask);
-			const masked = Mask.getValueWithMask(unmasked, mask);
-			return masked;
-		}
-
-		return dayjs(value, dateFormat).format(displayFormat);
+		return dateFormatter(value, { dateFormat, displayFormat, inputFormat, isFocused });
 	},
 );
 
@@ -112,50 +74,16 @@ FormatterParserProvider.registerParser(
 			dateFormat = Config.monthFormat,
 			displayFormat = Config.monthDisplayFormat,
 			inputFormat = Config.monthInputFormat,
-			mask = '',
-			initialMask,
-			isSimpleDisplay = false,
-		}: any = {},
+			isFocused,
+		}: {
+			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);
-				}
-
-				return value;
-			}
-
-			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);
-
-			if (dayjs(masked, dateFormat, true).format(dateFormat) === masked) {
-				return masked;
-			}
-		}
+		const dateParser = FormatterParserProvider.getParser('ZdDateInput');
 
-		return value;
+		return dateParser(value, { dateFormat, displayFormat, inputFormat, isFocused });
 	},
 );

package/src/styles/_display.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /**
  * The MIT License (MIT)
  *
@@ -26,7 +28,7 @@
  */
  
 /* .zd-hidden */
-@each $size, $media_query in $display-breakpoints {
+@each $size, $media_query in variables.$display-breakpoints {
     .zd-hidden {
       &-#{$size} {
         @media #{$media_query} {

package/src/styles/_elevation.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 /**
  * The MIT License (MIT)
  *
@@ -114,7 +115,7 @@
  );
  
  @mixin elevation($z, $important: false) {
-   box-shadow: map-get($shadow-key-umbra, $z), map-get($shadow-key-penumbra, $z), map-get($shadow-key-ambient, $z) if($important, !important, null);
+   box-shadow: map.get($shadow-key-umbra, $z), map.get($shadow-key-penumbra, $z), map.get($shadow-key-ambient, $z) if(sass($important): !important);
  }
  
  $elevation: 24;

package/src/styles/_functions.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "sass:meta";
+
 /**
  * The MIT License (MIT)
  *
@@ -29,29 +32,29 @@
     $result: $parent-map;
   
     @each $key, $child in $child-map {
-      $parent-has-key: map-has-key($result, $key);
-      $parent-value: map-get($result, $key);
-      $parent-type: type-of($parent-value);
-      $child-type: type-of($child);
+      $parent-has-key: map.has-key($result, $key);
+      $parent-value: map.get($result, $key);
+      $parent-type: meta.type-of($parent-value);
+      $child-type: meta.type-of($child);
       $parent-is-map: $parent-type == map;
       $child-is-map: $child-type == map;
   
       @if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
-        $result: map-merge($result, ( $key: $child ));
+        $result: map.merge($result, ( $key: $child ));
       }
       @else {
-        $result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
+        $result: map.merge($result, ( $key: map-deep-merge($parent-value, $child) ));
       }
     }
   
     @return $result;
   }
   
-  @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-    $min: map-get($breakpoints, $name);
-    @return if($min != 0, $min, null);
+  @function breakpoint-min($name, $breakpoints: variables.$grid-breakpoints) {
+    $min: map.get($breakpoints, $name);
+    @return if(sass($min != 0): $min);
   }
   
-  @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
-    @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+  @function breakpoint-infix($name, $breakpoints: variables.$grid-breakpoints) {
+    @return if(sass(breakpoint-min($name, $breakpoints) == null): ""; else: "-#{$name}");
   }  

package/src/styles/_utilities.scss

@@ -25,10 +25,15 @@
  * (https://github.com/vuetifyjs/vuetify/blob/v1.5.16/packages/vuetify/src/styles/tools/_utilities.sass)
  */
  
- @import '_functions';
+ @use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use '_functions';
+@use "variables";
 
  $utilities: () !default;
- $utilities: map-deep-merge(
+ $utilities: functions.map-deep-merge(
    (
      "display": (
        responsive: true,
@@ -160,55 +165,55 @@
        responsive: true,
        property: margin,
        class: zd-ma,
-       values: map-merge($spacers, (auto: auto))
+       values: map.merge(variables.$spacers, (auto: auto))
      ),
      "margin-x": (
        responsive: true,
        property: margin-right margin-left,
        class: zd-mx,
-       values: map-merge($spacers, (auto: auto))
+       values: map.merge(variables.$spacers, (auto: auto))
      ),
      "margin-y": (
        responsive: true,
        property: margin-top margin-bottom,
        class: zd-my,
-       values: map-merge($spacers, (auto: auto))
+       values: map.merge(variables.$spacers, (auto: auto))
      ),
      "margin-top": (
        responsive: true,
        property: margin-top,
        class: zd-mt,
-       values: map-merge($spacers, (auto: auto))
+       values: map.merge(variables.$spacers, (auto: auto))
      ),
      "margin-right": (
        responsive: true,
        property: margin-right,
        class: zd-mr,
-       values: map-merge($spacers, (auto: auto))
+       values: map.merge(variables.$spacers, (auto: auto))
      ),
      "margin-bottom": (
        responsive: true,
        property: margin-bottom,
        class: zd-mb,
-       values: map-merge($spacers, (auto: auto))
+       values: map.merge(variables.$spacers, (auto: auto))
      ),
      "margin-left": (
        responsive: true,
        property: margin-left,
        class: zd-ml,
-       values: map-merge($spacers, (auto: auto))
+       values: map.merge(variables.$spacers, (auto: auto))
      ),
      "margin-start": (
        responsive: true,
        property: margin-left,
        class: zd-ms,
-       values: map-merge($spacers, (auto: auto))
+       values: map.merge(variables.$spacers, (auto: auto))
      ),
      "margin-end": (
        responsive: true,
        property: margin-right,
        class: zd-me,
-       values: map-merge($spacers, (auto: auto))
+       values: map.merge(variables.$spacers, (auto: auto))
      ),
  
      // Negative margin utilities
@@ -216,55 +221,55 @@
        responsive: true,
        property: margin,
        class: zd-ma,
-       values: $negative-spacers
+       values: variables.$negative-spacers
      ),
      "negative-margin-x": (
        responsive: true,
        property: margin-right margin-left,
        class: zd-mx,
-       values: $negative-spacers
+       values: variables.$negative-spacers
      ),
      "negative-margin-y": (
        responsive: true,
        property: margin-top margin-bottom,
        class: zd-my,
-       values: $negative-spacers
+       values: variables.$negative-spacers
      ),
      "negative-margin-top": (
        responsive: true,
        property: margin-top,
        class: zd-mt,
-       values: $negative-spacers
+       values: variables.$negative-spacers
      ),
      "negative-margin-right": (
        responsive: true,
        property: margin-right,
        class: zd-mr,
-       values: $negative-spacers
+       values: variables.$negative-spacers
      ),
      "negative-margin-bottom": (
        responsive: true,
        property: margin-bottom,
        class: zd-mb,
-       values: $negative-spacers
+       values: variables.$negative-spacers
      ),
      "negative-margin-left": (
        responsive: true,
        property: margin-left,
        class: zd-ml,
-       values: $negative-spacers
+       values: variables.$negative-spacers
      ),
      "negative-margin-start": (
        responsive: true,
        property: margin-left,
        class: zd-ms,
-       values: $negative-spacers
+       values: variables.$negative-spacers
      ),
      "negative-margin-end": (
        responsive: true,
        property: margin-right,
        class: zd-me,
-       values: $negative-spacers
+       values: variables.$negative-spacers
      ),
  
      // Padding utilities
@@ -272,55 +277,55 @@
        responsive: true,
        property: padding,
        class: zd-pa,
-       values: $spacers
+       values: variables.$spacers
      ),
      "padding-x": (
        responsive: true,
        property: padding-right padding-left,
        class: zd-px,
-       values: $spacers
+       values: variables.$spacers
      ),
      "padding-y": (
        responsive: true,
        property: padding-top padding-bottom,
        class: zd-py,
-       values: $spacers
+       values: variables.$spacers
      ),
      "padding-top": (
        responsive: true,
        property: padding-top,
        class: zd-pt,
-       values: $spacers
+       values: variables.$spacers
      ),
      "padding-right": (
        responsive: true,
        property: padding-right,
        class: zd-pr,
-       values: $spacers
+       values: variables.$spacers
      ),
      "padding-bottom": (
        responsive: true,
        property: padding-bottom,
        class: zd-pb,
-       values: $spacers
+       values: variables.$spacers
      ),
      "padding-left": (
        responsive: true,
        property: padding-left,
        class: zd-pl,
-       values: $spacers
+       values: variables.$spacers
      ),
      "padding-start": (
        responsive: true,
        property: padding-left,
        class: zd-ps,
-       values: $spacers
+       values: variables.$spacers
      ),
      "padding-end": (
        responsive: true,
        property: padding-right,
        class: zd-pe,
-       values: $spacers
+       values: variables.$spacers
      ),
  
      // Gap utilities
@@ -328,19 +333,19 @@
        responsive: true,
        property: gap,
        class: zd-gap-a,
-       values: $spacers
+       values: variables.$spacers
      ),
      "gap-x": (
        responsive: true,
        property: column-gap,
        class: zd-gap-x,
-       values: $spacers
+       values: variables.$spacers
      ),
      "gap-y": (
        responsive: true,
        property: row-gap,
        class: zd-gap-y,
-       values: $spacers
+       values: variables.$spacers
      ),
  
      // Text
@@ -354,8 +359,8 @@
    $utilities
  );
  
- @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-   $min: breakpoint-min($name, $breakpoints);
+ @mixin media-breakpoint-up($name, $breakpoints: variables.$grid-breakpoints) {
+   $min: functions.breakpoint-min($name, $breakpoints);
    @if $min {
      @media (min-width: $min) {
        @content;
@@ -367,32 +372,32 @@
  }
  
  @mixin generate-utility($utility, $infix) {
-   $values: map-get($utility, values);
+   $values: map.get($utility, values);
  
    // If the values are a list or string, convert it into a map
-   @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
-     $values: zip($values, $values);
+   @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
+     $values: list.zip($values, $values);
    }
  
    @each $value in $values {
-     $properties: map-get($utility, property);
+     $properties: map.get($utility, property);
  
      // Multiple properties are possible, for example with vertical or horizontal margins or paddings
-     @if type-of($properties) == 'string' {
-       $properties: append((), $properties);
+     @if meta.type-of($properties) == 'string' {
+       $properties: list.append((), $properties);
      }
  
      // Property can be a map, where the key is a mixin to include
-     @if type-of($properties) == 'map' {
+     @if meta.type-of($properties) == 'map' {
        @each $dir in $properties {
-         $mixin: nth($dir, 1);
+         $mixin: list.nth($dir, 1);
          // SASS doesn't support dynamic mixin invocation
          // https://github.com/sass/sass/issues/626
          @if $mixin == 'ltr' {
-           @include generate-utility-body($utility, nth($dir, 2), $value, $infix);
+           @include generate-utility-body($utility, list.nth($dir, 2), $value, $infix);
          }
          @else if $mixin == 'rtl' {
-           @include generate-utility-body($utility, nth($dir, 2), $value, $infix);
+           @include generate-utility-body($utility, list.nth($dir, 2), $value, $infix);
          }
          @else {
            @error 'Only RTL and LTR are supported';
@@ -407,20 +412,20 @@
  
  @mixin generate-utility-body($utility, $properties, $value, $infix) {
    // Use custom class if present
-   $property-class: map-get($utility, class);
-   $property-class: if($property-class, $property-class, nth($properties, 1));
+   $property-class: map.get($utility, class);
+   $property-class: if(sass($property-class): $property-class; else: list.nth($properties, 1));
  
    // Don't prefix if value key is null (eg. with shadow class)
-   $property-class-modifier: if(nth($value, 1), "-" + nth($value, 1), "");
+   $property-class-modifier: if(sass(list.nth($value, 1)): "-" + list.nth($value, 1); else: "");
  
-   $value: nth($value, 2);
+   $value: list.nth($value, 2);
  
    .#{$property-class + $infix + $property-class-modifier} {
-     @for $i from 1 through length($properties) {
-       $property: nth($properties, $i);
+     @for $i from 1 through list.length($properties) {
+       $property: list.nth($properties, $i);
        $val: $value;
-       @if type-of($value) == 'list' and length($properties) == length($value) {
-         $val: nth($value, $i);
+       @if meta.type-of($value) == 'list' and list.length($properties) == list.length($value) {
+         $val: list.nth($value, $i);
        }
        #{$property}: $val !important;
      }
@@ -428,16 +433,16 @@
  }
  
  // Utilities
- @each $breakpoint in map-keys($grid-breakpoints) {
+ @each $breakpoint in map.keys(variables.$grid-breakpoints) {
    // Generate media query if needed
    @include media-breakpoint-up($breakpoint) {
-     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+     $infix: functions.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
  
      // Loop over each utility property
      @each $key, $utility in $utilities {
        // The utility can be disabled with `false`, thus check if the utility is a map first
        // Only proceed if responsive media queries are enabled or if it's the base media query
-       @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
+       @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
          @include generate-utility($utility, $infix);
        }
      }
@@ -449,7 +454,7 @@
    @each $key, $utility in $utilities {
      // The utility can be disabled with `false`, thus check if the utility is a map first
      // Then check if the utility needs print styles
-     @if type-of($utility) == "map" and map-get($utility, print) == true {
+     @if meta.type-of($utility) == "map" and map.get($utility, print) == true {
        @include generate-utility($utility, "-print");
      }
    }
@@ -465,14 +470,14 @@
    max-width: 100%;
  }
  
- @each $breakpoint in map-keys($grid-breakpoints) {
+ @each $breakpoint in map.keys(variables.$grid-breakpoints) {
    // Generate media query if needed
    @include media-breakpoint-up($breakpoint) {
-     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+     $infix: functions.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
  
      // Loop over each column
      @for $n from 1 through $grid-columns {
-       $val: percentage($n / $grid-columns);
+       $val: math.percentage(math.div($n, $grid-columns) or calc($n / $grid-columns));
        #{$grid-class + $infix + "-" + $n} {
          max-width: $val;
          flex: 0 0 $val;
@@ -495,14 +500,14 @@
    margin-left: auto;
  }
  
- @each $breakpoint in map-keys($grid-breakpoints) {
+ @each $breakpoint in map.keys(variables.$grid-breakpoints) {
    // Generate media query if needed
    @include media-breakpoint-up($breakpoint) {
-     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+     $infix: functions.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
  
      // Loop over each column
      @for $n from 1 through $column-offset {
-       $val: percentage($n / $column-offset);
+       $val: math.percentage(math.div($n, $column-offset) or calc($n / $column-offset));
        #{$column-offset-class + $infix + "-" + $n} {        
          margin-left: $val;
        } 

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';