From 330197e2ecb20cbaada8c685ad22f5233a8e9a69 Mon Sep 17 00:00:00 2001
From: AmonDeShir <amonsir29@gmail.com>
Date: Wed, 11 Sep 2024 10:24:40 +0200
Subject: [PATCH] remove class from props

---
 resources/js/components/Common/Button.vue     | 17 +++++++++++++----
 resources/js/components/Common/FormButton.vue |  5 ++---
 resources/js/components/Common/LinkButton.vue |  8 +++++---
 resources/js/components/Common/MessageBox.vue |  2 +-
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/Common/Button.vue b/resources/js/components/Common/Button.vue
index 10ad62d0..f330cbe7 100644
--- a/resources/js/components/Common/Button.vue
+++ b/resources/js/components/Common/Button.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 
-const props = defineProps<{
+defineProps<{
   small?: boolean
   disabled?: boolean
   text?: boolean
-  class?: string
   type?: 'button' | 'submit' | 'reset' | undefined
 }>()
 
@@ -15,7 +14,12 @@ const emit = defineEmits(['click'])
   <button
     v-if="!disabled"
     class="font-semibold transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
-    :class="`${small ? 'rounded-md text-xs 2xs:text-sm py-2' : 'rounded-lg py-3'} ${text ? 'text-black hover:text-primary-800 px-0 py-0' : 'px-2 2xs:px-3 bg-primary text-white hover:bg-primary-600 shadow-sm'} ${props.class}`"
+    :class="{
+      'rounded-md text-xs 2xs:text-sm py-2': small,
+      'rounded-lg py-3': !small,
+      'text-black hover:text-primary-800 p-0': text,
+      'px-2 2xs:px-3 bg-primary text-white hover:bg-primary-600 shadow-sm': !text,
+    }"
     :type
     @click="emit('click')"
   >
@@ -26,7 +30,12 @@ const emit = defineEmits(['click'])
     v-else
     disabled
     class="font-semibold text-gray-500 cursor-not-allowed"
-    :class="`${small ? 'rounded-md text-xs 2xs:text-sm py-2' : 'rounded-lg py-3'} ${text ? 'px-0 py-0' : 'border border-gray-500 font-semibold px-2 2xs:px-3 '} ${props.class}`"
+    :class="{
+      'rounded-md text-xs 2xs:text-sm py-2': small,
+      'rounded-lg py-3': !small,
+      'p-0': text,
+      'border border-gray-500 font-semibold px-2 2xs:px-3': !text
+    }"
     :type
   >
     <slot />
diff --git a/resources/js/components/Common/FormButton.vue b/resources/js/components/Common/FormButton.vue
index 37c16595..0ddceb72 100644
--- a/resources/js/components/Common/FormButton.vue
+++ b/resources/js/components/Common/FormButton.vue
@@ -7,7 +7,6 @@ const props = withDefaults(defineProps<{
   small?: boolean
   disabled?: boolean
   text?: boolean
-  class?: string
   buttonClass?: string
   href: string
   method?: 'post' | 'get' | 'put' | 'patch' | 'delete'
@@ -15,7 +14,7 @@ const props = withDefaults(defineProps<{
   preserveState?: boolean
   preserveScroll?: boolean
   only?: string[]
-}>(), { method: 'get', class: '', options: undefined, data: undefined, only: undefined })
+}>(), { method: 'get', class: '', options: undefined, data: undefined, only: undefined, buttonClass: undefined })
 
 const processing = ref(false)
 const emit = defineEmits(['click', 'finish'])
@@ -34,7 +33,7 @@ function handleSubmit() {
 </script>
 
 <template>
-  <form :class="`${processing ? 'cursor-wait' : ''} ${props.class}`" @submit.prevent="handleSubmit">
+  <form :class="{'cursor-wait' : processing}" @submit.prevent="handleSubmit">
     <Button :disabled="disabled || processing" type="submit" :class="`${processing ? 'cursor-wait' : ''} ${props.buttonClass}`" :small="small" :text="text">
       <slot />
     </Button>
diff --git a/resources/js/components/Common/LinkButton.vue b/resources/js/components/Common/LinkButton.vue
index 4a499c9f..5a642e60 100644
--- a/resources/js/components/Common/LinkButton.vue
+++ b/resources/js/components/Common/LinkButton.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 
-const props = defineProps<{
+defineProps<{
     small?: boolean
-    class?: string
     href: string
   }>()
 </script>
@@ -11,7 +10,10 @@ const props = defineProps<{
   <a
     :href="href"
     class="bg-primary px-3 semibold text-white  font-semibold shadow-sm hover:bg-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
-    :class="`${small ? 'rounded-md text-sm py-2' : 'rounded-lg py-3'} ${props.class}`"
+    :class="{
+      'rounded-md text-sm py-2': small,
+      'rounded-lg py-3': !small
+    }"
   >
     <slot />
   </a>
diff --git a/resources/js/components/Common/MessageBox.vue b/resources/js/components/Common/MessageBox.vue
index 2b755cfc..57e15136 100644
--- a/resources/js/components/Common/MessageBox.vue
+++ b/resources/js/components/Common/MessageBox.vue
@@ -13,7 +13,7 @@ defineProps<MessageBoxProps>()
 </script>
 
 <template>
-  <Dialog :open="isOpen.value" class="relative z-50" @close="close">
+  <Dialog :open="isOpen" class="relative z-50" @close="close">
     <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
 
     <div class="fixed inset-0 flex w-screen items-center justify-center p-4">