selectic 3.0.0 → 3.0.4

package/src/index.tsx

@@ -18,7 +18,7 @@
  *   close [component]: triggered when the list closes.
  */
 
-import {Vue, Component, Prop, Watch, h} from 'vtyx';
+import {Vue, Component, Emit, 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.
@@ -483,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');
         }
     }
 
@@ -531,7 +545,7 @@ export default class Selectic extends Vue<Props> {
 
     @Watch('options')
     public onOptionsChange() {
-        this.store.props.options = this.options;
+        this.store.props.options = Array.from(this.options);
     }
 
     @Watch('texts')
@@ -580,10 +594,10 @@ export default class Selectic extends Vue<Props> {
         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();
             }
         }
@@ -613,7 +627,11 @@ export default class Selectic extends Vue<Props> {
         }, 0);
     }
 
-    private emit(event: string, ...args: any[]) {
+    /* 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 (typeof this._on === 'function') {
@@ -621,6 +639,40 @@ export default class Selectic extends Vue<Props> {
         }
     }
 
+    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;
+        }
+    }
+
     // private extractFromNode(node: Vue.VNode, text = ''): OptionValue {
     //     function styleToString(staticStyle?: {[key: string]: string}): string | undefined {
     //         if (!staticStyle) {
@@ -724,8 +776,7 @@ export default class Selectic extends Vue<Props> {
             params: {
                 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
@@ -793,6 +844,13 @@ export default class Selectic extends Vue<Props> {
 
     /* }}} */
 
+    @Emit('input')
+    @Emit('change')
+    @Emit('open')
+    @Emit('focus')
+    @Emit('close')
+    @Emit('blur')
+    @Emit('item:click')
     public render() {
         const id = this.id || undefined;
         const store = this.store;
@@ -825,7 +883,7 @@ export default class Selectic extends Vue<Props> {
                     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"
                 />

package/test/Store/Store_creation.spec.js

@@ -33,6 +33,9 @@ tape.test('Store creation', (subT) => {
 
         t.deepEqual(defaultStore.state, getInitialState({
             disabled: true,
+            status: {
+                automaticClose: true,
+            },
         }));
 
         const store = new Store({
@@ -62,11 +65,51 @@ tape.test('Store creation', (subT) => {
             }],
             autoSelect: false,
             disabled: true,
+            status: {
+                automaticClose: true,
+            },
         }));
 
         t.end();
     });
 
+    subT.test('"value" property', (sTest) => {
+        sTest.test('should initialize the value', async (t) => {
+            const propOptions = getOptions(5);
+            const store = new Store({
+                value: 2,
+                options: propOptions,
+            });
+
+            await sleep(0);
+
+            const state = store.state;
+
+            t.is(state.internalValue, 2);
+
+            t.end();
+        });
+
+        sTest.test('should set the correct value type', async (t) => {
+            const propOptions = getOptions(5);
+            const store = new Store({
+                value: 2,
+                params: {
+                    multiple: true,
+                },
+                options: propOptions,
+            });
+
+            await sleep(0);
+
+            const state = store.state;
+
+            t.deepEqual(state.internalValue, [2]);
+
+            t.end();
+        });
+    });
+
     subT.test('"options" property', (sTest) => {
         sTest.test('should handle short options list', async (t) => {
             const propOptions = getOptions(5);
@@ -900,6 +943,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, true);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
 
@@ -913,6 +957,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
 
@@ -951,6 +996,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
         });
@@ -966,6 +1012,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
 
@@ -979,17 +1026,20 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
 
                 /* Assert it doesn't change after fetching data */
                 store.commit('isOpen', true);
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
 
                 store.commit('isOpen', false);
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
         });
@@ -1046,6 +1096,49 @@ tape.test('Store creation', (subT) => {
                 t.end();
             });
         });
