@neovici/cosmoz-input - npm Package Compare versions

Comparing version 1.7.0 to 2.0.0-beta.1

cosmoz-input.js

 import { html } 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 { live } from 'lit-html/directives/live.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
@@ -9,3 +9,3 @@ import { component } from 'haunted';
 
-export const Input = host => {
+export const Input = (host) => {
 		const {
@@ -23,17 +23,31 @@ type = 'text',
 				step,
-				maxlength
+				maxlength,
 			} = host,
 			{ onChange, onFocus, onInput } = useInput(host),
 			onBeforeInput = useAllowedPattern(allowedPattern);
-		return render(html`<input id="input" part="input"
-				type=${ type }  pattern=${ ifDefined(pattern) }
-				autocomplete=${ ifDefined(autocomplete) } placeholder=${ placeholder || ' ' }
-				?readonly=${ readonly } ?aria-disabled=${ disabled } ?disabled=${ disabled }
-				.value=${ live(value ?? '') } maxlength=${ifDefined(maxlength)}
-				@beforeinput=${ onBeforeInput } @input=${ onInput }
-				@change=${ onChange } @focus=${ onFocus } @blur=${ onFocus }
-				min=${ ifDefined(min) } max=${ ifDefined(max) } step=${ifDefined(step)} >`
-		, host);
+		return render(
+			html`<input
+				id="input"
+				part="input"
+				type=${type}
+				pattern=${ifDefined(pattern)}
+				autocomplete=${ifDefined(autocomplete)}
+				placeholder=${placeholder || ' '}
+				?readonly=${readonly}
+				?aria-disabled=${disabled}
+				?disabled=${disabled}
+				.value=${live(value ?? '')}
+				maxlength=${ifDefined(maxlength)}
+				@beforeinput=${onBeforeInput}
+				@input=${onInput}
+				@change=${onChange}
+				@focus=${onFocus}
+				@blur=${onFocus}
+				min=${ifDefined(min)}
+				max=${ifDefined(max)}
+				step=${ifDefined(step)}
+			/>`,
+			host
+		);
 	},
-
 	observedAttributes = [
@@ -46,5 +60,5 @@ 'type',
 		'step',
-		...attributes
+		...attributes,
 	];
 
 customElements.define('cosmoz-input', component(Input, { observedAttributes }));

cosmoz-textarea.js

 import { html } 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 { live } from 'lit-html/directives/live.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
@@ -9,3 +9,3 @@ import { component } from 'haunted';
 
-export const Textarea = host => {
+export const Textarea = (host) => {
 		const {
@@ -19,3 +19,3 @@ autocomplete,
 				cols,
-				maxlength
+				maxlength,
 			} = host,
@@ -26,16 +26,19 @@ { onChange, onFocus, onInput } = useInput(host);
 
-		return render(html`
+		return render(
+			html`
 			<textarea id="input" part="input" style="resize: none"
-				autocomplete=${ ifDefined(autocomplete) } placeholder=${ placeholder || ' ' } rows=${ rows ?? 1 } cols=${ ifDefined(cols) }
-				?readonly=${ readonly } ?aria-disabled=${ disabled } ?disabled=${ disabled }
-				.value=${ live(value ?? '') } maxlength=${ifDefined(maxlength)} @input=${ onInput }
-				@change=${ onChange } @focus=${ onFocus } @blur=${ onFocus }>`
-		, host);
+				autocomplete=${ifDefined(autocomplete)} placeholder=${
+				placeholder || ' '
+			} rows=${rows ?? 1} cols=${ifDefined(cols)}
+				?readonly=${readonly} ?aria-disabled=${disabled} ?disabled=${disabled}
+				.value=${live(value ?? '')} maxlength=${ifDefined(maxlength)} @input=${onInput}
+				@change=${onChange} @focus=${onFocus} @blur=${onFocus}>`,
+			host
+		);
 	},
+	observedAttributes = ['rows', ...attributes];
 
-	observedAttributes = [
-		'rows',
-		...attributes
-	];
-
-customElements.define('cosmoz-textarea', component(Textarea, { observedAttributes }));
+customElements.define(
+	'cosmoz-textarea',
+	component(Textarea, { observedAttributes })
+);

package.json

 {
 	"name": "@neovici/cosmoz-input",
-	"version": "1.7.0",
+	"version": "2.0.0-beta.1",
 	"description": "A input web component",
@@ -26,7 +26,6 @@ "keywords": [
 		"lint-tsc": "tsc",
-		"start": "npm run storybook",
+		"start": "wds",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
 		"prepare": "husky install",
-		"storybook": "start-storybook --node-resolve --watch --open",
 		"storybook:build": "build-storybook",
@@ -60,20 +59,20 @@ "storybook:deploy": "storybook-to-ghpages"
 	"dependencies": {
-		"@neovici/cosmoz-utils": "^3.23.0",
-		"haunted": "^4.8.0",
-		"lit-html": "^1.4.0"
+		"@neovici/cosmoz-utils": "^4.0.0-beta.2",
+		"haunted": "^5.0.0",
+		"lit-html": "^2.0.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^16.0.0",
-		"@commitlint/config-conventional": "^16.0.0",
+		"@commitlint/cli": "^17.0.0",
+		"@commitlint/config-conventional": "^17.0.0",
 		"@neovici/cfg": "^1.13.1",
-		"@open-wc/demoing-storybook": "^2.1.0",
-		"@open-wc/testing": "^2.5.0",
+		"@open-wc/testing": "^3.0.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/storybook-deployer": "^2.8.5",
-		"husky": "^7.0.0",
+		"@web/dev-server-storybook": "^0.5.1",
+		"husky": "^8.0.0",
 		"semantic-release": "^19.0.0",
-		"sinon": "^13.0.0",
+		"sinon": "^14.0.0",
 		"typescript": "^4.6.0"
 	}
 }

styles.js

@@ -6,3 +6,3 @@ import { tagged as css } from '@neovici/cosmoz-utils';
 			--cosmoz-input-font-family,
-			var(--paper-font-subhead_-_font-family, "Roboto", "Noto", sans-serif)
+			var(--paper-font-subhead_-_font-family, 'Roboto', 'Noto', sans-serif)
 		);
@@ -113,3 +113,3 @@ --font-size: var(
 	.line::before {
-		content: "";
+		content: '';
 		position: absolute;
@@ -116,0 +116,0 @@ display: block;

use-input.js

@@ -5,7 +5,16 @@ import { useCallback, useEffect, useMemo } from 'haunted';
 
-export const useInput = host => {
+export const useInput = (host) => {
 		const root = host.shadowRoot,
-			onChange = useCallback(e => host.dispatchEvent(new Event(e.type, { bubbles: e.bubbles })), []),
-			onInput = useCallback(e => notifyProperty(host, 'value', e.target.value), []),
-			onFocus = useCallback(e => notifyProperty(host, 'focused', e.type === 'focus'), []),
+			onChange = useCallback(
+				(e) => host.dispatchEvent(new Event(e.type, { bubbles: e.bubbles })),
+				[]
+			),
+			onInput = useCallback(
+				(e) => notifyProperty(host, 'value', e.target.value),
+				[]
+			),
+			onFocus = useCallback(
+				(e) => notifyProperty(host, 'focused', e.type === 'focus'),
+				[]
+			),
 			focus = useCallback(() => root.querySelector('#input')?.focus(), []),
@@ -21,3 +30,3 @@ validate = useCallback(() => {
 		useEffect(() => {
-			const onMouseDown = e => {
+			const onMouseDown = (e) => {
 				if (e.defaultPrevented || e.target.matches('input, textarea, label')) {
@@ -27,3 +36,4 @@ return;
 				e.preventDefault(); // don't blur
-				if (!host.matches(':focus-within')) { // if input not focused
+				if (!host.matches(':focus-within')) {
+					// if input not focused
 					focus(); // focus input
@@ -40,20 +50,20 @@ }
 			onFocus,
-			onInput
+			onInput,
 		};
 	},
-	useAllowedPattern = allowedPattern => useMemo(() => {
-		if (allowedPattern == null) {
-			return;
-		}
-		const regexp = new RegExp(allowedPattern, 'u');
-		return e => {
-			if (!e.defaultPrevent && e.data && !regexp.test(e.data)) {
-				e.preventDefault();
+	useAllowedPattern = (allowedPattern) =>
+		useMemo(() => {
+			if (allowedPattern == null) {
+				return;
 			}
-
-		};
-	}, [allowedPattern]),
-	autosize = input => {
+			const regexp = new RegExp(allowedPattern, 'u');
+			return (e) => {
+				if (!e.defaultPrevent && e.data && !regexp.test(e.data)) {
+					e.preventDefault();
+				}
+			};
+		}, [allowedPattern]),
+	autosize = (input) => {
 		input.style.height = '';
-		input.style.height = `${ input.scrollHeight }px`;
+		input.style.height = `${input.scrollHeight}px`;
 	},
@@ -71,3 +81,3 @@ limit = (input, maxRows) => {
 	},
-	useAutosize = host => {
+	useAutosize = (host) => {
 		const { value, maxRows } = host,
@@ -79,7 +89,8 @@ input = useMemo(() => () => host.shadowRoot.querySelector('#input'), []);
 			const el = input(),
-				observer = new ResizeObserver(() => requestAnimationFrame(() => autosize(el)));
+				observer = new ResizeObserver(() =>
+					requestAnimationFrame(() => autosize(el))
+				);
 			observer.observe(el);
 			return () => observer.unobserve(el);
 		}, [input]);
-
 	};

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Lines of code

357

increased by7.21%

Worsened metrics

Total package byte prevSize

12691

decreased by-1.26%

Number of package files

7

decreased by-12.5%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@neovici/cosmoz-utils@4.0.0(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Addedhaunted@5.0.0(transitive)

• + Addedlit@2.8.0(transitive)

• + Addedlit-element@3.3.3(transitive)

• + Addedlit-html@2.8.0(transitive)

• - Removed@neovici/cosmoz-utils@3.30.0(transitive)

• - Removedhaunted@4.8.3(transitive)

• - Removedlit-html@1.4.1(transitive)

• Updated@neovici/cosmoz-utils@^4.0.0-beta.2

• Updatedhaunted@^5.0.0

• Updatedlit-html@^2.0.0