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

Merge pull request #7319 from ekh-anadeainc/fix/gallery-item-navigators 

fix: galleria item navigators disable state
pull/7365/head^2^2
Tuğçe Küçükoğlu 2025-03-04 14:46:15 +03:00 committed by GitHub
parent 4c3203b0e0 7df1f9ee21
commit d89df55691
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/primevue/src/galleria/GalleriaItem.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div :class="cx('itemsContainer')" v-bind="ptm('itemsContainer')"> <div :class="cx('itemsContainer')" v-bind="ptm('itemsContainer')">
<div :class="cx('items')" v-bind="ptm('items')"> <div :class="cx('items')" v-bind="ptm('items')">
<button v-if="showItemNavigators" v-ripple type="button" :class="cx('prevButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('prevButton')" data-pc-group-section="itemnavigator"> <button v-if="showItemNavigators" v-ripple type="button" :class="cx('prevButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled" v-bind="ptm('prevButton')" data-pc-group-section="itemnavigator">
<component :is="templates.previousitemicon || 'ChevronLeftIcon'" :class="cx('prevIcon')" v-bind="ptm('prevIcon')" /> <component :is="templates.previousitemicon || 'ChevronLeftIcon'" :class="cx('prevIcon')" v-bind="ptm('prevIcon')" />
</button> </button>
<div :id="id + '_item_' + activeIndex" :class="cx('item')" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel" v-bind="ptm('item')"> <div :id="id + '_item_' + activeIndex" :class="cx('item')" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel" v-bind="ptm('item')">
<component v-if="templates.item" :is="templates.item" :item="activeItem" /> <component v-if="templates.item" :is="templates.item" :item="activeItem" />
</div> </div>
<button v-if="showItemNavigators" v-ripple type="button" :class="cx('nextButton')" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextButton')" data-pc-group-section="itemnavigator"> <button v-if="showItemNavigators" v-ripple type="button" :class="cx('nextButton')" @click="navForward($event)" :disabled="isNavForwardDisabled" v-bind="ptm('nextButton')" data-pc-group-section="itemnavigator">
<component :is="templates.nextitemicon || 'ChevronRightIcon'" :class="cx('nextIcon')" v-bind="ptm('nextIcon')" /> <component :is="templates.nextitemicon || 'ChevronRightIcon'" :class="cx('nextIcon')" v-bind="ptm('nextIcon')" />
</button> </button>
<div v-if="templates['caption']" :class="cx('caption')" v-bind="ptm('caption')"> <div v-if="templates['caption']" :class="cx('caption')" v-bind="ptm('caption')">
@ -238,12 +238,6 @@ export default {
isIndicatorItemActive(index) { isIndicatorItemActive(index) {
return this.activeIndex === index; return this.activeIndex === index;
}, },
isNavBackwardDisabled() {
return !this.circular && this.activeIndex === 0;
},
isNavForwardDisabled() {
return !this.circular && this.activeIndex === this.value.length - 1;
},
ariaSlideNumber(value) { ariaSlideNumber(value) {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slideNumber.replace(/{slideNumber}/g, value) : undefined; return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slideNumber.replace(/{slideNumber}/g, value) : undefined;
}, },
@ -258,6 +252,12 @@ export default {
ariaSlideLabel() { ariaSlideLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slide : undefined; return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slide : undefined;
},
isNavBackwardDisabled() {
return !this.circular && this.activeIndex === 0;
},
isNavForwardDisabled() {
return !this.circular && this.activeIndex === this.value.length - 1;
} }
}, },
components: { components: {