@neovici/cosmoz-input 3.2.0 → 3.4.0

package/dist/cosmoz-input.js

@@ -1,8 +1,9 @@
-import { html } from 'lit-html'; // eslint-disable-line object-curly-newline
+import { html } from 'lit-html';
 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 { useInput } from './use-input';
+import { useAllowedPattern } from './use-allowed-pattern';
 import { render, attributes } from './render';
 const observedAttributes = [
     'type',
@@ -11,30 +12,35 @@ const observedAttributes = [
     'min',
     'max',
     'step',
+    'autosize',
     ...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);
+    const { type = 'text', pattern, allowedPattern, autocomplete, value, placeholder, readonly, disabled, min, max, step, maxlength, } = host, { onChange, onFocus, onInput } = useInput(host);
+    const onBeforeInput = useAllowedPattern(allowedPattern);
+    return render(html `
+			<input
+				style="--chars: ${value?.toString()?.length ?? 0}ch"
+				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.js

@@ -2,12 +2,13 @@ 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 { useInput } from './use-input';
+import { useAutoHeight } from './use-auto-height';
 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);
+    useAutoHeight(host);
     return render(html `
 			<textarea id="input" part="input" style="resize: none"
 				autocomplete=${ifDefined(autocomplete)}

package/dist/render.d.ts

@@ -1,5 +1,5 @@
 export declare type ObjectFromList<T extends ReadonlyArray<string>, V = string> = {
-    [K in (T extends ReadonlyArray<infer U> ? U : never)]: V;
+    [K in T extends ReadonlyArray<infer U> ? U : never]: V;
 };
 export interface Render {
     label?: string;

package/dist/styles.js

@@ -157,4 +157,30 @@ export const styles = css `
 	#input::-webkit-inner-spin-button {
 		z-index: 1;
 	}
+
+	:host([no-spinner]) #input::-webkit-inner-spin-button {
+		display: none;
+	}
+	:host([no-spinner]) #input {
+		-moz-appearence: textfield;
+	}
+
+	:host([autosize]) {
+		width: max-content;
+	}
+	:host([autosize]) #input {
+		min-width: 2ch;
+		width: var(--chars);
+	}
+	:host([autosize][type='number']) #input {
+		--width: calc(var(--chars) + 0.25em);
+	}
+	:host([autosize][type='number']:not([no-spinner])) #input {
+		width: calc(var(--width) + 15px);
+		min-width: calc(2ch + 0.25em + 15px);
+	}
+	:host([autosize][type='number'][no-spinner]) #input {
+		width: var(--width);
+		min-width: calc(2ch + 0.25em);
+	}
 `;

package/dist/use-allowed-pattern.d.ts

@@ -0,0 +1 @@
+export declare const useAllowedPattern: (allowedPattern: string | RegExp) => (<T extends InputEvent>(e: T) => void) | undefined;

package/dist/use-allowed-pattern.js

@@ -0,0 +1,12 @@
+import { useMemo } from 'haunted';
+export const 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]);

package/dist/use-auto-height.d.ts

@@ -0,0 +1,2 @@
+import { BaseInput } from './use-input';
+export declare const useAutoHeight: <T extends BaseInput>(host: T) => void;

package/dist/use-auto-height.js

@@ -0,0 +1,25 @@
+import { useEffect, useMemo } from 'haunted';
+const autoheight = (input) => {
+    input.style.height = '';
+    input.style.height = `${input.scrollHeight}px`;
+};
+const 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);
+    }
+};
+export const useAutoHeight = (host) => {
+    const { value, maxRows } = host, input = useMemo(() => () => host.shadowRoot.querySelector('#input'), []);
+    useEffect(() => limit(input(), maxRows), [maxRows, input]);
+    useEffect(() => autoheight(input()), [input, value]);
+    useEffect(() => {
+        const el = input(), observer = new ResizeObserver(() => requestAnimationFrame(() => autoheight(el)));
+        observer.observe(el);
+        return () => observer.unobserve(el);
+    }, [input]);
+};

package/dist/use-input.d.ts

@@ -8,4 +8,4 @@ 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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'haunted';
+import { useCallback, useEffect } 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
@@ -30,35 +30,4 @@ export const useInput = (host) => {
         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": "3.2.0",
+	"version": "3.4.0",
 	"description": "A input web component",
 	"keywords": [
 		"lit-html",