Skip to content

Commit

Permalink
Merge pull request #18 from KazanExpress/dev
Browse files Browse the repository at this point in the history 
Implemented #15
  • Loading branch information
@Raiondesu
Raiondesu authored Mar 30, 2018
2 parents baf0470 + 05be9eb commit ae0ff34
Show file tree
Hide file tree
Showing 9 changed files with 132 additions and 5 deletions.
0 ISSUE_TEMPLATE.md → .github/ISSUE_TEMPLATE.md
View file
File renamed without changes.
0 PULL_REQUEST_TEMPLATE.md → .github/PULL_REQUEST_TEMPLATE.md
View file
File renamed without changes.
1 change: 1 addition & 0 deletions .npmignore
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
example
docs
.github
51 changes: 51 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ npm install --save vue-simple-suggest
## Table of contents

- [What is it?](#what-is-it)
- [Simple example](#simple-example)
- [Build](#build-setup)
- [Controls](#default-controls)
- [Component API](#component-api)
Expand Down Expand Up @@ -48,6 +49,56 @@ And, as a bonus, it is very light (<4kb minified).
All of the props, events and slots are OPTIONAL for this component, so it can be used without any configuration at all.

-----

## Simple example

To use the component just install via NPM:

`npm install --save vue-simple-suggest`

Then, in your Vue.js component/page:

```html
<!-- Some component.vue -->
<template>
<vue-suggest
v-model="chosen"
:list="simpleSuggestionList"
></vue-suggest>

<br>

<p>Chosen element: {{ chosen }}</p>
</template>

<script>
import VueSuggest from 'vue-simple-suggest'
export default {
components: {
VueSuggest
},
data() {
return {
chosen: ''
}
},
methods: {
simpleSuggestionList() {
return [
'Vue.js',
'React.js',
'Angular.js'
]
}
}
}
</script>
```


-----

## Build Setup

``` bash
Expand Down
36 changes: 35 additions & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,41 @@
</head>
<body>
<div id="app"></div>
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1,minimal-ui"> <title>vue-simple-suggest</title> <link type=text/css rel=stylesheet href=assets/css/github-markdown.css> <link type=text/css rel=stylesheet href=assets/css/pilcrow.css> <link type=text/css rel=stylesheet href=assets/css/hljs-github.min.css /> </head> <body> <article class=markdown-body><h1 id=vue-simple-suggest><a class=header-link href=#vue-simple-suggest></a>vue-simple-suggest</h1> <blockquote> <p>Simple yet feature-rich autocomplete component for Vue.js</p> </blockquote> <p><a href=https://www.npmjs.com/package/vue-simple-suggest><img src="https://img.shields.io/npm/v/vue-simple-suggest.svg?style=flat-square" alt=npm></a> <a href=https://kazanexpress.github.io/vue-simple-suggest/ ><img src="https://img.shields.io/badge/demo-live-brightgreen.svg?style=flat-square" alt="live demo"></a> <a href=https://github.com/KazanExpress/vue-simple-suggest><img src="https://img.shields.io/badge/github-repo-lightgray.svg?style=flat-square" alt=""></a> <a href=https://github.com/vuejs/awesome-vue#autocomplete><img src="https://img.shields.io/badge/very-awesome-orange.svg?style=flat-square" alt=""></a></p> <pre class=hljs><code>npm install --save vue-simple-suggest</code></pre><h2 id=table-of-contents><a class=header-link href=#table-of-contents></a>Table of contents</h2> <ul class=list> <li><a href=#what-is-it>What is it?</a></li> <li><a href=#build-setup>Build</a></li> <li><a href=#default-controls>Controls</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> <li><a href=#props>Props</a></li> <li><a href=#emitted-events>Emitted Events</a></li> <li><a href=#ref-methods>Ref Methods</a></li> <li><a href=#ref-event-handlers>Ref Event Handlers</a></li> <li><a href=#ref-data>Ref Data</a></li> </ul> </li> <li><a href=#slots>Slots</a><ul class=list> <li><a href=#custom-input>Custom input</a></li> <li><a href=#custom-suggestion-item>Custom suggestion item</a></li> <li><a href=#custom-miscellanious-item-slots>Custom miscellanious item slots</a></li> </ul> </li> </ul> </li> </ul> <h2 id=what-is-it><a class=header-link href=#what-is-it></a>What is it</h2> <p>This is a simple yet feature-rich suggestion/autocomplete component for Vue.js.</p> <p>It supports v-model, allows custom styling, custom input and suggestion list templates, API calls and more.</p> <p>Actually, it&#39;s so feature rich, that it&#39;s possible to do crazy stuff with it, like</p> <ul class=list> <li>Imitating drop-downs and drop-down menus</li> <li>Turn suggestions list into an actual suggestions table</li> <li>Work with ANY type of custom input passed (like type=button, radio and etc.)</li> <li>... And many more things</li> </ul> <p>And, as a bonus, it is very light (&lt;4kb minified).</p> <p>All of the props, events and slots are OPTIONAL for this component, so it can be used without any configuration at all.</p> <hr> <h2 id=build-setup><a class=header-link href=#build-setup></a>Build Setup</h2> <pre class=hljs><code><span class=hljs-comment># clone the repo</span>
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1,minimal-ui"> <title>vue-simple-suggest</title> <link type=text/css rel=stylesheet href=assets/css/github-markdown.css> <link type=text/css rel=stylesheet href=assets/css/pilcrow.css> <link type=text/css rel=stylesheet href=assets/css/hljs-github.min.css /> </head> <body> <article class=markdown-body><h1 id=vue-simple-suggest><a class=header-link href=#vue-simple-suggest></a>vue-simple-suggest</h1> <blockquote> <p>Simple yet feature-rich autocomplete component for Vue.js</p> </blockquote> <p><a href=https://www.npmjs.com/package/vue-simple-suggest><img src="https://img.shields.io/npm/v/vue-simple-suggest.svg?style=flat-square" alt=npm></a> <a href=https://kazanexpress.github.io/vue-simple-suggest/ ><img src="https://img.shields.io/badge/demo-live-brightgreen.svg?style=flat-square" alt="live demo"></a> <a href=https://github.com/KazanExpress/vue-simple-suggest><img src="https://img.shields.io/badge/github-repo-lightgray.svg?style=flat-square" alt=""></a> <a href=https://github.com/vuejs/awesome-vue#autocomplete><img src="https://img.shields.io/badge/very-awesome-orange.svg?style=flat-square" alt=""></a></p> <pre class=hljs><code>npm install --save vue-simple-suggest</code></pre><h2 id=table-of-contents><a class=header-link href=#table-of-contents></a>Table of contents</h2> <ul class=list> <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=#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> <li><a href=#props>Props</a></li> <li><a href=#emitted-events>Emitted Events</a></li> <li><a href=#ref-methods>Ref Methods</a></li> <li><a href=#ref-event-handlers>Ref Event Handlers</a></li> <li><a href=#ref-data>Ref Data</a></li> </ul> </li> <li><a href=#slots>Slots</a><ul class=list> <li><a href=#custom-input>Custom input</a></li> <li><a href=#custom-suggestion-item>Custom suggestion item</a></li> <li><a href=#custom-miscellanious-item-slots>Custom miscellanious item slots</a></li> </ul> </li> </ul> </li> </ul> <h2 id=what-is-it><a class=header-link href=#what-is-it></a>What is it</h2> <p>This is a simple yet feature-rich suggestion/autocomplete component for Vue.js.</p> <p>It supports v-model, allows custom styling, custom input and suggestion list templates, API calls and more.</p> <p>Actually, it&#39;s so feature rich, that it&#39;s possible to do crazy stuff with it, like</p> <ul class=list> <li>Imitating drop-downs and drop-down menus</li> <li>Turn suggestions list into an actual suggestions table</li> <li>Work with ANY type of custom input passed (like type=button, radio and etc.)</li> <li>... And many more things</li> </ul> <p>And, as a bonus, it is very light (&lt;4kb minified).</p> <p>All of the props, events and slots are OPTIONAL for this component, so it can be used without any configuration at all.</p> <hr> <h2 id=simple-example><a class=header-link href=#simple-example></a>Simple example</h2> <p>To use the component just install via NPM:</p> <p><code>npm install --save vue-simple-suggest</code></p> <p>Then, in your Vue.js component/page:</p> <pre class=hljs><code><span class=hljs-comment>&lt;!-- Some component.vue --&gt;</span>
<span class=hljs-tag>&lt;<span class=hljs-name>template</span>&gt;</span>
<span class=hljs-tag>&lt;<span class=hljs-name>vue-suggest</span>
<span class=hljs-attr>v-model</span>=<span class=hljs-string>"chosen"</span>
<span class=hljs-attr>:list</span>=<span class=hljs-string>"simpleSuggestionList"</span>
&gt;</span><span class=hljs-tag>&lt;/<span class=hljs-name>vue-suggest</span>&gt;</span>

<span class=hljs-tag>&lt;<span class=hljs-name>br</span>&gt;</span>

<span class=hljs-tag>&lt;<span class=hljs-name>p</span>&gt;</span>Chosen element: {{ chosen }}<span class=hljs-tag>&lt;/<span class=hljs-name>p</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>script</span>&gt;</span><span class=javascript>
<span class=hljs-keyword>import</span> VueSuggest <span class=hljs-keyword>from</span> <span class=hljs-string>'vue-simple-suggest'</span>

<span class=hljs-keyword>export</span> <span class=hljs-keyword>default</span> {
<span class=hljs-attr>components</span>: {
VueSuggest
},
data() {
<span class=hljs-keyword>return</span> {
<span class=hljs-attr>chosen</span>: <span class=hljs-string>''</span>
}
},
<span class=hljs-attr>methods</span>: {
simpleSuggestionList() {
<span class=hljs-keyword>return</span> [
<span class=hljs-string>'Vue.js'</span>,
<span class=hljs-string>'React.js'</span>,
<span class=hljs-string>'Angular.js'</span>
]
}
}
}
</span><span class=hljs-tag>&lt;/<span class=hljs-name>script</span>&gt;</span></code></pre><hr> <h2 id=build-setup><a class=header-link href=#build-setup></a>Build Setup</h2> <pre class=hljs><code><span class=hljs-comment># clone the repo</span>
git <span class=hljs-built_in>clone</span> https://github.com/KazanExpress/vue-simple-suggest.git
<span class=hljs-built_in>cd</span> ./vue-simple-suggest

Expand Down
2 changes: 1 addition & 1 deletion docs/main.js
View file

Large diffs are not rendered by default.

40 changes: 40 additions & 0 deletions example/src/README.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
<pre class="hljs"><code>npm install --save vue-simple-suggest</code></pre><h2 id="table-of-contents"><a class="header-link" href="#table-of-contents"></a>Table of contents</h2>
<ul class="list">
<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="#component-api">Component API</a><ul class="list">
Expand Down Expand Up @@ -54,6 +55,45 @@ <h2 id="what-is-it"><a class="header-link" href="#what-is-it"></a>What is it</h2
<p>And, as a bonus, it is very light (&lt;4kb minified).</p>
<p>All of the props, events and slots are OPTIONAL for this component, so it can be used without any configuration at all.</p>
<hr>
<h2 id="simple-example"><a class="header-link" href="#simple-example"></a>Simple example</h2>
<p>To use the component just install via NPM:</p>
<p><code>npm install --save vue-simple-suggest</code></p>
<p>Then, in your Vue.js component/page:</p>
<pre class="hljs"><code><span class="hljs-comment">&lt;!-- Some component.vue --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">vue-suggest</span>
<span class="hljs-attr">v-model</span>=<span class="hljs-string">"chosen"</span>
<span class="hljs-attr">:list</span>=<span class="hljs-string">"simpleSuggestionList"</span>
&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">vue-suggest</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Chosen element: {{ chosen }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</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">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">import</span> VueSuggest <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-simple-suggest'</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
<span class="hljs-attr">components</span>: {
VueSuggest
},
data() {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">chosen</span>: <span class="hljs-string">''</span>
}
},
<span class="hljs-attr">methods</span>: {
simpleSuggestionList() {
<span class="hljs-keyword">return</span> [
<span class="hljs-string">'Vue.js'</span>,
<span class="hljs-string">'React.js'</span>,
<span class="hljs-string">'Angular.js'</span>
]
}
}
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre><hr>
<h2 id="build-setup"><a class="header-link" href="#build-setup"></a>Build Setup</h2>
<pre class="hljs"><code><span class="hljs-comment"># clone the repo</span>
git <span class="hljs-built_in">clone</span> https://github.com/KazanExpress/vue-simple-suggest.git
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
{
"name": "vue-simple-suggest",
"description": "Feature-rich autocomplete component for Vue.js",
"version": "1.2.4",
"version": "1.2.5",
"author": "KazanExpress",
"license": "MIT",
"repository": "KazanExpress/vue-simple-suggest",
"homepage": "https://kazanexpress.github.io/vue-simple-suggest/",
"bugs": {
"url": "https://github.com/KazanExpress/vue-simple-suggest/issues"
},
Expand Down Expand Up @@ -41,7 +42,7 @@
"JavaScript",
"JS"
],
"dependencies": {
"peerDependencies": {
"vue": "^2.5.0"
},
"browserslist": [
Expand Down

0 comments on commit ae0ff34

Please sign in to comment.