Refactor #6538
parent
0223158cfb
commit
9d9ae356d0
|
@ -71,9 +71,9 @@
|
||||||
:optionGroupIcon="optionGroupIcon"
|
:optionGroupIcon="optionGroupIcon"
|
||||||
:optionGroupLabel="optionGroupLabel"
|
:optionGroupLabel="optionGroupLabel"
|
||||||
:optionGroupChildren="optionGroupChildren"
|
:optionGroupChildren="optionGroupChildren"
|
||||||
@option-change="onOptionChange"
|
@option-change="onOptionClick"
|
||||||
@option-focus-move-change="onOptionFocusMoveChange"
|
@option-focus-change="onOptionMouseMove"
|
||||||
@option-focus-enter-change="onOptionFocusChangeEnter"
|
@option-focus-enter-change="onOptionMouseEnter"
|
||||||
:pt="pt"
|
:pt="pt"
|
||||||
:unstyled="unstyled"
|
:unstyled="unstyled"
|
||||||
/>
|
/>
|
||||||
|
@ -304,53 +304,55 @@ export default {
|
||||||
|
|
||||||
this.clicked = false;
|
this.clicked = false;
|
||||||
},
|
},
|
||||||
onOptionChange(event, isSelectable = true) {
|
onOptionChange(event) {
|
||||||
const { originalEvent, processedOption, isFocus, isHide } = event;
|
const { processedOption } = event;
|
||||||
|
|
||||||
if (isEmpty(processedOption)) return;
|
if (isEmpty(processedOption)) return;
|
||||||
|
|
||||||
const { index, key, level, parentKey, children } = processedOption;
|
const { index, key, level, parentKey, children } = processedOption;
|
||||||
const grouped = isNotEmpty(children);
|
const grouped = isNotEmpty(children);
|
||||||
const root = isEmpty(processedOption.parent);
|
const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
|
||||||
|
|
||||||
|
if (grouped) {
|
||||||
|
activeOptionPath.push(processedOption);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.focusedOptionInfo = { index, level, parentKey };
|
||||||
|
this.activeOptionPath = activeOptionPath;
|
||||||
|
},
|
||||||
|
onOptionClick(event) {
|
||||||
|
const { originalEvent, processedOption, isFocus, isHide } = event;
|
||||||
|
const { index, key, level, parentKey } = processedOption;
|
||||||
|
const grouped = this.isProccessedOptionGroup(processedOption);
|
||||||
const selected = this.isSelected(processedOption);
|
const selected = this.isSelected(processedOption);
|
||||||
|
|
||||||
if (selected) {
|
if (selected) {
|
||||||
this.focusedOptionInfo = { index, level, parentKey };
|
|
||||||
this.activeOptionPath = this.activeOptionPath.filter((p) => key !== p.key && key.startsWith(p.key));
|
this.activeOptionPath = this.activeOptionPath.filter((p) => key !== p.key && key.startsWith(p.key));
|
||||||
|
|
||||||
this.dirty = !root;
|
|
||||||
} else {
|
|
||||||
const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
|
|
||||||
|
|
||||||
activeOptionPath.push(processedOption);
|
|
||||||
|
|
||||||
this.focusedOptionInfo = { index, level, parentKey };
|
this.focusedOptionInfo = { index, level, parentKey };
|
||||||
this.activeOptionPath = activeOptionPath;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (grouped) {
|
|
||||||
this.dirty = true;
|
|
||||||
this.onOptionGroupSelect(originalEvent, processedOption);
|
|
||||||
} else {
|
} else {
|
||||||
isSelectable && this.onOptionSelect(originalEvent, processedOption, isHide);
|
if (grouped) {
|
||||||
|
this.onOptionChange(event);
|
||||||
|
} else {
|
||||||
|
const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey);
|
||||||
|
|
||||||
|
activeOptionPath.push(processedOption);
|
||||||
|
|
||||||
|
this.focusedOptionInfo = { index, level, parentKey };
|
||||||
|
this.activeOptionPath = activeOptionPath;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
|
||||||
isFocus && focus(this.$refs.focusInput);
|
isFocus && focus(this.$refs.focusInput);
|
||||||
},
|
},
|
||||||
onOptionFocusMoveChange(event) {
|
onOptionMouseEnter(event) {
|
||||||
if (this.focusOnHover) {
|
if (this.dirty) {
|
||||||
const { originalEvent, processedOption } = event;
|
this.onOptionChange(event);
|
||||||
const { index, level, parentKey } = processedOption;
|
|
||||||
|
|
||||||
this.focusedOptionInfo = { index, level, parentKey };
|
|
||||||
this.changeFocusedOptionIndex(originalEvent, index);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onOptionFocusChangeEnter(event) {
|
onOptionMouseMove(event) {
|
||||||
if (this.dirty) {
|
if (this.focused) {
|
||||||
this.onOptionChange(event, false);
|
this.changeFocusedOptionIndex(event, event.processedOption.index);
|
||||||
} else {
|
|
||||||
this.onOptionFocusMoveChange(event);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onOptionSelect(event, processedOption, isHide = true) {
|
onOptionSelect(event, processedOption, isHide = true) {
|
||||||
|
|
|
@ -51,9 +51,9 @@
|
||||||
:optionGroupIcon="optionGroupIcon"
|
:optionGroupIcon="optionGroupIcon"
|
||||||
:optionGroupLabel="optionGroupLabel"
|
:optionGroupLabel="optionGroupLabel"
|
||||||
:optionGroupChildren="optionGroupChildren"
|
:optionGroupChildren="optionGroupChildren"
|
||||||
@option-change="onOptionChange"
|
@option-change="$emit('option-change', $event)"
|
||||||
@option-focus-change="onOptionFocusChange"
|
@option-focus-change="$emit('option-focus-change', $event)"
|
||||||
@option-focus-enter-change="onOptionFocusEnterChange"
|
@option-focus-enter-change="$emit('option-focus-enter-change', $event)"
|
||||||
:pt="pt"
|
:pt="pt"
|
||||||
:unstyled="unstyled"
|
:unstyled="unstyled"
|
||||||
/>
|
/>
|
||||||
|
@ -148,15 +148,6 @@ export default {
|
||||||
onOptionMouseMove(event, processedOption) {
|
onOptionMouseMove(event, processedOption) {
|
||||||
this.$emit('option-focus-change', { originalEvent: event, processedOption });
|
this.$emit('option-focus-change', { originalEvent: event, processedOption });
|
||||||
},
|
},
|
||||||
onOptionChange(event) {
|
|
||||||
this.$emit('option-change', event);
|
|
||||||
},
|
|
||||||
onOptionFocusChange(event) {
|
|
||||||
this.$emit('option-focus-change', event);
|
|
||||||
},
|
|
||||||
onOptionFocusEnterChange(event) {
|
|
||||||
this.$emit('option-focus-enter-change', event);
|
|
||||||
},
|
|
||||||
containerRef(el) {
|
containerRef(el) {
|
||||||
this.container = el;
|
this.container = el;
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue