@neovici/cosmoz-input 1.6.2 → 2.0.0

package/cosmoz-input.js

@@ -1,12 +1,12 @@
 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';
 
 import { component } from 'haunted';
 import { useInput, useAllowedPattern } from './use-input';
 import { render, attributes } from './render';
 
-export const Input = host => {
+export const Input = (host) => {
 		const {
 				type = 'text',
 				pattern,
@@ -18,21 +18,36 @@ export const Input = host => {
 				disabled,
 				min,
 				max,
-				step
+				step,
+				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 ?? '') }
-				@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 = [
 		'type',
 		'pattern',
@@ -40,7 +55,7 @@ export const Input = host => {
 		'min',
 		'max',
 		'step',
-		...attributes
+		...attributes,
 	];
 
 customElements.define('cosmoz-input', component(Input, { observedAttributes }));

package/cosmoz-textarea.js

@@ -1,12 +1,12 @@
 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';
 
 import { component } from 'haunted';
 import { useInput, useAutosize } from './use-input';
 import { render, attributes } from './render';
 
-export const Textarea = host => {
+export const Textarea = (host) => {
 		const {
 				autocomplete,
 				value,
@@ -14,24 +14,28 @@ export const Textarea = host => {
 				readonly,
 				disabled,
 				rows,
-				cols
+				cols,
+				maxlength,
 			} = host,
 			{ onChange, onFocus, onInput } = useInput(host);
 
 		useAutosize(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 ?? '') } @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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-input",
-	"version": "1.6.2",
+	"version": "2.0.0",
 	"description": "A input web component",
 	"keywords": [
 		"lit-html",
@@ -23,11 +23,10 @@
 	"scripts": {
 		"lint": "eslint --cache --ext .js .",
 		"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",
 		"storybook:deploy": "storybook-to-ghpages"
 	},
@@ -53,25 +52,32 @@
 	"commitlint": {
 		"extends": [
 			"@commitlint/config-conventional"
-		]
+		],
+		"rules": {
+			"body-max-line-length": [
+				1,
+				"always",
+				100
+			]
+		}
 	},
 	"dependencies": {
-		"@neovici/cosmoz-utils": "^3.23.0",
-		"haunted": "^4.8.0",
-		"lit-html": "^1.4.0"
+		"@neovici/cosmoz-utils": "^4.0.0",
+		"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"
 	}
 }

package/render.js

@@ -25,6 +25,7 @@ export const render = (control, { label, invalid, errorMessage }) => html`
 		'autocomplete',
 		'readonly',
 		'disabled',
+		'maxlength',
 		'invalid',
 		'no-label-float',
 		'always-float-label',

package/styles.js

@@ -3,7 +3,7 @@ export const styles = css`
 	:host {
 		--font-family: var(
 			--cosmoz-input-font-family,
-			var(--paper-font-subhead_-_font-family, "Roboto", "Noto", sans-serif)
+			var(--paper-font-subhead_-_font-family, 'Roboto', 'Noto', sans-serif)
 		);
 		--font-size: var(
 			--cosmoz-input-font-size,
@@ -109,7 +109,7 @@ export const styles = css`
 		position: relative;
 	}
 	.line::before {
-		content: "";
+		content: '';
 		position: absolute;
 		display: block;
 		border-bottom: 2px solid transparent;

package/use-input.js

@@ -2,11 +2,20 @@ import { useCallback, useEffect, useMemo } from 'haunted';
 import { useImperativeApi } from '@neovici/cosmoz-utils/lib/hooks/use-imperative-api';
 import { notifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property';
 
-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(), []),
 			validate = useCallback(() => {
 				const valid = root.querySelector('#input')?.checkValidity();
@@ -17,12 +26,13 @@ export const useInput = host => {
 		useImperativeApi({ focus, validate }, [focus, validate]);
 
 		useEffect(() => {
-			const onMouseDown = e => {
+			const onMouseDown = (e) => {
 				if (e.defaultPrevented || e.target.matches('input, textarea, label')) {
 					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
 				}
 			};
@@ -34,24 +44,24 @@ export const useInput = host => {
 		return {
 			onChange,
 			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`;
 	},
 	limit = (input, maxRows) => {
 		if (maxRows > 0) {
@@ -64,16 +74,17 @@ export const useInput = host => {
 			input.setAttribute('rows', rows);
 		}
 	},
-	useAutosize = host => {
+	useAutosize = (host) => {
 		const { value, maxRows } = host,
 			input = useMemo(() => () => host.shadowRoot.querySelector('#input'), []);
 		useEffect(() => limit(input(), maxRows), [maxRows, input]);
 		useEffect(() => autosize(input()), [input, value]);
 		useEffect(() => {
 			const el = input(),
-				observer = new ResizeObserver(() => requestAnimationFrame(() => autosize(el)));
+				observer = new ResizeObserver(() =>
+					requestAnimationFrame(() => autosize(el))
+				);
 			observer.observe(el);
 			return () => observer.unobserve(el);
 		}, [input]);
-
 	};

package/es-dev-server.config.js

@@ -1,8 +0,0 @@
-/* eslint-env node */
-module.exports = {
-	appIndex: 'demo/index.html',
-	open: true,
-	preserveSymlinks: true,
-	dedupe: true,
-	nodeResolve: { mainFields: ['browser', 'jsnext', 'jsnext:main', 'module', 'main']}
-};