mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-19 09:50:33 +03:00
Code Activity

update tests to use mount where required, start new slot docs

Browse Source
This commit is contained in:
Jeff
2019-11-06 13:10:51 -08:00
parent 83c1c795db
commit 218a9e5c99
7 changed files with 134 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Deselect.vue
+10 -10
View File
@@ -1,22 +1,22 @@
<script>
export default {
functional: true,
render (_, {data}) {
const svg = {
render (createElement, {data}) {
const path = createElement('path', {
attrs: {
d: 'M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z,',
},
});
const svg = createElement('svg', {
attrs: {
xmlns: 'http://www.w3.org/2000/svg',
width: 10,
height: 10,
},
};
}, [path]);
const path = {
attrs: {
d: 'M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z,',
},
};
return _('button', data, [_('svg', svg, [_('path', path)])]);
return createElement('button', data, [svg]);
},
};
</script>
src/components/Select.vue
+74 -43
View File
@@ -3,13 +3,14 @@
<div ref="toggle" @mousedown.prevent="toggleDropdown" class="vs__dropdown-toggle">
<div class="vs__selected-options" ref="selectedOptions">
<slot name="selected-option" v-for="option in scopedValues" v-bind="option">
<span :class="option.bindings.class">
{{ option.label }}
<slot name="selected-option" v-for="selected in scopedValues" v-bind="selected">
<span :class="selected.bindings.class">
{{ selected.label }}
<component
:is="option.deselect.component"
v-bind="option.deselect.bindings"
v-on="option.deselect.events"
:is="selected.deselect.component"
v-if="selected.deselect.bindings.multiple"
v-bind="selected.deselect.bindings"
v-on="selected.deselect.events"
/>
</span>
</slot>
@@ -20,23 +21,24 @@
</div>
<div class="vs__actions">
<button
v-show="showClearButton"
:disabled="disabled"
@click="clearSelection"
type="button"
class="vs__clear"
title="Clear selection"
>
<component :is="childComponents.Deselect" />
</button>
<slot name="clear">
<component
:is="scope.clear.component"
v-bind="scope.clear.bindings"
v-on="scope.clear.events"
/>
</slot>
<slot name="open-indicator" v-bind="scope.openIndicator">
<component :is="childComponents.OpenIndicator" v-if="!noDrop" v-bind="scope.openIndicator.attributes"/>
<component
v-if="!noDrop"
:is="childComponents.OpenIndicator"
v-bind="scope.openIndicator.attributes"
/>
</slot>
<slot name="spinner" v-bind="scope.spinner">
<div class="vs__spinner" v-show="mutableLoading">Loading...</div>
<div :class="scope.spinner.bindings.class" v-show="mutableLoading">Loading...</div>
</slot>
</div>
</div>
@@ -50,8 +52,8 @@
@mousedown.prevent="onMousedown"
@mouseup="onMouseUp"
>
<slot name="option" v-for="{attributes, events, option} in scopedOptions" v-bind="{attributes, events, option}">
<li v-bind="attributes" v-on="events">{{ getOptionLabel(option) }}</li>
<slot name="option" v-for="option in scopedOptions" v-bind="option">
<li v-bind="option.attributes" v-on="option.events">{{ option.label }}</li>
</slot>
<li v-if="!filteredOptions.length" class="vs__no-options" @mousedown.stop="">
<slot name="no-options">Sorry, no matching options.</slot>
@@ -269,30 +271,32 @@
*/
getOptionKey: {
type: Function,
default(option) {
default (option) {
if (typeof option === 'object' && option.id) {
return option.id
return option.id;
} else {
try {
return JSON.stringify(option)
} catch(e) {
return JSON.stringify(option);
} catch (e) {
return console.warn(
`[vue-select warn]: Could not stringify option ` +
`to generate unique key. Please provide'getOptionKey' prop ` +
`to return a unique key for each option.\n` +
'https://vue-select.org/api/props.html#getoptionkey'
)
return null
'https://vue-select.org/api/props.html#getoptionkey',
);
}
}
}
},
},
getDropdownOptionScope: {
getOptionScope: {
type: Function,
default(option, index) {
default (option, index) {
const optionProperties = typeof option === 'object' ? {...option} : {};
return {
option,
...optionProperties,
label: this.getOptionLabel(option),
attributes: {
key: this.getOptionKey(option),
class: {
@@ -308,7 +312,7 @@
e.preventDefault();
e.stopPropagation();
return this.selectable(option) ? this.select(option) : null;
}
},
},
};
},
@@ -316,7 +320,7 @@
getSelectedOptionScope: {
type: Function,
default(option, index) {
default (option, index) {
return {
label: this.getOptionLabel(option),
deselect: this.getOptionDeselectScope(option),
@@ -325,7 +329,7 @@
option: this.normalizeOptionForSlot(option),
deselect: this.deselect,
multiple: this.multiple,
class: "vs__selected",
class: 'vs__selected',
},
events: {
'mouseover': () => this.selectable(option) ? this.typeAheadPointer = index : null,
@@ -333,7 +337,7 @@
e.preventDefault();
e.stopPropagation();
return this.selectable(option) ? this.select(option) : null;
}
},
},
};
},
@@ -341,7 +345,7 @@
getOptionDeselectScope: {
type: Function,
default(option) {
default (option) {
return {
component: childComponents.Deselect,
bindings: {
@@ -353,9 +357,9 @@
},
events: {
'click': () => this.deselect(option),
}
}
}
},
};
},
},
/**
@@ -1017,11 +1021,38 @@
'keydown': this.onSearchKeyDown,
'blur': this.onSearchBlur,
'focus': this.onSearchFocus,
'input': (e) => this.search = e.target.value
'input': (e) => this.search = e.target.value,
},
},
clear: {
component: this.childComponents.Deselect,
bindings: {
'disabled': this.disabled,
'type': 'button',
'class': 'vs__clear',
'title': 'Clear Selection',
'style': { 'display': this.showClearButton ? 'block': 'none' }
},
events: {
'click': () => this.clearSelection(),
},
},
noOptions: {
text: 'Sorry, no options',
options: this.scopedOptions,
search: this.search,
attributes: {
class: 'vs__no-options',
},
events: {
mousedown: e => e.stopPropagation(),
},
},
spinner: {
loading: this.mutableLoading
loading: this.mutableLoading,
bindings: {
'class': 'vs__spinner',
},
},
openIndicator: {
attributes: {
@@ -1123,7 +1154,7 @@
},
scopedOptions() {
return this.filteredOptions.map((option, index) => this.getDropdownOptionScope(this.normalizeOptionForSlot(option), index));
return this.filteredOptions.map((option, index) => this.getOptionScope(option, index));
},
/**