[FEAT] Create new prop carousel (#437)

* feat: ✨ Create backgroundContain prop * style: ⚡ Att name prop * fix: ✨ Add new version vue pb
Adapcon · Jun 7, 2024 · 19eebf4 · 19eebf4
1 parent 5bf1954
commit 19eebf4
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-polar-bear",
-  "version": "4.3.12",
+  "version": "4.3.13",
   "author": "adapcon",
   "scripts": {
     "storybook": "start-storybook --quiet -p 6006 -s ./src/static",

diff --git a/src/components/DataVisualization/Carousel/Carousel.stories.mdx b/src/components/DataVisualization/Carousel/Carousel.stories.mdx
@@ -66,6 +66,7 @@ import PbCarousel from './Carousel.vue';
     preventYScroll: { type: 'boolean', defaultValue: true },
     progress: { type: 'boolean', defaultValue: false },
     rtl: { type: 'boolean', defaultValue: false },
+    responsiveImage: { type: 'boolean',  defaultValue: false },
     slideContentOutside: { type: ['boolean', 'string'], defaultValue: false },
     slideContentOutsideClass: { type: 'string', defaultValue: '' },
     slideImageInside: { type: 'boolean', defaultValue: false },
@@ -88,6 +89,7 @@ export const Template = (args, { argTypes}) => ({
       :arrows="arrows"
       :arrows-outside="arrowsOutside"
       :autoplay="autoplay"
+      :responsive-image="responsiveImage"
       :bullets="bullets"
       :bullets-outside="bulletsOutside"
       :carousel-style="carouselStyle"
@@ -169,6 +171,7 @@ You can check the vueper-slides documentation [here.](https://antoniandre.github
 | preventYScroll          | boolean             | false   | for touch-enabled slideshows, enable or disable the Y-axis scroll while dragging slides
 | progress                | boolean             | false   | disable or enable the top linear progress bar.
 | rtl                     | boolean             | false   | sets the slideshow to an RTL direction (right to left)
+| responsiveImage         | boolean             | false   | changes values for image, adding contain
 | slideContentOutside     | boolean, String     | false   | display the current slide title & content outside the slide. [false, 'top', 'bottom']
 | slideContentOutsideClass| String              | " "     | with this option you can have a specific CSS class to style your slide contents when it's outside the active slide
 | slideImageInside        | boolean             | false   | a `<div class="vueperslide__image">` will be created inside each slide
@@ -187,15 +190,15 @@ You can check the vueper-slides documentation [here.](https://antoniandre.github
 
 | Event                       | Description
 |:----------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------
-| ready                       | fired right after the initialization of the slideshow is complete.                                                                                               
-| previous                    | fired when going to the previous slide either from user drag or from slideshow arrows or from keyboard arrows.                                                   
-| next                        | fired when going to the next slide either from user drag or from slideshow arrows or from keyboard arrows                                                        
-| before-slide                | fired on slide change, just before the effective change.                                                                                                         
-| slide                       | fired on slide change, just after the effective change                                                                                                           
-| autoplay-pause              | fired when autoplay is set to true, and a pause has been triggered either by a mouseover or by calling the function pauseAutoplay() via Vue refs                 
-| autoplay-resume             | fired when autoplay is set to true, and a pause has been triggered either by a mouseover and mouseout or by calling the function resumeAutoplay() via Vue refs   
-| image-loaded                | fired when lazy is set to true, and the image succeeded to load.                                                                                                 
-| image-failed                | fired when lazy is set to true, and the image failed to load                                                                                                     
+| ready                       | fired right after the initialization of the slideshow is complete.
+| previous                    | fired when going to the previous slide either from user drag or from slideshow arrows or from keyboard arrows.
+| next                        | fired when going to the next slide either from user drag or from slideshow arrows or from keyboard arrows
+| before-slide                | fired on slide change, just before the effective change.
+| slide                       | fired on slide change, just after the effective change
+| autoplay-pause              | fired when autoplay is set to true, and a pause has been triggered either by a mouseover or by calling the function pauseAutoplay() via Vue refs
+| autoplay-resume             | fired when autoplay is set to true, and a pause has been triggered either by a mouseover and mouseout or by calling the function resumeAutoplay() via Vue refs
+| image-loaded                | fired when lazy is set to true, and the image succeeded to load.
+| image-failed                | fired when lazy is set to true, and the image failed to load
 
 ## Examples
 

diff --git a/src/components/DataVisualization/Carousel/Carousel.vue b/src/components/DataVisualization/Carousel/Carousel.vue
@@ -32,6 +32,7 @@
         :prevent-y-scroll="preventYScroll"
         :progress="progress"
         :rtl="rtl"
+        :responsive-image="responsiveImage"
         :slide-content-outside="slideContentOutside"
         :slide-content-outside-class="slideContentOutsideClass"
         :slide-image-inside="slideImageInside"
@@ -63,7 +64,16 @@
           :video="item.video"
           :duration="item.duration"
           @click.native="toggleZoom(item.image, count)"
-        />
+        >
+          <template
+            v-if="responsiveImage"
+            #content
+          >
+            <div class="image-contain">
+              <img :src="item.image">
+            </div>
+          </template>
+        </VueperSlide>
       </VueperSlides>
     </div>
 
@@ -143,6 +153,7 @@ export default {
     preventYScroll: { type: Boolean, default: false },
     progress: { type: Boolean, default: false },
     rtl: { type: Boolean, default: false },
+    responsiveImage: { type: Boolean, default: false },
     slideContentOutside: { type: [Boolean, String], default: false },
     slideContentOutsideClass: { type: String, default: '' },
     slideImageInside: { type: Boolean, default: false },
@@ -229,7 +240,31 @@ export default {
 
   .carousel-container {
     position: relative;
+
+    .image-contain {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      background-color: white;
+      z-index: 10;
+      display: flex;
+
+     img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+
+    &.responsive-image {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      background-color: white;
+      z-index: 10;
+      display: flex;
   }
+}
 
   .zoom-container {
     overflow: hidden;