From ee16fe46266d1b1c984f85dd2f923f1fc5b3d4be Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 22 Apr 2024 16:51:46 +0530
Subject: [PATCH] chore: move button to composition API

---
 app/javascript/v3/components/Form/Button.vue | 190 +++++++++----------
 1 file changed, 89 insertions(+), 101 deletions(-)

diff --git a/app/javascript/v3/components/Form/Button.vue b/app/javascript/v3/components/Form/Button.vue
index 11fa25991..221a35b32 100644
--- a/app/javascript/v3/components/Form/Button.vue
+++ b/app/javascript/v3/components/Form/Button.vue
@@ -27,109 +27,97 @@
     />
   </button>
 </template>
-<script>
-export default {
-  props: {
-    type: {
-      type: String,
-      default: 'submit',
-    },
-    variant: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String,
-      default: '',
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    colorScheme: {
-      type: String,
-      default: 'primary',
-    },
-    classNames: {
-      type: [String, Object],
-      default: '',
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    isExpanded: {
-      type: Boolean,
-      default: false,
-    },
-    rightIcon: {
-      type: Boolean,
-      default: false,
-    },
-    iconOnly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    buttonClasses() {
-      return [this.colorClass, this.sizeClass];
-    },
-    colorClass() {
-      if (this.isDisabled) {
-        return 'bg-ash-200 text-ash-600 cursor-not-allowed';
-      }
-      if (this.colorScheme === 'primary') {
-        if (this.variant === 'outline') {
-          return 'text-primary-800 border  border-primary-400 hover:text-primary-600 active:text-primary-600 focus:ring focus:ring-offset-1 focus:ring-primary-400';
-        }
-        if (this.variant === 'ghost') {
-          return 'text-primary-800 hover:text-primary-600 active:text-primary-600 focus:ring focus:ring-offset-1 focus:ring-primary-400';
-        }
-        return 'bg-primary-600 border-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
-      }
-      if (this.colorScheme === 'secondary') {
-        return 'bg-ash-100 text-ash-900 hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
-      }
-      if (this.colorScheme === 'danger') {
-        return 'bg-ruby-600 text-white hover:bg-ruby-700 active:bg-ruby-700 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
-      }
-      return 'bg-primary-500 text-white';
-    },
-    sizeClass() {
-      if (this.size === 'medium') {
-        return 'px-3 py-2 text-sm';
-      }
-      return 'px-4 py-2.5 text';
-    },
-    iconSize() {
-      switch (this.size) {
-        case 'medium':
-          return 16;
-        case 'large':
-          return 18;
+<script setup>
+import { computed, defineProps } from 'vue';
 
-        default:
-          return 16;
-      }
-    },
-    showDarkSpinner() {
-      return (
-        this.colorScheme === 'secondary' ||
-        this.variant === 'clear' ||
-        this.variant === 'link' ||
-        this.variant === 'hollow'
-      );
-    },
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'submit',
   },
-  methods: {
-    handleClick(evt) {
-      this.$emit('click', evt);
-    },
+  variant: {
+    type: String,
+    default: '',
   },
+  size: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  colorScheme: {
+    type: String,
+    default: 'primary',
+  },
+  classNames: {
+    type: [String, Object],
+    default: '',
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  rightIcon: {
+    type: Boolean,
+    default: false,
+  },
+  iconOnly: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(['click']);
+
+const colorClass = computed(() => {
+  if (props.isDisabled) {
+    return 'bg-ash-200 text-ash-600 cursor-not-allowed';
+  }
+  if (props.colorScheme === 'primary') {
+    if (props.variant === 'outline') {
+      return 'text-primary-800 border  border-primary-400 hover:text-primary-600 active:text-primary-600 focus:ring focus:ring-offset-1 focus:ring-primary-400';
+    }
+    if (props.variant === 'ghost') {
+      return 'text-primary-800 hover:text-primary-600 active:text-primary-600 focus:ring focus:ring-offset-1 focus:ring-primary-400';
+    }
+    return 'bg-primary-600 border-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
+  }
+  if (props.colorScheme === 'secondary') {
+    return 'bg-ash-100 text-ash-900 hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
+  }
+  if (props.colorScheme === 'danger') {
+    return 'bg-ruby-600 text-white hover:bg-ruby-700 active:bg-ruby-700 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
+  }
+  return 'bg-primary-500 text-white';
+});
+
+const sizeClass = computed(() => {
+  if (props.size === 'medium') {
+    return 'px-3 py-2 text-sm';
+  }
+  return 'px-4 py-2.5 text';
+});
+
+const iconSize = computed(() => {
+  switch (props.size) {
+    case 'medium':
+      return 16;
+    case 'large':
+      return 18;
+
+    default:
+      return 16;
+  }
+});
+
+const handleClick = () => {
+  emits('click');
 };
+
+const buttonClasses = computed(() => [
+  colorClass.value,
+  sizeClass.value,
+  props.classNames,
+]);
 </script>