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

fix: Fixed error with imported Button without FlowbiteThemable

Browse Source
This commit is contained in:
Ilya Artamonov
2023-09-13 20:01:23 +03:00
parent 44c2f764f8
commit c6055bc417
4 changed files with 59 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/.vitepress/config.mts
View File

@@ -38,7 +38,6 @@ function getComponents() {
{ text: 'Card', link: '/components/card.md' }, { text: 'Card', link: '/components/card.md' },
{ text: 'Carousel', link: '/components/carousel' }, { text: 'Carousel', link: '/components/carousel' },
{ text: 'Dropdown', link: '/components/dropdown' }, { text: 'Dropdown', link: '/components/dropdown' },
{ text: 'Footer', link: '/components/footer' },
{ text: 'Pagination', link: '/components/pagination' }, { text: 'Pagination', link: '/components/pagination' },
{ text: 'Progress', link: '/components/progress' }, { text: 'Progress', link: '/components/progress' },
{ text: 'Rating', link: '/components/rating' }, { text: 'Rating', link: '/components/rating' },

6
docs/components/flowbiteThemable/flowbiteThemable.md
View File

@@ -10,6 +10,10 @@ import FlowbiteThemableButtonExample from './examples/button/FlowbiteThemableBut
You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.) You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.)
:::warning
WIP, Do not use it in production
:::
## Tabs ## Tabs
```vue ```vue
@@ -105,4 +109,4 @@ const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</template> </template>
``` ```
<FlowbiteThemableButtonExample /> <FlowbiteThemableButtonExample />

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

