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

Refactor #3924 - For PickList

pull/3950/head
Tuğçe Küçükoğlu 2023-05-10 01:03:24 +03:00
parent e8c8343c08
commit 9ccf18dd16
4 changed files with 196 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,6 +59,12 @@ const PickListProps = [
type: 'boolean', type: 'boolean',
default: 'true', default: 'true',
description: 'Whether to show buttons of target list.' description: 'Whether to show buttons of target list.'
},
{
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

@ -49,6 +49,7 @@ import { PaginatorPassThroughOptions } from '../paginator';
import { PanelPassThroughOptions } from '../panel'; import { PanelPassThroughOptions } from '../panel';
import { PanelMenuPassThroughOptions } from '../panelmenu'; import { PanelMenuPassThroughOptions } from '../panelmenu';
import { PasswordPassThroughOptions } from '../password'; import { PasswordPassThroughOptions } from '../password';
import { PickListPassThroughOptions } from '../picklist';
import { ProgressBarPassThroughOptions } from '../progressbar'; import { ProgressBarPassThroughOptions } from '../progressbar';
import { ProgressSpinnerPassThroughOptions } from '../progressspinner'; import { ProgressSpinnerPassThroughOptions } from '../progressspinner';
import { RadioButtonPassThroughOptions } from '../radiobutton'; import { RadioButtonPassThroughOptions } from '../radiobutton';
@ -141,6 +142,7 @@ interface PrimeVuePTOptions {
panel?: PanelPassThroughOptions; panel?: PanelPassThroughOptions;
panelmenu?: PanelMenuPassThroughOptions; panelmenu?: PanelMenuPassThroughOptions;
password?: PasswordPassThroughOptions; password?: PasswordPassThroughOptions;
picklist?: PickListPassThroughOptions;
progressbar?: ProgressBarPassThroughOptions; progressbar?: ProgressBarPassThroughOptions;
progressspinner?: ProgressSpinnerPassThroughOptions; progressspinner?: ProgressSpinnerPassThroughOptions;
radiobutton?: RadioButtonPassThroughOptions; radiobutton?: RadioButtonPassThroughOptions;

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

@ -8,8 +8,19 @@
* *
*/ */
import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue'; import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
import { ButtonPassThroughOptionType } from '../button';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type PickListPassThroughOptionType = PickListPassThroughAttributes | ((options: PickListPassThroughMethodOptions) => PickListPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface PickListPassThroughMethodOptions {
props: PickListProps;
state: PickListState;
}
/** /**
* Custom reorder event. * Custom reorder event.
* @see {@link PickListEmits.reorder} * @see {@link PickListEmits.reorder}
@ -84,6 +95,132 @@ export interface PickListMoveToSourceEvent extends PickListMoveToTargetEvent {}
*/ */
export interface PickListMoveAllToSourceEvent extends PickListMoveToTargetEvent {} export interface PickListMoveAllToSourceEvent extends PickListMoveToTargetEvent {}
/**
* Custom passthrough(pt) options.
* @see {@link PickListProps.pt}
*/
export interface PickListPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: PickListPassThroughOptionType;
/**
* Uses to pass attributes to the source controls' DOM element.
*/
sourceControls?: PickListPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
sourceMoveUpButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
sourceMoveTopButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
sourceMoveDownButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
sourceMoveBottomButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the source wrapper's DOM element.
*/
sourceWrapper?: PickListPassThroughOptionType;
/**
* Uses to pass attributes to the source header's DOM element.
*/
sourceHeader?: PickListPassThroughOptionType;
/**
* Uses to pass attributes to the source list's DOM element.
*/
sourceList?: PickListPassThroughOptionType;
/**
* Uses to pass attributes to the buttons' DOM element.
*/
buttons?: PickListPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
moveToTargetButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
moveAllToTargetButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
moveToSourceButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
moveAllToSourceButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the target wrapper's DOM element.
*/
targetWrapper?: PickListPassThroughOptionType;
/**
* Uses to pass attributes to the target header's DOM element.
*/
targetHeader?: PickListPassThroughOptionType;
/**
* Uses to pass attributes to the target list's DOM element.
*/
targetList?: PickListPassThroughOptionType;
/**
* Uses to pass attributes to the target controls' DOM element.
*/
targetControls?: PickListPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
targetMoveUpButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
targetMoveTopButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
targetMoveDownButton?: ButtonPassThroughOptionType;
/**
* Uses to pass attributes to the Button component.
*/
targetMoveBottomButton?: ButtonPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface PickListPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in PickList component.
*/
export interface PickListState {
/**
* 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 valid properties in PickList component. * Defines valid properties in PickList component.
*/ */
@ -180,6 +317,11 @@ export interface PickListProps {
* Uses to pass all properties of the HTMLButtonElement to the move all to source button inside the component. * Uses to pass all properties of the HTMLButtonElement to the move all to source button inside the component.
*/ */
moveAllToSourceProps?: ButtonHTMLAttributes | undefined; moveAllToSourceProps?: ButtonHTMLAttributes | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {PickListPassThroughOptions}
*/
pt?: PickListPassThroughOptions;
} }
/** /**

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

@ -1,39 +1,39 @@
<template> <template>
<div :class="containerClass"> <div :class="containerClass" v-bind="ptm('root')">
<div v-if="showSourceControls" class="p-picklist-buttons p-picklist-source-controls"> <div v-if="showSourceControls" class="p-picklist-buttons p-picklist-source-controls" v-bind="ptm('sourceControls')">
<slot name="sourcecontrolsstart"></slot> <slot name="sourcecontrolsstart"></slot>
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="moveUpButtonProps"> <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="moveUpButtonProps" :pt="ptm('sourceMoveUpButton')">
<template #icon> <template #icon>
<slot name="moveupicon"> <slot name="moveupicon">
<AngleUpIcon /> <AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="moveTopButtonProps"> <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="moveTopButtonProps" :pt="ptm('sourceMoveTopButton')">
<template #icon> <template #icon>
<slot name="movetopicon"> <slot name="movetopicon">
<AngleDoubleUpIcon /> <AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="moveDownButtonProps"> <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="moveDownButtonProps" :pt="ptm('sourceMoveDownButton')">
<template #icon> <template #icon>
<slot name="movedownicon"> <slot name="movedownicon">
<AngleDownIcon /> <AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="moveBottomButtonProps"> <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="moveBottomButtonProps" :pt="ptm('sourceMoveBottomButton')">
<template #icon> <template #icon>
<slot name="movebottomicon"> <slot name="movebottomicon">
<AngleDoubleDownIcon /> <AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<slot name="sourcecontrolsend"></slot> <slot name="sourcecontrolsend"></slot>
</div> </div>
<div class="p-picklist-list-wrapper p-picklist-source-wrapper"> <div class="p-picklist-list-wrapper p-picklist-source-wrapper" v-bind="ptm('sourceWrapper')">
<div v-if="$slots.sourceheader" class="p-picklist-header"> <div v-if="$slots.sourceheader" class="p-picklist-header" v-bind="ptm('sourceHeader')">
<slot name="sourceheader"></slot> <slot name="sourceheader"></slot>
</div> </div>
<transition-group <transition-group
@ -50,7 +50,7 @@
@focus="onListFocus($event, 'sourceList')" @focus="onListFocus($event, 'sourceList')"
@blur="onListBlur($event, 'sourceList')" @blur="onListBlur($event, 'sourceList')"
@keydown="onItemKeyDown($event, 'sourceList')" @keydown="onItemKeyDown($event, 'sourceList')"
v-bind="sourceListProps" v-bind="{ ...sourceListProps, ...ptm('sourceList') }"
> >
<template v-for="(item, i) of sourceList" :key="getItemKey(item, i)"> <template v-for="(item, i) of sourceList" :key="getItemKey(item, i)">
<li <li
@ -63,46 +63,47 @@
@mousedown="onOptionMouseDown(i, 'sourceList')" @mousedown="onOptionMouseDown(i, 'sourceList')"
role="option" role="option"
:aria-selected="isSelected(item, 0)" :aria-selected="isSelected(item, 0)"
v-bind="getPTOptions(item, 'item')"
> >
<slot name="item" :item="item" :index="i"> </slot> <slot name="item" :item="item" :index="i"> </slot>
</li> </li>
</template> </template>
</transition-group> </transition-group>
</div> </div>
<div class="p-picklist-buttons p-picklist-transfer-buttons"> <div class="p-picklist-buttons p-picklist-transfer-buttons" v-bind="ptm('buttons')">
<slot name="movecontrolsstart"></slot> <slot name="movecontrolsstart"></slot>
<PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps"> <PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps" :pt="ptm('moveToTargetButton')">
<template #icon> <template #icon>
<slot name="movetotargeticon" :viewChanged="viewChanged"> <slot name="movetotargeticon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" /> <component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" v-bind="ptm('moveToTargetButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps"> <PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps" :pt="ptm('moveAllToTargetButton')">
<template #icon> <template #icon>
<slot name="movealltotargeticon" :viewChanged="viewChanged"> <slot name="movealltotargeticon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" /> <component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" v-bind="ptm('moveAllToTargetButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps"> <PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps" :pt="ptm('moveToSourceButton')">
<template #icon> <template #icon>
<slot name="movetosourceicon" :viewChanged="viewChanged"> <slot name="movetosourceicon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" /> <component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" v-bind="ptm('moveToSourceButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="moveAllToSourceProps"> <PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="moveAllToSourceProps" :pt="ptm('moveAllToSourceButton')">
<template #icon> <template #icon>
<slot name="movealltosourceicon" :viewChanged="viewChanged"> <slot name="movealltosourceicon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" /> <component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" v-bind="ptm('moveAllToSourceButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<slot name="movecontrolsend"></slot> <slot name="movecontrolsend"></slot>
</div> </div>
<div class="p-picklist-list-wrapper p-picklist-target-wrapper"> <div class="p-picklist-list-wrapper p-picklist-target-wrapper" v-bind="ptm('targetWrapper')">
<div v-if="$slots.targetheader" class="p-picklist-header"> <div v-if="$slots.targetheader" class="p-picklist-header" v-bind="ptm('targetHeader')">
<slot name="targetheader"></slot> <slot name="targetheader"></slot>
</div> </div>
<transition-group <transition-group
@ -119,7 +120,7 @@
@focus="onListFocus($event, 'targetList')" @focus="onListFocus($event, 'targetList')"
@blur="onListBlur($event, 'targetList')" @blur="onListBlur($event, 'targetList')"
@keydown="onItemKeyDown($event, 'targetList')" @keydown="onItemKeyDown($event, 'targetList')"
v-bind="targetListProps" v-bind="{ ...targetListProps, ...ptm('targetList') }"
> >
<template v-for="(item, i) of targetList" :key="getItemKey(item, i)"> <template v-for="(item, i) of targetList" :key="getItemKey(item, i)">
<li <li
@ -133,39 +134,40 @@
@touchend="onItemTouchEnd" @touchend="onItemTouchEnd"
role="option" role="option"
:aria-selected="isSelected(item, 1)" :aria-selected="isSelected(item, 1)"
v-bind="getPTOptions(item, 'item')"
> >
<slot name="item" :item="item" :index="i"> </slot> <slot name="item" :item="item" :index="i"> </slot>
</li> </li>
</template> </template>
</transition-group> </transition-group>
</div> </div>
<div v-if="showTargetControls" class="p-picklist-buttons p-picklist-target-controls"> <div v-if="showTargetControls" class="p-picklist-buttons p-picklist-target-controls" v-bind="ptm('targetControls')">
<slot name="targetcontrolsstart"></slot> <slot name="targetcontrolsstart"></slot>
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="moveUpButtonProps"> <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="moveUpButtonProps" :pt="ptm('targetMoveUpButton')">
<template #icon> <template #icon>
<slot name="moveupicon"> <slot name="moveupicon">
<AngleUpIcon /> <AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="moveTopButtonProps"> <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="moveTopButtonProps" :pt="ptm('targetMoveTopButton')">
<template #icon> <template #icon>
<slot name="movetopicon"> <slot name="movetopicon">
<AngleDoubleUpIcon /> <AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="moveDownButtonProps"> <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="moveDownButtonProps" :pt="ptm('targetMoveDownButton')">
<template #icon> <template #icon>
<slot name="movedownicon"> <slot name="movedownicon">
<AngleDownIcon /> <AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="moveBottomButtonProps"> <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="moveBottomButtonProps" :pt="ptm('targetMoveBottomButton')">
<template #icon> <template #icon>
<slot name="movebottomicon"> <slot name="movebottomicon">
<AngleDoubleDownIcon /> <AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
@ -175,6 +177,7 @@
</template> </template>
<script> <script>
import BaseComponent from 'primevue/basecomponent';
import Button from 'primevue/button'; import Button from 'primevue/button';
import AngleDoubleDownIcon from 'primevue/icons/angledoubledown'; import AngleDoubleDownIcon from 'primevue/icons/angledoubledown';
import AngleDoubleLeftIcon from 'primevue/icons/angledoubleleft'; import AngleDoubleLeftIcon from 'primevue/icons/angledoubleleft';
@ -189,6 +192,7 @@ import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
export default { export default {
name: 'PickList', name: 'PickList',
extends: BaseComponent,
emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'move-to-target', 'move-to-source', 'move-all-to-target', 'move-all-to-source', 'focus', 'blur'], emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'move-to-target', 'move-to-source', 'move-all-to-target', 'move-all-to-source', 'focus', 'blur'],
props: { props: {
modelValue: { modelValue: {
@ -328,6 +332,14 @@ 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) {
return this.ptm(key, {
context: {
active: this.isSelected(item),
focused: this.id === this.focusedOptionId
}
});
},
isSelected(item, listIndex) { isSelected(item, listIndex) {
return ObjectUtils.findIndexInList(item, this.d_selection[listIndex]) != -1; return ObjectUtils.findIndexInList(item, this.d_selection[listIndex]) != -1;
}, },