selectic 1.3.11 → 3.0.3

package/src/css/selectic.css

@@ -220,6 +220,12 @@
     opacity: 0;
 }
 
+.selectic-item_text {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
 .selectic-item__active {
     background-color: var(--selectic-active-item-bg);
     color: var(--selectic-active-item-color);

package/src/index.tsx

@@ -18,7 +18,7 @@
  *   close [component]: triggered when the list closes.
  */
 
-import {Vue, Component, Prop, Watch} from 'vtyx';
+import {Vue, Component, Prop, Watch, h} from 'vtyx';
 import './css/selectic.css';
 
 import Store, {
@@ -36,6 +36,7 @@ import Store, {
     FormatCallback,
     SelectionOverflow,
     ListPosition,
+    HideFilter,
 } from './Store';
 import MainInput from './MainInput';
 import ExtendedList from './ExtendedList';
@@ -55,8 +56,21 @@ export {
     FormatCallback,
     SelectionOverflow,
     ListPosition,
+    HideFilter,
 };
 
+type EventType = 'input' | 'change' | 'open' | 'close' | 'focus' | 'blur' | 'item:click';
+
+export interface EventOptions {
+    instance: Selectic;
+    eventType: EventType;
+    automatic: boolean;
+}
+
+export interface EventChangeOptions extends EventOptions {
+    isExcluded: boolean;
+}
+
 export interface ParamProps {
     /* Method to call to fetch extra data */
     fetchCallback?: FetchCallback;
@@ -71,7 +85,7 @@ export interface ParamProps {
     pageSize?: number;
 
     /* Hide the search control */
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
 
     /* Allow to reverse selection.
      * If true, parent should support the selectionIsExcluded property.
@@ -126,6 +140,17 @@ export interface ParamProps {
     keepOpenWithOtherSelectic?: boolean;
 }
 
+export type OnCallback = (event: string, ...args: any[]) => void;
+export type GetMethodsCallback = (methods: {
+    clearCache: Selectic['clearCache'];
+    changeTexts: Selectic['changeTexts'];
+    getValue: Selectic['getValue'];
+    getSelectedItems: Selectic['getSelectedItems'];
+    isEmpty: Selectic['isEmpty'];
+    toggleOpen: Selectic['toggleOpen'];
+}) => void;
+
+
 export interface Props {
     /* Selectic's initial value */
     value?: SelectedValue;
@@ -173,6 +198,17 @@ export interface Props {
      * attributes of select.
      */
     params?: ParamProps;
+
+    /** _on is used mainly for tests.
+     * Its purpose is to propagate $emit event mainly
+     * for parents which are not in Vue environment.
+     */
+    _on?: OnCallback;
+
+    /** _getMethods is used mainly for tests.
+     * Its purpose is to provide public methods outside of a Vue environment.
+     */
+    _getMethods?: GetMethodsCallback;
 }
 
 export function changeTexts(texts: PartialMessages) {
@@ -234,6 +270,13 @@ export default class Selectic extends Vue<Props> {
     })})
     public params: ParamProps;
 
+    /** For tests */
+    @Prop()
+    public _on?: OnCallback;
+
+    @Prop()
+    public _getMethods?: GetMethodsCallback;
+
     /* }}} */
     /* {{{ data */
 
@@ -242,6 +285,7 @@ export default class Selectic extends Vue<Props> {
     public elementLeft = 0;
     public elementRight = 0;
     public width = 0;
+    private hasBeenRendered = false;
 
     private store: Store = {} as Store;
 
@@ -253,10 +297,10 @@ export default class Selectic extends Vue<Props> {
     /* {{{ computed */
 
     get isFocused() {
-        if (!this.store || !this.store.state) {
+        if (!this.hasBeenRendered) {
             return false;
         }
-        return this.store.state.isOpen;
+        return !!this.store.state.isOpen;
     }
 
     get scrollListener() {
@@ -393,17 +437,18 @@ export default class Selectic extends Vue<Props> {
     private computeOffset(doNotAddListener = false) {
         const mainInput = this.$refs.mainInput;
 
-        if (!mainInput || !mainInput.$el) {
+        const mainEl = mainInput?.$el as HTMLElement;
+
+        if (!mainEl) {
             /* This method has been called too soon (before render function) */
             return;
         }
 
-        const mainEl = mainInput.$el as HTMLElement;
         const _elementsListeners = this._elementsListeners;
 
         /* add listeners */
         if (!doNotAddListener) {
-            let el = mainInput.$el as HTMLElement;
+            let el = mainEl;
             while (el) {
                 el.addEventListener('scroll', this.scrollListener, { passive: true });
                 _elementsListeners.push(el);
@@ -452,14 +497,14 @@ export default class Selectic extends Vue<Props> {
             window.addEventListener('resize', this.windowResize, false);
             document.addEventListener('click', this.outsideListener, true);
             this.computeOffset();
-            this.$emit('open', this);
+            this.emit('open');
         } else {
             this.removeListeners();
             if (state.status.hasChanged) {
                 this.$emit('change', this.getValue(), state.selectionIsExcluded, this);
                 this.store.resetChange();
             }
-            this.$emit('close', this);
+            this.emit('close');
         }
     }
 
@@ -480,7 +525,7 @@ export default class Selectic extends Vue<Props> {
     /* {{{ watch */
 
     @Watch('value')
-    protected onValueChange() {
+    public onValueChange() {
         const currentValue = this.store.state.internalValue;
         const newValue = this.value ?? null;
         const areSimilar = this.compareValues(
@@ -494,17 +539,17 @@ export default class Selectic extends Vue<Props> {
     }
 
     @Watch('selectionIsExcluded')
-    protected onExcludedChange() {
-        this.store.selectionIsExcluded = this.selectionIsExcluded;
+    public onExcludedChange() {
+        this.store.props.selectionIsExcluded = this.selectionIsExcluded;
     }
 
     @Watch('options')
-    protected onOptionsChange() {
-        this.store.options = this.options;
+    public onOptionsChange() {
+        this.store.props.options = Array.from(this.options);
     }
 
     @Watch('texts')
-    protected onTextsChange() {
+    public onTextsChange() {
         const texts = this.texts;
 
         if (texts) {
@@ -513,45 +558,46 @@ export default class Selectic extends Vue<Props> {
     }
 
     @Watch('disabled')
-    protected onDisabledChange() {
-        this.store.disabled = this.disabled;
+    public onDisabledChange() {
+        this.store.props.disabled = this.disabled;
     }
 
     @Watch('groups')
-    protected onGroupsChanged() {
+    public onGroupsChanged() {
         this.store.changeGroups(this.groups);
     }
 
     @Watch('placeholder')
-    protected onPlaceholderChanged() {
+    public onPlaceholderChanged() {
         this.store.commit('placeholder', this.placeholder);
     }
 
     @Watch('open')
-    protected onOpenChanged() {
+    public onOpenChanged() {
         this.store.commit('isOpen', this.open ?? false);
     }
 
     @Watch('isFocused')
-    protected onFocusChanged() {
+    public onFocusChanged() {
         this.focusToggled();
     }
 
     @Watch('store.state.internalValue')
-    protected onInternalValueChange() {
+    public onInternalValueChange() {
         const oldValue = this._oldValue;
         const value = this.getValue();
         const areSimilar = this.compareValues(oldValue, value);
-        /* should not trigger when initializing internalValue, but should do if it changes the inital value */
+        /* should not trigger when initializing internalValue, but should do
+         * if it changes the initial value */
         const canTrigger = (oldValue !== undefined || !this.hasGivenValue) && !areSimilar;
 
         if (canTrigger) {
             const selectionIsExcluded = this.store.state.selectionIsExcluded;
 
-            this.$emit('input', value, selectionIsExcluded, this);
+            this.emit('input', value, selectionIsExcluded);
 
             if (!this.isFocused) {
-                this.$emit('change', value, selectionIsExcluded, this);
+                this.emit('change', value, selectionIsExcluded);
                 this.store.resetChange();
             }
         }
@@ -581,99 +627,145 @@ export default class Selectic extends Vue<Props> {
         }, 0);
     }
 
-    private extractFromNode(node: Vue.VNode, text = ''): OptionValue {
-        function styleToString(staticStyle?: {[key: string]: string}): string | undefined {
-            if (!staticStyle) {
-                return;
-            }
-            let styles = [];
-            for (const [key, value] of Object.entries(staticStyle)) {
-                styles.push(`${key}: ${value}`);
-            }
-            return styles.join(';');
-        }
-
-        const domProps = node.data?.domProps;
-        const attrs = node.data?.attrs;
-        const id = domProps?.value ?? attrs?.value ?? attrs?.id ?? text;
-        const className = node.data?.staticClass;
-        const style = styleToString(node.data?.staticStyle);
-
-        const optVal: OptionValue = {
-            id,
-            text,
-            className,
-            style,
-        };
+    /* This method is only to emit the events and to replicate them */
+    private _emit(event: 'input' | 'change', value: SelectedValue, options: EventChangeOptions): void;
+    private _emit(event: 'open' | 'close' | 'focus' | 'blur', options: EventOptions): void;
+    private _emit(event: 'item:click', value: OptionId, options: EventOptions): void;
+    private _emit(event: EventType, ...args: any[]) {
+        this.$emit(event, ...args);
 
-        if (attrs) {
-            for (const [key, val] of Object.entries(attrs)) {
-                switch(key) {
-                    case 'title':
-                        optVal.title = val;
-                        break;
-                    case 'disabled':
-                        if (val === false) {
-                            optVal.disabled = false;
-                        } else {
-                            optVal.disabled = true;
-                        }
-                        break;
-                    case 'group':
-                        optVal.group = val;
-                        break;
-                    case 'icon':
-                        optVal.icon = val;
-                        break;
-                    case 'data':
-                        optVal.data = val;
-                        break;
-                    default:
-                        if (key.startsWith('data')) {
-                            if (typeof optVal.data !== 'object') {
-                                optVal.data = {};
-                            }
-                            optVal.data[key.slice(5)] = val;
-                        }
-                }
-            }
+        if (typeof this._on === 'function') {
+            this._on(event, ...args);
         }
-
-        return optVal;
-    }
-
-    private extractOptionFromNode(node: Vue.VNode): OptionValue {
-        const children = node.children;
-        const text = (children && children[0].text || '').trim();
-
-        return this.extractFromNode(node, text);
     }
 
-    private extractOptgroupFromNode(node: Vue.VNode): OptionValue {
-        const attrs = node.data?.attrs;
-        const children = node.children || [];
-        const text = attrs?.label || '';
-        const options: OptionValue[] = [];
-
-        for (const child of children) {
-            if (child.tag === 'option') {
-                options.push(this.extractOptionFromNode(child));
-            }
+    private emit(event: 'input' | 'change', value: SelectedValue, isExcluded: boolean): void;
+    private emit(event: 'open' | 'close' | 'focus' | 'blur'): void;
+    private emit(event: 'item:click', value: OptionId): void;
+    private emit(event: EventType, value?: SelectedValue | OptionId, isExcluded?: boolean) {
+        const automatic = this.store.state.status.automaticChange;
+        const options: EventOptions = {
+            instance: this,
+            eventType: event,
+            automatic,
+        };
+        switch (event) {
+            case 'input':
+            case 'change':
+                const changeOptions: EventChangeOptions = Object.assign({
+                    isExcluded: isExcluded!,
+                }, options);
+                this._emit(event, value as SelectedValue, changeOptions);
+                break;
+            case 'open':
+            case 'focus':
+                this._emit('open', options);
+                this._emit('focus', options);
+                break;
+            case 'close':
+            case 'blur':
+                this._emit('close', options);
+                this._emit('blur', options);
+                break;
+            case 'item:click':
+                this._emit(event, value as OptionId, options);
+                break;
         }
-
-        const opt = this.extractFromNode(node, text);
-        opt.options = options;
-
-        return opt;
     }
 
+    // private extractFromNode(node: Vue.VNode, text = ''): OptionValue {
+    //     function styleToString(staticStyle?: {[key: string]: string}): string | undefined {
+    //         if (!staticStyle) {
+    //             return;
+    //         }
+    //         let styles = [];
+    //         for (const [key, value] of Object.entries(staticStyle)) {
+    //             styles.push(`${key}: ${value}`);
+    //         }
+    //         return styles.join(';');
+    //     }
+
+    //     const domProps = node.data?.domProps;
+    //     const attrs = node.data?.attrs;
+    //     const id = domProps?.value ?? attrs?.value ?? attrs?.id ?? text;
+    //     const className = node.data?.staticClass;
+    //     const style = styleToString(node.data?.staticStyle);
+
+    //     const optVal: OptionValue = {
+    //         id,
+    //         text,
+    //         className,
+    //         style,
+    //     };
+
+    //     if (attrs) {
+    //         for (const [key, val] of Object.entries(attrs)) {
+    //             switch(key) {
+    //                 case 'title':
+    //                     optVal.title = val;
+    //                     break;
+    //                 case 'disabled':
+    //                     if (val === false) {
+    //                         optVal.disabled = false;
+    //                     } else {
+    //                         optVal.disabled = true;
+    //                     }
+    //                     break;
+    //                 case 'group':
+    //                     optVal.group = val;
+    //                     break;
+    //                 case 'icon':
+    //                     optVal.icon = val;
+    //                     break;
+    //                 case 'data':
+    //                     optVal.data = val;
+    //                     break;
+    //                 default:
+    //                     if (key.startsWith('data')) {
+    //                         if (typeof optVal.data !== 'object') {
+    //                             optVal.data = {};
+    //                         }
+    //                         optVal.data[key.slice(5)] = val;
+    //                     }
+    //             }
+    //         }
+    //     }
+
+    //     return optVal;
+    // }
+
+    // private extractOptionFromNode(node: Vue.VNode): OptionValue {
+    //     const children = node.children;
+    //     const text = (children && children[0].text || '').trim();
+
+    //     return this.extractFromNode(node, text);
+    // }
+
+    // private extractOptgroupFromNode(node: Vue.VNode): OptionValue {
+    //     const attrs = node.data?.attrs;
+    //     const children = node.children || [];
+    //     const text = attrs?.label || '';
+    //     const options: OptionValue[] = [];
+
+    //     for (const child of children) {
+    //         if (child.tag === 'option') {
+    //             options.push(this.extractOptionFromNode(child));
+    //         }
+    //     }
+
+    //     const opt = this.extractFromNode(node, text);
+    //     opt.options = options;
+
+    //     return opt;
+    // }
+
     /* }}} */
     /* {{{ Life cycle */
 
-    protected created() {
+    public created() {
         this._elementsListeners = [];
 
-        this.store = new Store({ propsData: {
+        this.store = new Store({
             options: this.options,
             value: this.value,
             selectionIsExcluded: this.selectionIsExcluded,
@@ -682,10 +774,9 @@ export default class Selectic extends Vue<Props> {
             groups: this.groups,
             keepOpenWithOtherSelectic: !!this.params.keepOpenWithOtherSelectic,
             params: {
-                multiple: this.multiple,
+                multiple: (this.multiple ?? false) !== false,
                 pageSize: this.params.pageSize || 100,
-                hideFilter: this.params.hideFilter !== undefined
-                          ? this.params.hideFilter : 'auto',
+                hideFilter: this.params.hideFilter ?? 'auto',
                 allowRevert: this.params.allowRevert, /* it can be undefined */
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
@@ -700,48 +791,66 @@ export default class Selectic extends Vue<Props> {
                 formatSelection: this.params.formatSelection,
                 listPosition: this.params.listPosition || 'auto',
                 optionBehavior: this.params.optionBehavior, /* it can be undefined */
-                isOpen: !!this.open,
+                isOpen: (this.open ?? false) !== false,
             },
             fetchCallback: this.params.fetchCallback,
             getItemsCallback: this.params.getItemsCallback,
-        }});
+        });
+
+        if (typeof this._getMethods === 'function') {
+            this._getMethods({
+                clearCache: this.clearCache.bind(this),
+                changeTexts: this.changeTexts.bind(this),
+                getValue: this.getValue.bind(this),
+                getSelectedItems: this.getSelectedItems.bind(this),
+                isEmpty: this.isEmpty.bind(this),
+                toggleOpen: this.toggleOpen.bind(this),
+            });
+        }
     }
 
-    protected mounted() {
-        setTimeout(() => this.computeOffset(), 0);
+    public mounted() {
+        setTimeout(() => {
+            this.hasBeenRendered = true;
+            this.computeOffset();
+        }, 100);
     }
 
-    protected beforeUpdate() {
-        const elements = this.$slots.default;
-        if (!elements) {
-            this.store.childOptions = [];
-            return;
-        }
-        const options = [];
-
-        for (const node of elements) {
-            if (node.tag === 'option') {
-                const prop = this.extractOptionFromNode(node);
-                options.push(prop);
-            } else
-            if (node.tag === 'optgroup') {
-                const prop = this.extractOptgroupFromNode(node);
-                options.push(prop);
-            }
-        }
+    public beforeUpdate() {
+        // const elements = this.$slots.default;
+        // if (!elements) {
+        //     this.store.childOptions = [];
+        //     return;
+        // }
+        // const options = [];
+
+        // for (const node of elements) {
+        //     if (node.tag === 'option') {
+        //         const prop = this.extractOptionFromNode(node);
+        //         options.push(prop);
+        //     } else
+        //     if (node.tag === 'optgroup') {
+        //         const prop = this.extractOptgroupFromNode(node);
+        //         options.push(prop);
+        //     }
+        // }
 
-        this.store.childOptions = options;
+        // this.store.childOptions = options;
     }
 
-    protected beforeDestroy() {
+    public beforeDestroy() {
         this.removeListeners();
     }
 
     /* }}} */
 
-    protected render() {
-        const h = this.renderWrapper();
+    public render() {
         const id = this.id || undefined;
+        const store = this.store;
+
+        if (!store.state) {
+            return; /* component is not ready yet */
+        }
 
         return (
             <div
@@ -749,7 +858,7 @@ export default class Selectic extends Vue<Props> {
                 title={this.title}
                 data-selectic="true"
                 on={{
-                    'click.prevent.stop': () => this.store.commit('isOpen', true),
+                    'click.prevent.stop': () => store.commit('isOpen', true),
                 }}
             >
                 {/* This input is for DOM submission */}
@@ -759,22 +868,22 @@ export default class Selectic extends Vue<Props> {
                     value={this.inputValue}
                     class="selectic__input-value"
                     on={{
-                        focus: () => this.store.commit('isOpen', true),
+                        focus: () => store.commit('isOpen', true),
                         blur: this.checkFocus,
                     }}
                 />
                 <MainInput
-                    store={this.store}
+                    store={store}
                     id={id}
                     on={{
-                        'item:click': (id: OptionId) => this.$emit('item:click', id, this),
+                        'item:click': (id: OptionId) => this.emit('item:click', id),
                     }}
                     ref="mainInput"
                 />
               {this.isFocused && (
                 <ExtendedList
                     class={this.className}
-                    store={this.store}
+                    store={store}
                     elementBottom={this.elementBottom}
                     elementTop={this.elementTop}
                     elementLeft={this.elementLeft}