vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3924 - For OrderList

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-05-09 19:03:01 +03:00
parent c7ffcaa08d
commit f1ea8f9f9a
4 changed files with 150 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

52
components/lib/orderlist/OrderList.vue
View file

@ -1,39 +1,39 @@
<template>
<div :class="containerClass">
<div class="p-orderlist-controls">
<div :class="containerClass" v-bind="ptm('root')">
<div class="p-orderlist-controls" v-bind="ptm('controls')">
<slot name="controlsstart"></slot>
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps">
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps" :pt="ptm('moveUpButton')">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon />
<AngleUpIcon v-bind="ptm('moveUpButton')['icon']" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps">
<template #icon
><slot name="movetopicon">
<AngleDoubleUpIcon />
<OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps" :pt="ptm('moveTopButton')">
<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">
<OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps" :pt="ptm('moveDownButton')">
<template #icon>
<slot name="movedownicon">
<AngleDownIcon />
<AngleDownIcon v-bind="ptm('moveDownButton')['icon']" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps">
<OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps" :pt="ptm('moveBottomButton')">
<template #icon>
<slot name="movebottomicon">
<AngleDoubleDownIcon />
<AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" />
</slot>
</template>
</OLButton>
<slot name="controlsend"></slot>
</div>
<div class="p-orderlist-list-container">
<div v-if="$slots.header" class="p-orderlist-header">
<div class="p-orderlist-list-container" v-bind="ptm('container')">
<div v-if="$slots.header" class="p-orderlist-header" v-bind="ptm('header')">
<slot name="header"></slot>
</div>
<transition-group
@ -52,10 +52,20 @@
@focus="onListFocus"
@blur="onListBlur"
@keydown="onListKeyDown"
v-bind="listProps"
v-bind="{ ...listProps, ...ptm('list') }"
>
<template v-for="(item, i) of modelValue" :key="getItemKey(item, i)">
<li :id="id + '_' + i" v-ripple role="option" :class="itemClass(item, `${id}_${i}`)" @click="onItemClick($event, item, i)" @touchend="onItemTouchEnd" :aria-selected="isSelected(item)" @mousedown="onOptionMouseDown(i)">
<li
:id="id + '_' + i"
v-ripple
role="option"
:class="itemClass(item, `${id}_${i}`)"
@click="onItemClick($event, item, i)"
@touchend="onItemTouchEnd"
:aria-selected="isSelected(item)"
@mousedown="onOptionMouseDown(i)"
v-bind="getPTOptions(item, 'item')"
>
<slot name="item" :item="item" :index="i"> </slot>
</li>
</template>
@ -65,6 +75,7 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import Button from 'primevue/button';
import AngleDoubleDownIcon from 'primevue/icons/angledoubledown';
import AngleDoubleUpIcon from 'primevue/icons/angledoubleup';
@ -75,6 +86,7 @@ import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
export default {
name: 'OrderList',
extends: BaseComponent,
emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'focus', 'blur'],
props: {
modelValue: {
@ -179,6 +191,14 @@ export default {
getItemKey(item, index) {
return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
},
getPTOptions(item, key) {
return this.ptm(key, {
context: {
active: this.isSelected(item),
focused: this.id === this.focusedOptionId
}
});
},
isSelected(item) {
return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
},