Refactor #5592 - For Media section components

This commit is contained in:
tugcekucukoglu 2024-04-30 12:39:18 +03:00
parent 527bae0beb
commit 2c45303235
12 changed files with 82 additions and 84 deletions

View file

@ -3,8 +3,8 @@
<div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot>
</div>
<div v-if="!empty" :class="[cx('content'), contentClass]" v-bind="ptm('content')">
<div :class="[cx('container'), containerClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
<div v-if="!empty" :class="[cx('contentContainer'), containerClass]" v-bind="ptm('contentContainer')">
<div :class="[cx('content'), contentClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('content')">
<Button
v-if="showNavigators"
:class="cx('previousButton')"
@ -22,15 +22,14 @@
</slot>
</template>
</Button>
<div :class="cx('itemsContent')" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove" v-bind="ptm('itemsContent')">
<div ref="itemsContainer" :class="cx('itemsContainer')" @transitionend="onTransitionEnd" v-bind="ptm('itemsContainer')">
<div :class="cx('viewport')" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove" v-bind="ptm('viewport')">
<div ref="itemsContainer" :class="cx('itemList')" @transitionend="onTransitionEnd" v-bind="ptm('itemList')">
<template v-if="isCircular()">
<div
v-for="(item, index) of value.slice(-1 * d_numVisible)"
:key="index + '_scloned'"
:class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })"
v-bind="ptm('itemCloned')"
:class="cx('itemClone', { index, value, totalShiftedItems, d_numVisible })"
v-bind="ptm('itemClone')"
: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"
@ -54,7 +53,7 @@
<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('itemClone', { index, value, totalShiftedItems, d_numVisible })" v-bind="ptm('itemClone')">
<slot name="item" :data="item" :index="index"></slot>
</div>
</template>
@ -78,7 +77,7 @@
</template>
</Button>
</div>
<ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicators'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
<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-highlight="d_page === i">
<button
:class="cx('indicatorButton')"