Integrate Changes

Integrate Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-polar-bear",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "author": "adapcon",
   "scripts": {
     "storybook": "start-storybook --quiet -p 6006 -s ./src/static",

src/components/DataVisualization/Carousel/Carousel.stories.mdx

@@ -76,6 +76,7 @@ import PbCarousel from './Carousel.vue';
     visibleSlides: { type: 'number', defaultValue: 1 },
     zoomOnHover: { type: 'boolean', defaultValue: true },
     zoomScale: { type: 'number', defaultValue: 2 },
+    noShadow: { type: 'boolean', defaultValue: false },
   }}
 />
 
@@ -125,6 +126,7 @@ export const Template = (args, { argTypes}) => ({
       :visible-slides="visibleSlides"
       :zoom-on-hover="zoomOnHover"
       :zoom-scale="zoomScale"
+      :no-shadow="noShadow"
       />
     </div>
   `,
@@ -185,6 +187,7 @@ You can check the vueper-slides documentation [here.](https://antoniandre.github
 | carouselStyle           | String              | large   | the size of the component arrows and bullets. ['small', 'medium', 'large']
 | zoomOnHover             | Boolean             | false   | allows the image to be zoomed when hovered
 | zoomScale               | Number              | 2       | when zoomOnHover is set to true, defines the amount of zoom when clicking on the image
+| noShadow                | Boolean             | false   | removes the shadow from the carousel slides
 
 ### Events
 

src/components/DataVisualization/Carousel/Carousel.vue

@@ -161,6 +161,7 @@ export default {
     visibleSlides: { type: Number, default: 1 },
     zoomOnHover: { type: Boolean, default: false },
     zoomScale: { type: Number, default: 2 },
+    noShadow: { type: Boolean, default: false },
   },
 
   emits: [
@@ -184,7 +185,7 @@ export default {
 
   computed: {
     carouselClass() {
-      return this.carouselStyle !== 'large' ? `carousel-${this.carouselStyle}` : '';
+      return `${this.noShadow ? 'no-shadow' : ''} ${this.carouselStyle !== 'large' ? `carousel-${this.carouselStyle}` : ''}`.trim();
     },
 
     allowZoom() {