Merge pull request #24 from KazanExpress/dev

v1.4.0

Author: kaskar2008

README.md

@@ -17,7 +17,7 @@ npm install --save vue-simple-suggest
 - [What is it?](#what-is-it)
 - [Simple example](#simple-example)
 - [Build](#build-setup)
-- [Controls](#default-controls)
+- [Controls <sup>[v1.2.0](https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.2.0)</sup>](#default-controls)
 - [Component API](#component-api)
   - [TLDR](#tldr)
   - [API Definitions](#api-definitions)
@@ -118,6 +118,8 @@ npm run docs
 -----
 ## Default Controls
 
+> New in [v1.2.0](https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.2.0)
+
 These are default keyboard shortcuts.
 
 Can be customized with the [`controls` prop](#props). All fields in this `controls` object are optional.
@@ -154,6 +156,7 @@ JS object:
 <vue-simple-suggest ref="vueSimpleSuggest" v-model="model"
   value-attribute="id"
   display-attribute="title"
+  mode="input"
   :placeholder="placeholder!!!"
   :list="getListFunction"
   :max-count="10"
@@ -210,7 +213,7 @@ JS object:
 #### Props
 | Name                           | Type     | Default  | Description         |
 |--------------------------------|----------|----------|--------------------------------------------------------------|
-| `controls`                     | Object   | See [default controls](#default-controls)  | Determines the keyboard shortcuts in key-codes (for browser-compatibility purposes). Arrays provide the ability to assign multiple keys to one action. Consists of 5 array fields: `selectionUp`, `selectionDown`, `select`, `hideList` and `autocomplete`, all of which are optional. |
+| `controls` <sup>[v1.2.0](https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.2.0)</sup>                    | Object   | See [default controls](#default-controls)  | Determines the keyboard shortcuts in key-codes (for browser-compatibility purposes). Arrays provide the ability to assign multiple keys to one action. Consists of 5 array fields: `selectionUp`, `selectionDown`, `select`, `hideList` and `autocomplete`, all of which are optional. |
 | `max-suggestions`               | Number   | `10`       | The maximum amount of suggestions to display. Set to 0 for infinite suggestions. |
 | `display-attribute`             | String   | `'title'`  | The property in a suggestion object to display in a list. Supports dotted paths. |
 | `value-attribute`               | String   | `'id'`     | The property in a suggestion object to use as a unique key. Supports dotted paths. |
@@ -219,7 +222,8 @@ JS object:
 | `destyled`                     | Boolean  | `false`    | Whether to cancel the default styling of input and suggestions list. |
 | `remove-list`                   | Boolean  | `false`    | If true - the suggestion list will be always hidden. |
 | `filter-by-query`                | Boolean  | `false`    | Whether to filter the resulting suggestions by input's text query (make it a search component). |
-| type, value, pattern, etc...   |          |            | All of the HTML5 input attributes with their respected default values. |
+| `mode` <sup>[v1.4.0](https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.4.0)</sup>                         | String | `'input'` | The `v-model` event. Determines the event, that triggers `v-model`. Can be one of `'input'` (`v-model` binds a displayed property) or `'select'` (`v-model` binds a selected item). |
+| `type`, `value`, `pattern`, etc...   |          |            | All of the HTML5 input attributes with their respected default values. |
 
 -----
 #### Emitted Events

docs/index.html

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div class="example">
-      <p>v-model: {{ model || 'empty' }}</p>
+      <p>v-model: <span v-html="model || 'empty'"></span></p>
       <vue-suggest class="asdad"
         v-model="model"
         :list="getList"
@@ -15,6 +15,7 @@
           select: [13, 36],
           hideList: [27, 35]
         }"
+        :mode="mode"
         ref="suggestComponent"
         placeholder="Search books..."
         value-attribute="id"
@@ -80,6 +81,7 @@
       return {
         selected: null,
         model: '',
+        mode: 'input',
         loading: false,
         log: []
       }

docs/main.js

@@ -22,7 +22,7 @@
 <li><a href="#what-is-it">What is it?</a></li>
 <li><a href="#simple-example">Simple example</a></li>
 <li><a href="#build-setup">Build</a></li>
-<li><a href="#default-controls">Controls</a></li>
+<li><a href="#default-controls">Controls <sup><a href="https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.2.0">v1.2.0</a></sup></a></li>
 <li><a href="#component-api">Component API</a><ul class="list">
 <li><a href="#tldr">TLDR</a></li>
 <li><a href="#api-definitions">API Definitions</a><ul class="list">
@@ -108,6 +108,9 @@ <h2 id="build-setup"><a class="header-link" href="#build-setup"></a>Build Setup<
 <span class="hljs-comment"># build example &amp; readme for static serving</span>
 npm run docs</code></pre><hr>
 <h2 id="default-controls"><a class="header-link" href="#default-controls"></a>Default Controls</h2>
+<blockquote>
+<p>New in <a href="https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.2.0">v1.2.0</a></p>
+</blockquote>
 <p>These are default keyboard shortcuts.</p>
 <p>Can be customized with the <a href="#props"><code>controls</code> prop</a>. All fields in this <code>controls</code> object are optional.</p>
 <p>Default scheme:</p>
@@ -159,6 +162,7 @@ <h3 id="tldr"><a class="header-link" href="#tldr"></a>TLDR</h3>
 <span class="hljs-tag">&lt;<span class="hljs-name">vue-simple-suggest</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"vueSimpleSuggest"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"model"</span>
   <span class="hljs-attr">value-attribute</span>=<span class="hljs-string">"id"</span>
   <span class="hljs-attr">display-attribute</span>=<span class="hljs-string">"title"</span>
+  <span class="hljs-attr">mode</span>=<span class="hljs-string">"input"</span>
   <span class="hljs-attr">:placeholder</span>=<span class="hljs-string">"placeholder!!!"</span>
   <span class="hljs-attr">:list</span>=<span class="hljs-string">"getListFunction"</span>
   <span class="hljs-attr">:max-count</span>=<span class="hljs-string">"10"</span>
@@ -220,7 +224,7 @@ <h4 id="props"><a class="header-link" href="#props"></a>Props</h4>
 </thead>
 <tbody>
 <tr>
-<td><code>controls</code></td>
+<td><code>controls</code> <sup><a href="https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.2.0">v1.2.0</a></sup></td>
 <td>Object</td>
 <td>See <a href="#default-controls">default controls</a></td>
 <td>Determines the keyboard shortcuts in key-codes (for browser-compatibility purposes). Arrays provide the ability to assign multiple keys to one action. Consists of 5 array fields: <code>selectionUp</code>, <code>selectionDown</code>, <code>select</code>, <code>hideList</code> and <code>autocomplete</code>, all of which are optional.</td>
@@ -274,7 +278,13 @@ <h4 id="props"><a class="header-link" href="#props"></a>Props</h4>
 <td>Whether to filter the resulting suggestions by input&#39;s text query (make it a search component).</td>
 </tr>
 <tr>
-<td>type, value, pattern, etc...</td>
+<td><code>mode</code> <sup><a href="https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.4.0">v1.4.0</a></sup></td>
+<td>String</td>
+<td><code>&#39;input&#39;</code></td>
+<td>The <code>v-model</code> event. Determines the event, that triggers <code>v-model</code>. Can be one of <code>&#39;input&#39;</code> (<code>v-model</code> binds a displayed property) or <code>&#39;select&#39;</code> (<code>v-model</code> binds a selected item).</td>
+</tr>
+<tr>
+<td><code>type</code>, <code>value</code>, <code>pattern</code>, etc...</td>
 <td></td>
 <td></td>
 <td>All of the HTML5 input attributes with their respected default values.</td>

example/src/App.vue

@@ -6,6 +6,11 @@ export const defaultControls = {
   autocomplete: [32, 13]
 }
 
+export const modes = {
+  input: String,
+  select: Object,
+};
+
 export function fromPath(obj, path) {
   return path.split('.').reduce((o, i) => (o === Object(o) ? o[i] : o), obj);
 }

example/src/README.html

@@ -7,7 +7,7 @@
       @keyup="onListKeyUp($event), onAutocomplete($event)"
       ref="inputSlot">
       <slot>
-        <input v-bind="$props">
+        <input v-bind="$props" :value="mode === 'input' ? value : text">
       </slot>
     </div>
     <div class="suggestions" v-if="!!listShown && !removeList" :class="{ designed: !destyled }">
@@ -42,12 +42,21 @@
 <script>
 import {
   defaultControls,
+  modes,
   fromPath,
   hasKeyCode
 } from './misc'
 
+let event = 'input'
+
 export default {
   name: 'vue-simple-suggest',
+  model: {
+    prop: 'value',
+    get event() {
+      return event;
+    }
+  },
   props: {
     placeholder: {
       type: String
@@ -105,9 +114,18 @@ export default {
       default: 0
     },
     value: {
-      type: String
+      type: Object.values(modes),
+      validator: (value) => value.constructor.name === modes[event].name
+    },
+    mode: {
+      type: String,
+      default: event,
+      validator: (value) => !!~Object.keys(modes).indexOf(value.toLowerCase())
     }
   },
+  // Handle run-time mode changes:
+  watch: { mode: v => event = v },
+  //
   data () {
     return {
       selected: null,
@@ -118,7 +136,11 @@ export default {
       canSend: true,
       timeoutInstance: null,
       text: this.value,
+
+      // TODO: Document this!
       isPlainSuggestion: false,
+      //
+
       controlScheme: {}
     }
   },
@@ -144,6 +166,7 @@ export default {
   },
   created() {
     this.controlScheme = Object.assign({}, defaultControls, this.controls);
+    event = this.mode;
   },
   mounted () {
     this.inputElement = this.$refs['inputSlot'].querySelector('input')
@@ -169,10 +192,10 @@ export default {
 
       // Ya know, input stuff
       this.$emit('input', this.displayProperty(item))
-      this.inputElement.value = this.displayProperty(item);
-      this.text = this.displayProperty(item);
+      this.inputElement.value = this.displayProperty(item)
+      this.text = this.displayProperty(item)
 
-      this.inputElement.focus();
+      this.inputElement.focus()
       //
 
       this.hovered = null
@@ -191,18 +214,12 @@ export default {
         }
         this.listShown = false
         this.$emit('hide-list')
-
-        // TODO: Deprecated, remove in the next minor update
-        this.$emit('hideList')
       }
     },
     showList () {
       if (!this.listShown) {
         this.listShown = true
         this.$emit('show-list')
-
-        // TODO: Deprecated, remove in the next minor update
-        this.$emit('showList')
       }
     },
     async onInputClick (event) {
@@ -323,9 +340,6 @@ export default {
       // Start request if can
       if (this.listIsRequest) {
         this.$emit('request-start', value)
-
-        // TODO: Deprecated, remove in the next minor update
-        this.$emit('requestStart', value)
       }
 
       let result = [];
@@ -347,18 +361,12 @@ export default {
 
         if (this.listIsRequest) {
           this.$emit('request-done', result)
-
-          // TODO: Deprecated, remove in the next minor update
-          this.$emit('requestDone', result)
         }
       }
 
       catch (e) {
         if (this.listIsRequest) {
           this.$emit('request-failed', e)
-
-          // TODO: Deprecated, remove in the next minor update
-          this.$emit('requestFailed', e)
         } else {
           throw e;
         }

lib/misc.js

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