@neovici/cosmoz-input - npm Package Compare versions

Comparing version 3.3.0 to 3.4.0

dist/cosmoz-input.js

@@ -1,6 +0,7 @@
-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';
@@ -14,28 +15,33 @@ const observedAttributes = [
     '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 }));

dist/cosmoz-textarea.js

@@ -5,3 +5,4 @@ import { html } from 'lit-html'; // eslint-disable-line object-curly-newline
 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';
@@ -11,3 +12,3 @@ const observedAttributes = ['rows', ...attributes];
     const { autocomplete, value, placeholder, readonly, disabled, rows, cols, maxlength, } = host, { onChange, onFocus, onInput } = useInput(host);
-    useAutosize(host);
+    useAutoHeight(host);
     return render(html `
@@ -14,0 +15,0 @@ <textarea id="input" part="input" style="resize: none"

dist/render.d.ts

 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;
 };
@@ -4,0 +4,0 @@ export interface Render {

dist/styles.js

@@ -160,2 +160,28 @@ import { tagged as css } from '@neovici/cosmoz-utils';
 	}
+
+	: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);
+	}
 `;

dist/use-input.d.ts

@@ -11,2 +11,2 @@ export interface BaseInput extends HTMLElement {
     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;
+};

dist/use-input.js

@@ -1,2 +0,2 @@
-import { useCallback, useEffect, useMemo } from 'haunted';
+import { useCallback, useEffect } from 'haunted';
 import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
@@ -33,33 +33,2 @@ import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
     };
-}, 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.json

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

15845

increased by5.68%

Number of package files

18

increased by28.57%

Lines of code

378

increased by11.83%

No dependency changes