+
+        st.test('having value "open"', (sTest) => {
+            sTest.test('should show filter with few options', async (t) => {
+                const store = new Store({
+                    options: getOptions(3),
+                    params: {
+                        hideFilter: 'open',
+                    },
+                });
+                await sleep(0);
+
+                t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, true);
+                t.end();
+            });
+
+            sTest.test('should show filter with dynamic options', async (t) => {
+                const store = new Store({
+                    fetchCallback: buildFetchCb({ total: 5 }),
+                    params: {
+                        hideFilter: 'open',
+                    },
+                });
+                await sleep(0);
+
+                t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, true);
+
+                /* Assert it doesn't change after fetching data */
+                store.commit('isOpen', true);
+                await sleep(0);
+
+                t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, true);
+
+                store.commit('isOpen', false);
+                await sleep(0);
+
+                t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, true);
+                t.end();
+            });
+        });
     });
 
     subT.test('"optionBehavior" property', (st) => {

package/test/Store/clearCache.spec.js

@@ -23,6 +23,26 @@ tape.test('clearCache()', (sTest) => {
         t.end();
     });
 
+    sTest.test('should clear all options already loaded in multiple mode', (t) => {
+        const store = new Store({
+            options: getOptions(10),
+            params: {
+                multiple: true,
+            },
+            value: [2, 4],
+        });
+        store.state.status.errorMessage = 'a message';
+
+        store.clearCache(true);
+
+        t.deepEqual(store.state.allOptions, []);
+        t.is(store.state.totalAllOptions, 0);
+        t.deepEqual(store.state.filteredOptions, []);
+        t.is(store.state.status.errorMessage, '');
+        t.deepEqual(store.state.internalValue, []);
+        t.end();
+    });
+
     sTest.test('should rebuild all options', (t) => {
         const options = getOptions(10);
         const store = new Store({

package/test/Store/commit.spec.js

@@ -45,6 +45,9 @@ tape.test('commit()', (st) => {
             hideFilter: true,
             allowClearSelection: true,
             disabled: true,
+            status: {
+                automaticClose: true,
+            },
         }));
 
         store.commit('searchText', 'hello2');
@@ -945,15 +948,22 @@ tape.test('commit()', (st) => {
             t.end();
         });
 
-        sTest.test('should close the select list', (t) => {
+        sTest.test('should close the select list', async (t) => {
             const store = new Store({
                 options: getOptions(5),
             });
 
+
             store.commit('isOpen', true);
+            await sleep(0);
             store.commit('disabled', true);
 
             t.deepEqual(store.state.isOpen, false);
+            t.deepEqual(store.state.status.automaticClose, true);
+
+            await sleep(10);
+            t.deepEqual(store.state.status.automaticClose, false);
+
             t.end();
         });
     });
@@ -1063,4 +1073,181 @@ tape.test('commit()', (st) => {
             t.end();
         });
     });
+
+    st.test('when changing "internalValue"', (sTest) => {
+        sTest.test('should change the value', async (t) => {
+            const store1 = new Store({
+                options: getOptions(5),
+                params: {
+                    autoSelect: false,
+                },
+            });
+            const store2 = new Store({
+                options: getOptions(5),
+                params: {
+                    autoSelect: false,
+                    multiple: true,
+                },
+            });
+
+            await sleep(0);
+            store1.commit('internalValue', 3);
+            store2.commit('internalValue', [1, 2]);
+
+            t.is(store1.state.internalValue, 3);
+            t.deepEqual(store2.state.internalValue, [1, 2]);
+            t.is(store1.state.status.automaticChange, false);
+            t.is(store2.state.status.automaticChange, false);
+
+            await sleep(0);
+            store1.commit('internalValue', 1);
+            store2.commit('internalValue', [3, 4, 5]);
+
+            t.is(store1.state.internalValue, 1);
+            t.deepEqual(store2.state.internalValue, [3, 4, 5]);
+            t.is(store1.state.status.automaticChange, false);
+            t.is(store2.state.status.automaticChange, false);
+
+            await sleep(0);
+            store1.commit('internalValue', null);
+            store2.commit('internalValue', []);
+
+            t.is(store1.state.internalValue, null);
+            t.deepEqual(store2.state.internalValue, []);
+            t.is(store1.state.status.automaticChange, false);
+            t.is(store2.state.status.automaticChange, false);
+
+            t.end();
+        });
+
+        sTest.test('should convert values', async (t) => {
+            const store1 = new Store({
+                options: getOptions(5),
+                params: {
+                    autoSelect: false,
+                },
+            });
+            const store2 = new Store({
+                options: getOptions(5),
+                params: {
+                    autoSelect: false,
+                    multiple: true,
+                },
+            });
+            await sleep(0);
+
+            store1.commit('internalValue', [3]);
+            store2.commit('internalValue', 1);
+
+            t.is(store1.state.internalValue, 3);
+            t.deepEqual(store2.state.internalValue, [1]);
+            t.is(store1.state.status.automaticChange, true);
+            t.is(store2.state.status.automaticChange, true);
+
+            await sleep(0);
+
+            store1.commit('internalValue', [1, 2, 3]);
+            store2.commit('internalValue', 3);
+
+            t.is(store1.state.internalValue, 1);
+            t.deepEqual(store2.state.internalValue, [3]);
+            t.is(store1.state.status.automaticChange, true);
+            t.is(store2.state.status.automaticChange, true);
+
+            await sleep(0);
+
+            store1.commit('internalValue', []);
+            store2.commit('internalValue', null);
+
+            t.is(store1.state.internalValue, null, 'should not select anything');
+            t.deepEqual(store2.state.internalValue, [], 'should have no selection');
+            t.is(store1.state.status.automaticChange, true);
+            t.is(store2.state.status.automaticChange, true);
+
+            await sleep(0);
+            t.is(store1.state.status.automaticChange, false);
+            t.is(store2.state.status.automaticChange, false);
+
+            t.end();
+        });
+
+        sTest.test('should be changed to the first option', async (t) => {
+            const store1 = new Store({
+                options: getOptions(5),
+                params: {
+                    autoSelect: true,
+                },
+                value: 2,
+            });
+
+            store1.commit('internalValue', 3);
+
+            t.is(store1.state.internalValue, 3);
+            t.is(store1.state.status.automaticChange, false);
+
+            await sleep(0);
+            store1.commit('internalValue', null);
+
+            t.is(store1.state.internalValue, 0);
+            t.is(store1.state.status.automaticChange, true);
+
+            await sleep(0);
+
+            t.is(store1.state.status.automaticChange, false);
+
+            t.end();
+        });
+
+        sTest.test('should be changed to the first remaining option', async (t) => {
+            const store1 = new Store({
+                options: [{
+                    id: 0,
+                }, {
+                    id: 1,
+                    disabled: true,
+                }, {
+                    id: 2,
+                }, {
+                    id: 3,
+                }, {
+                    id: 4,
+                }],
+                params: {
+                    autoSelect: true,
+                    strictValue: true,
+                },
+                value: 2,
+            });
+
+            store1.commit('internalValue', 0);
+            await _.nextVueTick(store1);
+
+            t.is(store1.state.internalValue, 0);
+
+            store1.props.options = [{
+                id: 1,
+                disabled: true,
+            }, {
+                id: 2,
+            }, {
+                id: 3,
+            }, {
+                id: 4,
+            }];
+
+            await _.nextVueTick(store1);
+
+            t.is(store1.state.internalValue, 2, 'should change to the first available option');
+
+            store1.commit('internalValue', 3);
+            await _.nextVueTick(store1);
+
+            store1.commit('internalValue', null);
+            await _.nextVueTick(store1);
+
+            t.is(store1.state.internalValue, 2, 'should select the first available option');
+
+            t.end();
+        });
+    });
 });

package/test/helper.js

@@ -8,6 +8,7 @@ function getInitialState(replacedAttributes) {
         disabled: false,
         placeholder: '',
         hideFilter: false,
+        keepFilterOpen: false,
         allowRevert: undefined,
         allowClearSelection: false,
         autoSelect: true,
@@ -40,6 +41,8 @@ function getInitialState(replacedAttributes) {
             errorMessage: '',
             areAllSelected: false,
             hasChanged: false,
+            automaticChange: false,
+            automaticClose: false,
         },
     }, replacedAttributes);
 }

