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

Refactor #4124 - OrderList pt context improvements

pull/4148/head
Tuğçe Küçükoğlu 2023-07-13 10:48:22 +03:00
parent 6248189273
commit 17d0880c34
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,7 @@ export interface OrderListPassThroughMethodOptions {
instance: any;
props: OrderListProps;
state: OrderListState;
context: OrderListContext;
}
/**
@ -140,6 +141,22 @@ export interface OrderListState {
focusedOptionIndex: number;
}
/**
* Defines current options in OrderList component.
*/
export interface OrderListContext {
/**
* Current active state of the item as a boolean.
* @defaultValue false
*/
active: boolean;
/**
* Current focus state of the item as a boolean.
* @defaultValue false
*/
focused: boolean;
}
/**
* Defines valid properties in OrderList component.
*/

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

@ -2,28 +2,28 @@
<div :class="cx('root')" v-bind="ptm('root')">
<div :class="cx('controls')" v-bind="ptm('controls')">
<slot name="controlsstart"></slot>
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="{ ...moveUpButtonProps, ...ptm('moveUpButton') }" :unstyled="unstyled">
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveUpButton')" v-bind="moveUpButtonProps" :unstyled="unstyled">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon v-bind="ptm('moveUpButton')['icon']" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="{ ...moveTopButtonProps, ...ptm('moveTopButton') }" :unstyled="unstyled">
<OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveTopButton')" v-bind="ptm('moveTopButton')" :unstyled="unstyled">
<template #icon>
<slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="{ ...moveDownButtonProps, ...ptm('moveDownButton') }" :unstyled="unstyled">
<OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveDownButton')" v-bind="moveDownButtonProps" :unstyled="unstyled">
<template #icon>
<slot name="movedownicon">
<AngleDownIcon v-bind="ptm('moveDownButton')['icon']" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="{ ...moveBottomButtonProps, ...ptm('moveBottomButton') }" :unstyled="unstyled">
<OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveBottomButton')" v-bind="moveBottomButtonProps" :unstyled="unstyled">
<template #icon>
<slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" />
@ -64,7 +64,7 @@
@touchend="onItemTouchEnd"
:aria-selected="isSelected(item)"
@mousedown="onOptionMouseDown(i)"
v-bind="getPTOptions(item, 'item')"
v-bind="getPTOptions(item, 'item', i)"
:data-p-highlight="isSelected(item)"
:data-p-focused="`${id}_${i}` === focusedOptionId"
>
@ -127,11 +127,11 @@ export default {
getItemKey(item, index) {
return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
},
getPTOptions(item, key) {
getPTOptions(item, key, index) {
return this.ptm(key, {
context: {
active: this.isSelected(item),
focused: this.id === this.focusedOptionId
focused: `${this.id}_${index}` === this.focusedOptionId
}
});
},