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

Refactor #5130

pull/5161/head
tugcekucukoglu 2024-01-24 10:02:00 +03:00
parent 88bb7e6980
commit c138ef5aa2
8 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/orderlist/BaseOrderList.vue
View File

@ -28,7 +28,11 @@ export default {
},
autoOptionFocus: {
type: Boolean,
default: false
default: true
},
focusOnHover: {
type: Boolean,
default: true
},
responsive: {
type: Boolean,

7
components/lib/orderlist/OrderList.d.ts vendored
View File

@ -227,9 +227,14 @@ export interface OrderListProps {
metaKeySelection?: boolean | undefined;
/**
* Whether to focus on the first visible or selected element.
* @defaultValue false
* @defaultValue true
*/
autoOptionFocus?: boolean | undefined;
/**
* When enabled, the focus is placed on the hovered option.
* @defaultValue true
*/
focusOnHover?: boolean | undefined;
/**
* Inline style of the the list element.
*/

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

@ -62,8 +62,9 @@
:class="cx('item', { item, id: `${id}_${i}` })"
@click="onItemClick($event, item, i)"
@touchend="onItemTouchEnd"
:aria-selected="isSelected(item)"
@mousedown="onOptionMouseDown(i)"
@mousemove="onOptionMouseMove(i)"
:aria-selected="isSelected(item)"
v-bind="getPTOptions(item, 'item', i)"
:data-p-highlight="isSelected(item)"
:data-p-focused="`${id}_${i}` === focusedOptionId"
@ -191,6 +192,11 @@ export default {
this.focused = true;
this.focusedOptionIndex = index;
},
onOptionMouseMove(index) {
if (this.focusOnHover && this.focused) {
this.changeFocusedOptionIndex(index);
}
},
onArrowDownKey(event) {
const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex() : this.findFirstSelectedOptionIndex();

7
components/lib/orderlist/style/OrderListStyle.js
View File

@ -50,12 +50,7 @@ const classes = {
}
],
controls: 'p-orderlist-controls',
container: ({ instance }) => [
'p-orderlist-list-container',
{
'p-focus': instance.focused
}
],
container: 'p-orderlist-list-container',
header: 'p-orderlist-header',
list: 'p-orderlist-list',
item: ({ instance, item, id }) => [

6
components/lib/picklist/BasePickList.vue
View File

@ -28,7 +28,11 @@ export default {
},
autoOptionFocus: {
type: Boolean,
default: false
default: true
},
focusOnHover: {
type: Boolean,
default: true
},
responsive: {
type: Boolean,

7
components/lib/picklist/PickList.d.ts vendored
View File

@ -337,9 +337,14 @@ export interface PickListProps {
metaKeySelection?: boolean | undefined;
/**
* Whether to focus on the first visible or selected element.
* @defaultValue false
* @defaultValue true
*/
autoOptionFocus?: boolean | undefined;
/**
* When enabled, the focus is placed on the hovered option.
* @defaultValue true
*/
focusOnHover?: boolean | undefined;
/**
* Inline style of the the list element.
*/

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

@ -71,6 +71,7 @@
@dblclick="onItemDblClick($event, item, 0)"
@touchend="onItemTouchEnd"
@mousedown="onOptionMouseDown(i, 'sourceList')"
@mousemove="onOptionMouseMove(i, 'sourceList')"
role="option"
:aria-selected="isSelected(item, 0)"
v-bind="getPTOptions(item, 'item', `${idSource}_${i}`, 0)"
@ -162,6 +163,7 @@
@dblclick="onItemDblClick($event, item, 1)"
@keydown="onItemKeyDown($event, 'targetList')"
@mousedown="onOptionMouseDown(i, 'targetList')"
@mousemove="onOptionMouseMove(i, 'targetList')"
@touchend="onItemTouchEnd"
role="option"
:aria-selected="isSelected(item, 1)"
@ -313,6 +315,11 @@ export default {
this.focused[listType] = true;
this.focusedOptionIndex = index;
},
onOptionMouseMove(index, listType) {
if (this.focusOnHover && this.focused[listType]) {
this.changeFocusedOptionIndex(index, listType);
}
},
moveUp(event, listIndex) {
if (this.d_selection && this.d_selection[listIndex]) {
let valueList = [...this.modelValue[listIndex]];
@ -902,7 +909,7 @@ export default {
return ObjectUtils.isEmpty(this[list]);
},
hasSelectedOption(listType) {
return listType === 'sourceList' ? ObjectUtils.isNotEmpty(this.d_selection[0]) : ObjectUtils.isNotEmpty(this.d_selection[0]);
return listType === 'sourceList' ? ObjectUtils.isNotEmpty(this.d_selection[0]) : ObjectUtils.isNotEmpty(this.d_selection[1]);
}
},
computed: {

14
components/lib/picklist/style/PickListStyle.js
View File

@ -46,21 +46,11 @@ const classes = {
}
],
sourceControls: 'p-picklist-buttons p-picklist-source-controls',
sourceWrapper: ({ instance }) => [
'p-picklist-list-wrapper p-picklist-source-wrapper',
{
'p-focus': instance.focused.sourceList
}
],
sourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper',
sourceHeader: 'p-picklist-header',
sourceList: 'p-picklist-list p-picklist-source-list',
buttons: 'p-picklist-buttons p-picklist-transfer-buttons',
targetWrapper: ({ instance }) => [
'p-picklist-list-wrapper p-picklist-target-wrapper',
{
'p-focus': instance.focused.targetList
}
],
targetWrapper: 'p-picklist-list-wrapper p-picklist-target-wrapper',
targetHeader: 'p-picklist-header',
targetList: 'p-picklist-list p-picklist-target',
item: ({ instance, item, id, listIndex }) => [