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; instance: any;
props: OrderListProps; props: OrderListProps;
state: OrderListState; state: OrderListState;
context: OrderListContext;
} }
/** /**
@ -140,6 +141,22 @@ export interface OrderListState {
focusedOptionIndex: number; 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. * 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('root')" v-bind="ptm('root')">
<div :class="cx('controls')" v-bind="ptm('controls')"> <div :class="cx('controls')" v-bind="ptm('controls')">
<slot name="controlsstart"></slot> <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> <template #icon>
<slot name="moveupicon"> <slot name="moveupicon">
<AngleUpIcon v-bind="ptm('moveUpButton')['icon']" /> <AngleUpIcon v-bind="ptm('moveUpButton')['icon']" />
</slot> </slot>
</template> </template>
</OLButton> </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> <template #icon>
<slot name="movetopicon"> <slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" /> <AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" />
</slot> </slot>
</template> </template>
</OLButton> </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> <template #icon>
<slot name="movedownicon"> <slot name="movedownicon">
<AngleDownIcon v-bind="ptm('moveDownButton')['icon']" /> <AngleDownIcon v-bind="ptm('moveDownButton')['icon']" />
</slot> </slot>
</template> </template>
</OLButton> </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> <template #icon>
<slot name="movebottomicon"> <slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" /> <AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" />
@ -64,7 +64,7 @@
@touchend="onItemTouchEnd" @touchend="onItemTouchEnd"
:aria-selected="isSelected(item)" :aria-selected="isSelected(item)"
@mousedown="onOptionMouseDown(i)" @mousedown="onOptionMouseDown(i)"
v-bind="getPTOptions(item, 'item')" v-bind="getPTOptions(item, 'item', i)"
:data-p-highlight="isSelected(item)" :data-p-highlight="isSelected(item)"
:data-p-focused="`${id}_${i}` === focusedOptionId" :data-p-focused="`${id}_${i}` === focusedOptionId"
> >
@ -127,11 +127,11 @@ export default {
getItemKey(item, index) { getItemKey(item, index) {
return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index; return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
}, },
getPTOptions(item, key) { getPTOptions(item, key, index) {
return this.ptm(key, { return this.ptm(key, {
context: { context: {
active: this.isSelected(item), active: this.isSelected(item),
focused: this.id === this.focusedOptionId focused: `${this.id}_${index}` === this.focusedOptionId
} }
}); });
}, },