core: fire change events if raw input was changed

uNmAnNeR · Dec 21, 2023 · 9bae1d6 · 9bae1d6
1 parent 3a390bb
commit 9bae1d6
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 3 deletions.
diff --git a/packages/imask/example.html b/packages/imask/example.html
@@ -11,8 +11,57 @@ <h1>IMask Core Demo</h1>
   <script src="dist/imask.js"></script>
   <!-- <script src="https://unpkg.com/imask"></script> -->
   <script type="text/javascript">
+    const numberOpts = {
+      mask: Number,
+      thousandsSeparator: ' ',
+      scale: 2,
+      radix: '.',
+      expose: true,
+    };
+
+    class NegativeNumberMask extends IMask.MaskedNumber {
+      get typedValue () {
+        return -Math.abs(super.typedValue);
+      }
+      set typedValue (value) {
+        super.typedValue = Math.abs(value);
+      }
+    }
+
+    function dispatchMaskIndex (value) {
+      if (!value) return 0;
+      else if (value.indexOf('-') === 0 || value.indexOf('-') === 1) return 2;
+      else return 1;
+    }
+
     const opts = {
-      mask: /字/g,
+      mask: [
+        {
+          mask: '',
+        },
+        {
+          mask: '$num',
+          blocks: {
+            num: numberOpts,
+          }
+        },
+        {
+          mask: '{-}$num',
+          blocks: {
+            num: {
+              ...numberOpts,
+              mask: NegativeNumberMask,
+              min: 0,
+            }
+          }
+        }
+      ],
+      dispatch: (appended, dynamicMasked, flags, tail) => {
+        const value = dynamicMasked.rawInputValue + appended + String(tail);
+        const masked = dynamicMasked.compiledMasks[dispatchMaskIndex(value)];
+        dynamicMasked.exposeMask = masked;
+        return masked;
+      }
     };
 
     const input = document.getElementById('input');

diff --git a/packages/imask/src/controls/input.ts b/packages/imask/src/controls/input.ts
@@ -29,6 +29,7 @@ class InputMask<Opts extends FactoryArg=Record<string, unknown>> {
   declare _value: string;
   declare _changingCursorPos: number;
   declare _unmaskedValue: string;
+  declare _rawInputValue: string;
   declare _selection: Selection;
   declare _cursorChanging?: ReturnType<typeof setTimeout>;
   declare _inputEvent?: InputEvent;
@@ -44,6 +45,7 @@ class InputMask<Opts extends FactoryArg=Record<string, unknown>> {
     this._listeners = {};
     this._value = '';
     this._unmaskedValue = '';
+    this._rawInputValue = '';
 
     this._saveSelection = this._saveSelection.bind(this);
     this._onInput = this._onInput.bind(this);
@@ -109,6 +111,19 @@ class InputMask<Opts extends FactoryArg=Record<string, unknown>> {
     this.alignCursor();
   }
 
+    /** Raw input value */
+  get rawInputValue (): string {
+    return this._rawInputValue;
+  }
+
+  set rawInputValue (str: string) {
+    if (this.rawInputValue === str) return;
+
+    this.masked.rawInputValue = str;
+    this.updateControl();
+    this.alignCursor();
+  }
+
   /** Typed unmasked value */
   get typedValue (): FactoryReturnMasked<Opts>['typedValue'] {
     return this.masked.typedValue;
@@ -195,12 +210,18 @@ class InputMask<Opts extends FactoryArg=Record<string, unknown>> {
   updateControl () {
     const newUnmaskedValue = this.masked.unmaskedValue;
     const newValue = this.masked.value;
+    const newRawInputValue = this.masked.rawInputValue;
     const newDisplayValue = this.displayValue;
-    const isChanged = (this.unmaskedValue !== newUnmaskedValue ||
-      this.value !== newValue);
+
+    const isChanged =
+      this.unmaskedValue !== newUnmaskedValue ||
+      this.value !== newValue ||
+      this._rawInputValue !== newRawInputValue
+    ;
 
     this._unmaskedValue = newUnmaskedValue;
     this._value = newValue;
+    this._rawInputValue = newRawInputValue;
 
     if (this.el.value !== newDisplayValue) this.el.value = newDisplayValue;
     if (isChanged) this._fireChangeEvents();