@neovici/cosmoz-autocomplete 6.3.0 → 7.0.0

package/dist/autocomplete/autocomplete.d.ts

@@ -11,6 +11,8 @@ export interface Props<I> extends Base<I> {
     itemHeight?: number;
     itemLimit?: number;
 }
-type AProps<I> = Omit<Props<I>, keyof RProps<I>> & RProps<I>;
+type AProps<I> = Omit<Props<I>, keyof RProps<I>> & RProps<I> & {
+    onInputRef?: (el?: Element) => void;
+};
 declare const autocomplete: <I>(props: AProps<I>) => import("lit-html").TemplateResult<1>, Autocomplete: <I>(props: Props<I>) => import("lit-html").TemplateResult<1>, observedAttributes: string[];
 export { autocomplete, Autocomplete, observedAttributes };

package/dist/autocomplete/autocomplete.js

@@ -9,6 +9,7 @@ import { useAutocomplete } from './use-autocomplete';
 import { listbox } from '../listbox';
 import style from './styles.css';
 import { selection } from './selection';
+import { useOverflow } from './use-overflow';
 const blank = () => nothing;
 const inputParts = ['input', 'label', 'line', 'error']
     .map((part) => `${part}: input-${part}`)
@@ -32,7 +33,7 @@ const autocomplete = (props) => {
 				.label=${label}
 				.placeholder=${isSingle ? undefined : placeholder}
 				?no-label-float=${noLabelFloat}
-				?always-float-label=${isSingle || alwaysFloatLabel}
+				?always-float-label=${value?.length > 0 || alwaysFloatLabel}
 				?readonly=${isSingle}
 				?disabled=${disabled}
 				?invalid=${until(values$.then(() => invalid, () => true), invalid)}
@@ -44,6 +45,7 @@ const autocomplete = (props) => {
 				@click=${onClick}
 				autocomplete="off"
 				exportparts=${inputParts}
+				?data-one=${isOne}
 			>
 				<slot name="prefix" slot="prefix"></slot>
 				<slot name="suffix" slot="suffix"></slot>
@@ -58,10 +60,14 @@ const autocomplete = (props) => {
 			</cosmoz-input>
 
 			${suggestions}`;
-}, Autocomplete = (props) => autocomplete({
-    ...props,
-    ...useAutocomplete(props),
-}), observedAttributes = [
+}, Autocomplete = (props) => {
+    const thru = {
+        ...props,
+        ...useAutocomplete(props),
+    };
+    useOverflow(thru);
+    return autocomplete(thru);
+}, observedAttributes = [
     'disabled',
     'invalid',
     'no-label-float',

package/dist/autocomplete/chip.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/dist/autocomplete/chip.css.js

@@ -0,0 +1,46 @@
+import { tagged as css } from '@neovici/cosmoz-utils';
+export default css `
+	:host {
+		border-radius: var(--cosmoz-autocomplete-chip-border-radius, 500px);
+		background: var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb);
+		margin: 0px 0 2px 0;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		flex: 0.0001 1 fit-content;
+		max-width: 18ch;
+		min-width: 40px;
+		padding: 0 4px 0 8px;
+		gap: 4px;
+	}
+	.content {
+		color: var(--cosmoz-autocomplete-chip-color, #424242);
+		font-size: var(--cosmoz-autocomplete-chip-text-font-size, 12px);
+		line-height: var(--cosmoz-autocomplete-chip-text-line-height, 22px);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		flex: auto;
+		min-width: 16px;
+	}
+	.clear {
+		background-color: var(--cosmoz-autocomplete-chip-clear-bg-color, #81899b);
+		border-radius: 50%;
+		cursor: pointer;
+		width: 16px;
+		height: 16px;
+		stroke: var(
+			--cosmoz-autocomplete-chip-clear-stroke,
+			var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb)
+		);
+		display: block;
+		flex: none;
+	}
+	.clear:hover {
+		filter: brightness(90%);
+	}
+	.clear svg {
+		display: block;
+		transform: translate(3.5px, 3.5px);
+	}
+`;

package/dist/autocomplete/chip.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    onClear?: () => void;
+    disabled?: boolean;
+}
+export declare const Chip: ({ onClear, disabled }: Props) => import("lit-html").TemplateResult<1>;
+interface ChipProps extends Props {
+    slot?: string;
+    className?: string;
+    content: unknown;
+}
+export declare const chip: ({ content, onClear, disabled, className, slot, }: ChipProps) => import("lit-html").TemplateResult<1>;
+export {};

package/dist/autocomplete/chip.js

@@ -0,0 +1,48 @@
+import { html, component } from 'haunted';
+import { when } from 'lit-html/directives/when.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import styles from './chip.css';
+const clear = html `
+	<svg
+		width="9"
+		height="8"
+		viewBox="0 0 9 8"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<line
+			x1="7.53033"
+			y1="0.994808"
+			x2="1.16637"
+			y2="7.35877"
+			stroke-width="1.5"
+		/>
+		<line
+			x1="7.46967"
+			y1="7.35882"
+			x2="1.10571"
+			y2="0.99486"
+			stroke-width="1.5"
+		/>
+	</svg>
+`;
+export const Chip = ({ onClear, disabled }) => html `
+	<style>
+		${styles}
+	</style>
+	<div class="content" part="content chip-text"><slot></slot></div>
+	${when(!disabled, () => html ` <span class="clear" part="clear chip-clear" @click=${onClear}>
+				${clear}
+			</span>`)}
+`;
+customElements.define('cosmoz-autocomplete-chip', component(Chip, { observedAttributes: ['disabled'] }));
+export const chip = ({ content, onClear, disabled, className = 'chip', slot, }) => html `<cosmoz-autocomplete-chip
+		class=${ifDefined(className)}
+		slot=${ifDefined(slot)}
+		part="chip"
+		exportparts="chip-text, chip-clear"
+		?disabled=${disabled}
+		.onClear=${onClear}
+		title=${ifDefined(typeof content === 'string' ? content : undefined)}
+		>${content}</cosmoz-autocomplete-chip
+	>`;

package/dist/autocomplete/selection.d.ts

@@ -7,5 +7,5 @@ interface Props<I> {
     textual: (i: I) => string;
     disabled?: boolean;
 }
-export declare const selection: <I>({ value, isOne, onDeselect, textual, disabled, }: Props<I>) => import("lit-html").TemplateResult<1> | undefined;
+export declare const selection: <I>({ value: values, onDeselect, textual, disabled, }: Props<I>) => import("lit-html").TemplateResult<1>[];
 export {};

package/dist/autocomplete/selection.js

@@ -1,58 +1,16 @@
-import { html } from 'lit-html'; // eslint-disable-line object-curly-newline
-import { when } from 'lit-html/directives/when.js';
-const clear = html `
-	<svg
-		width="9"
-		height="8"
-		viewBox="0 0 9 8"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<line
-			x1="7.53033"
-			y1="0.994808"
-			x2="1.16637"
-			y2="7.35877"
-			stroke-width="1.5"
-		/>
-		<line
-			x1="7.46967"
-			y1="7.35882"
-			x2="1.10571"
-			y2="0.99486"
-			stroke-width="1.5"
-		/>
-	</svg>
-`;
-const chip = ({ text, onClear, disabled, isOne, }) => html `
-	<div class="chip" part="chip" slot="suffix" title=${text} ?data-one=${isOne}>
-		<span class="chip-text" part="chip-text">${text}</span>
-		${when(!disabled, () => html ` <span class="chip-clear" part="chip-clear" @click=${onClear}>
-					${clear}
-				</span>`)}
-	</div>
-`;
-const badge = ({ value, onDeselect, }) => {
-    const len = value?.length;
-    return when(len > 0, () => html `<div class="badge" slot="suffix" part="badge">
-			${len}
-			<span
-				class="badge-clear"
-				part="chip-clear"
-				@click=${() => onDeselect(value)}
-				>${clear}</span
-			>
-		</div>`);
-};
-export const selection = ({ value, isOne, onDeselect, textual, disabled, }) => {
-    if (isOne || value.length === 1) {
-        const val = value[0];
-        return when(val, () => chip({
-            text: textual(val),
-            onClear: () => onDeselect(val),
-            disabled,
-            isOne,
-        }));
-    }
-    return badge({ value, onDeselect });
-};
+import { html } from 'lit-html';
+import { chip } from './chip';
+export const selection = ({ value: values, onDeselect, textual, disabled, }) => [
+    ...values.map((value) => chip({
+        content: textual(value),
+        onClear: () => onDeselect(value),
+        disabled,
+        slot: 'control',
+    })),
+    chip({
+        content: html `<span></span>`,
+        className: 'badge',
+        disabled: true,
+        slot: 'control',
+    }),
+];

package/dist/autocomplete/styles.css.js

@@ -4,84 +4,41 @@ export default css `
 		display: block;
 		position: relative;
 	}
-	.chip {
-		border-radius: var(--cosmoz-autocomplete-chip-border-radius, 500px);
-		background: var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb);
-		margin: 1px 4px 1px 0;
-		white-space: nowrap;
-		overflow: hidden;
+
+	cosmoz-input::part(control) {
 		display: flex;
-		flex-direction: row;
-		align-items: center;
-		flex: 0.00001 1 min-content;
-		max-width: 285px;
-		max-width: 28ch;
+		gap: 4px;
+		min-width: 35px;
 	}
-	.chip[data-one] {
-		position: absolute;
-		left: 0;
-		top: 1px;
-		bottom: 1px;
-		right: 0;
-		margin: 0;
-		z-index: 2;
-		pointer-events: auto;
-		max-width: initial;
+	cosmoz-input::part(input) {
+		flex: 1 24px;
+		min-width: 0;
 	}
-	.chip-text {
-		color: var(--cosmoz-autocomplete-chip-color, #424242);
-		margin: var(--cosmoz-autocomplete-chip-text-margin, 0 10px);
-		font-size: var(--cosmoz-autocomplete-chip-text-font-size, 12px);
-		line-height: var(--cosmoz-autocomplete-chip-text-line-height, 22px);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		flex: 1;
+	cosmoz-input:not([data-one])::part(input):focus {
+		flex: 4 0.00001 50px;
+		min-width: 20px;
 	}
-	.chip-clear {
-		margin: 2px 4px 2px -6px;
-		background-color: var(--cosmoz-autocomplete-chip-clear-bg-color, #81899b);
-		border-radius: 500px;
-		cursor: pointer;
-		width: 16px;
-		height: 16px;
-		stroke: var(
-			--cosmoz-autocomplete-chip-clear-stroke,
-			var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb)
-		);
-		display: block;
+	.badge {
+		min-width: initial;
+		flex: none;
+		text-align: center;
+		padding: 0 4px;
 	}
 
-	.chip-clear svg,
-	.badge-clear svg {
-		display: block;
-		transform: translate(3.5px, 3.5px);
+	[data-one]::part(input) {
+		flex: 0;
+	}
+	[data-one] .chip {
+		max-width: initial;
+		flex: 1;
 	}
 
-	.badge {
-		background: var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb);
-		color: var(--cosmoz-autocomplete-chip-color, #424242);
-		font-weight: 500;
-		font-size: 12px;
-		line-height: 22px;
-		padding: 0 4px 0 6px;
-		gap: 4px;
-		border-radius: 90px;
-		text-align: center;
-		box-sizing: border-box;
-		/* fallback for unsupported min-content FF, Safari */
-		flex: 0.01 2 30px;
-		flex: 0 2 min-content;
-		display: flex;
-		align-items: center;
+	[data-one] .badge {
+		display: none;
 	}
-	.badge-clear {
-		background-color: var(--cosmoz-autocomplete-chip-clear-bg-color, #81899b);
-		border-radius: 500px;
-		cursor: pointer;
-		width: 16px;
-		height: 16px;
-		stroke: var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb);
-		display: block;
+
+	[hidden] {
+		display: none;
 	}
 
 	slot {

package/dist/autocomplete/use-autocomplete.d.ts

@@ -19,7 +19,7 @@ export interface Props<I> extends Base<I> {
     text: string;
     source: I[] | Source<I>;
     textProperty?: string;
-    textual?: (i: I) => string;
+    textual?: (prop?: string) => (i: I) => string;
     valueProperty?: string;
     external?: boolean;
     hideEmpty?: boolean;
@@ -27,6 +27,7 @@ export interface Props<I> extends Base<I> {
     onFocus?: (focused?: boolean) => void;
 }
 export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, source, textProperty, textual: _textual, valueProperty, external, hideEmpty, keepQuery, keepOpened, ...thru }: Props<I>) => {
+    active: boolean | undefined;
     query: string;
     textual: (i: I) => string;
     value: I[];

package/dist/autocomplete/use-autocomplete.js

@@ -7,7 +7,7 @@ import { useFocus } from '@neovici/cosmoz-dropdown/use-focus';
 import { useKeys } from './use-keys';
 import { search, notify, useNotify, EMPTY$ } from './util';
 export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, source, textProperty, textual: _textual, valueProperty, external, hideEmpty, keepQuery, keepOpened, ...thru }) => {
-    const textual = useMemo(() => _textual || strProp(textProperty), [_textual, textProperty]), { active, onFocus, setClosed } = useFocus(thru), empty = !text, query = useMemo(() => text?.trim().toLowerCase(), [text]), host = useHost(), onText = useNotify(host, _onText, 'text'), onChange = useCallback((val) => {
+    const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), { active, onFocus, setClosed } = useFocus(thru), empty = !text, query = useMemo(() => text?.trim().toLowerCase(), [text]), host = useHost(), onText = useNotify(host, _onText, 'text'), onChange = useCallback((val) => {
         _onChange?.(val, () => setClosed(true));
         notify(host, 'value', val);
     }, [_onChange]), source$ = useMemo(() => Promise.resolve(typeof source === 'function' ? source({ query, active }) : source), [source, active, query]), value = useMemo(() => array(_value), [_value]), values$ = useMemo(() => source$.then((source) => [
@@ -34,6 +34,7 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         onSelect,
     });
     return {
+        active,
         query,
         textual,
         value,

package/dist/autocomplete/use-overflow.d.ts

@@ -0,0 +1,4 @@
+export declare const useOverflow: <I>({ value, active, }: {
+    value: I[];
+    active?: boolean | undefined;
+}) => void;

package/dist/autocomplete/use-overflow.js

@@ -0,0 +1,46 @@
+import { useLayoutEffect, useState, useMemo } from 'haunted';
+import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
+import { raf } from './util';
+const overflow = (host) => {
+    const chips = host.shadowRoot.querySelectorAll('.chip');
+    const badge = host.shadowRoot.querySelector('.badge');
+    badge.hidden = true;
+    for (const chip of chips) {
+        chip.hidden = false;
+    }
+    const input = host.shadowRoot.querySelector('cosmoz-input');
+    if (input.matches('[data-one]'))
+        return;
+    const limit = input.shadowRoot
+        ?.querySelector('.control')
+        ?.getBoundingClientRect();
+    let i;
+    for (i = 0; i < chips.length; i++) {
+        const chip = chips[i];
+        const bounds = chip.getBoundingClientRect();
+        const isIn = bounds.x + bounds.width <= limit.x + limit.width - 24;
+        if (!isIn) {
+            break;
+        }
+    }
+    const overflown = chips.length - i;
+    badge.querySelector('span').textContent = '+' + overflown.toString();
+    badge.hidden = overflown < 1;
+    for (; i < chips.length; i++) {
+        chips[i].hidden = true;
+    }
+};
+export const useOverflow = ({ value, active, }) => {
+    const host = useHost();
+    const doRaf = useMemo(() => raf(() => overflow(host)), []);
+    const [width, setWidth] = useState(0);
+    useLayoutEffect(() => {
+        const input = host.shadowRoot.querySelector('cosmoz-input');
+        const observer = new ResizeObserver((e) => {
+            setWidth(e[0].contentRect.width);
+        });
+        observer.observe(input);
+        return () => observer.disconnect();
+    }, []);
+    useLayoutEffect(() => doRaf(), [width, active, value]);
+};

package/dist/autocomplete/util.d.ts

@@ -2,3 +2,7 @@ export declare const search: <I>(source: I[], query: string, textual: (i: I) =>
 export declare const notify: <T>(host: EventTarget, name: string, detail: T) => boolean;
 export declare const useNotify: <V>(host: EventTarget, fn: ((v: V) => void) | undefined, name: string) => (val: V) => void;
 export declare const EMPTY: never[], EMPTY$: Promise<never[]>;
+type Arr = unknown[];
+type ArrFn<T extends Arr> = (...args: T) => void;
+export declare const raf: <A extends Arr, F extends ArrFn<A> = ArrFn<A>>(fn: F) => (...args: A) => () => void;
+export {};

package/dist/autocomplete/util.js

@@ -23,3 +23,16 @@ export const useNotify = (host, fn, name) => useCallback((val) => {
     notify(host, name, val);
 }, [fn]);
 export const EMPTY = [], EMPTY$ = Promise.resolve(EMPTY);
+export const raf = (fn) => (...args) => {
+    let id;
+    const cleanup = () => {
+        if (id)
+            cancelAnimationFrame(id);
+    };
+    cleanup();
+    id = requestAnimationFrame(() => {
+        id = undefined;
+        fn(...args);
+    });
+    return cleanup;
+};

package/package.json

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