♻️ 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,78 +8,90 @@ import { nuxtLinkProps } from '../../utils/link'
 import { button } from '../../ui.config'
 import { useRayUI } from '#build/imports'
 
-const props = defineProps({
-  ...nuxtLinkProps,
-  class: {
-    type: String,
-    default: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  padded: {
-    type: Boolean,
-    default: true,
-  },
-  square: {
-    type: Boolean,
-    default: false,
-  },
-  block: {
-    type: Boolean,
-    default: false,
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  to: {
-    type: String,
-    default: '',
-  },
-  size: {
-    type: String as PropType<ButtonSize>,
-    default: () => button.default.size,
-  },
-  color: {
-    type: String as PropType<ButtonColor>,
-    default: () => button.default.color,
-  },
-  variant: {
-    type: String as PropType<ButtonVariant>,
-    default: () => button.default.variant,
-  },
-  loadingIcon: {
-    type: String,
-    default: () => button.default.loadingIcon,
-  },
-  ui: {
-    type: Object as PropType<DeepPartial<typeof button> & { strategy?: Strategy }>,
-    default: () => ({}),
-  },
-})
+const config = button
 
-const extProps = computed(() => getNonUndefinedValuesFromObject(props, nuxtLinkProps))
+export default defineComponent({
+  props: {
+    ...nuxtLinkProps,
+    class: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    padded: {
+      type: Boolean,
+      default: true,
+    },
+    square: {
+      type: Boolean,
+      default: false,
+    },
+    block: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    to: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String as PropType<ButtonSize>,
+      default: () => config.default.size,
+    },
+    color: {
+      type: String as PropType<ButtonColor>,
+      default: () => config.default.color,
+    },
+    variant: {
+      type: String as PropType<ButtonVariant>,
+      default: () => config.default.variant,
+    },
+    loadingIcon: {
+      type: String,
+      default: () => config.default.loadingIcon,
+    },
+    ui: {
+      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const extProps = computed(() => getNonUndefinedValuesFromObject(props, nuxtLinkProps))
 
-const { ui, attrs } = useRayUI('button', toRef(props, 'ui'), button)
+    const { ui, attrs } = useRayUI('button', toRef(props, 'ui'), config)
 
-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(
-    ui.value.base,
-    ui.value.font,
-    ui.value.rounded,
-    ui.value.size[props.size],
-    props.padded && ui.value.padding[props.size],
-    variant?.replaceAll('{color}', props.color),
-    props.block ? ui.value.block : ui.value.inline,
-  ), props.class)
+    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(
+        ui.value.base,
+        ui.value.font,
+        ui.value.rounded,
+        ui.value.size[props.size],
+        props.padded && ui.value.padding[props.size],
+        variant?.replaceAll('{color}', props.color),
+        props.block ? ui.value.block : ui.value.inline,
+      ), props.class)
+    })
+
+    return {
+      ui,
+      attrs,
+      extProps,
+      buttonClass,
+    }
+  }
 })
 </script>