fix(Button): inherit nuxt link props without breaking nuxt-component-meta

Resolves #578
This commit is contained in:
Benjamin Canac
2024-01-10 16:58:47 +01:00
parent cefa597664
commit d3e19dc65a
3 changed files with 66 additions and 2 deletions

View File

@@ -24,6 +24,7 @@ import UIcon from '../elements/Icon.vue'
import ULink from '../elements/Link.vue'
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import { nuxtLinkProps } from '../../utils/nuxt-link'
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types'
// @ts-expect-error
@@ -39,6 +40,7 @@ export default defineComponent({
},
inheritAttrs: false,
props: {
...nuxtLinkProps,
type: {
type: String,
default: 'button'

View File

@@ -32,12 +32,12 @@
<script lang="ts">
import { isEqual } from 'ohash'
import { defineComponent } from 'vue'
import { NuxtLink } from '#components'
import { nuxtLinkProps } from '../../utils/nuxt-link'
export default defineComponent({
inheritAttrs: false,
props: {
...NuxtLink.props,
...nuxtLinkProps,
as: {
type: String,
default: 'button'

View File

@@ -0,0 +1,62 @@
import type { PropType } from 'vue'
import type { RouteLocationRaw } from '#vue-router'
export const nuxtLinkProps = {
to: {
type: [String, Object] as PropType<RouteLocationRaw>,
default: undefined
},
href: {
type: [String, Object] as PropType<RouteLocationRaw>,
default: undefined
},
// Attributes
target: {
type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & {}) | null>,
default: undefined
},
rel: {
type: String,
default: undefined
},
noRel: {
type: Boolean,
default: undefined
},
// Prefetching
prefetch: {
type: Boolean,
default: undefined
},
noPrefetch: {
type: Boolean,
default: undefined
},
// Styling
activeClass: {
type: String,
default: undefined
},
exactActiveClass: {
type: String,
default: undefined
},
prefetchedClass: {
type: String,
default: undefined
},
// Vue Router's `<RouterLink>` additional props
replace: {
type: Boolean,
default: undefined
},
ariaCurrentValue: {
type: String,
default: undefined
},
// Edge cases handling
external: {
type: Boolean,
default: undefined
}
} as const