@neovici/cosmoz-input 3.8.0 → 3.10.0

package/dist/cosmoz-input.js

@@ -1,10 +1,12 @@
 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';
 import { component } from 'haunted';
 import { useInput } from './use-input';
 import { useAllowedPattern } from './use-allowed-pattern';
 import { render, attributes } from './render';
+import { getPlaceholder } from './util';
 const observedAttributes = [
     'type',
     'pattern',
@@ -16,17 +18,18 @@ const observedAttributes = [
     ...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);
+    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"
 				id="input"
 				part="input"
 				type=${type}
 				pattern=${ifDefined(pattern)}
 				autocomplete=${ifDefined(autocomplete)}
-				placeholder=${placeholder || ' '}
+				placeholder=${getPlaceholder(host)}
 				?readonly=${readonly}
 				?aria-disabled=${disabled}
 				?disabled=${disabled}

package/dist/cosmoz-textarea.js

@@ -1,5 +1,6 @@
 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';
 import { component } from 'haunted';
 import { useInput } from './use-input';
@@ -7,10 +8,11 @@ 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);
+    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)}
 				placeholder=${placeholder || ' '}
 				rows=${rows ?? 1} cols=${ifDefined(cols)}

package/dist/styles.js

@@ -102,8 +102,10 @@ export const styles = css `
 		transform: translateY(calc(var(--label-scale) * -100%))
 			scale(var(--label-scale));
 	}
-	#input:not(:placeholder-shown):focus + label {
+	:host(:not(always-float-label):focus-within) #input::placeholder,
+	:host(:focus-within) label {
 		color: var(--focused-color);
+		opacity: 1;
 	}
 
 	.line {
@@ -137,7 +139,7 @@ export const styles = css `
 	}
 
 	:host([no-label-float]) .float,
-	:host([no-label-float]) #input:not(:placeholder-shown) + label {
+	:host([no-label-float]) label {
 		display: none;
 	}
 
@@ -190,7 +192,7 @@ export const styles = css `
 		width: var(--width);
 		min-width: calc(2ch + 0.25em);
 	}
-	:host([type="color"]) .line {
+	:host([type='color']) .line {
 		display: none;
 	}
 `;

package/dist/use-input.d.ts

@@ -1,11 +1,15 @@
+type Input = HTMLInputElement | HTMLTextAreaElement;
 export interface BaseInput extends HTMLElement {
     value?: string | number;
     maxRows?: number;
     focused?: boolean;
     disabled?: boolean;
+    onInputRef?: (el: Input) => void;
 }
 export declare const useInput: <T extends BaseInput>(host: T) => {
     onChange: (e: Event) => boolean;
     onFocus: (e: FocusEvent) => void;
     onInput: (e: InputEvent) => void;
+    onRef: (el?: Element) => void;
 };
+export {};

package/dist/use-input.js

@@ -1,10 +1,16 @@
-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);
         return valid;
     }, []);
@@ -29,5 +35,6 @@ export const useInput = (host) => {
         onChange,
         onFocus,
         onInput,
+        onRef,
     };
 };

package/dist/util.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    noLabelFloat?: boolean;
+    placeholder?: string;
+}
+export declare const getPlaceholder: ({ placeholder, noLabelFloat, label }: Props) => string;
+export {};

package/dist/util.js

@@ -0,0 +1,3 @@
+export const getPlaceholder = ({ placeholder, noLabelFloat, label }) => {
+    return (noLabelFloat ? label : undefined) || placeholder || ' ';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-input",
-	"version": "3.8.0",
+	"version": "3.10.0",
 	"description": "A input web component",
 	"keywords": [
 		"lit-html",