HoshinoSuzumi/rayine-ui
1
0
Fork 0
mirror of https://github.com/HoshinoSuzumi/rayine-ui.git synced 2025-04-19 14:28:51 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

♻️ refactor(button): export defineComponent instead of setup

Browse Source
This commit is contained in:
Timothy Yin 2024-11-23 14:58:12 +08:00
parent f68fa2f936
commit 15aa2315ae
1 changed files with 83 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/runtime/components/elements/Button.vue
View File

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts">
import { twJoin, twMerge } from 'tailwind-merge' import { twJoin, twMerge } from 'tailwind-merge'
import { computed, toRef, type PropType } from 'vue' import { computed, defineComponent, toRef, type PropType } from 'vue'
import type { DeepPartial, Strategy } from '../../types/utils' import type { DeepPartial, Strategy } from '../../types/utils'
import type { ButtonColor, ButtonSize, ButtonVariant } from '../../types/button' import type { ButtonColor, ButtonSize, ButtonVariant } from '../../types/button'
import { getNonUndefinedValuesFromObject } from '../../utils' import { getNonUndefinedValuesFromObject } from '../../utils'
@ -8,7 +8,10 @@ import { nuxtLinkProps } from '../../utils/link'
import { button } from '../../ui.config' import { button } from '../../ui.config'
import { useRayUI } from '#build/imports' import { useRayUI } from '#build/imports'
const props = defineProps({ const config = button
export default defineComponent({
props: {
...nuxtLinkProps, ...nuxtLinkProps,
class: { class: {
type: String, type: String,
@ -44,31 +47,31 @@ const props = defineProps({
}, },
size: { size: {
type: String as PropType<ButtonSize>, type: String as PropType<ButtonSize>,
default: () => button.default.size, default: () => config.default.size,
}, },
color: { color: {
type: String as PropType<ButtonColor>, type: String as PropType<ButtonColor>,
default: () => button.default.color, default: () => config.default.color,
}, },
variant: { variant: {
type: String as PropType<ButtonVariant>, type: String as PropType<ButtonVariant>,
default: () => button.default.variant, default: () => config.default.variant,
}, },
loadingIcon: { loadingIcon: {
type: String, type: String,
default: () => button.default.loadingIcon, default: () => config.default.loadingIcon,
}, },
ui: { ui: {
type: Object as PropType<DeepPartial<typeof button> & { strategy?: Strategy }>, type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
default: () => ({}), default: () => ({}),
}, },
}) },
setup(props) {
const extProps = computed(() => getNonUndefinedValuesFromObject(props, nuxtLinkProps))
const extProps = computed(() => getNonUndefinedValuesFromObject(props, nuxtLinkProps)) const { ui, attrs } = useRayUI('button', toRef(props, 'ui'), config)
const { ui, attrs } = useRayUI('button', toRef(props, 'ui'), button) const buttonClass = computed(() => {
const buttonClass = computed(() => {
// @ts-ignore // @ts-ignore
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]
return twMerge(twJoin( return twMerge(twJoin(
@ -80,6 +83,15 @@ const buttonClass = computed(() => {
variant?.replaceAll('{color}', props.color), variant?.replaceAll('{color}', props.color),
props.block ? ui.value.block : ui.value.inline, props.block ? ui.value.block : ui.value.inline,
), props.class) ), props.class)
})
return {
ui,
attrs,
extProps,
buttonClass,
}
}
}) })
</script> </script>