@neovici/cosmoz-input 2.0.0-beta.1 → 3.1.0

package/dist/cosmoz-input.d.ts

@@ -0,0 +1,6 @@
+import { BaseInput } from './use-input';
+import { Render, ObjectFromList } from './render';
+declare const observedAttributes: string[];
+declare type CosmozInput = HTMLElement & ObjectFromList<typeof observedAttributes> & BaseInput & Render;
+export declare const Input: (host: CosmozInput) => import("lit-html").TemplateResult<1>;
+export {};

package/dist/cosmoz-input.js

@@ -0,0 +1,40 @@
+import { html } from 'lit-html'; // eslint-disable-line object-curly-newline
+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';
+const observedAttributes = [
+    'type',
+    'pattern',
+    'allowed-pattern',
+    'min',
+    'max',
+    'step',
+    ...attributes,
+];
+export const Input = (host) => {
+    const { type = 'text', pattern, allowedPattern, autocomplete, value, placeholder, readonly, disabled, min, max, 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 ?? '')}
+			maxlength=${ifDefined(maxlength)}
+			@beforeinput=${onBeforeInput}
+			@input=${onInput}
+			@change=${onChange}
+			@focus=${onFocus}
+			@blur=${onFocus}
+			min=${ifDefined(min)}
+			max=${ifDefined(max)}
+			step=${ifDefined(step)}
+		/>`, host);
+};
+customElements.define('cosmoz-input', component(Input, { observedAttributes }));

package/dist/cosmoz-textarea.d.ts

@@ -0,0 +1,6 @@
+import { BaseInput } from './use-input';
+import { Render, ObjectFromList } from './render';
+declare const observedAttributes: string[];
+declare type CosmozInput = HTMLElement & ObjectFromList<typeof observedAttributes> & BaseInput & Render;
+export declare const Textarea: (host: CosmozInput) => import("lit-html").TemplateResult<1>;
+export {};

package/{cosmoz-textarea.js → dist/cosmoz-textarea.js}

@@ -1,41 +1,20 @@
 import { html } from 'lit-html'; // eslint-disable-line object-curly-newline
 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';
-
+const observedAttributes = ['rows', ...attributes];
 export const Textarea = (host) => {
-		const {
-				autocomplete,
-				value,
-				placeholder,
-				readonly,
-				disabled,
-				rows,
-				cols,
-				maxlength,
-			} = host,
-			{ onChange, onFocus, onInput } = useInput(host);
-
-		useAutosize(host);
-
-		return render(
-			html`
+    const { autocomplete, value, placeholder, readonly, disabled, rows, cols, maxlength, } = host, { onChange, onFocus, onInput } = useInput(host);
+    useAutosize(host);
+    return render(html `
 			<textarea id="input" part="input" style="resize: none"
-				autocomplete=${ifDefined(autocomplete)} placeholder=${
-				placeholder || ' '
-			} rows=${rows ?? 1} cols=${ifDefined(cols)}
+				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];
-
-customElements.define(
-	'cosmoz-textarea',
-	component(Textarea, { observedAttributes })
-);
+				@change=${onChange} @focus=${onFocus} @blur=${onFocus}>`, host);
+};
+customElements.define('cosmoz-textarea', component(Textarea, { observedAttributes }));

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './cosmoz-input';
+export * from './cosmoz-textarea';
+export * from './use-input';

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './cosmoz-input';
+export * from './cosmoz-textarea';
+export * from './use-input';

package/dist/render.d.ts

@@ -0,0 +1,9 @@
+export declare type ObjectFromList<T extends ReadonlyArray<string>, V = string> = {
+    [K in (T extends ReadonlyArray<infer U> ? U : never)]: V;
+};
+export interface Render {
+    label?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+}
+export declare const render: <T>(control: T, { label, invalid, errorMessage }: Render) => import("lit-html").TemplateResult<1>, attributes: string[];

package/dist/render.js

