From 704bcf341a9c641979b6fb24473e077fad31cbb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B5=D0=B9=20=D0=9A=D1=80?=
 =?UTF-8?q?=D1=8F=D0=B6=D0=B5=D0=B2?= <ubivaza@gmail.com>
Date: Tue, 27 Feb 2024 14:33:06 +0300
Subject: [PATCH] fix #941

---
 packages/imask/example.html                   | 22 +++++---
 packages/imask/src/core/change-details.ts     |  8 +++
 packages/imask/src/masked/base.ts             | 35 +++++++++++--
 packages/imask/src/masked/date.ts             |  9 +---
 packages/imask/src/masked/dynamic.ts          | 11 ++++
 packages/imask/src/masked/function.ts         |  2 +
 packages/imask/src/masked/number.ts           |  5 +-
 packages/imask/src/masked/pattern.ts          |  9 ++++
 packages/imask/src/masked/pattern/block.ts    |  1 +
 .../src/masked/pattern/fixed-definition.ts    |  4 ++
 .../src/masked/pattern/input-definition.ts    |  5 ++
 packages/imask/src/masked/range.ts            | 52 +++++++++++++------
 packages/imask/src/masked/regexp.ts           |  2 +
 packages/imask/test/masked/pattern/insert.ts  | 50 ++++++++++++++++++
 packages/imask/test/masked/range.ts           | 34 ++++++++++++
 15 files changed, 212 insertions(+), 37 deletions(-)

diff --git a/packages/imask/example.html b/packages/imask/example.html
index 4b058ded..f99a7a19 100644
--- a/packages/imask/example.html
+++ b/packages/imask/example.html
@@ -12,12 +12,22 @@ <h1>IMask Core Demo</h1>
   <!-- <script src="https://unpkg.com/imask"></script> -->
   <script type="text/javascript">
     const opts = {
-      mask: IMask.MaskedEnum,
-      enum: Array.from({ length: 12 }, (_, i) =>
-        new Date(0, i).toLocaleString(window.navigator.language, { month: 'long' })
-      ),
-      lazy: false,
-      matchValue: (estr, istr, matchFrom) => IMask.MaskedEnum.DEFAULTS.matchValue(estr.toLowerCase(), istr.toLowerCase(), matchFrom),
+      mask: 'HH:MM',
+      blocks: {
+        HH: {
+          mask: IMask.MaskedRange,
+          from: 0,
+          to: 23,
+          maxLength: 2,
+        },
+        MM: {
+          mask: IMask.MaskedRange,
+          from: 0,
+          to: 59,
+          maxLength: 2,
+        },
+      },
+      autofix: 'pad',
     };
 
     const input = document.getElementById('input');
diff --git a/packages/imask/src/core/change-details.ts b/packages/imask/src/core/change-details.ts
index 8acee334..3c0c5e67 100644
--- a/packages/imask/src/core/change-details.ts
+++ b/packages/imask/src/core/change-details.ts
@@ -56,6 +56,14 @@ class ChangeDetails {
   get consumed (): boolean {
     return Boolean(this.rawInserted) || this.skip;
   }
+
+  equals (details: ChangeDetails): boolean {
+    return this.inserted === details.inserted &&
+      this.tailShift === details.tailShift &&
+      this.rawInserted === details.rawInserted &&
+      this.skip === details.skip
+    ;
+  }
 }
 
 
diff --git a/packages/imask/src/masked/base.ts b/packages/imask/src/masked/base.ts
index ccd3b936..c792e356 100644
--- a/packages/imask/src/masked/base.ts
+++ b/packages/imask/src/masked/base.ts
@@ -41,6 +41,7 @@ type MaskedOptions<M extends Masked=Masked, Props extends keyof M=never> = Parti
   | 'overwrite'
   | 'eager'
   | 'skipInvalid'
+  | 'autofix'
   | Props
 >>;
 
