v0.2.0-alpha - add customization

koiyakiya · Jul 23, 2024 · 7cd9f25 · 7cd9f25
1 parent b9f29f0
commit 7cd9f25
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "test": "exit 0"
   },
   "name": "vite-coffee",
-  "version": "0.1.0-alpha",
+  "version": "0.2.0-alpha",
   "type": "module",
   "dependencies": {
     "vue": "^3.4.33"

diff --git a/src/components/Kofi.vue b/src/components/Kofi.vue
@@ -13,6 +13,22 @@
   export default defineComponent({
     props: {
       username: { type: String, required: true },
+      backgroundColor: { type: String, default: '#1A8ABE' },
+      hoverBackgroundColor: { type: String, default: '#29ABE0' },
+      textColor: { type: String, default: '#fff' },
+      padding: { type: String, default: '10px' },
+      borderRadius: { type: String, default: '10px' },
+      gap: { type: String, default: '5px' },
+      display: { type: String, default: 'flex' },
+      width: { type: String, default: '175px' },
+      height: { type: String, default: '20px' },
+      alignItems: { type: String, default: 'center' },
+      justifyContent: { type: String, default: 'center' },
+      textDecoration: { type: String, default: 'none' },
+      cursor: { type: String, default: 'pointer' },
+      imgWidth: { type: String, default: '35px' },
+      imgMarginLeft: { type: String, default: '-10px' },
+      imgMarginRight: { type: String, default: '-5px' },
     },
     data() {
       return {
@@ -26,25 +42,25 @@
     
         style() {
           return {
-            backgroundColor: this.hover ? '#29ABE0' : '#1A8ABE',
-            color: '#fff',
-            padding: '10px',
-            borderRadius: '10px',
-            gap: '5px',
-            display: 'flex',
-            width: '175px',
-            height: '20px',
-            alignItems: 'center',
-            justifyContent: 'center',
-            textDecoration: 'none',
-            cursor: 'pointer',
+            backgroundColor: this.hover ? this.hoverBackgroundColor : this.backgroundColor,
+            color: this.textColor,
+            padding: this.padding,
+            borderRadius: this.borderRadius,
+            gap: this.gap,
+            display: this.display,
+            width: this.width,
+            height: this.height,
+            alignItems: this.alignItems,
+            justifyContent: this.justifyContent,
+            textDecoration: this.textDecoration,
+            cursor: this.cursor,
           }
         },
         imgStyle() {
           return {
-            width: '35px',
-            marginLeft: '-10px',
-            marginRight: '-5px',
+            width: this.imgWidth,
+            marginLeft: this.imgMarginLeft,
+            marginRight: this.imgMarginRight,
           }
         }
     },