@neovici/cosmoz-input - npm Package Compare versions

Comparing version 3.9.0 to 3.10.0

dist/cosmoz-input.js

 import { html } from 'lit-html';
 import { live } from 'lit-html/directives/live.js';
+import { ref } from 'lit-html/directives/ref.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
@@ -20,6 +21,7 @@ import { component } from 'haunted';
 export const Input = (host) => {
-    const { type = 'text', pattern, allowedPattern, autocomplete, value, readonly, disabled, min, max, step, maxlength, } = host, { onChange, onFocus, onInput } = useInput(host);
+    const { type = 'text', pattern, allowedPattern, autocomplete, value, readonly, disabled, min, max, step, maxlength, } = host, { onChange, onFocus, onInput, onRef } = useInput(host);
     const onBeforeInput = useAllowedPattern(allowedPattern);
     return render(html `
 			<input
+				${ref(onRef)}
 				style="--chars: ${value?.toString()?.length ?? 0}ch"
@@ -26,0 +28,0 @@ id="input"

dist/cosmoz-textarea.js

 import { html } from 'lit-html'; // eslint-disable-line object-curly-newline
 import { live } from 'lit-html/directives/live.js';
+import { ref } from 'lit-html/directives/ref.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
@@ -10,6 +11,7 @@ import { component } from 'haunted';
 export const Textarea = (host) => {
-    const { autocomplete, value, placeholder, readonly, disabled, rows, cols, maxlength, } = host, { onChange, onFocus, onInput } = useInput(host);
+    const { autocomplete, value, placeholder, readonly, disabled, rows, cols, maxlength, } = host, { onChange, onFocus, onInput, onRef } = useInput(host);
     useAutoHeight(host);
     return render(html `
 			<textarea id="input" part="input"
+				${ref(onRef)}
 				autocomplete=${ifDefined(autocomplete)}
@@ -16,0 +18,0 @@ placeholder=${placeholder || ' '}

dist/use-input.d.ts

@@ -0,1 +1,2 @@
+type Input = HTMLInputElement | HTMLTextAreaElement;
 export interface BaseInput extends HTMLElement {
@@ -6,2 +7,3 @@ value?: string | number;
     disabled?: boolean;
+    onInputRef?: (el: Input) => void;
 }
@@ -12,2 +14,4 @@ export declare const useInput: <T extends BaseInput>(host: T) => {
     onInput: (e: InputEvent) => void;
+    onRef: (el?: Element) => void;
 };
+export {};

dist/use-input.js

@@ -1,8 +0,14 @@
-import { useCallback, useEffect } from 'haunted';
+import { useCallback, useEffect, useRef } 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();
+    const { onInputRef } = host;
+    const inputRef = useRef(undefined);
+    const onRef = useCallback((el) => {
+        const ref = el;
+        inputRef.current = ref;
+        onInputRef?.(ref);
+    }, [onInputRef]);
+    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(() => inputRef.current?.focus(), []), validate = useCallback(() => {
+        const valid = inputRef.current?.checkValidity();
         host.toggleAttribute('invalid', !valid);
@@ -32,3 +38,4 @@ return valid;
         onInput,
+        onRef,
     };
 };

package.json

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

16827

increased by2.72%

Lines of code

416

increased by3.74%

No dependency changes