selectic 3.0.3 → 3.0.7

package/dist/selectic.common.js

@@ -101,6 +101,26 @@ let closePreviousSelectic;
 let uid = 0;
 class SelecticStore {
     constructor(props = {}) {
+        /* Do not need reactivity */
+        this.requestId = 0;
+        this._uid = ++uid;
+        /* {{{ Props */
+        const defaultProps = {
+            value: null,
+            selectionIsExcluded: false,
+            disabled: false,
+            options: null,
+            childOptions: [],
+            groups: [],
+            texts: null,
+            params: {},
+            fetchCallback: null,
+            getItemsCallback: null,
+            keepOpenWithOtherSelectic: false,
+        };
+        const propsVal = assignObject(defaultProps, props);
+        this.props = vue.reactive(propsVal);
+        /* }}} */
         /* {{{ data */
         this.state = vue.reactive({
             multiple: false,
@@ -141,27 +161,6 @@ class SelecticStore {
                 automaticClose: false,
             },
         });
-        /* Do not need reactivity */
-        this.requestId = 0;
-        this._uid = ++uid;
-        /* {{{ Props */
-        const defaultProps = {
-            value: null,
-            selectionIsExcluded: false,
-            disabled: false,
-            options: null,
-            childOptions: [],
-            groups: [],
-            texts: null,
-            params: {},
-            fetchCallback: null,
-            getItemsCallback: null,
-            keepOpenWithOtherSelectic: false,
-        };
-        const propsVal = assignObject(defaultProps, props);
-        this.props = vue.reactive(propsVal);
-        /* }}} */
-        /* {{{ data */
         this.data = vue.reactive({
             labels: Object.assign({}, messages),
             itemsPerPage: 10,
@@ -275,8 +274,8 @@ class SelecticStore {
          * and ensure convertValue run with correct state */
         assignObject(this.state, {
             internalValue: this.convertTypeValue(value),
-            selectionIsExcluded: props.selectionIsExcluded,
-            disabled: props.disabled,
+            selectionIsExcluded: !!this.props.selectionIsExcluded,
+            disabled: !!this.props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
         });
         this.checkHideFilter();
         if (this.props.texts) {
@@ -2025,15 +2024,26 @@ let Selectic = class Selectic extends vtyx.Vue {
     }
     get outsideListener() {
         return (evt) => {
-            const target = evt.target;
             if (!this.$refs) {
                 /* this component should have been destroyed */
                 this.removeListeners();
                 this.store.commit('isOpen', false);
                 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;
+            if (!extendedList.$el.contains(target) && !this.$el.contains(target)) {
+                store.commit('isOpen', false);
             }
         };
     }
@@ -2557,6 +2567,15 @@ __decorate([
 __decorate([
     vtyx.Watch('store.state.internalValue')
 ], Selectic.prototype, "onInternalValueChange", null);
+__decorate([
+    vtyx.Emit('input'),
+    vtyx.Emit('change'),
+    vtyx.Emit('open'),
+    vtyx.Emit('focus'),
+    vtyx.Emit('close'),
+    vtyx.Emit('blur'),
+    vtyx.Emit('item:click')
+], Selectic.prototype, "render", null);
 Selectic = __decorate([
     vtyx.Component
 ], Selectic);

package/dist/selectic.esm.js

@@ -1,4 +1,4 @@
-import { Prop, Watch, Component, Vue, h } from 'vtyx';
+import { Prop, Watch, Component, Vue, h, Emit } from 'vtyx';
 import { reactive, computed, unref, watch } from 'vue';
 
 function styleInject(css, ref) {
@@ -97,6 +97,26 @@ let closePreviousSelectic;
 let uid = 0;
 class SelecticStore {
     constructor(props = {}) {
+        /* Do not need reactivity */
+        this.requestId = 0;
+        this._uid = ++uid;
+        /* {{{ Props */
+        const defaultProps = {
+            value: null,
+            selectionIsExcluded: false,
+            disabled: false,
+            options: null,
+            childOptions: [],
+            groups: [],
+            texts: null,
+            params: {},
+            fetchCallback: null,
+            getItemsCallback: null,
+            keepOpenWithOtherSelectic: false,
+        };
+        const propsVal = assignObject(defaultProps, props);
+        this.props = reactive(propsVal);
+        /* }}} */
         /* {{{ data */
         this.state = reactive({
             multiple: false,
@@ -137,27 +157,6 @@ class SelecticStore {
                 automaticClose: false,
             },
         });
-        /* Do not need reactivity */
-        this.requestId = 0;
-        this._uid = ++uid;
-        /* {{{ Props */
-        const defaultProps = {
-            value: null,
-            selectionIsExcluded: false,
-            disabled: false,
-            options: null,
-            childOptions: [],
-            groups: [],
-            texts: null,
-            params: {},
-            fetchCallback: null,
-            getItemsCallback: null,
-            keepOpenWithOtherSelectic: false,
-        };
-        const propsVal = assignObject(defaultProps, props);
-        this.props = reactive(propsVal);
-        /* }}} */
-        /* {{{ data */
         this.data = reactive({
             labels: Object.assign({}, messages),
             itemsPerPage: 10,
@@ -271,8 +270,8 @@ class SelecticStore {
          * and ensure convertValue run with correct state */
         assignObject(this.state, {
             internalValue: this.convertTypeValue(value),
-            selectionIsExcluded: props.selectionIsExcluded,
-            disabled: props.disabled,
+            selectionIsExcluded: !!this.props.selectionIsExcluded,
+            disabled: !!this.props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
         });
         this.checkHideFilter();
         if (this.props.texts) {
@@ -2021,15 +2020,26 @@ let Selectic = class Selectic extends Vue {
     }
     get outsideListener() {
         return (evt) => {
-            const target = evt.target;
             if (!this.$refs) {
                 /* this component should have been destroyed */
                 this.removeListeners();
                 this.store.commit('isOpen', false);
                 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;
+            if (!extendedList.$el.contains(target) && !this.$el.contains(target)) {
+                store.commit('isOpen', false);
             }
         };
     }
@@ -2553,6 +2563,15 @@ __decorate([
 __decorate([
     Watch('store.state.internalValue')
 ], Selectic.prototype, "onInternalValueChange", null);
+__decorate([
+    Emit('input'),
+    Emit('change'),
+    Emit('open'),
+    Emit('focus'),
+    Emit('close'),
+    Emit('blur'),
+    Emit('item:click')
+], Selectic.prototype, "render", null);
 Selectic = __decorate([
     Component
 ], Selectic);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.0.3",
+    "version": "3.0.7",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",

package/src/Store.tsx

@@ -411,48 +411,7 @@ export default class SelecticStore {
 
     /* {{{ data */
 
-    public state = reactive<SelecticStoreState>({
-        multiple: false,
-        disabled: false,
-        placeholder: '',
-        hideFilter: false,
-        keepFilterOpen: false,
-        allowRevert: undefined,
-        allowClearSelection: false,
-        autoSelect: true,
-        autoDisabled: true,
-        strictValue: false,
-        selectionOverflow: 'collapsed',
-
-        internalValue: null,
-        isOpen: false,
-        searchText: '',
-        selectionIsExcluded: false,
-        allOptions: [],
-        dynOptions: [],
-        filteredOptions: [],
-        selectedOptions: null,
-        totalAllOptions: Infinity,
-        totalDynOptions: Infinity,
-        totalFilteredOptions: Infinity,
-        groups: new Map(),
-        offsetItem: 0,
-        activeItemIdx: -1,
-        pageSize: 100,
-        listPosition: 'auto',
-
-        optionBehaviorOperation: 'sort',
-        optionBehaviorOrder: ['O', 'D', 'E'],
-
-        status: {
-            searching: false,
-            errorMessage: '',
-            areAllSelected: false,
-            hasChanged: false,
-            automaticChange: false,
-            automaticClose: false,
-        },
-    });
+    public state: SelecticStoreState;
     public data: Data;
 
     /* Do not need reactivity */
@@ -500,6 +459,49 @@ export default class SelecticStore {
         /* }}} */
         /* {{{ data */
 
+        this.state = reactive<SelecticStoreState>({
+            multiple: false,
+            disabled: false,
+            placeholder: '',
+            hideFilter: false,
+            keepFilterOpen: false,
+            allowRevert: undefined,
+            allowClearSelection: false,
+            autoSelect: true,
+            autoDisabled: true,
+            strictValue: false,
+            selectionOverflow: 'collapsed',
+
+            internalValue: null,
+            isOpen: false,
+            searchText: '',
+            selectionIsExcluded: false,
+            allOptions: [],
+            dynOptions: [],
+            filteredOptions: [],
+            selectedOptions: null,
+            totalAllOptions: Infinity,
+            totalDynOptions: Infinity,
+            totalFilteredOptions: Infinity,
+            groups: new Map(),
+            offsetItem: 0,
+            activeItemIdx: -1,
+            pageSize: 100,
+            listPosition: 'auto',
+
+            optionBehaviorOperation: 'sort',
+            optionBehaviorOrder: ['O', 'D', 'E'],
+
+            status: {
+                searching: false,
+                errorMessage: '',
+                areAllSelected: false,
+                hasChanged: false,
+                automaticChange: false,
+                automaticClose: false,
+            },
+        });
+
         this.data = reactive({
             labels: Object.assign({}, messages),
             itemsPerPage: 10,
@@ -649,8 +651,8 @@ export default class SelecticStore {
          * and ensure convertValue run with correct state */
         assignObject(this.state, {
             internalValue: this.convertTypeValue(value),
-            selectionIsExcluded: props.selectionIsExcluded,
-            disabled: props.disabled,
+            selectionIsExcluded: !!this.props.selectionIsExcluded,
+            disabled: !!this.props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
         });
 
         this.checkHideFilter();

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, {
@@ -309,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();
@@ -318,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);
             }
         };
     }
@@ -844,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;

package/test/Store/Store_props.spec.js

@@ -223,6 +223,7 @@ tape.test('change props', (subT) => {
             const store = new Store({
                 value: 2,
                 options: getOptions(5, 'alpha'),
+                disabled: false,
                 params: {
                     autoDisabled: true,
                 },
@@ -249,6 +250,7 @@ tape.test('change props', (subT) => {
             const store = new Store({
                 value: 2,
                 options: getOptions(5, 'alpha'),
+                disabled: false,
                 params: {
                     autoDisabled: true,
                     strictValue: true,
@@ -298,6 +300,37 @@ tape.test('change props', (subT) => {
             t.end();
         });
 
+        sTest.test('should re-enable the select when data are loaded', async (t) => {
+            const store = new Store({
+                options: [],
+                disabled: false,
+                params: {
+                    autoDisabled: true,
+                },
+            });
+            await _.nextVueTick(store);
+
+            store.commit('isOpen', true);
+            await _.nextVueTick(store);
+
+            t.is(store.state.internalValue, null);
+            t.is(store.state.disabled, true);
+            t.is(store.state.isOpen, false);
+
+            store.props.options = getOptions(0, 'alpha');
+            await _.nextVueTick(store);
+
+            t.is(store.state.internalValue, null);
+            t.is(store.state.disabled, true), 'should be disabled';
+
+            store.props.options = getOptions(5, 'beta');
+            await _.nextVueTick(store);
+
+            t.is(store.state.internalValue, 0);
+            t.is(store.state.disabled, false), 'should be enabled';
+            t.end();
+        });
+
         sTest.test('should not re-enable the select if disable is set', async (t) => {
             const store = new Store({
                 options: getOptions(1, 'alpha'),

package/types/List.d.ts

@@ -1,5 +1,5 @@
 import { Vue, h } from 'vtyx';
-import Store, { OptionItem, OptionId } from './Store';
+import Store, { OptionItem } from './Store';
 export interface Props {
     store: Store;
     options?: any[];
@@ -14,31 +14,7 @@ export default class List extends Vue<Props> {
     private itemHeight;
     private groupId;
     private doNotScroll;
-    get filteredOptions(): {
-        selected: boolean;
-        disabled: boolean;
-        isGroup: boolean;
-        id: OptionId;
-        text: string;
-        title?: string | undefined;
-        group?: import("./Store").StrictOptionId | undefined;
-        className?: string | undefined;
-        style?: string | undefined;
-        icon?: string | undefined;
-        options?: {
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            disabled?: boolean | undefined;
-            group?: import("./Store").StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: any[] | undefined;
-            data?: any;
-        }[] | undefined;
-        data?: any;
-    }[];
+    get filteredOptions(): OptionItem[];
     get isMultiple(): boolean;
     get itemsMargin(): number;
     get shortOptions(): OptionItem[];

package/types/Store.d.ts

@@ -142,141 +142,7 @@ export declare type PartialMessages = {
 export declare function changeTexts(texts: PartialMessages): void;
 export default class SelecticStore {
     props: InternalProps;
-    state: {
-        internalValue: OptionId | StrictOptionId[];
-        selectionIsExcluded: boolean;
-        multiple: boolean;
-        disabled: boolean;
-        placeholder: string;
-        hideFilter: boolean;
-        keepFilterOpen: boolean;
-        allowRevert?: boolean | undefined;
-        allowClearSelection: boolean;
-        autoSelect: boolean;
-        autoDisabled: boolean;
-        strictValue: boolean;
-        selectionOverflow: SelectionOverflow;
-        isOpen: boolean;
-        searchText: string;
-        allOptions: {
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            disabled?: boolean | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: any[] | undefined;
-            data?: any;
-        }[];
-        dynOptions: {
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            disabled?: boolean | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: any[] | undefined;
-            data?: any;
-        }[];
-        filteredOptions: {
-            selected: boolean;
-            disabled: boolean;
-            isGroup: boolean;
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: {
-                id: OptionId;
-                text: string;
-                title?: string | undefined;
-                disabled?: boolean | undefined;
-                group?: StrictOptionId | undefined;
-                className?: string | undefined;
-                style?: string | undefined;
-                icon?: string | undefined;
-                options?: any[] | undefined;
-                data?: any;
-            }[] | undefined;
-            data?: any;
-        }[];
-        selectedOptions: {
-            selected: boolean;
-            disabled: boolean;
-            isGroup: boolean;
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: {
-                id: OptionId;
-                text: string;
-                title?: string | undefined;
-                disabled?: boolean | undefined;
-                group?: StrictOptionId | undefined;
-                className?: string | undefined;
-                style?: string | undefined;
-                icon?: string | undefined;
-                options?: any[] | undefined;
-                data?: any;
-            }[] | undefined;
-            data?: any;
-        } | {
-            selected: boolean;
-            disabled: boolean;
-            isGroup: boolean;
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: {
-                id: OptionId;
-                text: string;
-                title?: string | undefined;
-                disabled?: boolean | undefined;
-                group?: StrictOptionId | undefined;
-                className?: string | undefined;
-                style?: string | undefined;
-                icon?: string | undefined;
-                options?: any[] | undefined;
-                data?: any;
-            }[] | undefined;
-            data?: any;
-        }[] | null;
-        totalAllOptions: number;
-        totalDynOptions: number;
-        totalFilteredOptions: number;
-        groups: Map<OptionId, string>;
-        offsetItem: number;
-        activeItemIdx: number;
-        pageSize: number;
-        formatOption?: FormatCallback | undefined;
-        formatSelection?: FormatCallback | undefined;
-        optionBehaviorOperation: OptionBehaviorOperation;
-        optionBehaviorOrder: OptionBehaviorOrder[];
-        listPosition: ListPosition;
-        status: {
-            searching: boolean;
-            errorMessage: string;
-            areAllSelected: boolean;
-            hasChanged: boolean;
-            automaticChange: boolean;
-            automaticClose: boolean;
-        };
-    };
+    state: SelecticStoreState;
     data: Data;
     private requestId;
     private cacheRequest;