@neovici/cosmoz-input 3.0.0 → 3.2.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/dist/cosmoz-textarea.js

@@ -0,0 +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 `
+			<textarea id="input" part="input" style="resize: none"
+				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);
+};
+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/dist/styles.js

@@ -0,0 +1,160 @@
+import { tagged as css } from '@neovici/cosmoz-utils';
+export const styles = css `
+	:host {
+		--font-family: var(
+			--cosmoz-input-font-family,
+			var(--paper-font-subhead_-_font-family, 'Roboto', 'Noto', sans-serif)
+		);
+		--font-size: var(
+			--cosmoz-input-font-size,
+			var(--paper-font-subhead_-_font-size, 16px)
+		);
+		--line-height: var(
+			--cosmoz-input-line-height,
+			var(--paper-font-subhead_-_line-height, 24px)
+		);
+		--label-scale: var(--cosmoz-input-label-scale, 0.75);
+		--disabled-opacity: var(
+			--cosmoz-input-disabled-opacity,
+			var(--paper-input-container-disabled_-_opacity, 0.33)
+		);
+		--disabled-line-opacity: var(
+			--cosmoz-input-disabled-line-opacity,
+			var(--paper-input-container-underline-disabled_-_opacity, 1)
+		);
+		--invalid-color: var(
+			--cosmoz-input-invalid-color,
+			var(--paper-input-container-invalid-color, var(--error-color, #fc5c5b))
+		);
+		--bg: var(--cosmoz-input-background);
+		--focused-bg: var(--cosmoz-input-focused-background, var(--bg));
+		--color: var(--cosmoz-input-color, var(--secondary-text-color, #737373));
+		--focused-color: var(
+			--cosmoz-input-focused-color,
+			var(--primary-color, #3f51b5)
+		);
+
+		display: block;
+		padding: var(--cosmoz-input-padding, 8px 0);
+		padding-top: var(--paper-input-container_-_padding-top, 8px);
+		padding-bottom: var(--paper-input-container_-_padding-bottom, 8px);
+		position: relative;
+
+		font-family: var(--font-family);
+		font-size: var(--font-size);
+		line-height: var(--line-height);
+	}
+
+	:host([disabled]) {
+		opacity: var(--disabled-opacity);
+		pointer-events: none;
+	}
+
+	.float {
+		line-height: calc(var(--line-height) * var(--label-scale));
+	}
+
+	.wrap {
+		display: flex;
+		align-items: center;
+		position: relative;
+	}
+
+	.control {
+		flex: 1;
+		position: relative;
+	}
+
+	#input {
+		padding: 0;
+		margin: 0;
+		outline: none;
+		border: none;
+		width: 100%;
+		max-width: 100%;
+		display: block;
+		background: var(--bg);
+		line-height: inherit;
+		font-size: inherit;
+	}
+
+	:host(:focus-within) #input {
+		background: var(--focused-bg);
+	}
+	label {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		transition: transform 0.25s, width 0.25s;
+		transform-origin: left top;
+		color: var(--color);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	:host([always-float-label]) label,
+	#input:not(:placeholder-shown) + label {
+		transform: translateY(calc(var(--label-scale) * -100%))
+			scale(var(--label-scale));
+	}
+	#input:not(:placeholder-shown):focus + label {
+		color: var(--focused-color);
+	}
+
+	.line {
+		padding-top: 1px;
+		border-bottom: 1px solid var(--color);
+		position: relative;
+	}
+	.line::before {
+		content: '';
+		position: absolute;
+		display: block;
+		border-bottom: 2px solid transparent;
+		border-bottom-color: inherit;
+		left: 0;
+		right: 0;
+		top: 0;
+		transform: scale3d(0, 1, 1);
+		transform-origin: center center;
+		z-index: 1;
+	}
+	:host(:focus-within) .line::before {
+		transform: none;
+		transition: 0.25s transform ease;
+	}
+	:host(:focus-within) .line {
+		border-bottom-color: var(--focused-color);
+	}
+	:host([disabled]) .line {
+		border-bottom-style: dashed;
+		opacity: var(--disabled-line-opacity);
+	}
+
+	:host([no-label-float]) .float,
+	:host([no-label-float]) #input:not(:placeholder-shown) + label {
+		display: none;
+	}
+
+	.error {
+		font-size: 12px;
+		line-height: 20px;
+		overflow: hidden;
+		text-overflow: clip;
+		position: absolute;
+		max-width: 100%;
+	}
+	:host([invalid]) label,
+	.error {
+		color: var(--invalid-color);
+	}
+	:host([invalid]) .line {
+		border-bottom-color: var(--invalid-color);
+	}
+
+	#input::-webkit-inner-spin-button {
+		z-index: 1;
+	}
+`;

package/dist/use-input.d.ts

@@ -0,0 +1,11 @@
+export interface BaseInput extends HTMLElement {
+    value?: string | number;
+    maxRows?: number;
+    focused?: boolean;
+    disabled?: 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,64 @@
+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 ||
+                host.disabled ||
+                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": "3.0.0",
+	"version": "3.2.0",
 	"description": "A input web component",
 	"keywords": [
 		"lit-html",