remove class from props

blumilksoftware · Sep 11, 2024 · 330197e · 330197e
1 parent b911bda
commit 330197e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git 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
@@ -7,15 +7,14 @@ const props = withDefaults(defineProps<{
   small?: boolean
   disabled?: boolean
   text?: boolean
-  class?: string
   buttonClass?: string
   href: string
   method?: 'post' | 'get' | 'put' | 'patch' | 'delete'
   data?: any
   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
@@ -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
@@ -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">