selectic 3.0.21 → 3.1.0

package/test/Store/selectItem.spec.js

@@ -28,16 +28,18 @@ tape.test('selectItem()', (st) => {
 
             t.is(store.state.internalValue, null);
 
-            store.selectItem(2, true);
+            const result1 = store.selectItem(2, true);
             t.is(store.state.internalValue, 2);
             t.is(store.state.status.hasChanged, true);
+            t.is(result1, true, 'should return if a change occurs');
 
             /* reset status to check that it is modified */
             store.state.status.hasChanged = false;
 
-            store.selectItem(5, true);
+            const result2 = store.selectItem(5, true);
             t.is(store.state.internalValue, 5);
             t.is(store.state.status.hasChanged, true);
+            t.is(result2, true, 'should return if a change occurs');
             t.end();
         });
 
@@ -48,27 +50,31 @@ tape.test('selectItem()', (st) => {
             /* reset status to check that it is modified */
             store.state.status.hasChanged = false;
 
-            store.selectItem(2, false);
+            const result = store.selectItem(2, false);
             t.is(store.state.internalValue, null);
             t.is(store.state.status.hasChanged, true);
 
             t.is(store.state.selectionIsExcluded, false);
+            t.is(result, true, 'should return if a change occurs');
             t.end();
         });
 
