Refactor #5592 - For Media section components

components/lib/carousel/Carousel.d.ts

@@ -77,30 +77,30 @@ export interface CarouselPassThroughOptions {
      */
     header?: CarouselPassThroughOptionType;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the content container's DOM element.
      */
-    content?: CarouselPassThroughOptionType;
+    contentContainer?: CarouselPassThroughOptionType;
     /**
-     * Used to pass attributes to the container's DOM element.
+     * Used to pass attributes to the content's DOM element.
      */
-    container?: CarouselPassThroughOptionType;
+    content?: CarouselPassThroughOptionType;
     /**
      * Used to pass attributes to the previous button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
     previousButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the items content's DOM element.
+     * Used to pass attributes to the viewport's DOM element.
      */
-    itemsContent?: CarouselPassThroughOptionType;
+    viewport?: CarouselPassThroughOptionType;
     /**
-     * Used to pass attributes to the items container's DOM element.
+     * Used to pass attributes to the items list's DOM element.
      */
-    itemsContainer?: CarouselPassThroughOptionType;
+    itemList?: CarouselPassThroughOptionType;
     /**
-     * Used to pass attributes to the item cloned's DOM element.
+     * Used to pass attributes to the item clone's DOM element.
      */
-    itemCloned?: CarouselPassThroughOptionType;
+    itemClone?: CarouselPassThroughOptionType;
     /**
      * Used to pass attributes to the item's DOM element.
      */
@@ -111,9 +111,9 @@ export interface CarouselPassThroughOptions {
      */
     nextButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the indicators's DOM element.
+     * Used to pass attributes to the indicator list's DOM element.
      */
-    indicators?: CarouselPassThroughOptionType;
+    indicatorList?: CarouselPassThroughOptionType;
     /**
      * Used to pass attributes to the indicator's DOM element.
      */

components/lib/carousel/Carousel.vue

@@ -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')"

components/lib/carousel/style/CarouselStyle.js

@@ -9,17 +9,17 @@ const classes = {
         }
     ],
     header: 'p-carousel-header',
-    content: 'p-carousel-content-container',
-    container: 'p-carousel-content',
+    contentContainer: 'p-carousel-content-container',
+    content: 'p-carousel-content',
     previousButton: ({ instance }) => [
         'p-carousel-prev-button',
         {
             'p-disabled': instance.backwardIsDisabled
         }
     ],
-    itemsContent: 'p-carousel-viewport',
-    itemsContainer: 'p-carousel-items',
-    itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [
+    viewport: 'p-carousel-viewport',
+    itemList: 'p-carousel-item-list',
+    itemClone: ({ index, value, totalShiftedItems, d_numVisible }) => [
         'p-carousel-item p-carousel-item-clone',
         {
             'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
@@ -41,7 +41,7 @@ const classes = {
             'p-disabled': instance.forwardIsDisabled
         }
     ],
-    indicators: 'p-carousel-indicators',
+    indicatorList: 'p-carousel-indicator-list',
     indicator: ({ instance, index }) => [
         'p-carousel-indicator',
         {

components/lib/galleria/Galleria.d.ts

@@ -91,13 +91,13 @@ export interface GalleriaPassThroughOptions {
      */
     footer?: GalleriaPassThroughOptionType;
     /**
-     * Used to pass attributes to the item wrapper's DOM element.
+     * Used to pass attributes to the item container's DOM element.
      */
-    itemWrapper?: GalleriaPassThroughOptionType;
+    itemsContainer?: GalleriaPassThroughOptionType;
     /**
-     * Used to pass attributes to the item container's DOM element.
+     * Used to pass attributes to the items' DOM element.
      */
-    itemContainer?: GalleriaPassThroughOptionType;
+    items?: GalleriaPassThroughOptionType;
     /**
      * Used to pass attributes to the previous item button's DOM element.
      */
@@ -123,9 +123,9 @@ export interface GalleriaPassThroughOptions {
      */
     caption?: GalleriaPassThroughOptionType;
     /**
-     * Used to pass attributes to the indicators's DOM element.
+     * Used to pass attributes to the indicator list's DOM element.
      */
-    indicators?: GalleriaPassThroughOptionType;
+    indicatorList?: GalleriaPassThroughOptionType;
     /**
      * Used to pass attributes to the indicator's DOM element.
      */
@@ -135,13 +135,13 @@ export interface GalleriaPassThroughOptions {
      */
     indicatorButton?: GalleriaPassThroughOptionType;
     /**
-     * Used to pass attributes to the thumbnail wrapper's DOM element.
+     * Used to pass attributes to the thumbnails' DOM element.
      */
-    thumbnailWrapper?: GalleriaPassThroughOptionType;
+    thumbnails?: GalleriaPassThroughOptionType;
     /**
-     * Used to pass attributes to the thumbnail container's DOM element.
+     * Used to pass attributes to the thumbnail content's DOM element.
      */
-    thumbnailContainer?: GalleriaPassThroughOptionType;
+    thumbnailContent?: GalleriaPassThroughOptionType;
     /**
      * Used to pass attributes to the previous thumbnail button's DOM element.
      */
@@ -163,9 +163,9 @@ export interface GalleriaPassThroughOptions {
      */
     thumbnailItem?: GalleriaPassThroughOptionType;
     /**
-     * Used to pass attributes to the thumbnail item content's DOM element.
+     * Used to pass attributes to the thumbnail's DOM element.
      */
-    thumbnailItemContent?: GalleriaPassThroughOptionType;
+    thumbnail?: GalleriaPassThroughOptionType;
     /**
      * Used to pass attributes to the next thumbnail button's DOM element.
      */

components/lib/galleria/GalleriaItem.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="cx('itemWrapper')" v-bind="ptm('itemWrapper')">
-        <div :class="cx('itemContainer')" v-bind="ptm('itemContainer')">
+    <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('previousItemButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')" data-pc-group-section="itemnavigator">
                 <component :is="templates.previousitemicon || 'ChevronLeftIcon'" :class="cx('previousItemIcon')" v-bind="ptm('previousItemIcon')" />
             </button>
@@ -14,7 +14,7 @@
                 <component v-if="templates.caption" :is="templates.caption" :item="activeItem" />
             </div>
         </div>
-        <ul v-if="showIndicators" ref="indicatorContent" :class="cx('indicators')" v-bind="ptm('indicators')">
+        <ul v-if="showIndicators" ref="indicatorContent" :class="cx('indicatorList')" v-bind="ptm('indicatorList')">
             <li
                 v-for="(item, index) of value"
                 :key="`p-galleria-indicator-${index}`"

components/lib/galleria/GalleriaThumbnails.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="cx('thumbnailWrapper')" v-bind="ptm('thumbnailWrapper')">
-        <div :class="cx('thumbnailContainer')" v-bind="ptm('thumbnailContainer')">
+    <div :class="cx('thumbnails')" v-bind="ptm('thumbnails')">
+        <div :class="cx('thumbnailContent')" v-bind="ptm('thumbnailContent')">
             <button
                 v-if="showThumbnailNavigators"
                 v-ripple
@@ -41,12 +41,12 @@
                         :data-p-galleria-thumbnail-item-end="lastItemActiveIndex() === index"
                     >
                         <div
-                            :class="cx('thumbnailItemContent')"
+                            :class="cx('thumbnail')"
                             :tabindex="activeIndex === index ? '0' : '-1'"
                             :aria-label="ariaPageLabel(index + 1)"
                             :aria-current="activeIndex === index ? 'page' : undefined"
                             @click="onItemClick(index)"
-                            v-bind="ptm('thumbnailItemContent')"
+                            v-bind="ptm('thumbnail')"
                         >
                             <component v-if="templates.thumbnail" :is="templates.thumbnail" :item="item" />
                         </div>

components/lib/galleria/style/GalleriaStyle.js

@@ -27,8 +27,8 @@ const classes = {
     header: 'p-galleria-header',
     content: 'p-galleria-content',
     footer: 'p-galleria-footer',
-    itemWrapper: 'p-galleria-items-container',
-    itemContainer: 'p-galleria-items',
+    itemsContainer: 'p-galleria-items-container',
+    items: 'p-galleria-items',
     previousItemButton: ({ instance }) => [
         'p-galleria-prev-button p-galleria-navigate-button',
         {
@@ -45,16 +45,16 @@ const classes = {
     ],
     nextItemIcon: 'p-galleria-next-icon',
     caption: 'p-galleria-caption',
-    indicators: 'p-galleria-indicators',
+    indicatorList: 'p-galleria-indicator-list',
     indicator: ({ instance, index }) => [
         'p-galleria-indicator',
         {
             'p-galleria-indicator-active': instance.isIndicatorItemActive(index)
         }
     ],
     indicatorButton: 'p-galleria-indicator-button',
-    thumbnailWrapper: 'p-galleria-thumbnails',
-    thumbnailContainer: 'p-galleria-thumbnails-content',
+    thumbnails: 'p-galleria-thumbnails',
+    thumbnailContent: 'p-galleria-thumbnails-content',
     previousThumbnailButton: ({ instance }) => [
         'p-galleria-thumbnail-prev-button',
         {
@@ -73,7 +73,7 @@ const classes = {
             'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index
         }
     ],
-    thumbnailItemContent: 'p-galleria-thumbnail',
+    thumbnail: 'p-galleria-thumbnail',
     nextThumbnailButton: ({ instance }) => [
         'p-galleria-thumbnail-next-button',
         {

components/lib/image/Image.d.ts

@@ -60,13 +60,13 @@ export interface ImagePassThroughOptions {
      */
     image?: ImagePassThroughOptionType;
     /**
-     * Used to pass attributes to the button's DOM element.
+     * Used to pass attributes to the preview mask's DOM element.
      */
-    button?: ImagePassThroughOptionType;
+    previewMask?: ImagePassThroughOptionType;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the  preview icon's DOM element.
      */
-    icon?: ImagePassThroughOptionType;
+    previewIcon?: ImagePassThroughOptionType;
     /**
      * Used to pass attributes to the mask's DOM element.
      */
@@ -116,13 +116,13 @@ export interface ImagePassThroughOptions {
      */
     closeIcon?: ImagePassThroughOptionType;
     /**
-     * Used to pass attributes to the preview container's DOM element.
+     * Used to pass attributes to the original container's DOM element.
      */
-    previewContainer?: ImagePassThroughOptionType;
+    originalContainer?: ImagePassThroughOptionType;
     /**
-     * Used to pass attributes to the preview's DOM element.
+     * Used to pass attributes to the original's DOM element.
      */
-    preview?: ImagePassThroughOptionType;
+    original?: ImagePassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/image/Image.vue

@@ -1,11 +1,11 @@
 <template>
     <span :class="containerClass" :style="style" v-bind="ptmi('root')">
         <slot name="image" :onError="onError" :errorCallback="onError">
-            <img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
+            <img :style="imageStyle" :class="imageClass" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
         </slot>
-        <button v-if="preview" ref="previewButton" :aria-label="zoomImageAriaLabel" type="button" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
+        <button v-if="preview" ref="previewButton" :aria-label="zoomImageAriaLabel" type="button" :class="cx('previewMask')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('previewMask') }">
             <slot name="indicatoricon">
-                <component :is="indicatorIcon ? 'i' : 'EyeIcon'" :class="cx('icon')" v-bind="ptm('icon')" />
+                <component :is="indicatorIcon ? 'i' : 'EyeIcon'" :class="cx('previewIcon')" v-bind="ptm('previewIcon')" />
             </slot>
         </button>
         <Portal>
@@ -42,9 +42,9 @@
                     </button>
                 </div>
                 <transition name="p-image-original" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
-                    <div v-if="previewVisible" v-bind="ptm('previewContainer')">
-                        <slot name="preview" :class="cx('preview')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick">
-                            <img :src="$attrs.src" :class="cx('preview')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('preview')" />
+                    <div v-if="previewVisible" v-bind="ptm('originalContainer')">
+                        <slot name="preview" :class="cx('original')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick">
+                            <img :src="$attrs.src" :class="cx('original')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('original')" />
                         </slot>
                     </div>
                 </transition>

components/lib/image/style/ImageStyle.js

@@ -7,9 +7,8 @@ const classes = {
             'p-image-preview': props.preview
         }
     ],
-    image: ({ props }) => props.image,
-    button: 'p-image-preview-mask',
-    icon: 'p-image-preview-icon',
+    previewMask: 'p-image-preview-mask',
+    previewIcon: 'p-image-preview-icon',
     mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
     toolbar: 'p-image-toolbar',
     rotateRightButton: 'p-image-action p-image-rotate-right-button',
@@ -27,7 +26,7 @@ const classes = {
         }
     ],
     closeButton: 'p-image-action p-image-close-button',
-    preview: 'p-image-original'
+    original: 'p-image-original'
 };
 
 export default BaseStyle.extend({

components/lib/themes/primeone/base/carousel/index.js

@@ -21,7 +21,7 @@ export default {
     width: 100%;
 }
 
-.p-carousel-items {
+.p-carousel-item-list {
     display: flex;
     flex-direction: row;
 }
@@ -31,7 +31,7 @@ export default {
     align-self: center;
 }
 
-.p-carousel-indicators {
+.p-carousel-indicator-list {
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -76,7 +76,7 @@ export default {
     flex-direction: column;
 }
 
-.p-carousel-vertical .p-carousel-items {
+.p-carousel-vertical .p-carousel-item-list {
     flex-direction: column;
     height: 100%;
 }