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 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 ### Padded
Use the `padded` prop to remove the padding of the Button. Use the `padded` prop to remove the padding of the Button.

View File

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

View File

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