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

Fixed #6264 - Carousel: Index is undefined in PassThroughOptions

pull/6161/head^2
tugcekucukoglu 2024-08-21 10:12:05 +03:00
parent 8509a9b66f
commit 077acfabaa
2 changed files with 37 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/primevue/src/carousel/Carousel.d.ts vendored
View File

@ -209,6 +209,25 @@ export interface CarouselContext {
* @defaultValue false
*/
highlighted: boolean;
/**
* Index of the item as a number.
*/
index: number;
/**
* Current active state of the item as a boolean.
* @defaultValue false
*/
active: boolean;
/**
* Current start state of the item as a boolean.
* @defaultValue false
*/
start: boolean;
/**
* Current end state of the item as a boolean.
* @defaultValue false
*/
end: boolean;
}
export interface CarouselResponsiveOptions {

26
packages/primevue/src/carousel/Carousel.vue
View File

@ -45,7 +45,7 @@
:aria-hidden="firstIndex() > index || lastIndex() < index ? true : undefined"
:aria-label="ariaSlideNumber(index)"
:aria-roledescription="ariaSlideLabel"
v-bind="ptm('item')"
v-bind="getItemPTOptions('item', index)"
:data-p-carousel-item-active="firstIndex() <= index && lastIndex() >= index"
:data-p-carousel-item-start="firstIndex() === index"
:data-p-carousel-item-end="lastIndex() === index"
@ -78,7 +78,7 @@
</Button>
</div>
<ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicatorList'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicatorList')">
<li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-active="d_page === i">
<li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="getIndicatorPTOptions('indicator', i)" :data-p-active="d_page === i">
<button
:class="cx('indicatorButton')"
type="button"
@ -86,7 +86,7 @@
:aria-label="ariaPageLabel(i + 1)"
:aria-current="d_page === i ? 'page' : undefined"
@click="onIndicatorClick($event, i)"
v-bind="ptm('indicatorButton', getIndicatorPTOptions(i))"
v-bind="getIndicatorPTOptions('indicatorButton', i)"
/>
</li>
</ul>
@ -101,9 +101,9 @@
</template>
<script>
import { UniqueComponentId } from '@primevue/core/utils';
import { removeClass, addClass, find, findSingle, getAttribute, setAttribute } from '@primeuix/utils/dom';
import { addClass, find, findSingle, getAttribute, removeClass, setAttribute } from '@primeuix/utils/dom';
import { localeComparator, sort } from '@primeuix/utils/object';
import { UniqueComponentId } from '@primevue/core/utils';
import ChevronDownIcon from '@primevue/icons/chevrondown';
import ChevronLeftIcon from '@primevue/icons/chevronleft';
import ChevronRightIcon from '@primevue/icons/chevronright';
@ -272,12 +272,22 @@ export default {
}
},
methods: {
getIndicatorPTOptions(index) {
return {
getIndicatorPTOptions(key, index) {
return this.ptm(key, {
context: {
highlighted: index === this.d_page
}
};
});
},
getItemPTOptions(key, index) {
return this.ptm(key, {
context: {
index,
active: this.firstIndex() <= index && this.lastIndex() >= index,
start: this.firstIndex() === index,
end: this.lastIndex() === index
}
});
},
step(dir, page) {
let totalShiftedItems = this.totalShiftedItems;