From f0b23692c8b0e5dd52a3149afb9edc35b64248be Mon Sep 17 00:00:00 2001
From: SchnapsterDog <olivertrajceski@yahoo.com>
Date: Tue, 13 Dec 2022 19:54:41 +0100
Subject: [PATCH] fix: replace itemWidth with width prop, updated certain props
 type

---
 package.json                     |  2 +-
 src/components/MarqueeSlider.vue | 26 +++++++++++++-------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index f46c5dd..a11cd02 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-marquee-slider",
   "description": "Simple and easy-to-use component for Vue that allows you to create customizable marquees with just a few lines of code",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "author": {
     "name": "Oliver Trajceski",
diff --git a/src/components/MarqueeSlider.vue b/src/components/MarqueeSlider.vue
index 366a931..c00d23d 100644
--- a/src/components/MarqueeSlider.vue
+++ b/src/components/MarqueeSlider.vue
@@ -7,7 +7,7 @@
 </template>
 <script>
 export default {
-	name: 'VueMarqueeSlider',
+	name: 'MarqueeSlider',
 	props: {
 		autoWidth: {
 			type: Boolean,
@@ -16,16 +16,10 @@ export default {
 			}
 		},
 		id: {
-			type: [Number, String],
+			type: String,
       required: true,
       default: () => {
-        return 'id'
-      }
-    },
-    itemWidth: {
-			type: Number,
-			default: () => {
-				return 200
+				return 'id'
 			}
 		},
 		paused: {
@@ -53,10 +47,16 @@ export default {
 			}
 		},
 		speed: {
-			type: [Number, String],
+			type: Number,
 			default: () => {
 				return 1500
 			}
+		},
+		width: {
+			type: Number,
+			default: () => {
+				return 100
+			}
 		}
 	},
 	data() {
@@ -121,7 +121,7 @@ export default {
 			this.items[index].style.marginRight = `${this.space}px`
 		},
 		setItemWidth(index) {
-			this.items[index].style.minWidth = `${this.itemWidth}px`
+			this.items[index].style.minWidth = `${this.width}px`
 		},
 		setImageObjectFit(index) {
 			this.items[index].style.objectFit = 'contain'
@@ -133,13 +133,13 @@ export default {
 			if (this.autoWidth) {
 				this.container.style.width = `${this.itemsLength * (this.containerWidth / this.itemsLength + this.space)}px`
 			} else {
-				this.container.style.width = `${this.itemsLength * (this.itemWidth + this.space)}px`
+				this.container.style.width = `${this.itemsLength * (this.width + this.space)}px`
 			}
 		}
 	}
 }
 </script>
-<style module scoped>
+<style module>
 .marqueeSlider {
 	overflow: hidden;
 }