@neovici/cosmoz-autocomplete 8.0.0 → 8.2.0

package/dist/autocomplete/autocomplete.d.ts

@@ -1,5 +1,6 @@
 import '@neovici/cosmoz-input';
 import { Props as Base, RProps } from './use-autocomplete';
+import style from './styles.css';
 export interface Props<I> extends Base<I> {
     invalid?: boolean;
     errorMessage?: string;
@@ -15,4 +16,4 @@ 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 };
+export { autocomplete, Autocomplete, observedAttributes, style };

package/dist/autocomplete/autocomplete.js

@@ -16,7 +16,7 @@ const inputParts = ['input', 'control', 'label', 'line', 'error']
     .map((part) => `${part}: input-${part}`)
     .join();
 const autocomplete = (props) => {
-    const { invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, showSingle, items$, values$, } = props, host = useHost(), isOne = limit == 1, // eslint-disable-line eqeqeq
+    const { invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, min, showSingle, items$, values$, } = props, host = useHost(), isOne = limit == 1, // eslint-disable-line eqeqeq
     isSingle = isOne && value?.[0] != null, 
     // TODO: Refactor with ref or a state callback
     anchor = useCallback(() => host.shadowRoot.querySelector('#input'), [host, value]), suggestions = until(items$.then((items) => when((!isSingle || showSingle) && items.length, () => listbox({
@@ -28,9 +28,7 @@ const autocomplete = (props) => {
     useImperativeApi({
         focus: () => host.shadowRoot?.querySelector('#input')?.focus(),
     }, []);
-    return html ` <style>
-				${style}
-			</style>
+    return html `
 			<cosmoz-input
 				id="input"
 				part="input"
@@ -56,6 +54,7 @@ const autocomplete = (props) => {
 				<slot name="suffix" slot="suffix"></slot>
 				${selection({
         value,
+        min,
         isOne,
         onDeselect,
         textual,
@@ -80,7 +79,9 @@ const autocomplete = (props) => {
     'text-property',
     'value-property',
     'limit',
+    'min',
     'show-single',
+    'preserve-order',
     'keep-opened',
     'keep-query',
     'hide-empty',
@@ -89,4 +90,4 @@ const autocomplete = (props) => {
     'item-limit',
     'wrap',
 ];
-export { autocomplete, Autocomplete, observedAttributes };
+export { autocomplete, Autocomplete, observedAttributes, style };

package/dist/autocomplete/chip.css.js

@@ -12,6 +12,7 @@ export default css `
 		min-width: 40px;
 		padding: 0 4px 0 8px;
 		gap: 4px;
+		cursor: pointer;
 	}
 	.content {
 		color: var(--cosmoz-autocomplete-chip-color, #424242);

package/dist/autocomplete/chip.d.ts

@@ -1,5 +1,5 @@
 interface Props {
-    onClear?: () => void;
+    onClear?: false | (() => void);
     disabled?: boolean;
 }
 export declare const Chip: ({ onClear, disabled }: Props) => import("lit-html").TemplateResult<1>;

package/dist/autocomplete/chip.js

@@ -1,6 +1,7 @@
-import { html, component } from '@pionjs/pion';
-import { when } from 'lit-html/directives/when.js';
+import { sheet } from '@neovici/cosmoz-utils';
+import { component, html } from '@pionjs/pion';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { when } from 'lit-html/directives/when.js';
 import styles from './chip.css';
 const clear = html `
 	<svg
@@ -27,15 +28,15 @@ const clear = html `
 	</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}>
+	${when(onClear && !disabled, () => html ` <span class="clear" part="clear chip-clear" @click=${onClear}>
 				${clear}
 			</span>`)}
 `;
-customElements.define('cosmoz-autocomplete-chip', component(Chip, { observedAttributes: ['disabled'] }));
+customElements.define('cosmoz-autocomplete-chip', component(Chip, {
+    observedAttributes: ['disabled'],
+    styleSheets: [sheet(styles)],
+}));
 export const chip = ({ content, onClear, disabled, hidden, className = 'chip', slot, }) => html `<cosmoz-autocomplete-chip
 		class=${ifDefined(className)}
 		slot=${ifDefined(slot)}

package/dist/autocomplete/index.js

@@ -1,5 +1,6 @@
 import { component, useCallback } from '@pionjs/pion';
-import { Autocomplete, observedAttributes as atts, } from './autocomplete';
+import { Autocomplete, observedAttributes as atts, style, } from './autocomplete';
+import { sheet } from '@neovici/cosmoz-utils';
 const Standalone = (host) => {
     const { onChange, onText, ...props } = host;
     return Autocomplete({
@@ -14,6 +15,6 @@ const Standalone = (host) => {
         }, [onText]),
     });
 };
-const observedAttributes = atts;
-customElements.define('cosmoz-autocomplete-ui', component(Autocomplete, { observedAttributes }));
-customElements.define('cosmoz-autocomplete', component(Standalone, { observedAttributes }));
+const observedAttributes = atts, styleSheets = [sheet(style)];
+customElements.define('cosmoz-autocomplete-ui', component(Autocomplete, { observedAttributes, styleSheets }));
+customElements.define('cosmoz-autocomplete', component(Standalone, { observedAttributes, styleSheets }));

package/dist/autocomplete/selection.d.ts

@@ -2,10 +2,11 @@ import type { RProps } from './use-autocomplete';
 type Deselect<I> = RProps<I>['onDeselect'];
 interface Props<I> {
     value: I[];
+    min?: number;
     isOne: boolean;
     onDeselect: Deselect<I>;
     textual: (i: I) => string;
     disabled?: boolean;
 }
-export declare const selection: <I>({ value: values, onDeselect, textual, disabled, }: Props<I>) => import("lit-html").TemplateResult<1>[];
+export declare const selection: <I>({ value: values, min, onDeselect, textual, disabled, }: Props<I>) => import("lit-html").TemplateResult<1>[];
 export {};

package/dist/autocomplete/selection.js

@@ -1,9 +1,9 @@
 import { html } from 'lit-html';
 import { chip } from './chip';
-export const selection = ({ value: values, onDeselect, textual, disabled, }) => [
+export const selection = ({ value: values, min = 0, onDeselect, textual, disabled, }) => [
     ...values.filter(Boolean).map((value) => chip({
         content: textual(value),
-        onClear: () => onDeselect(value),
+        onClear: values.length > min && (() => onDeselect(value)),
         disabled,
         slot: 'control',
     })),

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

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

package/dist/autocomplete/use-autocomplete.js

@@ -6,16 +6,16 @@ import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
 import { useFocus } from '@neovici/cosmoz-dropdown/use-focus';
 import { useKeys } from './use-keys';
 import { search, normalize, notify, useNotify, EMPTY$ } from './util';
-export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, source, textProperty, textual: _textual, valueProperty, external, hideEmpty, keepOpened, keepQuery, ...thru }) => {
+export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, external, hideEmpty, keepOpened, keepQuery, preserveOrder, ...thru }) => {
     const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), { active, focused, onFocus, setClosed } = useFocus(thru), empty = !text, query = useMemo(() => text?.trim(), [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) => {
-        return [
+    }, [_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) => preserveOrder
+        ? normalize(source)
+        : [
             ...value,
             ...without(value, prop(valueProperty))(normalize(source)),
-        ];
-    }), [source$, value, valueProperty]);
+        ]), [source$, value, valueProperty]);
     useKeys({
         focused,
         empty,
@@ -34,6 +34,7 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         onChange,
         value,
         limit,
+        min,
         keepQuery,
         keepOpened,
         setClosed,
@@ -61,13 +62,15 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         }, [onText, text, setClosed]),
         onSelect: useCallback((newVal) => {
             meta.onSelect?.(newVal, meta);
-            const { onChange, onText, limit, value: val, keepQuery, keepOpened, setClosed, } = meta;
+            const { onChange, onText, limit, min, value: val, keepQuery, keepOpened, setClosed, } = meta;
             if (!keepQuery)
                 onText('');
             if (!keepOpened)
                 setClosed(true);
-            const value = array(val);
-            onChange((value.includes(newVal)
+            const value = array(val), deselect = value.includes(newVal);
+            if (deselect && value.length === min)
+                return;
+            onChange((deselect
                 ? without(newVal)(value)
                 : [...value, newVal]).slice(-limit));
         }, [meta]),

package/dist/listbox/index.js

@@ -1,11 +1,13 @@
-import { html, component, useEffect, useRef, useMemo } from '@pionjs/pion';
-import { ref } from 'lit-html/directives/ref.js';
 import { virtualize, virtualizerRef, } from '@lit-labs/virtualizer/virtualize.js';
+import { sheet } from '@neovici/cosmoz-utils';
 import { portal } from '@neovici/cosmoz-utils/directives/portal';
 import { spreadProps } from '@neovici/cosmoz-utils/directives/spread-props';
+import { useStyleSheet } from '@neovici/cosmoz-utils/hooks/use-stylesheet';
 import { props } from '@neovici/cosmoz-utils/object';
-import { useListbox, properties } from './use-listbox';
-import { styles } from './style.css';
+import { component, html, useEffect, useMemo, useRef } from '@pionjs/pion';
+import { ref } from 'lit-html/directives/ref.js';
+import style, { styles } from './style.css';
+import { properties, useListbox } from './use-listbox';
 const Listbox = (props) => {
     const listRef = useRef(undefined);
     const { position, items, renderItem, height, itemHeight } = useListbox(props);
@@ -17,23 +19,21 @@ const Listbox = (props) => {
             return;
         vl.element(position.index)?.scrollIntoView({ block: 'nearest' });
     }, [position]);
+    useStyleSheet(styles({ ...position, height, itemHeight }));
     const layout = useMemo(() => ({
         _itemSize: { height: itemHeight - 0.00001 },
     }), [itemHeight]);
-    return html ` <style>
-			${styles({ ...position, height, itemHeight })}
-		</style>
-		<div class="items" ${ref((el) => (listRef.current = el))}>
-			<div virtualizer-sizer></div>
-			${virtualize({
+    return html `<div class="items" ${ref((el) => (listRef.current = el))}>
+		<div virtualizer-sizer></div>
+		${virtualize({
         items,
         renderItem,
         scroller: true,
         layout,
     })}
-		</div>`;
+	</div>`;
 };
-customElements.define('cosmoz-listbox', component(Listbox));
+customElements.define('cosmoz-listbox', component(Listbox, { styleSheets: [sheet(style)] }));
 export const listbox = ({ multi, ...thru }) => portal(html `<cosmoz-listbox
 			part="listbox"
 			?multi=${multi}

package/dist/listbox/style.css.js

@@ -84,8 +84,6 @@ const style = css `
 `;
 export default style;
 export const styles = ({ index, height, itemHeight, }) => css `
-	${style}
-
 	:host {
 		min-height: ${itemHeight}px;
 		height: ${height}px;

package/package.json

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