vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Rename property

pull/345/head
cagataycivici 2020-05-15 11:13:19 +03:00
parent ee6b235118
commit 5a3f3f9433
8 changed files with 73 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/galleria/Galleria.d.ts vendored
View File

@ -3,7 +3,7 @@ import Vue, {VNode} from 'vue';
export declare class Galleria extends Vue { export declare class Galleria extends Vue {
id?: string; id?: string;
value?: any; value?: any;
activeItemIndex?: number; activeIndex?: number;
fullScreen?: boolean; fullScreen?: boolean;
visible?: boolean; visible?: boolean;
numVisible?: number; numVisible?: number;

6
src/components/galleria/Galleria.vue
View File

@ -21,7 +21,7 @@ export default {
type: Array, type: Array,
default: null default: null
}, },
activeItemIndex: { activeIndex: {
type: Number, type: Number,
default: 0 default: 0
}, },
@ -136,8 +136,8 @@ export default {
}, },
methods: { methods: {
onActiveItemChange(index) { onActiveItemChange(index) {
if (this.activeItemIndex !== index) { if (this.activeIndex !== index) {
this.$emit('update:activeItemIndex', index); this.$emit('update:activeIndex', index);
} }
}, },
maskHide() { maskHide() {

16
src/components/galleria/GalleriaContent.vue
View File

@ -7,12 +7,12 @@
<GalleriaItemSlot type="header" :templates="$attrs.templates"/> <GalleriaItemSlot type="header" :templates="$attrs.templates"/>
</div> </div>
<div class="p-galleria-content"> <div class="p-galleria-content">
<GalleriaItem :value="$attrs.value" :activeItemIndex.sync="activeItemIndex" :circular="$attrs.circular" :templates="$attrs.templates" <GalleriaItem :value="$attrs.value" :activeIndex.sync="activeIndex" :circular="$attrs.circular" :templates="$attrs.templates"
:showIndicators="$attrs.showIndicators" :changeItemOnIndicatorHover="$attrs.changeItemOnIndicatorHover" :showIndicators="$attrs.showIndicators" :changeItemOnIndicatorHover="$attrs.changeItemOnIndicatorHover"
:showItemNavigators="$attrs.showItemNavigators" :autoPlay="$attrs.autoPlay" :slideShowActive.sync="slideShowActive" :showItemNavigators="$attrs.showItemNavigators" :autoPlay="$attrs.autoPlay" :slideShowActive.sync="slideShowActive"
@startSlideShow="startSlideShow" @stopSlideShow="stopSlideShow" /> @startSlideShow="startSlideShow" @stopSlideShow="stopSlideShow" />
<GalleriaThumbnails v-if="$attrs.showThumbnails" :containerId="id" :value="$attrs.value" :activeItemIndex.sync="activeItemIndex" :templates="$attrs.templates" <GalleriaThumbnails v-if="$attrs.showThumbnails" :containerId="id" :value="$attrs.value" :activeIndex.sync="activeIndex" :templates="$attrs.templates"
:numVisible="$attrs.numVisible" :responsiveOptions="$attrs.responsiveOptions" :circular="$attrs.circular" :numVisible="$attrs.numVisible" :responsiveOptions="$attrs.responsiveOptions" :circular="$attrs.circular"
:isVertical="isVertical()" :contentHeight="$attrs.verticalThumbnailViewPortHeight" :showThumbnailNavigators="$attrs.showThumbnailNavigators" :isVertical="isVertical()" :contentHeight="$attrs.verticalThumbnailViewPortHeight" :showThumbnailNavigators="$attrs.showThumbnailNavigators"
:slideShowActive.sync="slideShowActive" @stopSlideShow="stopSlideShow" /> :slideShowActive.sync="slideShowActive" @stopSlideShow="stopSlideShow" />
@ -35,17 +35,17 @@ export default {
data() { data() {
return { return {
id: this.$attrs.id || UniqueComponentId(), id: this.$attrs.id || UniqueComponentId(),
activeItemIndex: this.$attrs.activeItemIndex, activeIndex: this.$attrs.activeIndex,
slideShowActive: false slideShowActive: false
} }
}, },
watch: { watch: {
'$attrs.activeItemIndex': function(newVal) { '$attrs.activeIndex': function(newVal) {
this.activeItemIndex = newVal; this.activeIndex = newVal;
} }
}, },
updated() { updated() {
this.$emit('activeItemChange', this.activeItemIndex); this.$emit('activeItemChange', this.activeIndex);
}, },
beforeDestroy() { beforeDestroy() {
if (this.slideShowActive) { if (this.slideShowActive) {
@ -58,8 +58,8 @@ export default {
}, },
startSlideShow() { startSlideShow() {
this.interval = setInterval(() => { this.interval = setInterval(() => {
let activeIndex = (this.$attrs.circular && (this.$attrs.value.length - 1) === this.activeItemIndex) ? 0 : (this.activeItemIndex + 1); let activeIndex = (this.$attrs.circular && (this.$attrs.value.length - 1) === this.activeIndex) ? 0 : (this.activeIndex + 1);
this.activeItemIndex = activeIndex; this.activeIndex = activeIndex;
}, this.$attrs.transitionInterval); }, this.$attrs.transitionInterval);
this.slideShowActive = true; this.slideShowActive = true;

28
src/components/galleria/GalleriaItem.vue
View File

@ -34,7 +34,7 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
activeItemIndex: { activeIndex: {
type: Number, type: Number,
default: 0 default: 0
}, },
@ -74,20 +74,20 @@ export default {
}, },
methods: { methods: {
next() { next() {
let nextItemIndex = this.activeItemIndex + 1; let nextItemIndex = this.activeIndex + 1;
let activeIndex = this.circular && this.value.length - 1 === this.activeItemIndex let activeIndex = this.circular && this.value.length - 1 === this.activeIndex
? 0 ? 0
: nextItemIndex; : nextItemIndex;
this.$emit('update:activeItemIndex', activeIndex); this.$emit('update:activeIndex', activeIndex);
}, },
prev() { prev() {
let prevItemIndex = this.activeItemIndex !== 0 ? this.activeItemIndex - 1 : 0; let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;
let activeIndex = this.circular && this.activeItemIndex === 0 let activeIndex = this.circular && this.activeIndex === 0
? this.value.length - 1 ? this.value.length - 1
: prevItemIndex : prevItemIndex
this.$emit('update:activeItemIndex', activeIndex); this.$emit('update:activeIndex', activeIndex);
}, },
stopSlideShow() { stopSlideShow() {
if (this.slideShowActive && this.stopSlideShow) { if (this.slideShowActive && this.stopSlideShow) {
@ -112,33 +112,33 @@ export default {
}, },
onIndicatorClick(index) { onIndicatorClick(index) {
this.stopSlideShow(); this.stopSlideShow();
this.$emit('update:activeItemIndex', index); this.$emit('update:activeIndex', index);
}, },
onIndicatorMouseEnter(index) { onIndicatorMouseEnter(index) {
if (this.changeItemOnIndicatorHover) { if (this.changeItemOnIndicatorHover) {
this.stopSlideShow(); this.stopSlideShow();
this.$emit('update:activeItemIndex', index); this.$emit('update:activeIndex', index);
} }
}, },
onIndicatorKeyDown(index) { onIndicatorKeyDown(index) {
this.stopSlideShow(); this.stopSlideShow();
this.$emit('update:activeItemIndex', index); this.$emit('update:activeIndex', index);
}, },
isIndicatorItemActive(index) { isIndicatorItemActive(index) {
return this.activeItemIndex === index; return this.activeIndex === index;
}, },
isNavBackwardDisabled() { isNavBackwardDisabled() {
return !this.circular && this.activeItemIndex === 0; return !this.circular && this.activeIndex === 0;
}, },
isNavForwardDisabled() { isNavForwardDisabled() {
return !this.circular && this.activeItemIndex === (this.value.length - 1); return !this.circular && this.activeIndex === (this.value.length - 1);
} }
}, },
computed: { computed: {
activeItem() { activeItem() {
return this.value[this.activeItemIndex]; return this.value[this.activeIndex];
}, },
navBackwardClass() { navBackwardClass() {
return ['p-galleria-item-prev p-galleria-item-nav p-link', { return ['p-galleria-item-prev p-galleria-item-nav p-link', {

54
src/components/galleria/GalleriaThumbnails.vue
View File

@ -8,7 +8,7 @@
<div ref="itemsContainer" class="p-galleria-thumbnail-items" @transitionend="onTransitionEnd" <div ref="itemsContainer" class="p-galleria-thumbnail-items" @transitionend="onTransitionEnd"
@touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)"> @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
<div v-for="(item, index) of value" :key="`p-galleria-thumbnail-item-${index}`" :class="['p-galleria-thumbnail-item', { <div v-for="(item, index) of value" :key="`p-galleria-thumbnail-item-${index}`" :class="['p-galleria-thumbnail-item', {
'p-galleria-thumbnail-item-current': activeItemIndex === index, 'p-galleria-thumbnail-item-current': activeIndex === index,
'p-galleria-thumbnail-item-active': isItemActive(index), 'p-galleria-thumbnail-item-active': isItemActive(index),
'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index, 'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]"> 'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]">
@ -43,7 +43,7 @@ export default {
type: Number, type: Number,
default: 3 default: 3
}, },
activeItemIndex: { activeIndex: {
type: Number, type: Number,
default: 0 default: 0
}, },
@ -83,8 +83,8 @@ export default {
return { return {
d_numVisible: this.numVisible, d_numVisible: this.numVisible,
d_oldNumVisible: this.numVisible, d_oldNumVisible: this.numVisible,
d_activeItemIndex: this.activeItemIndex, d_activeIndex: this.activeIndex,
d_oldActiveItemIndex: this.activeItemIndex, d_oldActiveItemIndex: this.activeIndex,
totalShiftedItems: 0, totalShiftedItems: 0,
page: 0 page: 0
} }
@ -94,8 +94,8 @@ export default {
this.d_numVisible = newValue; this.d_numVisible = newValue;
this.d_oldNumVisible = oldValue; this.d_oldNumVisible = oldValue;
}, },
activeItemIndex(newValue, oldValue) { activeIndex(newValue, oldValue) {
this.d_activeItemIndex = newValue; this.d_activeIndex = newValue;
this.d_oldActiveItemIndex = oldValue; this.d_oldActiveItemIndex = oldValue;
} }
}, },
@ -110,18 +110,18 @@ export default {
updated() { updated() {
let totalShiftedItems = this.totalShiftedItems; let totalShiftedItems = this.totalShiftedItems;
if (this.d_oldNumVisible !== this.d_numVisible || this.d_oldActiveItemIndex !== this.d_activeItemIndex) { if (this.d_oldNumVisible !== this.d_numVisible || this.d_oldActiveItemIndex !== this.d_activeIndex) {
if (this.d_activeItemIndex <= this.getMedianItemIndex()) { if (this.d_activeIndex <= this.getMedianItemIndex()) {
totalShiftedItems = 0; totalShiftedItems = 0;
} }
else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeItemIndex) { else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeIndex) {
totalShiftedItems = this.d_numVisible - this.value.length; totalShiftedItems = this.d_numVisible - this.value.length;
} }
else if (this.value.length - this.d_numVisible < this.d_activeItemIndex && this.d_numVisible % 2 === 0) { else if (this.value.length - this.d_numVisible < this.d_activeIndex && this.d_numVisible % 2 === 0) {
totalShiftedItems = (this.d_activeItemIndex * -1) + this.getMedianItemIndex() + 1; totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex() + 1;
} }
else { else {
totalShiftedItems = (this.d_activeItemIndex * -1) + this.getMedianItemIndex(); totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex();
} }
if (totalShiftedItems !== this.totalShiftedItems) { if (totalShiftedItems !== this.totalShiftedItems) {
@ -130,12 +130,12 @@ export default {
this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`; this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
if (this.d_oldActiveItemIndex !== this.d_activeItemIndex) { if (this.d_oldActiveItemIndex !== this.d_activeIndex) {
DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden'); DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s'; this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
} }
this.d_oldActiveItemIndex = this.d_activeItemIndex; this.d_oldActiveItemIndex = this.d_activeIndex;
this.d_oldNumVisible = this.d_numVisible; this.d_oldNumVisible = this.d_numVisible;
} }
}, },
@ -160,10 +160,10 @@ export default {
} }
if (this.circular) { if (this.circular) {
if (dir < 0 && this.value.length - 1 === this.d_activeItemIndex) { if (dir < 0 && this.value.length - 1 === this.d_activeIndex) {
totalShiftedItems = 0; totalShiftedItems = 0;
} }
else if (dir > 0 && this.d_activeItemIndex === 0) { else if (dir > 0 && this.d_activeIndex === 0) {
totalShiftedItems = this.d_numVisible - this.value.length; totalShiftedItems = this.d_numVisible - this.value.length;
} }
} }
@ -189,14 +189,14 @@ export default {
navBackward(e) { navBackward(e) {
this.stopSlideShow(); this.stopSlideShow();
let prevItemIndex = this.d_activeItemIndex !== 0 ? this.d_activeItemIndex - 1 : 0; let prevItemIndex = this.d_activeIndex !== 0 ? this.d_activeIndex - 1 : 0;
let diff = prevItemIndex + this.totalShiftedItems; let diff = prevItemIndex + this.totalShiftedItems;
if ((this.d_numVisible - diff - 1) > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) !== 0 || this.circular)) { if ((this.d_numVisible - diff - 1) > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) !== 0 || this.circular)) {
this.step(1); this.step(1);
} }
let activeIndex = this.circular && this.d_activeItemIndex === 0 ? this.value.length - 1 : prevItemIndex; let activeIndex = this.circular && this.d_activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
this.$emit('update:activeItemIndex', activeIndex); this.$emit('update:activeIndex', activeIndex);
if (e.cancelable) { if (e.cancelable) {
e.preventDefault(); e.preventDefault();
@ -205,13 +205,13 @@ export default {
navForward(e) { navForward(e) {
this.stopSlideShow(); this.stopSlideShow();
let nextItemIndex = this.d_activeItemIndex + 1; let nextItemIndex = this.d_activeIndex + 1;
if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1 || this.circular)) { if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1 || this.circular)) {
this.step(-1); this.step(-1);
} }
let activeIndex = this.circular && (this.value.length - 1) === this.d_activeItemIndex ? 0 : nextItemIndex; let activeIndex = this.circular && (this.value.length - 1) === this.d_activeIndex ? 0 : nextItemIndex;
this.$emit('update:activeItemIndex', activeIndex); this.$emit('update:activeIndex', activeIndex);
if (e.cancelable) { if (e.cancelable) {
e.preventDefault(); e.preventDefault();
@ -221,10 +221,10 @@ export default {
this.stopSlideShow(); this.stopSlideShow();
let selectedItemIndex = index; let selectedItemIndex = index;
if (selectedItemIndex !== this.d_activeItemIndex) { if (selectedItemIndex !== this.d_activeIndex) {
const diff = selectedItemIndex + this.totalShiftedItems; const diff = selectedItemIndex + this.totalShiftedItems;
let dir = 0; let dir = 0;
if (selectedItemIndex < this.d_activeItemIndex) { if (selectedItemIndex < this.d_activeIndex) {
dir = (this.d_numVisible - diff - 1) - this.getMedianItemIndex(); dir = (this.d_numVisible - diff - 1) - this.getMedianItemIndex();
if (dir > 0 && (-1 * this.totalShiftedItems) !== 0) { if (dir > 0 && (-1 * this.totalShiftedItems) !== 0) {
this.step(dir); this.step(dir);
@ -237,7 +237,7 @@ export default {
} }
} }
this.$emit('update:activeItemIndex', selectedItemIndex); this.$emit('update:activeIndex', selectedItemIndex);
} }
}, },
onTransitionEnd() { onTransitionEnd() {
@ -365,10 +365,10 @@ export default {
} }
}, },
isNavBackwardDisabled() { isNavBackwardDisabled() {
return (!this.circular && this.d_activeItemIndex === 0) || (this.value.length <= this.d_numVisible); return (!this.circular && this.d_activeIndex === 0) || (this.value.length <= this.d_numVisible);
}, },
isNavForwardDisabled() { isNavForwardDisabled() {
return (!this.circular && this.d_activeItemIndex === (this.value.length - 1)) || (this.value.length <= this.d_numVisible); return (!this.circular && this.d_activeIndex === (this.value.length - 1)) || (this.value.length <= this.d_numVisible);
}, },
firstItemAciveIndex() { firstItemAciveIndex() {
return this.totalShiftedItems * -1; return this.totalShiftedItems * -1;

10
src/views/galleria/GalleriaAdvancedDemo.vue
View File

@ -8,7 +8,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass" <Galleria ref="galleria" :value="images" :activeIndex.sync="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"> :circular="true" :autoPlay="true" :transitionInterval="3000">
<template #item="slotProps"> <template #item="slotProps">
@ -23,9 +23,9 @@
<div class="custom-galleria-footer"> <div class="custom-galleria-footer">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" /> <Button icon="pi pi-list" @click="onThumbnailButtonClick" />
<span v-if="images"> <span v-if="images">
<span>{{activeItemIndex + 1}}/{{images.length}}</span> <span>{{activeIndex + 1}}/{{images.length}}</span>
<span class="title">{{images[activeItemIndex].title}}</span> <span class="title">{{images[activeIndex].title}}</span>
<span>{{images[activeItemIndex].alt}}</span> <span>{{images[activeIndex].alt}}</span>
</span> </span>
<Button :icon="fullScreenIcon" @click="toggleFullScreen" /> <Button :icon="fullScreenIcon" @click="toggleFullScreen" />
</div> </div>
@ -43,7 +43,7 @@ export default {
data() { data() {
return { return {
images: null, images: null,
activeItemIndex: 0, activeIndex: 0,
showThumbnails: false, showThumbnails: false,
isPreviewFullScreen: false isPreviewFullScreen: false
} }

12
src/views/galleria/GalleriaFullScreenDemo.vue
View File

@ -35,7 +35,7 @@
<Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" /> <Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
<h3>Custom Content</h3> <h3>Custom Content</h3>
<Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px" <Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom"> :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@ -84,7 +84,7 @@
&lt;Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" /&gt; &lt;Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" /&gt;
&lt;h3&gt;Custom Content&lt;/h3&gt; &lt;h3&gt;Custom Content&lt;/h3&gt;
&lt;Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px" &lt;Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom"&gt; :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
@ -109,7 +109,7 @@ export default {
data() { data() {
return { return {
images: null, images: null,
activeItemIndex: 0, activeIndex: 0,
responsiveOptions: [ responsiveOptions: [
{ {
breakpoint: '1024px', breakpoint: '1024px',
@ -156,7 +156,7 @@ export default {
}, },
methods: { methods: {
imageClick(index) { imageClick(index) {
this.activeItemIndex = index; this.activeIndex = index;
this.displayCustom = true; this.displayCustom = true;
} }
} }
@ -175,7 +175,7 @@ export default {
data() { data() {
return { return {
images: null, images: null,
activeItemIndex: 0, activeIndex: 0,
responsiveOptions: [ responsiveOptions: [
{ {
breakpoint: '1024px', breakpoint: '1024px',
@ -222,7 +222,7 @@ export default {
}, },
methods: { methods: {
imageClick(index) { imageClick(index) {
this.activeItemIndex = index; this.activeIndex = index;
this.displayCustom = true; this.displayCustom = true;
} }
} }

18
src/views/galleria/GalleriaProgrammaticDemo.vue
View File

@ -3,7 +3,7 @@
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>Galleria - Programmatic</h1> <h1>Galleria - Programmatic</h1>
<p>Galleria can be controlled programmatically using the <b>activeItemIndex</b> property.</p> <p>Galleria can be controlled programmatically using the <b>activeIndex</b> property.</p>
</div> </div>
</div> </div>
@ -13,7 +13,7 @@
<Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5rem" /> <Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5rem" />
</div> </div>
<Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"> <Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template> </template>
@ -33,7 +33,7 @@
&lt;Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5rem" /&gt; &lt;Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5rem" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt; &lt;Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt; &lt;/template&gt;
@ -51,7 +51,7 @@ export default {
data() { data() {
return { return {
images: null, images: null,
activeItemIndex: 2, activeIndex: 2,
responsiveOptions: [ responsiveOptions: [
{ {
breakpoint: '1024px', breakpoint: '1024px',
@ -78,11 +78,11 @@ export default {
computed: { computed: {
activeIndex: { activeIndex: {
get: function() { get: function() {
return this.activeItemIndex; return this.activeIndex;
}, },
set: function(newValue) { set: function(newValue) {
if (this.images && 0 &lt;= newValue && newValue &lt;= (this.images.length - 1)) { if (this.images && 0 &lt;= newValue && newValue &lt;= (this.images.length - 1)) {
this.activeItemIndex = newValue; this.activeIndex = newValue;
} }
} }
} }
@ -102,7 +102,7 @@ export default {
data() { data() {
return { return {
images: null, images: null,
activeItemIndex: 2, activeIndex: 2,
responsiveOptions: [ responsiveOptions: [
{ {
breakpoint: '1024px', breakpoint: '1024px',
@ -129,11 +129,11 @@ export default {
computed: { computed: {
activeIndex: { activeIndex: {
get: function() { get: function() {
return this.activeItemIndex; return this.activeIndex;
}, },
set: function(newValue) { set: function(newValue) {
if (this.images && 0 <= newValue && newValue <= (this.images.length - 1)) { if (this.images && 0 <= newValue && newValue <= (this.images.length - 1)) {
this.activeItemIndex = newValue; this.activeIndex = newValue;
} }
} }
} }