Refactor #5592 - For OrgChart, Paginator, Picklist, Timeline
tugcekucukoglu
parent
abef162a11
commit
3596026387
|
|
@ -132,29 +132,37 @@ export interface OrganizationChartPassThroughOptions {
|
|||
*/
|
||||
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.
|
||||
*/
|
||||
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.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -5,32 +5,32 @@
|
|||
<td :colspan="colspan" v-bind="ptm('cell')">
|
||||
<div :class="[cx('node'), node.styleClass]" @click="onNodeClick" v-bind="getPTOptions('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')">
|
||||
<component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
|
||||
<component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeTogglerIcon')" v-bind="getPTOptions('nodeTogglerIcon')" />
|
||||
<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="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
|
||||
<component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</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')">
|
||||
<div :class="cx('lineDown')" v-bind="ptm('lineDown')"></div>
|
||||
<div :class="cx('connectorDown')" v-bind="ptm('connectorDown')"></div>
|
||||
</td>
|
||||
</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">
|
||||
<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>
|
||||
</template>
|
||||
<template v-if="node.children && node.children.length > 1">
|
||||
<template v-for="(child, i) of node.children" :key="child.key">
|
||||
<td :class="cx('lineLeft', { index: i })" v-bind="getNodeOptions(!(i === 0), 'lineLeft')"> </td>
|
||||
<td :class="cx('lineRight', { index: i })" v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')"> </td>
|
||||
<td :class="cx('connectorLeft', { index: i })" v-bind="getNodeOptions(!(i === 0), 'connectorLeft')"> </td>
|
||||
<td :class="cx('connectorRight', { index: i })" v-bind="getNodeOptions(!(i === node.children.length - 1), 'connectorRight')"> </td>
|
||||
</template>
|
||||
</template>
|
||||
</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')">
|
||||
<OrganizationChartNode
|
||||
:node="child"
|
||||
|
|
@ -107,7 +107,7 @@ export default {
|
|||
});
|
||||
},
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -114,13 +114,13 @@ const classes = {
|
|||
root: 'p-organizationchart p-component',
|
||||
table: 'p-organizationchart-table',
|
||||
node: ({ instance }) => ['p-organizationchart-node', { 'p-organizationchart-node-selectable': instance.selectable, 'p-highlight': instance.selected }],
|
||||
nodeToggler: 'p-organizationchart-node-toggle-button',
|
||||
nodeTogglerIcon: 'p-organizationchart-node-toggle-button-icon',
|
||||
lines: 'p-organizationchart-connectors',
|
||||
lineDown: 'p-organizationchart-connector-down',
|
||||
lineLeft: ({ 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) }],
|
||||
nodes: 'p-organizationchart-node-children'
|
||||
nodeToggleButton: 'p-organizationchart-node-toggle-button',
|
||||
nodeToggleButtonIcon: 'p-organizationchart-node-toggle-button-icon',
|
||||
connectors: 'p-organizationchart-connectors',
|
||||
connectorDown: 'p-organizationchart-connector-down',
|
||||
connectorLeft: ({ index }) => ['p-organizationchart-connector-left', { 'p-organizationchart-connector-top': !(index === 0) }],
|
||||
connectorRight: ({ props, index }) => ['p-organizationchart-connector-right', { 'p-organizationchart-connector-top': !(index === props.node.children.length - 1) }],
|
||||
nodeChildren: 'p-organizationchart-node-children'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<button v-ripple :class="cx('firstPageButton')" type="button" v-bind="getPTOptions('firstPageButton')" data-pc-group-section="pagebutton">
|
||||
<component :is="template || 'AngleDoubleLeftIcon'" :class="cx('firstPageIcon')" v-bind="getPTOptions('firstPageIcon')" />
|
||||
<button v-ripple :class="cx('first')" type="button" v-bind="getPTOptions('first')" data-pc-group-section="pagebutton">
|
||||
<component :is="template || 'AngleDoubleLeftIcon'" :class="cx('firstIcon')" v-bind="getPTOptions('firstIcon')" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<button v-ripple :class="cx('lastPageButton')" type="button" v-bind="getPTOptions('lastPageButton')" data-pc-group-section="pagebutton">
|
||||
<component :is="template || 'AngleDoubleRightIcon'" :class="cx('lastPageIcon')" v-bind="getPTOptions('lastPageIcon')" />
|
||||
<button v-ripple :class="cx('last')" type="button" v-bind="getPTOptions('last')" data-pc-group-section="pagebutton">
|
||||
<component :is="template || 'AngleDoubleRightIcon'" :class="cx('lastIcon')" v-bind="getPTOptions('lastIcon')" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<button v-ripple :class="cx('nextPageButton')" type="button" v-bind="getPTOptions('nextPageButton')" data-pc-group-section="pagebutton">
|
||||
<component :is="template || 'AngleRightIcon'" :class="cx('nextPageIcon')" v-bind="getPTOptions('nextPageIcon')" />
|
||||
<button v-ripple :class="cx('next')" type="button" v-bind="getPTOptions('next')" data-pc-group-section="pagebutton">
|
||||
<component :is="template || 'AngleRightIcon'" :class="cx('nextIcon')" v-bind="getPTOptions('nextIcon')" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
v-for="pageLink of value"
|
||||
:key="pageLink"
|
||||
v-ripple
|
||||
:class="cx('pageButton', { pageLink })"
|
||||
:class="cx('page', { pageLink })"
|
||||
type="button"
|
||||
:aria-label="ariaPageLabel(pageLink)"
|
||||
:aria-current="pageLink - 1 === page ? 'page' : undefined"
|
||||
@click="onPageLinkClick($event, pageLink)"
|
||||
v-bind="getPTOptions(pageLink - 1, 'pageButton')"
|
||||
v-bind="getPTOptions(pageLink - 1, 'page')"
|
||||
:data-p-highlight="pageLink - 1 === page"
|
||||
>
|
||||
{{ pageLink }}
|
||||
|
|
|
|||
|
|
@ -74,41 +74,41 @@ export interface PaginatorPassThroughOptions<T = any> {
|
|||
*/
|
||||
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.
|
||||
*/
|
||||
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.
|
||||
*/
|
||||
previousPageButton?: PaginatorPassThroughOptionType<T>;
|
||||
prev?: PaginatorPassThroughOptionType<T>;
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
nextPageButton?: PaginatorPassThroughOptionType<T>;
|
||||
next?: PaginatorPassThroughOptionType<T>;
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
lastPageButton?: PaginatorPassThroughOptionType<T>;
|
||||
last?: PaginatorPassThroughOptionType<T>;
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
|
@ -116,7 +116,7 @@ export interface PaginatorPassThroughOptions<T = any> {
|
|||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
|
@ -137,9 +137,9 @@ export interface PaginatorPassThroughOptions<T = any> {
|
|||
*/
|
||||
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.
|
||||
* @see {@link BaseComponent.ComponentHooks}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<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-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>
|
||||
</div>
|
||||
<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" />
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<button v-ripple :class="cx('previousPageButton')" type="button" v-bind="getPTOptions('previousPageButton')" data-pc-group-section="pagebutton">
|
||||
<component :is="template || 'AngleLeftIcon'" :class="cx('previousPageIcon')" v-bind="getPTOptions('previousPageIcon')" />
|
||||
<button v-ripple :class="cx('prev')" type="button" v-bind="getPTOptions('prev')" data-pc-group-section="pagebutton">
|
||||
<component :is="template || 'AngleLeftIcon'" :class="cx('prevIcon')" v-bind="getPTOptions('prevIcon')" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -83,38 +83,38 @@ const classes = {
|
|||
[`p-paginator-${key}`]: instance.hasBreakpoints()
|
||||
}
|
||||
],
|
||||
start: 'p-paginator-content-start',
|
||||
end: 'p-paginator-content-end',
|
||||
firstPageButton: ({ instance }) => [
|
||||
contentStart: 'p-paginator-content-start',
|
||||
contentEnd: 'p-paginator-content-end',
|
||||
first: ({ instance }) => [
|
||||
'p-paginator-first',
|
||||
{
|
||||
'p-disabled': instance.$attrs.disabled
|
||||
}
|
||||
],
|
||||
firstPageIcon: 'p-paginator-first-icon',
|
||||
previousPageButton: ({ instance }) => [
|
||||
firstIcon: 'p-paginator-first-icon',
|
||||
prev: ({ instance }) => [
|
||||
'p-paginator-prev',
|
||||
{
|
||||
'p-disabled': instance.$attrs.disabled
|
||||
}
|
||||
],
|
||||
previousPageIcon: 'p-paginator-prev-icon',
|
||||
nextPageButton: ({ instance }) => [
|
||||
prevIcon: 'p-paginator-prev-icon',
|
||||
next: ({ instance }) => [
|
||||
'p-paginator-next',
|
||||
{
|
||||
'p-disabled': instance.$attrs.disabled
|
||||
}
|
||||
],
|
||||
nextPageIcon: 'p-paginator-next-icon',
|
||||
lastPageButton: ({ instance }) => [
|
||||
nextIcon: 'p-paginator-next-icon',
|
||||
last: ({ instance }) => [
|
||||
'p-paginator-last',
|
||||
{
|
||||
'p-disabled': instance.$attrs.disabled
|
||||
}
|
||||
],
|
||||
lastPageIcon: 'p-paginator-last-icon',
|
||||
lastIcon: 'p-paginator-last-icon',
|
||||
pages: 'p-paginator-pages',
|
||||
pageButton: ({ props, pageLink }) => [
|
||||
page: ({ props, pageLink }) => [
|
||||
'p-paginator-page',
|
||||
{
|
||||
'p-paginator-page-active': pageLink - 1 === props.page
|
||||
|
|
|
|||
|
|
@ -169,17 +169,17 @@ export interface PickListPassThroughOptions {
|
|||
*/
|
||||
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.
|
||||
*/
|
||||
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.
|
||||
*/
|
||||
|
|
@ -197,9 +197,9 @@ export interface PickListPassThroughOptions {
|
|||
*/
|
||||
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.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
</Button>
|
||||
<slot name="sourcecontrolsend"></slot>
|
||||
</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
|
||||
ref="sourceList"
|
||||
:id="idSource + '_list'"
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</template>
|
||||
</Listbox>
|
||||
</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>
|
||||
<Button :aria-label="moveToTargetAriaLabel" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="{ ...buttonProps, ...moveToTargetProps }" :pt="ptm('moveToTargetButton')" :unstyled="unstyled">
|
||||
<template #icon>
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
</Button>
|
||||
<slot name="movecontrolsend"></slot>
|
||||
</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
|
||||
ref="targetList"
|
||||
:id="idTarget + '_list'"
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@ const theme = ({ dt }) => `
|
|||
const classes = {
|
||||
root: 'p-picklist p-component',
|
||||
sourceControls: 'p-picklist-controls p-picklist-source-controls',
|
||||
sourceWrapper: 'p-picklist-list-container p-picklist-source-list-container',
|
||||
buttons: 'p-picklist-controls p-picklist-transfer-controls',
|
||||
targetWrapper: 'p-picklist-list-container p-picklist-target-list-container',
|
||||
sourceListContainer: 'p-picklist-list-container p-picklist-source-list-container',
|
||||
transferControls: 'p-picklist-controls p-picklist-transfer-controls',
|
||||
targetListContainer: 'p-picklist-list-container p-picklist-target-list-container',
|
||||
targetControls: 'p-picklist-controls p-picklist-target-controls'
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -57,25 +57,25 @@ export interface TimelinePassThroughOptions {
|
|||
*/
|
||||
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.
|
||||
* @see {@link BaseComponent.ComponentHooks}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<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 :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>
|
||||
</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">
|
||||
<div :class="cx('marker')" v-bind="getPTOptions('marker', index)"></div>
|
||||
<div :class="cx('eventMarker')" v-bind="getPTOptions('eventMarker', index)"></div>
|
||||
</slot>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -157,11 +157,11 @@ const theme = ({ dt }) => `
|
|||
const classes = {
|
||||
root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout],
|
||||
event: 'p-timeline-event',
|
||||
opposite: 'p-timeline-event-opposite',
|
||||
separator: 'p-timeline-event-separator',
|
||||
marker: 'p-timeline-event-marker',
|
||||
connector: 'p-timeline-event-connector',
|
||||
content: 'p-timeline-event-content'
|
||||
eventOpposite: 'p-timeline-event-opposite',
|
||||
eventSeparator: 'p-timeline-event-separator',
|
||||
eventMarker: 'p-timeline-event-marker',
|
||||
eventConnector: 'p-timeline-event-connector',
|
||||
eventContent: 'p-timeline-event-content'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
|
|
|
|||
Loading…
Reference in New Issue