@vaadin/field-base - npm Package Compare versions

Comparing version 22.0.0-alpha7 to 22.0.0-alpha8

package.json

 {
   "name": "@vaadin/field-base",
-  "version": "22.0.0-alpha7",
+  "version": "22.0.0-alpha8",
   "publishConfig": {
@@ -33,3 +33,3 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-alpha7",
+    "@vaadin/component-base": "22.0.0-alpha8",
     "lit": "^2.0.0"
@@ -42,3 +42,3 @@ },
   },
-  "gitHead": "8e89419c6b44a1d225d5859e180d7b35e47ddb52"
+  "gitHead": "c24468526298ee26ad7f7280b59f6c8789e1f75f"
 }

src/input-field-mixin.js

@@ -49,2 +49,18 @@ /**
           type: String
+        },
+
+        /**
+         * A pattern matched against individual characters the user inputs.
+         * When set, the field will prevent:
+         * - `keyDown` events if the entered key doesn't match `/^_enabledCharPattern$/`
+         * - `paste` events if the pasted text doesn't match `/^_enabledCharPattern*$/`
+         * - `drop` events if the dropped text doesn't match `/^_enabledCharPattern*$/`
+         *
+         * For example, to enable entering only numbers and minus signs,
+         * `_enabledCharPattern = "[\\d-]"`
+         * @protected
+         */
+        _enabledCharPattern: {
+          type: String,
+          observer: '_enabledCharPatternChanged'
         }
@@ -58,2 +74,10 @@ };
 
+    constructor() {
+      super();
+
+      this._boundOnPaste = this._onPaste.bind(this);
+      this._boundOnDrop = this._onDrop.bind(this);
+      this._boundOnBeforeInput = this._onBeforeInput.bind(this);
+    }
+
     /**
@@ -115,2 +139,95 @@ * @param {HTMLElement} input
     }
+
+    /**
+     * Override a method from `InputMixin`.
+     * @param {!HTMLElement} input
+     * @protected
+     * @override
+     */
+    _addInputListeners(input) {
+      super._addInputListeners(input);
+
+      input.addEventListener('paste', this._boundOnPaste);
+      input.addEventListener('drop', this._boundOnDrop);
+      input.addEventListener('beforeinput', this._boundOnBeforeInput);
+    }
+
+    /**
+     * Override a method from `InputMixin`.
+     * @param {!HTMLElement} input
+     * @protected
+     * @override
+     */
+    _removeInputListeners(input) {
+      super._removeInputListeners(input);
+
+      input.removeEventListener('paste', this._boundOnPaste);
+      input.removeEventListener('drop', this._boundOnDrop);
+      input.removeEventListener('beforeinput', this._boundOnBeforeInput);
+    }
+
+    /**
+     * Override an event listener from `ClearButtonMixin`
+     * to avoid adding a separate listener.
+     * @param {!KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyDown(event) {
+      if (this._enabledCharPattern && !this.__shouldAcceptKey(event)) {
+        event.preventDefault();
+      }
+
+      super._onKeyDown(event);
+    }
+
+    /** @private */
+    __shouldAcceptKey(event) {
+      return (
+        event.metaKey ||
+        event.ctrlKey ||
+        !event.key || // allow typing anything if event.key is not supported
+        event.key.length !== 1 || // allow "Backspace", "ArrowLeft" etc.
+        this.__enabledCharRegExp.test(event.key)
+      );
+    }
+
+    /** @private */
+    _onPaste(e) {
+      if (this._enabledCharPattern) {
+        const pastedText = (e.clipboardData || window.clipboardData).getData('text');
+        if (!this.__enabledTextRegExp.test(pastedText)) {
+          e.preventDefault();
+        }
+      }
+    }
+
+    /** @private */
+    _onDrop(e) {
+      if (this._enabledCharPattern) {
+        const draggedText = e.dataTransfer.getData('text');
+        if (!this.__enabledTextRegExp.test(draggedText)) {
+          e.preventDefault();
+        }
+      }
+    }
+
+    /** @private */
+    _onBeforeInput(e) {
+      // The `beforeinput` event covers all the cases for `_enabledCharPattern`: keyboard, pasting and dropping,
+      // but it is still experimental technology so we can't rely on it. It's used here just as an additional check,
+      // because it seems to be the only way to detect and prevent specific keys on mobile devices.
+      // See https://github.com/vaadin/vaadin-text-field/issues/429
+      if (this._enabledCharPattern && e.data && !this.__enabledTextRegExp.test(e.data)) {
+        e.preventDefault();
+      }
+    }
+
+    /** @private */
+    _enabledCharPatternChanged(charPattern) {
+      if (charPattern) {
+        this.__enabledCharRegExp = new RegExp('^' + charPattern + '$');
+        this.__enabledTextRegExp = new RegExp('^' + charPattern + '*$');
+      }
+    }
   };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

89864

increased by4.34%

Lines of code

2392

increased by4.5%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@vaadin/component-base@22.0.0-alpha8(transitive)

• - Removed@vaadin/component-base@22.0.0-alpha7(transitive)

• Updated@vaadin/component-base@22.0.0-alpha8