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

Fixed #5099 - autoOptionFocus property added to Input-like components

pull/5110/head
tugcekucukoglu 2024-01-17 17:09:34 +03:00
parent c8609171c2
commit 54a7a4fb50
10 changed files with 60 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/orderlist.js
View File

@ -18,6 +18,12 @@ const OrderListProps = [
description:
'Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.'
},
{
name: 'autoOptionFocus',
type: 'boolean',
default: 'false',
description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.'
},
{
name: 'dataKey',
type: 'string',

6
api-generator/components/picklist.js
View File

@ -18,6 +18,12 @@ const PickListProps = [
description:
'Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.'
},
{
name: 'autoOptionFocus',
type: 'boolean',
default: 'false',
description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.'
},
{
name: 'dataKey',
type: 'string',

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

@ -26,6 +26,10 @@ export default {
type: Boolean,
default: false
},
autoOptionFocus: {
type: Boolean,
default: false
},
responsive: {
type: Boolean,
default: true

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

@ -225,6 +225,11 @@ export interface OrderListProps {
* @defaultValue false
*/
metaKeySelection?: boolean | undefined;
/**
* Whether to focus on the first visible or selected element.
* @defaultValue false
*/
autoOptionFocus?: boolean | undefined;
/**
* Inline style of the the list element.
*/

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

@ -140,18 +140,19 @@ export default {
return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
},
onListFocus(event) {
const selectedFirstItem = DomHandler.findSingle(this.list, '[data-p-highlight="true"]') || DomHandler.findSingle(this.list, '[data-pc-section="item"]');
this.focused = true;
const selectedFirstItem = this.autoOptionFocus
? 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);
this.focused = true;
const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1;
this.changeFocusedOptionIndex(index);
this.$emit('focus', event);
}
this.$emit('focus', event);
},
onListBlur(event) {
this.focused = false;

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

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

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

@ -26,6 +26,10 @@ export default {
type: Boolean,
default: false
},
autoOptionFocus: {
type: Boolean,
default: false
},
responsive: {
type: Boolean,
default: true

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

@ -335,6 +335,11 @@ export interface PickListProps {
* @defaultValue false
*/
metaKeySelection?: boolean | undefined;
/**
* Whether to focus on the first visible or selected element.
* @defaultValue false
*/
autoOptionFocus?: boolean | undefined;
/**
* Inline style of the the list element.
*/

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

@ -301,18 +301,19 @@ export default {
return ObjectUtils.findIndexInList(item, this.d_selection[listIndex]) != -1;
},
onListFocus(event, listType) {
const selectedFirstItem = DomHandler.findSingle(this.$refs[listType].$el, '[data-p-highlight="true"]') || DomHandler.findSingle(this.$refs[listType].$el, '[data-pc-section="item"]');
this.focused[listType] = true;
const selectedFirstItem = this.autoOptionFocus
? 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);
this.focused[listType] = true;
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) {
this.focused[listType] = false;

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

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