v8.0

packages/imask/example.html

@@ -12,25 +12,8 @@ <h1>IMask Core Demo</h1>
   <!-- <script src="https://unpkg.com/imask"></script> -->
   <script type="text/javascript">
     const opts = {
-      mask: 'VLv\\alue MM',
+      mask: '000',
       lazy: false, // make placeholder always visible
-
-      blocks: {
-        YY: {
-          mask: '00',
-        },
-
-        VL: {
-          mask: IMask.MaskedEnum,
-          enum: ['TV', 'HD', 'VR'],
-        },
-
-        MM: {
-          mask: IMask.MaskedRange,
-          from: 1,
-          to: 12,
-        },
-      },
     };
 
     const input = document.getElementById('input');

packages/imask/src/core/change-details.ts

@@ -19,7 +19,7 @@ class ChangeDetails {
   /** Raw inserted is used by dynamic mask */
   declare rawInserted: string;
   /** Can skip chars */
-  declare skip: boolean;
+  declare skip?: boolean;
 
 
   static normalize (prep: string | [string, ChangeDetails]): [string, ChangeDetails] {
@@ -34,7 +34,6 @@ class ChangeDetails {
       inserted: '',
       rawInserted: '',
       tailShift: 0,
-      skip: false,
     }, details);
   }
 
@@ -53,8 +52,11 @@ class ChangeDetails {
     return this.tailShift + this.inserted.length;
   }
 
-  get consumed (): boolean {
-    return Boolean(this.rawInserted) || this.skip;
+  // TODO only for CharChangeDetails
+  // TODO `rawInserted` and `skip` should be mutually exclusive
+  consumed (block: { isComplete: boolean }): boolean {
+    return Boolean(this.rawInserted) || this.skip === true ||
+      this.skip == null && !block.isComplete && !this.rawInserted;
   }
 
   equals (details: ChangeDetails): boolean {

packages/imask/src/masked/enum.ts

@@ -79,7 +79,7 @@ class MaskedEnum extends MaskedPattern {
       return d;
     }
 
-    return new ChangeDetails({ skip: !this.isComplete });
+    return new ChangeDetails();
   }
 
   override extractTail (fromPos: number=0, toPos: number=this.displayValue.length): TailDetails {

packages/imask/src/masked/number.ts

@@ -127,7 +127,6 @@ class MaskedNumber extends Masked<number> {
         !flags.input && !flags.raw
       ) ? ch.replace(this._mapToRadixRegExp, this.radix) : ch
     ), flags);
-    if (ch && !prepCh) details.skip = true;
 
     if (prepCh && !this.allowPositive && !this.value && prepCh !== '-') details.aggregate(this._appendChar('-'));
 
@@ -197,7 +196,6 @@ class MaskedNumber extends Masked<number> {
       appendDetails = new ChangeDetails({
         inserted: this._value.slice(oldValue.length),
         rawInserted: skip ? '' : ch,
-        skip,
       });
     }
 

packages/imask/src/masked/pattern.ts

@@ -324,7 +324,7 @@ class MaskedPattern<Value=string> extends Masked<Value> {
 
       details.aggregate(blockDetails);
 
-      if (blockDetails.consumed) break; // go next char
+      if (blockDetails.consumed(block)) break; // go next char
     }
 
     return details;

packages/imask/src/masked/pattern/input-definition.ts

@@ -104,7 +104,7 @@ class PatternInputDefinition<Opts extends FactoryOpts=any> implements PatternBlo
   }
 
   _appendChar (ch: string, flags: AppendFlags<PatternInputDefinitionState<Opts>>={}): ChangeDetails {
-    if (this.isFilled) return new ChangeDetails();
+    if (this.isFilled) return new ChangeDetails({ skip: false });
 
     const state = this.masked.state;
     // simulate input

packages/imask/src/masked/range.ts

@@ -80,12 +80,7 @@ class MaskedRange extends MaskedPattern {
   }
 
   override doPrepareChar (ch: string, flags: AppendFlags={}): [string, ChangeDetails] {
-    let details: ChangeDetails;
-    [ch, details] = super.doPrepareChar(ch.replace(/\D/g, ''), flags);
-
-    if (!ch) details.skip = !this.isComplete;
-
-    return [ch, details];
+    return super.doPrepareChar(ch.replace(/\D/g, ''), flags);
   }
 
   override _appendCharRaw (ch: string, flags: AppendFlags<MaskedPatternState>={}): ChangeDetails {

packages/imask/src/masked/repeat.ts

@@ -78,7 +78,8 @@ class RepeatBlock<M extends FactoryArg> extends MaskedPattern {
     ) {
       const blockDetails = block._appendChar(ch, { ...flags, _beforeTailState: flags._beforeTailState?._blocks?.[bi] });
 
-      if (blockDetails.skip && allocated) {
+      const consumed = blockDetails.consumed(block);
+      if (consumed && !blockDetails.rawInserted && allocated) {
         // remove the last allocated block and break
         this._blocks.pop();
         this.mask = this.mask.slice(1);
@@ -87,7 +88,7 @@ class RepeatBlock<M extends FactoryArg> extends MaskedPattern {
 
       details.aggregate(blockDetails);
 
-      if (blockDetails.consumed) break; // go next char
+      if (consumed) break; // go next char
     }
 
     return details;

packages/imask/test/masked/enum.ts

@@ -71,20 +71,20 @@ describe('MaskedEnum', function () {
     assert.equal(masked.value, 'aaa');
   });
 
-  it('should skip char if does not match', function () {
+  it('should consume char if does not match', function () {
     const enum_ = ['aaa', 'bbb', 'ccc'];
     const masked = new MaskedEnum({ enum: enum_ });
-    const d = masked.append('x', { input: true, raw: true });
+    const d = masked._appendChar('x', { input: true, raw: true });
 
-    assert.equal(d.skip, true);
+    assert.equal(d.consumed(masked), true);
   });
 
-  it('should not skip char if complete', function () {
+  it('should not consume char if complete', function () {
     const enum_ = ['aaa', 'bbb', 'ccc'];
     const masked = new MaskedEnum({ enum: enum_ });
     masked.value = 'aaa';
-    const d = masked.append('x', { input: true, raw: true });
+    const d = masked._appendChar('x', { input: true, raw: true });
 
-    assert.equal(d.skip, false);
+    assert.equal(d.consumed(masked), false);
   });
 });

packages/imask/test/masked/pattern/insert.ts

@@ -70,9 +70,7 @@ describe('Insert', function () {
   });
 
   it('should insert value in the middle', function () {
-    masked.updateOptions({
-      mask: '000',
-    });
+    masked.updateOptions({ mask: '000' });
     masked.splice(1, 0, '1', DIRECTION.NONE);
     assert.equal(masked.value, '_1_');
   });