fix: prefix imported components

nuxt · May 5, 2023 · 0c69385 · 0c69385
1 parent 97b1a85
commit 0c69385
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 77 deletions.
diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
@@ -6,13 +6,13 @@
     :aria-label="ariaLabel"
     v-bind="buttonProps"
   >
-    <Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
+    <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
     <slot>
       <span v-if="label" :class="[truncate ? 'text-left break-all line-clamp-1' : '']">
         {{ label }}
       </span>
     </slot>
-    <Icon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+    <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
   </component>
 </template>
 
@@ -21,7 +21,7 @@ import { ref, computed, defineComponent, useSlots } from 'vue'
 import type { PropType } from 'vue'
 import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router'
 import { defu } from 'defu'
-import Icon from '../elements/Icon.vue'
+import UIcon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import { NuxtLink } from '#components'
 import { useAppConfig } from '#imports'
@@ -33,7 +33,7 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    Icon
+    UIcon
   },
   props: {
     type: {

diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
@@ -27,8 +27,8 @@
                 @click="item.click"
               >
                 <slot :name="item.slot || 'item'" :item="item">
-                  <Icon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
-                  <Avatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
+                  <UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
+                  <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
 
                   <span class="truncate">{{ item.label }}</span>
 
@@ -51,8 +51,8 @@ import type { PropType } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
 import { defineComponent, ref, computed, onMounted } from 'vue'
 import { defu } from 'defu'
-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 { classNames, omit } from '../../utils'
 import { usePopper } from '../../composables/usePopper'
 import type { Avatar as AvatarType } from '../../types/avatar'
@@ -72,8 +72,8 @@ export default defineComponent({
     MenuButton,
     MenuItems,
     MenuItem,
-    Icon,
-    Avatar
+    UIcon,
+    UAvatar
   },
   props: {
     items: {

diff --git a/src/runtime/components/elements/Icon.vue b/src/runtime/components/elements/Icon.vue
@@ -2,11 +2,13 @@
   <span :class="name" />
 </template>
 
-<script setup lang="ts">
-defineProps({
-  name: {
-    type: String,
-    required: true
+<script lang="ts">
+export default defineComponent({
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
   }
 })
 </script>
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
@@ -19,10 +19,10 @@
     >
     <slot />
     <div v-if="isLeading && leadingIconName" :class="leadingIconClass">
-      <Icon :name="leadingIconName" :class="iconClass" />
+      <UIcon :name="leadingIconName" :class="iconClass" />
     </div>
     <div v-if="isTrailing && trailingIconName" :class="trailingIconClass">
-      <Icon :name="trailingIconName" :class="iconClass" />
+      <UIcon :name="trailingIconName" :class="iconClass" />
     </div>
   </div>
 </template>
@@ -31,7 +31,7 @@
 import { ref, computed, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
-import Icon from '../elements/Icon.vue'
+import UIcon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -42,7 +42,7 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    Icon
+    UIcon
   },
   props: {
     modelValue: {

diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
@@ -37,11 +37,11 @@
     </select>
 
     <div v-if="icon" :class="leadingIconClass">
-      <Icon :name="icon" :class="iconClass" />
+      <UIcon :name="icon" :class="iconClass" />
     </div>
 
     <span :class="trailingIconClass">
-      <Icon name="i-heroicons-chevron-down-20-solid" :class="iconClass" aria-hidden="true" />
+      <UIcon name="i-heroicons-chevron-down-20-solid" :class="iconClass" aria-hidden="true" />
     </span>
   </div>
 </template>
@@ -51,7 +51,7 @@ import { computed, defineComponent } from 'vue'
 import type { PropType, ComputedRef } from 'vue'
 import { get } from 'lodash-es'
 import { defu } from 'defu'
-import Icon from '../elements/Icon.vue'
+import UIcon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -62,7 +62,7 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    Icon
+    UIcon
   },
   props: {
     modelValue: {

diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
@@ -24,7 +24,7 @@
       <slot :open="open" :disabled="disabled">
         <button :class="selectMenuClass" :disabled="disabled" type="button">
           <span v-if="icon" :class="leadingIconClass">
-            <Icon :name="icon" :class="iconClass" />
+            <UIcon :name="icon" :class="iconClass" />
           </span>
 
           <slot name="label">
@@ -33,7 +33,7 @@
           </slot>
 
           <span :class="trailingIconClass">
-            <Icon name="i-heroicons-chevron-down-20-solid" :class="iconClass" aria-hidden="true" />
+            <UIcon name="i-heroicons-chevron-down-20-solid" :class="iconClass" aria-hidden="true" />
           </span>
         </button>
       </slot>
@@ -65,8 +65,8 @@
             <li :class="resolveOptionClass({ active, disabled: optionDisabled })">
               <div :class="ui.option.container">
                 <slot name="option" :option="option" :active="active" :selected="selected">
-                  <Icon v-if="option.icon" :name="option.icon" :class="[ui.option.icon.base, active ? ui.option.icon.active : ui.option.icon.inactive, option.iconClass]" aria-hidden="true" />
-                  <Avatar
+                  <UIcon v-if="option.icon" :name="option.icon" :class="[ui.option.icon.base, active ? ui.option.icon.active : ui.option.icon.inactive, option.iconClass]" aria-hidden="true" />
+                  <UAvatar
                     v-else-if="option.avatar"
                     v-bind="{ size: ui.option.avatar.size, ...option.avatar }"
                     :class="ui.option.avatar.base"
@@ -79,7 +79,7 @@
               </div>
 
               <span v-if="selected" :class="ui.option.selected.wrapper">
-                <Icon :name="selectedIcon" :class="ui.option.selected.icon" aria-hidden="true" />
+                <UIcon :name="selectedIcon" :class="ui.option.selected.icon" aria-hidden="true" />
               </span>
             </li>
           </component>
@@ -109,8 +109,8 @@ import { ref, computed, watch, defineComponent } from 'vue'
 import type { PropType, ComponentPublicInstance } from 'vue'
 import { defu } from 'defu'
 import { Combobox, ComboboxButton, ComboboxOptions, ComboboxOption, ComboboxInput, Listbox, ListboxButton, ListboxOptions, ListboxOption } 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 { classNames } from '../../utils'
 import { usePopper } from '../../composables/usePopper'
 import type { PopperOptions } from '../../types'
@@ -132,8 +132,8 @@ export default defineComponent({
     ListboxButton,
     ListboxOptions,
     ListboxOption,
-    Icon,
-    Avatar
+    UIcon,
+    UAvatar
   },
   props: {
     modelValue: {

diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
@@ -5,10 +5,10 @@
   >
     <span :class="[active ? ui.container.active : ui.container.inactive, ui.container.base]">
       <span v-if="iconOn" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
-        <Icon :name="iconOn" :class="ui.icon.on" />
+        <UIcon :name="iconOn" :class="ui.icon.on" />
       </span>
       <span v-if="iconOff" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
-        <Icon :name="iconOff" :class="ui.icon.off" />
+        <UIcon :name="iconOff" :class="ui.icon.off" />
       </span>
     </span>
   </Switch>
@@ -19,7 +19,7 @@ import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
 import { Switch } from '@headlessui/vue'
-import Icon from '../elements/Icon.vue'
+import UIcon from '../elements/Icon.vue'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -31,7 +31,7 @@ export default defineComponent({
   components: {
     // eslint-disable-next-line vue/no-reserved-component-names
     Switch,
-    Icon
+    UIcon
   },
   props: {
     modelValue: {

diff --git a/src/runtime/components/navigation/CommandPalette.vue b/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: {

diff --git a/src/runtime/components/navigation/CommandPaletteGroup.vue b/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: {