diff --git a/components/lib/galleria/Galleria.d.ts b/components/lib/galleria/Galleria.d.ts index d2ea2855e..1c311ebc5 100755 --- a/components/lib/galleria/Galleria.d.ts +++ b/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. */ diff --git a/components/lib/galleria/GalleriaItem.vue b/components/lib/galleria/GalleriaItem.vue index e421ddcc0..42db874f3 100755 --- a/components/lib/galleria/GalleriaItem.vue +++ b/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)" > @@ -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;