fix(module): use relative imports to components / composables

src/module.ts

@@ -66,7 +66,6 @@ export default defineNuxtModule<ModuleOptions>({
     addVitePlugin(tailwindcss)
 
     await installModule('@nuxt/icon', {
-      componentName: 'UIcon',
       cssLayer: 'components'
     })
     // await installModule('@nuxtjs/color-mode', { classSuffix: '' })

src/runtime/components/Alert.vue

@@ -62,7 +62,8 @@ export interface AlertSlots {
 import { computed } from 'vue'
 import { Primitive } from 'radix-vue'
 import { useAppConfig } from '#imports'
-import { UIcon, UAvatar } from '#components'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 
 const props = defineProps<AlertProps>()
 const emits = defineEmits<AlertEmits>()

src/runtime/components/App.vue

@@ -17,7 +17,9 @@ import { toRef } from 'vue'
 import { ConfigProvider, TooltipProvider, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useId } from '#imports'
-import { UToaster, UModalProvider, USlideoverProvider } from '#components'
+import UToaster from './Toaster.vue'
+import UModalProvider from './ModalProvider.vue'
+import USlideoverProvider from './SlideoverProvider.vue'
 
 const props = withDefaults(defineProps<AppProps>(), {
   useId: () => useId()

src/runtime/components/Avatar.vue

@@ -31,8 +31,8 @@ export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
 import { computed } from 'vue'
 import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { UIcon } from '#components'
-import { useAvatarGroup } from '#imports'
+import { useAvatarGroup } from '../composables/useAvatarGroup'
+import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 

src/runtime/components/AvatarGroup.vue

@@ -33,8 +33,8 @@ export interface AvatarGroupSlots {
 <script setup lang="ts">
 import { computed, provide } from 'vue'
 import { Primitive } from 'radix-vue'
-import { UAvatar } from '#components'
-import { avatarGroupInjectionKey } from '#imports'
+import { avatarGroupInjectionKey } from '../composables/useAvatarGroup'
+import UAvatar from './Avatar.vue'
 
 const props = defineProps<AvatarGroupProps>()
 const slots = defineSlots<AvatarGroupSlots>()

src/runtime/components/Breadcrumb.vue

@@ -47,7 +47,10 @@ export type BreadcrumbSlots<T extends { slot?: string }> = {
 <script setup lang="ts" generic="T extends BreadcrumbItem">
 import { Primitive } from 'radix-vue'
 import { useAppConfig } from '#imports'
-import { ULink, UIcon, UAvatar } from '#components'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import ULinkBase from './LinkBase.vue'
+import ULink from './Link.vue'
 import { pickLinkProps } from '../utils/link'
 
 const props = defineProps<BreadcrumbProps<T>>()

src/runtime/components/Button.vue

@@ -36,8 +36,10 @@ export interface ButtonSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useForwardProps } from 'radix-vue'
-import { useComponentIcons, useButtonGroup } from '#imports'
-import { UIcon, ULink } from '#components'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import UIcon from './Icon.vue'
+import ULink from './Link.vue'
 import { pickLinkProps } from '../utils/link'
 
 const props = defineProps<ButtonProps>()

src/runtime/components/ButtonGroup.vue

@@ -33,7 +33,7 @@ export interface ButtonGroupSlots {
 <script setup lang="ts">
 import { provide, computed } from 'vue'
 import { Primitive } from 'radix-vue'
-import { buttonGroupInjectionKey } from '#imports'
+import { buttonGroupInjectionKey } from '../composables/useButtonGroup'
 
 const props = withDefaults(defineProps<ButtonGroupProps>(), {
   orientation: 'horizontal'

src/runtime/components/Checkbox.vue

@@ -49,7 +49,8 @@ export interface CheckboxSlots {
 import { computed } from 'vue'
 import { CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useId, useAppConfig, useFormField } from '#imports'
+import { useId, useAppConfig } from '#imports'
+import { useFormField } from '../composables/useFormField'
 
 const props = defineProps<CheckboxProps>()
 const slots = defineSlots<CheckboxSlots>()

src/runtime/components/Chip.vue

@@ -42,7 +42,7 @@ export interface ChipSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Primitive } from 'radix-vue'
-import { useAvatarGroup } from '#imports'
+import { useAvatarGroup } from '../composables/useAvatarGroup'
 
 const props = defineProps<ChipProps>()
 defineSlots<ChipSlots>()

src/runtime/components/CommandPalette.vue

@@ -98,8 +98,12 @@ import { ComboboxRoot, ComboboxInput, ComboboxPortal, ComboboxContent, ComboboxE
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
-import { UInput, UAvatar, UIcon, UKbd, UChip } from '#components'
 import { useAppConfig } from '#imports'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import UChip from './Chip.vue'
+import UKbd from './Kbd.vue'
+import UInput from './Input.vue'
 import { omit } from '../utils'
 import { highlight } from '../utils/fuse'
 

src/runtime/components/ContextMenu.vue

@@ -62,7 +62,7 @@ export type ContextMenuSlots<T extends { slot?: string }> = {
 import { computed, toRef } from 'vue'
 import { ContextMenuRoot, ContextMenuTrigger, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { UContextMenuContent } from '#components'
+import UContextMenuContent from './ContextMenuContent.vue'
 import { omit } from '../utils'
 
 const props = withDefaults(defineProps<ContextMenuProps<T>>(), {

src/runtime/components/ContextMenuContent.vue

@@ -24,7 +24,11 @@ import { ContextMenu } from 'radix-vue/namespaced'
 import { useForwardPropsEmits } from 'radix-vue'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { ULink } from '#components'
+import ULinkBase from './LinkBase.vue'
+import ULink from './Link.vue'
+import UAvatar from './Avatar.vue'
+import UIcon from './Icon.vue'
+import UKbd from './Kbd.vue'
 import { omit } from '../utils'
 import { pickLinkProps } from '../utils/link'
 

src/runtime/components/DropdownMenu.vue

@@ -71,7 +71,7 @@ import { computed, toRef } from 'vue'
 import { defu } from 'defu'
 import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { UDropdownMenuContent } from '#components'
+import UDropdownMenuContent from './DropdownMenuContent.vue'
 import { omit } from '../utils'
 
 const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {

src/runtime/components/DropdownMenuContent.vue

@@ -28,7 +28,11 @@ import { DropdownMenu } from 'radix-vue/namespaced'
 import { useForwardPropsEmits } from 'radix-vue'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { ULink } from '#components'
+import ULinkBase from './LinkBase.vue'
+import ULink from './Link.vue'
+import UAvatar from './Avatar.vue'
+import UIcon from './Icon.vue'
+import UKbd from './Kbd.vue'
 import { omit } from '../utils'
 import { pickLinkProps } from '../utils/link'
 

src/runtime/components/Form.vue

@@ -4,9 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/form'
 import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId } from '../types/form'
-import { FormValidationException } from '../types/form'
-
-import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, useId } from '#imports'
 
 const appConfig = _appConfig as AppConfig & { ui: { form: Partial<typeof theme> } }
 
@@ -36,7 +33,10 @@ export interface FormSlots {
 <script lang="ts" setup generic="T extends object">
 import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed } from 'vue'
 import { useEventBus } from '@vueuse/core'
+import { useId } from '#imports'
+import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey } from '../composables/useFormField'
 import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '../utils/form'
+import { FormValidationException } from '../types/form'
 
 const props = withDefaults(defineProps<FormProps<T>>(), {
   validateOn() {

src/runtime/components/FormField.vue

@@ -38,7 +38,8 @@ export interface FormFieldSlots {
 <script lang="ts" setup>
 import { computed, ref, inject, provide, type Ref } from 'vue'
 import { Label } from 'radix-vue'
-import { useId, formFieldInjectionKey } from '#imports'
+import { useId } from '#imports'
+import { formFieldInjectionKey } from '../composables/useFormField'
 import type { FormError } from '../types/form'
 
 const props = defineProps<FormFieldProps>()

src/runtime/components/Icon.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+export interface IconProps {
+  name: string
+  mode?: 'svg' | 'css'
+  size?: string | number
+  customize?: (
+    content: string,
+    name?: string,
+    prefix?: string,
+    provider?: string
+  ) => string
+}
+</script>
+
+<script setup lang="ts">
+import { useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = defineProps<IconProps>()
+
+const iconProps = useForwardProps(reactivePick(props, 'name', 'mode', 'size', 'customize'))
+</script>
+
+<template>
+  <Icon v-bind="iconProps" />
+</template>

src/runtime/components/Input.vue

@@ -48,8 +48,10 @@ export interface InputSlots {
 
 <script lang="ts" setup>
 import { ref, computed, onMounted } from 'vue'
-import { useComponentIcons, useFormField, useButtonGroup } from '#imports'
-import { UIcon } from '#components'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
 import { looseToNumber } from '../utils'
 
 defineOptions({ inheritAttrs: false })

src/runtime/components/InputMenu.vue

@@ -118,8 +118,13 @@ import { computed, ref, toRef, onMounted } from 'vue'
 import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'radix-vue'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
-import { useAppConfig, useFormField, useButtonGroup, useComponentIcons } from '#imports'
-import { UIcon, UChip, UAvatar } from '#components'
+import { useAppConfig } from '#imports'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import UChip from './Chip.vue'
 import { get } from '../utils'
 
 defineOptions({ inheritAttrs: false })

src/runtime/components/Kbd.vue

@@ -30,7 +30,7 @@ export interface KbdSlots {
 
 <script setup lang="ts">
 import { Primitive } from 'radix-vue'
-import { useKbd } from '#imports'
+import { useKbd } from '../composables/useKbd'
 
 const props = withDefaults(defineProps<KbdProps>(), {
   as: 'kbd'

src/runtime/components/Modal.vue

@@ -59,7 +59,7 @@ import { computed, toRef } from 'vue'
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { UButton } from '#components'
+import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<ModalProps>(), {
   close: true,

src/runtime/components/NavigationMenu.vue

@@ -80,7 +80,11 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
 import { computed, toRef } from 'vue'
 import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { UIcon, UAvatar, UBadge, ULink, ULinkBase } from '#components'
+import ULinkBase from './LinkBase.vue'
+import ULink from './Link.vue'
+import UAvatar from './Avatar.vue'
+import UIcon from './Icon.vue'
+import UBadge from './Badge.vue'
 import { pickLinkProps } from '../utils/link'
 
 const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {

src/runtime/components/RadioGroup.vue

@@ -53,7 +53,8 @@ export interface RadioGroupSlots<T> {
 import { computed } from 'vue'
 import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useId, useFormField } from '#imports'
+import { useId } from '#imports'
+import { useFormField } from '../composables/useFormField'
 
 const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
   orientation: 'vertical'

src/runtime/components/Select.vue

@@ -93,8 +93,13 @@ import { computed, toRef } from 'vue'
 import { SelectRoot, SelectTrigger, SelectValue, SelectPortal, SelectContent, SelectViewport, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from 'radix-vue'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
-import { useAppConfig, useComponentIcons, useFormField, useButtonGroup } from '#imports'
-import { UIcon, UChip, UAvatar } from '#components'
+import { useAppConfig } from '#imports'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import UChip from './Chip.vue'
 
 const props = withDefaults(defineProps<SelectProps<T>>(), {
   valueKey: 'value' as any,

src/runtime/components/SelectMenu.vue

@@ -109,8 +109,13 @@ import { computed, toRef } from 'vue'
 import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'radix-vue'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
-import { useAppConfig, useFormField, useButtonGroup, useComponentIcons } from '#imports'
-import { UIcon, UChip, UAvatar } from '#components'
+import { useAppConfig } from '#imports'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import UChip from './Chip.vue'
 import { get } from '../utils'
 
 const props = withDefaults(defineProps<SelectMenuProps<T>>(), {

src/runtime/components/Separator.vue

@@ -45,7 +45,8 @@ export interface SeparatorSlots {
 import { computed } from 'vue'
 import { Separator, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { UAvatar, UIcon } from '#components'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 
 const props = withDefaults(defineProps<SeparatorProps>(), {
   orientation: 'horizontal'

src/runtime/components/Slideover.vue

@@ -69,7 +69,7 @@ import { computed, toRef } from 'vue'
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { UButton } from '#components'
+import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<SlideoverProps>(), {
   close: true,

src/runtime/components/Slider.vue

@@ -39,7 +39,7 @@ export type SliderEmits = Omit<SliderRootEmits, 'valueCommit'> & {
 import { computed } from 'vue'
 import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useFormField } from '#imports'
+import { useFormField } from '../composables/useFormField'
 
 const props = withDefaults(defineProps<SliderProps>(), {
   min: 0,

src/runtime/components/Switch.vue

@@ -54,7 +54,8 @@ export interface SwitchSlots {
 import { computed } from 'vue'
 import { SwitchRoot, SwitchThumb, useForwardProps, Label } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useId, useAppConfig, useFormField } from '#imports'
+import { useId, useAppConfig } from '#imports'
+import { useFormField } from '../composables/useFormField'
 
 const props = defineProps<SwitchProps>()
 const slots = defineSlots<SwitchSlots>()

src/runtime/components/Textarea.vue

@@ -44,7 +44,7 @@ export interface TextareaSlots {
 
 <script lang="ts" setup>
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
-import { useFormField } from '#imports'
+import { useFormField } from '../composables/useFormField'
 import { looseToNumber } from '../utils'
 
 defineOptions({ inheritAttrs: false })

src/runtime/components/Toast.vue

@@ -60,7 +60,8 @@ import { ref, computed, onMounted } from 'vue'
 import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { UIcon, UAvatar } from '#components'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 
 const props = withDefaults(defineProps<ToastProps>(), {
   close: true

src/runtime/components/Toaster.vue

@@ -31,8 +31,8 @@ export interface ToasterSlots {
 import { ref, computed } from 'vue'
 import { ToastProvider, ToastViewport, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useToast } from '#imports'
-import { UToast } from '#components'
+import { useToast } from '../composables/useToast'
+import UToast from './Toast.vue'
 import { omit } from '../utils'
 
 const props = withDefaults(defineProps<ToasterProps>(), {

src/runtime/components/Tooltip.vue

@@ -47,7 +47,7 @@ import { computed, toRef } from 'vue'
 import { defu } from 'defu'
 import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { UKbd } from '#components'
+import UKbd from './Kbd.vue'
 
 const props = withDefaults(defineProps<TooltipProps>(), {
   portal: true

src/runtime/composables/defineShortcuts.ts

@@ -3,7 +3,7 @@
 import { ref, computed, toValue } from 'vue'
 import type { MaybeRef } from 'vue'
 import { useEventListener, useActiveElement, useDebounceFn } from '@vueuse/core'
-import { useKbd } from '#imports'
+import { useKbd } from '../composables/useKbd'
 
 type Handler = (e?: any) => void