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

Refactor #5592 - For OrgChart, Paginator, Picklist, Timeline

pull/5677/head
tugcekucukoglu 2024-05-02 09:27:51 +03:00
parent abef162a11
commit 3596026387
17 changed files with 105 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/lib/organizationchart/OrganizationChart.d.ts vendored
View File

@ -132,29 +132,37 @@ export interface OrganizationChartPassThroughOptions {
*/ */
node?: OrganizationChartPassThroughOptionType; node?: OrganizationChartPassThroughOptionType;
/** /**
* Used to pass attributes to the nodeToggler's DOM element. * Used to pass attributes to the node toggle button's DOM element.
*/ */
nodeToggler?: OrganizationChartPassThroughOptionType; nodeToggleButton?: OrganizationChartPassThroughOptionType;
/** /**
* Used to pass attributes to the nodeTogglerIcon's DOM element. * Used to pass attributes to the node toggle button icon's DOM element.
*/ */
nodeTogglerIcon?: OrganizationChartPassThroughOptionType; nodeToggleButtonIcon?: OrganizationChartPassThroughOptionType;
/** /**
* Used to pass attributes to the lines's DOM element. * Used to pass attributes to the connectors's DOM element.
*/ */
lines?: OrganizationChartPassThroughOptionType; connectors?: OrganizationChartPassThroughOptionType;
/** /**
* Used to pass attributes to the lineCell's DOM element. * Used to pass attributes to the lineCell's DOM element.
*/ */
lineCell?: OrganizationChartPassThroughOptionType; lineCell?: OrganizationChartPassThroughOptionType;
/** /**
* Used to pass attributes to the lineDown's DOM element. * Used to pass attributes to the connector down's DOM element.
*/ */
lineDown?: OrganizationChartPassThroughOptionType; connectorDown?: OrganizationChartPassThroughOptionType;
/** /**
* Used to pass attributes to the nodes's DOM element. * Used to pass attributes to the connector left's DOM element.
*/ */
nodes?: OrganizationChartPassThroughOptionType; connectorLeft?: OrganizationChartPassThroughOptionType;
/**
* Used to pass attributes to the connector right's DOM element.
*/
connectorRight?: OrganizationChartPassThroughOptionType;
/**
* Used to pass attributes to the node children's DOM element.
*/
nodeChildren?: OrganizationChartPassThroughOptionType;
/** /**
* Used to pass attributes to the nodeCell's DOM element. * Used to pass attributes to the nodeCell's DOM element.
*/ */

22
components/lib/organizationchart/OrganizationChartNode.vue
View File

@ -5,32 +5,32 @@
<td :colspan="colspan" v-bind="ptm('cell')"> <td :colspan="colspan" v-bind="ptm('cell')">
<div :class="[cx('node'), node.styleClass]" @click="onNodeClick" v-bind="getPTOptions('node')"> <div :class="[cx('node'), node.styleClass]" @click="onNodeClick" v-bind="getPTOptions('node')">
<component :is="templates[node.type] || templates['default']" :node="node" /> <component :is="templates[node.type] || templates['default']" :node="node" />
<a v-if="toggleable" tabindex="0" :class="cx('nodeToggler')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggler')"> <a v-if="toggleable" tabindex="0" :class="cx('nodeToggleButton')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggleButton')">
<component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" /> <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
<component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeTogglerIcon')" v-bind="getPTOptions('nodeTogglerIcon')" /> <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
</a> </a>
</div> </div>
</td> </td>
</tr> </tr>
<tr :style="childStyle" :class="cx('lines')" v-bind="ptm('lines')"> <tr :style="childStyle" :class="cx('connectors')" v-bind="ptm('connectors')">
<td :colspan="colspan" v-bind="ptm('lineCell')"> <td :colspan="colspan" v-bind="ptm('lineCell')">
<div :class="cx('lineDown')" v-bind="ptm('lineDown')"></div> <div :class="cx('connectorDown')" v-bind="ptm('connectorDown')"></div>
</td> </td>
</tr> </tr>
<tr :style="childStyle" :class="cx('lines')" v-bind="ptm('lines')"> <tr :style="childStyle" :class="cx('connectors')" v-bind="ptm('connectors')">
<template v-if="node.children && node.children.length === 1"> <template v-if="node.children && node.children.length === 1">
<td :colspan="colspan" v-bind="ptm('lineCell')"> <td :colspan="colspan" v-bind="ptm('lineCell')">
<div :class="cx('lineDown')" v-bind="ptm('lineDown')"></div> <div :class="cx('connectorDown')" v-bind="ptm('connectorDown')"></div>
</td> </td>
</template> </template>
<template v-if="node.children && node.children.length > 1"> <template v-if="node.children && node.children.length > 1">
<template v-for="(child, i) of node.children" :key="child.key"> <template v-for="(child, i) of node.children" :key="child.key">
<td :class="cx('lineLeft', { index: i })" v-bind="getNodeOptions(!(i === 0), 'lineLeft')">&nbsp;</td> <td :class="cx('connectorLeft', { index: i })" v-bind="getNodeOptions(!(i === 0), 'connectorLeft')">&nbsp;</td>
<td :class="cx('lineRight', { index: i })" v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')">&nbsp;</td> <td :class="cx('connectorRight', { index: i })" v-bind="getNodeOptions(!(i === node.children.length - 1), 'connectorRight')">&nbsp;</td>
</template> </template>
</template> </template>
</tr> </tr>
<tr :style="childStyle" :class="cx('nodes')" v-bind="ptm('nodes')"> <tr :style="childStyle" :class="cx('nodeChildren')" v-bind="ptm('nodeChildren')">
<td v-for="child of node.children" :key="child.key" colspan="2" v-bind="ptm('nodeCell')"> <td v-for="child of node.children" :key="child.key" colspan="2" v-bind="ptm('nodeCell')">
<OrganizationChartNode <OrganizationChartNode
:node="child" :node="child"
@ -107,7 +107,7 @@ export default {
}); });
}, },
onNodeClick(event) { onNodeClick(event) {
if (DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetoggler') || DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglericon')) { if (DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglebutton') || DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglebuttonicon')) {
return; return;
} }

