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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/4972/head
Cagatay Civici 2024-01-20 00:32:17 +03:00
parent 50f734db5b fbe1b664d5
commit 10a4ded046
2 changed files with 122 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
components/lib/orderlist/OrderList.vue
View File

@ -141,17 +141,7 @@ export default {
}, },
onListFocus(event) { onListFocus(event) {
this.focused = true; this.focused = true;
const selectedFirstItem = this.autoOptionFocus this.findCurrentFocusedIndex();
? DomHandler.findSingle(this.list, '[data-p-highlight="true"]') || DomHandler.findSingle(this.list, '[data-pc-section="item"]')
: DomHandler.findSingle(this.list, '[data-p-highlight="true"]');
if (selectedFirstItem) {
const findIndex = ObjectUtils.findIndexInList(selectedFirstItem, this.list.children);
const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1;
this.changeFocusedOptionIndex(index);
}
this.$emit('focus', event); this.$emit('focus', event);
}, },
onListBlur(event) { onListBlur(event) {
@ -203,7 +193,7 @@ export default {
this.focusedOptionIndex = index; this.focusedOptionIndex = index;
}, },
onArrowDownKey(event) { onArrowDownKey(event) {
const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex); const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex() : this.findFirstSelectedOptionIndex();
this.changeFocusedOptionIndex(optionIndex); this.changeFocusedOptionIndex(optionIndex);
@ -214,7 +204,7 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
onArrowUpKey(event) { onArrowUpKey(event) {
const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex); const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex() : this.findLastSelectedOptionIndex();
this.changeFocusedOptionIndex(optionIndex); this.changeFocusedOptionIndex(optionIndex);
@ -226,9 +216,7 @@ export default {
}, },
onHomeKey(event) { onHomeKey(event) {
if (event.ctrlKey && event.shiftKey) { if (event.ctrlKey && event.shiftKey) {
const items = DomHandler.find(this.list, '[data-pc-section="item"]'); const matchedOptionIndex = this.findMatchedOptionIndex();
const focusedItem = DomHandler.findSingle(this.list, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`);
const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
this.d_selection = [...this.modelValue].slice(0, matchedOptionIndex + 1); this.d_selection = [...this.modelValue].slice(0, matchedOptionIndex + 1);
this.$emit('update:selection', this.d_selection); this.$emit('update:selection', this.d_selection);
@ -244,9 +232,7 @@ export default {
}, },
onEndKey(event) { onEndKey(event) {
if (event.ctrlKey && event.shiftKey) { if (event.ctrlKey && event.shiftKey) {
const items = DomHandler.find(this.list, '[data-pc-section="item"]'); const matchedOptionIndex = this.findMatchedOptionIndex();
const focusedItem = DomHandler.findSingle(this.list, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`);
const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
this.d_selection = [...this.modelValue].slice(matchedOptionIndex, items.length); this.d_selection = [...this.modelValue].slice(matchedOptionIndex, items.length);
this.$emit('update:selection', this.d_selection); this.$emit('update:selection', this.d_selection);
@ -255,28 +241,23 @@ export default {
value: this.d_selection value: this.d_selection
}); });
} else { } else {
this.changeFocusedOptionIndex(DomHandler.find(this.list, '[data-pc-section="item"]').length - 1); this.changeFocusedOptionIndex(this.findAllItems().length - 1);
} }
event.preventDefault(); event.preventDefault();
}, },
onEnterKey(event) { onEnterKey(event) {
const items = DomHandler.find(this.list, '[data-pc-section="item"]'); const matchedOptionIndex = this.findMatchedOptionIndex();
const focusedItem = DomHandler.findSingle(this.list, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`);
const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
this.onItemClick(event, this.modelValue[matchedOptionIndex], matchedOptionIndex); this.onItemClick(event, this.modelValue[matchedOptionIndex], matchedOptionIndex);
event.preventDefault(); event.preventDefault();
}, },
onSpaceKey(event) { onSpaceKey(event) {
event.preventDefault(); event.preventDefault();
if (event.shiftKey && this.d_selection && this.d_selection.length > 0) { if (event.shiftKey && this.d_selection && this.d_selection.length > 0) {
const items = DomHandler.find(this.list, '[data-pc-section="item"]');
const selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[0], [...this.modelValue]); const selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[0], [...this.modelValue]);
const focusedItem = DomHandler.findSingle(this.list, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); const matchedOptionIndex = this.findMatchedOptionIndex();
const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
this.d_selection = [...this.modelValue].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1); this.d_selection = [...this.modelValue].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1);
this.$emit('update:selection', this.d_selection); this.$emit('update:selection', this.d_selection);
@ -288,20 +269,61 @@ export default {
this.onEnterKey(event); this.onEnterKey(event);
} }
}, },
findNextOptionIndex(index) { findAllItems() {
const items = DomHandler.find(this.list, '[data-pc-section="item"]'); return DomHandler.find(this.list, '[data-pc-section="item"]');
const matchedOptionIndex = [...items].findIndex((link) => link.id === index); },
findFocusedItem() {
return DomHandler.findSingle(this.list, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`);
},
findCurrentFocusedIndex() {
this.focusedOptionIndex = this.findFirstSelectedOptionIndex();
if (this.autoOptionFocus && this.focusedOptionIndex === -1) {
this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
}
this.scrollInView(this.focusedOptionIndex);
},
findFirstFocusedOptionIndex() {
const firstFocusableItem = DomHandler.findSingle(this.list, '[data-pc-section="item"]');
return DomHandler.getAttribute(firstFocusableItem, 'id');
},
findFirstSelectedOptionIndex() {
if (this.hasSelectedOption) {
const selectedFirstItem = DomHandler.findSingle(this.list, '[data-p-highlight="true"]');
return DomHandler.getAttribute(selectedFirstItem, 'id');
}
return -1;
},
findLastSelectedOptionIndex() {
if (this.hasSelectedOption) {
const selectedItems = DomHandler.find(this.list, '[data-p-highlight="true"]');
return ObjectUtils.findIndexInList(selectedItems[selectedItems.length - 1], this.list.children);
}
return -1;
},
findMatchedOptionIndex(id = this.focusedOptionIndex) {
const items = this.findAllItems();
return [...items].findIndex((link) => link.id === id);
},
findNextOptionIndex() {
const matchedOptionIndex = this.findMatchedOptionIndex();
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
}, },
findPrevOptionIndex(index) { findPrevOptionIndex() {
const items = DomHandler.find(this.list, '[data-pc-section="item"]'); const matchedOptionIndex = this.findMatchedOptionIndex();
const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
}, },
changeFocusedOptionIndex(index) { changeFocusedOptionIndex(index) {
const items = DomHandler.find(this.list, '[data-pc-section="item"]'); const items = this.findAllItems();
let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index; let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index;
@ -429,7 +451,7 @@ export default {
const selected = selectedIndex != -1; const selected = selectedIndex != -1;
const metaSelection = this.itemTouched ? false : this.metaKeySelection; const metaSelection = this.itemTouched ? false : this.metaKeySelection;
const selectedId = DomHandler.find(this.list, '[data-pc-section="item"]')[index].getAttribute('id'); const selectedId = this.findAllItems()[index].getAttribute('id');
this.focusedOptionIndex = event?.type === 'click' ? -1 : selectedId; this.focusedOptionIndex = event?.type === 'click' ? -1 : selectedId;
@ -460,18 +482,6 @@ export default {
onItemTouchEnd() { onItemTouchEnd() {
this.itemTouched = true; this.itemTouched = true;
}, },
findNextItem(item) {
let nextItem = item.nextElementSibling;
if (nextItem) return !(DomHandler.getAttribute(nextItem, 'data-pc-section') === 'item') ? this.findNextItem(nextItem) : nextItem;
else return null;
},
findPrevItem(item) {
let prevItem = item.previousElementSibling;
if (prevItem) return !(DomHandler.getAttribute(nextItem, 'data-pc-section') === 'item') ? this.findPrevItem(prevItem) : prevItem;
else return null;
},
updateListScroll() { updateListScroll() {
const listItems = DomHandler.find(this.list, '[data-pc-section="item"][data-p-highlight="true"]'); const listItems = DomHandler.find(this.list, '[data-pc-section="item"][data-p-highlight="true"]');
@ -564,6 +574,9 @@ export default {
}, },
moveBottomAriaLabel() { moveBottomAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveBottom : undefined; return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveBottom : undefined;
},
hasSelectedOption() {
return ObjectUtils.isNotEmpty(this.d_selection);
} }
}, },
components: { components: {

98
components/lib/picklist/PickList.vue
View File

@ -260,7 +260,7 @@ export default {
selection(newValue) { selection(newValue) {
this.d_selection = newValue; this.d_selection = newValue;
}, },
breakpoint(newValue) { breakpoint() {
this.destroyMedia(); this.destroyMedia();
this.initMedia(); this.initMedia();
} }
@ -276,10 +276,10 @@ export default {
this.destroyStyle(); this.destroyStyle();
this.destroyMedia(); this.destroyMedia();
}, },
beforeMount() { beforeMount() {},
this.id = this.id || UniqueComponentId();
},
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
if (this.responsive) { if (this.responsive) {
this.createStyle(); this.createStyle();
this.initMedia(); this.initMedia();
@ -302,17 +302,7 @@ export default {
}, },
onListFocus(event, listType) { onListFocus(event, listType) {
this.focused[listType] = true; this.focused[listType] = true;
const selectedFirstItem = this.autoOptionFocus this.findCurrentFocusedIndex(listType);
? DomHandler.findSingle(this.$refs[listType].$el, '[data-p-highlight="true"]') || DomHandler.findSingle(this.$refs[listType].$el, '[data-pc-section="item"]')
: DomHandler.findSingle(this.$refs[listType].$el, '[data-p-highlight="true"]');
if (selectedFirstItem) {
const findIndex = ObjectUtils.findIndexInList(selectedFirstItem, this.$refs[listType].$el.children);
const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1;
this.changeFocusedOptionIndex(index, listType);
}
this.$emit('focus', event); this.$emit('focus', event);
}, },
onListBlur(event, listType) { onListBlur(event, listType) {
@ -665,7 +655,7 @@ export default {
} }
}, },
onArrowDownKey(event, listType) { onArrowDownKey(event, listType) {
const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex, listType); const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(listType) : this.findFirstSelectedOptionIndex(listType);
this.changeFocusedOptionIndex(optionIndex, listType); this.changeFocusedOptionIndex(optionIndex, listType);
@ -676,7 +666,7 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
onArrowUpKey(event, listType) { onArrowUpKey(event, listType) {
const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex, listType); const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(listType) : this.findLastSelectedOptionIndex(listType);
this.changeFocusedOptionIndex(optionIndex, listType); this.changeFocusedOptionIndex(optionIndex, listType);
@ -687,10 +677,8 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
onEnterKey(event, listType) { onEnterKey(event, listType) {
const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]');
const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`);
const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
const listId = listType === 'sourceList' ? 0 : 1; const listId = listType === 'sourceList' ? 0 : 1;
const matchedOptionIndex = this.findMatchedOptionIndex(listType);
this.onItemClick(event, this.modelValue[listId][matchedOptionIndex], matchedOptionIndex, listId); this.onItemClick(event, this.modelValue[listId][matchedOptionIndex], matchedOptionIndex, listId);
@ -701,10 +689,8 @@ export default {
if (event.shiftKey && this.d_selection && this.d_selection.length > 0) { if (event.shiftKey && this.d_selection && this.d_selection.length > 0) {
const listId = listType === 'sourceList' ? 0 : 1; const listId = listType === 'sourceList' ? 0 : 1;
const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]');
const selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[listId][0], [...this.modelValue[listId]]); const selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[listId][0], [...this.modelValue[listId]]);
const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); const matchedOptionIndex = this.findMatchedOptionIndex(listType);
const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
this.d_selection[listId] = [...this.modelValue[listId]].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1); this.d_selection[listId] = [...this.modelValue[listId]].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1);
this.$emit('update:selection', this.d_selection); this.$emit('update:selection', this.d_selection);
@ -719,9 +705,7 @@ export default {
onHomeKey(event, listType) { onHomeKey(event, listType) {
if (event.ctrlKey && event.shiftKey) { if (event.ctrlKey && event.shiftKey) {
const listId = listType === 'sourceList' ? 0 : 1; const listId = listType === 'sourceList' ? 0 : 1;
const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]'); const matchedOptionIndex = this.findMatchedOptionIndex(listType);
const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`);
const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
this.d_selection[listId] = [...this.modelValue[listId]].slice(0, matchedOptionIndex + 1); this.d_selection[listId] = [...this.modelValue[listId]].slice(0, matchedOptionIndex + 1);
this.$emit('update:selection', this.d_selection); this.$emit('update:selection', this.d_selection);
@ -736,12 +720,11 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
onEndKey(event, listType) { onEndKey(event, listType) {
const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]'); const items = this.findAllItems(listType);
if (event.ctrlKey && event.shiftKey) { if (event.ctrlKey && event.shiftKey) {
const listId = listType === 'sourceList' ? 0 : 1; const listId = listType === 'sourceList' ? 0 : 1;
const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); const matchedOptionIndex = this.findMatchedOptionIndex(listType);
const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
this.d_selection[listId] = [...this.modelValue[listId]].slice(matchedOptionIndex, items.length); this.d_selection[listId] = [...this.modelValue[listId]].slice(matchedOptionIndex, items.length);
this.$emit('update:selection', this.d_selection); this.$emit('update:selection', this.d_selection);
@ -755,21 +738,61 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
findNextOptionIndex(index, listType) { findAllItems(listType) {
const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]'); return DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]');
},
findFocusedItem(listType) {
return DomHandler.findSingle(this.$refs[listType].$el, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`);
},
findCurrentFocusedIndex(listType) {
this.focusedOptionIndex = this.findFirstSelectedOptionIndex(listType);
const matchedOptionIndex = [...items].findIndex((link) => link.id === index); if (this.autoOptionFocus && this.focusedOptionIndex === -1) {
this.focusedOptionIndex = this.findFirstFocusedOptionIndex(listType);
}
this.scrollInView(this.focusedOptionIndex, listType);
},
findFirstFocusedOptionIndex(listType) {
const firstFocusableItem = DomHandler.findSingle(this.$refs[listType].$el, '[data-pc-section="item"]');
return DomHandler.getAttribute(firstFocusableItem, 'id');
},
findFirstSelectedOptionIndex(listType) {
if (this.hasSelectedOption(listType)) {
const selectedFirstItem = DomHandler.findSingle(this.$refs[listType].$el, '[data-p-highlight="true"]');
return DomHandler.getAttribute(selectedFirstItem, 'id');
}
return -1;
},
findLastSelectedOptionIndex(listType) {
if (this.hasSelectedOption(listType)) {
const selectedItems = DomHandler.find(this.$refs[listType].$el, '[data-p-highlight="true"]');
return ObjectUtils.findIndexInList(selectedItems[selectedItems.length - 1], this.list.children);
}
return -1;
},
findMatchedOptionIndex(listType, id = this.focusedOptionIndex) {
const items = this.findAllItems(listType);
return [...items].findIndex((link) => link.id === id);
},
findNextOptionIndex(listType) {
const matchedOptionIndex = this.findMatchedOptionIndex(listType);
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
}, },
findPrevOptionIndex(index, listType) { findPrevOptionIndex(listType) {
const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]'); const matchedOptionIndex = this.findMatchedOptionIndex(listType);
const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
}, },
changeFocusedOptionIndex(index, listType) { changeFocusedOptionIndex(index, listType) {
const items = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]'); const items = this.findAllItems(listType);
let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index; let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index;
@ -878,6 +901,9 @@ export default {
}, },
moveAllDisabled(list) { moveAllDisabled(list) {
return ObjectUtils.isEmpty(this[list]); return ObjectUtils.isEmpty(this[list]);
},
hasSelectedOption(listType) {
return listType === 'sourceList' ? ObjectUtils.isNotEmpty(this.d_selection[0]) : ObjectUtils.isNotEmpty(this.d_selection[0]);
} }
}, },
computed: { computed: {