Refactor #3965 - Update for Carousel
Tuğçe Küçükoğlu
parent
9abaad7612
commit
ff695f200f
|
|
@ -75,11 +75,22 @@ const styles = `
|
|||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ instance }) => ['p-carousel p-component', { 'p-carousel-vertical': instance.isVertical(), 'p-carousel-horizontal': !instance.isVertical() }],
|
||||
root: ({ instance }) => [
|
||||
'p-carousel p-component',
|
||||
{
|
||||
'p-carousel-vertical': instance.isVertical(),
|
||||
'p-carousel-horizontal': !instance.isVertical()
|
||||
}
|
||||
],
|
||||
header: 'p-carousel-header',
|
||||
content: ({ props }) => ['p-carousel-content ', props.contentClass],
|
||||
container: ({ props }) => ['p-carousel-container', props.containerClass],
|
||||
previousButton: ({ instance }) => ['p-carousel-prev p-link', { 'p-disabled': instance.backwardIsDisabled }],
|
||||
content: 'p-carousel-content',
|
||||
container: 'p-carousel-container',
|
||||
previousButton: ({ instance }) => [
|
||||
'p-carousel-prev p-link',
|
||||
{
|
||||
'p-disabled': instance.backwardIsDisabled
|
||||
}
|
||||
],
|
||||
previousButtonIcon: 'p-carousel-next-icon',
|
||||
itemsContent: 'p-carousel-items-content',
|
||||
itemsContainer: 'p-carousel-items-container',
|
||||
|
|
@ -87,18 +98,32 @@ const classes = {
|
|||
'p-carousel-item p-carousel-item-cloned',
|
||||
{
|
||||
'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
|
||||
'p-carousel-item-start': 0 === index,
|
||||
'p-carousel-item-start': index === 0,
|
||||
'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
|
||||
}
|
||||
],
|
||||
item: ({ instance, index }) => [
|
||||
'p-carousel-item',
|
||||
{ 'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index, 'p-carousel-item-start': instance.firstIndex() === index, 'p-carousel-item-end': instance.lastIndex() === index }
|
||||
{
|
||||
'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index,
|
||||
'p-carousel-item-start': instance.firstIndex() === index,
|
||||
'p-carousel-item-end': instance.lastIndex() === index
|
||||
}
|
||||
],
|
||||
nextButton: ({ instance }) => [
|
||||
'p-carousel-next p-link',
|
||||
{
|
||||
'p-disabled': instance.forwardIsDisabled
|
||||
}
|
||||
],
|
||||
nextButton: ({ instance }) => ['p-carousel-next p-link', { 'p-disabled': instance.forwardIsDisabled }],
|
||||
nextButtonIcon: 'p-carousel-prev-icon',
|
||||
indicators: ({ props }) => ['p-carousel-indicators p-reset', props.indicatorsContentClass],
|
||||
indicator: ({ instance, i }) => ['p-carousel-indicator', { 'p-highlight': instance.d_page === i }],
|
||||
indicators: 'p-carousel-indicators p-reset',
|
||||
indicator: ({ instance, index }) => [
|
||||
'p-carousel-indicator',
|
||||
{
|
||||
'p-highlight': instance.d_page === index
|
||||
}
|
||||
],
|
||||
indicatorButton: 'p-link',
|
||||
footer: 'p-carousel-footer'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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…
Reference in New Issue