From 967f05061a4b0f5d378ab0170d9fbbb7258a73a6 Mon Sep 17 00:00:00 2001
From: benson <freefallbenson@gmail.com>
Date: Fri, 5 May 2023 21:12:13 +0800
Subject: [PATCH] improved vue component

---
 src/components/actionButton.vue | 73 +++++++++++----------------------
 1 file changed, 23 insertions(+), 50 deletions(-)

diff --git a/src/components/actionButton.vue b/src/components/actionButton.vue
index 5b03ada..f860829 100644
--- a/src/components/actionButton.vue
+++ b/src/components/actionButton.vue
@@ -1,18 +1,11 @@
 <template>
-  <div v-bind:class="className">
-    <button class="btn btn-primary" v-if="loading ^ 1" @click.prevent="handler">
-      <slot>Download</slot>
-    </button>
-    <button class="bs-spinner" v-if="loading">
-      <span
-        class="spinner-border spinner-border-sm"
-        role="status"
-        aria-hidden="true"
-        disabled
-      ></span
-      ><span class="visually-hidden">Loading...</span>
-    </button>
-  </div>
+  <button ref="button" :class="className" v-if="loading ^ 1" @click.prevent="handler">
+    <slot>Download</slot>
+  </button>
+  <button class="bs-spinner" v-if="loading">
+    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" disabled></span><span
+      class="visually-hidden">Loading...</span>
+  </button>
 </template>
 <script>
 export default {
@@ -30,46 +23,26 @@ export default {
   name: "actionButton",
   props: {
     className: String,
-    enableLoading: Boolean,
+    enableLoading: {
+      type: Boolean,
+      default: false,
+    },
+    btnType: {
+      type: String,
+      default: "",
+    },
+    action: {
+      type: String,
+      default: "",
+    },
   },
 };
 </script>
 <style lang="scss">
-@import "../css/variables.scss";
-button {
-  cursor: pointer;
-  border-radius: 0px;
-}
-.btn {
-  display: inline-block;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #212529;
-  text-align: center;
-  text-decoration: none;
-  vertical-align: middle;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 1px solid transparent;
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
+@import "../css/bootstrap.scss";
+@import "../css/btn.scss";
 
-.btn-primary {
-  color: #fff;
-  background-color: #7d7f7d;
-  border-color: #7d7f7d;
-}
-
-.btn-primary:hover {
-  color: #fff;
-  background-color: #0b5ed7;
-  border-color: #0a58ca;
+.check-button {
+  @extend .btn;
 }
 </style>