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

src/runtime/components/elements/Button.vue

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