feat: button loading

src/components/Button/Button.vue

@@ -1,16 +1,30 @@
 <template>
   <button type="button" :class="wrapperClasses" :disabled="disabled">
-    <div v-if="$slots.prefix || loadingPrefix" class="mr-2"> <!--automatically add mr class if slot provided or loading -->
-      <spinner v-if="loadingPrefix" />
+
+    <div v-if="!isOutlineGradient && ($slots.prefix || loadingPrefix)" class="mr-2"> <!--automatically add mr class if slot provided or loading -->
+      <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingPrefix" />
       <slot name="prefix" v-else />
     </div>
+
     <span :class="spanClasses">
+      <div v-if="isOutlineGradient && ($slots.prefix || loadingPrefix)" class="mr-2"> <!--if outline gradient - need to place slots inside span -->
+        <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingPrefix" />
+        <slot name="prefix" v-else />
+      </div>
+
       <slot/>
+
+      <div v-if="isOutlineGradient && ($slots.suffix || loadingSuffix)" class="ml-2"> <!--if outline gradient - need to place slots inside span -->
+        <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingSuffix" />
+        <slot name="suffix" v-else />
+      </div>
     </span>
-    <div v-if="$slots.suffix || loadingSuffix" class="ml-2"> <!--automatically add ml class if slot provided or loading -->
-      <spinner v-if="loadingSuffix" />
+
+    <div v-if="!isOutlineGradient && ($slots.suffix || loadingSuffix)" class="ml-2"> <!--automatically add ml class if slot provided or loading -->
+      <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingSuffix" />
       <slot name="suffix" v-else />
     </div>
+
   </button>
 </template>
 <script lang="ts" setup>
@@ -18,6 +32,7 @@ import { computed } from 'vue'
 import type { PropType } from 'vue'
 import Spinner from '../Spinner/Spinner.vue'
 import { useButtonClasses } from './useButtonClasses'
+import { useButtonSpinner } from './useButtonSpinner'
 
 export type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
 export type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
@@ -69,9 +84,12 @@ const props = defineProps({
   },
 })
 
+const isOutlineGradient = computed(() => props.outline && props.gradient)
+
 const loadingPrefix = computed(() => props.loading && props.loadingPosition === 'prefix')
 const loadingSuffix = computed(() => props.loading && props.loadingPosition === 'suffix')
 
 const { wrapperClasses, spanClasses } = useButtonClasses(props)
+const { color: spinnerColor, size: spinnerSize } = useButtonSpinner(props)
 
 </script>

src/components/Button/useButtonClasses.ts

@@ -157,6 +157,7 @@ export type UseButtonClassesProps = {
 }
 
 const simpleGradients = ['blue', 'green', 'cyan', 'teal', 'lime', 'red', 'pink', 'purple']
+const alternativeColors = ['alternative', 'light']
 
 export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses: Ref<string>, spanClasses: Ref<string> } {
   const slots = useSlots()
@@ -180,7 +181,9 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
 
         if(!props.disabled)
           hoverClass = buttonOutlineGradientClasses.hover[props.gradient as unknown as keyof typeof buttonOutlineGradientClasses.hover]
-      } // TODO: log for invalid props or fallback
+      } else {
+        console.warn(`cannot use outline prop with "${props.gradient}" gradient`) // TODO: prettify
+      }
 
 
     } else if (isGradient) { // JUST GRADIENT
@@ -191,12 +194,14 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
 
 
     } else if (isColor && isOutline) { // COLOR AND OUTLINE
-      if (!['alternative', 'light'].includes(props.color)) {
+      if (!alternativeColors.includes(props.color)) {
         backgroundClass = buttonOutlineColorClasses.default[props.color as unknown as keyof typeof buttonOutlineColorClasses.default]
 
         if(!props.disabled)
           hoverClass = buttonOutlineColorClasses.hover[props.color as unknown as keyof typeof buttonOutlineColorClasses.hover]
-      } // TODO: log for invalid props or fallback
+      } else {
+        console.warn(`cannot use outline prop with "${props.color}" color`) // TODO: prettify
+      }
 
 
     } else { // JUST COLOR
@@ -225,7 +230,7 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
       shadowClass,
       props.pill ? '!rounded-full' : '',
       props.disabled ? 'cursor-not-allowed opacity-50' : '',
-      isGradient && isOutline ? 'p-0.5' : sizeClasses.value,
+      (isGradient && isOutline) ? 'p-0.5' : sizeClasses.value,
       (slots.prefix || slots.suffix || props.loading) ? 'inline-flex items-center' : '',
     )
   })
@@ -233,7 +238,7 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
   const spanClasses = computed(() => {
     if (!!props.gradient && props.outline) { // ONLY FOR GRADIENT OUTLINE BUTTON
         return classNames(
-            'relative bg-white dark:bg-gray-900 rounded-md',
+            'relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center',
             sizeClasses.value,
             !props.disabled ? 'group-hover:bg-opacity-0 transition-all ease-in duration-75' : '',
         )

src/components/Button/useButtonSpinner.ts

@@ -0,0 +1,44 @@
+import type {ButtonGradient, ButtonSize, ButtonVariant} from './Button.vue'
+import type {SpinnerColor, SpinnerSize} from '../Spinner/Spinner.vue'
+import type {Ref} from 'vue'
+import {computed} from 'vue'
+
+export type UseButtonSpinnerProps = {
+    outline: boolean
+    size: ButtonSize
+    color: ButtonVariant
+    gradient: ButtonGradient | null
+}
+
+export function useButtonSpinner(props: UseButtonSpinnerProps): { size: Ref<SpinnerSize>, color: Ref<SpinnerColor> } {
+    const btnSizeSpinnerSizeMap: Record<ButtonSize, SpinnerSize> = {
+        lg: '5', md: '4', sm: '3', xl: '6', xs: '2.5',
+    }
+    const size = computed<SpinnerSize>(() => {
+        return btnSizeSpinnerSizeMap[props.size]
+    })
+    const color = computed<SpinnerColor>(() => {
+
+        if(!props.outline) return 'white'
+
+        if(props.gradient) {
+            if(props.gradient.includes('purple')) return 'purple'
+            else if(props.gradient.includes('blue')) return 'blue'
+            else if(props.gradient.includes('pink')) return 'pink'
+            else if(props.gradient.includes('red')) return 'red'
+            return 'white'
+        }
+
+        if(['alternative', 'dark', 'light'].includes(props.color)) {
+            return 'white'
+        } else if(props.color === 'default') {
+            return 'blue'
+        }
+        return props.color as SpinnerColor
+    })
+
+    return {
+        size,
+        color,
+    }
+}