feat: button loading

docs/guide/button/button.md

@@ -303,12 +303,28 @@ import { Button } from 'flowbite-vue'
 const loading = ref(false)
 </script>
 <template>
+  <Button gradient="purple-blue" outline :disabled="loading" :loading="loading" @click="loading = !loading" size="xs">
+    Click me
+  </Button>
+  <Button gradient="red-yellow" :loading="loading" @click="loading = !loading" size="sm">
+    Click me
+  </Button>
   <Button outline color="default" loading-position="suffix" :loading="loading" @click="loading = !loading">
     Click me
     <template #suffix>
-      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd"
+              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+              clip-rule="evenodd"></path>
+      </svg>
     </template>
   </Button>
+  <Button gradient="green-blue" :loading="loading" @click="loading = !loading" size="lg">
+    Click me
+  </Button>
+  <Button gradient="pink" :loading="loading" @click="loading = !loading" size="xl">
+    Click me
+  </Button>
 </template>
 ```
 

docs/guide/button/examples/ButtonLoadingExample.vue

@@ -1,15 +1,32 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="inline-flex items-center gap-2 flex-wrap">
+    <Button gradient="purple-blue" outline :disabled="loading" :loading="loading" @click="loading = !loading" size="xs">
+      Click me
+    </Button>
+    <Button gradient="red-yellow" :loading="loading" @click="loading = !loading" size="sm">
+      Click me
+    </Button>
     <Button outline color="default" loading-position="suffix" :loading="loading" @click="loading = !loading">
       Click me
       <template #suffix>
-        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd"
+                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                clip-rule="evenodd"></path>
+        </svg>
       </template>
     </Button>
+    <Button gradient="green-blue" :loading="loading" @click="loading = !loading" size="lg">
+      Click me
+    </Button>
+    <Button gradient="pink" :loading="loading" @click="loading = !loading" size="xl">
+      Click me
+    </Button>
   </div>
 </template>
 <script lang="ts" setup>
 import {ref} from 'vue'
 import {Button} from '../../../../src/index'
+
 const loading = ref(false)
 </script>

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/>
-    </span>
+
-    <div v-if="$slots.suffix || loadingSuffix" class="ml-2"> <!--automatically add ml class if slot provided or loading -->
+      <div v-if="isOutlineGradient && ($slots.suffix || loadingSuffix)" class="ml-2"> <!--if outline gradient - need to place slots inside span -->
-      <spinner v-if="loadingSuffix" />
+        <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingSuffix" />
         <slot name="suffix" v-else />
       </div>
+    </span>
+
+    <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,
+    }
+}

src/components/Spinner/Spinner.vue

@@ -5,47 +5,22 @@
   </svg>
 </template>
 <script lang="ts" setup>
-import { computed } from 'vue'
 import type { PropType } from 'vue'
+import { useSpinnerClasses } from './useSpinnerClasses'
 
 export type SpinnerSize = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
+export type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white'
 
 const props = defineProps({
   size: {
     type: String as PropType<SpinnerSize>, // any string for w-${size} and h-${size} tailwind classes, TODO: add all classes
     default: '4',
   },
+  color: {
+    type: String as PropType<SpinnerColor>, // any string for w-${size} and h-${size} tailwind classes, TODO: add all classes
+    default: 'blue',
+  },
 })
-const sizes: Record<SpinnerSize, string> = {
-  '0': 'w-0 h-0',
-  '0.5': 'w-0.5 h-0.5',
-  '1': 'w-1 h-1',
-  '1.5': 'w-1.5 h-1.5',
-  '10': 'w-10 h-10',
-  '11': 'w-11 h-11',
-  '12': 'w-12 h-12',
-  '2': 'w-2 h-2',
-  '2.5': 'w-2.5 h-2.5',
-  '3': 'w-3 h-3',
-  '4': 'w-4 h-4',
-  '5': 'w-5 h-5',
-  '6': 'w-6 h-6',
-  '7': 'w-7 h-7',
-  '8': 'w-8 h-8',
-  '9': 'w-9 h-9',
-  px: 'w-px h-px',
-}
-const sizeClasses = computed(() => {
-  return sizes[props.size]
-})
-const colorClasses = computed(() => 'text-gray-200 dark:text-gray-600 fill-blue-600')
-const animateClasses = computed(() => 'animate-spin')
 
-const spinnerClasses = computed(() => {
+const { spinnerClasses } = useSpinnerClasses(props)
-  return [
-      sizeClasses.value,
-      colorClasses.value,
-      animateClasses.value,
-  ]
-})
 </script>

src/components/Spinner/useSpinnerClasses.ts

@@ -0,0 +1,61 @@
+import type { SpinnerColor, SpinnerSize } from './Spinner.vue'
+import { computed } from 'vue'
+import type { Ref } from 'vue'
+import classNames from 'classnames'
+
+const sizes: Record<SpinnerSize, string> = {
+    '0': 'w-0 h-0',
+    '0.5': 'w-0.5 h-0.5',
+    '1': 'w-1 h-1',
+    '1.5': 'w-1.5 h-1.5',
+    '10': 'w-10 h-10',
+    '11': 'w-11 h-11',
+    '12': 'w-12 h-12',
+    '2': 'w-2 h-2',
+    '2.5': 'w-2.5 h-2.5',
+    '3': 'w-3 h-3',
+    '4': 'w-4 h-4',
+    '5': 'w-5 h-5',
+    '6': 'w-6 h-6',
+    '7': 'w-7 h-7',
+    '8': 'w-8 h-8',
+    '9': 'w-9 h-9',
+    px: 'w-px h-px',
+}
+
+const colors: Record<SpinnerColor, string> = {
+    blue: 'fill-blue-600',
+    gray: 'fill-gray-600 dark:fill-gray-300',
+    green: 'fill-green-500',
+    pink: 'fill-pink-600',
+    purple: 'fill-purple-600',
+    red: 'fill-red-600',
+    yellow: 'fill-yellow-400',
+    white: 'fill-white',
+}
+
+export type UseSpinnerClassesProps = {
+    size: SpinnerSize
+    color: SpinnerColor
+}
+
+export function useSpinnerClasses(props: UseSpinnerClassesProps): { spinnerClasses: Ref<string> } {
+
+    const sizeClasses = computed(() => sizes[props.size])
+    const colorClasses = computed(() => colors[props.color])
+    const bgColorClasses = computed(() => 'text-gray-200 dark:text-gray-600')
+    const animateClasses = computed(() => 'animate-spin')
+
+    const spinnerClasses = computed(() => {
+        return classNames(
+            sizeClasses.value,
+            bgColorClasses.value,
+            colorClasses.value,
+            animateClasses.value,
+        )
+    })
+
+    return {
+        spinnerClasses,
+    }
+}