diff --git a/packages/primevue/src/galleria/GalleriaItem.vue b/packages/primevue/src/galleria/GalleriaItem.vue index fe20beb8c..0773339fd 100755 --- a/packages/primevue/src/galleria/GalleriaItem.vue +++ b/packages/primevue/src/galleria/GalleriaItem.vue @@ -1,13 +1,13 @@ <template> <div :class="cx('itemsContainer')" v-bind="ptm('itemsContainer')"> <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')" /> </button> <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" /> </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')" /> </button> <div v-if="templates['caption']" :class="cx('caption')" v-bind="ptm('caption')"> @@ -238,12 +238,6 @@ export default { isIndicatorItemActive(index) { return this.activeIndex === index; }, - isNavBackwardDisabled() { - return !this.circular && this.activeIndex === 0; - }, - isNavForwardDisabled() { - return !this.circular && this.activeIndex === this.value.length - 1; - }, ariaSlideNumber(value) { return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slideNumber.replace(/{slideNumber}/g, value) : undefined; }, @@ -258,6 +252,12 @@ export default { ariaSlideLabel() { 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: { diff --git a/packages/primevue/src/selectbutton/SelectButton.vue b/packages/primevue/src/selectbutton/SelectButton.vue index da25e8ef9..30474df2d 100755 --- a/packages/primevue/src/selectbutton/SelectButton.vue +++ b/packages/primevue/src/selectbutton/SelectButton.vue @@ -8,7 +8,7 @@ :disabled="disabled || isOptionDisabled(option)" :unstyled="unstyled" :size="size" - :readonly="!allowEmpty && isSelected(option)" + :readonly="isOptionReadonly(option)" @change="onOptionSelect($event, option, index)" :pt="ptm('pcToggleButton')" > @@ -47,24 +47,35 @@ export default { isOptionDisabled(option) { return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false; }, + isOptionReadonly(option) { + if (this.allowEmpty) return false; + + let selected = this.isSelected(option); + + if (this.multiple) { + return selected && this.d_value.length === 1; + } else { + return selected; + } + }, onOptionSelect(event, option, index) { - if (this.disabled || this.isOptionDisabled(option)) { + if (this.disabled || this.isOptionDisabled(option) || this.isOptionReadonly(option)) { return; } let selected = this.isSelected(option); - - if (selected && !this.allowEmpty) { - return; - } - let optionValue = this.getOptionValue(option); let newValue; if (this.multiple) { - if (selected) newValue = this.d_value.filter((val) => !equals(val, optionValue, this.equalityKey)); - else newValue = this.d_value ? [...this.d_value, optionValue] : [optionValue]; + if (selected) { + newValue = this.d_value.filter((val) => !equals(val, optionValue, this.equalityKey)); + if (!this.allowEmpty && newValue.length === 0) return; + } else { + newValue = this.d_value ? [...this.d_value, optionValue] : [optionValue]; + } } else { + if (selected && !this.allowEmpty) return; newValue = selected ? null : optionValue; }