@@ -1,40 +1,40 @@
<template> <template>
<flowbite-themable-child tag="button" :apply="appliableTheme" :class="wrapperClasses" :disabled="disabled"> <button :class="wrapperClasses">
<div v-if="!isOutlineGradient && ($slots.prefix || loadingPrefix)" class="mr-2"> <!--automatically add mr class if slot provided or loading --> <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" /> <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingPrefix" />
<slot name="prefix" v-else /> <slot name="prefix" v-else />
</div> </div>
<span :class="spanClasses"> <span :class="spanClasses">
<div v-if="isOutlineGradient && ($slots.prefix || loadingPrefix)" class="mr-2"> <!--if outline gradient - need to place slots inside span --> <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" /> <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingPrefix" />
<slot name="prefix" v-else /> <slot name="prefix" v-else />
</div> </div>
<slot/> <slot />
<div v-if="isOutlineGradient && ($slots.suffix || loadingSuffix)" class="ml-2"> <!--if outline gradient - need to place slots inside span --> <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" /> <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingSuffix" />
<slot name="suffix" v-else /> <slot name="suffix" v-else />
</div> </div>
</span> </span>
<div v-if="!isOutlineGradient && ($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">
<!--automatically add ml class if slot provided or loading -->
<spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingSuffix" /> <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingSuffix" />
<slot name="suffix" v-else /> <slot name="suffix" v-else />
</div> </div>
</flowbite-themable-child> </button>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, toRefs } from 'vue' import { computed, toRefs, type PropType } from 'vue'
import type { PropType } from 'vue'
import Spinner from '../Spinner/Spinner.vue' import Spinner from '../Spinner/Spinner.vue'
import { useButtonClasses } from './composables/useButtonClasses' import { useButtonClasses } from './composables/useButtonClasses'
import { useButtonSpinner } from './composables/useButtonSpinner' import { useButtonSpinner } from './composables/useButtonSpinner'
import FlowbiteThemableChild from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types' import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
import type { ThemableChildrenApply } from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/types'
const props = defineProps({ const props = defineProps({
color: { color: {
type: String as PropType<ButtonVariant>, type: String as PropType<ButtonVariant>,
@@ -85,10 +85,4 @@ const loadingSuffix = computed(() => props.loading && props.loadingPosition ===
const { wrapperClasses, spanClasses } = useButtonClasses(toRefs(props)) const { wrapperClasses, spanClasses } = useButtonClasses(toRefs(props))
const { color: spinnerColor, size: spinnerSize } = useButtonSpinner(toRefs(props)) const { color: spinnerColor, size: spinnerSize } = useButtonSpinner(toRefs(props))
const appliableTheme = computed<ThemableChildrenApply[]>(() => {
if(['alternative', 'light'].includes(props.color)) return []
return ['background', 'hover', 'focus']
})
</script> </script>

86
src/components/Button/composables/useButtonClasses.ts
View File

@@ -2,17 +2,18 @@ import type { Ref } from 'vue'
import { computed, useSlots } from 'vue' import { computed, useSlots } from 'vue'
import classNames from 'classnames' import classNames from 'classnames'
import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types' import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types'
import { useFlowbiteThemable } from '../../utils/FlowbiteThemable/composables/useFlowbiteThemable'
export type ButtonClassMap<T extends string> = { hover: Record<T, string>, default: Record<T, string> } export type ButtonClassMap<T extends string> = { hover: Record<T, string>; default: Record<T, string> }
const buttonColorClasses: ButtonClassMap<ButtonVariant> = { const buttonColorClasses: ButtonClassMap<ButtonVariant> = {
default: { default: {
default: 'text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800', default: 'text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800',
blue: 'text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800', blue: 'text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800',
alternative: 'font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600', alternative:
'font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600',
dark: 'text-white bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:focus:ring-gray-700 dark:border-gray-700', dark: 'text-white bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:focus:ring-gray-700 dark:border-gray-700',
light: 'text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:focus:ring-gray-700', light:
'text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:focus:ring-gray-700',
green: 'focus:outline-none text-white bg-green-700 focus:ring-4 focus:ring-green-300 font-medium rounded-lg dark:bg-green-600 dark:focus:ring-green-800', green: 'focus:outline-none text-white bg-green-700 focus:ring-4 focus:ring-green-300 font-medium rounded-lg dark:bg-green-600 dark:focus:ring-green-800',
red: 'focus:outline-none text-white bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:focus:ring-red-900', red: 'focus:outline-none text-white bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:focus:ring-red-900',
yellow: 'focus:outline-none text-white bg-yellow-400 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900', yellow: 'focus:outline-none text-white bg-yellow-400 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900',
@@ -36,13 +37,17 @@ const buttonColorClasses: ButtonClassMap<ButtonVariant> = {
const buttonOutlineColorClasses: ButtonClassMap<Exclude<ButtonVariant, 'light' | 'alternative'>> = { const buttonOutlineColorClasses: ButtonClassMap<Exclude<ButtonVariant, 'light' | 'alternative'>> = {
default: { default: {
dark: 'text-gray-900 border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm text-center dark:border-gray-600 dark:text-gray-400 dark:focus:ring-gray-800', dark: 'text-gray-900 border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm text-center dark:border-gray-600 dark:text-gray-400 dark:focus:ring-gray-800',
default: 'text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800', default:
'text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800',
blue: 'text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800', blue: 'text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800',
green: 'text-green-700 border border-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm text-center dark:border-green-500 dark:text-green-500 dark:focus:ring-green-800', green:
purple: 'text-purple-700 border border-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm text-center dark:border-purple-400 dark:text-purple-400 dark:focus:ring-purple-900', 'text-green-700 border border-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm text-center dark:border-green-500 dark:text-green-500 dark:focus:ring-green-800',
purple:
'text-purple-700 border border-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm text-center dark:border-purple-400 dark:text-purple-400 dark:focus:ring-purple-900',
pink: 'text-pink-700 border border-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 font-medium rounded-lg text-sm text-center dark:border-pink-400 dark:text-pink-400 dark:focus:ring-pink-900', pink: 'text-pink-700 border border-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 font-medium rounded-lg text-sm text-center dark:border-pink-400 dark:text-pink-400 dark:focus:ring-pink-900',
red: 'text-red-700 border border-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm text-center dark:border-red-500 dark:text-red-500 dark:focus:ring-red-900', red: 'text-red-700 border border-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm text-center dark:border-red-500 dark:text-red-500 dark:focus:ring-red-900',
yellow: 'text-yellow-400 border border-yellow-400 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm text-center dark:border-yellow-300 dark:text-yellow-300 dark:focus:ring-yellow-900', yellow:
'text-yellow-400 border border-yellow-400 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm text-center dark:border-yellow-300 dark:text-yellow-300 dark:focus:ring-yellow-900',
}, },
hover: { hover: {
dark: 'hover:text-white hover:bg-gray-900 dark:hover:text-white dark:hover:bg-gray-600', dark: 'hover:text-white hover:bg-gray-900 dark:hover:text-white dark:hover:bg-gray-600',
@@ -56,7 +61,6 @@ const buttonOutlineColorClasses: ButtonClassMap<Exclude<ButtonVariant, 'light' |
}, },
} }
const buttonGradientClasses: ButtonClassMap<ButtonGradient> = { const buttonGradientClasses: ButtonClassMap<ButtonGradient> = {
hover: { hover: {
'cyan-blue': 'hover:bg-gradient-to-bl', 'cyan-blue': 'hover:bg-gradient-to-bl',
@@ -97,19 +101,19 @@ const buttonGradientClasses: ButtonClassMap<ButtonGradient> = {
const buttonOutlineGradientClasses: ButtonClassMap<ButtonDuotoneGradient> = { const buttonOutlineGradientClasses: ButtonClassMap<ButtonDuotoneGradient> = {
default: { default: {
'cyan-blue': 'cyan-blue':
'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800', 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800',
'green-blue': 'green-blue':
'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800', 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800',
'pink-orange': 'pink-orange':
'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800', 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800',
'purple-blue': 'purple-blue':
'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800', 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800',
'purple-pink': 'purple-pink':
'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800', 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800',
'red-yellow': 'red-yellow':
'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 dark:text-white focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400', 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 dark:text-white focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400',
'teal-lime': 'teal-lime':
'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 dark:text-white focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-lime-800', 'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 dark:text-white focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-lime-800',
}, },
hover: { hover: {
'cyan-blue': 'group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white', 'cyan-blue': 'group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white',
@@ -164,7 +168,7 @@ export type UseButtonClassesProps = {
const simpleGradients = ['blue', 'green', 'cyan', 'teal', 'lime', 'red', 'pink', 'purple'] const simpleGradients = ['blue', 'green', 'cyan', 'teal', 'lime', 'red', 'pink', 'purple']
const alternativeColors = ['alternative', 'light'] const alternativeColors = ['alternative', 'light']
export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses: Ref<string>, spanClasses: Ref<string> } { export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses: Ref<string>; spanClasses: Ref<string> } {
const slots = useSlots() const slots = useSlots()
const sizeClasses = computed(() => { const sizeClasses = computed(() => {
@@ -177,48 +181,41 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
const isColor = !!props.color.value const isColor = !!props.color.value
const isOutline = props.outline.value const isOutline = props.outline.value
let hoverClass = '' let hoverClass = ''
let backgroundClass = '' let backgroundClass = ''
if (isGradient && isOutline) { // GRADIENT AND OUTLINE if (isGradient && isOutline) {
// GRADIENT AND OUTLINE
if (!simpleGradients.includes(props.gradient.value!)) { if (!simpleGradients.includes(props.gradient.value!)) {
backgroundClass = buttonOutlineGradientClasses.default[props.gradient.value as unknown as keyof typeof buttonOutlineGradientClasses.default] backgroundClass = buttonOutlineGradientClasses.default[props.gradient.value as unknown as keyof typeof buttonOutlineGradientClasses.default]
if(!props.disabled.value) if (!props.disabled.value) hoverClass = buttonOutlineGradientClasses.hover[props.gradient.value as unknown as keyof typeof buttonOutlineGradientClasses.hover]
hoverClass = buttonOutlineGradientClasses.hover[props.gradient.value as unknown as keyof typeof buttonOutlineGradientClasses.hover]
} else { } else {
console.warn(`cannot use outline prop with "${props.gradient.value}" gradient`) // TODO: prettify console.warn(`cannot use outline prop with "${props.gradient.value}" gradient`) // TODO: prettify
} }
} else if (isGradient) {
// JUST GRADIENT
} else if (isGradient) { // JUST GRADIENT
backgroundClass = buttonGradientClasses.default[props.gradient.value!] backgroundClass = buttonGradientClasses.default[props.gradient.value!]
if(!props.disabled.value) if (!props.disabled.value) hoverClass = buttonGradientClasses.hover[props.gradient.value!]
hoverClass = buttonGradientClasses.hover[props.gradient.value!] } else if (isColor && isOutline) {
// COLOR AND OUTLINE
} else if (isColor && isOutline) { // COLOR AND OUTLINE
if (!alternativeColors.includes(props.color.value)) { if (!alternativeColors.includes(props.color.value)) {
const color = props.color.value const color = props.color.value
backgroundClass = buttonOutlineColorClasses.default[color as unknown as keyof typeof buttonOutlineColorClasses.default] backgroundClass = buttonOutlineColorClasses.default[color as unknown as keyof typeof buttonOutlineColorClasses.default]
if(!props.disabled.value) if (!props.disabled.value) hoverClass = buttonOutlineColorClasses.hover[color as unknown as keyof typeof buttonOutlineColorClasses.hover]
hoverClass = buttonOutlineColorClasses.hover[color as unknown as keyof typeof buttonOutlineColorClasses.hover]
} else { } else {
console.warn(`cannot use outline prop with "${props.color.value}" color`) // TODO: prettify console.warn(`cannot use outline prop with "${props.color.value}" color`) // TODO: prettify
} }
} else {
// JUST COLOR
} else { // JUST COLOR
const color = props.color.value const color = props.color.value
backgroundClass = buttonColorClasses.default[color as unknown as keyof typeof buttonColorClasses.default] backgroundClass = buttonColorClasses.default[color as unknown as keyof typeof buttonColorClasses.default]
if(!props.disabled.value) if (!props.disabled.value) hoverClass = buttonColorClasses.hover[color as unknown as keyof typeof buttonColorClasses.hover]
hoverClass = buttonColorClasses.hover[color as unknown as keyof typeof buttonColorClasses.hover]
} }
let shadowClass = '' let shadowClass = ''
@@ -240,18 +237,19 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
shadowClass, shadowClass,
props.pill.value ? '!rounded-full' : '', props.pill.value ? '!rounded-full' : '',
props.disabled.value ? 'cursor-not-allowed opacity-50' : '', props.disabled.value ? '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.value) ? 'inline-flex items-center' : '', slots.prefix || slots.suffix || props.loading.value ? 'inline-flex items-center' : '',
) )
}) })
const spanClasses = computed(() => { const spanClasses = computed(() => {
if (!!props.gradient.value && props.outline.value) { // ONLY FOR GRADIENT OUTLINE BUTTON if (!!props.gradient.value && props.outline.value) {
return classNames( // ONLY FOR GRADIENT OUTLINE BUTTON
'relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center', return classNames(
sizeClasses.value, 'relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center',
!props.disabled.value ? 'group-hover:bg-opacity-0 transition-all ease-in duration-75' : '', sizeClasses.value,
) !props.disabled.value ? 'group-hover:bg-opacity-0 transition-all ease-in duration-75' : '',
)
} }
return '' return ''
}) })