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

Refactor #5437 - for OrderList / PickList

Browse source
This commit is contained in:
tugcekucukoglu 2024-03-25 16:02:23 +03:00
parent 9622a2b564
commit 1a23863638
6 changed files with 133 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

24
components/lib/orderlist/BaseOrderList.vue
View file

@ -46,9 +46,27 @@ export default {
type: Boolean,
default: false
},
severity: {
type: String,
default: 'secondary'
buttonProps: {
type: Object,
default() {
return { severity: 'secondary' };
}
},
moveUpButtonProps: {
type: null,
default: null
},
moveTopButtonProps: {
type: null,
default: null
},
moveDownButtonProps: {
type: null,
default: null
},
moveBottomButtonProps: {
type: null,
default: null
},
tabindex: {
type: Number,

27
components/lib/orderlist/OrderList.d.ts vendored
View file

@ -9,10 +9,10 @@
*/
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { ButtonPassThroughOptions, ButtonProps } from '../button';
import { ListboxPassThroughOptions } from '../listbox';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type OrderListPassThroughOptionType = OrderListPassThroughAttributes | ((options: OrderListPassThroughMethodOptions) => OrderListPassThroughAttributes | string) | string | null | undefined;
@ -231,10 +231,27 @@ export interface OrderListProps {
*/
tabindex?: number | string | undefined;
/**
* Defines the style of the button.
* @defaultValue secondary
* Used to pass all properties of the ButtonProps to the move up button inside the component.
* @type {ButtonProps}
* @defaultValue { severity: 'secondary' }
*/
severity?: HintedString<'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | 'contrast'> | undefined;
buttonProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the move up button inside the component.
*/
moveUpButtonProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the move top button inside the component.
*/
moveTopButtonProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the move down button inside the component.
*/
moveDownButtonProps?: object | undefined;
/**
* Used to pass all properties of the ButtonProps to the move bottom button inside the component.
*/
moveBottomButtonProps?: object | undefined;
/**
* Defines a string value that labels an interactive list element.
*/

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

@ -2,28 +2,28 @@
<div :class="cx('root')" v-bind="ptmi('root')">
<div :class="cx('controls')" v-bind="ptm('controls')">
<slot name="controlsstart"></slot>
<Button @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveUpButton')" :unstyled="unstyled">
<Button @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('moveUpButton')" :unstyled="unstyled">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" />
</slot>
</template>
</Button>
<Button @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveTopButton')" :unstyled="unstyled">
<Button @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('moveTopButton')" :unstyled="unstyled">
<template #icon>
<slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" />
</slot>
</template>
</Button>
<Button @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveDownButton')" :unstyled="unstyled">
<Button @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('moveDownButton')" :unstyled="unstyled">
<template #icon>
<slot name="movedownicon">
<AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" />
</slot>
</template>
</Button>
<Button @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveBottomButton')" :unstyled="unstyled">
<Button @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('moveBottomButton')" :unstyled="unstyled">
<template #icon>
<slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" />