From e92f341224f773e09c3d025d8b8a49a863ca92e7 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 20 Jul 2023 11:19:03 +0200
Subject: [PATCH] chore(Button): move some logic to `LinkCustom`

---
 docs/content/2.elements/3.button.md            |  2 ++
 src/runtime/components/elements/Button.vue     | 14 +-------------
 src/runtime/components/elements/LinkCustom.vue | 10 +++++++++-
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/docs/content/2.elements/3.button.md b/docs/content/2.elements/3.button.md
index 857f3113..9ae22299 100644
--- a/docs/content/2.elements/3.button.md
+++ b/docs/content/2.elements/3.button.md
@@ -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.
diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
index 8c591f17..7de32b0b 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -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,
diff --git a/src/runtime/components/elements/LinkCustom.vue b/src/runtime/components/elements/LinkCustom.vue
index 6b0ef345..76745249 100644
--- a/src/runtime/components/elements/LinkCustom.vue
+++ b/src/runtime/components/elements/LinkCustom.vue
@@ -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