@@ -0,0 +1,27 @@
+import { html } from 'lit-html';
+import { when } from 'lit-html/directives/when.js';
+import { styles } from './styles';
+export const render = (control, { label, invalid, errorMessage }) => html `
+		<style>
+			${styles}
+		</style>
+		<div class="float" part="float">&nbsp;</div>
+		<div class="wrap" part="wrap">
+			<slot name="prefix"></slot>
+			<div class="control" part="control">
+				${control}
+				${when(label, () => html `<label for="input" part="label">${label}</label>`)}
+			</div>
+			<slot name="suffix"></slot>
+		</div>
+		<div class="line" part="line"></div>
+		${when(invalid && errorMessage, () => html `<div class="error" part="error">${errorMessage}</div>`)}
+	`, attributes = [
+    'autocomplete',
+    'readonly',
+    'disabled',
+    'maxlength',
+    'invalid',
+    'no-label-float',
+    'always-float-label',
+];

package/dist/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: string;

package/{styles.js → dist/styles.js}

@@ -1,5 +1,5 @@
 import { tagged as css } from '@neovici/cosmoz-utils';
-export const styles = css`
+export const styles = css `
 	:host {
 		--font-family: var(
 			--cosmoz-input-font-family,

package/dist/use-input.d.ts

@@ -0,0 +1,10 @@
+export interface BaseInput extends HTMLElement {
+    value?: string | number;
+    maxRows?: number;
+    focused?: boolean;
+}
+export declare const useInput: <T extends BaseInput>(host: T) => {
+    onChange: (e: Event) => boolean;
+    onFocus: (e: FocusEvent) => void;
+    onInput: (e: InputEvent) => void;
+}, useAllowedPattern: (allowedPattern: string | RegExp) => (<T extends InputEvent>(e: T) => void) | undefined, autosize: (input: HTMLElement) => void, limit: (input: HTMLElement, maxRows?: number) => void, useAutosize: <T extends BaseInput>(host: T) => void;

package/dist/use-input.js

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useMemo } from 'haunted';
+import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
+import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
+// TODO:  use useRef instead of callback with querySelector
+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'), []), focus = useCallback(() => root.querySelector('#input')?.focus(), []), validate = useCallback(() => {
+        const valid = root.querySelector('#input')?.checkValidity();
+        host.toggleAttribute('invalid', !valid);
+        return valid;
+    }, []);
+    useImperativeApi({ focus, validate }, [focus, validate]);
+    useEffect(() => {
+        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
+                focus(); // focus input
+            }
+        };
+        root.addEventListener('mousedown', onMouseDown);
+        return () => root.removeEventListener('mousedown', onMouseDown);
+    }, [focus]);
+    return {
+        onChange,
+        onFocus,
+        onInput,
+    };
+}, useAllowedPattern = (allowedPattern) => useMemo(() => {
+    if (allowedPattern == null) {
+        return;
+    }
+    const regexp = new RegExp(allowedPattern, 'u');
+    return (e) => {
+        if (!e.defaultPrevented && e.data && !regexp.test(e.data)) {
+            e.preventDefault();
+        }
+    };
+}, [allowedPattern]), autosize = (input) => {
+    input.style.height = '';
+    input.style.height = `${input.scrollHeight}px`;
+}, limit = (input, maxRows = 0) => {
+    if (maxRows > 0) {
+        const rows = input.getAttribute('rows') ?? '', height = input.style.height;
+        input.style.height = '';
+        input.setAttribute('rows', maxRows);
+        input.style.maxHeight = input.getBoundingClientRect().height + 'px';
+        input.style.height = height;
+        input.setAttribute('rows', rows);
+    }
+}, 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.observe(el);
+        return () => observer.unobserve(el);
+    }, [input]);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-input",
-	"version": "2.0.0-beta.1",
+	"version": "3.1.0",
 	"description": "A input web component",
 	"keywords": [
 		"lit-html",
@@ -16,13 +16,16 @@
 	},
 	"license": "Apache-2.0",
 	"author": "",
