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

Refactor #3924 - For OrderList

pull/3950/head
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,6 +47,12 @@ const OrderListProps = [
type: 'boolean',
default: 'false',
description: 'Whether to displays rows with alternating colors.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

2
components/lib/config/PrimeVue.d.ts vendored
View File

@ -43,6 +43,7 @@ import { MenuPassThroughOptions } from '../menu';
import { MenubarPassThroughOptions } from '../menubar';
import { MessagePassThroughOptions } from '../message';
import { MultiSelectPassThroughOptions } from '../multiselect';
import { OrderListPassThroughOptions } from '../orderlist';
import { OverlayPanelPassThroughOptions } from '../overlaypanel';
import { PaginatorPassThroughOptions } from '../paginator';
import { PanelPassThroughOptions } from '../panel';
@ -134,6 +135,7 @@ interface PrimeVuePTOptions {
menubar?: MenubarPassThroughOptions;
message?: MessagePassThroughOptions;
multiselect?: MultiSelectPassThroughOptions;
orderlist?: OrderListPassThroughOptions;
overlaypanel?: OverlayPanelPassThroughOptions;
paginator?: PaginatorPassThroughOptions;
panel?: PanelPassThroughOptions;

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

@ -8,8 +8,20 @@
*
*/
import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
import { ButtonPassThroughOptionType } from '../button';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type OrderListPassThroughOptionType = OrderListPassThroughAttributes | ((options: OrderListPassThroughMethodOptions) => OrderListPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface OrderListPassThroughMethodOptions {
props: OrderListProps;
state: OrderListState;
context: OrderListState;
}
/**
* Custom reorder event
* @see {@link OrderListEmits.reorder}
@ -44,6 +56,100 @@ export interface OrderListSelectionChangeEvent {
value: any[];
}
/**
* Custom passthrough(pt) options.
* @see {@link OrderListProps.pt}
*/
export interface OrderListPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: OrderListPassThroughOptionType;
/**
* Uses to pass attributes to the controls' DOM element.
*/
controls?: OrderListPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
moveUpButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
moveTopButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
moveDownButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
moveBottomButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the container's DOM element.
*/
container?: OrderListPassThroughOptionType;
/**
* Uses to pass attributes to the header's DOM element.
*/
header?: OrderListPassThroughOptionType;
/**
* Uses to pass attributes to the list's DOM element.
*/
list?: OrderListPassThroughOptionType;
/**
* Uses to pass attributes to the item's DOM element.
*/
item?: OrderListPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface OrderListPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in OrderList component.
*/
export interface OrderListState {
/**
* Current id state as a string.
*/
id: string;
/**
* Current id state as a string.
*/
d_selection: any[];
/**
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current focused item index as a number.
* @defaultvalue -1
*/
focusedOptionIndex: number;
}
/**
* Defines current inline state in OrderList component.
*/
export interface OrderListState {
/**
* 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.
*/

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;
},