-        sTest.test('should not change when applying on other item', (t) => {
+        sTest.test('should not change when applying on item with same state', (t) => {
             const store = getStore();
 
             store.selectItem(2, true);
             /* reset status to check that it is not modified */
             store.state.status.hasChanged = false;
 
-            store.selectItem(2, true);
+            const result1 = store.selectItem(2, true);
             t.is(store.state.internalValue, 2);
+            t.is(result1, false, 'should return if a change occurs');
 
-            store.selectItem(5, false);
+            const result2 = store.selectItem(5, false);
             t.is(store.state.internalValue, 2);
             t.is(store.state.status.hasChanged, false);
+            t.is(result2, false, 'should return if a change occurs');
+
             t.end();
         });
 
@@ -79,38 +85,44 @@ tape.test('selectItem()', (st) => {
             /* reset status to check that it is not modified */
             store.state.status.hasChanged = false;
 
-            store.selectItem(4, true);
+            const result1 = store.selectItem(4, true);
             t.is(store.state.internalValue, 2);
             t.is(store.state.status.hasChanged, false);
+            t.is(result1, false, 'should return if a change occurs');
 
             store.state.internalValue = 4;
             store.state.status.hasChanged = false;
 
-            store.selectItem(4, false);
+            const result2 = store.selectItem(4, false);
             t.is(store.state.internalValue, 4);
             t.is(store.state.status.hasChanged, false);
+            t.is(result2, false, 'should return if a change occurs');
+
             t.end();
         });
 
         sTest.test('should select items when toggling', (t) => {
             const store = getStore();
 
-            store.selectItem(2);
+            const result1 = store.selectItem(2);
             t.is(store.state.internalValue, 2);
             t.is(store.state.status.hasChanged, true);
+            t.is(result1, true, 'should return if a change occurs');
 
             /* reset status to check that it is modified */
             store.state.status.hasChanged = false;
 
             /* In single value, toggling will not unselect */
-            store.selectItem(2);
+            const result2 = store.selectItem(2);
             t.is(store.state.internalValue, 2);
             t.is(store.state.status.hasChanged, false);
+            t.is(result2, false, 'should return if a change occurs');
 
             /* disabled case */
-            store.selectItem(4);
+            const result3 = store.selectItem(4);
             t.is(store.state.internalValue, 2);
             t.is(store.state.status.hasChanged, false);
+            t.is(result3, false, 'should return if a change occurs');
 
             t.is(store.state.selectionIsExcluded, false);
             t.end();
@@ -120,15 +132,19 @@ tape.test('selectItem()', (st) => {
             const store = getStore();
             store.commit('isOpen', true);
 
-            store.selectItem(2, true);
+            const result1 = store.selectItem(2, true);
             t.is(store.state.filteredOptions[2].selected, true);
+            t.is(result1, true, 'should return if a change occurs');
 
-            store.selectItem(5, true);
+            const result2 = store.selectItem(5, true);
             t.is(store.state.filteredOptions[2].selected, false);
             t.is(store.state.filteredOptions[5].selected, true);
+            t.is(result2, true, 'should return if a change occurs');
 
-            store.selectItem(5, false);
+            const result3 = store.selectItem(5, false);
             t.is(store.state.filteredOptions[5].selected, false);
+            t.is(result3, true, 'should return if a change occurs');
+
             t.end();
         });
 
@@ -159,43 +175,50 @@ tape.test('selectItem()', (st) => {
             store.commit('isOpen', true);
             store.state.internalValue = 1;
 
-            store.selectItem(null);
+            const result1 = store.selectItem(null);
             t.is(store.state.isOpen, false);
             t.is(store.state.internalValue, null);
             t.is(store.state.status.hasChanged, true);
+            t.is(result1, true, 'should return if a change occurs');
 
             store.state.status.hasChanged = false;
             store.state.internalValue = 2;
 
             /* applied also when selectic is closed */
-            store.selectItem(null);
+            const result2 = store.selectItem(null);
             t.is(store.state.internalValue, null);
             t.is(store.state.status.hasChanged, true);
+            t.is(result2, true, 'should return if a change occurs');
 
             store.state.status.hasChanged = false;
             store.state.internalValue = 3;
 
             /* ignore the selected argument */
-            store.selectItem(null, false);
+            const result3 = store.selectItem(null, false);
             t.is(store.state.internalValue, null);
             t.is(store.state.status.hasChanged, true);
+            t.is(result3, true, 'should return if a change occurs');
+
             t.end();
         });
 
         sTest.test('should reject invalid value with strictValue', (t) => {
             const store = getStore();
 
-            store.selectItem(456, true);
+            const result1 = store.selectItem(456, true);
             t.is(store.state.internalValue, null);
             t.is(store.state.status.hasChanged, false);
+            t.is(result1, false, 'should return if a change occurs');
 
             store.selectItem(2, true);
             /* reset status to check that it is not modified */
             store.state.status.hasChanged = false;
 
-            store.selectItem('3', true);
+            const result2 = store.selectItem('3', true);
             t.is(store.state.internalValue, 2);
             t.is(store.state.status.hasChanged, false);
+            t.is(result2, false, 'should return if a change occurs');
+
             t.end();
         });
     });
@@ -222,13 +245,15 @@ tape.test('selectItem()', (st) => {
 
             t.deepEqual(store.state.internalValue, []);
 
-            store.selectItem(2, true);
+            const result1 = store.selectItem(2, true);
             t.deepEqual(store.state.internalValue, [2]);
             t.is(store.state.status.hasChanged, true);
+            t.is(result1, true, 'should return if a change occurs');
 
-            store.selectItem(5, true);
+            const result2 = store.selectItem(5, true);
             t.deepEqual(store.state.internalValue, [2, 5]);
             t.is(store.state.status.hasChanged, true);
+            t.is(result2, true, 'should return if a change occurs');
 
             t.is(store.state.selectionIsExcluded, false);
             t.end();
@@ -237,14 +262,20 @@ tape.test('selectItem()', (st) => {
         sTest.test('should keep order in which they where selected', (t) => {
             const store = getStore();
 
-            store.selectItem(2, true);
-            store.selectItem(5, true);
-            store.selectItem(1, true);
-            store.selectItem(3, true);
+            const result1 = store.selectItem(2, true);
+            const result2 = store.selectItem(5, true);
+            const result3 = store.selectItem(1, true);
+            const result4 = store.selectItem(3, true);
             t.deepEqual(store.state.internalValue, [2, 5, 1, 3]);
+            t.is(result1, true, 'should return if a change occurs');
+            t.is(result2, true, 'should return if a change occurs');
+            t.is(result3, true, 'should return if a change occurs');
+            t.is(result4, true, 'should return if a change occurs');
 
-            store.selectItem(5, true);
+            const result5 = store.selectItem(5, true);
             t.deepEqual(store.state.internalValue, [2, 5, 1, 3]);
+            t.is(result5, false, 'should return if a change occurs');
+
             t.end();
         });
 
@@ -255,9 +286,10 @@ tape.test('selectItem()', (st) => {
             /* reset status to check that it is modified */
             store.state.status.hasChanged = false;
 
-            store.selectItem(2, false);
+            const result1 = store.selectItem(2, false);
             t.deepEqual(store.state.internalValue, []);
             t.is(store.state.status.hasChanged, true);
+            t.is(result1, true, 'should return if a change occurs');
 
             store.selectItem(2, true);
             store.selectItem(3, true);
@@ -265,25 +297,30 @@ tape.test('selectItem()', (st) => {
             /* reset status to check that it is modified */
             store.state.status.hasChanged = false;
 
-            store.selectItem(3, false);
+            const result2 = store.selectItem(3, false);
             t.deepEqual(store.state.internalValue, [2, 5]);
             t.is(store.state.status.hasChanged, true);
+            t.is(result2, true, 'should return if a change occurs');
+
             t.end();
         });
 
-        sTest.test('should not change when applying on other item', (t) => {
+        sTest.test('should not change when applying on item with same state', (t) => {
             const store = getStore();
 
             store.selectItem(2, true);
             /* reset status to check that it is not modified */
             store.state.status.hasChanged = false;
 
-            store.selectItem(2, true);
+            const result1 = store.selectItem(2, true);
             t.deepEqual(store.state.internalValue, [2]);
+            t.is(result1, false, 'should return if a change occurs');
 
-            store.selectItem(5, false);
+            const result2 = store.selectItem(5, false);
             t.deepEqual(store.state.internalValue, [2]);
             t.is(store.state.status.hasChanged, false);
+            t.is(result2, false, 'should return if a change occurs');
+
             t.end();
         });
 
@@ -294,40 +331,46 @@ tape.test('selectItem()', (st) => {
             /* reset status to check that it is not modified */
             store.state.status.hasChanged = false;
 
-            store.selectItem(4, true);
+            const result1 = store.selectItem(4, true);
             t.deepEqual(store.state.internalValue, [2]);
             t.is(store.state.status.hasChanged, false);
+            t.is(result1, false, 'should return if a change occurs');
 
             store.state.internalValue = [1, 4];
             store.state.status.hasChanged = false;
 
-            store.selectItem(4, false);
+            const result2 = store.selectItem(4, false);
             t.deepEqual(store.state.internalValue, [1, 4]);
             t.is(store.state.status.hasChanged, false);
+            t.is(result2, false, 'should return if a change occurs');
+
             t.end();
         });
 
         sTest.test('should toggle item selection', (t) => {
             const store = getStore();
 
-            store.selectItem(2);
+            const result1 = store.selectItem(2);
             t.deepEqual(store.state.internalValue, [2]);
             t.is(store.state.status.hasChanged, true);
+            t.is(result1, true, 'should return if a change occurs');
 
             /* reset status to check that it is modified */
             store.state.status.hasChanged = false;
 
-            store.selectItem(2);
+            const result2 = store.selectItem(2);
             t.deepEqual(store.state.internalValue, []);
             t.is(store.state.status.hasChanged, true);
+            t.is(result2, true, 'should return if a change occurs');
 
             /* reset status to check that it is modified */
             store.state.status.hasChanged = false;
 
             /* disabled case */
-            store.selectItem(4);
+            const result3 = store.selectItem(4);
             t.deepEqual(store.state.internalValue, []);
             t.is(store.state.status.hasChanged, false);
+            t.is(result3, false, 'should return if a change occurs');
 
             t.is(store.state.selectionIsExcluded, false);
             t.end();
@@ -369,48 +412,55 @@ tape.test('selectItem()', (st) => {
             const store = getStore();
             store.state.internalValue = [1, 4];
 
-            store.selectItem(null);
+            const result1 = store.selectItem(null);
             t.deepEqual(store.state.internalValue, []);
             t.is(store.state.status.hasChanged, true);
+            t.is(result1, true, 'should return if a change occurs');
 
             store.state.status.hasChanged = false;
             store.state.internalValue = [2, 4];
 
             /* ignore the selected argument */
-            store.selectItem(null, false);
+            const result2 = store.selectItem(null, false);
             t.deepEqual(store.state.internalValue, []);
             t.is(store.state.status.hasChanged, true);
+            t.is(result2, true, 'should return if a change occurs');
 
             store.state.status.hasChanged = false;
             store.state.internalValue = [3, 4];
 
             /* applied also when selectic is open */
             store.commit('isOpen', true);
-            store.selectItem(null);
+            const result3 = store.selectItem(null);
             t.is(store.state.isOpen, true);
             t.deepEqual(store.state.internalValue, []);
             t.is(store.state.status.hasChanged, true);
+            t.is(result3, true, 'should return if a change occurs');
             t.end();
         });
 
         sTest.test('should not change when applying on invalid values with strictValue', (t) => {
             const store = getStore();
 
-            store.selectItem(1.5, true);
+            const result1 = store.selectItem(1.5, true);
             t.deepEqual(store.state.internalValue, []);
             t.is(store.state.status.hasChanged, false);
+            t.is(result1, false, 'should return if a change occurs');
 
             store.selectItem(2, true);
             /* reset status to check that it is not modified */
             store.state.status.hasChanged = false;
 
-            store.selectItem(-42, true);
+            const result2 = store.selectItem(-42, true);
             t.deepEqual(store.state.internalValue, [2]);
             t.is(store.state.status.hasChanged, false);
+            t.is(result2, false, 'should return if a change occurs');
 
-            store.selectItem('2', false);
+            const result3 = store.selectItem('2', false);
             t.deepEqual(store.state.internalValue, [2]);
             t.is(store.state.status.hasChanged, false);
+            t.is(result3, false, 'should return if a change occurs');
+
             t.end();
         });
 
@@ -418,21 +468,25 @@ tape.test('selectItem()', (st) => {
             const store = getStore();
             store.state.internalValue = [1, 4, 5];
 
-            store.selectItem(6, true);
+            const result1 = store.selectItem(6, true);
             t.deepEqual(store.state.internalValue, [6]);
             t.is(store.state.status.hasChanged, true);
+            t.is(result1, true, 'should return if a change occurs');
 
-            store.selectItem(7, true);
+            const result2 = store.selectItem(7, true);
             t.deepEqual(store.state.internalValue, [7]);
             t.is(store.state.status.hasChanged, true);
+            t.is(result2, true, 'should return if a change occurs');
 
-            store.selectItem(1, true);
+            const result3 = store.selectItem(1, true);
             t.deepEqual(store.state.internalValue, [1]);
             t.is(store.state.status.hasChanged, true);
+            t.is(result3, true, 'should return if a change occurs');
 
-            store.selectItem(5, true);
+            const result4 = store.selectItem(5, true);
             t.deepEqual(store.state.internalValue, [1, 5]);
             t.is(store.state.status.hasChanged, true);
+            t.is(result4, true, 'should return if a change occurs');
 
             t.is(store.state.selectionIsExcluded, false);
             t.end();

package/test/helper.js

@@ -4,46 +4,45 @@ const sleep = _.sleep;
 
 function getInitialState(replacedAttributes) {
     return _.deepExtend({
-        multiple: false,
-        disabled: false,
-        placeholder: '',
-        hideFilter: false,
-        keepFilterOpen: false,
-        allowRevert: undefined,
-        forceSelectAll: 'auto',
+        activeItemIdx: -1,
+        allOptions: [],
         allowClearSelection: false,
-        autoSelect: true,
+        allowRevert: undefined,
         autoDisabled: true,
-        strictValue: false,
-        selectionOverflow: 'collapsed',
-
+        autoSelect: true,
+        disabled: false,
+        disableGroupSelection: false,
+        dynOptions: [],
+        filteredOptions: [],
+        forceSelectAll: 'auto',
+        groups: new Map(),
+        hideFilter: false,
         internalValue: null,
         isOpen: false,
+        keepFilterOpen: false,
+        listPosition: 'auto',
+        multiple: false,
+        offsetItem: 0,
+        optionBehaviorOperation: 'sort',
+        optionBehaviorOrder: ['O', 'D', 'E'],
+        pageSize: 100,
+        placeholder: '',
         searchText: '',
-        selectionIsExcluded: false,
-        allOptions: [],
-        dynOptions: [],
-        filteredOptions: [],
         selectedOptions: null,
+        selectionIsExcluded: false,
+        selectionOverflow: 'collapsed',
+        strictValue: false,
         totalAllOptions: 0,
         totalDynOptions: 0,
         totalFilteredOptions: Infinity,
-        offsetItem: 0,
-        activeItemIdx: -1,
-        pageSize: 100,
-        listPosition: 'auto',
-        groups: new Map(),
-
-        optionBehaviorOperation: 'sort',
-        optionBehaviorOrder: ['O', 'D', 'E'],
 
         status: {
-            searching: false,
-            errorMessage: '',
             areAllSelected: false,
-            hasChanged: false,
             automaticChange: false,
             automaticClose: false,
+            errorMessage: '',
+            hasChanged: false,
+            searching: false,
         },
     }, replacedAttributes);
 }
@@ -62,7 +61,7 @@ function getOptions(size, prefix, offset, groupName) {
         };
 
         if (groupName) {
-            obj.group = groupName;
+            obj.group = typeof groupName === 'function' ? groupName(index) : groupName;
         }
 
         options.push(obj);
@@ -120,13 +119,18 @@ function buildFetchCb({
                 }
             }
             const nb = Math.min(limit, total - offset);
-            let groupName;
-            group.every((g) => {
-                if (offset >= g.offset) {
-                    groupName = g.name;
-                    return true;
-                }
-            });
+            const groupName = group.length ? (index) => {
+                let name = undefined;
+
+                group.every((g) => {
+                    if (index >= g.offset) {
+                        name = g.name;
+                        return true;
+                    }
+                });
+
+                return name;
+            } : undefined;
 
             function resolveFetch() {
                 let result = {

package/types/ExtendedList.d.ts

@@ -1,5 +1,5 @@
 import { Vue, h } from 'vtyx';
-import Store from './Store';
+import Store, { OptionItem } from './Store';
 export interface Props {
     store: Store;
     width: number;
@@ -15,7 +15,8 @@ export default class ExtendedList extends Vue<Props> {
     private elementTop;
     private elementBottom;
     private width;
-    private topGroup;
+    private topGroupName;
+    private topGroupId;
     private listHeight;
     private listWidth;
     private availableSpace;
@@ -30,10 +31,14 @@ export default class ExtendedList extends Vue<Props> {
     get position(): 'top' | 'bottom';
     get horizontalStyle(): string;
     get positionStyle(): string;
+    get topGroup(): OptionItem | undefined;
+    get topGroupSelected(): boolean;
+    get topGroupDisabled(): boolean;
     onFilteredOptionsChange(): void;
     onHideFilterChange(): void;
     private getGroup;
     private computeListSize;
+    private clickHeaderGroup;
     mounted(): void;
     unmounted(): void;
     render(): h.JSX.Element;

package/types/Icon.d.ts

@@ -0,0 +1,25 @@
+import { Vue } from 'vtyx';
+import Store from './Store';
+export interface Props {
+    store: Store;
+    icon: string;
+    spin?: boolean;
+    title?: string;
+}
+export default class Icon extends Vue<Props> {
+    private store;
+    private icon;
+    private spin?;
+    private title?;
+    private get rawIconValue();
+    private get family();
+    private get iconValue();
+    private get vueIcon();
+    private get spinClass();
+    private get spinActive();
+    private renderInnerIcon;
+    private renderSpanIcon;
+    render(): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+}