jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: button loading

Browse Source
This commit is contained in:
Alexandr
2022-07-01 16:27:47 +03:00
parent ec4bc3e0d7
commit 5834c29e34
7 changed files with 182 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/guide/button/button.md
View File

@@ -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>
```

25
docs/guide/button/examples/ButtonLoadingExample.vue
View File

@@ -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'
import {ref} from 'vue'
import {Button} from '../../../../src/index'
const loading = ref(false)
</script>

26
src/components/Button/Button.vue
View File

@@ -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>

15
src/components/Button/useButtonClasses.ts
View File

@@ -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' : '',
)

44
src/components/Button/useButtonSpinner.ts Normal file
View File

@@ -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,
}
}

39
src/components/Spinner/Spinner.vue
View File

@@ -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(() => {
return [
sizeClasses.value,
colorClasses.value,
animateClasses.value,
]
})
const { spinnerClasses } = useSpinnerClasses(props)
</script>

61
src/components/Spinner/useSpinnerClasses.ts Normal file
View File

@@ -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,
}
}