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

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>