pull/6088/head
tugcekucukoglu 2024-10-08 12:54:50 +03:00
parent 0223158cfb
commit 9d9ae356d0
2 changed files with 38 additions and 45 deletions

View File

@ -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.focusedOptionInfo = { index, level, parentKey };
this.dirty = !root;
} else { } else {
const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key); if (grouped) {
this.onOptionChange(event);
} else {
const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey);
activeOptionPath.push(processedOption); activeOptionPath.push(processedOption);
this.focusedOptionInfo = { index, level, parentKey }; this.focusedOptionInfo = { index, level, parentKey };
this.activeOptionPath = activeOptionPath; this.activeOptionPath = activeOptionPath;
} }
if (grouped) {
this.dirty = true;
this.onOptionGroupSelect(originalEvent, processedOption);
} else {
isSelectable && this.onOptionSelect(originalEvent, processedOption, isHide);
} }
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) {

View File

@ -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;
}, },