Refactor #3965 - Update for Carousel-OrgChart
parent
d7272b8caa
commit
8467dd2a0d
|
@ -83,22 +83,22 @@ const classes = {
|
|||
previousButtonIcon: 'p-carousel-next-icon',
|
||||
itemsContent: 'p-carousel-items-content',
|
||||
itemsContainer: 'p-carousel-items-container',
|
||||
itemCloned: ({ context }) => [
|
||||
itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [
|
||||
'p-carousel-item p-carousel-item-cloned',
|
||||
{
|
||||
'p-carousel-item-active': context.totalShiftedItems * -1 === context.value?.length + context.d_numVisible,
|
||||
'p-carousel-item-start': 0 === context.index,
|
||||
'p-carousel-item-end': context.value?.slice(-1 * context.d_numVisible).length - 1 === context.index
|
||||
'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
|
||||
'p-carousel-item-start': 0 === index,
|
||||
'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
|
||||
}
|
||||
],
|
||||
item: ({ instance, context }) => [
|
||||
item: ({ instance, index }) => [
|
||||
'p-carousel-item',
|
||||
{ 'p-carousel-item-active': instance.firstIndex() <= context.index && instance.lastIndex() >= context.index, 'p-carousel-item-start': instance.firstIndex() === context.index, 'p-carousel-item-end': instance.lastIndex() === context.index }
|
||||
{ 'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index, 'p-carousel-item-start': instance.firstIndex() === index, 'p-carousel-item-end': instance.lastIndex() === index }
|
||||
],
|
||||
nextButton: ({ instance }) => ['p-carousel-next p-link', { 'p-disabled': instance.forwardIsDisabled }],
|
||||
nextButtonIcon: 'p-carousel-prev-icon',
|
||||
indicators: ({ props }) => ['p-carousel-indicators p-reset', props.indicatorsContentClass],
|
||||
indicator: ({ context, instance }) => ['p-carousel-indicator', { 'p-highlight': instance.d_page === context.i }],
|
||||
indicator: ({ instance, i }) => ['p-carousel-indicator', { 'p-highlight': instance.d_page === i }],
|
||||
indicatorButton: 'p-link',
|
||||
footer: 'p-carousel-footer'
|
||||
};
|
||||
|
|
|
@ -19,12 +19,10 @@
|
|||
:key="index + '_scloned'"
|
||||
:class="
|
||||
cx('itemCloned', {
|
||||
context: {
|
||||
index,
|
||||
value,
|
||||
totalShiftedItems,
|
||||
d_numVisible
|
||||
}
|
||||
index,
|
||||
value,
|
||||
totalShiftedItems,
|
||||
d_numVisible
|
||||
})
|
||||
"
|
||||
v-bind="ptm('itemCloned')"
|
||||
|
@ -37,9 +35,7 @@
|
|||
:key="index"
|
||||
:class="
|
||||
cx('item', {
|
||||
context: {
|
||||
index
|
||||
}
|
||||
index
|
||||
})
|
||||
"
|
||||
role="group"
|
||||
|
@ -56,12 +52,10 @@
|
|||
:key="index + '_fcloned'"
|
||||
:class="
|
||||
cx('itemCloned', {
|
||||
context: {
|
||||
index,
|
||||
value,
|
||||
totalShiftedItems,
|
||||
d_numVisible
|
||||
}
|
||||
index,
|
||||
value,
|
||||
totalShiftedItems,
|
||||
d_numVisible
|
||||
})
|
||||
"
|
||||
v-bind="ptm('itemCloned')"
|
||||
|
@ -84,9 +78,7 @@
|
|||
:key="'p-carousel-indicator-' + i.toString()"
|
||||
:class="
|
||||
cx('indicator', {
|
||||
context: {
|
||||
i
|
||||
}
|
||||
i
|
||||
})
|
||||
"
|
||||
:data-p-highlight="d_page === i"
|
||||
|
|
|
@ -66,8 +66,8 @@ const classes = {
|
|||
lines: 'p-organizationchart-lines',
|
||||
lineDown: 'p-organizationchart-line-down',
|
||||
lines: 'p-organizationchart-lines',
|
||||
lineLeft: ({ context }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(context.i === 0) }],
|
||||
lineRight: ({ context, props }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(context.i === props.node.children.length - 1) }],
|
||||
lineLeft: ({ i }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(i === 0) }],
|
||||
lineRight: ({ props, i }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(i === props.node.children.length - 1) }],
|
||||
nodes: 'p-organizationchart-nodes'
|
||||
};
|
||||
|
||||
|
|
|
@ -28,9 +28,7 @@
|
|||
<td
|
||||
:class="
|
||||
cx('lineLeft', {
|
||||
context: {
|
||||
i
|
||||
}
|
||||
i
|
||||
})
|
||||
"
|
||||
v-bind="getNodeOptions(!(i === 0), 'lineLeft')"
|
||||
|
@ -40,9 +38,7 @@
|
|||
<td
|
||||
:class="
|
||||
cx('lineRight', {
|
||||
context: {
|
||||
i
|
||||
}
|
||||
i
|
||||
})
|
||||
"
|
||||
v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')"
|
||||
|
|
Loading…
Reference in New Issue