refactor: use script alongside the script setup for exposing type…

… and interface (unovue#467)

* refactor: use `normal script` alongside the script setup for exposing type and interface

* refactor: update

refactor: update

packages/radix-vue/src/Accordion/AccordionContent.vue

@@ -1,10 +1,13 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface AccordionContentProps extends PrimitiveProps {}
+</script>
+
 <script setup lang="ts">
 import { CollapsibleContent } from '../Collapsible'
 import { injectAccordionItemContext } from './AccordionItem.vue'
 import { injectAccordionRootContext } from './AccordionRoot.vue'
-import type { PrimitiveProps } from '@/Primitive'
-
-export interface AccordionContentProps extends PrimitiveProps {}
 
 const props = defineProps<AccordionContentProps>()
 

packages/radix-vue/src/Accordion/AccordionHeader.vue

@@ -1,9 +1,13 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface AccordionHeaderProps extends PrimitiveProps {}
+</script>
+
 <script setup lang="ts">
 import { injectAccordionItemContext } from './AccordionItem.vue'
 import { injectAccordionRootContext } from './AccordionRoot.vue'
-import { Primitive, type PrimitiveProps } from '@/Primitive'
-
-export interface AccordionHeaderProps extends PrimitiveProps {}
+import { Primitive } from '@/Primitive'
 
 const props = withDefaults(defineProps<AccordionHeaderProps>(), {
   as: 'h3',

packages/radix-vue/src/Accordion/AccordionItem.vue

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts">
 import type { ComputedRef, VNodeRef } from 'vue'
 import type { CollapsibleRootProps } from '../Collapsible'
 import { injectAccordionRootContext } from './AccordionRoot.vue'

packages/radix-vue/src/Accordion/AccordionRoot.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { ComputedRef, Ref } from 'vue'
+import type { PrimitiveProps } from '@/Primitive'
 import type { DataOrientation, Direction, Type } from '@/shared/types'
 import { createContext, useDirection } from '@/shared'
 
@@ -72,7 +73,6 @@ export const [injectAccordionRootContext, provideAccordionRootContext]
 <script setup lang="ts">
 import {
   Primitive,
-  type PrimitiveProps,
   usePrimitiveElement,
 } from '@/Primitive'
 import { useSingleOrMultipleValue } from '@/shared/useSingleOrMultipleValue'

packages/radix-vue/src/Accordion/AccordionTrigger.vue

@@ -1,10 +1,14 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface AccordionTriggerProps extends PrimitiveProps {}
+</script>
+
 <script setup lang="ts">
 import { injectAccordionItemContext } from './AccordionItem.vue'
 import { injectAccordionRootContext } from './AccordionRoot.vue'
-import { type PrimitiveProps } from '@/Primitive'
-import { CollapsibleTrigger } from '@/Collapsible'
 
-export interface AccordionTriggerProps extends PrimitiveProps {}
+import { CollapsibleTrigger } from '@/Collapsible'
 
 const props = defineProps<AccordionTriggerProps>()
 

packages/radix-vue/src/AlertDialog/AlertDialogAction.vue

@@ -1,7 +1,11 @@
-<script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from '@/Dialog'
+<script lang="ts">
+import type { DialogCloseProps } from '@/Dialog'
 
 export interface AlertDialogActionProps extends DialogCloseProps {}
+</script>
+
+<script setup lang="ts">
+import { DialogClose } from '@/Dialog'
 
 const props = defineProps<AlertDialogActionProps>()
 </script>

packages/radix-vue/src/AlertDialog/AlertDialogCancel.vue

@@ -1,11 +1,15 @@
+<script lang="ts">
+import type { DialogCloseProps } from '@/Dialog'
+
+export interface AlertDialogCancelProps extends DialogCloseProps {}
+</script>
+
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { injectAlertDialogContentContext } from './AlertDialogContent.vue'
-import { DialogClose, type DialogCloseProps } from '@/Dialog'
+import { DialogClose } from '@/Dialog'
 import { usePrimitiveElement } from '@/Primitive'
 
-export interface AlertDialogCancelProps extends DialogCloseProps {}
-
 const props = defineProps<AlertDialogCancelProps>()
 const contentContext = injectAlertDialogContentContext()
 const { primitiveElement, currentElement } = usePrimitiveElement()

packages/radix-vue/src/AlertDialog/AlertDialogContent.vue

@@ -1,4 +1,8 @@
 <script lang="ts">
+import type {
+  DialogContentEmits,
+  DialogContentProps,
+} from '@/Dialog'
 import { createContext, useEmitAsProps } from '@/shared'
 
 interface AlertDialogContentContext {
@@ -8,16 +12,14 @@ interface AlertDialogContentContext {
 export const [injectAlertDialogContentContext, provideAlertDialogContentContext]
   = createContext<AlertDialogContentContext>('AlertDialogContent')
 
-export interface AlertDialogContentProps extends DialogContentProps {}
 export type AlertDialogContentEmits = DialogContentEmits
+export interface AlertDialogContentProps extends DialogContentProps {}
 </script>
 
 <script setup lang="ts">
 import { nextTick, ref } from 'vue'
 import {
   DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
 } from '@/Dialog'
 
 const props = defineProps<AlertDialogContentProps>()

packages/radix-vue/src/AlertDialog/AlertDialogDescription.vue

@@ -1,7 +1,11 @@
-<script setup lang="ts">
-import { DialogDescription, type DialogDescriptionProps } from '@/Dialog'
+<script lang="ts">
+import type { DialogDescriptionProps } from '@/Dialog'
 
 export interface AlertDialogDescriptionProps extends DialogDescriptionProps {}
+</script>
+
+<script setup lang="ts">
+import { DialogDescription } from '@/Dialog'
 
 const props = defineProps<AlertDialogDescriptionProps>()
 </script>

packages/radix-vue/src/AlertDialog/AlertDialogOverlay.vue

@@ -1,7 +1,11 @@
-<script setup lang="ts">
-import { DialogOverlay, type DialogOverlayProps } from '@/Dialog'
+<script lang="ts">
+import type { DialogOverlayProps } from '@/Dialog'
 
 export interface AlertDialogOverlayProps extends DialogOverlayProps {}
+</script>
+
+<script setup lang="ts">
+import { DialogOverlay } from '@/Dialog'
 
 const props = defineProps<AlertDialogOverlayProps>()
 </script>

packages/radix-vue/src/AlertDialog/AlertDialogPortal.vue

@@ -1,7 +1,12 @@
-<script setup lang="ts">
-import { TeleportPrimitive, type TeleportProps } from '@/Teleport'
+<script lang="ts">
+import type { TeleportProps } from '@/Teleport'
 
 export interface AlertDialogPortalProps extends TeleportProps {}
+</script>
+
+<script setup lang="ts">
+import { TeleportPrimitive } from '@/Teleport'
+
 const props = defineProps<AlertDialogPortalProps>()
 </script>
 

packages/radix-vue/src/AlertDialog/AlertDialogRoot.vue

@@ -1,13 +1,16 @@
-<script setup lang="ts">
-import {
-  DialogRoot,
-  type DialogRootEmits,
-  type DialogRootProps,
+<script lang="ts">
+import type {
+  DialogRootEmits,
+  DialogRootProps,
 } from '@/Dialog'
-import { useForwardPropsEmits } from '@/shared'
 
-export interface AlertDialogProps extends Omit<DialogRootProps, 'modal'> {}
 export type AlertDialogEmits = DialogRootEmits
+export interface AlertDialogProps extends Omit<DialogRootProps, 'modal'> {}
+</script>
+
+<script setup lang="ts">
+import { DialogRoot } from '@/Dialog'
+import { useForwardPropsEmits } from '@/shared'
 
 const props = defineProps<AlertDialogProps>()
 const emits = defineEmits<AlertDialogEmits>()

packages/radix-vue/src/AlertDialog/AlertDialogTitle.vue

@@ -1,7 +1,11 @@
-<script setup lang="ts">
-import { DialogTitle, type DialogTitleProps } from '@/Dialog'
+<script lang="ts">
+import type { DialogTitleProps } from '@/Dialog'
 
 export interface AlertDialogTitleProps extends DialogTitleProps {}
+</script>
+
+<script setup lang="ts">
+import { DialogTitle } from '@/Dialog'
 
 const props = defineProps<AlertDialogTitleProps>()
 </script>

packages/radix-vue/src/AlertDialog/AlertDialogTrigger.vue

@@ -1,7 +1,11 @@
-<script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from '@/Dialog'
+<script lang="ts">
+import type { DialogTriggerProps } from '@/Dialog'
 
 export interface AlertDialogTriggerProps extends DialogTriggerProps {}
+</script>
+
+<script setup lang="ts">
+import { DialogTrigger } from '@/Dialog'
 
 const props = defineProps<AlertDialogTriggerProps>()
 </script>

packages/radix-vue/src/AspectRatio/AspectRatio.vue

@@ -1,16 +1,18 @@
 <script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
 export interface AspectRatioProps extends PrimitiveProps {
   ratio?: number
 }
-
-export default {
-  inheritAttrs: false,
-}
 </script>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Primitive, type PrimitiveProps } from '@/Primitive'
+import { Primitive } from '@/Primitive'
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = withDefaults(defineProps<AspectRatioProps>(), {
   ratio: 1,

packages/radix-vue/src/Avatar/AvatarFallback.vue

@@ -1,12 +1,14 @@
 <script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
 export interface AvatarFallbackProps extends PrimitiveProps {
   delayMs?: number
 }
 </script>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { Primitive, type PrimitiveProps } from '../Primitive'
+import { Primitive } from '@/Primitive'
 import { injectAvatarRootContext } from './AvatarRoot.vue'
 
 const props = withDefaults(defineProps<AvatarFallbackProps>(), {

packages/radix-vue/src/Avatar/AvatarImage.vue

@@ -1,4 +1,7 @@
 <script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+import type { ImageLoadingStatus } from './utils'
+
 export type AvatarImageEmits = {
   'loadingStatusChange': [value: ImageLoadingStatus]
 }
@@ -9,9 +12,9 @@ export interface AvatarImageProps extends PrimitiveProps {
 
 <script setup lang="ts">
 import { toRefs, watch } from 'vue'
-import { Primitive, type PrimitiveProps } from '../Primitive'
+import { Primitive } from '../Primitive'
 import { injectAvatarRootContext } from './AvatarRoot.vue'
-import { type ImageLoadingStatus, useImageLoadingStatus } from './utils'
+import { useImageLoadingStatus } from './utils'
 
 const props = withDefaults(defineProps<AvatarImageProps>(), { as: 'img' })
 const emits = defineEmits<AvatarImageEmits>()

packages/radix-vue/src/Avatar/AvatarRoot.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { Ref } from 'vue'
+import type { PrimitiveProps } from '@/Primitive'
 import type { ImageLoadingStatus } from './utils'
 import { createContext } from '@/shared'
 
@@ -15,7 +16,7 @@ export const [injectAvatarRootContext, provideAvatarRootContext]
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Primitive, type PrimitiveProps } from '../Primitive'
+import { Primitive } from '@/Primitive'
 
 const props = withDefaults(defineProps<AvatarRootProps>(), {
   as: 'span',

packages/radix-vue/src/Checkbox/CheckboxIndicator.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
 export interface CheckboxIndicatorProps extends PrimitiveProps {
   /**
    * Used to force mounting when more control is needed. Useful when
@@ -10,7 +12,7 @@ export interface CheckboxIndicatorProps extends PrimitiveProps {
 
 <script setup lang="ts">
 import { injectCheckboxRootContext } from './CheckboxRoot.vue'
-import { Primitive, type PrimitiveProps } from '@/Primitive'
+import { Primitive } from '@/Primitive'
 import { Presence } from '@/Presence'
 import { getState, isIndeterminate } from './utils'
 

packages/radix-vue/src/Checkbox/CheckboxRoot.vue

@@ -1,7 +1,9 @@
 <script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
 import type { Ref } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { createContext, useFormControl } from '@/shared'
+import type { CheckedState } from './utils'
 
 export interface CheckboxRootProps extends PrimitiveProps {
   defaultChecked?: boolean
@@ -24,18 +26,17 @@ interface CheckboxRootContext {
 
 export const [injectCheckboxRootContext, provideCheckboxRootContext]
   = createContext<CheckboxRootContext>('CheckboxRoot')
-
-export default {
-  inheritAttrs: false,
-}
 </script>
 
 <script setup lang="ts">
 import { computed, toRefs } from 'vue'
-import { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
-import type { CheckedState } from './utils'
+import { Primitive, usePrimitiveElement } from '@/Primitive'
 import { getState, isIndeterminate } from './utils'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<CheckboxRootProps>(), {
   checked: undefined,
   value: 'on',

packages/radix-vue/src/Collapsible/CollapsibleContent.vue

@@ -1,26 +1,28 @@
 <script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
 export interface CollapsibleContentProps extends PrimitiveProps {
   /**
    * Used to force mounting when more control is needed. Useful when
    * controlling animation with Vue animation libraries.
    */
   forceMount?: boolean
 }
-export default {
-  inheritAttrs: false,
-}
 </script>
 
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { injectCollapsibleRootContext } from './CollapsibleRoot.vue'
 import {
   Primitive,
-  type PrimitiveProps,
   usePrimitiveElement,
 } from '@/Primitive'
 import { Presence } from '@/Presence'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<CollapsibleContentProps>()
 
 const rootContext = injectCollapsibleRootContext()