selectic 3.0.1 → 3.0.5

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.
@@ -295,8 +309,6 @@ export default class Selectic extends Vue<Props> {
 
     get outsideListener() {
         return (evt: MouseEvent) => {
-            const target =  evt.target as Node;
-
             if (!this.$refs) {
                 /* this component should have been destroyed */
                 this.removeListeners();
@@ -304,8 +316,23 @@ export default class Selectic extends Vue<Props> {
                 return;
             }
 
-            if (!this.$refs.extendedList.$el.contains(target) && !this.$el.contains(target)) {
-                this.store.commit('isOpen', false);
+            const store = this.store;
+            const keepOpenWithOtherSelectic = this.params.keepOpenWithOtherSelectic;
+            const extendedList = this.$refs.extendedList;
+
+            if (!extendedList) {
+                /* this component is not focused anymore */
+                if (!keepOpenWithOtherSelectic) {
+                    this.removeListeners();
+                    this.store.commit('isOpen', false);
+                }
+                return;
+            }
+
+            const target =  evt.target as Node;
+
+            if (!extendedList.$el.contains(target) && !this.$el.contains(target)) {
+                store.commit('isOpen', false);
             }
         };
     }
@@ -483,14 +510,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');
         }
     }
 
@@ -580,10 +607,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 +640,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 +652,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 +789,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 +857,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 +896,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,6 +65,9 @@ tape.test('Store creation', (subT) => {
             }],
             autoSelect: false,
             disabled: true,
+            status: {
+                automaticClose: true,
+            },
         }));
 
         t.end();
@@ -937,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();
             });
 
@@ -950,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();
             });
 
@@ -988,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();
             });
         });
@@ -1003,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();
             });
 
@@ -1016,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();
             });
         });
@@ -1083,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/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();
         });
     });
@@ -1080,26 +1090,32 @@ tape.test('commit()', (st) => {
                 },
             });
 
+            await sleep(0);
             store1.commit('internalValue', 3);
             store2.commit('internalValue', [1, 2]);
-            await Promise.all([_.nextVueTick(store1), _.nextVueTick(store2)]);
 
             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]);
-            await Promise.all([_.nextVueTick(store1), _.nextVueTick(store2)]);
 
             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', []);
-            await Promise.all([_.nextVueTick(store1), _.nextVueTick(store2)]);
 
             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();
         });
@@ -1118,27 +1134,39 @@ tape.test('commit()', (st) => {
                     multiple: true,
                 },
             });
+            await sleep(0);
 
             store1.commit('internalValue', [3]);
             store2.commit('internalValue', 1);
-            await Promise.all([_.nextVueTick(store1), _.nextVueTick(store2)]);
 
             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);
-            await Promise.all([_.nextVueTick(store1), _.nextVueTick(store2)]);
 
             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);
-            await Promise.all([_.nextVueTick(store1), _.nextVueTick(store2)]);
 
             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();
         });
@@ -1153,14 +1181,19 @@ tape.test('commit()', (st) => {
             });
 
             store1.commit('internalValue', 3);
-            await _.nextVueTick(store1);
 
             t.is(store1.state.internalValue, 3);
+            t.is(store1.state.status.automaticChange, false);
 
+            await sleep(0);
             store1.commit('internalValue', null);
-            await _.nextVueTick(store1);
 
             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();
         });

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;
@@ -283,6 +290,8 @@ export default class SelecticStore {
     _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;

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;