mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-07 07:12:23 +03:00
Merge branch 'master' into umd
# Conflicts: # src/components/Select.vue
This commit is contained in:
Jeff Sagal
@@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<code :class="class"><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: {
|
||||
class () {
|
||||
return `language-${this.lang}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,182 +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 | json }}</v-code></p>
|
||||
<v-select :value.sync="install" :options="['foo','bar','baz']"></v-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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"><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>
|
||||
|
||||
<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>
|
||||
|
||||
<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 | json }}</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" :value.sync="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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style type="scss">
|
||||
|
||||
</style>
|
||||
|
||||
<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 '../countries/advanced'
|
||||
import simple from '../countries/simple'
|
||||
import vSelect from './Select.vue'
|
||||
import vCode from './Code.vue'
|
||||
import InstallSnippet from './snippets/InstallSnippet.vue'
|
||||
export default {
|
||||
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,105 +0,0 @@
|
||||
<template>
|
||||
<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 &lt;input&gt;. In most cases, you'll want
|
||||
* to set this as a two-way binding, using :value.sync. However,
|
||||
* this will not work with Vuex, in which case you'll need to use
|
||||
* the onChange callback property.
|
||||
* @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
|
||||
},
|
||||
|
||||
/**
|
||||
* 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: Function
|
||||
}
|
||||
</code></pre>
|
||||
</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,5 +1,5 @@
|
||||
<style>
|
||||
.v-select.dropdown {
|
||||
.v-select {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -12,6 +12,12 @@
|
||||
pointer-events: all;
|
||||
transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
|
||||
transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
|
||||
opacity: 1;
|
||||
transition: opacity .1s;
|
||||
}
|
||||
|
||||
.v-select.loading .open-indicator {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.v-select .open-indicator:before {
|
||||
@@ -116,6 +122,47 @@
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.v-select .spinner {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
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;
|
||||
}
|
||||
.v-select.loading .spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-select .spinner,
|
||||
.v-select .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>
|
||||
|
||||
<template>
|
||||
@@ -134,8 +181,9 @@
|
||||
|
||||
<input
|
||||
v-el:search
|
||||
v-show="searchable"
|
||||
:debounce="debounce"
|
||||
v-model="search"
|
||||
v-show="searchable"
|
||||
@keydown.delete="maybeDeleteValue"
|
||||
@keyup.esc="onEscape"
|
||||
@keydown.up.prevent="typeAheadUp"
|
||||
@@ -150,6 +198,10 @@
|
||||
>
|
||||
|
||||
<i v-el:open-indicator role="presentation" class="open-indicator"></i>
|
||||
|
||||
<slot name="spinner">
|
||||
<div class="spinner" v-show="onSearch && loading">Loading...</div>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<ul v-el:dropdown-menu v-show="open" :transition="transition" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
|
||||
@@ -170,9 +222,10 @@
|
||||
<script type="text/babel">
|
||||
import pointerScroll from '../mixins/pointerScroll'
|
||||
import typeAheadPointer from '../mixins/typeAheadPointer'
|
||||
import ajax from '../mixins/ajax'
|
||||
|
||||
export default {
|
||||
mixins: [pointerScroll, typeAheadPointer],
|
||||
mixins: [pointerScroll, typeAheadPointer, ajax],
|
||||
|
||||
props: {
|
||||
/**
|
||||
@@ -492,7 +545,8 @@
|
||||
dropdownClasses() {
|
||||
return {
|
||||
open: this.open,
|
||||
searchable: this.searchable
|
||||
searchable: this.searchable,
|
||||
loading: this.loading
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<p>Install from GitHub via NPM</p>
|
||||
<pre><v-code lang="bash">npm install sagalbot/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>
|
||||
</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>
|
||||
Reference in New Issue
Block a user