selectic 3.1.3 → 3.1.4

package/dist/selectic.common.js

@@ -2566,42 +2566,6 @@ let ExtendedList = class ExtendedList extends vtyx.Vue {
         }
         return '';
     }
-    get onKeyDown() {
-        return (evt) => {
-            const key = evt.key;
-            if (key === 'Escape') {
-                this.store.commit('isOpen', false);
-            }
-            else if (key === 'Enter') {
-                const index = this.store.state.activeItemIdx;
-                if (index !== -1) {
-                    const item = this.store.state.filteredOptions[index];
-                    if (!item.disabled && !item.isGroup) {
-                        this.store.selectItem(item.id);
-                    }
-                }
-                evt.stopPropagation();
-                evt.preventDefault();
-            }
-            else if (key === 'ArrowUp') {
-                const index = this.store.state.activeItemIdx;
-                if (index > 0) {
-                    this.store.commit('activeItemIdx', index - 1);
-                }
-                evt.stopPropagation();
-                evt.preventDefault();
-            }
-            else if (key === 'ArrowDown') {
-                const index = this.store.state.activeItemIdx;
-                const max = this.store.state.totalFilteredOptions - 1;
-                if (index < max) {
-                    this.store.commit('activeItemIdx', index + 1);
-                }
-                evt.stopPropagation();
-                evt.preventDefault();
-            }
-        };
-    }
     get bestPosition() {
         const windowHeight = window.innerHeight;
         const isFullyEstimated = this.isFullyEstimated;
@@ -2717,6 +2681,40 @@ let ExtendedList = class ExtendedList extends vtyx.Vue {
     clickHeaderGroup() {
         this.store.selectGroup(this.topGroupId, !this.topGroupSelected);
     }
+    onKeyDown(evt) {
+        const key = evt.key;
+        if (key === 'Escape') {
+            this.store.commit('isOpen', false);
+        }
+        else if (key === 'Enter') {
+            const index = this.store.state.activeItemIdx;
+            if (index !== -1) {
+                const item = this.store.state.filteredOptions[index];
+                if (!item.disabled && !item.isGroup) {
+                    this.store.selectItem(item.id);
+                }
+            }
+            evt.stopPropagation();
+            evt.preventDefault();
+        }
+        else if (key === 'ArrowUp') {
+            const index = this.store.state.activeItemIdx;
+            if (index > 0) {
+                this.store.commit('activeItemIdx', index - 1);
+            }
+            evt.stopPropagation();
+            evt.preventDefault();
+        }
+        else if (key === 'ArrowDown') {
+            const index = this.store.state.activeItemIdx;
+            const max = this.store.state.totalFilteredOptions - 1;
+            if (index < max) {
+                this.store.commit('activeItemIdx', index + 1);
+            }
+            evt.stopPropagation();
+            evt.preventDefault();
+        }
+    }
     /* }}} */
     /* {{{ Life cycles */
     mounted() {

package/dist/selectic.esm.js

@@ -2562,42 +2562,6 @@ let ExtendedList = class ExtendedList extends Vue {
         }
         return '';
     }
-    get onKeyDown() {
-        return (evt) => {
-            const key = evt.key;
-            if (key === 'Escape') {
-                this.store.commit('isOpen', false);
-            }
-            else if (key === 'Enter') {
-                const index = this.store.state.activeItemIdx;
-                if (index !== -1) {
-                    const item = this.store.state.filteredOptions[index];
-                    if (!item.disabled && !item.isGroup) {
-                        this.store.selectItem(item.id);
-                    }
-                }
-                evt.stopPropagation();
-                evt.preventDefault();
-            }
-            else if (key === 'ArrowUp') {
-                const index = this.store.state.activeItemIdx;
-                if (index > 0) {
-                    this.store.commit('activeItemIdx', index - 1);
-                }
-                evt.stopPropagation();
-                evt.preventDefault();
-            }
-            else if (key === 'ArrowDown') {
-                const index = this.store.state.activeItemIdx;
-                const max = this.store.state.totalFilteredOptions - 1;
-                if (index < max) {
-                    this.store.commit('activeItemIdx', index + 1);
-                }
-                evt.stopPropagation();
-                evt.preventDefault();
-            }
-        };
-    }
     get bestPosition() {
         const windowHeight = window.innerHeight;
         const isFullyEstimated = this.isFullyEstimated;
@@ -2713,6 +2677,40 @@ let ExtendedList = class ExtendedList extends Vue {
     clickHeaderGroup() {
         this.store.selectGroup(this.topGroupId, !this.topGroupSelected);
     }
+    onKeyDown(evt) {
+        const key = evt.key;
+        if (key === 'Escape') {
+            this.store.commit('isOpen', false);
+        }
+        else if (key === 'Enter') {
+            const index = this.store.state.activeItemIdx;
+            if (index !== -1) {
+                const item = this.store.state.filteredOptions[index];
+                if (!item.disabled && !item.isGroup) {
+                    this.store.selectItem(item.id);
+                }
+            }
+            evt.stopPropagation();
+            evt.preventDefault();
+        }
+        else if (key === 'ArrowUp') {
+            const index = this.store.state.activeItemIdx;
+            if (index > 0) {
+                this.store.commit('activeItemIdx', index - 1);
+            }
+            evt.stopPropagation();
+            evt.preventDefault();
+        }
+        else if (key === 'ArrowDown') {
+            const index = this.store.state.activeItemIdx;
+            const max = this.store.state.totalFilteredOptions - 1;
+            if (index < max) {
+                this.store.commit('activeItemIdx', index + 1);
+            }
+            evt.stopPropagation();
+            evt.preventDefault();
+        }
+    }
     /* }}} */
     /* {{{ Life cycles */
     mounted() {

package/package.json

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

package/src/ExtendedList.tsx

@@ -97,48 +97,6 @@ export default class ExtendedList extends Vue<Props> {
         return '';
     }
 
-    get onKeyDown() {
-        return (evt: KeyboardEvent) => {
-            const key = evt.key;
-
-            if (key === 'Escape') {
-                this.store.commit('isOpen', false);
-            } else
-            if (key === 'Enter') {
-                const index = this.store.state.activeItemIdx;
-
-                if (index !== -1) {
-                    const item = this.store.state.filteredOptions[index];
-
-                    if (!item.disabled && !item.isGroup) {
-                        this.store.selectItem(item.id);
-                    }
-                }
-                evt.stopPropagation();
-                evt.preventDefault();
-            } else
-            if (key === 'ArrowUp') {
-                const index = this.store.state.activeItemIdx;
-
-                if (index > 0) {
-                    this.store.commit('activeItemIdx', index - 1);
-                }
-                evt.stopPropagation();
-                evt.preventDefault();
-            } else
-            if (key === 'ArrowDown') {
-                const index = this.store.state.activeItemIdx;
-                const max = this.store.state.totalFilteredOptions - 1;
-
-                if (index < max) {
-                    this.store.commit('activeItemIdx', index + 1);
-                }
-                evt.stopPropagation();
-                evt.preventDefault();
-            }
-        };
-    }
-
     get bestPosition(): 'top' | 'bottom' {
         const windowHeight = window.innerHeight;
         const isFullyEstimated = this.isFullyEstimated;
@@ -288,6 +246,46 @@ export default class ExtendedList extends Vue<Props> {
         this.store.selectGroup(this.topGroupId, !this.topGroupSelected);
     }
 
+    private onKeyDown(evt: KeyboardEvent) {
+        const key = evt.key;
+
+        if (key === 'Escape') {
+            this.store.commit('isOpen', false);
+        } else
+        if (key === 'Enter') {
+            const index = this.store.state.activeItemIdx;
+
+            if (index !== -1) {
+                const item = this.store.state.filteredOptions[index];
+
+                if (!item.disabled && !item.isGroup) {
+                    this.store.selectItem(item.id);
+                }
+            }
+            evt.stopPropagation();
+            evt.preventDefault();
+        } else
+        if (key === 'ArrowUp') {
+            const index = this.store.state.activeItemIdx;
+
+            if (index > 0) {
+                this.store.commit('activeItemIdx', index - 1);
+            }
+            evt.stopPropagation();
+            evt.preventDefault();
+        } else
+        if (key === 'ArrowDown') {
+            const index = this.store.state.activeItemIdx;
+            const max = this.store.state.totalFilteredOptions - 1;
+
+            if (index < max) {
+                this.store.commit('activeItemIdx', index + 1);
+            }
+            evt.stopPropagation();
+            evt.preventDefault();
+        }
+    }
+
     /* }}} */
     /* {{{ Life cycles */
 

package/types/ExtendedList.d.ts

@@ -26,7 +26,6 @@ export default class ExtendedList extends Vue<Props> {
     get searching(): boolean;
     get errorMessage(): string;
     get infoMessage(): string;
-    get onKeyDown(): (evt: KeyboardEvent) => void;
     get bestPosition(): 'top' | 'bottom';
     get position(): 'top' | 'bottom';
     get horizontalStyle(): string;
@@ -39,6 +38,7 @@ export default class ExtendedList extends Vue<Props> {
     private getGroup;
     private computeListSize;
     private clickHeaderGroup;
+    private onKeyDown;
     mounted(): void;
     unmounted(): void;
     render(): h.JSX.Element;