package/types/Store.d.ts

@@ -37,10 +37,11 @@ export declare type GetCallback = (_ids: OptionId[]) => Promise<OptionValue[]>;
 export declare type FormatCallback = (_option: OptionItem) => OptionItem;
 export declare type SelectionOverflow = 'collapsed' | 'multiline';
 export declare type ListPosition = 'bottom' | 'top' | 'auto';
+export declare type HideFilter = boolean | 'auto' | 'open';
 export interface SelecticStoreStateParams {
     multiple?: boolean;
     placeholder?: string;
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
     allowRevert?: boolean;
     allowClearSelection?: boolean;
     pageSize?: number;
@@ -83,6 +84,7 @@ export interface SelecticStoreState {
     disabled: boolean;
     placeholder: string;
     hideFilter: boolean;
+    keepFilterOpen: boolean;
     allowRevert?: boolean;
     allowClearSelection: boolean;
     autoSelect: boolean;
@@ -112,6 +114,8 @@ export interface SelecticStoreState {
         errorMessage: string;
         areAllSelected: boolean;
         hasChanged: boolean;
+        automaticChange: boolean;
+        automaticClose: boolean;
     };
 }
 interface Messages {
@@ -145,6 +149,7 @@ export default class SelecticStore {
         disabled: boolean;
         placeholder: string;
         hideFilter: boolean;
+        keepFilterOpen: boolean;
         allowRevert?: boolean | undefined;
         allowClearSelection: boolean;
         autoSelect: boolean;
@@ -268,6 +273,8 @@ export default class SelecticStore {
             errorMessage: string;
             areAllSelected: boolean;
             hasChanged: boolean;
+            automaticChange: boolean;
+            automaticClose: boolean;
         };
     };
     data: Data;
@@ -278,9 +285,13 @@ export default class SelecticStore {
     isPartial: ComputedRef<boolean>;
     hasAllItems: ComputedRef<boolean>;
     hasFetchedAllItems: ComputedRef<boolean>;
+    private listOptions;
+    private elementOptions;
     _uid: number;
     constructor(props?: Props);
     commit<N extends keyof SelecticStoreState, V extends SelecticStoreState[N]>(name: N, value: V): void;
+    setAutomaticChange(): void;
+    setAutomaticClose(): void;
     getItem(id: OptionId): OptionValue;
     getItems(ids: OptionId[]): Promise<OptionItem[]>;
     selectItem(id: OptionId, selected?: boolean, keepOpen?: boolean): void;
@@ -292,6 +303,7 @@ export default class SelecticStore {
     changeTexts(texts: PartialMessages): void;
     private hasValue;
     private getValue;
+    private convertTypeValue;
     private assertValueType;
     private assertCorrectValue;
     private updateFilteredOptions;

package/types/index.d.ts

@@ -1,14 +1,23 @@
 import { Vue, h } from 'vtyx';
 import './css/selectic.css';
-import { OptionProp, OptionId, StrictOptionId, GroupValue, SelectedValue, FetchCallback, GetCallback, PartialMessages, OptionValue, OptionItem, FormatCallback, SelectionOverflow, ListPosition } from './Store';
+import { OptionProp, OptionId, StrictOptionId, GroupValue, SelectedValue, FetchCallback, GetCallback, PartialMessages, OptionValue, OptionItem, FormatCallback, SelectionOverflow, ListPosition, HideFilter } from './Store';
 import MainInput from './MainInput';
 import ExtendedList from './ExtendedList';
-export { GroupValue, OptionValue, OptionItem, OptionProp, OptionId, StrictOptionId, SelectedValue, PartialMessages, GetCallback, FetchCallback, FormatCallback, SelectionOverflow, ListPosition, };
+export { GroupValue, OptionValue, OptionItem, OptionProp, OptionId, StrictOptionId, SelectedValue, PartialMessages, GetCallback, FetchCallback, FormatCallback, SelectionOverflow, ListPosition, HideFilter, };
+declare 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 {
     fetchCallback?: FetchCallback;
     getItemsCallback?: GetCallback;
     pageSize?: number;
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
     allowRevert?: boolean;
     allowClearSelection?: boolean;
     autoSelect?: boolean;
@@ -122,6 +131,7 @@ export default class Selectic extends Vue<Props> {
     onFocusChanged(): void;
     onInternalValueChange(): void;
     private checkFocus;
+    private _emit;
     private emit;
     created(): void;
     mounted(): void;