14
components/lib/organizationchart/style/OrganizationChartStyle.js
View File

@ -114,13 +114,13 @@ const classes = {
root: 'p-organizationchart p-component', root: 'p-organizationchart p-component',
table: 'p-organizationchart-table', table: 'p-organizationchart-table',
node: ({ instance }) => ['p-organizationchart-node', { 'p-organizationchart-node-selectable': instance.selectable, 'p-highlight': instance.selected }], node: ({ instance }) => ['p-organizationchart-node', { 'p-organizationchart-node-selectable': instance.selectable, 'p-highlight': instance.selected }],
nodeToggler: 'p-organizationchart-node-toggle-button', nodeToggleButton: 'p-organizationchart-node-toggle-button',
nodeTogglerIcon: 'p-organizationchart-node-toggle-button-icon', nodeToggleButtonIcon: 'p-organizationchart-node-toggle-button-icon',
lines: 'p-organizationchart-connectors', connectors: 'p-organizationchart-connectors',
lineDown: 'p-organizationchart-connector-down', connectorDown: 'p-organizationchart-connector-down',
lineLeft: ({ index }) => ['p-organizationchart-connector-left', { 'p-organizationchart-connector-top': !(index === 0) }], connectorLeft: ({ index }) => ['p-organizationchart-connector-left', { 'p-organizationchart-connector-top': !(index === 0) }],
lineRight: ({ props, index }) => ['p-organizationchart-connector-right', { 'p-organizationchart-connector-top': !(index === props.node.children.length - 1) }], connectorRight: ({ props, index }) => ['p-organizationchart-connector-right', { 'p-organizationchart-connector-top': !(index === props.node.children.length - 1) }],
nodes: 'p-organizationchart-node-children' nodeChildren: 'p-organizationchart-node-children'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

4
components/lib/paginator/FirstPageLink.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<button v-ripple :class="cx('firstPageButton')" type="button" v-bind="getPTOptions('firstPageButton')" data-pc-group-section="pagebutton"> <button v-ripple :class="cx('first')" type="button" v-bind="getPTOptions('first')" data-pc-group-section="pagebutton">
<component :is="template || 'AngleDoubleLeftIcon'" :class="cx('firstPageIcon')" v-bind="getPTOptions('firstPageIcon')" /> <component :is="template || 'AngleDoubleLeftIcon'" :class="cx('firstIcon')" v-bind="getPTOptions('firstIcon')" />
</button> </button>
</template> </template>

4
components/lib/paginator/LastPageLink.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<button v-ripple :class="cx('lastPageButton')" type="button" v-bind="getPTOptions('lastPageButton')" data-pc-group-section="pagebutton"> <button v-ripple :class="cx('last')" type="button" v-bind="getPTOptions('last')" data-pc-group-section="pagebutton">
<component :is="template || 'AngleDoubleRightIcon'" :class="cx('lastPageIcon')" v-bind="getPTOptions('lastPageIcon')" /> <component :is="template || 'AngleDoubleRightIcon'" :class="cx('lastIcon')" v-bind="getPTOptions('lastIcon')" />
</button> </button>
</template> </template>

4
components/lib/paginator/NextPageLink.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<button v-ripple :class="cx('nextPageButton')" type="button" v-bind="getPTOptions('nextPageButton')" data-pc-group-section="pagebutton"> <button v-ripple :class="cx('next')" type="button" v-bind="getPTOptions('next')" data-pc-group-section="pagebutton">
<component :is="template || 'AngleRightIcon'" :class="cx('nextPageIcon')" v-bind="getPTOptions('nextPageIcon')" /> <component :is="template || 'AngleRightIcon'" :class="cx('nextIcon')" v-bind="getPTOptions('nextIcon')" />
</button> </button>
</template> </template>

4
components/lib/paginator/PageLinks.vue
View File

@ -4,12 +4,12 @@
v-for="pageLink of value" v-for="pageLink of value"
:key="pageLink" :key="pageLink"
v-ripple v-ripple
:class="cx('pageButton', { pageLink })" :class="cx('page', { pageLink })"
type="button" type="button"
:aria-label="ariaPageLabel(pageLink)" :aria-label="ariaPageLabel(pageLink)"
:aria-current="pageLink - 1 === page ? 'page' : undefined" :aria-current="pageLink - 1 === page ? 'page' : undefined"
@click="onPageLinkClick($event, pageLink)" @click="onPageLinkClick($event, pageLink)"
v-bind="getPTOptions(pageLink - 1, 'pageButton')" v-bind="getPTOptions(pageLink - 1, 'page')"
:data-p-highlight="pageLink - 1 === page" :data-p-highlight="pageLink - 1 === page"
> >
{{ pageLink }} {{ pageLink }}

28
components/lib/paginator/Paginator.d.ts vendored
View File

@ -74,41 +74,41 @@ export interface PaginatorPassThroughOptions<T = any> {
*/ */
root?: PaginatorPassThroughOptionType<T>; root?: PaginatorPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the start's DOM element. * Used to pass attributes to the content start's DOM element.
*/ */
start?: PaginatorPassThroughOptionType<T>; contentStart?: PaginatorPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the first page button's DOM element. * Used to pass attributes to the first page button's DOM element.
*/ */
firstPageButton?: PaginatorPassThroughOptionType<T>; first?: PaginatorPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the first page icon's DOM element. * Used to pass attributes to the first icon's DOM element.
*/ */
firstPageIcon?: PaginatorPassThroughOptionType<T>; firstIcon?: PaginatorPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the prev page button's DOM element. * Used to pass attributes to the prev page button's DOM element.
*/ */
previousPageButton?: PaginatorPassThroughOptionType<T>; prev?: PaginatorPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the prev page icon's DOM element. * Used to pass attributes to the prev page icon's DOM element.
*/ */
previousPageIcon?: PaginatorPassThroughOptionType<T>; prevIcon?: PaginatorPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the next page button's DOM element. * Used to pass attributes to the next page button's DOM element.
*/ */
nextPageButton?: PaginatorPassThroughOptionType<T>; next?: PaginatorPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the next page icon's DOM element. * Used to pass attributes to the next page icon's DOM element.
*/ */
nextPageIcon?: PaginatorPassThroughOptionType<T>; nextIcon?: PaginatorPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the last page button's DOM element. * Used to pass attributes to the last page button's DOM element.
*/ */
lastPageButton?: PaginatorPassThroughOptionType<T>; last?: PaginatorPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the last page icon's DOM element. * Used to pass attributes to the last page icon's DOM element.
*/ */
lastPageIcon?: PaginatorPassThroughOptionType<T>; lastIcon?: PaginatorPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the pages's DOM element. * Used to pass attributes to the pages's DOM element.
*/ */
@ -116,7 +116,7 @@ export interface PaginatorPassThroughOptions<T = any> {
/** /**
* Used to pass attributes to the page button's DOM element. * Used to pass attributes to the page button's DOM element.
*/ */
pageButton?: PaginatorPassThroughOptionType<T>; page?: PaginatorPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the current's DOM element. * Used to pass attributes to the current's DOM element.
*/ */
@ -137,9 +137,9 @@ export interface PaginatorPassThroughOptions<T = any> {
*/ */
jumpToPageInput?: InputNumberPassThroughOptions<PaginatorSharedPassThroughMethodOptions>; jumpToPageInput?: InputNumberPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the end's DOM element. * Used to pass attributes to the content end's DOM element.
*/ */
end?: PaginatorPassThroughOptionType<T>; contentEnd?: PaginatorPassThroughOptionType<T>;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

4
components/lib/paginator/Paginator.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" v-bind="ptmi('paginatorWrapper')"> <nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" v-bind="ptmi('paginatorWrapper')">
<div v-for="(value, key) in templateItems" :key="key" ref="paginator" :class="cx('paginator', { key })" v-bind="ptm('root')"> <div v-for="(value, key) in templateItems" :key="key" ref="paginator" :class="cx('paginator', { key })" v-bind="ptm('root')">
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')"> <div v-if="$slots.start" :class="cx('contentStart')" v-bind="ptm('contentStart')">
<slot name="start" :state="currentState"></slot> <slot name="start" :state="currentState"></slot>
</div> </div>
<template v-for="item in value" :key="item"> <template v-for="item in value" :key="item">
@ -47,7 +47,7 @@
/> />
<JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :unstyled="unstyled" :pt="pt" /> <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :unstyled="unstyled" :pt="pt" />
</template> </template>
<div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')"> <div v-if="$slots.end" :class="cx('contentEnd')" v-bind="ptm('contentEnd')">
<slot name="end" :state="currentState"></slot> <slot name="end" :state="currentState"></slot>
</div> </div>
</div> </div>

4
components/lib/paginator/PrevPageLink.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<button v-ripple :class="cx('previousPageButton')" type="button" v-bind="getPTOptions('previousPageButton')" data-pc-group-section="pagebutton"> <button v-ripple :class="cx('prev')" type="button" v-bind="getPTOptions('prev')" data-pc-group-section="pagebutton">
<component :is="template || 'AngleLeftIcon'" :class="cx('previousPageIcon')" v-bind="getPTOptions('previousPageIcon')" /> <component :is="template || 'AngleLeftIcon'" :class="cx('prevIcon')" v-bind="getPTOptions('prevIcon')" />
</button> </button>
</template> </template>

22
components/lib/paginator/style/PaginatorStyle.js
View File

@ -83,38 +83,38 @@ const classes = {
[`p-paginator-${key}`]: instance.hasBreakpoints() [`p-paginator-${key}`]: instance.hasBreakpoints()
} }
], ],
start: 'p-paginator-content-start', contentStart: 'p-paginator-content-start',
end: 'p-paginator-content-end', contentEnd: 'p-paginator-content-end',
firstPageButton: ({ instance }) => [ first: ({ instance }) => [
'p-paginator-first', 'p-paginator-first',
{ {
'p-disabled': instance.$attrs.disabled 'p-disabled': instance.$attrs.disabled
} }
], ],
firstPageIcon: 'p-paginator-first-icon', firstIcon: 'p-paginator-first-icon',
previousPageButton: ({ instance }) => [ prev: ({ instance }) => [
'p-paginator-prev', 'p-paginator-prev',
{ {
'p-disabled': instance.$attrs.disabled 'p-disabled': instance.$attrs.disabled
} }
], ],
previousPageIcon: 'p-paginator-prev-icon', prevIcon: 'p-paginator-prev-icon',
nextPageButton: ({ instance }) => [ next: ({ instance }) => [
'p-paginator-next', 'p-paginator-next',
{ {
'p-disabled': instance.$attrs.disabled 'p-disabled': instance.$attrs.disabled
} }
], ],
nextPageIcon: 'p-paginator-next-icon', nextIcon: 'p-paginator-next-icon',
lastPageButton: ({ instance }) => [ last: ({ instance }) => [
'p-paginator-last', 'p-paginator-last',
{ {
'p-disabled': instance.$attrs.disabled 'p-disabled': instance.$attrs.disabled
} }
], ],
lastPageIcon: 'p-paginator-last-icon', lastIcon: 'p-paginator-last-icon',
pages: 'p-paginator-pages', pages: 'p-paginator-pages',
pageButton: ({ props, pageLink }) => [ page: ({ props, pageLink }) => [
'p-paginator-page', 'p-paginator-page',
{ {
'p-paginator-page-active': pageLink - 1 === props.page 'p-paginator-page-active': pageLink - 1 === props.page

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

@ -169,17 +169,17 @@ export interface PickListPassThroughOptions {
*/ */
sourceMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>; sourceMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the source wrapper's DOM element. * Used to pass attributes to the source list containerr's DOM element.
*/ */
sourceWrapper?: PickListPassThroughOptionType; sourceListContainer?: PickListPassThroughOptionType;
/** /**
* Used to pass attributes to the source list's DOM element. * Used to pass attributes to the source list's DOM element.
*/ */
sourceList?: PickListPassThroughOptionType; sourceList?: PickListPassThroughOptionType;
/** /**
* Used to pass attributes to the buttons' DOM element. * Used to pass attributes to the transfer controls' DOM element.
*/ */
buttons?: PickListPassThroughOptionType; transferControls?: PickListPassThroughOptionType;
/** /**
* Used to pass attributes to the Button component. * Used to pass attributes to the Button component.
*/ */
@ -197,9 +197,9 @@ export interface PickListPassThroughOptions {
*/ */
moveAllToSourceButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>; moveAllToSourceButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the target wrapper's DOM element. * Used to pass attributes to the target list container's DOM element.
*/ */
targetWrapper?: PickListPassThroughOptionType; targetListContainer?: PickListPassThroughOptionType;
/** /**
* Used to pass attributes to the target list's DOM element. * Used to pass attributes to the target list's DOM element.
*/ */

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

@ -32,7 +32,7 @@
</Button> </Button>
<slot name="sourcecontrolsend"></slot> <slot name="sourcecontrolsend"></slot>
</div> </div>
<div :class="cx('sourceWrapper')" v-bind="ptm('sourceWrapper')" data-pc-group-section="listwrapper"> <div :class="cx('sourceListContainer')" v-bind="ptm('sourceListContainer')" data-pc-group-section="listcontainer">
<Listbox <Listbox
ref="sourceList" ref="sourceList"
:id="idSource + '_list'" :id="idSource + '_list'"
@ -64,7 +64,7 @@
</template> </template>
</Listbox> </Listbox>
</div> </div>
<div :class="cx('buttons')" v-bind="ptm('buttons')" data-pc-group-section="controls"> <div :class="cx('transferControls')" v-bind="ptm('transferControls')" data-pc-group-section="controls">
<slot name="movecontrolsstart"></slot> <slot name="movecontrolsstart"></slot>
<Button :aria-label="moveToTargetAriaLabel" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="{ ...buttonProps, ...moveToTargetProps }" :pt="ptm('moveToTargetButton')" :unstyled="unstyled"> <Button :aria-label="moveToTargetAriaLabel" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="{ ...buttonProps, ...moveToTargetProps }" :pt="ptm('moveToTargetButton')" :unstyled="unstyled">
<template #icon> <template #icon>
@ -96,7 +96,7 @@
</Button> </Button>
<slot name="movecontrolsend"></slot> <slot name="movecontrolsend"></slot>
</div> </div>
<div :class="cx('targetWrapper')" v-bind="ptm('targetWrapper')" data-pc-group-section="listwrapper"> <div :class="cx('targetListContainer')" v-bind="ptm('targetListContainer')" data-pc-group-section="listcontainer">
<Listbox <Listbox
ref="targetList" ref="targetList"
:id="idTarget + '_list'" :id="idTarget + '_list'"

6
components/lib/picklist/style/PickListStyle.js
View File

@ -25,9 +25,9 @@ const theme = ({ dt }) => `
const classes = { const classes = {
root: 'p-picklist p-component', root: 'p-picklist p-component',
sourceControls: 'p-picklist-controls p-picklist-source-controls', sourceControls: 'p-picklist-controls p-picklist-source-controls',
sourceWrapper: 'p-picklist-list-container p-picklist-source-list-container', sourceListContainer: 'p-picklist-list-container p-picklist-source-list-container',
buttons: 'p-picklist-controls p-picklist-transfer-controls', transferControls: 'p-picklist-controls p-picklist-transfer-controls',
targetWrapper: 'p-picklist-list-container p-picklist-target-list-container', targetListContainer: 'p-picklist-list-container p-picklist-target-list-container',
targetControls: 'p-picklist-controls p-picklist-target-controls' targetControls: 'p-picklist-controls p-picklist-target-controls'
}; };

20
components/lib/timeline/Timeline.d.ts vendored
View File

@ -57,25 +57,25 @@ export interface TimelinePassThroughOptions {
*/ */
event?: TimelinePassThroughOptionType; event?: TimelinePassThroughOptionType;
/** /**
* Used to pass attributes to the opposite's DOM element. * Used to pass attributes to the event opposite's DOM element.
*/ */
opposite?: TimelinePassThroughOptionType; eventOpposite?: TimelinePassThroughOptionType;
/** /**
* Used to pass attributes to the separator's DOM element. * Used to pass attributes to the event separator's DOM element.
*/ */
separator?: TimelinePassThroughOptionType; eventSeparator?: TimelinePassThroughOptionType;
/** /**
* Used to pass attributes to the marker's DOM element. * Used to pass attributes to the event marker's DOM element.
*/ */
marker?: TimelinePassThroughOptionType; eventMarker?: TimelinePassThroughOptionType;
/** /**
* Used to pass attributes to the connector's DOM element. * Used to pass attributes to the event connector's DOM element.
*/ */
connector?: TimelinePassThroughOptionType; eventConnector?: TimelinePassThroughOptionType;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the event content's DOM element.
*/ */
content?: TimelinePassThroughOptionType; eventContent?: TimelinePassThroughOptionType;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

10
components/lib/timeline/Timeline.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<div :class="cx('root')" v-bind="ptmi('root')"> <div :class="cx('root')" v-bind="ptmi('root')">
<div v-for="(item, index) of value" :key="getKey(item, index)" :class="cx('event')" v-bind="getPTOptions('event', index)"> <div v-for="(item, index) of value" :key="getKey(item, index)" :class="cx('event')" v-bind="getPTOptions('event', index)">
<div :class="cx('opposite', { index })" v-bind="getPTOptions('opposite', index)"> <div :class="cx('eventOpposite', { index })" v-bind="getPTOptions('eventOpposite', index)">
<slot name="opposite" :item="item" :index="index"></slot> <slot name="opposite" :item="item" :index="index"></slot>
</div> </div>
<div :class="cx('separator')" v-bind="getPTOptions('separator', index)"> <div :class="cx('eventSeparator')" v-bind="getPTOptions('eventSeparator', index)">
<slot name="marker" :item="item" :index="index"> <slot name="marker" :item="item" :index="index">
<div :class="cx('marker')" v-bind="getPTOptions('marker', index)"></div> <div :class="cx('eventMarker')" v-bind="getPTOptions('eventMarker', index)"></div>
</slot> </slot>
<slot v-if="index !== value.length - 1" name="connector" :item="item" :index="index"> <slot v-if="index !== value.length - 1" name="connector" :item="item" :index="index">
<div :class="cx('connector')" v-bind="getPTOptions('connector', index)"></div> <div :class="cx('eventConnector')" v-bind="getPTOptions('eventConnector', index)"></div>
</slot> </slot>
</div> </div>
<div :class="cx('content')" v-bind="getPTOptions('content', index)"> <div :class="cx('eventContent')" v-bind="getPTOptions('eventContent', index)">
<slot name="content" :item="item" :index="index"></slot> <slot name="content" :item="item" :index="index"></slot>
</div> </div>
</div> </div>

10
components/lib/timeline/style/TimelineStyle.js
View File

@ -157,11 +157,11 @@ const theme = ({ dt }) => `
const classes = { const classes = {
root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout], root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout],
event: 'p-timeline-event', event: 'p-timeline-event',
opposite: 'p-timeline-event-opposite', eventOpposite: 'p-timeline-event-opposite',
separator: 'p-timeline-event-separator', eventSeparator: 'p-timeline-event-separator',
marker: 'p-timeline-event-marker', eventMarker: 'p-timeline-event-marker',
connector: 'p-timeline-event-connector', eventConnector: 'p-timeline-event-connector',
content: 'p-timeline-event-content' eventContent: 'p-timeline-event-content'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({