Docs-and-build.

Author: Raiondesu

docs/index.html

@@ -118,7 +118,7 @@
   <span class=hljs-selector-class>.input-wrapper</span>
     <span class=hljs-selector-class>.default-input</span> <span class=hljs-comment>// Replaced with your custom input if default slot is provided</span>
   <span class=hljs-selector-class>.suggestions</span>
-    <span class=hljs-selector-class>.suggest-item</span></code></pre><hr> <h3 id=api-definitions><a class=header-link href=#api-definitions></a>API definitions</h3> <h4 id=props><a class=header-link href=#props></a>Props</h4> <table> <thead> <tr> <th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <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> </tr> <tr> <td><code>max-suggestions</code></td> <td>Number</td> <td><code>10</code></td> <td>The maximum amount of suggestions to display. Set to 0 for infinite suggestions.</td> </tr> <tr> <td><code>display-attribute</code></td> <td>String</td> <td><code>&#39;title&#39;</code></td> <td>The property in a suggestion object to display in a list. Supports dotted paths.</td> </tr> <tr> <td><code>value-attribute</code></td> <td>String</td> <td><code>&#39;id&#39;</code></td> <td>The property in a suggestion object to use as a unique key. Supports dotted paths.</td> </tr> <tr> <td><code>list</code></td> <td>Funciton or Array</td> <td><code>() =&gt; []</code></td> <td>The array provider function, must accept a query as its only argument. Can return an array or a promise. Can be async. The component behaves as a simple input without this function.</td> </tr> <tr> <td><code>debounce</code></td> <td>Number</td> <td><code>0</code></td> <td>Determines the <code>list</code> debounce (a time between the input event and a function execution).</td> </tr> <tr> <td><code>destyled</code></td> <td>Boolean</td> <td><code>false</code></td> <td>Whether to cancel the default styling of input and suggestions list.</td> </tr> <tr> <td><code>remove-list</code></td> <td>Boolean</td> <td><code>false</code></td> <td>If true - the suggestion list will be always hidden.</td> </tr> <tr> <td><code>filter-by-query</code></td> <td>Boolean</td> <td><code>false</code></td> <td>Whether to filter the resulting suggestions by input&#39;s text query (make it a search component).</td> </tr> <tr> <td><code>filter</code></td> <td>Function</td> <td>-</td> <td>A custom function for filtering the suggestion results that accepts a single item and a query to filter by as its 2 arguments. Used only if <code>filter-by-query</code> is set to <code>true</code>.</td> </tr> <tr> <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> </tr> </tbody> </table> <h5 id=mode><a class=header-link href=#mode></a>mode</h5> <blockquote> <p>New in <a href=https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.4.0>v1.4.0</a></p> </blockquote> <p>Determines the event, that triggers <code>v-model</code>. Can be one of <code>&#39;input&#39;</code> (default) or <code>&#39;select&#39;</code>.</p> <p>For example, if <code>&#39;input&#39;</code> is chosen - then v-model will update the value each time an <a href=#emitted-events><code>input</code></a> event is fired, setting the input&#39;s string.</p> <p>Same is for <code>&#39;select&#39;</code> - v-model changes only when something is selected from the list, setting the selected value (string, object or whatever) to its argument.</p> <p>A proper use-case for it being when one wants to use the component only for selection binding and custom input for text binding:</p> <pre class=hljs><code><span class=hljs-tag>&lt;<span class=hljs-name>vue-simple-suggest</span> <span class=hljs-attr>v-model</span>=<span class=hljs-string>"selected"</span> <span class=hljs-attr>mode</span>=<span class=hljs-string>"select"</span>&gt;</span>
+    <span class=hljs-selector-class>.suggest-item</span></code></pre><hr> <h3 id=api-definitions><a class=header-link href=#api-definitions></a>API definitions</h3> <h4 id=props><a class=header-link href=#props></a>Props</h4> <table> <thead> <tr> <th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <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> </tr> <tr> <td><code>max-suggestions</code></td> <td>Number</td> <td><code>10</code></td> <td>The maximum amount of suggestions to display. Set to 0 for infinite suggestions.</td> </tr> <tr> <td><code>min-length</code></td> <td>Number</td> <td><code>3</code></td> <td>The minimum amount of symbols in input to trigger suggestion list. <code>vue-simple-suggest</code> starts behaving as a dropdown menu, if the value is 0.</td> </tr> <tr> <td><code>display-attribute</code></td> <td>String</td> <td><code>&#39;title&#39;</code></td> <td>The property in a suggestion object to display in a list. Supports dotted paths.</td> </tr> <tr> <td><code>value-attribute</code></td> <td>String</td> <td><code>&#39;id&#39;</code></td> <td>The property in a suggestion object to use as a unique key. Supports dotted paths.</td> </tr> <tr> <td><code>list</code></td> <td>Funciton or Array</td> <td><code>() =&gt; []</code></td> <td>The array provider function, must accept a query as its only argument. Can return an array or a promise. Can be async. The component behaves as a simple input without this function.</td> </tr> <tr> <td><code>debounce</code></td> <td>Number</td> <td><code>0</code></td> <td>Determines the <code>list</code> debounce (a time between the input event and a function execution).</td> </tr> <tr> <td><code>destyled</code></td> <td>Boolean</td> <td><code>false</code></td> <td>Whether to cancel the default styling of input and suggestions list.</td> </tr> <tr> <td><code>remove-list</code></td> <td>Boolean</td> <td><code>false</code></td> <td>If true - the suggestion list will be always hidden.</td> </tr> <tr> <td><code>filter-by-query</code></td> <td>Boolean</td> <td><code>false</code></td> <td>Whether to filter the resulting suggestions by input&#39;s text query (make it a search component).</td> </tr> <tr> <td><code>filter</code></td> <td>Function</td> <td>-</td> <td>A custom function for filtering the suggestion results that accepts a single item and a query to filter by as its 2 arguments. Used only if <code>filter-by-query</code> is set to <code>true</code>.</td> </tr> <tr> <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> </tr> </tbody> </table> <h5 id=mode><a class=header-link href=#mode></a>mode</h5> <blockquote> <p>New in <a href=https://github.com/KazanExpress/vue-simple-suggest/releases/tag/v1.4.0>v1.4.0</a></p> </blockquote> <p>Determines the event, that triggers <code>v-model</code>. Can be one of <code>&#39;input&#39;</code> (default) or <code>&#39;select&#39;</code>.</p> <p>For example, if <code>&#39;input&#39;</code> is chosen - then v-model will update the value each time an <a href=#emitted-events><code>input</code></a> event is fired, setting the input&#39;s string.</p> <p>Same is for <code>&#39;select&#39;</code> - v-model changes only when something is selected from the list, setting the selected value (string, object or whatever) to its argument.</p> <p>A proper use-case for it being when one wants to use the component only for selection binding and custom input for text binding:</p> <pre class=hljs><code><span class=hljs-tag>&lt;<span class=hljs-name>vue-simple-suggest</span> <span class=hljs-attr>v-model</span>=<span class=hljs-string>"selected"</span> <span class=hljs-attr>mode</span>=<span class=hljs-string>"select"</span>&gt;</span>
   <span class=hljs-tag>&lt;<span class=hljs-name>input</span> <span class=hljs-attr>v-model</span>=<span class=hljs-string>"text"</span>&gt;</span>
 <span class=hljs-tag>&lt;/<span class=hljs-name>vue-simple-suggest</span>&gt;</span></code></pre><hr> <h4 id=emitted-events><a class=header-link href=#emitted-events></a>Emitted Events</h4> <table> <thead> <tr> <th>Name</th> <th>Arguments</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>input</code></td> <td>HTML input event</td> <td>An outward projection of the current input&#39;s event.</td> </tr> <tr> <td><code>focus</code></td> <td>HTML focus event</td> <td>An outward projection of the current input&#39;s event.</td> </tr> <tr> <td><code>blur</code></td> <td>HTML focus event</td> <td>An outward projection of the current input&#39;s event.</td> </tr> <tr> <td><code>select</code></td> <td>Selected suggestion</td> <td>Fires on suggestion selection (via a mouse click or enter keypress).</td> </tr> <tr> <td><code>hover</code></td> <td>Hovered suggestion</td> <td>Fires each time a new suggestion is highlighted (via a cursor movement or keyboard arrows).</td> </tr> <tr> <td><code>suggestion-click</code></td> <td>Selected suggestion, HTML click event</td> <td>Fires on suggestion element click.</td> </tr> <tr> <td><code>show-list</code></td> <td>-</td> <td>Fires each time the suggestion list is toggled to be shown.</td> </tr> <tr> <td><code>hide-list</code></td> <td>-</td> <td>Fires each time the suggestion list is being hidden.</td> </tr> <tr> <td><code>request-start</code></td> <td>Current input value (query)</td> <td>Fires each time a <code>list</code> function starts executing.</td> </tr> <tr> <td><code>request-done</code></td> <td>Resulting suggestions list</td> <td>Fires when a <code>list</code> function successfully returns a result and forwards that result as an argument.</td> </tr> <tr> <td><code>request-failed</code></td> <td>The interrrupting exception</td> <td>Fires if an exception occurs during the execution of a <code>list</code> funciton.</td> </tr> </tbody> </table> <hr> <h4 id=ref-methods><a class=header-link href=#ref-methods></a>Ref Methods</h4> <blockquote> <p>accessed via <code>$refs.*your ref name here*</code></p> </blockquote> <table> <thead> <tr> <th>Name</th> <th>Arguments</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>showList</code></td> <td>-</td> <td>Shows the suggestion list. Emits the respected <a href=#emitted-events>event</a>.</td> </tr> <tr> <td><code>hideList</code></td> <td>-</td> <td>Hides the suggestion list. Emits the respected <a href=#emitted-events>event</a>.</td> </tr> <tr> <td><code>getSuggestions</code></td> <td><code>query</code>: string</td> <td>Gets and processes suggestions from the <code>list</code> prop. Returns a promise. Emits the <code>requestStart</code>, <code>requestDone</code> and <code>requestFailed</code> <a href=#emitted-events>events</a>.</td> </tr> <tr> <td><code>research</code></td> <td>-</td> <td>Debounced <code>getSuggestions</code> on the current input value.</td> </tr> <tr> <td><code>clearSuggestions</code></td> <td>-</td> <td>Clears the <code>suggestions</code> array.</td> </tr> <tr> <td><code>select</code></td> <td>suggestion</td> <td>Selects the passed suggestion. Emits the respected <a href=#emitted-events>event</a>.</td> </tr> <tr> <td><code>hover</code></td> <td>suggestion</td> <td>Hovers over the passed suggestion. Emits the respected <a href=#emitted-events>event</a>.</td> </tr> <tr> <td><code>displayProperty</code></td> <td>suggestion</td> <td>Returns the displayed property of a suggestion.</td> </tr> <tr> <td><code>valueProperty</code></td> <td>suggestion</td> <td>Returns the value property of a suggestion.</td> </tr> </tbody> </table> <hr> <h4 id=ref-event-handlers><a class=header-link href=#ref-event-handlers></a>Ref Event Handlers</h4> <blockquote> <p>accessed via <code>$refs.*your ref name here*</code></p> </blockquote> <p>You can use these to imitate some of the component&#39;s behaviours.</p> <table> <thead> <tr> <th>Name</th> <th>Arguments</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>showSuggestions</code></td> <td>Alias for <code>onInputClick</code>. Will replace it in the future releases</td> </tr> <tr> <td><code>onInput</code></td> <td>HTML input event</td> <td>Fires whenever the input text is changed. Emits the <a href=#emitted-events><code>input</code></a> event.</td> </tr> <tr> <td><code>onFocus</code></td> <td>HTML focus event</td> <td>Fires whenever the input comes into focus, emits the <a href=#emitted-events><code>focus</code></a> event.</td> </tr> <tr> <td><code>onBlur</code></td> <td>HTML focus event</td> <td>Antonym to <code>onFocus</code>.</td> </tr> <tr> <td><code>onAutocomplete</code></td> <td>-</td> <td>Fires when the autocomplete <a href=#default-controls>keyboard shortcut</a> is pressed. Selects the first suggestion.</td> </tr> <tr> <td><code>onListKeyUp</code></td> <td>HTML keyup event</td> <td>Fires on component keyup. Internally used for hiding the list.</td> </tr> <tr> <td><code>moveSelection</code></td> <td>Alias for <code>onArrowKeyDown</code>. Will replace it in the future releases.</td> </tr> </tbody> </table> <hr> <h4 id=ref-data><a class=header-link href=#ref-data></a>Ref Data</h4> <blockquote> <p>accessed via <code>$refs.*your ref name here*</code></p> </blockquote> <table> <thead> <tr> <th>Name</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>selected</code></td> <td><code>null</code></td> <td>Currently selected element.</td> </tr> <tr> <td><code>hovered</code></td> <td><code>null</code></td> <td>Currently hovered element.</td> </tr> <tr> <td><code>suggestions</code></td> <td><code>[]</code></td> <td>Current suggestions list.</td> </tr> <tr> <td><code>listShown</code></td> <td><code>false</code></td> <td>Is suggestion list shown.</td> </tr> <tr> <td><code>inputElement</code></td> <td><code>null</code></td> <td>Currently used HTMLInputElement.</td> </tr> <tr> <td><code>canSend</code></td> <td><code>true</code></td> <td>Whether the assigned getListFuncion can be executed.</td> </tr> <tr> <td><code>timeoutInstance</code></td> <td><code>null</code></td> <td>The timeout until next getListFunction execution.</td> </tr> <tr> <td><code>text</code></td> <td><code>$props.value</code></td> <td>Current input text.</td> </tr> <tr> <td><code>slotIsComponent</code></td> <td><code>false</code></td> <td>Whether this current custom input is a vue-component.</td> </tr> <tr> <td><code>listIsRequest</code></td> <td>-</td> <td>Whether the list prop is a function.</td> </tr> <tr> <td><code>input</code></td> <td>-</td> <td>A ref to the current input (component or vanilla).</td> </tr> <tr> <td><code>hoveredIndex</code></td> <td>-</td> <td>The current hovered element index.</td> </tr> <tr> <td><code>controlScheme</code></td> <td><a href=#default-controls>Default Controls</a></td> <td>The current controls scheme.</td> </tr> <tr> <td><code>isPlainSuggestion</code></td> <td><code>false</code></td> <td>Whether the current suggestions list consists of plain strings (not objects).</td> </tr> <tr> <td><code>isClicking</code></td> <td><code>false</code></td> <td><code>true</code> if the user currently clicks.</td> </tr> <tr> <td><code>isOverList</code></td> <td><code>false</code></td> <td><code>true</code> if the user currently hovers over suggestions list.</td> </tr> <tr> <td><code>isInFocus</code></td> <td><code>false</code></td> <td><code>true</code> if the component is currently in focus.</td> </tr> <tr> <td><code>isTabbed</code></td> <td><code>false</code></td> <td><code>true</code> if the user pressed tab, while the component is in focus.</td> </tr> </tbody> </table> <hr> <h3 id=slots><a class=header-link href=#slots></a>Slots</h3> <h5 id=custom-input><a class=header-link href=#custom-input></a>Custom input</h5> <blockquote> <p>default slot (optional)</p> </blockquote> <p>Supports nesting. Input props can be passed to a custom input to avoid their processing by vue-simple-suggest. Defaults to a simple input with props passed to vue-simple-suggest.</p> <p><strong>Warning:</strong> <code>v-model</code> on a custom input IS NOT the same as <code>v-model</code> on vue-simple-suggest!</p> <pre class=hljs><code><span class=hljs-comment>&lt;!--  Default HTMLInputElement example:  --&gt;</span>
 <span class=hljs-tag>&lt;<span class=hljs-name>vue-simple-suggest</span> <span class=hljs-attr>v-model</span>=<span class=hljs-string>"model"</span> <span class=hljs-attr>placeholder</span>=<span class=hljs-string>"Text here"</span> <span class=hljs-attr>type</span>=<span class=hljs-string>"search"</span> <span class=hljs-attr>pattern</span>=<span class=hljs-string>"[a-z]+"</span>/&gt;</span></code></pre><pre class=hljs><code><span class=hljs-comment>&lt;!--  Vanilla HTMLInputElement example 1:  --&gt;</span>

example/src/README.html

@@ -325,6 +325,12 @@ <h4 id="props"><a class="header-link" href="#props"></a>Props</h4>
 <td>The maximum amount of suggestions to display. Set to 0 for infinite suggestions.</td>
 </tr>
 <tr>
+<td><code>min-length</code></td>
+<td>Number</td>
+<td><code>3</code></td>
+<td>The minimum amount of symbols in input to trigger suggestion list. <code>vue-simple-suggest</code> starts behaving as a dropdown menu, if the value is 0.</td>
+</tr>
+<tr>
 <td><code>display-attribute</code></td>
 <td>String</td>
 <td><code>&#39;title&#39;</code></td>