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 {
id?: string;
value?: any;
activeItemIndex?: number;
activeIndex?: number;
fullScreen?: boolean;
visible?: boolean;
numVisible?: number;

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

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

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

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

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

@ -34,7 +34,7 @@ export default {
type: Boolean,
default: false
},
activeItemIndex: {
activeIndex: {
type: Number,
default: 0
},
@ -74,20 +74,20 @@ export default {
},
methods: {
next() {
let nextItemIndex = this.activeItemIndex + 1;
let activeIndex = this.circular && this.value.length - 1 === this.activeItemIndex
let nextItemIndex = this.activeIndex + 1;
let activeIndex = this.circular && this.value.length - 1 === this.activeIndex
? 0
: nextItemIndex;
this.$emit('update:activeItemIndex', activeIndex);
this.$emit('update:activeIndex', activeIndex);
},
prev() {
let prevItemIndex = this.activeItemIndex !== 0 ? this.activeItemIndex - 1 : 0;
let activeIndex = this.circular && this.activeItemIndex === 0
let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;
let activeIndex = this.circular && this.activeIndex === 0
? this.value.length - 1
: prevItemIndex
this.$emit('update:activeItemIndex', activeIndex);
this.$emit('update:activeIndex', activeIndex);
},
stopSlideShow() {
if (this.slideShowActive && this.stopSlideShow) {
@ -112,33 +112,33 @@ export default {
},
onIndicatorClick(index) {
this.stopSlideShow();
this.$emit('update:activeItemIndex', index);
this.$emit('update:activeIndex', index);
},
onIndicatorMouseEnter(index) {
if (this.changeItemOnIndicatorHover) {
this.stopSlideShow();
this.$emit('update:activeItemIndex', index);
this.$emit('update:activeIndex', index);
}
},
onIndicatorKeyDown(index) {
this.stopSlideShow();
this.$emit('update:activeItemIndex', index);
this.$emit('update:activeIndex', index);
},
isIndicatorItemActive(index) {
return this.activeItemIndex === index;
return this.activeIndex === index;
},
isNavBackwardDisabled() {
return !this.circular && this.activeItemIndex === 0;
return !this.circular && this.activeIndex === 0;
},
isNavForwardDisabled() {
return !this.circular && this.activeItemIndex === (this.value.length - 1);
return !this.circular && this.activeIndex === (this.value.length - 1);
}
},
computed: {
activeItem() {
return this.value[this.activeItemIndex];
return this.value[this.activeIndex];
},
navBackwardClass() {
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"
@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', {
'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-start': firstItemAciveIndex() === index,
'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]">
@ -43,7 +43,7 @@ export default {
type: Number,
default: 3
},
activeItemIndex: {
activeIndex: {
type: Number,
default: 0
},
@ -83,8 +83,8 @@ export default {
return {
d_numVisible: this.numVisible,
d_oldNumVisible: this.numVisible,
d_activeItemIndex: this.activeItemIndex,
d_oldActiveItemIndex: this.activeItemIndex,
d_activeIndex: this.activeIndex,
d_oldActiveItemIndex: this.activeIndex,
totalShiftedItems: 0,
page: 0
}
@ -94,8 +94,8 @@ export default {
this.d_numVisible = newValue;
this.d_oldNumVisible = oldValue;
},
activeItemIndex(newValue, oldValue) {
this.d_activeItemIndex = newValue;
activeIndex(newValue, oldValue) {
this.d_activeIndex = newValue;
this.d_oldActiveItemIndex = oldValue;
}
},
@ -110,18 +110,18 @@ export default {
updated() {
let totalShiftedItems = this.totalShiftedItems;
if (this.d_oldNumVisible !== this.d_numVisible || this.d_oldActiveItemIndex !== this.d_activeItemIndex) {
if (this.d_activeItemIndex <= this.getMedianItemIndex()) {
if (this.d_oldNumVisible !== this.d_numVisible || this.d_oldActiveItemIndex !== this.d_activeIndex) {
if (this.d_activeIndex <= this.getMedianItemIndex()) {
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;
}
else if (this.value.length - this.d_numVisible < this.d_activeItemIndex && this.d_numVisible % 2 === 0) {
totalShiftedItems = (this.d_activeItemIndex * -1) + this.getMedianItemIndex() + 1;
else if (this.value.length - this.d_numVisible < this.d_activeIndex && this.d_numVisible % 2 === 0) {
totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex() + 1;
}
else {
totalShiftedItems = (this.d_activeItemIndex * -1) + this.getMedianItemIndex();
totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex();
}
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)`;
if (this.d_oldActiveItemIndex !== this.d_activeItemIndex) {
if (this.d_oldActiveItemIndex !== this.d_activeIndex) {
DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
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;
}
},
@ -160,10 +160,10 @@ export default {
}
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;
}
else if (dir > 0 && this.d_activeItemIndex === 0) {
else if (dir > 0 && this.d_activeIndex === 0) {
totalShiftedItems = this.d_numVisible - this.value.length;
}
}
@ -189,14 +189,14 @@ export default {
navBackward(e) {
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;
if ((this.d_numVisible - diff - 1) > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) !== 0 || this.circular)) {
this.step(1);
}
let activeIndex = this.circular && this.d_activeItemIndex === 0 ? this.value.length - 1 : prevItemIndex;
this.$emit('update:activeItemIndex', activeIndex);
let activeIndex = this.circular && this.d_activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
this.$emit('update:activeIndex', activeIndex);
if (e.cancelable) {
e.preventDefault();
@ -205,13 +205,13 @@ export default {
navForward(e) {
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)) {
this.step(-1);
}
let activeIndex = this.circular && (this.value.length - 1) === this.d_activeItemIndex ? 0 : nextItemIndex;
this.$emit('update:activeItemIndex', activeIndex);
let activeIndex = this.circular && (this.value.length - 1) === this.d_activeIndex ? 0 : nextItemIndex;
this.$emit('update:activeIndex', activeIndex);
if (e.cancelable) {
e.preventDefault();
@ -221,10 +221,10 @@ export default {
this.stopSlideShow();
let selectedItemIndex = index;
if (selectedItemIndex !== this.d_activeItemIndex) {
if (selectedItemIndex !== this.d_activeIndex) {
const diff = selectedItemIndex + this.totalShiftedItems;
let dir = 0;
if (selectedItemIndex < this.d_activeItemIndex) {
if (selectedItemIndex < this.d_activeIndex) {
dir = (this.d_numVisible - diff - 1) - this.getMedianItemIndex();
if (dir > 0 && (-1 * this.totalShiftedItems) !== 0) {
this.step(dir);
@ -237,7 +237,7 @@ export default {
}
}
this.$emit('update:activeItemIndex', selectedItemIndex);
this.$emit('update:activeIndex', selectedItemIndex);
}
},
onTransitionEnd() {
@ -365,10 +365,10 @@ export default {
}
},
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() {
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() {
return this.totalShiftedItems * -1;

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

@ -8,7 +8,7 @@
</div>
<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"
:circular="true" :autoPlay="true" :transitionInterval="3000">
<template #item="slotProps">
@ -23,9 +23,9 @@
<div class="custom-galleria-footer">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" />
<span v-if="images">
<span>{{activeItemIndex + 1}}/{{images.length}}</span>
<span class="title">{{images[activeItemIndex].title}}</span>
<span>{{images[activeItemIndex].alt}}</span>
<span>{{activeIndex + 1}}/{{images.length}}</span>
<span class="title">{{images[activeIndex].title}}</span>
<span>{{images[activeIndex].alt}}</span>
</span>
<Button :icon="fullScreenIcon" @click="toggleFullScreen" />
</div>
@ -43,7 +43,7 @@ export default {
data() {
return {
images: null,
activeItemIndex: 0,
activeIndex: 0,
showThumbnails: 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" />
<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">
<template #item="slotProps">
<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;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;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
@ -109,7 +109,7 @@ export default {
data() {
return {
images: null,
activeItemIndex: 0,
activeIndex: 0,
responsiveOptions: [
{
breakpoint: '1024px',
@ -156,7 +156,7 @@ export default {
},
methods: {
imageClick(index) {
this.activeItemIndex = index;
this.activeIndex = index;
this.displayCustom = true;
}
}
@ -175,7 +175,7 @@ export default {
data() {
return {
images: null,
activeItemIndex: 0,
activeIndex: 0,
responsiveOptions: [
{
breakpoint: '1024px',
@ -222,7 +222,7 @@ export default {
},
methods: {
imageClick(index) {
this.activeItemIndex = index;
this.activeIndex = index;
this.displayCustom = true;
}
}

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

@ -3,7 +3,7 @@
<div class="content-section introduction">
<div class="feature-intro">
<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>
@ -13,7 +13,7 @@
<Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5rem" />
</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">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
@ -33,7 +33,7 @@
&lt;Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5rem" /&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;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt;
@ -51,7 +51,7 @@ export default {
data() {
return {
images: null,
activeItemIndex: 2,
activeIndex: 2,
responsiveOptions: [
{
breakpoint: '1024px',
@ -78,11 +78,11 @@ export default {
computed: {
activeIndex: {
get: function() {
return this.activeItemIndex;
return this.activeIndex;
},
set: function(newValue) {
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() {
return {
images: null,
activeItemIndex: 2,
activeIndex: 2,
responsiveOptions: [
{
breakpoint: '1024px',
@ -129,11 +129,11 @@ export default {
computed: {
activeIndex: {
get: function() {
return this.activeItemIndex;
return this.activeIndex;
},
set: function(newValue) {
if (this.images && 0 <= newValue && newValue <= (this.images.length - 1)) {
this.activeItemIndex = newValue;
this.activeIndex = newValue;
}
}
}