vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #6533 - CascadeSelect: move move/enter behavior changes

pull/6537/head
tugcekucukoglu 2024-10-07 11:59:27 +03:00
parent 31aff977d3
commit d09d992e71
2 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/primevue/src/cascadeselect/CascadeSelect.vue
View File

@ -72,7 +72,8 @@
:optionGroupLabel="optionGroupLabel"
:optionGroupChildren="optionGroupChildren"
@option-change="onOptionChange"
@option-focus-change="onOptionFocusChange"
@option-focus-move-change="onOptionFocusMoveChange"
@option-focus-enter-change="onOptionFocusChangeEnter"
:pt="pt"
:unstyled="unstyled"
/>
@ -303,25 +304,23 @@ export default {
this.clicked = false;
},
onOptionChange(event) {
onOptionChange(event, isSelectable = true) {
const { originalEvent, processedOption, isFocus, isHide } = event;
if (isEmpty(processedOption)) return;
const { index, level, parentKey, children } = processedOption;
const { index, key, level, parentKey, children } = processedOption;
const grouped = isNotEmpty(children);
const root = isEmpty(processedOption.parent);
const selected = this.isSelected(processedOption);
if (selected) {
const { index, key, level, parentKey } = processedOption;
this.focusedOptionInfo = { index, level, parentKey };
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);
const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
activeOptionPath.push(processedOption);
@ -329,10 +328,16 @@ export default {
this.activeOptionPath = activeOptionPath;
}
grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
if (grouped) {
this.dirty = true;
this.onOptionGroupSelect(originalEvent, processedOption);
} else {
isSelectable && this.onOptionSelect(originalEvent, processedOption, isHide);
}
isFocus && focus(this.$refs.focusInput);
},
onOptionFocusChange(event) {
onOptionFocusMoveChange(event) {
if (this.focusOnHover) {
const { originalEvent, processedOption } = event;
const { index, level, parentKey } = processedOption;
@ -341,6 +346,11 @@ export default {
this.changeFocusedOptionIndex(originalEvent, index);
}
},
onOptionFocusChangeEnter(event) {
if (this.dirty) {
this.onOptionChange(event, false);
}
},
onOptionSelect(event, processedOption, isHide = true) {
const value = this.getOptionValue(processedOption?.option);

22
packages/primevue/src/cascadeselect/CascadeSelectSub.vue
View File

@ -17,7 +17,14 @@
:data-p-focus="isOptionFocused(processedOption)"
:data-p-disabled="isOptionDisabled(processedOption)"
>
<div v-ripple :class="cx('optionContent')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'optionContent')">
<div
v-ripple
:class="cx('optionContent')"
@click="onOptionClick($event, processedOption)"
@mouseenter="onOptionMouseEnter($event, processedOption)"
@mousemove="onOptionMouseMove($event, processedOption)"
v-bind="getPTOptions(processedOption, index, 'optionContent')"
>
<component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" :selected="isOptionGroup(processedOption) ? false : isOptionSelected(processedOption)" />
<span v-else :class="cx('optionText')" v-bind="getPTOptions(processedOption, index, 'optionText')">{{ getOptionLabelToRender(processedOption) }}</span>
<template v-if="isOptionGroup(processedOption)">
@ -46,6 +53,7 @@
:optionGroupChildren="optionGroupChildren"
@option-change="onOptionChange"
@option-focus-change="onOptionFocusChange"
@option-focus-enter-change="onOptionFocusEnterChange"
:pt="pt"
:unstyled="unstyled"
/>
@ -55,7 +63,6 @@
</template>
<script>
import { nestedPosition } from '@primeuix/utils/dom';
import { isNotEmpty, resolveFieldData } from '@primeuix/utils/object';
import BaseComponent from '@primevue/core/basecomponent';
import AngleRightIcon from '@primevue/icons/angleright';
@ -65,7 +72,7 @@ export default {
name: 'CascadeSelectSub',
hostName: 'CascadeSelect',
extends: BaseComponent,
emits: ['option-change', 'option-focus-change'],
emits: ['option-change', 'option-focus-change', 'option-focus-enter-change'],
container: null,
props: {
selectId: String,
@ -82,8 +89,7 @@ export default {
},
activeOptionPath: Array,
level: Number,
templates: null,
isParentMount: Boolean
templates: null
},
methods: {
@ -136,6 +142,9 @@ export default {
onOptionClick(event, processedOption) {
this.$emit('option-change', { originalEvent: event, processedOption, isFocus: true });
},
onOptionMouseEnter(event, processedOption) {
this.$emit('option-focus-enter-change', { originalEvent: event, processedOption });
},
onOptionMouseMove(event, processedOption) {
this.$emit('option-focus-change', { originalEvent: event, processedOption });
},
@ -145,6 +154,9 @@ export default {
onOptionFocusChange(event) {
this.$emit('option-focus-change', event);
},
onOptionFocusEnterChange(event) {
this.$emit('option-focus-enter-change', event);
},
containerRef(el) {
this.container = el;
},