mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Refactor #3965 - Update for Carousel
This commit is contained in:
parent
9abaad7612
commit
ff695f200f
2 changed files with 47 additions and 49 deletions
|
@ -3,8 +3,8 @@
|
|||
<div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<div :class="cx('content')" v-bind="ptm('content')">
|
||||
<div :class="cx('container')" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
|
||||
<div :class="[cx('content'), contentClass]" v-bind="ptm('content')">
|
||||
<div :class="[cx('container'), containerClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
|
||||
<button v-if="showNavigators" v-ripple type="button" :class="cx('previousButton')" :disabled="backwardIsDisabled" :aria-label="ariaPrevButtonLabel" @click="navBackward" v-bind="{ ...prevButtonProps, ...ptm('previousButton') }">
|
||||
<slot name="previousicon">
|
||||
<component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="cx('previousButtonIcon')" v-bind="ptm('previousButtonIcon')" />
|
||||
|
@ -17,15 +17,11 @@
|
|||
<div
|
||||
v-for="(item, index) of value.slice(-1 * d_numVisible)"
|
||||
:key="index + '_scloned'"
|
||||
:class="
|
||||
cx('itemCloned', {
|
||||
index,
|
||||
value,
|
||||
totalShiftedItems,
|
||||
d_numVisible
|
||||
})
|
||||
"
|
||||
:class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })"
|
||||
v-bind="ptm('itemCloned')"
|
||||
:data-p-carousel-item-active="totalShiftedItems * -1 === value.length + d_numVisible"
|
||||
:data-p-carousel-item-start="index === 0"
|
||||
:data-p-carousel-item-end="value.slice(-1 * d_numVisible).length - 1 === index"
|
||||
>
|
||||
<slot name="item" :data="item" :index="index"></slot>
|
||||
</div>
|
||||
|
@ -33,33 +29,20 @@
|
|||
<div
|
||||
v-for="(item, index) of value"
|
||||
:key="index"
|
||||
:class="
|
||||
cx('item', {
|
||||
index
|
||||
})
|
||||
"
|
||||
:class="cx('item', { index })"
|
||||
role="group"
|
||||
:aria-hidden="firstIndex() > index || lastIndex() < index ? true : undefined"
|
||||
:aria-label="ariaSlideNumber(index)"
|
||||
:aria-roledescription="ariaSlideLabel"
|
||||
v-bind="ptm('item')"
|
||||
:data-p-carousel-item-active="firstIndex() <= index && lastIndex() >= index"
|
||||
:data-p-carousel-item-start="firstIndex() === index"
|
||||
:data-p-carousel-item-end="lastIndex() === index"
|
||||
>
|
||||
<slot name="item" :data="item" :index="index"></slot>
|
||||
</div>
|
||||
<template v-if="isCircular()">
|
||||
<div
|
||||
v-for="(item, index) of value.slice(0, d_numVisible)"
|
||||
:key="index + '_fcloned'"
|
||||
:class="
|
||||
cx('itemCloned', {
|
||||
index,
|
||||
value,
|
||||
totalShiftedItems,
|
||||
d_numVisible
|
||||
})
|
||||
"
|
||||
v-bind="ptm('itemCloned')"
|
||||
>
|
||||
<div v-for="(item, index) of value.slice(0, d_numVisible)" :key="index + '_fcloned'" :class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })" v-bind="ptm('itemCloned')">
|
||||
<slot name="item" :data="item" :index="index"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -72,18 +55,8 @@
|
|||
</slot>
|
||||
</button>
|
||||
</div>
|
||||
<ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="cx('indicators')" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
|
||||
<li
|
||||
v-for="(indicator, i) of totalIndicators"
|
||||
:key="'p-carousel-indicator-' + i.toString()"
|
||||
:class="
|
||||
cx('indicator', {
|
||||
i
|
||||
})
|
||||
"
|
||||
:data-p-highlight="d_page === i"
|
||||
v-bind="ptm('indicator')"
|
||||
>
|
||||
<ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicators'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
|
||||
<li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator')" :data-p-highlight="d_page === i">
|
||||
<button
|
||||
:class="cx('indicatorButton')"
|
||||
type="button"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue