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/base-table/BaseTable.vue

@@ -7,18 +7,11 @@
             relative
             overflow-hidden
             bg-white
-            border-b
-            border-gray-200
+            border-b border-gray-200
             shadow
             sm:rounded-lg
-            dark:shadow-glass
-            dark:border
-            dark:border-white/10
-            dark:bg-gray-800/70
           "
         >
-          <BaseDarkHighlight v-if="darkHighlight" class="z-[-1]" />
-
           <slot name="header" />
           <table :class="tableClass">
             <thead :class="theadClass">
@@ -58,11 +51,7 @@
               <tr
                 v-for="placeRow in placeholderCount"
                 :key="placeRow"
-                :class="
-                  placeRow % 2 === 0
-                    ? 'bg-white dark:bg-gray-800'
-                    : 'bg-gray-50 dark:bg-gray-800'
-                "
+                :class="placeRow % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
               >
                 <td
                   v-for="column in columns"
@@ -86,11 +75,7 @@
               <tr
                 v-for="(row, index) in sortedRows"
                 :key="index"
-                :class="
-                  index % 2 === 0
-                    ? 'bg-white dark:bg-transparent'
-                    : 'bg-gray-50 dark:bg-gray-700/20 dark:border-y dark:border-gray-600'
-                "
+                :class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
               >
                 <td
                   v-for="column in columns"
@@ -118,10 +103,7 @@
               justify-center
               w-full
               h-full
-              bg-white
-              bg-opacity-60
-              dark:bg-gray-700
-              dark:bg-opacity-60
+              bg-white bg-opacity-60
             "
           >
             <SpinnerIcon class="w-10 h-10 text-primary-500" />
@@ -181,12 +163,9 @@ const props = defineProps({
   sortOrder: { type: String, default: '' },
   tableClass: {
     type: String,
-    default: 'min-w-full divide-y divide-gray-200 dark:divide-gray-600',
-  },
-  theadClass: {
-    type: String,
-    default: 'bg-gray-50 dark:bg-gray-800 dark:text-white',
+    default: 'min-w-full divide-y divide-gray-200',
   },
+  theadClass: { type: String, default: 'bg-gray-50' },
   tbodyClass: { type: String, default: '' },
   noResultsMessage: {
     type: String,
@@ -207,10 +186,6 @@ const props = defineProps({
     type: Number,
     default: 3,
   },
-  darkHighlight: {
-    type: Boolean,
-    default: false,
-  },
 })
 
 let rows = reactive([])
@@ -261,7 +236,7 @@ function getColumn(columnName) {
 
 function getThClass(column) {
   let classes =
-    'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-white'
+    'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'
 
   if (column.defaultThClass) {
     classes = column.defaultThClass
@@ -281,8 +256,7 @@ function getThClass(column) {
 }
 
 function getTdClass(column) {
-  let classes =
-    'px-6 py-4 text-sm text-gray-500 whitespace-nowrap dark:text-gray-300'
+  let classes = 'px-6 py-4 text-sm text-gray-500 whitespace-nowrap'
 
   if (column.defaultTdClass) {
     classes = column.defaultTdClass
@@ -335,7 +309,6 @@ function changeSorting(column) {
   }
 
   if (!usesLocalData.value) {
-    if (pagination.value) pagination.value.currentPage = 1
     mapDataToRows()
   }
 }
@@ -353,9 +326,7 @@ async function pageChange(page) {
   await mapDataToRows()
 }
 
-async function refresh(isPreservePage = false) {
-  if (pagination.value && !isPreservePage) pagination.value.currentPage = 1
-
+async function refresh() {
   await mapDataToRows()
 }