@neovici/cosmoz-input 2.0.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-input",
-	"version": "2.0.0",
+	"version": "3.0.0",
 	"description": "A input web component",
 	"keywords": [
 		"lit-html",
@@ -16,13 +16,16 @@
 	},
 	"license": "Apache-2.0",
 	"author": "",
-	"main": "cosmoz-input.js",
+	"main": "dist/index.js",
 	"directories": {
 		"test": "test"
 	},
+	"files": [
+		"dist/"
+	],
 	"scripts": {
-		"lint": "eslint --cache --ext .js .",
-		"lint-tsc": "tsc",
+		"lint": "tsc && eslint --cache .",
+		"build": "tsc -p tsconfig.build.json",
 		"start": "wds",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
@@ -45,10 +48,6 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"files": [
-		"*.js",
-		"lib/**/*.js"
-	],
 	"commitlint": {
 		"extends": [
 			"@commitlint/config-conventional"
@@ -61,8 +60,14 @@
 			]
 		}
 	},
+	"exports": {
+		".": "./dist/index.js",
+		"./use-input": "./dist/use-input.js",
+		"./input": "./dist/cosmoz-input.js",
+		"./textarea": "./dist/cosmoz-textarea.js"
+	},
 	"dependencies": {
-		"@neovici/cosmoz-utils": "^4.0.0",
+		"@neovici/cosmoz-utils": "^5.1.0",
 		"haunted": "^5.0.0",
 		"lit-html": "^2.0.0"
 	},

package/cosmoz-input.js

@@ -1,61 +0,0 @@
-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';
-
-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
-		);
-	},
-	observedAttributes = [
-		'type',
-		'pattern',
-		'allowed-pattern',
-		'min',
-		'max',
-		'step',
-		...attributes,
-	];
-
-customElements.define('cosmoz-input', component(Input, { observedAttributes }));

package/cosmoz-textarea.js

@@ -1,41 +0,0 @@
-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';
-
-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
-		);
-	},
-	observedAttributes = ['rows', ...attributes];
-
-customElements.define(
-	'cosmoz-textarea',
-	component(Textarea, { observedAttributes })
-);

package/render.js

@@ -1,32 +0,0 @@
-import { html, nothing } from 'lit-html';
-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}
-				${label
-					? html`<label for="input" part="label">${label}</label>`
-					: nothing}
-			</div>
-			<slot name="suffix"></slot>
-		</div>
-		<div class="line" part="line"></div>
-		${invalid && errorMessage
-			? html`<div class="error" part="error">${errorMessage}</div>`
-			: nothing}
-	`,
-	attributes = [
-		'autocomplete',
-		'readonly',
-		'disabled',
-		'maxlength',
-		'invalid',
-		'no-label-float',
-		'always-float-label',
-	];

package/styles.js

@@ -1,160 +0,0 @@
-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/use-input.js

@@ -1,90 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'haunted';
-import { useImperativeApi } from '@neovici/cosmoz-utils/lib/hooks/use-imperative-api';
-import { notifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property';
-
-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 || 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.defaultPrevent && e.data && !regexp.test(e.data)) {
-					e.preventDefault();
-				}
-			};
-		}, [allowedPattern]),
-	autosize = (input) => {
-		input.style.height = '';
-		input.style.height = `${input.scrollHeight}px`;
-	},
-	limit = (input, maxRows) => {
-		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]);
-	};