fix: prefix imported components

src/runtime/components/navigation/CommandPalette.vue

@@ -9,7 +9,7 @@
   >
     <div :class="ui.wrapper">
       <div v-if="searchable" :class="ui.input.wrapper">
-        <Icon v-if="icon" :name="icon" :class="ui.input.icon" aria-hidden="true" />
+        <UIcon v-if="icon" :name="icon" :class="ui.input.icon" aria-hidden="true" />
         <ComboboxInput
           ref="comboboxInput"
           :value="query"
@@ -19,7 +19,7 @@
           @change="query = $event.target.value"
         />
 
-        <Button
+        <UButton
           v-if="close"
           v-bind="close"
           :class="ui.input.close"
@@ -53,7 +53,7 @@
       </ComboboxOptions>
 
       <div v-else-if="empty" :class="ui.empty.wrapper">
-        <Icon v-if="empty.icon" :name="empty.icon" :class="ui.empty.icon" aria-hidden="true" />
+        <UIcon v-if="empty.icon" :name="empty.icon" :class="ui.empty.icon" aria-hidden="true" />
         <p :class="query ? ui.empty.queryLabel : ui.empty.label">
           {{ query ? empty.queryLabel : empty.label }}
         </p>
@@ -72,8 +72,8 @@ import { groupBy, map } from 'lodash-es'
 import { defu } from 'defu'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { Group, Command } from '../../types/command-palette'
-import Icon from '../elements/Icon.vue'
-import Button from '../elements/Button.vue'
+import UIcon from '../elements/Icon.vue'
+import UButton from '../elements/Button.vue'
 import type { Button as ButtonType } from '../../types/button'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
 import { useAppConfig } from '#imports'
@@ -88,9 +88,8 @@ export default defineComponent({
     Combobox,
     ComboboxInput,
     ComboboxOptions,
-    Icon,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Button,
+    UIcon,
+    UButton,
     CommandPaletteGroup
   },
   props: {
@@ -127,7 +126,7 @@ export default defineComponent({
       default: () => appConfig.ui.commandPalette.default.selectedIcon
     },
     close: {
-      type: Object as PropType<Partial<ButtonType>>,
+      type: Object as PropType<Partial<UButtonType>>,
       default: () => appConfig.ui.commandPalette.default.close
     },
     empty: {

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -16,8 +16,8 @@
         <div :class="[ui.group.command.base, active ? ui.group.command.active : ui.group.command.inactive, command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
           <div :class="ui.group.command.container">
             <slot :name="`${group.key}-icon`" :group="group" :command="command">
-              <Icon v-if="command.icon" :name="command.icon" :class="[ui.group.command.icon.base, active ? ui.group.command.icon.active : ui.group.command.icon.inactive, command.iconClass]" aria-hidden="true" />
-              <Avatar
+              <UIcon v-if="command.icon" :name="command.icon" :class="[ui.group.command.icon.base, active ? ui.group.command.icon.active : ui.group.command.icon.inactive, command.iconClass]" aria-hidden="true" />
+              <UAvatar
                 v-else-if="command.avatar"
                 v-bind="{ size: ui.group.command.avatar.size, ...command.avatar }"
                 :class="ui.group.command.avatar.base"
@@ -39,7 +39,7 @@
             </div>
           </div>
 
-          <Icon v-if="selected" :name="selectedIcon" :class="ui.group.command.selected.icon" aria-hidden="true" />
+          <UIcon v-if="selected" :name="selectedIcon" :class="ui.group.command.selected.icon" aria-hidden="true" />
           <slot v-else-if="active && (group.active || $slots[`${group.key}-active`])" :name="`${group.key}-active`" :group="group" :command="command">
             <span v-if="group.active" :class="ui.group.active">{{ group.active }}</span>
           </slot>
@@ -59,8 +59,8 @@
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { ComboboxOption } from '@headlessui/vue'
-import Icon from '../elements/Icon.vue'
-import Avatar from '../elements/Avatar.vue'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
 import type { Group } from '../../types/command-palette'
 // TODO: Remove
 // @ts-expect-error
@@ -71,8 +71,8 @@ import appConfig from '#build/app.config'
 export default defineComponent({
   components: {
     ComboboxOption,
-    Icon,
-    Avatar
+    UIcon,
+    UAvatar
   },
   props: {
     group: {

src/runtime/components/navigation/VerticalNavigation.vue

@@ -1,6 +1,6 @@
 <template>
   <nav :class="ui.wrapper">
-    <LinkCustom
+    <ULinkCustom
       v-for="(link, index) of links"
       v-slot="{ isActive }"
       :key="index"
@@ -12,14 +12,14 @@
       @keyup.enter="$event.target.blur()"
     >
       <slot name="avatar" :link="link">
-        <Avatar
+        <UAvatar
           v-if="link.avatar"
           v-bind="{ size: ui.avatar.size, ...link.avatar }"
           :class="[ui.avatar.base]"
         />
       </slot>
       <slot name="icon" :link="link" :is-active="isActive">
-        <Icon
+        <UIcon
           v-if="link.icon"
           :name="link.icon"
           :class="[ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive, link.iconClass]"
@@ -33,7 +33,7 @@
           {{ link.badge }}
         </span>
       </slot>
-    </LinkCustom>
+    </ULinkCustom>
   </nav>
 </template>
 
@@ -42,9 +42,9 @@ import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
 import { defu } from 'defu'
-import Icon from '../elements/Icon.vue'
-import Avatar from '../elements/Avatar.vue'
-import LinkCustom from '../elements/LinkCustom.vue'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import ULinkCustom from '../elements/LinkCustom.vue'
 import type { Avatar as AvatarType } from '../../types/avatar'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -55,9 +55,9 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    Icon,
-    Avatar,
-    LinkCustom
+    UIcon,
+    UAvatar,
+    ULinkCustom
   },
   props: {
     links: {