mirror of https://github.com/nuxt/nuxt.git
85 lines
1.8 KiB
Vue
85 lines
1.8 KiB
Vue
<template>
|
|
<!-- eslint-disable-next-line vue/require-component-is -->
|
|
<component
|
|
v-bind="linkProps"
|
|
:aria-label="ariaLabel"
|
|
class="font-medium rounded-md"
|
|
:class="[
|
|
iconLeft || iconRight ? 'inline-flex items-center px-4 py-2.5' : 'px-4 py-2.5',
|
|
{ 'text-md 2xl:text-base ': size === 'lg' },
|
|
{ 'text-sm 2xl:text-md ': size === 'md' },
|
|
{ 'text-xs 2xl:text-sm ': size === 'sm' }
|
|
]"
|
|
>
|
|
<div v-if="iconLeft" class="h-full flex items-center justify-center">
|
|
<Component :is="iconLeft" class="mr-2" :class="{ 'w-5 h-5': size === 'lg' }" />
|
|
</div>
|
|
<slot />
|
|
<div v-if="iconRight" class="h-full flex items-center justify-center">
|
|
<Component :is="iconRight" class="ml-2" :class="{ 'w-5 h-5': size === 'lg' }" />
|
|
</div>
|
|
</component>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent, computed } from '@nuxtjs/composition-api'
|
|
export default defineComponent({
|
|
props: {
|
|
to: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
href: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'lg',
|
|
validator (value) {
|
|
return ['sm', 'md', 'lg'].includes(value)
|
|
}
|
|
},
|
|
iconLeft: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
iconRight: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
ariaLabel: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
},
|
|
setup (props) {
|
|
const linkProps = computed(() => {
|
|
const { to, href } = props
|
|
if (to?.length) {
|
|
return {
|
|
is: 'Link',
|
|
to
|
|
}
|
|
} else if (href?.length) {
|
|
return {
|
|
is: 'Link',
|
|
static: true,
|
|
to: '',
|
|
href,
|
|
blank: true
|
|
}
|
|
} else {
|
|
return {
|
|
is: 'button'
|
|
}
|
|
}
|
|
})
|
|
|
|
return {
|
|
linkProps
|
|
}
|
|
}
|
|
})
|
|
</script>
|