mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-13 08:32:26 +03:00
remove old docs, update build/dev scripts
This commit is contained in:
Jeff
@@ -1,54 +0,0 @@
|
||||
<style lang="scss">
|
||||
@import 'assets/scss/_demo.scss';
|
||||
@import 'assets/scss/_cyan_theme.scss';
|
||||
@import 'assets/scss/_prism.scss';
|
||||
@import 'assets/scss/_octicons.scss';
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div id="docs" class="container-fluid">
|
||||
<div class="col-md-2 col-md-offset-1">
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<li><a href="#">Install & Usage</a></li>
|
||||
<li><a href="#">Examples</a></li>
|
||||
<li><a href="#">Ajax</a></li>
|
||||
<li><a href="#">Parameters</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<article v-html="install"></article>
|
||||
<article v-html="vModel"></article>
|
||||
<article v-html="single"></article>
|
||||
<article v-html="reactive"></article>
|
||||
<article v-html="labels"></article>
|
||||
<article v-html="ajax"></article>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
// import Examples from './components/Examples.vue'
|
||||
// import Params from './components/Params.vue'
|
||||
// import Ajax from './components/snippets/Ajax.vue'
|
||||
|
||||
export default {
|
||||
// components: { Params, Examples, Ajax }
|
||||
data () {
|
||||
return {
|
||||
install: require('./md/Install.md'),
|
||||
vModel: require('./md/VModel.md'),
|
||||
single: require('./md/SingleMultiple.md'),
|
||||
reactive: require('./md/ReactiveOptions.md'),
|
||||
labels: require('./md/CustomLabels.md'),
|
||||
ajax: require('./md/Ajax.md'),
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<code :class="cssClass"><slot></slot></code>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
export default {
|
||||
props: ['lang'],
|
||||
computed: {
|
||||
cssClass () {
|
||||
return `language-${this.lang}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,192 +0,0 @@
|
||||
<template>
|
||||
<section>
|
||||
<h2 class="page-header" id="install">Install & and Usage</h2>
|
||||
<div class="row row-col-vh">
|
||||
<div class="col-md-7">
|
||||
<install-snippet></install-snippet>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<p>The resulting vue-select, and it's value: <v-code lang="json">{{ install }}</v-code></p>
|
||||
<v-select v-model="install" :options="['foo','bar','baz']"></v-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-header" id="examples">Examples</h2>
|
||||
|
||||
<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"><v-select :options="countries"></v-select></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"><v-select multiple :options="countries"></v-select></v-code></pre>
|
||||
<v-select multiple :options="countries"></v-select>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<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"><v-select :options="countries"></v-select></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"><v-select :options="['foo','bar','baz']"></v-select></v-code>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<v-select :options="reactive"></v-select>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<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>
|
||||
<p>Here we have preselected 'Canada' by setting <code>syncedVal: 'Canada'</code> on the parent component. The buttons below demonstrate how you can set the <code>value</code> from the parent.</p>
|
||||
|
||||
<p>Current value: <v-code>{{ syncedVal }}</v-code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<pre><v-code lang="markup"><v-select :value.sync="syncedVal" :options="countries"></v-select></v-code></pre>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<v-select :options="simple" v-model="syncedVal"></v-select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button @click="syncedVal = 'United States'" class="btn btn-default">Set to United States</button>
|
||||
<button @click="syncedVal = 'Canada'" class="btn btn-default">Set to Canada</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<pre><v-code lang="markup"><v-select label="value" :options="countries"></v-select></v-code></pre>
|
||||
<v-select :options="countries" label="value"></v-select>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="doc-row" id="ex-vuex">
|
||||
<h3 class="page-header">Change Event <small>Vuex Compatibility</small></h3>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p>vue-select provides an <code>change</code> event. 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>
|
||||
|
||||
<div class="form-inline">
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" v-model="callback" value="console"> <code>console.log(val)</code>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" v-model="callback" value="alert"> <code>alert(val)</code>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<pre><v-code lang="markup"><v-select :on-change="consoleCallback" :options="countries"></v-select></v-code></pre>
|
||||
<pre><v-code lang="javascript">methods: {
|
||||
consoleCallback(val) {
|
||||
console.dir(JSON.stringify(val))
|
||||
},
|
||||
|
||||
alertCallback(val) {
|
||||
alert(JSON.stringify(val))
|
||||
}
|
||||
}</v-code></pre>
|
||||
<v-select :options="countries" :on-change="getCallback"></v-select>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- <ajax></ajax> -->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
import countries from '../data/advanced'
|
||||
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,Ajax},
|
||||
// components: {vSelect,vCode,InstallSnippet},
|
||||
data () {
|
||||
return {
|
||||
countries,
|
||||
simple,
|
||||
callback: 'console',
|
||||
reactive: null,
|
||||
install: null,
|
||||
syncedVal: 'Canada'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
consoleCallback(val) {
|
||||
console.dir(JSON.stringify(val))
|
||||
},
|
||||
|
||||
alertCallback(val) {
|
||||
alert(JSON.stringify(val))
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
getCallback() {
|
||||
if( this.callback === 'alert' ) {
|
||||
return this.alertCallback
|
||||
}
|
||||
|
||||
return this.consoleCallback
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,122 +0,0 @@
|
||||
<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" v-model="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">×</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>
|
||||
@@ -1,38 +0,0 @@
|
||||
<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">×</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>
|
||||
@@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="page-header">Parameters</h2>
|
||||
<pre v-pre><code class="language-javascript">props: {
|
||||
|
||||
/**
|
||||
* Contains the currently selected value. Very similar to a
|
||||
* `value` attribute on an <input>. You can listen for changes
|
||||
* using 'change' event using v-on
|
||||
* @type {Object||String||null}
|
||||
*/
|
||||
value: {
|
||||
default: null
|
||||
},
|
||||
|
||||
/**
|
||||
* An array of strings or objects to be used as dropdown choices.
|
||||
* If you are using an array of objects, vue-select will look for
|
||||
* a `label` key (ex. [{label: 'This is Foo', value: 'foo'}]). A
|
||||
* custom label key can be set with the `label` prop.
|
||||
* @type {Array}
|
||||
*/
|
||||
options: {
|
||||
type: Array,
|
||||
default() { return [] },
|
||||
},
|
||||
|
||||
/**
|
||||
* Enable/disable filtering the options.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
searchable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Equivalent to the `multiple` attribute on a `<select>` input.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Equivalent to the `placeholder` attribute on an `<input>`.
|
||||
* @type {String}
|
||||
*/
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets a Vue transition property on the `.dropdown-menu`. vue-select
|
||||
* does not include CSS for transitions, you'll need to add them yourself.
|
||||
* @type {String}
|
||||
*/
|
||||
transition: {
|
||||
type: String,
|
||||
default: 'expand'
|
||||
},
|
||||
|
||||
/**
|
||||
* Enables/disables clearing the search text when an option is selected.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
clearSearchOnSelect: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Close a dropdown when an option is chosen. Set to false to keep the dropdown
|
||||
* open (useful when combined with multi-select, for example)
|
||||
* @type {Boolean}
|
||||
*/
|
||||
closeOnSelect: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Tells vue-select what key to use when generating option labels when
|
||||
* `option` is an object.
|
||||
* @type {String}
|
||||
*/
|
||||
label: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
|
||||
/**
|
||||
* An optional callback function that is called each time the selected
|
||||
* value(s) change. When integrating with Vuex, use this callback to trigger
|
||||
* an action, rather than using :value.sync to retreive the selected value.
|
||||
* @type {Function}
|
||||
* @default {null}
|
||||
*/
|
||||
onChange: {
|
||||
type: Function,
|
||||
default: function (val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the id of the input element.
|
||||
* @type {String}
|
||||
* @default {null}
|
||||
*/
|
||||
inputId: {
|
||||
type: String
|
||||
}
|
||||
|
||||
}
|
||||
</code></pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
export default {}
|
||||
</script>
|
||||
@@ -1,131 +0,0 @@
|
||||
<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> & <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 'docs/components/GitHubSearchBasic.vue'
|
||||
// import GitHubSearch from 'docs/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>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<pre><v-code lang="markup"><v-select
|
||||
:debounce="250"
|
||||
:on-search="getOptions"
|
||||
:options="options"
|
||||
placeholder="Search GitHub Repositories..."
|
||||
label="full_name"
|
||||
>
|
||||
</v-select></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>
|
||||
@@ -1,28 +0,0 @@
|
||||
<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>
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>Install from GitHub via NPM</p>
|
||||
<pre><v-code lang="bash">npm install vue-select</v-code></pre>
|
||||
|
||||
<p>To use the vue-select component in your templates, simply import it, and register it with your component.</p>
|
||||
<pre><v-code lang="markup"><template>
|
||||
<div id="myApp">
|
||||
<v-select :value.sync="selected" :options="options"></v-select>
|
||||
</div>
|
||||
</template>
|
||||
<script></v-code>
|
||||
<v-code lang="javascript">import vSelect from "vue-select"
|
||||
export default {
|
||||
components: {vSelect},
|
||||
|
||||
data() {
|
||||
return {
|
||||
selected: null,
|
||||
options: ['foo','bar','baz']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script></v-code>
|
||||
</pre>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/babel">
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
import vCode from '../Code.vue'
|
||||
export default {
|
||||
components: {
|
||||
vCode
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,246 +0,0 @@
|
||||
module.exports = [
|
||||
{value: "AF", label: "Afghanistan"},
|
||||
{value: "AX", label: "Åland Islands"},
|
||||
{value: "AL", label: "Albania"},
|
||||
{value: "DZ", label: "Algeria"},
|
||||
{value: "AS", label: "American Samoa"},
|
||||
{value: "AD", label: "Andorra"},
|
||||
{value: "AO", label: "Angola"},
|
||||
{value: "AI", label: "Anguilla"},
|
||||
{value: "AQ", label: "Antarctica"},
|
||||
{value: "AG", label: "Antigua and Barbuda"},
|
||||
{value: "AR", label: "Argentina"},
|
||||
{value: "AM", label: "Armenia"},
|
||||
{value: "AW", label: "Aruba"},
|
||||
{value: "AU", label: "Australia"},
|
||||
{value: "AT", label: "Austria"},
|
||||
{value: "AZ", label: "Azerbaijan"},
|
||||
{value: "BS", label: "Bahamas"},
|
||||
{value: "BH", label: "Bahrain"},
|
||||
{value: "BD", label: "Bangladesh"},
|
||||
{value: "BB", label: "Barbados"},
|
||||
{value: "BY", label: "Belarus"},
|
||||
{value: "BE", label: "Belgium"},
|
||||
{value: "BZ", label: "Belize"},
|
||||
{value: "BJ", label: "Benin"},
|
||||
{value: "BM", label: "Bermuda"},
|
||||
{value: "BT", label: "Bhutan"},
|
||||
{value: "BO", label: "Bolivia"},
|
||||
{value: "BA", label: "Bosnia and Herzegovina"},
|
||||
{value: "BW", label: "Botswana"},
|
||||
{value: "BV", label: "Bouvet Island"},
|
||||
{value: "BR", label: "Brazil"},
|
||||
{value: "IO", label: "British Indian Ocean Territory"},
|
||||
{value: "BN", label: "Brunei Darussalam"},
|
||||
{value: "BG", label: "Bulgaria"},
|
||||
{value: "BF", label: "Burkina Faso"},
|
||||
{value: "BI", label: "Burundi"},
|
||||
{value: "KH", label: "Cambodia"},
|
||||
{value: "CM", label: "Cameroon"},
|
||||
{value: "CA", label: "Canada"},
|
||||
{value: "CV", label: "Cape Verde"},
|
||||
{value: "KY", label: "Cayman Islands"},
|
||||
{value: "CF", label: "Central African Republic"},
|
||||
{value: "TD", label: "Chad"},
|
||||
{value: "CL", label: "Chile"},
|
||||
{value: "CN", label: "China"},
|
||||
{value: "CX", label: "Christmas Island"},
|
||||
{value: "CC", label: "Cocos (Keeling) Islands"},
|
||||
{value: "CO", label: "Colombia"},
|
||||
{value: "KM", label: "Comoros"},
|
||||
{value: "CG", label: "Congo"},
|
||||
{value: "CD", label: "Congo, The Democratic Republic of The"},
|
||||
{value: "CK", label: "Cook Islands"},
|
||||
{value: "CR", label: "Costa Rica"},
|
||||
{value: "CI", label: "Cote D'ivoire"},
|
||||
{value: "HR", label: "Croatia"},
|
||||
{value: "CU", label: "Cuba"},
|
||||
{value: "CY", label: "Cyprus"},
|
||||
{value: "CZ", label: "Czech Republic"},
|
||||
{value: "DK", label: "Denmark"},
|
||||
{value: "DJ", label: "Djibouti"},
|
||||
{value: "DM", label: "Dominica"},
|
||||
{value: "DO", label: "Dominican Republic"},
|
||||
{value: "EC", label: "Ecuador"},
|
||||
{value: "EG", label: "Egypt"},
|
||||
{value: "SV", label: "El Salvador"},
|
||||
{value: "GQ", label: "Equatorial Guinea"},
|
||||
{value: "ER", label: "Eritrea"},
|
||||
{value: "EE", label: "Estonia"},
|
||||
{value: "ET", label: "Ethiopia"},
|
||||
{value: "FK", label: "Falkland Islands (Malvinas)"},
|
||||
{value: "FO", label: "Faroe Islands"},
|
||||
{value: "FJ", label: "Fiji"},
|
||||
{value: "FI", label: "Finland"},
|
||||
{value: "FR", label: "France"},
|
||||
{value: "GF", label: "French Guiana"},
|
||||
{value: "PF", label: "French Polynesia"},
|
||||
{value: "TF", label: "French Southern Territories"},
|
||||
{value: "GA", label: "Gabon"},
|
||||
{value: "GM", label: "Gambia"},
|
||||
{value: "GE", label: "Georgia"},
|
||||
{value: "DE", label: "Germany"},
|
||||
{value: "GH", label: "Ghana"},
|
||||
{value: "GI", label: "Gibraltar"},
|
||||
{value: "GR", label: "Greece"},
|
||||
{value: "GL", label: "Greenland"},
|
||||
{value: "GD", label: "Grenada"},
|
||||
{value: "GP", label: "Guadeloupe"},
|
||||
{value: "GU", label: "Guam"},
|
||||
{value: "GT", label: "Guatemala"},
|
||||
{value: "GG", label: "Guernsey"},
|
||||
{value: "GN", label: "Guinea"},
|
||||
{value: "GW", label: "Guinea-bissau"},
|
||||
{value: "GY", label: "Guyana"},
|
||||
{value: "HT", label: "Haiti"},
|
||||
{value: "HM", label: "Heard Island and Mcdonald Islands"},
|
||||
{value: "VA", label: "Holy See (Vatican City State)"},
|
||||
{value: "HN", label: "Honduras"},
|
||||
{value: "HK", label: "Hong Kong"},
|
||||
{value: "HU", label: "Hungary"},
|
||||
{value: "IS", label: "Iceland"},
|
||||
{value: "IN", label: "India"},
|
||||
{value: "ID", label: "Indonesia"},
|
||||
{value: "IR", label: "Iran, Islamic Republic of"},
|
||||
{value: "IQ", label: "Iraq"},
|
||||
{value: "IE", label: "Ireland"},
|
||||
{value: "IM", label: "Isle of Man"},
|
||||
{value: "IL", label: "Israel"},
|
||||
{value: "IT", label: "Italy"},
|
||||
{value: "JM", label: "Jamaica"},
|
||||
{value: "JP", label: "Japan"},
|
||||
{value: "JE", label: "Jersey"},
|
||||
{value: "JO", label: "Jordan"},
|
||||
{value: "KZ", label: "Kazakhstan"},
|
||||
{value: "KE", label: "Kenya"},
|
||||
{value: "KI", label: "Kiribati"},
|
||||
{value: "KP", label: "Korea, Democratic People's Republic of"},
|
||||
{value: "KR", label: "Korea, Republic of"},
|
||||
{value: "KW", label: "Kuwait"},
|
||||
{value: "KG", label: "Kyrgyzstan"},
|
||||
{value: "LA", label: "Lao People's Democratic Republic"},
|
||||
{value: "LV", label: "Latvia"},
|
||||
{value: "LB", label: "Lebanon"},
|
||||
{value: "LS", label: "Lesotho"},
|
||||
{value: "LR", label: "Liberia"},
|
||||
{value: "LY", label: "Libyan Arab Jamahiriya"},
|
||||
{value: "LI", label: "Liechtenstein"},
|
||||
{value: "LT", label: "Lithuania"},
|
||||
{value: "LU", label: "Luxembourg"},
|
||||
{value: "MO", label: "Macao"},
|
||||
{value: "MK", label: "Macedonia, The Former Yugoslav Republic of"},
|
||||
{value: "MG", label: "Madagascar"},
|
||||
{value: "MW", label: "Malawi"},
|
||||
{value: "MY", label: "Malaysia"},
|
||||
{value: "MV", label: "Maldives"},
|
||||
{value: "ML", label: "Mali"},
|
||||
{value: "MT", label: "Malta"},
|
||||
{value: "MH", label: "Marshall Islands"},
|
||||
{value: "MQ", label: "Martinique"},
|
||||
{value: "MR", label: "Mauritania"},
|
||||
{value: "MU", label: "Mauritius"},
|
||||
{value: "YT", label: "Mayotte"},
|
||||
{value: "MX", label: "Mexico"},
|
||||
{value: "FM", label: "Micronesia, Federated States of"},
|
||||
{value: "MD", label: "Moldova, Republic of"},
|
||||
{value: "MC", label: "Monaco"},
|
||||
{value: "MN", label: "Mongolia"},
|
||||
{value: "ME", label: "Montenegro"},
|
||||
{value: "MS", label: "Montserrat"},
|
||||
{value: "MA", label: "Morocco"},
|
||||
{value: "MZ", label: "Mozambique"},
|
||||
{value: "MM", label: "Myanmar"},
|
||||
{value: "NA", label: "Namibia"},
|
||||
{value: "NR", label: "Nauru"},
|
||||
{value: "NP", label: "Nepal"},
|
||||
{value: "NL", label: "Netherlands"},
|
||||
{value: "AN", label: "Netherlands Antilles"},
|
||||
{value: "NC", label: "New Caledonia"},
|
||||
{value: "NZ", label: "New Zealand"},
|
||||
{value: "NI", label: "Nicaragua"},
|
||||
{value: "NE", label: "Niger"},
|
||||
{value: "NG", label: "Nigeria"},
|
||||
{value: "NU", label: "Niue"},
|
||||
{value: "NF", label: "Norfolk Island"},
|
||||
{value: "MP", label: "Northern Mariana Islands"},
|
||||
{value: "NO", label: "Norway"},
|
||||
{value: "OM", label: "Oman"},
|
||||
{value: "PK", label: "Pakistan"},
|
||||
{value: "PW", label: "Palau"},
|
||||
{value: "PS", label: "Palestinian Territory, Occupied"},
|
||||
{value: "PA", label: "Panama"},
|
||||
{value: "PG", label: "Papua New Guinea"},
|
||||
{value: "PY", label: "Paraguay"},
|
||||
{value: "PE", label: "Peru"},
|
||||
{value: "PH", label: "Philippines"},
|
||||
{value: "PN", label: "Pitcairn"},
|
||||
{value: "PL", label: "Poland"},
|
||||
{value: "PT", label: "Portugal"},
|
||||
{value: "PR", label: "Puerto Rico"},
|
||||
{value: "QA", label: "Qatar"},
|
||||
{value: "RE", label: "Reunion"},
|
||||
{value: "RO", label: "Romania"},
|
||||
{value: "RU", label: "Russian Federation"},
|
||||
{value: "RW", label: "Rwanda"},
|
||||
{value: "SH", label: "Saint Helena"},
|
||||
{value: "KN", label: "Saint Kitts and Nevis"},
|
||||
{value: "LC", label: "Saint Lucia"},
|
||||
{value: "PM", label: "Saint Pierre and Miquelon"},
|
||||
{value: "VC", label: "Saint Vincent and The Grenadines"},
|
||||
{value: "WS", label: "Samoa"},
|
||||
{value: "SM", label: "San Marino"},
|
||||
{value: "ST", label: "Sao Tome and Principe"},
|
||||
{value: "SA", label: "Saudi Arabia"},
|
||||
{value: "SN", label: "Senegal"},
|
||||
{value: "RS", label: "Serbia"},
|
||||
{value: "SC", label: "Seychelles"},
|
||||
{value: "SL", label: "Sierra Leone"},
|
||||
{value: "SG", label: "Singapore"},
|
||||
{value: "SK", label: "Slovakia"},
|
||||
{value: "SI", label: "Slovenia"},
|
||||
{value: "SB", label: "Solomon Islands"},
|
||||
{value: "SO", label: "Somalia"},
|
||||
{value: "ZA", label: "South Africa"},
|
||||
{value: "GS", label: "South Georgia and The South Sandwich Islands"},
|
||||
{value: "ES", label: "Spain"},
|
||||
{value: "LK", label: "Sri Lanka"},
|
||||
{value: "SD", label: "Sudan"},
|
||||
{value: "SR", label: "Suriname"},
|
||||
{value: "SJ", label: "Svalbard and Jan Mayen"},
|
||||
{value: "SZ", label: "Swaziland"},
|
||||
{value: "SE", label: "Sweden"},
|
||||
{value: "CH", label: "Switzerland"},
|
||||
{value: "SY", label: "Syrian Arab Republic"},
|
||||
{value: "TW", label: "Taiwan, Province of China"},
|
||||
{value: "TJ", label: "Tajikistan"},
|
||||
{value: "TZ", label: "Tanzania, United Republic of"},
|
||||
{value: "TH", label: "Thailand"},
|
||||
{value: "TL", label: "Timor-leste"},
|
||||
{value: "TG", label: "Togo"},
|
||||
{value: "TK", label: "Tokelau"},
|
||||
{value: "TO", label: "Tonga"},
|
||||
{value: "TT", label: "Trinidad and Tobago"},
|
||||
{value: "TN", label: "Tunisia"},
|
||||
{value: "TR", label: "Turkey"},
|
||||
{value: "TM", label: "Turkmenistan"},
|
||||
{value: "TC", label: "Turks and Caicos Islands"},
|
||||
{value: "TV", label: "Tuvalu"},
|
||||
{value: "UG", label: "Uganda"},
|
||||
{value: "UA", label: "Ukraine"},
|
||||
{value: "AE", label: "United Arab Emirates"},
|
||||
{value: "GB", label: "United Kingdom"},
|
||||
{value: "US", label: "United States"},
|
||||
{value: "UM", label: "United States Minor Outlying Islands"},
|
||||
{value: "UY", label: "Uruguay"},
|
||||
{value: "UZ", label: "Uzbekistan"},
|
||||
{value: "VU", label: "Vanuatu"},
|
||||
{value: "VE", label: "Venezuela"},
|
||||
{value: "VN", label: "Viet Nam"},
|
||||
{value: "VG", label: "Virgin Islands, British"},
|
||||
{value: "VI", label: "Virgin Islands, U.S."},
|
||||
{value: "WF", label: "Wallis and Futuna"},
|
||||
{value: "EH", label: "Western Sahara"},
|
||||
{value: "YE", label: "Yemen"},
|
||||
{value: "ZM", label: "Zambia"},
|
||||
{value: "ZW", label: "Zimbabwe"},
|
||||
];
|
||||
@@ -1 +0,0 @@
|
||||
module.exports = ["Afghanistan","Åland Islands","Albania","Algeria","American Samoa","Andorra","Angola","Anguilla","Antarctica","Antigua and Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia and Herzegovina","Botswana","Bouvet Island","Brazil","British Indian Ocean Territory","Brunei Darussalam","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central African Republic","Chad","Chile","China","Christmas Island","Cocos (Keeling) Islands","Colombia","Comoros","Congo","Congo, The Democratic Republic of The","Cook Islands","Costa Rica","Cote D'ivoire","Croatia","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands (Malvinas)","Faroe Islands","Fiji","Finland","France","French Guiana","French Polynesia","French Southern Territories","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guadeloupe","Guam","Guatemala","Guernsey","Guinea","Guinea-bissau","Guyana","Haiti","Heard Island and Mcdonald Islands","Holy See (Vatican City State)","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran, Islamic Republic of","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Korea, Democratic People's Republic of","Korea, Republic of","Kuwait","Kyrgyzstan","Lao People's Democratic Republic","Latvia","Lebanon","Lesotho","Liberia","Libyan Arab Jamahiriya","Liechtenstein","Lithuania","Luxembourg","Macao","Macedonia, The Former Yugoslav Republic of","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Martinique","Mauritania","Mauritius","Mayotte","Mexico","Micronesia, Federated States of","Moldova, Republic of","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauru","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","Niue","Norfolk Island","Northern Mariana Islands","Norway","Oman","Pakistan","Palau","Palestinian Territory, Occupied","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Pitcairn","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russian Federation","Rwanda","Saint Helena","Saint Kitts and Nevis","Saint Lucia","Saint Pierre and Miquelon","Saint Vincent and The Grenadines","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Georgia and The South Sandwich Islands","Spain","Sri Lanka","Sudan","Suriname","Svalbard and Jan Mayen","Swaziland","Sweden","Switzerland","Syrian Arab Republic","Taiwan, Province of China","Tajikistan","Tanzania, United Republic of","Thailand","Timor-leste","Togo","Tokelau","Tonga","Trinidad and Tobago","Tunisia","Turkey","Turkmenistan","Turks and Caicos Islands","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States","United States Minor Outlying Islands","Uruguay","Uzbekistan","Vanuatu","Venezuela","Viet Nam","Virgin Islands, British","Virgin Islands, U.S.","Wallis and Futuna","Western Sahara","Yemen","Zambia","Zimbabwe"];
|
||||
@@ -1,92 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Vue Select | VueJS Select2 Component</title>
|
||||
|
||||
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono" rel="stylesheet" type="text/css">
|
||||
<link href="//fonts.googleapis.com/css?family=Dosis:300&text=Vue Select" rel="stylesheet" type="text/css">
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
|
||||
|
||||
<meta name="title" content="Vue Select | VueJS Select2/Chosen Component">
|
||||
<meta name="description" content="A well-tested, native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
|
||||
|
||||
<link rel="icon" href="static/vue-logo.png" type="image/png">
|
||||
<meta property="og:image" content="static/vue-logo.png">
|
||||
<meta property="twitter:image" content="static/vue-logo.png">
|
||||
|
||||
<meta name="description" content="A native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
|
||||
<meta property="og:description" content="A native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
|
||||
<meta property="twitter:description" content="A native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
|
||||
|
||||
<meta property="twitter:title" content="Vue Select | VueJS Select2/Chosen Component">
|
||||
<meta property="og:title" content="Vue Select | VueJS Select2/Chosen Component">
|
||||
<meta property="og:site_name" content="Vue Select | VueJS Select2/Chosen Component">
|
||||
<meta property="og:url" content="http://sagalbot.github.io/vue-select/">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="jumbotron jumbotron-top">
|
||||
<div class="container">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
|
||||
<h1>Vue Select</h1>
|
||||
|
||||
<p class="accolades lead">
|
||||
<a href="https://travis-ci.org/sagalbot/vue-select"><img src="https://img.shields.io/travis/sagalbot/vue-select.svg?style=flat-square" alt="Build Status"></a>
|
||||
<a href="https://codeclimate.com/github/sagalbot/vue-select"><img src="https://img.shields.io/codeclimate/coverage/github/sagalbot/vue-select.svg?style=flat-square" alt="Code Coverage"></a>
|
||||
<a href="https://gemnasium.com/github.com/sagalbot/vue-select"><img src="https://img.shields.io/gemnasium/sagalbot/vue-select.svg?style=flat-square" alt="No Dependencies"></a>
|
||||
<img src="https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square" alt="MIT License">
|
||||
<img src="https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square" alt="Current Release">
|
||||
</p>
|
||||
|
||||
<p class="lead">A native Vue.js select component that provides similar functionality to Select2/Chosen without the overhead of jQuery.</p>
|
||||
|
||||
<v-select
|
||||
id="v-select"
|
||||
:placeholder="placeholder"
|
||||
:options="options"
|
||||
multiple
|
||||
>
|
||||
</v-select>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-md-offset-3">
|
||||
<ul class="list-vue">
|
||||
<li>Fully Reactive</li>
|
||||
<li>Tagging Support <small>v1.1.0</small></li>
|
||||
<li>Works with Vuex</li>
|
||||
<li>Zero dependencies</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ul class="list-vue">
|
||||
<li>+95% Test Coverage</li>
|
||||
<li>Select Single/Multiple</li>
|
||||
<li>Typeahead Suggestions</li>
|
||||
<li>Bootstrap Friendly Markup</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Install, Examples & Documentation
|
||||
<i role="presentation" class="glyphicon glyphicon-chevron-down"></i>
|
||||
</a>
|
||||
</div>
|
||||
<docs></docs>
|
||||
</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-12818324-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,36 +0,0 @@
|
||||
import 'prismjs'
|
||||
import Vue from 'vue'
|
||||
import Docs 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'
|
||||
import countries from './data/advanced'
|
||||
|
||||
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
|
||||
|
||||
import { setSelected, toggleMultiple, setPlaceholder, toggleOptionType } from './vuex/actions'
|
||||
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
store,
|
||||
components: { Docs },
|
||||
data () {
|
||||
return {
|
||||
options: countries,
|
||||
placeholder: 'Choose a country..',
|
||||
}
|
||||
}
|
||||
})
|
||||
+3
-1
@@ -10,8 +10,10 @@
|
||||
"start": "npm run dev",
|
||||
"dev": "node build/dev-server.js",
|
||||
"dev:homepage": "node build/dev-server.js --docs",
|
||||
"dev:docs": "gitbook serve docs/gitbook",
|
||||
"dev:docs": "gitbook serve",
|
||||
"build": "node build/build.js",
|
||||
"build:homepage": "node build/build.js --homepage",
|
||||
"build:docs": "gitbook build",
|
||||
"lint": "eslint --ext .js,.vue src test/unit/specs",
|
||||
"test": "karma start test/unit/karma.conf.js --single-run",
|
||||
"test-watch": "karma start test/unit/karma.conf.js --single-run=false --auto-watch=true"
|
||||
|
||||
Reference in New Issue
Block a user