toesbieya
6 years ago
parent
8773a560bd
commit
72ae76bd5f
@ -0,0 +1,884 @@ |
|||||||
|
<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%' }" |
||||||
|
> |
||||||
|
|
||||||
|
<span v-if="collapseTags && selected.length"> |
||||||
|
<el-tag |
||||||
|
:closable="!selectDisabled" |
||||||
|
:size="collapseTagSize" |
||||||
|
:hit="selected[0].hitState" |
||||||
|
type="info" |
||||||
|
@close="deleteTag($event, selected[0])" |
||||||
|
disable-transitions |
||||||
|
> |
||||||
|
<span class="el-select__tags-text">{{ selected[0].currentLabel }}</span> |
||||||
|
</el-tag> |
||||||
|
<el-tag |
||||||
|
v-if="selected.length > 1" |
||||||
|
:closable="false" |
||||||
|
:size="collapseTagSize" |
||||||
|
type="info" |
||||||
|
disable-transitions |
||||||
|
> |
||||||
|
<span class="el-select__tags-text">+ {{ selected.length - 1 }}</span> |
||||||
|
</el-tag> |
||||||
|
</span> |
||||||
|
<transition-group @after-leave="resetInputHeight" v-if="!collapseTags"> |
||||||
|
<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="el-zoom-in-top" @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 '@/utils' |
||||||
|
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 |
||||||
|
}, |
||||||
|
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' |
||||||
|
}, |
||||||
|
collapseTags: Boolean, |
||||||
|
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(() => { |
||||||
|
const length = this.$refs.input.value.length * 15 + 20 |
||||||
|
this.inputLength = this.collapseTags ? Math.min(50, length) : length |
||||||
|
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) { |
||||||
|
let option |
||||||
|
const isObject = Object.prototype.toString.call(value).toLowerCase() === '[object object]' |
||||||
|
const isNull = Object.prototype.toString.call(value).toLowerCase() === '[object null]' |
||||||
|
const isUndefined = Object.prototype.toString.call(value).toLowerCase() === '[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) { |
||||||
|
option = cachedOption |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
if (option) return option |
||||||
|
const label = (!isObject && !isNull && !isUndefined) |
||||||
|
? value : '' |
||||||
|
let 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() { |
||||||
|
if (this.collapseTags && !this.filterable) return |
||||||
|
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) { |
||||||
|
let 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> |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
<template> |
||||||
|
<div |
||||||
|
ref="popper" |
||||||
|
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/mixins/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() |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,163 @@ |
|||||||
|
import {PopupManager} from 'element-ui/lib/utils/popup' |
||||||
|
|
||||||
|
const PopperJS = require('@popperjs/core') |
||||||
|
|
||||||
|
const stop = e => e.stopPropagation() |
||||||
|
|
||||||
|
/** |
||||||
|
* @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper. |
||||||
|
* @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper. |
||||||
|
* @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end) |
||||||
|
* @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative). |
||||||
|
* @param {Boolean} [visible=false] Visibility of the popup element. |
||||||
|
* @param {Boolean} [visible-arrow=false] Visibility of the arrow, no style. |
||||||
|
*/ |
||||||
|
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: 12 |
||||||
|
}, |
||||||
|
value: Boolean, |
||||||
|
visibleArrow: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
arrowOffset: { |
||||||
|
type: Number, |
||||||
|
default: 35 |
||||||
|
}, |
||||||
|
appendToBody: Boolean, |
||||||
|
popperOptions: { |
||||||
|
type: Object, |
||||||
|
default: () => ({modifiers: []}) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
data() { |
||||||
|
return { |
||||||
|
showPopper: this.value |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
watch: { |
||||||
|
value: { |
||||||
|
immediate: true, |
||||||
|
handler(val) { |
||||||
|
if (this.disabled) return |
||||||
|
val && this.updatePopper() |
||||||
|
this.showPopper = val |
||||||
|
this.$emit('input', val) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
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.placement = this.placement |
||||||
|
options.onFirstUpdate = () => { |
||||||
|
this.$emit('created', this) |
||||||
|
this.$nextTick(this.updatePopper) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
this.popperJS = PopperJS.createPopper(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 |
||||||
|
}, |
||||||
|
|
||||||
|
setArrow() { |
||||||
|
if (this.appended) return |
||||||
|
this.appended = true |
||||||
|
|
||||||
|
const arrow = document.createElement('div') |
||||||
|
arrow.className = 'popper__arrow' |
||||||
|
arrow.setAttribute('data-popper-arrow', '') |
||||||
|
|
||||||
|
this.popperElm.appendChild(arrow) |
||||||
|
|
||||||
|
const modifier = this.popperOptions.modifiers.find(modifier => modifier.name === 'arrow'), |
||||||
|
options = {element: '[data-popper-arrow]', padding: this.arrowOffset} |
||||||
|
|
||||||
|
if (!modifier) { |
||||||
|
this.popperOptions.modifiers.push({name: 'arrow', options}) |
||||||
|
} |
||||||
|
else modifier.options = options |
||||||
|
}, |
||||||
|
|
||||||
|
setOffset() { |
||||||
|
const modifier = this.popperOptions.modifiers.find(modifier => modifier.name === 'offset'), |
||||||
|
options = {offset: [0, this.offset]} |
||||||
|
|
||||||
|
if (!modifier) { |
||||||
|
this.popperOptions.modifiers.push({name: 'offset', options}) |
||||||
|
} |
||||||
|
else modifier.options = options |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
beforeDestroy() { |
||||||
|
this.doDestroy(true) |
||||||
|
if (this.popperElm && this.popperElm.parentNode === document.body) { |
||||||
|
this.popperElm.removeEventListener('click', stop) |
||||||
|
document.body.removeChild(this.popperElm) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// call destroy in keep-alive mode
|
||||||
|
deactivated() { |
||||||
|
this.$options.beforeDestroy[0].call(this) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
@import "./message.scss"; |
||||||
|
@import "./popper.scss"; |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
.el-message { |
||||||
|
overflow: visible; |
||||||
|
|
||||||
|
&__badge { |
||||||
|
animation: el-message-badge .42s; |
||||||
|
padding: 4px 8px; |
||||||
|
position: absolute; |
||||||
|
box-shadow: 0 1px 3px rgba(#000, .2), 0 1px 1px rgba(#000, .14), 0 2px 1px -1px rgba(#000, .12); |
||||||
|
background-color: $--color-danger; |
||||||
|
color: #fff; |
||||||
|
border-radius: 4px; |
||||||
|
top: -10px; |
||||||
|
left: -10px; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
&__progress { |
||||||
|
z-index: -1; |
||||||
|
position: absolute; |
||||||
|
height: 3px; |
||||||
|
bottom: 0; |
||||||
|
left: 10px; |
||||||
|
right: 10px; |
||||||
|
animation: el-message-progress linear; |
||||||
|
background: currentColor; |
||||||
|
opacity: .3; |
||||||
|
transform-origin: 0 50%; |
||||||
|
transform: scaleX(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes el-message-badge { |
||||||
|
15% { |
||||||
|
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) |
||||||
|
} |
||||||
|
30% { |
||||||
|
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) |
||||||
|
} |
||||||
|
45% { |
||||||
|
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) |
||||||
|
} |
||||||
|
60% { |
||||||
|
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) |
||||||
|
} |
||||||
|
75% { |
||||||
|
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes el-message-progress { |
||||||
|
0% { |
||||||
|
transform: scaleX(1) |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: scaleX(0) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
@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