mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +03:00
Code Activity

Merge branch 'master' of https://github.com/sagalbot/vue-select into patch-3

Browse Source
This commit is contained in:
Steven Kalt
2017-10-26 11:28:07 -04:00
parent 04f77fedb2 f26822cee6
commit 9a74882904
6 changed files with 127 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev.html
+17 -6
View File
@@ -9,17 +9,15 @@
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">--> <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> --> <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> -->
<style> <style>
html,
body,
#app {
height: 100vh;
}
#app { #app {
height: 95vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
flex-wrap: wrap;
align-content: center;
} }
.v-select { .v-select {
@@ -32,6 +30,7 @@
<body> <body>
<div id="app"> <div id="app">
<v-select placeholder="default" :options="options"></v-select> <v-select placeholder="default" :options="options"></v-select>
<v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>
<v-select placeholder="multiple" multiple :options="options"></v-select> <v-select placeholder="multiple" multiple :options="options"></v-select>
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select> <v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select> <v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
@@ -39,6 +38,18 @@
<v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select> <v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>
<v-select placeholder="unsearchable" :options="options" :searchable="false"></v-select> <v-select placeholder="unsearchable" :options="options" :searchable="false"></v-select>
<v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select> <v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
<v-select placeholder="custom option template" :options="options" multiple>
<template slot="selected-option" scope="option">
<img :src='"https://www.kidlink.org/icons/f0-" + option.value.toLowerCase() + ".gif"'/>
{{option.label}}
</template>
<template slot="option" scope="option">
<img :src='"https://www.kidlink.org/icons/f0-" + option.value.toLowerCase() + ".gif"'/>
{{option.label}} ({{option.value}})
</template>
</v-select>
<v-select disabled placeholder="disabled" value="disabled"></v-select>
<v-select disabled multiple placeholder="disabled" :value="['disabled', 'multiple']"></v-select>
</div> </div>
</body> </body>
dist/vue-select.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
dist/vue-select.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
package.json
+2 -7
View File
@@ -1,12 +1,13 @@
{ {
"name": "vue-select", "name": "vue-select",
"version": "2.2.0", "version": "2.3.0",
"description": "A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.", "description": "A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.",
"author": "Jeff Sagal <sagalbot@gmail.com>", "author": "Jeff Sagal <sagalbot@gmail.com>",
"private": false, "private": false,
"main": "dist/vue-select.js", "main": "dist/vue-select.js",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"start": "npm run dev",
"dev": "node build/dev-server.js", "dev": "node build/dev-server.js",
"dev:docs": "node build/dev-server.js --docs", "dev:docs": "node build/dev-server.js --docs",
"build": "node build/build.js", "build": "node build/build.js",
@@ -14,12 +15,6 @@
"test": "karma start test/unit/karma.conf.js --single-run", "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" "test-watch": "karma start test/unit/karma.conf.js --single-run=false --auto-watch=true"
}, },
"browserify": {
"transform": [
"vueify",
"babelify"
]
},
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/sagalbot/vue-select.git" "url": "https://github.com/sagalbot/vue-select.git"
src/components/Select.vue
+67 -19
View File
@@ -3,12 +3,26 @@
position: relative; position: relative;
font-family: sans-serif; font-family: sans-serif;
} }
.v-select, .v-select,
.v-select * { .v-select * {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
/* Rtl support */
.v-select.rtl .open-indicator {
left: 10px;
right: auto;
}
.v-select.rtl .selected-tag {
float: right;
margin-right: 3px;
margin-left: 1px;
}
.v-select.rtl .dropdown-menu {
text-align: right;
}
/* Open Indicator */ /* Open Indicator */
.v-select .open-indicator { .v-select .open-indicator {
position: absolute; position: absolute;
@@ -20,7 +34,6 @@
transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855); 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); transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
opacity: 1; opacity: 1;
transition: opacity .1s;
height: 20px; width: 10px; height: 20px; width: 10px;
} }
.v-select .open-indicator:before { .v-select .open-indicator:before {
@@ -58,7 +71,6 @@
border: 1px solid rgba(60, 60, 60, .26); border: 1px solid rgba(60, 60, 60, .26);
border-radius: 4px; border-radius: 4px;
white-space: normal; white-space: normal;
transition: border-radius .25s;
} }
.v-select .dropdown-toggle:after { .v-select .dropdown-toggle:after {
visibility: hidden; visibility: hidden;
@@ -177,10 +189,6 @@
float: left; float: left;
clear: none; clear: none;
} }
/* Search Input States */
.v-select.unsearchable input[type="search"] {
max-width: 1px;
}
/* List Items */ /* List Items */
.v-select li { .v-select li {
line-height: 1.42857143; /* Normalize line height */ line-height: 1.42857143; /* Normalize line height */
@@ -233,6 +241,16 @@
width: 5em; width: 5em;
height: 5em; height: 5em;
} }
/* Disabled state */
.v-select.disabled .dropdown-toggle,
.v-select.disabled .dropdown-toggle input,
.v-select.disabled .selected-tag .close,
.v-select.disabled .open-indicator {
cursor: not-allowed;
background-color: rgb(248, 248, 248);
}
/* Loading Spinner States */ /* Loading Spinner States */
.v-select.loading .spinner { .v-select.loading .spinner {
opacity: 1; opacity: 1;
@@ -266,12 +284,14 @@
</style> </style>
<template> <template>
<div class="dropdown v-select" :class="dropdownClasses"> <div :dir="dir" class="dropdown v-select" :class="dropdownClasses">
<div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle"> <div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix']">
<span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index"> <span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
{{ getOptionLabel(option) }} <slot name="selected-option" v-bind="option">
<button v-if="multiple" @click="deselect(option)" type="button" class="close" aria-label="Remove option"> {{ getOptionLabel(option) }}
</slot>
<button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</span> </span>
@@ -283,11 +303,12 @@
@keyup.esc="onEscape" @keyup.esc="onEscape"
@keydown.up.prevent="typeAheadUp" @keydown.up.prevent="typeAheadUp"
@keydown.down.prevent="typeAheadDown" @keydown.down.prevent="typeAheadDown"
@keyup.enter.prevent="typeAheadSelect" @keydown.enter.prevent="typeAheadSelect"
@blur="onSearchBlur" @blur="onSearchBlur"
@focus="onSearchFocus" @focus="onSearchFocus"
type="search" type="search"
class="form-control" class="form-control"
:disabled="disabled"
:placeholder="searchPlaceholder" :placeholder="searchPlaceholder"
:readonly="!searchable" :readonly="!searchable"
:style="{ width: isValueEmpty ? '100%' : 'auto' }" :style="{ width: isValueEmpty ? '100%' : 'auto' }"
@@ -306,7 +327,9 @@
<ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }"> <ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
<li v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index"> <li v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
<a @mousedown.prevent="select(option)"> <a @mousedown.prevent="select(option)">
<slot name="option" v-bind="option">
{{ getOptionLabel(option) }} {{ getOptionLabel(option) }}
</slot>
</a> </a>
</li> </li>
<li v-if="!filteredOptions.length" class="no-options"> <li v-if="!filteredOptions.length" class="no-options">
@@ -341,7 +364,7 @@
* If you are using an array of objects, vue-select will look for * If you are using an array of objects, vue-select will look for
* a `label` key (ex. [{label: 'This is Foo', value: 'foo'}]). A * a `label` key (ex. [{label: 'This is Foo', value: 'foo'}]). A
* custom label key can be set with the `label` prop. * custom label key can be set with the `label` prop.
* @type {Object} * @type {Array}
*/ */
options: { options: {
type: Array, type: Array,
@@ -350,6 +373,15 @@
}, },
}, },
/**
* Disable the entire component.
* @type {Boolean}
*/
disabled: {
type: Boolean,
default: false
},
/** /**
* Sets the max-height property on the dropdown list. * Sets the max-height property on the dropdown list.
* @deprecated * @deprecated
@@ -371,7 +403,7 @@
/** /**
* Equivalent to the `multiple` attribute on a `<select>` input. * Equivalent to the `multiple` attribute on a `<select>` input.
* @type {Object} * @type {Boolean}
*/ */
multiple: { multiple: {
type: Boolean, type: Boolean,
@@ -380,7 +412,7 @@
/** /**
* Equivalent to the `placeholder` attribute on an `<input>`. * Equivalent to the `placeholder` attribute on an `<input>`.
* @type {Object} * @type {String}
*/ */
placeholder: { placeholder: {
type: String, type: String,
@@ -429,6 +461,7 @@
/** /**
* Callback to generate the label text. If {option} * Callback to generate the label text. If {option}
* is an object, returns option[this.label] by default. * is an object, returns option[this.label] by default.
* @type {Function}
* @param {Object || String} option * @param {Object || String} option
* @return {String} * @return {String}
*/ */
@@ -467,7 +500,7 @@
* value(s) change. When integrating with Vuex, use this callback to trigger * value(s) change. When integrating with Vuex, use this callback to trigger
* an action, rather than using :value.sync to retreive the selected value. * an action, rather than using :value.sync to retreive the selected value.
* @type {Function} * @type {Function}
* @default {null} * @param {Object || String} val
*/ */
onChange: { onChange: {
type: Function, type: Function,
@@ -535,7 +568,18 @@
*/ */
inputId: { inputId: {
type: String type: String
} },
/**
* Sets RTL support. Accepts 'ltr', 'rtl', 'auto'.
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
* @type {String}
* @default 'auto'
*/
dir: {
type: String,
default: 'auto'
},
}, },
data() { data() {
@@ -689,8 +733,10 @@
if (this.open) { if (this.open) {
this.$refs.search.blur() // dropdown will close on blur this.$refs.search.blur() // dropdown will close on blur
} else { } else {
this.open = true if (!this.disabled) {
this.$refs.search.focus() this.open = true
this.$refs.search.focus()
}
} }
} }
}, },
@@ -814,7 +860,9 @@
searching: this.searching, searching: this.searching,
searchable: this.searchable, searchable: this.searchable,
unsearchable: !this.searchable, unsearchable: !this.searchable,
loading: this.mutableLoading loading: this.mutableLoading,
rtl: this.dir === 'rtl',
disabled: this.disabled
} }
}, },
test/unit/specs/Select.spec.js
+36 -1
View File
@@ -65,7 +65,7 @@ function searchSubmit(vm, search = false) {
vm.$children[0].search = search vm.$children[0].search = search
} }
trigger(vm.$children[0].$refs.search, 'keyup', function (e) { trigger(vm.$children[0].$refs.search, 'keydown', function (e) {
e.keyCode = 13 e.keyCode = 13
}) })
} }
@@ -315,6 +315,25 @@ describe('Select.vue', () => {
}) })
describe('Toggling Dropdown', () => { describe('Toggling Dropdown', () => {
it('should not open the dropdown when the el is clicked but the component is disabled', (done) => {
const vm = new Vue({
template: '<div><v-select :options="options" :value="value" disabled></v-select></div>',
components: {vSelect},
data: {
value: [{label: 'one'}],
options: [{label: 'one'}]
}
}).$mount()
vm.$children[0].toggleDropdown({target: vm.$children[0].$refs.search})
Vue.nextTick(() => {
Vue.nextTick(() => {
expect(vm.$children[0].open).toEqual(false)
done()
})
})
})
it('should open the dropdown when the el is clicked', (done) => { it('should open the dropdown when the el is clicked', (done) => {
const vm = new Vue({ const vm = new Vue({
template: '<div><v-select :options="options" :value="value"></v-select></div>', template: '<div><v-select :options="options" :value="value"></v-select></div>',
@@ -674,6 +693,22 @@ describe('Select.vue', () => {
}) })
}) })
it('should not remove tag when close icon is clicked and component is disabled', (done) => {
const vm = new Vue({
template: '<div><v-select disabled multiple :options="options" v-model="value"></v-select></div>',
components: {vSelect},
data: {
value: ['one'],
options: ['one', 'two', 'three']
}
}).$mount()
vm.$children[0].$refs.toggle.querySelector('.close').click()
Vue.nextTick(() => {
expect(vm.$children[0].mutableValue).toEqual(['one'])
done()
})
})
it('should remove the last item in the value array on delete keypress when multiple is true', () => { it('should remove the last item in the value array on delete keypress when multiple is true', () => {
const vm = new Vue({ const vm = new Vue({