@@ -75,6 +76,8 @@ abstract class Masked<Value=any> {
   abstract eager?: boolean | 'remove' | 'append' | undefined;
   /** */
   abstract skipInvalid?: boolean | undefined;
+  /** */
+  abstract autofix?: boolean | 'pad' | undefined;
 
   /** */
   declare _initialized: boolean;
@@ -216,11 +219,33 @@ abstract class Masked<Value=any> {
 
   /** Appends char */
   _appendChar (ch: string, flags: AppendFlags={}, checkTail?: TailDetails): ChangeDetails {
-    const consistentState: MaskedState = this.state;
+    const consistentState = this.state;
     let details: ChangeDetails;
     [ch, details] = this.doPrepareChar(ch, flags);
 
-    if (ch) details = details.aggregate(this._appendCharRaw(ch, flags));
+    if (ch) {
+      details = details.aggregate(this._appendCharRaw(ch, flags));
+
+      // TODO handle `skip`?
+
+      // try `autofix` lookahead
+      if (!details.rawInserted && this.autofix === 'pad') {
+        const noFixState = this.state;
+        this.state = consistentState;
+
+        let fixDetails = this.pad(flags);
+        const chDetails = this._appendCharRaw(ch, flags);
+        fixDetails = fixDetails.aggregate(chDetails);
+
+        // if fix was applied or
+        // if details are equal use skip restoring state optimization
+        if (chDetails.rawInserted || fixDetails.equals(details)) {
+          details = fixDetails;
+        } else {
+          this.state = noFixState;
+        }
+      }
+    }
 
     if (details.inserted) {
       let consistentTail;
@@ -373,7 +398,7 @@ abstract class Masked<Value=any> {
     if (this.commit) this.commit(this.value, this);
   }
 
-  splice (start: number, deleteCount: number, inserted: string, removeDirection: Direction = DIRECTION.NONE, flags: AppendFlags = { input: true }): ChangeDetails {
+  splice (start: number, deleteCount: number, inserted='', removeDirection: Direction = DIRECTION.NONE, flags: AppendFlags = { input: true }): ChangeDetails {
     const tailPos: number = start + deleteCount;
     const tail: TailDetails = this.extractTail(tailPos);
 
@@ -433,6 +458,10 @@ abstract class Masked<Value=any> {
       Masked.EMPTY_VALUES.includes(value) && Masked.EMPTY_VALUES.includes(tval) ||
       (this.format ? this.format(value, this) === this.format(this.typedValue, this) : false);
   }
+
+  pad (flags?: AppendFlags): ChangeDetails {
+    return new ChangeDetails();
+  }
 }
 
 
diff --git a/packages/imask/src/masked/date.ts b/packages/imask/src/masked/date.ts
index e0ad03d8..720fcbd9 100644
--- a/packages/imask/src/masked/date.ts
+++ b/packages/imask/src/masked/date.ts
@@ -82,13 +82,12 @@ class MaskedDate extends MaskedPattern<DateValue> {
   declare min?: Date;
   /** End date */
   declare max?: Date;
-  /** */
-  declare autofix?: boolean | 'pad' | undefined;
   /** Format typed value to string */
   declare format: (value: DateValue, masked: Masked) => string;
   /** Parse string to get typed value */
   declare parse: (str: string, masked: Masked) => DateValue;
 
+
   constructor (opts?: MaskedDateOptions) {
     super(MaskedDate.extractPatternOptions({
       ...(MaskedDate.DEFAULTS as MaskedDateOptions),
@@ -122,12 +121,6 @@ class MaskedDate extends MaskedPattern<DateValue> {
     }
     Object.assign(patternBlocks, this.blocks, blocks);
 
-    // add autofix
-    Object.keys(patternBlocks).forEach(bk => {
-      const b = patternBlocks[bk];
-      if (!('autofix' in b) && 'autofix' in opts) b.autofix = opts.autofix;
-    });
-
     super._update({
       ...patternOpts,
       mask: isString(mask) ? mask : pattern,
diff --git a/packages/imask/src/masked/dynamic.ts b/packages/imask/src/masked/dynamic.ts
index add5d5b0..32219525 100644
--- a/packages/imask/src/masked/dynamic.ts
+++ b/packages/imask/src/masked/dynamic.ts
@@ -43,6 +43,7 @@ class MaskedDynamic<Value=any> extends Masked<Value> {
   declare _overwrite?: this['overwrite'];
   declare _eager?: this['eager'];
   declare _skipInvalid?: this['skipInvalid'];
+  declare _autofix?: this['autofix'];
 
   static DEFAULTS: typeof Masked.DEFAULTS & Pick<MaskedDynamic, 'dispatch'> = {
     ...Masked.DEFAULTS,
@@ -402,6 +403,16 @@ class MaskedDynamic<Value=any> extends Masked<Value> {
     this._skipInvalid = skipInvalid;
   }
 
+  override get autofix (): boolean | 'pad' | undefined {
+    return this.currentMask ?
+      this.currentMask.autofix :
+      this._autofix;
+  }
+
+  override set autofix (autofix: boolean | 'pad' | undefined) {
+    this._autofix = autofix;
+  }
+
   override maskEquals (mask: any): boolean {
     return Array.isArray(mask) ?
       this.compiledMasks.every((m, mi) => {
diff --git a/packages/imask/src/masked/function.ts b/packages/imask/src/masked/function.ts
index dc18f6dd..d62133fd 100644
--- a/packages/imask/src/masked/function.ts
+++ b/packages/imask/src/masked/function.ts
@@ -16,6 +16,8 @@ class MaskedFunction<Value=any> extends Masked<Value> {
   declare eager?: boolean | 'remove' | 'append' | undefined;
   /** */
   declare skipInvalid?: boolean | undefined;
+  /** */
+  declare autofix?: boolean | 'pad' | undefined;
 
   override updateOptions (opts: Partial<MaskedFunctionOptions>) {
     super.updateOptions(opts);
diff --git a/packages/imask/src/masked/number.ts b/packages/imask/src/masked/number.ts
index 854d906c..9d60e437 100644
--- a/packages/imask/src/masked/number.ts
+++ b/packages/imask/src/masked/number.ts
@@ -16,7 +16,6 @@ type MaskedNumberOptions = MaskedOptions<MaskedNumber,
   | 'max'
   | 'normalizeZeros'
   | 'padFractionalZeros'
-  | 'autofix'
 >;
 
 /** Number mask */
@@ -62,12 +61,12 @@ class MaskedNumber extends Masked<number> {
   declare eager?: boolean | 'remove' | 'append' | undefined;
   /** */
   declare skipInvalid?: boolean | undefined;
+  /** */
+  declare autofix?: boolean | 'pad' | undefined;
   /** Format typed value to string */
   declare format: (value: number, masked: Masked) => string;
   /** Parse string to get typed value */
   declare parse: (str: string, masked: Masked) => number;
-  /** */
-  declare autofix?: boolean;
 
   declare _numberRegExp: RegExp;
   declare _thousandsSeparatorRegExp: RegExp;
diff --git a/packages/imask/src/masked/pattern.ts b/packages/imask/src/masked/pattern.ts
index 03a6eb0e..bf86d14d 100644
--- a/packages/imask/src/masked/pattern.ts
+++ b/packages/imask/src/masked/pattern.ts
@@ -79,6 +79,8 @@ class MaskedPattern<Value=string> extends Masked<Value> {
   declare eager?: boolean | 'remove' | 'append' | undefined;
   /** */
   declare skipInvalid?: boolean | undefined;
+  /** */
+  declare autofix?: boolean | 'pad' | undefined;
 
   declare _blocks: Array<PatternBlock>;
   declare _maskedBlocks: {[key: string]: Array<number>};
@@ -131,6 +133,7 @@ class MaskedPattern<Value=string> extends Masked<Value> {
             placeholderChar: this.placeholderChar,
             displayChar: this.displayChar,
             overwrite: this.overwrite,
+            autofix: this.autofix,
             ...bOpts,
             repeat,
             parent: this,
@@ -532,6 +535,12 @@ class MaskedPattern<Value=string> extends Masked<Value> {
     if (!indices) return [];
     return indices.map(gi => this._blocks[gi]);
   }
+
+  override pad (flags?: AppendFlags): ChangeDetails {
+    const details = new ChangeDetails();
+    this._forEachBlocksInRange(0, this.displayValue.length, b => details.aggregate(b.pad(flags)))
+    return details;
+  }
 }
 
 
diff --git a/packages/imask/src/masked/pattern/block.ts b/packages/imask/src/masked/pattern/block.ts
index fae3d3a7..d4bc4a4f 100644
--- a/packages/imask/src/masked/pattern/block.ts
+++ b/packages/imask/src/masked/pattern/block.ts
@@ -30,4 +30,5 @@ interface PatternBlock<State=MaskedState> {
   doCommit (): void;
   nearestInputPos (cursorPos: number, direction: Direction): number;
   totalInputPositions (fromPos?: number, toPos?: number): number;
+  pad (flags?: AppendFlags): ChangeDetails;
 }
diff --git a/packages/imask/src/masked/pattern/fixed-definition.ts b/packages/imask/src/masked/pattern/fixed-definition.ts
index 29ab3b21..0e8605a5 100644
--- a/packages/imask/src/masked/pattern/fixed-definition.ts
+++ b/packages/imask/src/masked/pattern/fixed-definition.ts
@@ -152,4 +152,8 @@ class PatternFixedDefinition implements PatternBlock {
     this._value = state._value;
     this._isRawInput = Boolean(state._rawInputValue);
   }
+
+  pad (flags?: AppendFlags): ChangeDetails {
+    return this._appendPlaceholder();
+  }
 }
diff --git a/packages/imask/src/masked/pattern/input-definition.ts b/packages/imask/src/masked/pattern/input-definition.ts
index 9f474a0f..547a536a 100644
--- a/packages/imask/src/masked/pattern/input-definition.ts
+++ b/packages/imask/src/masked/pattern/input-definition.ts
@@ -58,6 +58,7 @@ class PatternInputDefinition<Opts extends FactoryOpts=any> implements PatternBlo
   /** */
   declare displayChar: MaskedPattern['displayChar'];
 
+
   constructor(opts: PatternInputDefinitionOptions<Opts>) {
     const { parent, isOptional, placeholderChar, displayChar, lazy, eager, ...maskOpts } = opts;
 
@@ -201,4 +202,8 @@ class PatternInputDefinition<Opts extends FactoryOpts=any> implements PatternBlo
       _beforeTailState: flags?._beforeTailState?.masked || flags?._beforeTailState as unknown as MaskedState,
     };
   }
+
+  pad (flags?: AppendFlags): ChangeDetails {
+    return new ChangeDetails();
+  }
 }
diff --git a/packages/imask/src/masked/range.ts b/packages/imask/src/masked/range.ts
index 4e19c0ff..1bea150d 100644
--- a/packages/imask/src/masked/range.ts
+++ b/packages/imask/src/masked/range.ts
@@ -1,11 +1,11 @@
 import ChangeDetails from '../core/change-details';
 import IMask from '../core/holder';
 import { type AppendFlags } from './base';
-import MaskedPattern, { type MaskedPatternOptions } from './pattern';
+import MaskedPattern, { MaskedPatternState, type MaskedPatternOptions } from './pattern';
 
 
 type MaskedRangePatternOptions = MaskedPatternOptions &
-  Pick<MaskedRange, 'from' | 'to' | 'autofix'> &
+  Pick<MaskedRange, 'from' | 'to'> &
   Partial<Pick<MaskedRange, 'maxLength'>>;
 
 export
@@ -24,8 +24,6 @@ class MaskedRange extends MaskedPattern {
   declare from: number;
   /** Max bound */
   declare to: number;
-  /** */
-  declare autofix?: boolean | 'pad';
 
   get _matchFrom (): number {
     return this.maxLength - String(this.from).length;
@@ -85,29 +83,29 @@ class MaskedRange extends MaskedPattern {
     let details: ChangeDetails;
     [ch, details] = super.doPrepareChar(ch.replace(/\D/g, ''), flags);
 
-    if (!this.autofix || !ch) {
-      details.skip = !this.isComplete;
-      return [ch, details];
-    }
+    if (!ch) details.skip = !this.isComplete;
+
+    return [ch, details];
+  }
+
+  override _appendCharRaw (ch: string, flags: AppendFlags<MaskedPatternState>={}): ChangeDetails {
+    if (!this.autofix || this.value.length + 1 > this.maxLength) return super._appendCharRaw(ch, flags);
 
     const fromStr = String(this.from).padStart(this.maxLength, '0');
     const toStr = String(this.to).padStart(this.maxLength, '0');
 
-    const nextVal = this.value + ch;
-    if (nextVal.length > this.maxLength) return ['', details];
-
-    const [minstr, maxstr] = this.boundaries(nextVal);
+    const [minstr, maxstr] = this.boundaries(this.value + ch);
 
-    if (Number(maxstr) < this.from) return [fromStr[nextVal.length - 1], details];
+    if (Number(maxstr) < this.from) return super._appendCharRaw(fromStr[this.value.length], flags);
 
     if (Number(minstr) > this.to) {
-      if (this.autofix === 'pad' && nextVal.length < this.maxLength) {
-        return ['', details.aggregate(this.append(fromStr[nextVal.length - 1]+ch, flags))];
+      if (!flags.tail && this.autofix === 'pad' && this.value.length + 1 < this.maxLength) {
+        return super._appendCharRaw(fromStr[this.value.length], flags).aggregate(this._appendCharRaw(ch, flags));
       }
-      return [toStr[nextVal.length - 1], details];
+      return super._appendCharRaw(toStr[this.value.length], flags);
     }
 
-    return [ch, details];
+    return super._appendCharRaw(ch, flags);
   }
 
   override doValidate (flags: AppendFlags): boolean {
@@ -121,6 +119,26 @@ class MaskedRange extends MaskedPattern {
     return this.from <= Number(maxstr) && Number(minstr) <= this.to &&
       super.doValidate(flags);
   }
+
+  override pad (flags?: AppendFlags): ChangeDetails {
+    const details = new ChangeDetails();
+    if (this.value.length === this.maxLength) return details;
+
+    const value = this.value;
+    const padLength = this.maxLength - this.value.length;
+
+    if (padLength) {
+      this.reset();
+      for (let i=0; i < padLength; ++i) {
+        details.aggregate(super._appendCharRaw('0', flags as AppendFlags<MaskedPatternState>));
+      }
+
+      // append tail
+      value.split('').forEach(ch => this._appendCharRaw(ch));
+    }
+
+    return details;
+  }
 }
 
 
diff --git a/packages/imask/src/masked/regexp.ts b/packages/imask/src/masked/regexp.ts
index 6bc7e402..ec36492e 100644
--- a/packages/imask/src/masked/regexp.ts
+++ b/packages/imask/src/masked/regexp.ts
@@ -16,6 +16,8 @@ class MaskedRegExp extends Masked<string> {
   declare eager?: boolean | 'remove' | 'append' | undefined;
   /** */
   declare skipInvalid?: boolean | undefined;
+  /** */
+  declare autofix?: boolean | 'pad' | undefined;
 
   override updateOptions (opts: Partial<MaskedRegExpOptions>) {
     super.updateOptions(opts);
diff --git a/packages/imask/test/masked/pattern/insert.ts b/packages/imask/test/masked/pattern/insert.ts
index a4a1eb01..bf8bfee2 100644
--- a/packages/imask/test/masked/pattern/insert.ts
+++ b/packages/imask/test/masked/pattern/insert.ts
@@ -312,4 +312,54 @@ describe('Insert', function () {
       assert.equal(masked.value, 'aa0');
     });
   });
+
+  describe('autofix: pad', function () {
+    it('should pad', function () {
+      masked.updateOptions({
+        mask: 'Na',
+        blocks: {
+          N: {
+            mask: MaskedRange,
+            from: 0,
+            to: 10,
+          },
+        },
+        autofix: 'pad',
+      });
+
+      masked.value = '1';
+      assert.equal(masked.value, '1__');
+
+      masked.splice(1, 0, 'a');
+      assert.equal(masked.value, '01a');
+    });
+
+    it('should not pad on tail', function () {
+      masked.updateOptions({
+        mask: 'HH:MM',
+        blocks: {
+          HH: {
+            mask: MaskedRange,
+            from: 0,
+            to: 23,
+            maxLength: 2,
+          },
+          MM: {
+            mask: MaskedRange,
+            from: 0,
+            to: 59,
+            maxLength: 2,
+          },
+        },
+        autofix: 'pad',
+        lazy: false,
+      });
+
+      masked.value = '13:34';
+      assert.equal(masked.value, '13:34');
+
+      masked.splice(0, 1);
+      assert.equal(masked.value, '23:4_');
+    });
+  });
 });
diff --git a/packages/imask/test/masked/range.ts b/packages/imask/test/masked/range.ts
index b50c0a16..fdcbe9f0 100644
--- a/packages/imask/test/masked/range.ts
+++ b/packages/imask/test/masked/range.ts
@@ -54,4 +54,38 @@ describe('MaskedRange', function () {
     masked.append('6', { input: true });
     assert.equal(masked.value, '06');
   });
+
+  it('should pad value', function () {
+    masked.updateOptions({
+      from: 0,
+      to: 100,
+      maxLength: 0,
+      autofix: 'pad',
+    });
+
+    masked.value = '';
+    masked.pad();
+    assert.equal(masked.value, '000');
+
+    masked.value = '2';
+    masked.pad();
+    assert.equal(masked.value, '002');
+
+    masked.value = '02';
+    masked.pad();
+    assert.equal(masked.value, '002');
+  });
+
+  it('should not pad value on tail', function () {
+    masked.updateOptions({
+      from: 0,
+      to: 20,
+      maxLength: 0,
+      autofix: 'pad',
+    });
+
+    masked.value = '';
+    masked.appendTail('3');
+    assert.equal(masked.value, '2');
+  });
 });