Refactor #3965 - Update for Carousel-OrgChart

components/lib/carousel/BaseCarousel.vue

@@ -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-active': totalShiftedItems * -1 === value.length + d_numVisible,
-            'p-carousel-item-start': 0 === context.index,
+            'p-carousel-item-start': 0 === index,
-            'p-carousel-item-end': context.value?.slice(-1 * context.d_numVisible).length - 1 === context.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'
 };

components/lib/carousel/Carousel.vue

@@ -19,12 +19,10 @@
                                 :key="index + '_scloned'"
                                 :class="
                                     cx('itemCloned', {
-                                        context: {
                                         index,
                                         value,
                                         totalShiftedItems,
                                         d_numVisible
-                                        }
                                     })
                                 "
                                 v-bind="ptm('itemCloned')"
@@ -37,9 +35,7 @@
                             :key="index"
                             :class="
                                 cx('item', {
-                                    context: {
                                     index
-                                    }
                                 })
                             "
                             role="group"
@@ -56,12 +52,10 @@
                                 :key="index + '_fcloned'"
                                 :class="
                                     cx('itemCloned', {
-                                        context: {
                                         index,
                                         value,
                                         totalShiftedItems,
                                         d_numVisible
-                                        }
                                     })
                                 "
                                 v-bind="ptm('itemCloned')"
@@ -84,9 +78,7 @@
                     :key="'p-carousel-indicator-' + i.toString()"
                     :class="
                         cx('indicator', {
-                            context: {
                             i
-                            }
                         })
                     "
                     :data-p-highlight="d_page === i"

components/lib/organizationchart/BaseOrganizationChart.vue

@@ -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) }],
+    lineLeft: ({ i }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(i === 0) }],
-    lineRight: ({ context, props }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(context.i === props.node.children.length - 1) }],
+    lineRight: ({ props, i }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(i === props.node.children.length - 1) }],
     nodes: 'p-organizationchart-nodes'
 };
 

components/lib/organizationchart/OrganizationChartNode.vue

@@ -28,9 +28,7 @@
                         <td
                             :class="
                                 cx('lineLeft', {
-                                    context: {
                                     i
-                                    }
                                 })
                             "
                             v-bind="getNodeOptions(!(i === 0), 'lineLeft')"
@@ -40,9 +38,7 @@
                         <td
                             :class="
                                 cx('lineRight', {
-                                    context: {
                                     i
-                                    }
                                 })
                             "
                             v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')"