@neovici/cosmoz-input - npm Package Compare versions

Comparing version 1.0.8 to 1.1.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+## [1.1.0](https://github.com/neovici/cosmoz-input/compare/v1.0.8...v1.1.0) (2021-02-05)
+
+
+### Features
+
+* adjust slots, vars and attributes ([21ddd69](https://github.com/neovici/cosmoz-input/commit/21ddd69d2841eb64c7abcacbdab327b15e8e1d35))
+
 ### [1.0.8](https://github.com/neovici/cosmoz-input/compare/v1.0.7...v1.0.8) (2021-01-26)
@@ -2,0 +9,0 @@

cosmoz-input.js

 import { html, nothing } from 'lit-html'; // eslint-disable-line object-curly-newline
 import { live } from 'lit-html/directives/live';
+import { ifDefined } from 'lit-html/directives/if-defined';
+
 import { useImperativeApi } from '@neovici/cosmoz-utils/lib/hooks/use-imperative-api';
@@ -47,4 +49,8 @@ import { notifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property';
 		max-width: 100%;
-		background-color: initial;
+		background: var(--cosmoz-input-background, initial);
 	}
+
+	:host(:focus-within) input {
+		background: var(--cosmoz-input-focused-background, var(--cosmoz-input-background, initial));
+	}
 	label {
@@ -106,2 +112,3 @@ position: absolute;
 				type = 'text',
+				autocomplete,
 				value,
@@ -143,18 +150,18 @@ label,
 		<style>${ styles }</style>
-		<div class="float" part="float">&nbsp;</div>
-		<div class="wrap" part="wrap">
+		<div class="float" part="input-float">&nbsp;</div>
+		<div class="wrap" part="input-wrap">
 			<slot name="prefix"></slot>
-			<div class="control">
-				<input id="input" part="input"
+			<div class="control" part="input-control">
+				<input id="input" part="input-input"
 					type=${ type } placeholder=${ placeholder || ' ' } ?readonly=${ readonly }
 					?aria-disabled=${ disabled } ?disabled=${ disabled }
-					.value=${ live(value ?? '') }
+					.value=${ live(value ?? '') } autocomplete=${ ifDefined(autocomplete) }
 					@input=${ onInput } @focus=${ onFocus } @blur=${ onFocus }
 				>
-				${ label ? html`<label for="input">${ label }</label>` : nothing }
+				${ label ? html`<label for="input" part="input-label">${ label }</label>` : nothing }
 			</div>
 			<slot name="suffix"></slot>
 		</div>
-		<div class="line" part="line"></div>
-		${ invalid && errorMessage ? html`<div class="error" part="error">${ errorMessage }</div>` : nothing }
+		<div class="line" part="input-line"></div>
+		${ invalid && errorMessage ? html`<div class="error" part="input-error">${ errorMessage }</div>` : nothing }
 	`;
@@ -165,2 +172,3 @@ },
 		'type',
+		'autocomplete',
 		'readonly',
@@ -167,0 +175,0 @@ 'disabled',

package.json

 {
 	"name": "@neovici/cosmoz-input",
-	"version": "1.0.8",
+	"version": "1.1.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

12666

increased by5.03%

Lines of code

234

increased by2.63%

No dependency changes