@maskito/core - npm Package Compare versions

Comparing version 2.5.0 to 3.0.0

index.cjs.js

@@ -66,3 +66,3 @@ 'use strict';
 
-const MASKITO_DEFAULT_ELEMENT_PREDICATE = e => e.isContentEditable
+const MASKITO_DEFAULT_ELEMENT_PREDICATE = (e) => e.isContentEditable
     ? maskitoAdaptContentEditable(e)
@@ -334,3 +334,3 @@ : e.querySelector('input,textarea') ||
     destroy() {
-        this.listeners.forEach(stopListen => stopListen());
+        this.listeners.forEach((stopListen) => stopListen());
     }
@@ -444,3 +444,3 @@ }
     const notEmptySelection = isForward ? [from, to + 1] : [from - 1, to];
-    return notEmptySelection.map(x => Math.min(Math.max(x, 0), value.length));
+    return notEmptySelection.map((x) => Math.min(Math.max(x, 0), value.length));
 }
@@ -477,3 +477,3 @@
         .reverse()
-        .findIndex(char => char.match(SPACE_REG));
+        .findIndex((char) => char.match(SPACE_REG));
     return [
@@ -506,38 +506,2 @@ selectedWordLength !== -1 ? to - trailingSpaces.length - selectedWordLength : 0,
 
-function maskitoInitialCalibrationPlugin(customOptions) {
-    return (element, options) => {
-        const from = element.selectionStart || 0;
-        const to = element.selectionEnd || 0;
-        maskitoUpdateElement(element, {
-            value: maskitoTransform(element.value, customOptions || options),
-            selection: [from, to],
-        });
-    };
-}
-
-function maskitoStrictCompositionPlugin() {
-    return (element, maskitoOptions) => {
-        const listener = (event) => {
-            if (event.inputType !== 'insertCompositionText') {
-                return;
-            }
-            const selection = [
-                element.selectionStart || 0,
-                element.selectionEnd || 0,
-            ];
-            const elementState = {
-                selection,
-                value: element.value,
-            };
-            const validatedState = maskitoTransform(elementState, maskitoOptions);
-            if (!areElementStatesEqual(elementState, validatedState)) {
-                event.preventDefault();
-                maskitoUpdateElement(element, validatedState);
-            }
-        };
-        element.addEventListener('input', listener);
-        return () => element.removeEventListener('input', listener);
-    };
-}
-
 class Maskito extends MaskHistory {
@@ -553,5 +517,5 @@ constructor(element, maskitoOptions) {
         this.postprocessor = maskitoPipe(this.options.postprocessors);
-        this.teardowns = this.options.plugins.map(plugin => plugin(this.element, this.options));
+        this.teardowns = this.options.plugins.map((plugin) => plugin(this.element, this.options));
         this.updateHistory(this.elementState);
-        this.eventListener.listen('keydown', event => {
+        this.eventListener.listen('keydown', (event) => {
             if (isRedo(event)) {
@@ -566,3 +530,3 @@ event.preventDefault();
         });
-        this.eventListener.listen('beforeinput', event => {
+        this.eventListener.listen('beforeinput', (event) => {
             var _a;
@@ -662,3 +626,3 @@ const isForward = event.inputType.includes('Forward');
         this.eventListener.destroy();
-        this.teardowns.forEach(teardown => teardown === null || teardown === void 0 ? void 0 : teardown());
+        this.teardowns.forEach((teardown) => teardown === null || teardown === void 0 ? void 0 : teardown());
     }
@@ -768,2 +732,63 @@ updateElementState({ value, selection }, eventInit = {
 
+function maskitoChangeEventPlugin() {
+    return (element) => {
+        if (element.isContentEditable) {
+            return;
+        }
+        let value = element.value;
+        const valueListener = () => {
+            value = element.value;
+        };
+        const blurListener = () => {
+            if (element.value !== value) {
+                element.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+        };
+        element.addEventListener('focus', valueListener);
+        element.addEventListener('change', valueListener);
+        element.addEventListener('blur', blurListener);
+        return () => {
+            element.removeEventListener('focus', valueListener);
+            element.removeEventListener('change', valueListener);
+            element.removeEventListener('blur', blurListener);
+        };
+    };
+}
+
+function maskitoInitialCalibrationPlugin(customOptions) {
+    return (element, options) => {
+        const from = element.selectionStart || 0;
+        const to = element.selectionEnd || 0;
+        maskitoUpdateElement(element, {
+            value: maskitoTransform(element.value, customOptions || options),
+            selection: [from, to],
+        });
+    };
+}
+
+function maskitoStrictCompositionPlugin() {
+    return (element, maskitoOptions) => {
+        const listener = (event) => {
+            if (event.inputType !== 'insertCompositionText') {
+                return;
+            }
+            const selection = [
+                element.selectionStart || 0,
+                element.selectionEnd || 0,
+            ];
+            const elementState = {
+                selection,
+                value: element.value,
+            };
+            const validatedState = maskitoTransform(elementState, maskitoOptions);
+            if (!areElementStatesEqual(elementState, validatedState)) {
+                event.preventDefault();
+                maskitoUpdateElement(element, validatedState);
+            }
+        };
+        element.addEventListener('input', listener);
+        return () => element.removeEventListener('input', listener);
+    };
+}
+
 exports.MASKITO_DEFAULT_ELEMENT_PREDICATE = MASKITO_DEFAULT_ELEMENT_PREDICATE;
@@ -773,2 +798,3 @@ exports.MASKITO_DEFAULT_OPTIONS = MASKITO_DEFAULT_OPTIONS;
 exports.maskitoAdaptContentEditable = maskitoAdaptContentEditable;
+exports.maskitoChangeEventPlugin = maskitoChangeEventPlugin;
 exports.maskitoInitialCalibrationPlugin = maskitoInitialCalibrationPlugin;
@@ -775,0 +801,0 @@ exports.maskitoPipe = maskitoPipe;

index.esm.js

@@ -64,3 +64,3 @@ function getContentEditableSelection(element) {
 
-const MASKITO_DEFAULT_ELEMENT_PREDICATE = e => e.isContentEditable
+const MASKITO_DEFAULT_ELEMENT_PREDICATE = (e) => e.isContentEditable
     ? maskitoAdaptContentEditable(e)
@@ -332,3 +332,3 @@ : e.querySelector('input,textarea') ||
     destroy() {
-        this.listeners.forEach(stopListen => stopListen());
+        this.listeners.forEach((stopListen) => stopListen());
     }
@@ -442,3 +442,3 @@ }
     const notEmptySelection = isForward ? [from, to + 1] : [from - 1, to];
-    return notEmptySelection.map(x => Math.min(Math.max(x, 0), value.length));
+    return notEmptySelection.map((x) => Math.min(Math.max(x, 0), value.length));
 }
@@ -475,3 +475,3 @@
         .reverse()
-        .findIndex(char => char.match(SPACE_REG));
+        .findIndex((char) => char.match(SPACE_REG));
     return [
@@ -504,38 +504,2 @@ selectedWordLength !== -1 ? to - trailingSpaces.length - selectedWordLength : 0,
 
-function maskitoInitialCalibrationPlugin(customOptions) {
-    return (element, options) => {
-        const from = element.selectionStart || 0;
-        const to = element.selectionEnd || 0;
-        maskitoUpdateElement(element, {
-            value: maskitoTransform(element.value, customOptions || options),
-            selection: [from, to],
-        });
-    };
-}
-
-function maskitoStrictCompositionPlugin() {
-    return (element, maskitoOptions) => {
-        const listener = (event) => {
-            if (event.inputType !== 'insertCompositionText') {
-                return;
-            }
-            const selection = [
-                element.selectionStart || 0,
-                element.selectionEnd || 0,
-            ];
-            const elementState = {
-                selection,
-                value: element.value,
-            };
-            const validatedState = maskitoTransform(elementState, maskitoOptions);
-            if (!areElementStatesEqual(elementState, validatedState)) {
-                event.preventDefault();
-                maskitoUpdateElement(element, validatedState);
-            }
-        };
-        element.addEventListener('input', listener);
-        return () => element.removeEventListener('input', listener);
-    };
-}
-
 class Maskito extends MaskHistory {
@@ -551,5 +515,5 @@ constructor(element, maskitoOptions) {
         this.postprocessor = maskitoPipe(this.options.postprocessors);
-        this.teardowns = this.options.plugins.map(plugin => plugin(this.element, this.options));
+        this.teardowns = this.options.plugins.map((plugin) => plugin(this.element, this.options));
         this.updateHistory(this.elementState);
-        this.eventListener.listen('keydown', event => {
+        this.eventListener.listen('keydown', (event) => {
             if (isRedo(event)) {
@@ -564,3 +528,3 @@ event.preventDefault();
         });
-        this.eventListener.listen('beforeinput', event => {
+        this.eventListener.listen('beforeinput', (event) => {
             var _a;
@@ -660,3 +624,3 @@ const isForward = event.inputType.includes('Forward');
         this.eventListener.destroy();
-        this.teardowns.forEach(teardown => teardown === null || teardown === void 0 ? void 0 : teardown());
+        this.teardowns.forEach((teardown) => teardown === null || teardown === void 0 ? void 0 : teardown());
     }
@@ -766,2 +730,63 @@ updateElementState({ value, selection }, eventInit = {
 
-export { MASKITO_DEFAULT_ELEMENT_PREDICATE, MASKITO_DEFAULT_OPTIONS, Maskito, maskitoAdaptContentEditable, maskitoInitialCalibrationPlugin, maskitoPipe, maskitoStrictCompositionPlugin, maskitoTransform, maskitoUpdateElement };
+function maskitoChangeEventPlugin() {
+    return (element) => {
+        if (element.isContentEditable) {
+            return;
+        }
+        let value = element.value;
+        const valueListener = () => {
+            value = element.value;
+        };
+        const blurListener = () => {
+            if (element.value !== value) {
+                element.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+        };
+        element.addEventListener('focus', valueListener);
+        element.addEventListener('change', valueListener);
+        element.addEventListener('blur', blurListener);
+        return () => {
+            element.removeEventListener('focus', valueListener);
+            element.removeEventListener('change', valueListener);
+            element.removeEventListener('blur', blurListener);
+        };
+    };
+}
+
+function maskitoInitialCalibrationPlugin(customOptions) {
+    return (element, options) => {
+        const from = element.selectionStart || 0;
+        const to = element.selectionEnd || 0;
+        maskitoUpdateElement(element, {
+            value: maskitoTransform(element.value, customOptions || options),
+            selection: [from, to],
+        });
+    };
+}
+
+function maskitoStrictCompositionPlugin() {
+    return (element, maskitoOptions) => {
+        const listener = (event) => {
+            if (event.inputType !== 'insertCompositionText') {
+                return;
+            }
+            const selection = [
+                element.selectionStart || 0,
+                element.selectionEnd || 0,
+            ];
+            const elementState = {
+                selection,
+                value: element.value,
+            };
+            const validatedState = maskitoTransform(elementState, maskitoOptions);
+            if (!areElementStatesEqual(elementState, validatedState)) {
+                event.preventDefault();
+                maskitoUpdateElement(element, validatedState);
+            }
+        };
+        element.addEventListener('input', listener);
+        return () => element.removeEventListener('input', listener);
+    };
+}
+
+export { MASKITO_DEFAULT_ELEMENT_PREDICATE, MASKITO_DEFAULT_OPTIONS, Maskito, maskitoAdaptContentEditable, maskitoChangeEventPlugin, maskitoInitialCalibrationPlugin, maskitoPipe, maskitoStrictCompositionPlugin, maskitoTransform, maskitoUpdateElement };

package.json

 {
   "name": "@maskito/core",
-  "version": "2.5.0",
+  "version": "3.0.0",
   "description": "The main zero-dependency and framework-agnostic Maskito's package to create an input mask",
@@ -5,0 +5,0 @@ "keywords": [

src/index.d.ts

 export { MASKITO_DEFAULT_ELEMENT_PREDICATE, MASKITO_DEFAULT_OPTIONS, } from './lib/constants';
 export { Maskito } from './lib/mask';
+export { maskitoChangeEventPlugin, maskitoInitialCalibrationPlugin, maskitoStrictCompositionPlugin, } from './lib/plugins';
 export { MaskitoElement, MaskitoElementPredicate, MaskitoMask, MaskitoMaskExpression, MaskitoOptions, MaskitoPlugin, MaskitoPostprocessor, MaskitoPreprocessor, } from './lib/types';
-export { maskitoAdaptContentEditable, maskitoInitialCalibrationPlugin, maskitoPipe, maskitoStrictCompositionPlugin, maskitoTransform, maskitoUpdateElement, } from './lib/utils';
+export { maskitoAdaptContentEditable, maskitoPipe, maskitoTransform, maskitoUpdateElement, } from './lib/utils';
 //# sourceMappingURL=index.d.ts.map

src/lib/utils/index.d.ts

@@ -11,6 +11,4 @@ export * from './content-editable';
 export * from './get-word-selection';
-export * from './initial-calibration-plugin';
 export * from './pipe';
-export * from './strict-composition-plugin';
 export * from './transform';
 //# sourceMappingURL=index.d.ts.map

No alert changes

Improved metrics

Total package byte prevSize

95946

2.81%

Number of package files

94

4.44%

Lines of code

1739

3.14%

No dependency changes