diff --git a/package-lock.json b/package-lock.json index 26ed6da..51ab3ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-polar-bear", - "version": "4.3.12", + "version": "4.3.13", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index a953674..4e9e034 100644 --- 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 index 865c7d2..aabf0ef 100644 --- 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 `
` 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 index 128e205..30f259e 100644 --- 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)" - /> + > + +
@@ -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;