@neovici/cosmoz-input - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+## [1.2.0](https://github.com/neovici/cosmoz-input/compare/v1.1.1...v1.2.0) (2021-02-09)
+
+
+### Features
+
+* add pattern and validate ([6c8f157](https://github.com/neovici/cosmoz-input/commit/6c8f15755479c345e8e28c259335d8e9e19f9fbb))
+
 ### [1.1.1](https://github.com/neovici/cosmoz-input/compare/v1.1.0...v1.1.1) (2021-02-05)
@@ -2,0 +9,0 @@

cosmoz-input.js

@@ -112,2 +112,3 @@ import { html, nothing } from 'lit-html'; // eslint-disable-line object-curly-newline
 				autocomplete,
+				pattern,
 				value,
@@ -122,19 +123,28 @@ label,
 
+			root = host.shadowRoot,
+
 			onInput = useCallback(e => notifyProperty(host, 'value', e.target.value), []),
 			onFocus = useCallback(e => notifyProperty(host, 'focused', e.type === 'focus'), []),
-			focus = useCallback(() => host.shadowRoot.querySelector('input')?.focus(), []);
+			focus = useCallback(() => root.querySelector('input')?.focus(), []),
+			validate = useCallback(() => {
+				const valid = root.querySelector('input')?.checkValidity();
+				host.toggleAttribute('invalid', !valid);
+				return valid;
+			}, []);
 
-		useImperativeApi({ focus }, [focus]);
+		useImperativeApi({
+			focus,
+			validate
+		}, [focus, validate]);
 
 		useEffect(() => {
-			const root = host.shadowRoot,
-				onMouseDown = e => {
-					if (e.target.matches('input, label')) {
-						return;
-					}
-					e.preventDefault(); // don't blur
-					if (!host.matches(':focus-within')) { // if input not focused
-						focus(); // focus input
-					}
-				};
+			const onMouseDown = e => {
+				if (e.target.matches('input, label')) {
+					return;
+				}
+				e.preventDefault(); // don't blur
+				if (!host.matches(':focus-within')) { // if input not focused
+					focus(); // focus input
+				}
+			};
 
@@ -155,4 +165,4 @@ root.addEventListener('mousedown', onMouseDown);
 				<input id="input" part="input"
-					type=${ type } placeholder=${ placeholder || ' ' } ?readonly=${ readonly }
-					?aria-disabled=${ disabled } ?disabled=${ disabled }
+					type=${ type } placeholder=${ placeholder || ' ' } pattern=${ ifDefined(pattern) }
+					?readonly=${ readonly } ?aria-disabled=${ disabled } ?disabled=${ disabled }
 					.value=${ live(value ?? '') } autocomplete=${ ifDefined(autocomplete) }
@@ -173,2 +183,3 @@ @input=${ onInput } @focus=${ onFocus } @blur=${ onFocus }
 		'autocomplete',
+		'pattern',
 		'readonly',
@@ -175,0 +186,0 @@ 'disabled',

package.json

 {
 	"name": "@neovici/cosmoz-input",
-	"version": "1.1.1",
+	"version": "1.2.0",
 	"description": "A input web component",
@@ -5,0 +5,0 @@ "keywords": [

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

Improved metrics

Total package byte prevSize

13337

increased by3.68%

Lines of code

244

increased by4.27%

No dependency changes