mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
97 lines
2.8 KiB
Vue
97 lines
2.8 KiB
Vue
<script lang="ts">
|
|
import { tv, type VariantProps } from 'tailwind-variants'
|
|
// import appConfig from '#build/app.config'
|
|
import type { LinkProps } from '#ui/components/Link.vue'
|
|
import theme from '#ui/theme/button'
|
|
|
|
const appButton = tv(theme)
|
|
// const appButton = tv({ extend: button, ...(appConfig.ui?.button || {}) })
|
|
|
|
type ButtonVariants = VariantProps<typeof appButton>
|
|
|
|
export interface ButtonProps extends LinkProps {
|
|
label?: string
|
|
color?: ButtonVariants['color']
|
|
size?: ButtonVariants['size']
|
|
icon?: string
|
|
leading?: boolean
|
|
leadingIcon?: string
|
|
trailing?: boolean
|
|
trailingIcon?: string
|
|
loading?: boolean
|
|
loadingIcon?: string
|
|
square?: boolean
|
|
block?: boolean
|
|
disabled?: boolean
|
|
padded?: boolean
|
|
truncate?: boolean
|
|
class?: any
|
|
ui?: Partial<typeof appButton>
|
|
}
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { useSlots, computed } from 'vue'
|
|
import { useForwardProps } from 'radix-vue'
|
|
import { reactivePick } from '@vueuse/core'
|
|
import { linkProps } from './Link.vue'
|
|
import UIcon from './Icon.vue'
|
|
|
|
defineOptions({ inheritAttrs: false })
|
|
|
|
const props = defineProps<ButtonProps>()
|
|
|
|
const slots = useSlots()
|
|
const appConfig = useAppConfig()
|
|
const forward = useForwardProps(reactivePick(props, Object.keys(linkProps)))
|
|
|
|
// Computed
|
|
|
|
const ui = computed(() => tv({ extend: appButton, ...props.ui })({
|
|
color: props.color,
|
|
size: props.size,
|
|
loading: props.loading,
|
|
truncate: props.truncate,
|
|
block: props.block,
|
|
padded: props.padded,
|
|
square: props.square || (!slots.default && !props.label)
|
|
}))
|
|
|
|
const isLeading = computed(() => (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon)
|
|
|
|
const isTrailing = computed(() => (props.icon && props.trailing) || (props.loading && props.trailing) || props.trailingIcon)
|
|
|
|
const leadingIconName = computed(() => {
|
|
if (props.loading) {
|
|
return props.loadingIcon || appConfig.ui.icons.loading
|
|
}
|
|
|
|
return props.leadingIcon || props.icon
|
|
})
|
|
|
|
const trailingIconName = computed(() => {
|
|
if (props.loading && !isLeading.value) {
|
|
return props.loadingIcon || appConfig.ui.icons.loading
|
|
}
|
|
|
|
return props.trailingIcon || props.icon
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<ULink :disabled="disabled || loading" :class="ui.base({ class: $props.class })" v-bind="{ ...forward, ...$attrs }">
|
|
<slot name="leading" :disabled="disabled" :loading="loading">
|
|
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.icon()" aria-hidden="true" />
|
|
</slot>
|
|
|
|
<span v-if="label || $slots.default" :class="ui.label()">
|
|
<slot>
|
|
{{ label }}
|
|
</slot>
|
|
</span>
|
|
|
|
<slot name="trailing" :disabled="disabled" :loading="loading">
|
|
<UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.icon()" aria-hidden="true" />
|
|
</slot>
|
|
</ULink>
|
|
</template> |