mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-26 18:00:43 +01:00
chore(Button): move some logic to LinkCustom
This commit is contained in:
@@ -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.
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user