mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-25 11:10:32 +03:00
Jeff
@@ -3,183 +3,17 @@
|
||||
"html"
|
||||
],
|
||||
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 6,
|
||||
"sourceType": "module"
|
||||
},
|
||||
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true
|
||||
"node": true,
|
||||
"es6": true,
|
||||
"jasmine": true
|
||||
},
|
||||
|
||||
"ecmaFeatures": {
|
||||
"arrowFunctions": true,
|
||||
"destructuring": true,
|
||||
"classes": true,
|
||||
"defaultParams": true,
|
||||
"blockBindings": true,
|
||||
"modules": true,
|
||||
"objectLiteralComputedProperties": true,
|
||||
"objectLiteralShorthandMethods": true,
|
||||
"objectLiteralShorthandProperties": true,
|
||||
"restParams": true,
|
||||
"spread": true,
|
||||
"forOf": true,
|
||||
"generators": true,
|
||||
"templateStrings": true,
|
||||
"superInFunctions": true,
|
||||
"experimentalObjectRestSpread": true
|
||||
},
|
||||
|
||||
"rules": {
|
||||
"accessor-pairs": 2,
|
||||
"array-bracket-spacing": 0,
|
||||
"block-scoped-var": 0,
|
||||
"brace-style": [2, "1tbs", { "allowSingleLine": true }],
|
||||
"camelcase": 0,
|
||||
"comma-dangle": [2, "never"],
|
||||
"comma-spacing": [2, { "before": false, "after": true }],
|
||||
"comma-style": [2, "last"],
|
||||
"complexity": 0,
|
||||
"computed-property-spacing": 0,
|
||||
"consistent-return": 0,
|
||||
"consistent-this": 0,
|
||||
"constructor-super": 2,
|
||||
"curly": [2, "multi-line"],
|
||||
"default-case": 0,
|
||||
"dot-location": [2, "property"],
|
||||
"dot-notation": 0,
|
||||
"eol-last": 2,
|
||||
"eqeqeq": [2, "allow-null"],
|
||||
"func-names": 0,
|
||||
"func-style": 0,
|
||||
"generator-star-spacing": [2, { "before": true, "after": true }],
|
||||
"guard-for-in": 0,
|
||||
"handle-callback-err": [2, "^(err|error)$" ],
|
||||
"indent": [2, 2, { "SwitchCase": 1 }],
|
||||
"key-spacing": [2, { "beforeColon": false, "afterColon": true }],
|
||||
"linebreak-style": 0,
|
||||
"lines-around-comment": 0,
|
||||
"max-nested-callbacks": 0,
|
||||
"new-cap": [2, { "newIsCap": true, "capIsNew": false }],
|
||||
"new-parens": 2,
|
||||
"newline-after-var": 0,
|
||||
"no-alert": 0,
|
||||
"no-array-constructor": 2,
|
||||
"no-caller": 2,
|
||||
"no-catch-shadow": 0,
|
||||
"no-cond-assign": 2,
|
||||
"no-console": 0,
|
||||
"no-constant-condition": 0,
|
||||
"no-continue": 0,
|
||||
"no-control-regex": 2,
|
||||
"no-debugger": 2,
|
||||
"no-delete-var": 2,
|
||||
"no-div-regex": 0,
|
||||
"no-dupe-args": 2,
|
||||
"no-dupe-keys": 2,
|
||||
"no-duplicate-case": 2,
|
||||
"no-else-return": 0,
|
||||
"no-empty": 0,
|
||||
"no-empty-character-class": 2,
|
||||
"no-empty-label": 2,
|
||||
"no-eq-null": 0,
|
||||
"no-eval": 2,
|
||||
"no-ex-assign": 2,
|
||||
"no-extend-native": 2,
|
||||
"no-extra-bind": 2,
|
||||
"no-extra-boolean-cast": 2,
|
||||
"no-extra-parens": 0,
|
||||
"no-extra-semi": 0,
|
||||
"no-fallthrough": 2,
|
||||
"no-floating-decimal": 2,
|
||||
"no-func-assign": 2,
|
||||
"no-implied-eval": 2,
|
||||
"no-inline-comments": 0,
|
||||
"no-inner-declarations": [2, "functions"],
|
||||
"no-invalid-regexp": 2,
|
||||
"no-irregular-whitespace": 2,
|
||||
"no-iterator": 2,
|
||||
"no-label-var": 2,
|
||||
"no-labels": 2,
|
||||
"no-lone-blocks": 2,
|
||||
"no-lonely-if": 0,
|
||||
"no-loop-func": 0,
|
||||
"no-mixed-requires": 0,
|
||||
"no-mixed-spaces-and-tabs": 2,
|
||||
"no-multi-spaces": 2,
|
||||
"no-multi-str": 2,
|
||||
"no-multiple-empty-lines": [2, { "max": 1 }],
|
||||
"no-native-reassign": 2,
|
||||
"no-negated-in-lhs": 2,
|
||||
"no-nested-ternary": 0,
|
||||
"no-new": 2,
|
||||
"no-new-func": 0,
|
||||
"no-new-object": 2,
|
||||
"no-new-require": 2,
|
||||
"no-new-wrappers": 2,
|
||||
"no-obj-calls": 2,
|
||||
"no-octal": 2,
|
||||
"no-octal-escape": 2,
|
||||
"no-param-reassign": 0,
|
||||
"no-path-concat": 0,
|
||||
"no-process-env": 0,
|
||||
"no-process-exit": 0,
|
||||
"no-proto": 0,
|
||||
"no-redeclare": 2,
|
||||
"no-regex-spaces": 2,
|
||||
"no-restricted-modules": 0,
|
||||
"no-return-assign": 2,
|
||||
"no-script-url": 0,
|
||||
"no-self-compare": 2,
|
||||
"no-sequences": 2,
|
||||
"no-shadow": 0,
|
||||
"no-shadow-restricted-names": 2,
|
||||
"no-spaced-func": 2,
|
||||
"no-sparse-arrays": 2,
|
||||
"no-sync": 0,
|
||||
"no-ternary": 0,
|
||||
"no-this-before-super": 2,
|
||||
"no-throw-literal": 2,
|
||||
"no-trailing-spaces": 2,
|
||||
"no-undef": 2,
|
||||
"no-undef-init": 2,
|
||||
"no-undefined": 0,
|
||||
"no-underscore-dangle": 0,
|
||||
"no-unexpected-multiline": 2,
|
||||
"no-unneeded-ternary": 2,
|
||||
"no-unreachable": 2,
|
||||
"no-unused-expressions": 0,
|
||||
"no-unused-vars": [2, { "vars": "all", "args": "none" }],
|
||||
"no-use-before-define": 0,
|
||||
"no-var": 0,
|
||||
"no-void": 0,
|
||||
"no-warning-comments": 0,
|
||||
"no-with": 2,
|
||||
"object-curly-spacing": 0,
|
||||
"object-shorthand": 0,
|
||||
"one-var": [2, { "initialized": "never" }],
|
||||
"operator-assignment": 0,
|
||||
"operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
|
||||
"padded-blocks": 0,
|
||||
"prefer-const": 0,
|
||||
"quote-props": 0,
|
||||
"quotes": [2, "single", "avoid-escape"],
|
||||
"radix": 2,
|
||||
"semi": [2, "never"],
|
||||
"semi-spacing": 0,
|
||||
"sort-vars": 0,
|
||||
"space-after-keywords": [2, "always"],
|
||||
"space-before-blocks": [2, "always"],
|
||||
"space-before-function-paren": [2, "always"],
|
||||
"space-in-parens": [2, "never"],
|
||||
"space-infix-ops": 2,
|
||||
"space-return-throw-case": 2,
|
||||
"space-unary-ops": [2, { "words": true, "nonwords": false }],
|
||||
"spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!"] }],
|
||||
"strict": 0,
|
||||
"use-isnan": 2,
|
||||
"valid-jsdoc": 0,
|
||||
"valid-typeof": 2,
|
||||
"vars-on-top": 0,
|
||||
"wrap-iife": [2, "any"],
|
||||
"wrap-regex": 0,
|
||||
"yoda": [2, "never"]
|
||||
}
|
||||
"extends": "standard"
|
||||
}
|
||||
|
||||
+9
-1
@@ -31,6 +31,13 @@
|
||||
"codeclimate-test-reporter": "^0.3.1",
|
||||
"connect-history-api-fallback": "^1.1.0",
|
||||
"css-loader": "^0.23.0",
|
||||
"eslint": "^4.14.0",
|
||||
"eslint-config-standard": "^11.0.0-beta.0",
|
||||
"eslint-plugin-html": "^4.0.1",
|
||||
"eslint-plugin-import": "^2.8.0",
|
||||
"eslint-plugin-node": "^5.2.1",
|
||||
"eslint-plugin-promise": "^3.6.0",
|
||||
"eslint-plugin-standard": "^3.0.1",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"express": "^4.13.3",
|
||||
"extract-text-webpack-plugin": "^1.0.1",
|
||||
@@ -74,5 +81,6 @@
|
||||
"webpack-dev-middleware": "^1.4.0",
|
||||
"webpack-hot-middleware": "^2.6.0",
|
||||
"webpack-merge": "^0.13.0"
|
||||
}
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
+51
-43
@@ -370,9 +370,9 @@
|
||||
*/
|
||||
options: {
|
||||
type: Array,
|
||||
default() {
|
||||
default () {
|
||||
return []
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -469,13 +469,13 @@
|
||||
*/
|
||||
getOptionLabel: {
|
||||
type: Function,
|
||||
default(option) {
|
||||
default (option) {
|
||||
if (typeof option === 'object') {
|
||||
if (this.label && option[this.label]) {
|
||||
return option[this.label]
|
||||
}
|
||||
}
|
||||
return option;
|
||||
return option
|
||||
}
|
||||
},
|
||||
|
||||
@@ -538,7 +538,7 @@
|
||||
*/
|
||||
createOption: {
|
||||
type: Function,
|
||||
default(newOption) {
|
||||
default (newOption) {
|
||||
if (typeof this.mutableOptions[0] === 'object') {
|
||||
newOption = {[this.label]: newOption}
|
||||
}
|
||||
@@ -583,10 +583,10 @@
|
||||
dir: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
search: '',
|
||||
open: false,
|
||||
@@ -602,7 +602,7 @@
|
||||
* @param {mixed} val
|
||||
* @return {void}
|
||||
*/
|
||||
value(val) {
|
||||
value (val) {
|
||||
this.mutableValue = val
|
||||
},
|
||||
|
||||
@@ -612,11 +612,11 @@
|
||||
* @param {string|object} old
|
||||
* @return {void}
|
||||
*/
|
||||
mutableValue(val, old) {
|
||||
mutableValue (val, old) {
|
||||
if (this.multiple) {
|
||||
this.onChange ? this.onChange(val) : null
|
||||
if (this.onChange) this.onChange(val)
|
||||
} else {
|
||||
this.onChange && val !== old ? this.onChange(val) : null
|
||||
if (this.onChange && val !== old) this.onChange(val)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -626,7 +626,7 @@
|
||||
* @param {array} val
|
||||
* @return {void}
|
||||
*/
|
||||
options(val) {
|
||||
options (val) {
|
||||
this.mutableOptions = val
|
||||
},
|
||||
|
||||
@@ -635,7 +635,7 @@
|
||||
* when mutableOptions change.
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
mutableOptions() {
|
||||
mutableOptions () {
|
||||
if (!this.taggable && this.resetOnOptionsChange) {
|
||||
this.mutableValue = this.multiple ? [] : null
|
||||
}
|
||||
@@ -647,7 +647,7 @@
|
||||
* @param {Boolean} val
|
||||
* @return {void}
|
||||
*/
|
||||
multiple(val) {
|
||||
multiple (val) {
|
||||
this.mutableValue = val ? [] : null
|
||||
}
|
||||
},
|
||||
@@ -656,7 +656,7 @@
|
||||
* Clone props into mutable values,
|
||||
* attach any event listeners.
|
||||
*/
|
||||
created() {
|
||||
created () {
|
||||
this.mutableValue = this.value
|
||||
this.mutableOptions = this.options.slice(0)
|
||||
this.mutableLoading = this.loading
|
||||
@@ -671,7 +671,7 @@
|
||||
* @param {Object|String} option
|
||||
* @return {void}
|
||||
*/
|
||||
select(option) {
|
||||
select (option) {
|
||||
if (this.isOptionSelected(option)) {
|
||||
this.deselect(option)
|
||||
} else {
|
||||
@@ -696,15 +696,15 @@
|
||||
* @param {Object|String} option
|
||||
* @return {void}
|
||||
*/
|
||||
deselect(option) {
|
||||
deselect (option) {
|
||||
if (this.multiple) {
|
||||
let ref = -1
|
||||
this.mutableValue.forEach((val) => {
|
||||
if (val === option || typeof val === 'object' && val[this.label] === option[this.label]) {
|
||||
if (val === option || (typeof val === 'object' && val[this.label] === option[this.label])) {
|
||||
ref = val
|
||||
}
|
||||
})
|
||||
var index = this.mutableValue.indexOf(ref)
|
||||
const index = this.mutableValue.indexOf(ref)
|
||||
this.mutableValue.splice(index, 1)
|
||||
} else {
|
||||
this.mutableValue = null
|
||||
@@ -716,7 +716,7 @@
|
||||
* @param {Object|String} option
|
||||
* @return {void}
|
||||
*/
|
||||
onAfterSelect(option) {
|
||||
onAfterSelect (option) {
|
||||
if (this.closeOnSelect) {
|
||||
this.open = !this.open
|
||||
this.$refs.search.blur()
|
||||
@@ -732,8 +732,9 @@
|
||||
* @param {Event} e
|
||||
* @return {void}
|
||||
*/
|
||||
toggleDropdown(e) {
|
||||
if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.toggle || e.target === this.$el) {
|
||||
toggleDropdown (e) {
|
||||
if (e.target === this.$refs.openIndicator || e.target === this.$refs.search ||
|
||||
e.target === this.$refs.toggle || e.target === this.$el) {
|
||||
if (this.open) {
|
||||
this.$refs.search.blur() // dropdown will close on blur
|
||||
} else {
|
||||
@@ -750,7 +751,7 @@
|
||||
* @param {Object|String} option
|
||||
* @return {Boolean} True when selected | False otherwise
|
||||
*/
|
||||
isOptionSelected(option) {
|
||||
isOptionSelected (option) {
|
||||
if (this.multiple && this.mutableValue) {
|
||||
let selected = false
|
||||
this.mutableValue.forEach(opt => {
|
||||
@@ -758,8 +759,7 @@
|
||||
selected = true
|
||||
} else if (typeof opt === 'object' && opt[this.label] === option) {
|
||||
selected = true
|
||||
}
|
||||
else if (opt === option) {
|
||||
} else if (opt === option) {
|
||||
selected = true
|
||||
}
|
||||
})
|
||||
@@ -774,7 +774,7 @@
|
||||
* Otherwise, blur the search input to close the dropdown.
|
||||
* @return {void}
|
||||
*/
|
||||
onEscape() {
|
||||
onEscape () {
|
||||
if (!this.search.length) {
|
||||
this.$refs.search.blur()
|
||||
} else {
|
||||
@@ -787,7 +787,7 @@
|
||||
* @emits {search:blur}
|
||||
* @return {void}
|
||||
*/
|
||||
onSearchBlur() {
|
||||
onSearchBlur () {
|
||||
if (this.clearSearchOnBlur) {
|
||||
this.search = ''
|
||||
}
|
||||
@@ -800,7 +800,7 @@
|
||||
* @emits {search:focus}
|
||||
* @return {void}
|
||||
*/
|
||||
onSearchFocus() {
|
||||
onSearchFocus () {
|
||||
this.open = true
|
||||
this.$emit('search:focus')
|
||||
},
|
||||
@@ -810,10 +810,18 @@
|
||||
* text in the search input, & there's tags to delete
|
||||
* @return {this.value}
|
||||
*/
|
||||
maybeDeleteValue() {
|
||||
maybeDeleteValue () {
|
||||
let value = null
|
||||
|
||||
if (!this.$refs.search.value.length && this.mutableValue) {
|
||||
return this.multiple ? this.mutableValue.pop() : this.mutableValue = null
|
||||
if (this.multiple) {
|
||||
value = this.mutableValue.pop()
|
||||
} else {
|
||||
value = this.mutableValue = null
|
||||
}
|
||||
}
|
||||
|
||||
return value
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -823,7 +831,7 @@
|
||||
* @param {Object || String} option
|
||||
* @return {boolean}
|
||||
*/
|
||||
optionExists(option) {
|
||||
optionExists (option) {
|
||||
let exists = false
|
||||
|
||||
this.mutableOptions.forEach(opt => {
|
||||
@@ -844,7 +852,7 @@
|
||||
* @param {Object || String} option
|
||||
* @return {void}
|
||||
*/
|
||||
maybePushTag(option) {
|
||||
maybePushTag (option) {
|
||||
if (this.pushTags) {
|
||||
this.mutableOptions.push(option)
|
||||
}
|
||||
@@ -857,7 +865,7 @@
|
||||
* Classes to be output on .dropdown
|
||||
* @return {Object}
|
||||
*/
|
||||
dropdownClasses() {
|
||||
dropdownClasses () {
|
||||
return {
|
||||
open: this.dropdownOpen,
|
||||
single: !this.multiple,
|
||||
@@ -874,7 +882,7 @@
|
||||
* If search text should clear on blur
|
||||
* @return {Boolean} True when single and clearSearchOnSelect
|
||||
*/
|
||||
clearSearchOnBlur() {
|
||||
clearSearchOnBlur () {
|
||||
return this.clearSearchOnSelect && !this.multiple
|
||||
},
|
||||
|
||||
@@ -883,7 +891,7 @@
|
||||
* search input
|
||||
* @return {Boolean} True if non empty value
|
||||
*/
|
||||
searching() {
|
||||
searching () {
|
||||
return !!this.search
|
||||
},
|
||||
|
||||
@@ -892,7 +900,7 @@
|
||||
* dropdown menu.
|
||||
* @return {Boolean} True if open
|
||||
*/
|
||||
dropdownOpen() {
|
||||
dropdownOpen () {
|
||||
return this.noDrop ? false : this.open && !this.mutableLoading
|
||||
},
|
||||
|
||||
@@ -901,9 +909,9 @@
|
||||
* & there is no value selected.
|
||||
* @return {String} Placeholder text
|
||||
*/
|
||||
searchPlaceholder() {
|
||||
searchPlaceholder () {
|
||||
if (this.isValueEmpty && this.placeholder) {
|
||||
return this.placeholder;
|
||||
return this.placeholder
|
||||
}
|
||||
},
|
||||
|
||||
@@ -915,7 +923,7 @@
|
||||
*
|
||||
* @return {array}
|
||||
*/
|
||||
filteredOptions() {
|
||||
filteredOptions () {
|
||||
if (!this.filterable && !this.taggable) {
|
||||
return this.mutableOptions.slice()
|
||||
}
|
||||
@@ -937,7 +945,7 @@
|
||||
* Check if there aren't any options selected.
|
||||
* @return {Boolean}
|
||||
*/
|
||||
isValueEmpty() {
|
||||
isValueEmpty () {
|
||||
if (this.mutableValue) {
|
||||
if (typeof this.mutableValue === 'object') {
|
||||
return !Object.keys(this.mutableValue).length
|
||||
@@ -945,14 +953,14 @@
|
||||
return !this.mutableValue.length
|
||||
}
|
||||
|
||||
return true;
|
||||
return true
|
||||
},
|
||||
|
||||
/**
|
||||
* Return the current value in array format.
|
||||
* @return {Array}
|
||||
*/
|
||||
valueAsArray() {
|
||||
valueAsArray () {
|
||||
if (this.multiple) {
|
||||
return this.mutableValue
|
||||
} else if (this.mutableValue) {
|
||||
@@ -961,7 +969,7 @@
|
||||
|
||||
return []
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
+3
-3
@@ -14,18 +14,18 @@ Vue.config.devtools = true
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
placeholder: "placeholder",
|
||||
placeholder: 'placeholder',
|
||||
value: null,
|
||||
options: countries,
|
||||
ajaxRes: [],
|
||||
people: []
|
||||
},
|
||||
methods: {
|
||||
search(search, loading) {
|
||||
search (search, loading) {
|
||||
loading(true)
|
||||
this.getRepositories(search, loading, this)
|
||||
},
|
||||
searchPeople(search, loading) {
|
||||
searchPeople (search, loading) {
|
||||
loading(true)
|
||||
this.getPeople(loading, this)
|
||||
},
|
||||
|
||||
+10
-7
@@ -23,11 +23,11 @@ module.exports = {
|
||||
*/
|
||||
onSearch: {
|
||||
type: Function,
|
||||
default: function(search, loading){}
|
||||
default: function (search, loading) {}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
mutableLoading: false
|
||||
}
|
||||
@@ -38,7 +38,7 @@ module.exports = {
|
||||
* If a callback & search text has been provided,
|
||||
* invoke the onSearch callback.
|
||||
*/
|
||||
search() {
|
||||
search () {
|
||||
if (this.search.length > 0) {
|
||||
this.onSearch(this.search, this.toggleLoading)
|
||||
this.$emit('search', this.search, this.toggleLoading)
|
||||
@@ -49,7 +49,7 @@ module.exports = {
|
||||
* mutable loading value.
|
||||
* @param val
|
||||
*/
|
||||
loading(val) {
|
||||
loading (val) {
|
||||
this.mutableLoading = val
|
||||
}
|
||||
},
|
||||
@@ -62,11 +62,14 @@ module.exports = {
|
||||
* @param toggle Boolean
|
||||
* @returns {*}
|
||||
*/
|
||||
toggleLoading(toggle = null) {
|
||||
toggleLoading (toggle = null) {
|
||||
if (toggle == null) {
|
||||
return this.mutableLoading = !this.mutableLoading
|
||||
this.mutableLoading = !this.mutableLoading
|
||||
} else {
|
||||
this.mutableLoading = toggle
|
||||
}
|
||||
return this.mutableLoading = toggle
|
||||
|
||||
return this.mutableLoading
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+21
-14
@@ -2,7 +2,7 @@
|
||||
|
||||
module.exports = {
|
||||
watch: {
|
||||
typeAheadPointer() {
|
||||
typeAheadPointer () {
|
||||
this.maybeAdjustScroll()
|
||||
}
|
||||
},
|
||||
@@ -14,14 +14,14 @@ module.exports = {
|
||||
* overflow bounds.
|
||||
* @returns {*}
|
||||
*/
|
||||
maybeAdjustScroll() {
|
||||
maybeAdjustScroll () {
|
||||
let pixelsToPointerTop = this.pixelsToPointerTop()
|
||||
let pixelsToPointerBottom = this.pixelsToPointerBottom()
|
||||
|
||||
if ( pixelsToPointerTop <= this.viewport().top) {
|
||||
return this.scrollTo( pixelsToPointerTop )
|
||||
if (pixelsToPointerTop <= this.viewport().top) {
|
||||
return this.scrollTo(pixelsToPointerTop)
|
||||
} else if (pixelsToPointerBottom >= this.viewport().bottom) {
|
||||
return this.scrollTo( this.viewport().top + this.pointerHeight() )
|
||||
return this.scrollTo(this.viewport().top + this.pointerHeight())
|
||||
}
|
||||
},
|
||||
|
||||
@@ -30,9 +30,10 @@ module.exports = {
|
||||
* list to the top of the current pointer element.
|
||||
* @returns {number}
|
||||
*/
|
||||
pixelsToPointerTop() {
|
||||
pixelsToPointerTop () {
|
||||
let pixelsToPointerTop = 0
|
||||
if( this.$refs.dropdownMenu ) {
|
||||
|
||||
if (this.$refs.dropdownMenu) {
|
||||
for (let i = 0; i < this.typeAheadPointer; i++) {
|
||||
pixelsToPointerTop += this.$refs.dropdownMenu.children[i].offsetHeight
|
||||
}
|
||||
@@ -45,7 +46,7 @@ module.exports = {
|
||||
* list to the bottom of the current pointer element.
|
||||
* @returns {*}
|
||||
*/
|
||||
pixelsToPointerBottom() {
|
||||
pixelsToPointerBottom () {
|
||||
return this.pixelsToPointerTop() + this.pointerHeight()
|
||||
},
|
||||
|
||||
@@ -53,7 +54,7 @@ module.exports = {
|
||||
* The offsetHeight of the current pointer element.
|
||||
* @returns {number}
|
||||
*/
|
||||
pointerHeight() {
|
||||
pointerHeight () {
|
||||
let element = this.$refs.dropdownMenu ? this.$refs.dropdownMenu.children[this.typeAheadPointer] : false
|
||||
return element ? element.offsetHeight : 0
|
||||
},
|
||||
@@ -62,9 +63,9 @@ module.exports = {
|
||||
* The currently viewable portion of the dropdownMenu.
|
||||
* @returns {{top: (string|*|number), bottom: *}}
|
||||
*/
|
||||
viewport() {
|
||||
viewport () {
|
||||
return {
|
||||
top: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop: 0,
|
||||
top: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop : 0,
|
||||
bottom: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.offsetHeight + this.$refs.dropdownMenu.scrollTop : 0
|
||||
}
|
||||
},
|
||||
@@ -74,8 +75,14 @@ module.exports = {
|
||||
* @param position
|
||||
* @returns {*}
|
||||
*/
|
||||
scrollTo(position) {
|
||||
return this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop = position : null
|
||||
},
|
||||
scrollTo (position) {
|
||||
let result = null
|
||||
|
||||
if (this.$refs.dropdownMenu) {
|
||||
result = this.$refs.dropdownMenu.scrollTop = position
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
module.exports = {
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
typeAheadPointer: -1
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
filteredOptions() {
|
||||
filteredOptions () {
|
||||
this.typeAheadPointer = 0
|
||||
}
|
||||
},
|
||||
@@ -17,10 +17,10 @@ module.exports = {
|
||||
* subtracting the current index by one.
|
||||
* @return {void}
|
||||
*/
|
||||
typeAheadUp() {
|
||||
typeAheadUp () {
|
||||
if (this.typeAheadPointer > 0) {
|
||||
this.typeAheadPointer--
|
||||
if( this.maybeAdjustScroll ) {
|
||||
if (this.maybeAdjustScroll) {
|
||||
this.maybeAdjustScroll()
|
||||
}
|
||||
}
|
||||
@@ -31,10 +31,10 @@ module.exports = {
|
||||
* adding the current index by one.
|
||||
* @return {void}
|
||||
*/
|
||||
typeAheadDown() {
|
||||
typeAheadDown () {
|
||||
if (this.typeAheadPointer < this.filteredOptions.length - 1) {
|
||||
this.typeAheadPointer++
|
||||
if( this.maybeAdjustScroll ) {
|
||||
if (this.maybeAdjustScroll) {
|
||||
this.maybeAdjustScroll()
|
||||
}
|
||||
}
|
||||
@@ -45,16 +45,16 @@ module.exports = {
|
||||
* Optionally clear the search input on selection.
|
||||
* @return {void}
|
||||
*/
|
||||
typeAheadSelect() {
|
||||
if( this.filteredOptions[ this.typeAheadPointer ] ) {
|
||||
this.select( this.filteredOptions[ this.typeAheadPointer ] );
|
||||
} else if (this.taggable && this.search.length){
|
||||
typeAheadSelect () {
|
||||
if (this.filteredOptions[ this.typeAheadPointer ]) {
|
||||
this.select(this.filteredOptions[this.typeAheadPointer])
|
||||
} else if (this.taggable && this.search.length) {
|
||||
this.select(this.search)
|
||||
}
|
||||
|
||||
if( this.clearSearchOnSelect ) {
|
||||
this.search = "";
|
||||
if (this.clearSearchOnSelect) {
|
||||
this.search = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -17,8 +17,8 @@ Vue.component('v-select', vSelect)
|
||||
* @param process
|
||||
* @returns {Event}
|
||||
*/
|
||||
function trigger(target, event, process) {
|
||||
var e = document.createEvent('HTMLEvents')
|
||||
function trigger (target, event, process) {
|
||||
const e = document.createEvent('HTMLEvents')
|
||||
e.initEvent(event, true, true)
|
||||
if (process) process(e)
|
||||
target.dispatchEvent(e)
|
||||
@@ -32,8 +32,8 @@ function trigger(target, event, process) {
|
||||
* @param process
|
||||
* @returns {Event}
|
||||
*/
|
||||
function triggerMouse(target, event, process) {
|
||||
var e = document.createEvent('MouseEvent')
|
||||
function triggerMouse (target, event, process) {
|
||||
const e = document.createEvent('MouseEvent')
|
||||
e.initEvent('event', true, true)
|
||||
if (process) process(e)
|
||||
target.dispatchEvent(e)
|
||||
@@ -47,8 +47,8 @@ function triggerMouse(target, event, process) {
|
||||
* @param process
|
||||
* @returns {Event}
|
||||
*/
|
||||
function triggerFocusEvent(target, event, process) {
|
||||
var e = document.createEvent('FocusEvent')
|
||||
function triggerFocusEvent (target, event, process) {
|
||||
const e = document.createEvent('FocusEvent')
|
||||
e.initEvent('event', true, true)
|
||||
if (process) process(e)
|
||||
target.dispatchEvent(e)
|
||||
@@ -60,7 +60,7 @@ function triggerFocusEvent(target, event, process) {
|
||||
* @param vm
|
||||
* @param search
|
||||
*/
|
||||
function searchSubmit(vm, search = false) {
|
||||
function searchSubmit (vm, search = false) {
|
||||
if (search) {
|
||||
vm.$children[0].search = search
|
||||
}
|
||||
@@ -71,7 +71,6 @@ function searchSubmit(vm, search = false) {
|
||||
}
|
||||
|
||||
describe('Select.vue', () => {
|
||||
|
||||
describe('Selecting values', () => {
|
||||
it('can accept an array with pre-selected values', () => {
|
||||
const vm = new Vue({
|
||||
@@ -126,16 +125,16 @@ describe('Select.vue', () => {
|
||||
template: '<div><v-select :options="options" :value="value" :multiple="true"></v-select></div>',
|
||||
data: {
|
||||
value: ['foo', 'bar'],
|
||||
options: ['foo','bar']
|
||||
options: ['foo', 'bar']
|
||||
}
|
||||
}).$mount()
|
||||
vm.$children[0].select('foo')
|
||||
expect(vm.$children[0].mutableValue.length).toEqual(1)
|
||||
}),
|
||||
})
|
||||
|
||||
it('can deselect an option when multiple is false', () => {
|
||||
const vm = new Vue({
|
||||
template: `<div><v-select :value="'foo'"></v-select></div>`,
|
||||
template: `<div><v-select :value="'foo'"></v-select></div>`
|
||||
}).$mount()
|
||||
vm.$children[0].deselect('foo')
|
||||
expect(vm.$children[0].mutableValue).toEqual(null)
|
||||
@@ -227,7 +226,7 @@ describe('Select.vue', () => {
|
||||
components: {vSelect},
|
||||
data: {
|
||||
value: 'foo',
|
||||
options: ['foo','bar','baz']
|
||||
options: ['foo', 'bar', 'baz']
|
||||
}
|
||||
}).$mount()
|
||||
|
||||
@@ -240,14 +239,14 @@ describe('Select.vue', () => {
|
||||
expect(vm.value).toEqual('bar')
|
||||
done()
|
||||
})
|
||||
}),
|
||||
})
|
||||
|
||||
it('can check if a string value is selected when the value is an object and multiple is true', () => {
|
||||
const vm = new Vue({
|
||||
template: `<div><v-select multiple :value="[{label: 'foo', value: 'bar'}]"></v-select></div>`,
|
||||
template: `<div><v-select multiple :value="[{label: 'foo', value: 'bar'}]"></v-select></div>`
|
||||
}).$mount()
|
||||
expect(vm.$children[0].isOptionSelected('foo')).toEqual(true)
|
||||
}),
|
||||
})
|
||||
|
||||
describe('change Event', () => {
|
||||
it('will trigger the input event when the selection changes', (done) => {
|
||||
@@ -277,10 +276,9 @@ describe('Select.vue', () => {
|
||||
vm.$refs.select.select('bar')
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(vm.foo).toEqual(['foo','bar'])
|
||||
expect(vm.foo).toEqual(['foo', 'bar'])
|
||||
done()
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -292,7 +290,7 @@ describe('Select.vue', () => {
|
||||
data: {value: 'foo'}
|
||||
}).$mount()
|
||||
vm.$refs.select.search = 'ba'
|
||||
expect(vm.$refs.select.filteredOptions).toEqual(['bar','baz'])
|
||||
expect(vm.$refs.select.filteredOptions).toEqual(['bar', 'baz'])
|
||||
})
|
||||
|
||||
it('should not filter the array of strings if filterable is false', () => {
|
||||
@@ -301,7 +299,7 @@ describe('Select.vue', () => {
|
||||
data: {value: 'foo'}
|
||||
}).$mount()
|
||||
vm.$refs.select.search = 'ba'
|
||||
expect(vm.$refs.select.filteredOptions).toEqual(['foo','bar','baz'])
|
||||
expect(vm.$refs.select.filteredOptions).toEqual(['foo', 'bar', 'baz'])
|
||||
})
|
||||
|
||||
it('should filter without case-sensitivity', () => {
|
||||
@@ -310,7 +308,7 @@ describe('Select.vue', () => {
|
||||
data: {value: 'foo'}
|
||||
}).$mount()
|
||||
vm.$refs.select.search = 'ba'
|
||||
expect(vm.$refs.select.filteredOptions).toEqual(['Bar','Baz'])
|
||||
expect(vm.$refs.select.filteredOptions).toEqual(['Bar', 'Baz'])
|
||||
})
|
||||
|
||||
it('can filter an array of objects based on the objects label key', () => {
|
||||
@@ -365,7 +363,7 @@ describe('Select.vue', () => {
|
||||
it('can close the dropdown when the el is clicked', (done) => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select></v-select></div>',
|
||||
components: {vSelect},
|
||||
components: {vSelect}
|
||||
}).$mount()
|
||||
|
||||
spyOn(vm.$children[0].$refs.search, 'blur')
|
||||
@@ -379,7 +377,6 @@ describe('Select.vue', () => {
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
it('closes the dropdown when an option is selected, multiple is true, and closeOnSelect option is true', (done) => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select ref="select" :options="options" multiple :value="value"></v-select></div>',
|
||||
@@ -418,7 +415,6 @@ describe('Select.vue', () => {
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
it('should close the dropdown on search blur', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :options="options" multiple :value="value"></v-select></div>',
|
||||
@@ -436,7 +432,7 @@ describe('Select.vue', () => {
|
||||
|
||||
it('will close the dropdown and emit the search:blur event from onSearchBlur', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select></v-select></div>',
|
||||
template: '<div><v-select></v-select></div>'
|
||||
}).$mount()
|
||||
|
||||
spyOn(vm.$children[0], '$emit')
|
||||
@@ -449,7 +445,7 @@ describe('Select.vue', () => {
|
||||
|
||||
it('will open the dropdown and emit the search:focus event from onSearchFocus', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select></v-select></div>',
|
||||
template: '<div><v-select></v-select></div>'
|
||||
}).$mount()
|
||||
|
||||
spyOn(vm.$children[0], '$emit')
|
||||
@@ -462,7 +458,7 @@ describe('Select.vue', () => {
|
||||
it('will close the dropdown on escape, if search is empty', (done) => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select></v-select></div>',
|
||||
components: {vSelect},
|
||||
components: {vSelect}
|
||||
}).$mount()
|
||||
|
||||
spyOn(vm.$children[0].$refs.search, 'blur')
|
||||
@@ -529,7 +525,7 @@ describe('Select.vue', () => {
|
||||
|
||||
vm.$children[0].typeAheadPointer = 1
|
||||
|
||||
trigger(vm.$children[0].$refs.search, 'keydown', (e) => e.keyCode = 38)
|
||||
trigger(vm.$children[0].$refs.search, 'keydown', (e) => { e.keyCode = 38 })
|
||||
expect(vm.$children[0].typeAheadPointer).toEqual(0)
|
||||
})
|
||||
|
||||
@@ -543,7 +539,7 @@ describe('Select.vue', () => {
|
||||
}).$mount()
|
||||
|
||||
vm.$children[0].typeAheadPointer = 1
|
||||
trigger(vm.$children[0].$refs.search, 'keydown', (e) => e.keyCode = 40)
|
||||
trigger(vm.$children[0].$refs.search, 'keydown', (e) => { e.keyCode = 40 })
|
||||
expect(vm.$children[0].typeAheadPointer).toEqual(2)
|
||||
})
|
||||
|
||||
@@ -573,7 +569,7 @@ describe('Select.vue', () => {
|
||||
|
||||
vm.$children[0].typeAheadPointer = 1
|
||||
spyOn(vm.$children[0], 'maybeAdjustScroll')
|
||||
trigger(vm.$children[0].$refs.search, 'keydown', (e) => e.keyCode = 38)
|
||||
trigger(vm.$children[0].$refs.search, 'keydown', (e) => { e.keyCode = 38 })
|
||||
expect(vm.$children[0].maybeAdjustScroll).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
@@ -587,7 +583,7 @@ describe('Select.vue', () => {
|
||||
}).$mount()
|
||||
|
||||
spyOn(vm.$children[0], 'maybeAdjustScroll')
|
||||
trigger(vm.$children[0].$refs.search, 'keydown', (e) => e.keyCode = 40)
|
||||
trigger(vm.$children[0].$refs.search, 'keydown', (e) => { e.keyCode = 40 })
|
||||
expect(vm.$children[0].maybeAdjustScroll).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
@@ -611,10 +607,10 @@ describe('Select.vue', () => {
|
||||
|
||||
it('should scroll up if the pointer is above the current viewport bounds', () => {
|
||||
let methods = Object.assign(pointerScroll.methods, {
|
||||
pixelsToPointerTop() {
|
||||
pixelsToPointerTop () {
|
||||
return 1
|
||||
},
|
||||
viewport() {
|
||||
viewport () {
|
||||
return {top: 2, bottom: 0}
|
||||
}
|
||||
})
|
||||
@@ -624,7 +620,7 @@ describe('Select.vue', () => {
|
||||
'v-select': Mock({
|
||||
'../mixins/pointerScroll': {methods}
|
||||
})
|
||||
},
|
||||
}
|
||||
}).$mount()
|
||||
|
||||
spyOn(vm.$children[0], 'scrollTo')
|
||||
@@ -639,10 +635,10 @@ describe('Select.vue', () => {
|
||||
*/
|
||||
xit('should scroll down if the pointer is below the current viewport bounds', () => {
|
||||
let methods = Object.assign(pointerScroll.methods, {
|
||||
pixelsToPointerBottom() {
|
||||
pixelsToPointerBottom () {
|
||||
return 2
|
||||
},
|
||||
viewport() {
|
||||
viewport () {
|
||||
return {top: 0, bottom: 1}
|
||||
}
|
||||
})
|
||||
@@ -652,7 +648,7 @@ describe('Select.vue', () => {
|
||||
'v-select': Mock({
|
||||
'../mixins/pointerScroll': {methods}
|
||||
})
|
||||
},
|
||||
}
|
||||
}).$mount()
|
||||
|
||||
spyOn(vm.$children[0], 'scrollTo')
|
||||
@@ -664,7 +660,7 @@ describe('Select.vue', () => {
|
||||
describe('Measuring pixel distances', () => {
|
||||
it('should calculate pointerHeight as the offsetHeight of the pointer element if it exists', () => {
|
||||
const vm = new Vue({
|
||||
template: `<div><v-select :options="['one', 'two', 'three']"></v-select></div>`,
|
||||
template: `<div><v-select :options="['one', 'two', 'three']"></v-select></div>`
|
||||
}).$mount()
|
||||
|
||||
// dropdown must be open for $refs to exist
|
||||
@@ -719,7 +715,6 @@ describe('Select.vue', () => {
|
||||
})
|
||||
|
||||
it('should remove the last item in the value array on delete keypress when multiple is true', () => {
|
||||
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :options="options" v-model="value" :multiple="true"></v-select></div>',
|
||||
components: {vSelect},
|
||||
@@ -766,7 +761,7 @@ describe('Select.vue', () => {
|
||||
it('will console.warn when options contain objects without a valid label key', (done) => {
|
||||
spyOn(console, 'warn')
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select :options="[{}]"></v-select></div>',
|
||||
template: '<div><v-select :options="[{}]"></v-select></div>'
|
||||
}).$mount()
|
||||
Vue.nextTick(() => {
|
||||
expect(console.warn).toHaveBeenCalledWith(
|
||||
@@ -1038,7 +1033,7 @@ describe('Select.vue', () => {
|
||||
|
||||
it('should not allow duplicate tags when using string options', (done) => {
|
||||
const vm = new Vue({
|
||||
template: `<div><v-select ref="select" taggable multiple></v-select></div>`,
|
||||
template: `<div><v-select ref="select" taggable multiple></v-select></div>`
|
||||
}).$mount()
|
||||
vm.$refs.select.search = 'one'
|
||||
searchSubmit(vm)
|
||||
@@ -1057,7 +1052,7 @@ describe('Select.vue', () => {
|
||||
|
||||
it('should not allow duplicate tags when using object options', (done) => {
|
||||
const vm = new Vue({
|
||||
template: `<div><v-select ref="select" taggable multiple></v-select></div>`,
|
||||
template: `<div><v-select ref="select" taggable multiple></v-select></div>`
|
||||
}).$mount()
|
||||
vm.$refs.select.search = 'one'
|
||||
searchSubmit(vm)
|
||||
@@ -1072,14 +1067,13 @@ describe('Select.vue', () => {
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
describe('Asynchronous Loading', () => {
|
||||
it('can toggle the loading class', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select ref="select"></v-select></div>',
|
||||
template: '<div><v-select ref="select"></v-select></div>'
|
||||
}).$mount()
|
||||
|
||||
vm.$refs.select.toggleLoading()
|
||||
@@ -1096,7 +1090,7 @@ describe('Select.vue', () => {
|
||||
called: false
|
||||
},
|
||||
methods: {
|
||||
foo(val) {
|
||||
foo (val) {
|
||||
this.called = val
|
||||
}
|
||||
}
|
||||
@@ -1115,8 +1109,8 @@ describe('Select.vue', () => {
|
||||
template: '<div><v-select ref="select" search="foo" :on-search="foo"></v-select></div>',
|
||||
data: { called: false },
|
||||
methods: {
|
||||
foo(val) {
|
||||
this.called = ! this.called
|
||||
foo (val) {
|
||||
this.called = !this.called
|
||||
}
|
||||
}
|
||||
}).$mount()
|
||||
@@ -1139,7 +1133,7 @@ describe('Select.vue', () => {
|
||||
called: false
|
||||
},
|
||||
methods: {
|
||||
foo(val) {
|
||||
foo (val) {
|
||||
this.called = val
|
||||
}
|
||||
}
|
||||
@@ -1158,8 +1152,8 @@ describe('Select.vue', () => {
|
||||
template: '<div><v-select ref="select" search="foo" @search="foo"></v-select></div>',
|
||||
data: { called: false },
|
||||
methods: {
|
||||
foo(val) {
|
||||
this.called = ! this.called
|
||||
foo (val) {
|
||||
this.called = !this.called
|
||||
}
|
||||
}
|
||||
}).$mount()
|
||||
@@ -1179,7 +1173,7 @@ describe('Select.vue', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select loading ref="select" :on-search="foo"></v-select></div>',
|
||||
methods: {
|
||||
foo(search, loading) {
|
||||
foo (search, loading) {
|
||||
loading(false)
|
||||
}
|
||||
}
|
||||
@@ -1196,7 +1190,7 @@ describe('Select.vue', () => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select loading ref="select" :on-search="foo"></v-select></div>',
|
||||
methods: {
|
||||
foo(search, loading) {
|
||||
foo (search, loading) {
|
||||
loading(true)
|
||||
}
|
||||
}
|
||||
@@ -1214,7 +1208,7 @@ describe('Select.vue', () => {
|
||||
it('will sync mutable loading with the loading prop', (done) => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select ref="select" :loading="loading"></v-select></div>',
|
||||
data: {loading:false}
|
||||
data: {loading: false}
|
||||
}).$mount()
|
||||
vm.loading = true
|
||||
Vue.nextTick(() => {
|
||||
@@ -1268,7 +1262,7 @@ describe('Select.vue', () => {
|
||||
}).$mount()
|
||||
|
||||
vm.$children[0].open = true
|
||||
vm.$refs.select.search = "t"
|
||||
vm.$refs.select.search = 't'
|
||||
expect(vm.$refs.select.search).toEqual('t')
|
||||
|
||||
vm.$children[0].onSearchBlur()
|
||||
@@ -1278,7 +1272,7 @@ describe('Select.vue', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it ('should not reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
|
||||
it('should not reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
|
||||
const vm = new Vue({
|
||||
template: '<div><v-select ref="select" :options="options" :value="value" :clear-search-on-select="false"></v-select></div>',
|
||||
data: {
|
||||
@@ -1289,7 +1283,7 @@ describe('Select.vue', () => {
|
||||
expect(vm.$refs.select.clearSearchOnSelect).toEqual(false)
|
||||
|
||||
vm.$children[0].open = true
|
||||
vm.$refs.select.search = "t"
|
||||
vm.$refs.select.search = 't'
|
||||
expect(vm.$refs.select.search).toEqual('t')
|
||||
|
||||
vm.$children[0].onSearchBlur()
|
||||
|
||||
Reference in New Issue
Block a user