-	"main": "cosmoz-input.js",
+	"main": "dist/index.js",
 	"directories": {
 		"test": "test"
 	},
+	"files": [
+		"dist/"
+	],
 	"scripts": {
-		"lint": "eslint --cache --ext .js .",
-		"lint-tsc": "tsc",
+		"lint": "tsc && eslint --cache .",
+		"build": "tsc -p tsconfig.build.json",
 		"start": "wds",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
@@ -45,17 +48,26 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"files": [
-		"*.js",
-		"lib/**/*.js"
-	],
 	"commitlint": {
 		"extends": [
 			"@commitlint/config-conventional"
-		]
+		],
+		"rules": {
+			"body-max-line-length": [
+				1,
+				"always",
+				100
+			]
+		}
+	},
+	"exports": {
+		".": "./dist/index.js",
+		"./use-input": "./dist/use-input.js",
+		"./input": "./dist/cosmoz-input.js",
+		"./textarea": "./dist/cosmoz-textarea.js"
 	},
 	"dependencies": {
-		"@neovici/cosmoz-utils": "^4.0.0-beta.2",
+		"@neovici/cosmoz-utils": "^5.1.0",
 		"haunted": "^5.0.0",
 		"lit-html": "^2.0.0"
 	},

package/cosmoz-input.js

@@ -1,61 +0,0 @@
-import { html } from 'lit-html'; // eslint-disable-line object-curly-newline
-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) => {
-		const {
-				type = 'text',
-				pattern,
-				allowedPattern,
-				autocomplete,
-				value,
-				placeholder,
-				readonly,
-				disabled,
-				min,
-				max,
-				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 ?? '')}
-				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',
-		'allowed-pattern',
-		'min',
-		'max',
-		'step',
-		...attributes,
-	];
-
-customElements.define('cosmoz-input', component(Input, { observedAttributes }));

package/render.js

@@ -1,32 +0,0 @@
-import { html, nothing } from 'lit-html';
-import { styles } from './styles';
-
-export const render = (control, { label, invalid, errorMessage }) => html`
-		<style>
-			${styles}
-		</style>
-		<div class="float" part="float">&nbsp;</div>
-		<div class="wrap" part="wrap">
-			<slot name="prefix"></slot>
-			<div class="control" part="control">
-				${control}
-				${label
-					? html`<label for="input" part="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}
-	`,
-	attributes = [
-		'autocomplete',
-		'readonly',
-		'disabled',
-		'maxlength',
-		'invalid',
-		'no-label-float',
-		'always-float-label',
-	];

package/use-input.js

@@ -1,90 +0,0 @@
-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) => {
-		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'),
-				[]
-			),
-			focus = useCallback(() => root.querySelector('#input')?.focus(), []),
-			validate = useCallback(() => {
-				const valid = root.querySelector('#input')?.checkValidity();
-				host.toggleAttribute('invalid', !valid);
-				return valid;
-			}, []);
-
-		useImperativeApi({ focus, validate }, [focus, validate]);
-
-		useEffect(() => {
-			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
-					focus(); // focus input
-				}
-			};
-
-			root.addEventListener('mousedown', onMouseDown);
-			return () => root.removeEventListener('mousedown', onMouseDown);
-		}, [focus]);
-
-		return {
-			onChange,
-			onFocus,
-			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();
-				}
-			};
-		}, [allowedPattern]),
-	autosize = (input) => {
-		input.style.height = '';
-		input.style.height = `${input.scrollHeight}px`;
-	},
-	limit = (input, maxRows) => {
-		if (maxRows > 0) {
-			const rows = input.getAttribute('rows'),
-				height = input.style.height;
-			input.style.height = '';
-			input.setAttribute('rows', maxRows);
-			input.style.maxHeight = input.getBoundingClientRect().height + 'px';
-			input.style.height = height;
-			input.setAttribute('rows', rows);
-		}
-	},
-	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.observe(el);
-			return () => observer.unobserve(el);
-		}, [input]);
-	};