add disabled button class and loading right prop

resources/scripts/components/base/BaseButton.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
+
 const props = defineProps({
   contentLoading: {
     type: Boolean,
@@ -9,7 +10,7 @@ const props = defineProps({
   defaultClass: {
     type: String,
     default:
-      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
+      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
   },
   tag: {
     type: String,
@@ -27,6 +28,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  loadingRight: {
+    type: Boolean,
+    default: false,
+  },
   size: {
     type: String,
     default: 'md',
@@ -81,17 +86,17 @@ const placeHolderSize = computed(() => {
 
 const variantClass = computed(() => {
   return {
-    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
+    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 dark:bg-primary-500 dark:hover:bg-primary-600':
       props.variant === 'primary',
     'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
       props.variant === 'secondary',
-    'border-transparent  border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-200 shadow-inner focus:ring-primary-500':
+    'border-transparent border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-100 shadow-inner focus:ring-primary-500 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-transparent dark:hover:text-primary-500 dark:hover:border-primary-500':
       props.variant == 'primary-outline',
-    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0':
+    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-900':
       props.variant == 'white',
     'border-transparent shadow-sm text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
       props.variant === 'danger',
-    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0':
+    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0 dark:bg-gray-600 dark:text-white dark:hover:bg-opacity-60':
       props.variant === 'gray',
   }
 })
@@ -124,6 +129,13 @@ const iconRightClass = computed(() => {
     'ml-3 -mr-1 h-5 w-5': props.size === 'lg' || props.size === 'xl',
   }
 })
+
+const buttonDisabledClass = computed(() => {
+  if (props.disabled || props.loading)
+    return 'cursor-not-allowed bg-opacity-70 dark:!bg-opacity-40 hover:!bg-opacity-70 pointer-event-none'
+
+  return ''
+})
 </script>
 
 <template>
@@ -141,15 +153,17 @@ const iconRightClass = computed(() => {
   <BaseCustomTag
     v-else
     :tag="tag"
-    :disabled="disabled"
-    :class="[defaultClass, sizeClass, variantClass, roundedClass]"
+    :disabled="disabled || loading"
+    :class="[defaultClass, sizeClass, variantClass, roundedClass, buttonDisabledClass]"
   >
-    <SpinnerIcon v-if="loading" :class="[iconLeftClass, iconVariantClass]" />
+    <SpinnerIcon v-if="loading && !loadingRight" :class="[iconLeftClass, iconVariantClass]" />
 
-    <slot v-else name="left" :class="iconLeftClass"></slot>
+    <slot v-else name="left" :class="iconLeftClass" />
 
     <slot />
 
-    <slot name="right" :class="[iconRightClass, iconVariantClass]"></slot>
+    <SpinnerIcon v-if="loading && loadingRight" :class="[iconRightClass, iconVariantClass]" />
+
+    <slot v-else name="right" :class="[iconRightClass, iconVariantClass]" />
   </BaseCustomTag>
 </template>

resources/scripts/components/base/BaseSwitch.vue

@@ -7,7 +7,7 @@
 
       <Switch
         v-model="enabled"
-        :class="enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-900'"
+        :class="enabled ? 'bg-primary-500' : 'bg-gray-300'"
         class="
           relative
           inline-flex
@@ -21,11 +21,7 @@
         v-bind="$attrs"
       >
         <span
-          :class="
-            enabled
-              ? 'translate-x-6 dark:bg-white'
-              : 'translate-x-1 dark:bg-gray-500'
-          "
+          :class="enabled ? 'translate-x-6' : 'translate-x-1'"
           class="
             inline-block
             w-4

resources/scripts/components/base/BaseSwitchSection.vue

@@ -5,12 +5,12 @@
     <div class="flex flex-col">
       <SwitchLabel
         as="p"
-        class="p-0 mb-1 text-sm leading-snug text-black font-medium dark:text-white"
+        class="p-0 mb-1 text-sm leading-snug text-black font-medium"
         passive
       >
         {{ title }}
       </SwitchLabel>
-      <SwitchDescription class="text-sm text-gray-500 dark:text-gray-400">
+      <SwitchDescription class="text-sm text-gray-500">
         {{ description }}
       </SwitchDescription>
     </div>
@@ -18,7 +18,7 @@
       :disabled="disabled"
       :model-value="modelValue"
       :class="[
-        modelValue ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-900',
+        modelValue ? 'bg-primary-500' : 'bg-gray-200',
         'ml-4 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
       ]"
       @update:modelValue="onUpdate"
@@ -26,7 +26,7 @@
       <span
         aria-hidden="true"
         :class="[
-          modelValue ? 'translate-x-5 dark:bg-white' : 'translate-x-0 dark:bg-gray-500',
+          modelValue ? 'translate-x-5' : 'translate-x-0',
           'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
         ]"
       />