Mobile behavior changes
parent
36e32c7d71
commit
42a80d2726
|
@ -306,7 +306,7 @@ export default {
|
||||||
this.clicked = false;
|
this.clicked = false;
|
||||||
},
|
},
|
||||||
onOptionChange(event) {
|
onOptionChange(event) {
|
||||||
const { processedOption } = event;
|
const { processedOption, type } = event;
|
||||||
|
|
||||||
if (isEmpty(processedOption)) return;
|
if (isEmpty(processedOption)) return;
|
||||||
|
|
||||||
|
@ -314,15 +314,20 @@ export default {
|
||||||
const grouped = isNotEmpty(children);
|
const grouped = isNotEmpty(children);
|
||||||
const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
|
const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
|
||||||
|
|
||||||
|
this.focusedOptionInfo = { index, level, parentKey };
|
||||||
|
|
||||||
|
if (type == 'hover' && this.queryMatches) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (grouped) {
|
if (grouped) {
|
||||||
activeOptionPath.push(processedOption);
|
activeOptionPath.push(processedOption);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.focusedOptionInfo = { index, level, parentKey };
|
|
||||||
this.activeOptionPath = activeOptionPath;
|
this.activeOptionPath = activeOptionPath;
|
||||||
},
|
},
|
||||||
onOptionClick(event, preventSelection) {
|
onOptionClick(event) {
|
||||||
const { originalEvent, processedOption, isFocus, isHide } = event;
|
const { originalEvent, processedOption, isFocus, isHide, preventSelection } = event;
|
||||||
const { index, key, level, parentKey } = processedOption;
|
const { index, key, level, parentKey } = processedOption;
|
||||||
const grouped = this.isProccessedOptionGroup(processedOption);
|
const grouped = this.isProccessedOptionGroup(processedOption);
|
||||||
const selected = this.isSelected(processedOption);
|
const selected = this.isSelected(processedOption);
|
||||||
|
@ -353,9 +358,9 @@ export default {
|
||||||
onOptionMouseEnter(event) {
|
onOptionMouseEnter(event) {
|
||||||
if (this.focusOnHover) {
|
if (this.focusOnHover) {
|
||||||
if (this.dirty || (!this.dirty && isNotEmpty(this.modelValue))) {
|
if (this.dirty || (!this.dirty && isNotEmpty(this.modelValue))) {
|
||||||
this.onOptionChange(event);
|
this.onOptionChange({ ...event, type: 'hover' });
|
||||||
} else if (!this.dirty && event.processedOption.level === 0) {
|
} else if (!this.dirty && event.processedOption.level === 0) {
|
||||||
this.onOptionClick(event);
|
this.onOptionClick({ ...event, type: 'hover' });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -496,7 +501,7 @@ export default {
|
||||||
const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
|
const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
|
||||||
const grouped = this.isProccessedOptionGroup(processedOption);
|
const grouped = this.isProccessedOptionGroup(processedOption);
|
||||||
|
|
||||||
this.onOptionClick({ originalEvent: event, processedOption }, false);
|
this.onOptionClick({ originalEvent: event, processedOption, preventSelection: false });
|
||||||
!grouped && this.hide();
|
!grouped && this.hide();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -732,7 +737,7 @@ export default {
|
||||||
this.scrollInView();
|
this.scrollInView();
|
||||||
|
|
||||||
if (this.focusOnHover) {
|
if (this.focusOnHover) {
|
||||||
this.onOptionClick({ originalEvent: event, processedOption: this.visibleOptions[index], isHide: false }, preventSelection);
|
this.onOptionClick({ originalEvent: event, processedOption: this.visibleOptions[index], isHide: false, preventSelection });
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.selectOnFocus) {
|
if (this.selectOnFocus) {
|
||||||
|
|
|
@ -223,7 +223,7 @@ export default {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onItemChange(event) {
|
onItemChange(event, type) {
|
||||||
const { processedItem, isFocus } = event;
|
const { processedItem, isFocus } = event;
|
||||||
|
|
||||||
if (isEmpty(processedItem)) return;
|
if (isEmpty(processedItem)) return;
|
||||||
|
@ -238,9 +238,14 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
this.focusedItemInfo = { index, level, parentKey };
|
this.focusedItemInfo = { index, level, parentKey };
|
||||||
this.activeItemPath = activeItemPath;
|
|
||||||
|
|
||||||
isFocus && focus(this.list);
|
isFocus && focus(this.list);
|
||||||
|
|
||||||
|
if (type === 'hover' && this.queryMatches) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.activeItemPath = activeItemPath;
|
||||||
},
|
},
|
||||||
onItemClick(event) {
|
onItemClick(event) {
|
||||||
const { processedItem } = event;
|
const { processedItem } = event;
|
||||||
|
@ -259,7 +264,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onItemMouseEnter(event) {
|
onItemMouseEnter(event) {
|
||||||
this.onItemChange(event);
|
this.onItemChange(event, 'hover');
|
||||||
},
|
},
|
||||||
onItemMouseMove(event) {
|
onItemMouseMove(event) {
|
||||||
if (this.focused) {
|
if (this.focused) {
|
||||||
|
|
|
@ -248,7 +248,7 @@ export default {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onItemChange(event) {
|
onItemChange(event, type) {
|
||||||
const { processedItem, isFocus } = event;
|
const { processedItem, isFocus } = event;
|
||||||
|
|
||||||
if (isEmpty(processedItem)) return;
|
if (isEmpty(processedItem)) return;
|
||||||
|
@ -264,10 +264,15 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
this.focusedItemInfo = { index, level, parentKey };
|
this.focusedItemInfo = { index, level, parentKey };
|
||||||
this.activeItemPath = activeItemPath;
|
|
||||||
|
|
||||||
grouped && (this.dirty = true);
|
grouped && (this.dirty = true);
|
||||||
isFocus && focus(this.menubar);
|
isFocus && focus(this.menubar);
|
||||||
|
|
||||||
|
if (type === 'hover' && this.queryMatches) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.activeItemPath = activeItemPath;
|
||||||
},
|
},
|
||||||
onOverlayClick(event) {
|
onOverlayClick(event) {
|
||||||
OverlayEventBus.emit('overlay-click', {
|
OverlayEventBus.emit('overlay-click', {
|
||||||
|
@ -304,7 +309,7 @@ export default {
|
||||||
},
|
},
|
||||||
onItemMouseEnter(event) {
|
onItemMouseEnter(event) {
|
||||||
if (this.dirty) {
|
if (this.dirty) {
|
||||||
this.onItemChange(event);
|
this.onItemChange(event, 'hover');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onItemMouseMove(event) {
|
onItemMouseMove(event) {
|
||||||
|
|
Loading…
Reference in New Issue