chore(Button): move some logic to LinkCustom

This commit is contained in:
Benjamin Canac
2023-07-20 11:19:03 +02:00
parent c4e0e5a685
commit e92f341224
3 changed files with 12 additions and 14 deletions

View File

@@ -204,6 +204,8 @@ props:
Button
::
You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `target`, `exact`, etc.
### Padded
Use the `padded` prop to remove the padding of the Button.

View File

@@ -1,5 +1,5 @@
<template>
<ULinkCustom :class="buttonClass" v-bind="buttonProps">
<ULinkCustom :type="type" :disabled="disabled || loading" :class="buttonClass">
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
</slot>
@@ -20,11 +20,9 @@
import { computed, defineComponent, useSlots } from 'vue'
import type { PropType } from 'vue'
import { defu } from 'defu'
import { pick } from 'lodash-es'
import UIcon from '../elements/Icon.vue'
import ULinkCustom from '../elements/LinkCustom.vue'
import { classNames } from '../../utils'
import { NuxtLink } from '#components'
import { useAppConfig } from '#imports'
// TODO: Remove
// @ts-expect-error
@@ -38,7 +36,6 @@ export default defineComponent({
ULinkCustom
},
props: {
...NuxtLink.props,
type: {
type: String,
default: 'button'
@@ -142,14 +139,6 @@ export default defineComponent({
const isSquare = computed(() => props.square || (!slots.default && !props.label))
const buttonProps = computed(() => {
if (props.to) {
return pick(props, Object.keys(NuxtLink.props))
} else {
return { disabled: props.disabled || props.loading, type: props.type }
}
})
const buttonClass = computed(() => {
const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -201,7 +190,6 @@ export default defineComponent({
isLeading,
isTrailing,
isSquare,
buttonProps,
buttonClass,
leadingIconName,
trailingIconName,

View File

@@ -1,5 +1,5 @@
<template>
<button v-if="!to" v-bind="$attrs" :class="inactiveClass">
<button v-if="!to" :type="type" :disabled="disabled" v-bind="$attrs" :class="inactiveClass">
<slot />
</button>
<NuxtLink
@@ -29,6 +29,14 @@ export default defineComponent({
inheritAttrs: false,
props: {
...NuxtLink.props,
type: {
type: String,
default: null
},
disabled: {
type: Boolean,
default: null
},
exact: {
type: Boolean,
default: false