feat(MaskDefault, MaskNumber): add allowEmpty option

ionited · Oct 6, 2021 · 92b222c · 92b222c
1 parent 6cfa0a8
commit 92b222c
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 12 deletions.
diff --git a/src/masks/default.ts b/src/masks/default.ts
@@ -1,19 +1,43 @@
 import { MaskData, MaskCore, MaskOptions } from '../core';
 
+interface MaskDefaultOptions {
+  allowEmpty?: boolean;
+  mask: string;
+}
+
 export class MaskDefault implements MaskOptions {
 
   instance: MaskCore;
   firstInput = 0;
-  mask: string;
   maskGroups: any[];
+  options: MaskDefaultOptions = {
+    allowEmpty: false,
+    mask: ''
+  };
+
+  private default = '';
+
+  constructor(el: HTMLInputElement, options: string | MaskDefaultOptions) {
+    if (typeof options === 'object')
+      this.options = {
+        allowEmpty: options.allowEmpty,
+        mask: options.mask
+      };
+    else
+      this.options = {
+        allowEmpty: false,
+        mask: options
+      };
 
-  constructor(el: HTMLInputElement, mask: string) {
-    this.mask = mask;
     this.maskGroups = this.getMaskGroups();
 
     this.instance = new MaskCore(el, this);
   }
 
+  init(data: MaskData) {
+    if (data.input || !this.options.allowEmpty) this.format(data);
+  }
+
   format(data: MaskData) {
     let
       val = '',
@@ -37,14 +61,36 @@ export class MaskDefault implements MaskOptions {
     data.output = val;
     data.cursorPosition = data.delete ? Math.max(this.firstInput, data.cursorPosition) : Math.max(firstInvalidIndex, lastValidIndex);
   }
+
+  blur(data: MaskData) {
+    if (this.options.allowEmpty && data.input === this.default) data.output = '';
+  }
+
+  mouseover(data: MaskData) {
+    if (this.options.allowEmpty) this.format(data);
+  }
+
+  mouseout(data: MaskData) {
+    if (this.options.allowEmpty && data.input === this.default && document.activeElement != this.instance.el) data.output = '';
+  }
 
   private getMaskGroups() {
     let maskGroups = [] as any[];
 
-    for (let i = 0; i < this.mask.length; i = i + 1) {
-      if (this.mask[i] === '9') maskGroups.push(/^[0-9]$/);
-      else if (this.mask[i] === 'A') maskGroups.push(/^[A-Za-zÀ-ÿ]$/);
-      else maskGroups.push(this.mask[i]);
+    for (let i = 0; i < this.options.mask.length; i = i + 1) {
+      if (this.options.mask[i] === '9') {
+        maskGroups.push(/^[0-9]$/);
+
+        this.default += '_';
+      } else if (this.options.mask[i] === 'A') {
+        maskGroups.push(/^[A-Za-zÀ-ÿ]$/);
+
+        this.default += '_';
+      } else {
+        maskGroups.push(this.options.mask[i]);
+
+        this.default += this.options.mask[i];
+      }
     }
 
     return maskGroups;

diff --git a/src/masks/number.ts b/src/masks/number.ts
@@ -1,6 +1,7 @@
 import { MaskData, MaskCore, MaskOptions } from '../core';
 
 interface MaskNumberOptions {
+  allowEmpty: boolean;
   decimal: number;
   decimalPoint: string;
   end: boolean;
@@ -12,16 +13,20 @@ export class MaskNumber implements MaskOptions {
 
   instance: MaskCore;
   options: MaskNumberOptions = {
+    allowEmpty: false,
     decimal: 2,
     decimalPoint: ',',
     end: false,
     prefix: '',
     thousandPoint: '.'
   };
 
+  private default = '';
+
   constructor(el: HTMLInputElement, options: true | MaskNumberOptions) {
     if (typeof options === 'object')
       this.options = {
+        allowEmpty: options.allowEmpty,
         decimal: options.decimal ?? 2,
         decimalPoint: options.decimalPoint ? options.decimalPoint : ',',
         end: options.end ?? false,
@@ -30,16 +35,21 @@ export class MaskNumber implements MaskOptions {
       };
 
     this.instance = new MaskCore(el, this);
+    this.default = `0${this.getDecimal()}`;
   }
 
   init(data: MaskData) {
-    if (data.input) {
-      data.input = data.input.replace(/\./g, this.options.decimalPoint);
+    if (data.input || !this.options.allowEmpty) {
+      if (data.input) {
+        data.input = data.input.replace(/\./g, this.options.decimalPoint);
 
-      const decimal = data.input.indexOf(this.options.decimalPoint);
+        const decimal = data.input.indexOf(this.options.decimalPoint);
 
-      data.input = `${data.input.substring(0, decimal === -1 ? data.input.length : decimal)}${this.getDecimal(decimal === -1 ? '' : data.input.substr(decimal + 1))}`;
-    } else data.input = `0${this.getDecimal()}`;
+        data.input = `${data.input.substring(0, decimal === -1 ? data.input.length : decimal)}${this.getDecimal(decimal === -1 ? '' : data.input.substr(decimal + 1))}`;
+      } else data.input = `0${this.getDecimal()}`;
+
+      this.format(data);
+    }
   }
 
   format(data: MaskData) {
@@ -86,6 +96,18 @@ export class MaskNumber implements MaskOptions {
     } else if (this.options.end) data.cursorPosition = data.output.length - (data.inputRaw.length - data.cursorPosition);
   }
 
+  blur(data: MaskData) {
+    if (this.options.allowEmpty && data.input === this.default) data.output = '';
+  }
+
+  mouseover(data: MaskData) {
+    if (this.options.allowEmpty) this.format(data);
+  }
+
+  mouseout(data: MaskData) {
+    if (this.options.allowEmpty && data.input === this.default && document.activeElement != this.instance.el) data.output = '';
+  }
+
   private getDecimal(decimal = '') {
     return `${this.options.decimal > 0 ? this.options.decimalPoint : ''}${(decimal.length > this.options.decimal ? decimal.substr(0, this.options.decimal) : decimal).padEnd(this.options.decimal, '0')}`;
   }