mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-07 07:12:23 +03:00
set typeAheadPointer on hover, reset value when options or multiple change
This commit is contained in:
Jeff Sagal
Vendored
+22008
-4
File diff suppressed because one or more lines are too long
+3
-3
@@ -17,9 +17,9 @@
|
||||
"babelify"
|
||||
]
|
||||
},
|
||||
"repository" : {
|
||||
"type" : "git",
|
||||
"url" : "https://github.com/sagalbot/vue-select.git"
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/sagalbot/vue-select.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^1.0.0"
|
||||
|
||||
+89
-54
@@ -1,41 +1,57 @@
|
||||
<template>
|
||||
<div id="app" class="container">
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<h1>Vue Select</h1>
|
||||
<p class="lead">A simple component that provides similar functionality to Select2 without the overhead of jQuery.</p>
|
||||
<a class="btn btn-primary" href="https://github.com/sagalbot/vue-select">View on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Vue Select</h1>
|
||||
<p class="lead">A simple component that provides similar functionality to Select2 without the overhead of jQuery.</p>
|
||||
<div class="jumbotron" style="background: none;">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3">
|
||||
<v-select
|
||||
:placeholder="placeholder"
|
||||
:value.sync="select"
|
||||
:options="options[optionType]"
|
||||
:multiple="multiple">
|
||||
</v-select>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<v-select
|
||||
:placeholder="placeholder"
|
||||
:value.sync="select"
|
||||
:options="options"
|
||||
:multiple="multiple">
|
||||
</v-select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<pre><strong>Selected:</strong>{{ select | json }}</pre>
|
||||
<!-- <div class="col-md-6">
|
||||
<h4>Output</h4>
|
||||
<pre>{{ select | json }}</pre>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div id="app" class="container">
|
||||
<h4 class="page-header">Component Settings <small>play around with the above vue-select</small></h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Todos:</h4>
|
||||
<ul>
|
||||
<li>Fix layout issue where selected tags & text input overflow outside <code>.dropdown</code>.</li>
|
||||
<li>Clicking the 'caret' icon should toggle the dropdown.</li>
|
||||
<li>Add boolean prop to disable search.</li>
|
||||
<li>Add a 'simple' prop that disables search, and the selected 'tags'. Uses an active class on the selected item(s) while keeping the placeholder constant.</li>
|
||||
</ul>
|
||||
<label class="control-label">Allow Multiple</label>
|
||||
<div class="checkbox">
|
||||
<label class="control-label">
|
||||
<input v-model="multiple" type="checkbox"> True
|
||||
</label>
|
||||
<span class="help-block">Equivalent to the <code>multiple</code> attribute to a <code><select></code>. You'll want to clear any selections you have made before changing this option. It's not one that should be changed after render.</span>
|
||||
</div>
|
||||
|
||||
<label class="control-label">Option Set Type</label><br>
|
||||
<div class="radio">
|
||||
<label for="advanced">
|
||||
<input id="advanced" type="radio" v-model="optionType" value="advanced"> Advanced <code>[{value: 'foo', label: 'Foo'}]</code>
|
||||
</label>
|
||||
|
||||
<label for="simple">
|
||||
<input id="simple" type="radio" v-model="optionType" value="simple"> Simple <code>['foo', 'bar']</code>
|
||||
</label>
|
||||
<span class="help-block">The <code>options</code> property is watched for changes, and the value is reset anytime the options change. This is useful if you have multiple selection boxes that depend on its ancestors values.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<h4>Component Props</h4>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label">Max Height</label>
|
||||
@@ -48,34 +64,50 @@
|
||||
<input type="text" v-model="placeholder" class="form-control">
|
||||
<span class="help-block">Equivalent to the <code>placeholder</code> attribute.</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="control-label">
|
||||
<input v-model="multiple" type="checkbox"> Multiple
|
||||
</label>
|
||||
<span class="help-block">Equivalent to the <code>multiple</code> attribute to a <code><select></code>. You'll want to clear any selections you have made before changing this option. It's not one that should be changed after render.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<!-- <h3>Todos:</h3>
|
||||
<ul>
|
||||
<li>Fix layout issue where selected tags & text input overflow outside <code>.dropdown</code>.</li>
|
||||
<li>Clicking the 'caret' icon should toggle the dropdown.</li>
|
||||
<li>Add boolean prop to disable search.</li>
|
||||
<li>Add a 'simple' prop that disables search, and the selected 'tags'. Uses an active class on the selected item(s) while keeping the placeholder constant.</li>
|
||||
</ul> -->
|
||||
|
||||
<h3>Build Setup</h3>
|
||||
<h5>install dependencies</h5>
|
||||
<p><code>npm install</code></p>
|
||||
<h5>serve with hot reload at localhost:8080</h5>
|
||||
<p><code>npm run dev</code></p>
|
||||
<h5>build for production with minification</h5>
|
||||
<p><code>npm run build</code></p>
|
||||
<h5>lint all *.js and *.vue files</h5>
|
||||
<p><code>npm run lint</code></p>
|
||||
<h5>run unit tests</h5>
|
||||
<p><code>npm test</code></p>
|
||||
<h2 class="page-header">Installing</h2>
|
||||
<p><code>npm install sagalbot/vue-select</code></p>
|
||||
|
||||
<h2 class="page-header">Usage</h2>
|
||||
<pre v-pre>
|
||||
<template>
|
||||
<div id="myApp">
|
||||
<v-select:value.sync="selected" :options="options"></v-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
export default {
|
||||
components: {vSelect},
|
||||
|
||||
data() {
|
||||
return {
|
||||
selected: null,
|
||||
options: ['foo','bar','baz']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<h2 class="page-header">Contributing</h2>
|
||||
<h4>Build Setup <small>built using the <a href="https://github.com/vuejs-templates/webpack">vue-cli webpack template</a></small></h4>
|
||||
<p>install dependencies <br/><code>npm install</code></p>
|
||||
<p>serve with hot reload at localhost:8080 <br><code>npm run dev</code></p>
|
||||
<p>build for production with minification <br><code>npm run build</code></p>
|
||||
<p>lint all *.js and *.vue files <br><code>npm run lint</code></p>
|
||||
<p>run unit tests <br><code>npm test</code></p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -91,14 +123,17 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
// select: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}],
|
||||
select: null,
|
||||
placeholder: 'Choose a Country',
|
||||
multiple: true,
|
||||
maxHeight: '400px',
|
||||
options: require('./countries.js')
|
||||
// options: ['one','two','three']
|
||||
// options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}, {label: 'This is Baz', value: 'baz'}]
|
||||
options: {
|
||||
advanced: require('./countries.js'),
|
||||
simple: require('./simpleCountries.js'),
|
||||
simpler: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}, {label: 'This is Baz', value: 'baz'}]
|
||||
|
||||
},
|
||||
optionType: 'advanced'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -142,7 +142,7 @@
|
||||
</div>
|
||||
|
||||
<ul v-show="open" :transition="transition" :style="{ 'max-height': maxHeight }" class="dropdown-menu animated">
|
||||
<li v-for="option in filteredOptions" :class="{ active: isOptionSelected(option), highlight: $index === typeAheadPointer }">
|
||||
<li v-for="option in filteredOptions" :class="{ active: isOptionSelected(option), highlight: $index === typeAheadPointer }" @mouseover="typeAheadPointer = $index">
|
||||
<a @mousedown.prevent="select(option)">
|
||||
{{ getOptionLabel(option) }}
|
||||
</a>
|
||||
@@ -159,7 +159,6 @@
|
||||
|
||||
props: {
|
||||
value: {
|
||||
// type: Array,
|
||||
twoway: true,
|
||||
required: true
|
||||
},
|
||||
@@ -201,17 +200,23 @@
|
||||
}
|
||||
},
|
||||
|
||||
ready() {
|
||||
this.$watch('open', function(open) {
|
||||
watch: {
|
||||
open( open ) {
|
||||
if( open ) {
|
||||
this.$els.search.focus();
|
||||
} else {
|
||||
this.$els.search.blur();
|
||||
this.typeAheadPointer = 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
options() {
|
||||
this.$set('value', this.multiple ? [] : null)
|
||||
},
|
||||
multiple( val ) {
|
||||
this.$set('value', val ? [] : null)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
select(option) {
|
||||
if (! this.isOptionSelected(option) ) {
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
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"];
|
||||
@@ -4,6 +4,21 @@ import Vue from 'vue'
|
||||
import vSelect from '../../src/components/Select.vue'
|
||||
|
||||
describe('Select.vue', () => {
|
||||
|
||||
// it('sets open to true when search on focus and false on blur', () => {
|
||||
// const vm = new Vue({
|
||||
// template: '<div><v-select :value.sync="value"></v-select></div>',
|
||||
// components: { vSelect },
|
||||
// data: {
|
||||
// value: ['one'],
|
||||
// options: ['one','two','three']
|
||||
// }
|
||||
// }).$mount()
|
||||
//
|
||||
// vm.$children[0].$els.search.focus()
|
||||
// expect(vm.$children[0].$get('open')).toEqual(true)
|
||||
// })
|
||||
|
||||
it('can accept an array with pre-selected values', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :value.sync="value"></v-select></div>',
|
||||
@@ -33,7 +48,7 @@ describe('Select.vue', () => {
|
||||
//
|
||||
// expect(vm.$children[0].$get('value')).toEqual({label: 'This is Foo', value: 'foo'})
|
||||
// })
|
||||
//
|
||||
//
|
||||
|
||||
it('can determine if the value prop is empty', () => {
|
||||
const vm = new Vue({
|
||||
@@ -57,6 +72,34 @@ describe('Select.vue', () => {
|
||||
select.$set('value', null)
|
||||
expect(select.isValueEmpty).toEqual(true)
|
||||
})
|
||||
|
||||
it('resets the selected values when the options property changes', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :value.sync="value"></v-select></div>',
|
||||
components: { vSelect },
|
||||
data: {
|
||||
value: ['one'],
|
||||
options: ['one','two','three']
|
||||
}
|
||||
}).$mount()
|
||||
|
||||
vm.$children[0].options = ['four','five','six']
|
||||
expect(vm.$children[0].$get('value')).toEqual([])
|
||||
})
|
||||
|
||||
it('can retain values present in a new array of options', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :value.sync="value"></v-select></div>',
|
||||
components: { vSelect },
|
||||
data: {
|
||||
value: ['one'],
|
||||
options: ['one','two','three']
|
||||
}
|
||||
}).$mount()
|
||||
|
||||
vm.$children[0].$set('options', ['one','five','six'])
|
||||
expect(vm.$children[0].value).toEqual(['one'])
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user