Merge branch 'master' of https://github.com/KazanExpress/vue-simple-suggest into dev

Author: Raiondesu

README.md

@@ -82,25 +82,25 @@ Then, in your Vue.js component/page:
 ```html
 <!-- Some component.vue -->
 <template>
-  <vue-suggest
+  <vue-simple-suggest
     v-model="chosen"
     :list="simpleSuggestionList"
     :filter-by-query="true">
 <!-- Filter by input text to only show the matching results -->
-  </vue-suggest>
+  </vue-simple-suggest>
 
   <br>
 
   <p>Chosen element: {{ chosen }}</p>
 </template>
 
 <script>
-  import VueSuggest from 'vue-simple-suggest'
+  import VueSimpleSuggest from 'vue-simple-suggest'
   import 'vue-simple-suggest/dist/styles.css' // Optional CSS
 
   export default {
     components: {
-      VueSuggest
+      VueSimpleSuggest
     },
     data() {
       return {

dist/cjs.js

@@ -99,8 +99,7 @@ function _finally(body, finalizer) {
   }if (result && result.then) {
     return result.then(void 0, recover);
   }return result;
-}
-function _invokeIgnored(body) {
+}function _invokeIgnored(body) {
   var result = body();if (result && result.then) {
     return result.then(_empty);
   }
@@ -237,7 +236,7 @@ var VueSimpleSuggest = {
       }
     }
   }),
-  // Handle run-time mode changes:
+  // Handle run-time mode changes (not working):
   watch: {
     mode: function mode(v) {
       return event = v;
@@ -303,14 +302,31 @@ var VueSimpleSuggest = {
 
   methods: {
     isScopedSlotEmpty: function isScopedSlotEmpty(slot) {
-      return slot && typeof slot === 'function' ? !slot(this) : !slot;
+      if (slot) {
+        var vNode = slot(this);
+        return !(Array.isArray(vNode) || vNode && (vNode.tag || vNode.context || vNode.text || vNode.children));
+      }
+
+      return true;
     },
     miscSlotsAreEmpty: function miscSlotsAreEmpty() {
       var _this2 = this;
 
-      return ['above', 'below'].some(function (slotName) {
-        return _this2.isScopedSlotEmpty(_this2.$scopedSlots['misc-item-' + slotName]);
+      var slots = ['misc-item-above', 'misc-item-below'].map(function (s) {
+        return _this2.$scopedSlots[s];
+      });
+
+      if (slots.every(function (s) {
+        return !!s;
+      })) {
+        return slots.every(this.isScopedSlotEmpty.bind(this));
+      }
+
+      var slot = slots.find(function (s) {
+        return !!s;
       });
+
+      return this.isScopedSlotEmpty.call(this, slot);
     },
     displayProperty: function displayProperty(obj) {
       return (this.isPlainSuggestion ? obj : fromPath(obj, this.displayAttribute)) + '';
@@ -509,8 +525,7 @@ var VueSimpleSuggest = {
 
       if (_this5.listShown && !value && _this5.minLength > 0) {
         _this5.hideList();
-        _this5.clearSuggestions();
-        return _this5.suggestions;
+        return [];
       }
 
       if (value.length < _this5.minLength) {
@@ -522,6 +537,10 @@ var VueSimpleSuggest = {
       // Start request if can
       if (_this5.listIsRequest) {
         _this5.$emit('request-start', value);
+
+        if (_this5.suggestions.length > 0 || !_this5.miscSlotsAreEmpty()) {
+          _this5.showList();
+        }
       }
 
       var result = [];

dist/es6.js

@@ -83,8 +83,7 @@ function _finally(body, finalizer) {
   }if (result && result.then) {
     return result.then(void 0, recover);
   }return result;
-}
-function _invokeIgnored(body) {
+}function _invokeIgnored(body) {
   var result = body();if (result && result.then) {
     return result.then(_empty);
   }
@@ -215,7 +214,7 @@ var VueSimpleSuggest = {
       validator: value => !!~Object.keys(modes).indexOf(value.toLowerCase())
     }
   }),
-  // Handle run-time mode changes:
+  // Handle run-time mode changes (not working):
   watch: {
     mode: v => event = v
   },
@@ -273,10 +272,23 @@ var VueSimpleSuggest = {
   },
   methods: {
     isScopedSlotEmpty(slot) {
-      return slot && typeof slot === 'function' ? !slot(this) : !slot;
+      if (slot) {
+        const vNode = slot(this);
+        return !(Array.isArray(vNode) || vNode && (vNode.tag || vNode.context || vNode.text || vNode.children));
+      }
+
+      return true;
     },
     miscSlotsAreEmpty() {
-      return ['above', 'below'].some(slotName => this.isScopedSlotEmpty(this.$scopedSlots['misc-item-' + slotName]));
+      const slots = ['misc-item-above', 'misc-item-below'].map(s => this.$scopedSlots[s]);
+
+      if (slots.every(s => !!s)) {
+        return slots.every(this.isScopedSlotEmpty.bind(this));
+      }
+
+      const slot = slots.find(s => !!s);
+
+      return this.isScopedSlotEmpty.call(this, slot);
     },
     displayProperty(obj) {
       return (this.isPlainSuggestion ? obj : fromPath(obj, this.displayAttribute)) + '';
@@ -475,8 +487,7 @@ var VueSimpleSuggest = {
 
       if (_this3.listShown && !value && _this3.minLength > 0) {
         _this3.hideList();
-        _this3.clearSuggestions();
-        return _this3.suggestions;
+        return [];
       }
 
       if (value.length < _this3.minLength) {
@@ -488,6 +499,10 @@ var VueSimpleSuggest = {
       // Start request if can
       if (_this3.listIsRequest) {
         _this3.$emit('request-start', value);
+
+        if (_this3.suggestions.length > 0 || !_this3.miscSlotsAreEmpty()) {
+          _this3.showList();
+        }
       }
 
       let result = [];

dist/es7.js

@@ -158,7 +158,7 @@ var VueSimpleSuggest = {
       validator: value => !!~Object.keys(modes).indexOf(value.toLowerCase())
     }
   }),
-  // Handle run-time mode changes:
+  // Handle run-time mode changes (not working):
   watch: {
     mode: v => event = v
   },
@@ -216,10 +216,23 @@ var VueSimpleSuggest = {
   },
   methods: {
     isScopedSlotEmpty(slot) {
-      return slot && typeof slot === 'function' ? !slot(this) : !slot;
+      if (slot) {
+        const vNode = slot(this);
+        return !(Array.isArray(vNode) || vNode && (vNode.tag || vNode.context || vNode.text || vNode.children));
+      }
+
+      return true;
     },
     miscSlotsAreEmpty() {
-      return ['above', 'below'].some(slotName => this.isScopedSlotEmpty(this.$scopedSlots['misc-item-' + slotName]));
+      const slots = ['misc-item-above', 'misc-item-below'].map(s => this.$scopedSlots[s]);
+
+      if (slots.every(s => !!s)) {
+        return slots.every(this.isScopedSlotEmpty.bind(this));
+      }
+
+      const slot = slots.find(s => !!s);
+
+      return this.isScopedSlotEmpty.call(this, slot);
     },
     displayProperty(obj) {
       return (this.isPlainSuggestion ? obj : fromPath(obj, this.displayAttribute)) + '';
@@ -402,8 +415,7 @@ var VueSimpleSuggest = {
     async getSuggestions(value = '') {
       if (this.listShown && !value && this.minLength > 0) {
         this.hideList();
-        this.clearSuggestions();
-        return this.suggestions;
+        return [];
       }
 
       if (value.length < this.minLength) {
@@ -415,6 +427,10 @@ var VueSimpleSuggest = {
       // Start request if can
       if (this.listIsRequest) {
         this.$emit('request-start', value);
+
+        if (this.suggestions.length > 0 || !this.miscSlotsAreEmpty()) {
+          this.showList();
+        }
       }
 
       let result = [];

dist/iife.js

@@ -182,25 +182,22 @@
   <span class=hljs-tag>&lt;/<span class=hljs-name>div</span>&gt;</span>
 <span class=hljs-tag>&lt;/<span class=hljs-name>vue-simple-suggest</span>&gt;</span></code></pre><p>These slots can also be used to handle empty results, like this:</p> <pre class=hljs><code><span class=hljs-comment>&lt;!-- Main slot template --&gt;</span>
 <span class=hljs-tag>&lt;<span class=hljs-name>template</span> <span class=hljs-attr>slot</span>=<span class=hljs-string>"misc-item-above"</span> <span class=hljs-attr>slot-scope</span>=<span class=hljs-string>"{ suggestions, query }"</span>&gt;</span>
+  <span class=hljs-tag>&lt;<span class=hljs-name>div</span> <span class=hljs-attr>class</span>=<span class=hljs-string>"misc-item"</span>&gt;</span>
+    <span class=hljs-tag>&lt;<span class=hljs-name>span</span>&gt;</span>You're searching for '{{ query }}'.<span class=hljs-tag>&lt;/<span class=hljs-name>span</span>&gt;</span>
+  <span class=hljs-tag>&lt;/<span class=hljs-name>div</span>&gt;</span>
 
   <span class=hljs-comment>&lt;!-- Sub-template if have any suggestions --&gt;</span>
   <span class=hljs-tag>&lt;<span class=hljs-name>template</span> <span class=hljs-attr>v-if</span>=<span class=hljs-string>"suggestions.length &gt; 0"</span>&gt;</span>
-    <span class=hljs-tag>&lt;<span class=hljs-name>div</span> <span class=hljs-attr>class</span>=<span class=hljs-string>"misc-item"</span>&gt;</span>
-      <span class=hljs-tag>&lt;<span class=hljs-name>span</span>&gt;</span>You're searching for '{{ query }}'.<span class=hljs-tag>&lt;/<span class=hljs-name>span</span>&gt;</span>
-    <span class=hljs-tag>&lt;/<span class=hljs-name>div</span>&gt;</span>
     <span class=hljs-tag>&lt;<span class=hljs-name>div</span> <span class=hljs-attr>class</span>=<span class=hljs-string>"misc-item"</span>&gt;</span>
       <span class=hljs-tag>&lt;<span class=hljs-name>span</span>&gt;</span>{{ suggestions.length }} suggestions are shown...<span class=hljs-tag>&lt;/<span class=hljs-name>span</span>&gt;</span>
     <span class=hljs-tag>&lt;/<span class=hljs-name>div</span>&gt;</span>
     <span class=hljs-tag>&lt;<span class=hljs-name>hr</span>&gt;</span>
   <span class=hljs-tag>&lt;/<span class=hljs-name>template</span>&gt;</span>
 
   <span class=hljs-comment>&lt;!-- Show "No result" otherwise, if not loading new ones --&gt;</span>
-  <span class=hljs-tag>&lt;<span class=hljs-name>template</span> <span class=hljs-attr>v-else-if</span>=<span class=hljs-string>"!loading"</span>&gt;</span>
-    <span class=hljs-tag>&lt;<span class=hljs-name>div</span> <span class=hljs-attr>class</span>=<span class=hljs-string>"misc-item"</span>&gt;</span>
-      <span class=hljs-tag>&lt;<span class=hljs-name>span</span>&gt;</span>No results<span class=hljs-tag>&lt;/<span class=hljs-name>span</span>&gt;</span>
-    <span class=hljs-tag>&lt;/<span class=hljs-name>div</span>&gt;</span>
-  <span class=hljs-tag>&lt;/<span class=hljs-name>template</span>&gt;</span>
-
+  <span class=hljs-tag>&lt;<span class=hljs-name>div</span> <span class=hljs-attr>class</span>=<span class=hljs-string>"misc-item"</span> <span class=hljs-attr>v-else-if</span>=<span class=hljs-string>"!loading"</span>&gt;</span>
+    <span class=hljs-tag>&lt;<span class=hljs-name>span</span>&gt;</span>No results<span class=hljs-tag>&lt;/<span class=hljs-name>span</span>&gt;</span>
+  <span class=hljs-tag>&lt;/<span class=hljs-name>div</span>&gt;</span>
 <span class=hljs-tag>&lt;/<span class=hljs-name>template</span>&gt;</span></code></pre> </article> <script type="text/javascript" src="main.js"></script></body> </html> 
   </body>
 </html>

dist/umd.js

@@ -1,7 +1,7 @@
 {
   "name": "vue-simple-suggest",
   "description": "Feature-rich autocomplete component for Vue.js",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "author": "KazanExpress",
   "license": "MIT",
   "repository": "KazanExpress/vue-simple-suggest",