@tadashi/mask - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

package.json

 {
   "name": "@tadashi/mask",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "The simple and tiny script for input mask",
@@ -29,15 +29,15 @@ "keywords": [
   "scripts": {
-    "coverage": "jest test --coverage --coverageReporters=lcov",
     "eslint": "eslint --config .eslintrc.yml --ext .js --ignore-path .gitignore .",
     "pretest": "npm run eslint",
-    "test": "NODE_OPTIONS=--experimental-vm-modules npx jest --coverage --coverageReporters=lcov --coverageReporters=text"
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest test --coverage --coverageReporters=lcov --coverageReporters=text",
+    "prepublishOnly": "npm test"
   },
   "devDependencies": {
-    "eslint": "8.23.1",
-    "eslint-config-xo": "0.42.0",
-    "eslint-plugin-unicorn": "43.0.2",
-    "jest": "29.0.3",
-    "jest-environment-jsdom": "29.0.3",
+    "eslint": "8.41.0",
+    "eslint-config-xo": "0.43.1",
+    "eslint-plugin-unicorn": "47.0.0",
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
     "simulant": "0.2.2"
   }
 }

README.md

@@ -19,3 +19,3 @@ # Mask
 
-The simple and tiny script for input mask
+The simple and tiny script for input mask.
 
@@ -26,3 +26,3 @@
 ```
-$ npm i -S @tadashi/mask
+$ npm i @tadashi/mask
 ```
@@ -41,3 +41,3 @@
 
-  const mask = new Mask(telefone)
+  const maskTelefone = new Mask(telefone)
 </script>
@@ -47,4 +47,15 @@ ```
 
+## Team
+
+[<img src="https://avatars.githubusercontent.com/u/130963?s=390" alt="Lagden" width="90">](https://github.com/lagden)
+[<img src="https://avatars.githubusercontent.com/u/8677724?s=390" alt="JonatasAmaral" width="90">](https://github.com/JonatasAmaral)
+
+
+## Donate ❤️
+
+- BTC: bc1q7famhuj5f25n6qvlm3sssnymk2qpxrfwpyq7g4
+
+
 ## License
 
-MIT © Thiago Lagden
+MIT © [Thiago Lagden](https://github.com/lagden)

src/mask.js

 /**
- * Gerador de id aleatório
- * @return {string} Retorna o uuid ou hexadecimal aleatório
+ * UUID generator
+ * @return {string} returns the hash
  */
 function _id() {
+	/* istanbul ignore next */
+	if (globalThis?.crypto?.randomUUID) {
+		return globalThis.crypto.randomUUID().replaceAll('-', '')
+	}
 	return Number(Math.random()).toString(16).slice(2, 8) + Date.now().toString(16)
@@ -17,8 +21,8 @@ }
 
-/** Class aplica mascara. */
+/** class Mask */
 class Mask {
 	/**
-	 * Pega a instância
-	 * @param {HTMLInputElement} input - elemento com Mask aplicada
-	 * @return {Mask|boolean} Retorna a instância ou false
+	 * Get Mask instance
+	 * @param {HTMLInputElement} input - element with Mask instanced
+	 * @return {Mask|undefined} returns instance or undefined
 	 * @memberof Mask
@@ -32,6 +36,6 @@ * @static
 	/**
-	 * Mascara um valor
-	 * @param {string|number} _value - valor
-	 * @param {string} _mask - formato da máscara
-	 * @return {string} Retorna o valor mascaradi
+	 * Masking a value
+	 * @param {string|number} _value - value
+	 * @param {string} _mask - mask format
+	 * @return {string} returns the masked value
 	 * @memberof Mask
@@ -42,3 +46,3 @@ * @static
 		const mask = String(_mask)
-		const value = String(_value).replace(/[^\dA-Za-z]/g, '')
+		const value = String(_value).replaceAll(/[^\dA-Za-z]/g, '')
 
@@ -66,9 +70,51 @@ const res = []
 
+	/**
+	 * @typedef {(input: HTMLInputElement, event?: Event)=>string} DynamicMask
+	 * - A function that returns the mask string on the fly.
+	 * It runs on each event, to evaluate new mask before applying it.
+	 *
+	 * The given function receives the associated input as first argument,
+	 * and the event triggering the mask as the second,
+	 *
+	 * _NOTE: no event is sent on **initial** evaluation (if constructor's `opts.init` is set to true)_
+	 *
+	 *
+	 * @typedef {{
+	 *  keyEvent: keyof HTMLElementEventMap,
+	 *  triggerOnBlur: Boolean,
+	 *  triggerOnDelete: Boolean,
+	 *  init: Boolean,
+	 *  dynamicDataMask: Boolean,
+	 *  mask: string | DynamicMask | undefined,
+	 *  maskSwapLength: number | undefined
+	 * }} Opts
+	 *
+	 * @type {Opts}
+	 */
+	opts = {
+		keyEvent: 'input',
+		triggerOnBlur: false,
+		triggerOnDelete: false, // default to false for backward compatibility
+		dynamicDataMask: false,
+		init: false,
+		mask: undefined,
+		maskSwapLength: undefined,
+	}
+
+	/**
+	* @type {Boolean | undefined}
+	*/
+	#dynamicMask = undefined
+
+	/**
+	* @param {HTMLInputElement} input
+	* @param {Partial<Opts>} opts
+	* */
 	constructor(input, opts = {}) {
-		this.opts = {
-			keyEvent: 'input',
-			triggerOnBlur: false,
-			init: false,
-			mask: '',
-			...opts,
+		// satityze user's opts
+		for (const key of Object.keys(opts)) {
+			if (opts[key] === null || opts[key] === undefined) {
+				continue
+			}
+			this.opts[key] = opts[key]
 		}
@@ -88,6 +134,7 @@
 		this.input = input
-		this.mask = input.dataset?.mask ?? this.opts.mask
 
+		this.#evaluateMask()
+
 		// Check if has mask
-		if (this.mask.length === 0) {
+		if (!this.mask) {
 			throw new Error('The mask can not be empty')
@@ -98,3 +145,3 @@ }
 		if (this.opts.init) {
-			this.input.value = Mask.masking(this.input.value, this.mask)
+			this.masking()
 		}
@@ -111,2 +158,19 @@
 
+		// observe input's data-mask changes
+		if (this.opts.dynamicDataMask === true) {
+			this.maskObserver = new globalThis.MutationObserver(([item]) => {
+				/* istanbul ignore next */
+				if (item.attributeName !== 'data-mask') {
+					return
+				}
+
+				this.mask = item.target.dataset.mask
+				this.masking()
+			})
+
+			this.maskObserver.observe(this.input, {
+				attributes: true,
+			})
+		}
+
 		// Storage instance
@@ -117,8 +181,26 @@ this.input[GUID] = _id()
 
-	masking(event) {
-		/* istanbul ignore next */
-		if (event && event.inputType === 'deleteContentBackward') {
-			return false
+	#evaluateMask() {
+		if (this.#dynamicMask === false) {
+			return
 		}
 
+		if (typeof this.opts.mask === 'function') {
+			this.mask = this.opts.mask(this.input)
+			this.#dynamicMask = true
+			return
+		}
+
+		if (Array.isArray(this.opts.mask) && typeof this.opts.maskSwapLength === 'number') {
+			const pos = this.input.value.length > this.opts.maskSwapLength ? 1 : 0
+			this.mask = this.opts.mask[pos]
+			this.#dynamicMask = true
+			return
+		}
+
+		this.#dynamicMask = false
+		this.mask = typeof this.opts.mask === 'string' ? this.opts.mask : this.input.dataset.mask
+	}
+
+	masking() {
+		this.#evaluateMask()
 		this.input.value = Mask.masking(this.input.value, this.mask)
@@ -132,2 +214,6 @@ }
 
+		if (this.maskObserver) {
+			this.maskObserver.disconnect()
+		}
+
 		if (instances.has(this.input[GUID])) {
@@ -138,4 +224,12 @@ instances.delete(this.input[GUID])
 
+	/**
+	 * @param {InputEvent} event
+	 * */
 	handleEvent(event) {
-		this.masking(event)
+		/* istanbul ignore next */
+		if (!this.opts.triggerOnDelete && (event.inputType === 'deleteContentBackward' || event.inputType === 'deleteContentForward')) {
+			return false
+		}
+
+		this.masking()
 	}
@@ -142,0 +236,0 @@ }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8900

increased by42.42%

Lines of code

195

increased by74.11%

Number of lines in readme file

58

increased by23.4%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes