refactor: #7090 for Galleria

pull/7007/merge
Mert Sincan 2025-01-14 11:11:18 +00:00
parent 2b97123737
commit 46423fc8a0
1 changed files with 3 additions and 11 deletions

View File

@ -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);
}, },