Refactor #4211 - For Galleria

components/lib/galleria/Galleria.d.ts

@@ -19,6 +19,7 @@ export interface GalleriaPassThroughMethodOptions {
     instance: any;
     props: GalleriaProps;
     state: GalleriaState;
+    context: GalleriaContext;
 }
 
 export interface GalleriaResponsiveOptions {
@@ -223,6 +224,17 @@ export interface GalleriaState {
     totalShiftedItems: number;
 }
 
+/**
+ * Defines current inline options in Galleria component.
+ */
+export interface GalleriaState {
+    /**
+     * Current highlighted state of the indicator as a boolean.
+     * @defaultValue false
+     */
+    highlighted: boolean;
+}
+
 /**
  * Defines valid properties in Galleria component.
  */

components/lib/galleria/GalleriaItem.vue

@@ -26,7 +26,7 @@
                 @click="onIndicatorClick(index)"
                 @mouseenter="onIndicatorMouseEnter(index)"
                 @keydown="onIndicatorKeyDown($event, index)"
-                v-bind="ptm('indicator')"
+                v-bind="ptm('indicator', getIndicatorPTOptions(index))"
                 :data-p-highlight="isIndicatorItemActive(index)"
             >
                 <button v-if="!templates['indicator']" type="button" tabindex="-1" :class="cx('indicatorButton')" v-bind="ptm('indicatorButton')"></button>
@@ -95,6 +95,13 @@ export default {
         }
     },
     methods: {
+        getIndicatorPTOptions(index) {
+            return {
+                context: {
+                    highlighted: this.activeIndex === index
+                }
+            };
+        },
         next() {
             let nextItemIndex = this.activeIndex + 1;
             let activeIndex = this.circular && this.value.length - 1 === this.activeIndex ? 0 : nextItemIndex;