toesbieya
6 years ago
parent
a949d6e10a
commit
da733309d0
@ -1,844 +0,0 @@ |
|||||||
<template> |
|
||||||
<div |
|
||||||
v-clickoutside="handleClose" |
|
||||||
class="el-select" |
|
||||||
:class="[selectSize ? 'el-select--' + selectSize : '']" |
|
||||||
@click.stop="toggleMenu" |
|
||||||
> |
|
||||||
<div |
|
||||||
v-if="multiple" |
|
||||||
ref="tags" |
|
||||||
class="el-select__tags" |
|
||||||
:style="{ 'max-width': inputWidth - 32 + 'px', width: '100%' }" |
|
||||||
> |
|
||||||
|
|
||||||
<transition-group @after-leave="resetInputHeight"> |
|
||||||
<el-tag |
|
||||||
v-for="item in selected" |
|
||||||
:key="getValueKey(item)" |
|
||||||
:closable="!selectDisabled" |
|
||||||
:size="collapseTagSize" |
|
||||||
:hit="item.hitState" |
|
||||||
type="info" |
|
||||||
@close="deleteTag($event, item)" |
|
||||||
disable-transitions |
|
||||||
> |
|
||||||
<span class="el-select__tags-text">{{ item.currentLabel }}</span> |
|
||||||
</el-tag> |
|
||||||
</transition-group> |
|
||||||
<input |
|
||||||
type="text" |
|
||||||
class="el-select__input" |
|
||||||
:class="[selectSize ? `is-${ selectSize }` : '']" |
|
||||||
:disabled="selectDisabled" |
|
||||||
:autocomplete="autocomplete" |
|
||||||
@focus="handleFocus" |
|
||||||
@blur="softFocus = false" |
|
||||||
@keyup="managePlaceholder" |
|
||||||
@keydown="resetInputState" |
|
||||||
@keydown.down.prevent="navigateOptions('next')" |
|
||||||
@keydown.up.prevent="navigateOptions('prev')" |
|
||||||
@keydown.enter.prevent="selectOption" |
|
||||||
@keydown.esc.stop.prevent="visible = false" |
|
||||||
@keydown.delete="deletePrevTag" |
|
||||||
@keydown.tab="visible = false" |
|
||||||
@compositionstart="handleComposition" |
|
||||||
@compositionupdate="handleComposition" |
|
||||||
@compositionend="handleComposition" |
|
||||||
v-model="query" |
|
||||||
@input="debouncedQueryChange" |
|
||||||
v-if="filterable" |
|
||||||
:style="{ 'flex-grow': '1', width: inputLength / (inputWidth - 32) + '%', 'max-width': inputWidth - 42 + 'px' }" |
|
||||||
ref="input"> |
|
||||||
</div> |
|
||||||
<el-input |
|
||||||
ref="reference" |
|
||||||
v-model="selectedLabel" |
|
||||||
type="text" |
|
||||||
:placeholder="currentPlaceholder" |
|
||||||
:name="name" |
|
||||||
:id="id" |
|
||||||
:autocomplete="autocomplete" |
|
||||||
:size="selectSize" |
|
||||||
:disabled="selectDisabled" |
|
||||||
:readonly="readonly" |
|
||||||
:validate-event="false" |
|
||||||
:class="{ 'is-focus': visible }" |
|
||||||
:tabindex="(multiple && filterable) ? '-1' : null" |
|
||||||
@focus="handleFocus" |
|
||||||
@blur="handleBlur" |
|
||||||
@keyup.native="debouncedOnInputChange" |
|
||||||
@keydown.native.down.stop.prevent="navigateOptions('next')" |
|
||||||
@keydown.native.up.stop.prevent="navigateOptions('prev')" |
|
||||||
@keydown.native.enter.prevent="selectOption" |
|
||||||
@keydown.native.esc.stop.prevent="visible = false" |
|
||||||
@keydown.native.tab="visible = false" |
|
||||||
@paste.native="debouncedOnInputChange" |
|
||||||
@mouseenter.native="inputHovering = true" |
|
||||||
@mouseleave.native="inputHovering = false"> |
|
||||||
<template slot="prefix" v-if="$slots.prefix"> |
|
||||||
<slot name="prefix"/> |
|
||||||
</template> |
|
||||||
<template slot="suffix"> |
|
||||||
<i v-show="!showClose" :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"/> |
|
||||||
<i v-if="showClose" class="el-select__caret el-input__icon el-icon-circle-close" |
|
||||||
@click="handleClearClick"/> |
|
||||||
</template> |
|
||||||
</el-input> |
|
||||||
<transition :name="transition" @before-enter="handleMenuEnter" @after-leave="doDestroy"> |
|
||||||
<el-select-menu |
|
||||||
v-show="visible && emptyText !== false" |
|
||||||
placement="bottom" |
|
||||||
:append-to-body="popperAppendToBody" |
|
||||||
> |
|
||||||
<el-scrollbar |
|
||||||
ref="scrollbar" |
|
||||||
v-show="options.length > 0 && !loading" |
|
||||||
:class="{ 'is-empty': !allowCreate && query && filteredOptionsCount === 0 }" |
|
||||||
tag="ul" |
|
||||||
wrap-class="el-select-dropdown__wrap" |
|
||||||
view-class="el-select-dropdown__list" |
|
||||||
> |
|
||||||
<el-option v-if="showNewOption" :value="query" created/> |
|
||||||
<slot/> |
|
||||||
</el-scrollbar> |
|
||||||
<template v-if="emptyText && (!allowCreate || loading || (allowCreate && options.length === 0 ))"> |
|
||||||
<slot name="empty" v-if="$slots.empty"/> |
|
||||||
<p class="el-select-dropdown__empty" v-else>{{ emptyText }}</p> |
|
||||||
</template> |
|
||||||
</el-select-menu> |
|
||||||
</transition> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Emitter from 'element-ui/lib/mixins/emitter' |
|
||||||
import Focus from 'element-ui/lib/mixins/focus' |
|
||||||
import Locale from 'element-ui/lib/mixins/locale' |
|
||||||
import ElSelectMenu from './SelectDropdown.vue' |
|
||||||
import {debounce} from '@/util' |
|
||||||
import Clickoutside from 'element-ui/lib/utils/clickoutside' |
|
||||||
import {addResizeListener, removeResizeListener} from 'element-ui/lib/utils/resize-event' |
|
||||||
import {t} from 'element-ui/lib/locale' |
|
||||||
import scrollIntoView from 'element-ui/lib/utils/scroll-into-view' |
|
||||||
import {getValueByPath, isEdge, isIE, valueEquals} from 'element-ui/lib/utils/util' |
|
||||||
import NavigationMixin from 'element-ui/packages/select/src/navigation-mixin' |
|
||||||
import {isKorean} from 'element-ui/lib/utils/shared' |
|
||||||
|
|
||||||
export default { |
|
||||||
mixins: [Emitter, Locale, Focus('reference'), NavigationMixin], |
|
||||||
|
|
||||||
name: 'ElSelect', |
|
||||||
|
|
||||||
componentName: 'ElSelect', |
|
||||||
|
|
||||||
inject: { |
|
||||||
elForm: { |
|
||||||
default: '' |
|
||||||
}, |
|
||||||
|
|
||||||
elFormItem: { |
|
||||||
default: '' |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
provide() { |
|
||||||
return { |
|
||||||
'select': this |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
components: {ElSelectMenu}, |
|
||||||
|
|
||||||
directives: {Clickoutside}, |
|
||||||
|
|
||||||
props: { |
|
||||||
name: String, |
|
||||||
id: String, |
|
||||||
value: {required: true}, |
|
||||||
transition: {type: String, default: 'el-zoom-in-top'}, |
|
||||||
autocomplete: {type: String, default: 'off'}, |
|
||||||
automaticDropdown: Boolean, |
|
||||||
size: String, |
|
||||||
disabled: Boolean, |
|
||||||
clearable: Boolean, |
|
||||||
filterable: Boolean, |
|
||||||
allowCreate: Boolean, |
|
||||||
loading: Boolean, |
|
||||||
popperClass: String, |
|
||||||
remote: Boolean, |
|
||||||
loadingText: String, |
|
||||||
noMatchText: String, |
|
||||||
noDataText: String, |
|
||||||
remoteMethod: Function, |
|
||||||
filterMethod: Function, |
|
||||||
multiple: Boolean, |
|
||||||
multipleLimit: {type: Number, default: 0}, |
|
||||||
placeholder: { |
|
||||||
type: String, |
|
||||||
default() { |
|
||||||
return t('el.select.placeholder') |
|
||||||
} |
|
||||||
}, |
|
||||||
defaultFirstOption: Boolean, |
|
||||||
reserveKeyword: Boolean, |
|
||||||
valueKey: {type: String, default: 'value'}, |
|
||||||
popperAppendToBody: Boolean |
|
||||||
}, |
|
||||||
|
|
||||||
data() { |
|
||||||
return { |
|
||||||
options: [], |
|
||||||
cachedOptions: [], |
|
||||||
createdLabel: null, |
|
||||||
createdSelected: false, |
|
||||||
selected: this.multiple ? [] : {}, |
|
||||||
inputLength: 20, |
|
||||||
inputWidth: 0, |
|
||||||
initialInputHeight: 0, |
|
||||||
cachedPlaceHolder: '', |
|
||||||
optionsCount: 0, |
|
||||||
filteredOptionsCount: 0, |
|
||||||
visible: false, |
|
||||||
softFocus: false, |
|
||||||
selectedLabel: '', |
|
||||||
hoverIndex: -1, |
|
||||||
query: '', |
|
||||||
previousQuery: null, |
|
||||||
inputHovering: false, |
|
||||||
currentPlaceholder: '', |
|
||||||
menuVisibleOnFocus: false, |
|
||||||
isOnComposition: false, |
|
||||||
isSilentBlur: false |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
computed: { |
|
||||||
_elFormItemSize() { |
|
||||||
return (this.elFormItem || {}).elFormItemSize |
|
||||||
}, |
|
||||||
|
|
||||||
readonly() { |
|
||||||
return !this.filterable || this.multiple || (!isIE() && !isEdge() && !this.visible) |
|
||||||
}, |
|
||||||
|
|
||||||
showClose() { |
|
||||||
let hasValue = this.multiple |
|
||||||
? Array.isArray(this.value) && this.value.length > 0 |
|
||||||
: this.value !== undefined && this.value !== null && this.value !== '' |
|
||||||
return this.clearable && |
|
||||||
!this.selectDisabled && |
|
||||||
this.inputHovering && |
|
||||||
hasValue |
|
||||||
}, |
|
||||||
|
|
||||||
iconClass() { |
|
||||||
return this.remote && this.filterable ? '' : (this.visible ? 'arrow-up is-reverse' : 'arrow-up') |
|
||||||
}, |
|
||||||
|
|
||||||
debounce() { |
|
||||||
return this.remote ? 300 : 0 |
|
||||||
}, |
|
||||||
|
|
||||||
emptyText() { |
|
||||||
if (this.loading) { |
|
||||||
return this.loadingText || this.t('el.select.loading') |
|
||||||
} |
|
||||||
else { |
|
||||||
if (this.remote && this.query === '' && this.options.length === 0) return false |
|
||||||
if (this.filterable && this.query && this.options.length > 0 && this.filteredOptionsCount === 0) { |
|
||||||
return this.noMatchText || this.t('el.select.noMatch') |
|
||||||
} |
|
||||||
if (this.options.length === 0) { |
|
||||||
return this.noDataText || this.t('el.select.noData') |
|
||||||
} |
|
||||||
} |
|
||||||
return null |
|
||||||
}, |
|
||||||
|
|
||||||
showNewOption() { |
|
||||||
let hasExistingOption = this.options.filter(option => !option.created) |
|
||||||
.some(option => option.currentLabel === this.query) |
|
||||||
return this.filterable && this.allowCreate && this.query !== '' && !hasExistingOption |
|
||||||
}, |
|
||||||
|
|
||||||
selectSize() { |
|
||||||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size |
|
||||||
}, |
|
||||||
|
|
||||||
selectDisabled() { |
|
||||||
return this.disabled || (this.elForm || {}).disabled |
|
||||||
}, |
|
||||||
|
|
||||||
collapseTagSize() { |
|
||||||
return ['small', 'mini'].indexOf(this.selectSize) > -1 |
|
||||||
? 'mini' |
|
||||||
: 'small' |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
watch: { |
|
||||||
selectDisabled() { |
|
||||||
this.$nextTick(() => { |
|
||||||
this.resetInputHeight() |
|
||||||
}) |
|
||||||
}, |
|
||||||
|
|
||||||
placeholder(val) { |
|
||||||
this.cachedPlaceHolder = this.currentPlaceholder = val |
|
||||||
}, |
|
||||||
|
|
||||||
value(val, oldVal) { |
|
||||||
if (this.multiple) { |
|
||||||
this.resetInputHeight() |
|
||||||
if ((val && val.length > 0) || (this.$refs.input && this.query !== '')) { |
|
||||||
this.currentPlaceholder = '' |
|
||||||
} |
|
||||||
else { |
|
||||||
this.currentPlaceholder = this.cachedPlaceHolder |
|
||||||
} |
|
||||||
if (this.filterable && !this.reserveKeyword) { |
|
||||||
this.query = '' |
|
||||||
this.handleQueryChange(this.query) |
|
||||||
} |
|
||||||
} |
|
||||||
this.setSelected() |
|
||||||
if (this.filterable && !this.multiple) { |
|
||||||
this.inputLength = 20 |
|
||||||
} |
|
||||||
if (!valueEquals(val, oldVal)) { |
|
||||||
this.dispatch('ElFormItem', 'el.form.change', val) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
visible(val) { |
|
||||||
if (!val) { |
|
||||||
this.broadcast('ElSelectDropdown', 'destroyPopper') |
|
||||||
if (this.$refs.input) { |
|
||||||
this.$refs.input.blur() |
|
||||||
} |
|
||||||
this.query = '' |
|
||||||
this.previousQuery = null |
|
||||||
this.selectedLabel = '' |
|
||||||
this.inputLength = 20 |
|
||||||
this.menuVisibleOnFocus = false |
|
||||||
this.resetHoverIndex() |
|
||||||
this.$nextTick(() => { |
|
||||||
if (this.$refs.input && |
|
||||||
this.$refs.input.value === '' && |
|
||||||
this.selected.length === 0) { |
|
||||||
this.currentPlaceholder = this.cachedPlaceHolder |
|
||||||
} |
|
||||||
}) |
|
||||||
if (!this.multiple) { |
|
||||||
if (this.selected) { |
|
||||||
if (this.filterable && this.allowCreate && |
|
||||||
this.createdSelected && this.createdLabel) { |
|
||||||
this.selectedLabel = this.createdLabel |
|
||||||
} |
|
||||||
else { |
|
||||||
this.selectedLabel = this.selected.currentLabel |
|
||||||
} |
|
||||||
if (this.filterable) this.query = this.selectedLabel |
|
||||||
} |
|
||||||
|
|
||||||
if (this.filterable) { |
|
||||||
this.currentPlaceholder = this.cachedPlaceHolder |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
else { |
|
||||||
this.broadcast('ElSelectDropdown', 'updatePopper') |
|
||||||
if (this.filterable) { |
|
||||||
this.query = this.remote ? '' : this.selectedLabel |
|
||||||
this.handleQueryChange(this.query) |
|
||||||
if (this.multiple) { |
|
||||||
this.$refs.input.focus() |
|
||||||
} |
|
||||||
else { |
|
||||||
if (!this.remote) { |
|
||||||
this.broadcast('ElOption', 'queryChange', '') |
|
||||||
this.broadcast('ElOptionGroup', 'queryChange') |
|
||||||
} |
|
||||||
|
|
||||||
if (this.selectedLabel) { |
|
||||||
this.currentPlaceholder = this.selectedLabel |
|
||||||
this.selectedLabel = '' |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
this.$emit('visible-change', val) |
|
||||||
}, |
|
||||||
|
|
||||||
options() { |
|
||||||
if (this.$isServer) return |
|
||||||
this.$nextTick(() => { |
|
||||||
this.broadcast('ElSelectDropdown', 'updatePopper') |
|
||||||
}) |
|
||||||
if (this.multiple) { |
|
||||||
this.resetInputHeight() |
|
||||||
} |
|
||||||
let inputs = this.$el.querySelectorAll('input') |
|
||||||
if ([].indexOf.call(inputs, document.activeElement) === -1) { |
|
||||||
this.setSelected() |
|
||||||
} |
|
||||||
if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) { |
|
||||||
this.checkDefaultFirstOption() |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
methods: { |
|
||||||
handleComposition(event) { |
|
||||||
const text = event.target.value |
|
||||||
if (event.type === 'compositionend') { |
|
||||||
this.isOnComposition = false |
|
||||||
this.$nextTick(_ => this.handleQueryChange(text)) |
|
||||||
} |
|
||||||
else { |
|
||||||
const lastCharacter = text[text.length - 1] || '' |
|
||||||
this.isOnComposition = !isKorean(lastCharacter) |
|
||||||
} |
|
||||||
}, |
|
||||||
handleQueryChange(val) { |
|
||||||
if (this.previousQuery === val || this.isOnComposition) return |
|
||||||
if ( |
|
||||||
this.previousQuery === null && |
|
||||||
(typeof this.filterMethod === 'function' || typeof this.remoteMethod === 'function') |
|
||||||
) { |
|
||||||
this.previousQuery = val |
|
||||||
return |
|
||||||
} |
|
||||||
this.previousQuery = val |
|
||||||
this.$nextTick(() => { |
|
||||||
if (this.visible) this.broadcast('ElSelectDropdown', 'updatePopper') |
|
||||||
}) |
|
||||||
this.hoverIndex = -1 |
|
||||||
if (this.multiple && this.filterable) { |
|
||||||
this.$nextTick(() => { |
|
||||||
this.inputLength = this.$refs.input.value.length * 15 + 20 |
|
||||||
this.managePlaceholder() |
|
||||||
this.resetInputHeight() |
|
||||||
}) |
|
||||||
} |
|
||||||
if (this.remote && typeof this.remoteMethod === 'function') { |
|
||||||
this.hoverIndex = -1 |
|
||||||
this.remoteMethod(val) |
|
||||||
} |
|
||||||
else if (typeof this.filterMethod === 'function') { |
|
||||||
this.filterMethod(val) |
|
||||||
this.broadcast('ElOptionGroup', 'queryChange') |
|
||||||
} |
|
||||||
else { |
|
||||||
this.filteredOptionsCount = this.optionsCount |
|
||||||
this.broadcast('ElOption', 'queryChange', val) |
|
||||||
this.broadcast('ElOptionGroup', 'queryChange') |
|
||||||
} |
|
||||||
if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) { |
|
||||||
this.checkDefaultFirstOption() |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
scrollToOption(option) { |
|
||||||
const target = Array.isArray(option) && option[0] ? option[0].$el : option.$el |
|
||||||
if (this.$refs.popper && target) { |
|
||||||
const menu = this.$refs.popper.$el.querySelector('.el-select-dropdown__wrap') |
|
||||||
scrollIntoView(menu, target) |
|
||||||
} |
|
||||||
this.$refs.scrollbar && this.$refs.scrollbar.handleScroll() |
|
||||||
}, |
|
||||||
|
|
||||||
handleMenuEnter() { |
|
||||||
this.$nextTick(() => this.scrollToOption(this.selected)) |
|
||||||
}, |
|
||||||
|
|
||||||
emitChange(val) { |
|
||||||
if (!valueEquals(this.value, val)) { |
|
||||||
this.$emit('change', val) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
getOption(value) { |
|
||||||
const type = v => Object.prototype.toString.call(v).toLowerCase() |
|
||||||
const isObject = type(value) === '[object object]' |
|
||||||
const isNull = type(value) === '[object null]' |
|
||||||
const isUndefined = type(value) === '[object undefined]' |
|
||||||
|
|
||||||
for (let i = this.cachedOptions.length - 1; i >= 0; i--) { |
|
||||||
const cachedOption = this.cachedOptions[i] |
|
||||||
const isEqual = isObject |
|
||||||
? getValueByPath(cachedOption.value, this.valueKey) === getValueByPath(value, this.valueKey) |
|
||||||
: cachedOption.value === value |
|
||||||
if (isEqual) return cachedOption |
|
||||||
} |
|
||||||
|
|
||||||
const label = (!isObject && !isNull && !isUndefined) ? value : '' |
|
||||||
const newOption = { |
|
||||||
value: value, |
|
||||||
currentLabel: label |
|
||||||
} |
|
||||||
if (this.multiple) { |
|
||||||
newOption.hitState = false |
|
||||||
} |
|
||||||
return newOption |
|
||||||
}, |
|
||||||
|
|
||||||
setSelected() { |
|
||||||
if (!this.multiple) { |
|
||||||
let option = this.getOption(this.value) |
|
||||||
if (option.created) { |
|
||||||
this.createdLabel = option.currentLabel |
|
||||||
this.createdSelected = true |
|
||||||
} |
|
||||||
else { |
|
||||||
this.createdSelected = false |
|
||||||
} |
|
||||||
this.selectedLabel = option.currentLabel |
|
||||||
this.selected = option |
|
||||||
if (this.filterable) this.query = this.selectedLabel |
|
||||||
return |
|
||||||
} |
|
||||||
let result = [] |
|
||||||
if (Array.isArray(this.value)) { |
|
||||||
this.value.forEach(value => { |
|
||||||
result.push(this.getOption(value)) |
|
||||||
}) |
|
||||||
} |
|
||||||
this.selected = result |
|
||||||
this.$nextTick(() => this.resetInputHeight()) |
|
||||||
}, |
|
||||||
|
|
||||||
handleFocus(event) { |
|
||||||
if (!this.softFocus) { |
|
||||||
if (this.automaticDropdown || this.filterable) { |
|
||||||
this.visible = true |
|
||||||
if (this.filterable) { |
|
||||||
this.menuVisibleOnFocus = true |
|
||||||
} |
|
||||||
} |
|
||||||
this.$emit('focus', event) |
|
||||||
} |
|
||||||
else { |
|
||||||
this.softFocus = false |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
blur() { |
|
||||||
this.visible = false |
|
||||||
this.$refs.reference.blur() |
|
||||||
}, |
|
||||||
|
|
||||||
handleBlur(event) { |
|
||||||
setTimeout(() => { |
|
||||||
if (this.isSilentBlur) { |
|
||||||
this.isSilentBlur = false |
|
||||||
} |
|
||||||
else { |
|
||||||
this.$emit('blur', event) |
|
||||||
} |
|
||||||
}, 50) |
|
||||||
this.softFocus = false |
|
||||||
}, |
|
||||||
|
|
||||||
handleClearClick(event) { |
|
||||||
this.deleteSelected(event) |
|
||||||
}, |
|
||||||
|
|
||||||
doDestroy() { |
|
||||||
this.$refs.popper && this.$refs.popper.doDestroy() |
|
||||||
}, |
|
||||||
|
|
||||||
handleClose() { |
|
||||||
this.visible = false |
|
||||||
}, |
|
||||||
|
|
||||||
toggleLastOptionHitState(hit) { |
|
||||||
if (!Array.isArray(this.selected)) return |
|
||||||
const option = this.selected[this.selected.length - 1] |
|
||||||
if (!option) return |
|
||||||
|
|
||||||
if (hit === true || hit === false) { |
|
||||||
option.hitState = hit |
|
||||||
return hit |
|
||||||
} |
|
||||||
|
|
||||||
option.hitState = !option.hitState |
|
||||||
return option.hitState |
|
||||||
}, |
|
||||||
|
|
||||||
deletePrevTag(e) { |
|
||||||
if (e.target.value.length <= 0 && !this.toggleLastOptionHitState()) { |
|
||||||
const value = this.value.slice() |
|
||||||
value.pop() |
|
||||||
this.$emit('input', value) |
|
||||||
this.emitChange(value) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
managePlaceholder() { |
|
||||||
if (this.currentPlaceholder !== '') { |
|
||||||
this.currentPlaceholder = this.$refs.input.value ? '' : this.cachedPlaceHolder |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
resetInputState(e) { |
|
||||||
if (e.keyCode !== 8) this.toggleLastOptionHitState(false) |
|
||||||
this.inputLength = this.$refs.input.value.length * 15 + 20 |
|
||||||
this.resetInputHeight() |
|
||||||
}, |
|
||||||
|
|
||||||
resetInputHeight() { |
|
||||||
this.$nextTick(() => { |
|
||||||
if (!this.$refs.reference) return |
|
||||||
let inputChildNodes = this.$refs.reference.$el.childNodes |
|
||||||
let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0] |
|
||||||
const tags = this.$refs.tags |
|
||||||
const sizeInMap = this.initialInputHeight || 40 |
|
||||||
input.style.height = this.selected.length === 0 |
|
||||||
? sizeInMap + 'px' |
|
||||||
: Math.max( |
|
||||||
tags ? (tags.clientHeight + (tags.clientHeight > sizeInMap ? 6 : 0)) : 0, |
|
||||||
sizeInMap |
|
||||||
) + 'px' |
|
||||||
if (this.visible && this.emptyText !== false) { |
|
||||||
this.broadcast('ElSelectDropdown', 'updatePopper') |
|
||||||
} |
|
||||||
}) |
|
||||||
}, |
|
||||||
|
|
||||||
resetHoverIndex() { |
|
||||||
setTimeout(() => { |
|
||||||
if (!this.multiple) { |
|
||||||
this.hoverIndex = this.options.indexOf(this.selected) |
|
||||||
} |
|
||||||
else { |
|
||||||
if (this.selected.length > 0) { |
|
||||||
this.hoverIndex = Math.min.apply(null, this.selected.map(item => this.options.indexOf(item))) |
|
||||||
} |
|
||||||
else { |
|
||||||
this.hoverIndex = -1 |
|
||||||
} |
|
||||||
} |
|
||||||
}, 300) |
|
||||||
}, |
|
||||||
|
|
||||||
handleOptionSelect(option, byClick) { |
|
||||||
if (this.multiple) { |
|
||||||
const value = (this.value || []).slice() |
|
||||||
const optionIndex = this.getValueIndex(value, option.value) |
|
||||||
if (optionIndex > -1) { |
|
||||||
value.splice(optionIndex, 1) |
|
||||||
} |
|
||||||
else if (this.multipleLimit <= 0 || value.length < this.multipleLimit) { |
|
||||||
value.push(option.value) |
|
||||||
} |
|
||||||
this.$emit('input', value) |
|
||||||
this.emitChange(value) |
|
||||||
if (option.created) { |
|
||||||
this.query = '' |
|
||||||
this.handleQueryChange('') |
|
||||||
this.inputLength = 20 |
|
||||||
} |
|
||||||
if (this.filterable) this.$refs.input.focus() |
|
||||||
} |
|
||||||
else { |
|
||||||
this.$emit('input', option.value) |
|
||||||
this.emitChange(option.value) |
|
||||||
this.visible = false |
|
||||||
} |
|
||||||
this.isSilentBlur = byClick |
|
||||||
this.setSoftFocus() |
|
||||||
if (this.visible) return |
|
||||||
this.$nextTick(() => { |
|
||||||
this.scrollToOption(option) |
|
||||||
}) |
|
||||||
}, |
|
||||||
|
|
||||||
setSoftFocus() { |
|
||||||
this.softFocus = true |
|
||||||
const input = this.$refs.input || this.$refs.reference |
|
||||||
if (input) { |
|
||||||
input.focus() |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
getValueIndex(arr = [], value) { |
|
||||||
const isObject = Object.prototype.toString.call(value).toLowerCase() === '[object object]' |
|
||||||
if (!isObject) { |
|
||||||
return arr.indexOf(value) |
|
||||||
} |
|
||||||
else { |
|
||||||
const valueKey = this.valueKey |
|
||||||
let index = -1 |
|
||||||
arr.some((item, i) => { |
|
||||||
if (getValueByPath(item, valueKey) === getValueByPath(value, valueKey)) { |
|
||||||
index = i |
|
||||||
return true |
|
||||||
} |
|
||||||
return false |
|
||||||
}) |
|
||||||
return index |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
toggleMenu() { |
|
||||||
if (!this.selectDisabled) { |
|
||||||
if (this.menuVisibleOnFocus) { |
|
||||||
this.menuVisibleOnFocus = false |
|
||||||
} |
|
||||||
else { |
|
||||||
this.visible = !this.visible |
|
||||||
} |
|
||||||
if (this.visible) { |
|
||||||
(this.$refs.input || this.$refs.reference).focus() |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
selectOption() { |
|
||||||
if (!this.visible) { |
|
||||||
this.toggleMenu() |
|
||||||
} |
|
||||||
else { |
|
||||||
if (this.options[this.hoverIndex]) { |
|
||||||
this.handleOptionSelect(this.options[this.hoverIndex]) |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
deleteSelected(event) { |
|
||||||
event.stopPropagation() |
|
||||||
const value = this.multiple ? [] : '' |
|
||||||
this.$emit('input', value) |
|
||||||
this.emitChange(value) |
|
||||||
this.visible = false |
|
||||||
this.$emit('clear') |
|
||||||
}, |
|
||||||
|
|
||||||
deleteTag(event, tag) { |
|
||||||
const index = this.selected.indexOf(tag) |
|
||||||
if (index > -1 && !this.selectDisabled) { |
|
||||||
const value = this.value.slice() |
|
||||||
value.splice(index, 1) |
|
||||||
this.$emit('input', value) |
|
||||||
this.emitChange(value) |
|
||||||
this.$emit('remove-tag', tag.value) |
|
||||||
} |
|
||||||
event.stopPropagation() |
|
||||||
}, |
|
||||||
|
|
||||||
onInputChange() { |
|
||||||
if (this.filterable && this.query !== this.selectedLabel) { |
|
||||||
this.query = this.selectedLabel |
|
||||||
this.handleQueryChange(this.query) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
onOptionDestroy(index) { |
|
||||||
if (index > -1) { |
|
||||||
this.optionsCount-- |
|
||||||
this.filteredOptionsCount-- |
|
||||||
this.options.splice(index, 1) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
resetInputWidth() { |
|
||||||
this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width |
|
||||||
}, |
|
||||||
|
|
||||||
handleResize() { |
|
||||||
this.resetInputWidth() |
|
||||||
if (this.multiple) this.resetInputHeight() |
|
||||||
}, |
|
||||||
|
|
||||||
checkDefaultFirstOption() { |
|
||||||
this.hoverIndex = -1 |
|
||||||
// highlight the created option |
|
||||||
let hasCreated = false |
|
||||||
for (let i = this.options.length - 1; i >= 0; i--) { |
|
||||||
if (this.options[i].created) { |
|
||||||
hasCreated = true |
|
||||||
this.hoverIndex = i |
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
if (hasCreated) return |
|
||||||
for (let i = 0; i !== this.options.length; ++i) { |
|
||||||
const option = this.options[i] |
|
||||||
if (this.query) { |
|
||||||
// highlight first options that passes the filter |
|
||||||
if (!option.disabled && !option.groupDisabled && option.visible) { |
|
||||||
this.hoverIndex = i |
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
else { |
|
||||||
// highlight currently selected option |
|
||||||
if (option.itemSelected) { |
|
||||||
this.hoverIndex = i |
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
getValueKey(item) { |
|
||||||
if (Object.prototype.toString.call(item.value).toLowerCase() !== '[object object]') { |
|
||||||
return item.value |
|
||||||
} |
|
||||||
else { |
|
||||||
return getValueByPath(item.value, this.valueKey) |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
created() { |
|
||||||
this.cachedPlaceHolder = this.currentPlaceholder = this.placeholder |
|
||||||
if (this.multiple && !Array.isArray(this.value)) { |
|
||||||
this.$emit('input', []) |
|
||||||
} |
|
||||||
if (!this.multiple && Array.isArray(this.value)) { |
|
||||||
this.$emit('input', '') |
|
||||||
} |
|
||||||
|
|
||||||
this.debouncedOnInputChange = debounce(this.onInputChange, this.debounce) |
|
||||||
|
|
||||||
this.debouncedQueryChange = debounce(e => this.handleQueryChange(e.target.value), this.debounce) |
|
||||||
|
|
||||||
this.$on('handleOptionClick', this.handleOptionSelect) |
|
||||||
this.$on('setSelected', this.setSelected) |
|
||||||
}, |
|
||||||
|
|
||||||
mounted() { |
|
||||||
if (this.multiple && Array.isArray(this.value) && this.value.length > 0) { |
|
||||||
this.currentPlaceholder = '' |
|
||||||
} |
|
||||||
addResizeListener(this.$el, this.handleResize) |
|
||||||
|
|
||||||
const reference = this.$refs.reference |
|
||||||
if (reference && reference.$el) { |
|
||||||
const sizeMap = { |
|
||||||
medium: 36, |
|
||||||
small: 32, |
|
||||||
mini: 28 |
|
||||||
} |
|
||||||
const input = reference.$el.querySelector('input') |
|
||||||
this.initialInputHeight = input.getBoundingClientRect().height || sizeMap[this.selectSize] |
|
||||||
} |
|
||||||
if (this.remote && this.multiple) { |
|
||||||
this.resetInputHeight() |
|
||||||
} |
|
||||||
this.$nextTick(() => { |
|
||||||
if (reference && reference.$el) { |
|
||||||
this.inputWidth = reference.$el.getBoundingClientRect().width |
|
||||||
} |
|
||||||
}) |
|
||||||
this.setSelected() |
|
||||||
}, |
|
||||||
|
|
||||||
beforeDestroy() { |
|
||||||
if (this.$el && this.handleResize) removeResizeListener(this.$el, this.handleResize) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,48 +0,0 @@ |
|||||||
<template> |
|
||||||
<div |
|
||||||
class="el-select-dropdown el-popper" |
|
||||||
:class="[{ 'is-multiple': $parent.multiple }, popperClass]" |
|
||||||
:style="{ minWidth }" |
|
||||||
> |
|
||||||
<slot/> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script type="text/babel"> |
|
||||||
import Popper from '@ele/mixin/vue-popper' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'ElSelectDropdown', |
|
||||||
|
|
||||||
componentName: 'ElSelectDropdown', |
|
||||||
|
|
||||||
mixins: [Popper], |
|
||||||
|
|
||||||
data() { |
|
||||||
return { |
|
||||||
minWidth: '' |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
computed: { |
|
||||||
popperClass() { |
|
||||||
return this.$parent.popperClass |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
watch: { |
|
||||||
'$parent.inputWidth'() { |
|
||||||
this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px' |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
mounted() { |
|
||||||
this.referenceElm = this.$parent.$refs.reference.$el |
|
||||||
this.$parent.popperElm = this.popperElm = this.$el |
|
||||||
this.$on('updatePopper', () => { |
|
||||||
this.$parent.visible && this.updatePopper() |
|
||||||
}) |
|
||||||
this.$on('destroyPopper', this.destroyPopper) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,166 +0,0 @@ |
|||||||
import {PopupManager} from 'element-ui/lib/utils/popup' |
|
||||||
|
|
||||||
//import PopperJS from 'popper.js'
|
|
||||||
//import * as PopperJS from '@popperjs/core'
|
|
||||||
|
|
||||||
const POPPER_VERSION = 'v1' |
|
||||||
|
|
||||||
if (POPPER_VERSION === 'v2') { |
|
||||||
console.warn = () => ({}) |
|
||||||
} |
|
||||||
|
|
||||||
const stop = e => e.stopPropagation() |
|
||||||
|
|
||||||
const defaultOptions = () => { |
|
||||||
return POPPER_VERSION === 'v2' ? {modifiers: []} : {modifiers: {computeStyle: {gpuAcceleration: false}}} |
|
||||||
} |
|
||||||
|
|
||||||
export default { |
|
||||||
props: { |
|
||||||
transformOrigin: {type: [Boolean, String], default: true}, |
|
||||||
placement: {type: String, default: 'bottom'}, |
|
||||||
boundariesPadding: {type: Number, default: 5}, |
|
||||||
reference: {}, |
|
||||||
popper: {}, |
|
||||||
offset: {type: Number, default: POPPER_VERSION === 'v2' ? 12 : 0}, |
|
||||||
value: Boolean, |
|
||||||
visibleArrow: {type: Boolean, default: true}, |
|
||||||
arrowOffset: {type: Number, default: 35}, |
|
||||||
appendToBody: {type: Boolean, default: true}, |
|
||||||
popperOptions: {type: Object, default: defaultOptions} |
|
||||||
}, |
|
||||||
|
|
||||||
data() { |
|
||||||
return { |
|
||||||
showPopper: this.value |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
watch: { |
|
||||||
value: { |
|
||||||
immediate: true, |
|
||||||
handler(val) { |
|
||||||
this.showPopper = val |
|
||||||
this.$emit('input', val) |
|
||||||
if (this.disabled) return |
|
||||||
val ? this.updatePopper() : this.destroyPopper() |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
methods: { |
|
||||||
createPopper() { |
|
||||||
if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) { |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
const options = this.popperOptions |
|
||||||
const popper = this.popperElm = this.popperElm || this.popper || this.$refs.popper |
|
||||||
let reference = this.referenceElm = this.referenceElm || this.reference || this.$refs.reference |
|
||||||
|
|
||||||
if (!reference && this.$slots.reference && this.$slots.reference[0]) { |
|
||||||
reference = this.referenceElm = this.$slots.reference[0].elm |
|
||||||
} |
|
||||||
|
|
||||||
if (!popper || !reference) return |
|
||||||
|
|
||||||
if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) { |
|
||||||
this.popperJS.destroy() |
|
||||||
} |
|
||||||
|
|
||||||
if (this.appendToBody) document.body.appendChild(this.popperElm) |
|
||||||
if (this.visibleArrow) this.setArrow() |
|
||||||
this.setOffset(options) |
|
||||||
|
|
||||||
options.placement = this.placement |
|
||||||
const createEvent = POPPER_VERSION === 'v2' ? 'onFirstUpdate' : 'onCreate' |
|
||||||
options[createEvent] = () => { |
|
||||||
this.$emit('created', this) |
|
||||||
this.resetTransformOrigin() |
|
||||||
this.$nextTick(this.updatePopper) |
|
||||||
} |
|
||||||
|
|
||||||
this.popperJS = POPPER_VERSION === 'v2' ? |
|
||||||
PopperJS.createPopper(reference, popper, options) |
|
||||||
: new PopperJS(reference, popper, options) |
|
||||||
|
|
||||||
popper.style.zIndex = PopupManager.nextZIndex() |
|
||||||
this.popperElm.addEventListener('click', stop) |
|
||||||
}, |
|
||||||
|
|
||||||
updatePopper() { |
|
||||||
const popper = this.popperJS |
|
||||||
|
|
||||||
if (!popper) return this.createPopper() |
|
||||||
|
|
||||||
popper.update() |
|
||||||
this.popperElm.style.zIndex = PopupManager.nextZIndex() |
|
||||||
}, |
|
||||||
|
|
||||||
doDestroy(forceDestroy) { |
|
||||||
if (!this.popperJS || (this.showPopper && !forceDestroy)) return |
|
||||||
this.popperJS.destroy() |
|
||||||
this.popperJS = null |
|
||||||
}, |
|
||||||
|
|
||||||
destroyPopper() { |
|
||||||
this.popperJS && this.resetTransformOrigin() |
|
||||||
}, |
|
||||||
|
|
||||||
setOffset(options) { |
|
||||||
if (POPPER_VERSION === 'v2') { |
|
||||||
const modifier = this.popperOptions.modifiers.find(modifier => modifier.name === 'offset'), |
|
||||||
offset = {offset: [0, this.offset]} |
|
||||||
|
|
||||||
if (!modifier) { |
|
||||||
this.popperOptions.modifiers.push({name: 'offset', options: offset}) |
|
||||||
} |
|
||||||
else modifier.options = offset |
|
||||||
} |
|
||||||
else { |
|
||||||
if (!options.modifiers.offset) { |
|
||||||
options.modifiers.offset = {} |
|
||||||
} |
|
||||||
options.modifiers.offset.offset = this.offset |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
setArrow() { |
|
||||||
if (this.appended) return |
|
||||||
this.appended = true |
|
||||||
|
|
||||||
const arrow = document.createElement('div') |
|
||||||
arrow.className = 'popper__arrow' |
|
||||||
arrow.setAttribute(POPPER_VERSION === 'v2' ? 'data-popper-arrow' : 'x-arrow', '') |
|
||||||
const attributes = this.popperElm.attributes |
|
||||||
const key = Object.keys(attributes).find(key => /^_v-/.test(attributes[key].name)) |
|
||||||
if (key) arrow.setAttribute(attributes[key].name, '') |
|
||||||
|
|
||||||
this.popperElm.appendChild(arrow) |
|
||||||
}, |
|
||||||
|
|
||||||
resetTransformOrigin() { |
|
||||||
if (!this.transformOrigin) return |
|
||||||
const placementMap = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'} |
|
||||||
const attr = POPPER_VERSION === 'v2' ? 'data-popper-placement' : 'x-placement' |
|
||||||
const placement = this.popperElm.getAttribute(attr).split('-')[0] |
|
||||||
const origin = placementMap[placement] |
|
||||||
this.popperElm.style.transformOrigin = |
|
||||||
typeof this.transformOrigin === 'string' |
|
||||||
? this.transformOrigin |
|
||||||
: ['top', 'bottom'].includes(placement) ? `center ${origin}` : `${origin} center` |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
deactivated() { |
|
||||||
this.$options.beforeDestroy[0].call(this) |
|
||||||
}, |
|
||||||
|
|
||||||
beforeDestroy() { |
|
||||||
this.doDestroy(true) |
|
||||||
if (this.popperElm && this.popperElm.parentNode === document.body) { |
|
||||||
this.popperElm.removeEventListener('click', stop) |
|
||||||
document.body.removeChild(this.popperElm) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,98 +0,0 @@ |
|||||||
@include b(popper) { |
|
||||||
.popper__arrow, |
|
||||||
.popper__arrow::after { |
|
||||||
position: absolute; |
|
||||||
display: block; |
|
||||||
width: 0; |
|
||||||
height: 0; |
|
||||||
border-color: transparent; |
|
||||||
border-style: solid; |
|
||||||
} |
|
||||||
|
|
||||||
.popper__arrow { |
|
||||||
border-width: $--popover-arrow-size; |
|
||||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)) |
|
||||||
} |
|
||||||
|
|
||||||
.popper__arrow::after { |
|
||||||
content: " "; |
|
||||||
border-width: $--popover-arrow-size; |
|
||||||
} |
|
||||||
|
|
||||||
&[data-popper-placement^="top"] { |
|
||||||
margin-bottom: #{$--popover-arrow-size + 6}; |
|
||||||
} |
|
||||||
|
|
||||||
&[data-popper-placement^="top"] .popper__arrow { |
|
||||||
bottom: -$--popover-arrow-size; |
|
||||||
left: 50%; |
|
||||||
margin-right: #{$--tooltip-arrow-size / 2}; |
|
||||||
border-top-color: $--popover-border-color; |
|
||||||
border-bottom-width: 0; |
|
||||||
|
|
||||||
&::after { |
|
||||||
bottom: 1px; |
|
||||||
margin-left: -$--popover-arrow-size; |
|
||||||
border-top-color: $--popover-background-color; |
|
||||||
border-bottom-width: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&[data-popper-placement^="bottom"] { |
|
||||||
margin-top: #{$--popover-arrow-size + 6}; |
|
||||||
} |
|
||||||
|
|
||||||
&[data-popper-placement^="bottom"] .popper__arrow { |
|
||||||
top: -$--popover-arrow-size; |
|
||||||
left: 50%; |
|
||||||
margin-right: #{$--tooltip-arrow-size / 2}; |
|
||||||
border-top-width: 0; |
|
||||||
border-bottom-color: $--popover-border-color; |
|
||||||
|
|
||||||
&::after { |
|
||||||
top: 1px; |
|
||||||
margin-left: -$--popover-arrow-size; |
|
||||||
border-top-width: 0; |
|
||||||
border-bottom-color: $--popover-background-color; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&[data-popper-placement^="right"] { |
|
||||||
margin-left: #{$--popover-arrow-size + 6}; |
|
||||||
} |
|
||||||
|
|
||||||
&[data-popper-placement^="right"] .popper__arrow { |
|
||||||
top: 50%; |
|
||||||
left: -$--popover-arrow-size; |
|
||||||
margin-bottom: #{$--tooltip-arrow-size / 2}; |
|
||||||
border-right-color: $--popover-border-color; |
|
||||||
border-left-width: 0; |
|
||||||
|
|
||||||
&::after { |
|
||||||
bottom: -$--popover-arrow-size; |
|
||||||
left: 1px; |
|
||||||
border-right-color: $--popover-background-color; |
|
||||||
border-left-width: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&[data-popper-placement^="left"] { |
|
||||||
margin-right: #{$--popover-arrow-size + 6}; |
|
||||||
} |
|
||||||
|
|
||||||
&[data-popper-placement^="left"] .popper__arrow { |
|
||||||
top: 50%; |
|
||||||
right: -$--popover-arrow-size; |
|
||||||
margin-bottom: #{$--tooltip-arrow-size / 2}; |
|
||||||
border-right-width: 0; |
|
||||||
border-left-color: $--popover-border-color; |
|
||||||
|
|
||||||
&::after { |
|
||||||
right: 1px; |
|
||||||
bottom: -$--popover-arrow-size; |
|
||||||
margin-left: -$--popover-arrow-size; |
|
||||||
border-right-width: 0; |
|
||||||
border-left-color: $--popover-background-color; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue