refactor: #7090 for Galleria
parent
2b97123737
commit
46423fc8a0
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="$attrs.value && $attrs.value.length > 0"
|
v-if="$attrs.value && $attrs.value.length > 0"
|
||||||
:id="id"
|
:id="$id"
|
||||||
role="region"
|
role="region"
|
||||||
:class="[cx('root'), $attrs.containerClass]"
|
:class="[cx('root'), $attrs.containerClass]"
|
||||||
:style="$attrs.containerStyle"
|
:style="$attrs.containerStyle"
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div :class="cx('content')" :aria-live="$attrs.autoPlay ? 'polite' : 'off'" v-bind="getPTOptions('content')">
|
<div :class="cx('content')" :aria-live="$attrs.autoPlay ? 'polite' : 'off'" v-bind="getPTOptions('content')">
|
||||||
<GalleriaItem
|
<GalleriaItem
|
||||||
:id="id"
|
:id="$id"
|
||||||
v-model:activeIndex="activeIndex"
|
v-model:activeIndex="activeIndex"
|
||||||
v-model:slideShowActive="slideShowActive"
|
v-model:slideShowActive="slideShowActive"
|
||||||
:value="$attrs.value"
|
:value="$attrs.value"
|
||||||
|
@ -37,7 +37,7 @@
|
||||||
v-if="$attrs.showThumbnails"
|
v-if="$attrs.showThumbnails"
|
||||||
v-model:activeIndex="activeIndex"
|
v-model:activeIndex="activeIndex"
|
||||||
v-model:slideShowActive="slideShowActive"
|
v-model:slideShowActive="slideShowActive"
|
||||||
:containerId="id"
|
:containerId="$id"
|
||||||
:value="$attrs.value"
|
:value="$attrs.value"
|
||||||
:templates="$attrs.templates"
|
:templates="$attrs.templates"
|
||||||
:numVisible="numVisible"
|
:numVisible="numVisible"
|
||||||
|
@ -61,7 +61,6 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseComponent from '@primevue/core/basecomponent';
|
import BaseComponent from '@primevue/core/basecomponent';
|
||||||
import { UniqueComponentId } from '@primevue/core/utils';
|
|
||||||
import TimesIcon from '@primevue/icons/times';
|
import TimesIcon from '@primevue/icons/times';
|
||||||
import Ripple from 'primevue/ripple';
|
import Ripple from 'primevue/ripple';
|
||||||
import GalleriaItem from './GalleriaItem.vue';
|
import GalleriaItem from './GalleriaItem.vue';
|
||||||
|
@ -76,16 +75,12 @@ export default {
|
||||||
emits: ['activeitem-change', 'mask-hide'],
|
emits: ['activeitem-change', 'mask-hide'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
id: this.$attrs.id || UniqueComponentId(),
|
|
||||||
activeIndex: this.$attrs.activeIndex,
|
activeIndex: this.$attrs.activeIndex,
|
||||||
numVisible: this.$attrs.numVisible,
|
numVisible: this.$attrs.numVisible,
|
||||||
slideShowActive: false
|
slideShowActive: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'$attrs.id': function (newValue) {
|
|
||||||
this.id = newValue || UniqueComponentId();
|
|
||||||
},
|
|
||||||
'$attrs.value': function (newVal) {
|
'$attrs.value': function (newVal) {
|
||||||
if (newVal && newVal.length < this.numVisible) {
|
if (newVal && newVal.length < this.numVisible) {
|
||||||
this.numVisible = newVal.length;
|
this.numVisible = newVal.length;
|
||||||
|
@ -101,9 +96,6 @@ export default {
|
||||||
newVal ? this.startSlideShow() : this.stopSlideShow();
|
newVal ? this.startSlideShow() : this.stopSlideShow();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
this.id = this.id || UniqueComponentId();
|
|
||||||
},
|
|
||||||
updated() {
|
updated() {
|
||||||
this.$emit('activeitem-change', this.activeIndex);
|
this.$emit('activeitem-change', this.activeIndex);
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue