mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-17 02:29:37 +03:00
Code Activity

add ajax to docs

Browse Source
This commit is contained in:
Jeff Sagal
2016-06-15 20:34:38 -07:00
parent 480bfc1c5f
commit bfae6b3068
11 changed files with 430 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/App.vue → docs/Docs.vue
+5 -5
View File
@@ -8,7 +8,7 @@
<template>
<div class="container">
<div class="col-md-10 col-md-offset-1">
<install></install>
<examples></examples>
<params></params>
</div>
</div>
@@ -19,14 +19,14 @@
/**
* Note that this file (and anything other than src/components/Select.vue)
* has nothing to do with how you use vue-select. These files are used
* for the demo site at http://sagalbot.github.io/vue-select/. They'll
* be moved out of this repo in the very near future to avoid confusion.
* for the demo site at http://sagalbot.github.io/vue-select/.
*/
import Install from './components/Install.vue'
import Examples from './components/Examples.vue'
import Params from './components/Params.vue'
import Ajax from './components/snippets/Ajax.vue'
export default {
components: { Params, Install }
components: { Params, Examples, Ajax }
}
</script>
docs/assets/scss/_demo.scss
+9 -3
View File
@@ -49,13 +49,15 @@ p.lead {
.btn-outline {
background: none;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
border: 3px solid #91ddec;
border: 2px solid #91ddec;
color: #147688;
&.btn-lg {
border-width: 3px;
}
&:hover {
border-color: rgb(65, 184, 131);
background-color: rgba(65, 184, 131, 0.67);
@@ -88,4 +90,8 @@ p.lead {
.accolades a {
margin-left: 0;
margin-right: 5px;
}
.doc-row {
padding: 2em 0;
}
docs/components/Install.vue → docs/components/Examples.vue
+53 -44
View File
@@ -14,48 +14,52 @@
<h2 class="page-header" id="examples">Examples</h2>
<h3 class="page-header">Single/Multiple Selection</h3>
<div class="row">
<div class="col-md-6">
<h4>Single Option Select</h4>
<pre><v-code lang="markup">&#x3C;v-select :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
<v-select :options="countries"></v-select>
</div>
<div class="col-md-6">
<h4>Multiple Option Select</h4>
<pre><v-code lang="markup">&#x3C;v-select multiple :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
<v-select multiple :options="countries"></v-select>
</div>
</div>
<h3 class="page-header">Reactive Options</h3>
<div class="row">
<div class="col-md-6">
<p>When the list of options provided by the parent changes, vue-select will react as you'd expect.</p>
<div style="margin-top:0;" class="radio">
<label>
<input type="radio" name="reactive-options" v-model="reactive" :value="countries">
<v-code lang="markup">&#x3C;v-select :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code>
</label>
<article class="doc-row" id="ex-multiple">
<h3 class="page-header">Single/Multiple Selection</h3>
<div class="row">
<div class="col-md-6">
<h4>Single Option Select</h4>
<pre><v-code lang="markup">&#x3C;v-select :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
<v-select :options="countries"></v-select>
</div>
<div class="radio">
<label>
<input type="radio" name="reactive-options" v-model="reactive" :value="['foo','bar','baz']">
<v-code lang="markup">&#x3C;v-select options=&#x22;['foo','bar','baz']&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code>
</label>
<div class="col-md-6">
<h4>Multiple Option Select</h4>
<pre><v-code lang="markup">&#x3C;v-select multiple :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
<v-select multiple :options="countries"></v-select>
</div>
</div>
</article>
<div class="col-md-6">
<v-select :options="reactive"></v-select>
<article class="doc-row" id="ex-reactive">
<h3 class="page-header">Reactive Options</h3>
<div class="row">
<div class="col-md-6">
<p>When the list of options provided by the parent changes, vue-select will react as you'd expect.</p>
<div style="margin-top:0;" class="radio">
<label>
<input type="radio" name="reactive-options" v-model="reactive" :value="countries">
<v-code lang="markup">&#x3C;v-select :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="reactive-options" v-model="reactive" :value="['foo','bar','baz']">
<v-code lang="markup">&#x3C;v-select options=&#x22;['foo','bar','baz']&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code>
</label>
</div>
</div>
<div class="col-md-6">
<v-select :options="reactive"></v-select>
</div>
</div>
</div>
</article>
<h3 class="page-header">Two-Way Value Syncing</h3>
<div class="row">
<article class="doc-row" id="ex-syncing">
<h3 class="page-header">Two-Way Value Syncing</h3>
<div class="row">
<div class="col-md-6">
<p>The most common use case for vue-select is being able to sync the components value with a parent component. The <code>value</code> property supports two-way data binding to accomplish this.</p>
<p>The <code>.sync</code> data-binding modifier is completely optional. You may use <code>value</code> without a two-way binding to preselect options.</p>
@@ -78,9 +82,11 @@
</div>
</div>
</div>
</article>
<h3 class="page-header">Custom Labels</h3>
<div class="row">
<article class="doc-row" id="ex-labels">
<h3 class="page-header">Custom Labels</h3>
<div class="row">
<div class="col-md-6">
<p>By default when the <code>options</code> array contains objects, <code>vue-select</code> looks for the <code>label</code> key for display. If your data source doesn't contain that key, you can set your own using the <code>label</code> prop.</p>
<p>On this page, the list of countries used in the examples contains <code>value</code> and <code>label</code> properties: <v-code lang="json">{value: "CA", label: "Canada"}</v-code>. In this example, we'll display the country code instead of the label.</p>
@@ -91,9 +97,11 @@
<v-select :options="countries" label="value"></v-select>
</div>
</div>
</article>
<h3 class="page-header">On-Change Callback <small>Vuex Compatibility</small></h3>
<div class="row">
<article class="doc-row" id="ex-vuex">
<h3 class="page-header">On-Change Callback <small>Vuex Compatibility</small></h3>
<div class="row">
<div class="col-md-6">
<p>vue-select provides an <code>onChange</code> property that accepts a callback function. This function is passed the currently selected value(s) as it's only parameter.</p>
<p>This is very useful when integrating with Vuex, as it will allow your to trigger an action to update your vuex state object. Choose a callback and see it in action.</p>
@@ -127,13 +135,12 @@
<v-select :options="countries" :on-change="getCallback"></v-select>
</div>
</div>
</article>
<ajax></ajax>
</section>
</template>
<style type="scss">
</style>
<script>
/**
* Note that this file (and anything other than src/components/Select.vue)
@@ -145,9 +152,11 @@
import simple from '../data/simple'
import vSelect from 'src/components/Select.vue'
import vCode from './Code.vue'
import Ajax from './snippets/Ajax.vue'
import InstallSnippet from './snippets/InstallSnippet.vue'
export default {
components: {vSelect,vCode,InstallSnippet},
components: {vSelect,vCode,InstallSnippet,Ajax},
data () {
return {
countries,
docs/components/GithubSearch.vue
+122
View File
@@ -0,0 +1,122 @@
<style lang="scss">
.github-search {
&.panel-default {
border: none;
}
.panel-heading,
.panel-footer {
background: none;
}
.panel-heading {
padding: 0;
border: none;
}
.panel-body {
display: flex;
align-items: center;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.panel-footer {
border: 1px solid #ddd;
}
p {
margin-bottom: 0;
}
.v-select .dropdown-toggle {
border-color: #ddd;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 5px;
}
.v-select .dropdown-toggle .open-indicator {
top: 15px;
right: 15px;
}
.v-select .selected-tag {
background: none;
border: none;
}
.gravatar {
max-width: 25px;
float: left;
margin-right: 1em;
}
img {
margin-bottom: 0;
}
.badge {
background: #7BC8A4;
}
.list-inline {
margin: 0;
}
}
</style>
<template>
<div>
<div class="github-search panel panel-default">
<div class="panel-heading">
<v-select :debounce="250" :value.sync="repo" :options="options" :on-search="getOptions" placeholder="Search GitHub Repositories..." label="full_name"></v-select>
</div>
<div class="panel-body" v-if="repo">
<img :src="repo.owner.avatar_url" alt="{{ repo.owner.login }}" class="gravatar">
<p>{{ repo.description }}</p>
</div>
<div class="panel-footer" v-if="repo">
<ul class="list-inline" role="tablist">
<li><a href="{{ repo.url }}">Stars <span class="badge">{{ repo.stargazers_count }}</span></a>
</li>
<li><a href="{{ repo.url }}">Forks <span class="badge">{{ repo.forks }}</span></a></li>
<li><a href="{{ repo.url }}">Open Issues
<span class="badge">{{ repo.open_issues_count }}</span></a></li>
</ul>
</div>
</div>
<div v-if="error" class="alert alert-warning" role="alert">
<button type="button" class="close" @click="error = null">
<span aria-hidden="true">&times;</span></button>
{{ error.message }}
</div>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
repo: null,
error: null,
options: null
}
},
methods: {
getOptions(search, loading) {
loading(true)
this.$http.get('https://api.github.com/search/repositories', {q: search})
.then(resp => {
this.options = resp.data.items
loading(false)
})
.catch(err => {
this.error = err.data
loading(false)
})
}
}
}
</script>
docs/components/GithubSearchBasic.vue
+38
View File
@@ -0,0 +1,38 @@
<template>
<div>
<p><v-select :debounce="250" :options="options" :on-search="getOptions" placeholder="Search GitHub Repositories..." label="full_name"></v-select></p>
<div v-if="error" class="alert alert-warning" role="alert">
<button type="button" class="close" @click="error = null">
<span aria-hidden="true">&times;</span></button>
{{ error.message }}
</div>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
repo: null,
error: null,
options: null
}
},
methods: {
getOptions(search, loading) {
loading(true)
this.$http.get('https://api.github.com/search/repositories', {q: search})
.then(resp => {
this.options = resp.data.items
loading(false)
})
.catch(err => {
this.error = err.data
loading(false)
})
}
}
}
</script>
docs/components/snippets/Ajax.vue
+130
View File
@@ -0,0 +1,130 @@
<template>
<article class="example" id="ex-ajax">
<h3 id="ajax" class="page-header">AJAX Remote Option Loading</h3>
<div class="row">
<div class="col-md-6">
<p>
The <code>onSearch</code> prop allows you to load options via ajax in a parent component
when the search text is updated. It is invoked with two parameters, <code>search</code> &amp; <code>loading</code>.
</p>
<h4>onSearch Callback Parameters <small>search, loading</small></h4>
<p>
<code>search</code> is a string containing the current search text.
<code>loading</code> is a function that accepts a boolean value,
and is used to toggle the 'loading' class on the top-level vue-select wrapper.
</p>
<h4>Loading Spinner</h4>
<p>
Vue Select includes a default loading spinner that appears when the loading class is present.
The <code>spinner</code> slot allows you to implement your own spinner.
</p>
<div id="spinner-example" :class="{loading:spinner}">
<button class="btn btn-sm btn-default" @click="spinner = !spinner">Toggle Spinner</button>
<div class="spinner" v-show="spinner">Loading...</div>
</div>
<h4>Debounce Input</h4>
<p>
Vue Select also accepts a <code>debounce</code> prop that can be used to prevent
<code>onSearch</code> from being called until input has completed.
</p>
<h4>Library Agnostic</h4>
<p>
Since Vue.js does not ship with ajax functionality as part of the core library,
it's up to you to process the ajax requests in your parent component.
</p>
</div>
<div class="col-md-6">
<h4>Example <small>GitHub API</small></h4>
<p>In this example,
<a href="https://github.com/vuejs/vue-resource">Vue Resource</a> is used to access the
<a href="https://developer.github.com/v3/">GitHub API</a>.
</p>
<git-hub-search-basic></git-hub-search-basic>
<ajax-example></ajax-example>
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
</div>
</div>
</article>
</template>
<style>
#spinner-example {
max-width: 10em;
display: block;
}
#spinner-example .spinner {
display: none;
display: inline-block;
float: right;
opacity: 0;
font-size: 5px;
text-indent: -9999em;
border-top: .9em solid rgba(100,100,100,.1);
border-right: .9em solid rgba(100,100,100,.1);
border-bottom: .9em solid rgba(100,100,100,.1);
border-left: .9em solid rgba(60,60,60,.45);
transform: translateZ(0);
animation: vSelectSpinner 1.1s infinite linear;
transition: opacity .1s;
}
#spinner-example.loading .spinner {
opacity: 1;
display: block;
}
#spinner-example .spinner,
#spinner-example .spinner:after {
border-radius: 50%;
width: 5em;
height: 5em;
}
@-webkit-keyframes vSelectSpinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes vSelectSpinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script type="text/babel">
import GitHubSearchBasic from 'components/GitHubSearchBasic.vue'
import GitHubSearch from 'components/GitHubSearch.vue'
import AjaxProps from './AjaxProps.vue'
import AjaxExample from './AjaxExample.vue'
export default {
components: {GitHubSearchBasic, GitHubSearch, AjaxProps, AjaxExample},
data() {
return {
basicSource: false,
spinner: false
}
}
}
</script>
docs/components/snippets/AjaxExample.vue
+31
View File
@@ -0,0 +1,31 @@
<template>
<pre><v-code lang="markup">&lt;v-select
:debounce=&quot;250&quot;
:on-search=&quot;getOptions&quot;
:options=&quot;options&quot;
placeholder=&quot;Search GitHub Repositories...&quot;
label=&quot;full_name&quot;
&gt;
&lt;/v-select&gt;</v-code></pre>
<pre><v-code lang="javascript">data() {
return {
options: null
}
},
methods: {
getOptions(search, loading) {
loading(true)
this.$http.get('https://api.github.com/search/repositories', {
q: search
}).then(resp => {
this.options = resp.data.items
loading(false)
})
}
}
</v-code></pre>
</template>
<script type="text/babel">
export default {}
</script>
docs/components/snippets/AjaxProps.vue
+28
View File
@@ -0,0 +1,28 @@
<template>
<pre><v-code lang="javascript">/**
* Accept a callback function that will be run
* when the search text changes. The callback
* will be invoked with these parameters:
* @param {search} String Current search text
* @param {loading} Function(bool) Toggle loading class
*/
onSearch: {
type: Function,
default: false
},
/**
* Milliseconds to wait before invoking this.onSearch().
* Used to prevent sending an AJAX request until input
* has completed.
*/
debounce: {
type: Number,
default: 0
}</v-code></pre>
</template>
<script type="text/babel">
export default {}
</script>
docs/main.js
+12 -3
View File
@@ -1,10 +1,19 @@
import Vue from 'vue'
import App from './App.vue'
import store from './vuex/store'
import 'prismjs'
import Vue from 'vue'
import App from './Docs.vue'
import store from './vuex/store'
import Resource from 'vue-resource'
import vSelect from '../src/components/Select.vue'
import vCode from './components/Code.vue'
Vue.use(Resource)
Vue.component('v-select', vSelect)
Vue.component('v-code', vCode)
Vue.filter('score', function (value) {
return Math.round(value)
})
Vue.config.debug = true
Vue.config.devtools = true
index.html
+1 -1
View File
@@ -71,7 +71,7 @@
</div>
</div>
<a class="btn btn-primary btn-outline" href="https://github.com/sagalbot/vue-select"><span class="octicon octicon-mark-github"></span> View on GitHub</a>
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select"><span class="octicon octicon-mark-github"></span> View on GitHub</a>
</div>
</div>
<a href="#install" class="down-arrow">
src/components/Select.vue
+1
View File
@@ -589,6 +589,7 @@
*/
dropdownClasses() {
return {
open: this.open,
searchable: this.searchable,
loading: this.loading
}