fix(components): prefix @headlessui/vue components

Resolves #315

src/runtime/app.config.ts

@@ -243,6 +243,7 @@ const dropdown = {
     },
     shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ml-auto'
   },
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
     enterActiveClass: 'transition duration-100 ease-out',
     enterFromClass: 'transform scale-95 opacity-0',
@@ -458,6 +459,7 @@ const selectMenu = {
       base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
     }
   },
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
     leaveActiveClass: 'transition ease-in duration-100',
     leaveFromClass: 'opacity-100',
@@ -730,6 +732,7 @@ const modal = {
   overlay: {
     base: 'fixed inset-0 transition-opacity',
     background: 'bg-gray-200/75 dark:bg-gray-800/75',
+    // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
     transition: {
       enter: 'ease-out duration-300',
       enterFrom: 'opacity-0',
@@ -745,6 +748,7 @@ const modal = {
   shadow: 'shadow-xl',
   width: 'sm:max-w-lg',
   height: '',
+  // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
   transition: {
     enter: 'ease-out duration-300',
     enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
@@ -760,6 +764,7 @@ const slideover = {
   overlay: {
     base: 'fixed inset-0 transition-opacity',
     background: 'bg-gray-200/75 dark:bg-gray-800/75',
+    // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
     transition: {
       enter: 'ease-in-out duration-500',
       enterFrom: 'opacity-0',
@@ -776,6 +781,7 @@ const slideover = {
   padding: '',
   shadow: 'shadow-xl',
   width: 'w-screen max-w-md',
+  // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
   transition: {
     enter: 'transform transition ease-in-out duration-300',
     leave: 'transform transition ease-in-out duration-200'
@@ -793,6 +799,7 @@ const tooltip = {
   ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
   base: 'invisible lg:visible h-6 px-2 py-1 text-xs font-normal truncate',
   shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
     enterActiveClass: 'transition ease-out duration-200',
     enterFromClass: 'opacity-0 translate-y-1',
@@ -815,6 +822,7 @@ const popover = {
   rounded: 'rounded-md',
   ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
   base: 'overflow-hidden focus:outline-none',
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
     enterActiveClass: 'transition ease-out duration-200',
     enterFromClass: 'opacity-0 translate-y-1',
@@ -837,6 +845,7 @@ const contextMenu = {
   rounded: 'rounded-md',
   ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
   base: 'overflow-hidden focus:outline-none',
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
     enterActiveClass: 'transition ease-out duration-200',
     enterFromClass: 'opacity-0 translate-y-1',
@@ -873,6 +882,7 @@ const notification = {
     base: 'absolute bottom-0 left-0 right-0 h-1',
     background: 'bg-{color}-500 dark:bg-{color}-400'
   },
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
     enterActiveClass: 'transform ease-out duration-300 transition',
     enterFromClass: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2',

src/runtime/components/elements/Dropdown.vue

@@ -1,6 +1,6 @@
 <template>
-  <Menu v-slot="{ open }" as="div" :class="ui.wrapper" @mouseleave="onMouseLeave">
+  <HMenu v-slot="{ open }" as="div" :class="ui.wrapper" @mouseleave="onMouseLeave">
-    <MenuButton
+    <HMenuButton
       ref="trigger"
       as="div"
       :disabled="disabled"
@@ -13,13 +13,13 @@
           Open
         </button>
       </slot>
-    </MenuButton>
+    </HMenuButton>
 
     <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
-      <transition appear v-bind="ui.transition">
+      <Transition appear v-bind="ui.transition">
-        <MenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
+        <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
           <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
-            <MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
+            <HMenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
               <ULinkCustom
                 v-bind="omit(item, ['label', 'icon', 'iconClass', 'avatar', 'shortcuts', 'click'])"
                 :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
@@ -36,19 +36,19 @@
                   </span>
                 </slot>
               </ULinkCustom>
-            </MenuItem>
+            </HMenuItem>
           </div>
-        </MenuItems>
+        </HMenuItems>
-      </transition>
+      </Transition>
     </div>
-  </Menu>
+  </HMenu>
 </template>
 
 <script lang="ts">
-import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+import { defineComponent, ref, computed, onMounted } from 'vue'
 import type { PropType } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { defineComponent, ref, computed, onMounted } from 'vue'
+import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from '@headlessui/vue'
 import { defu } from 'defu'
 import { omit } from 'lodash-es'
 import UIcon from '../elements/Icon.vue'
@@ -67,11 +67,10 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    // eslint-disable-next-line vue/no-reserved-component-names
+    HMenu,
-    Menu,
+    HMenuButton,
-    MenuButton,
+    HMenuItems,
-    MenuItems,
+    HMenuItem,
-    MenuItem,
     UIcon,
     UAvatar,
     UKbd,

src/runtime/components/forms/SelectMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="searchable ? 'Combobox' : 'Listbox'"
+    :is="searchable ? 'HCombobox' : 'HListbox'"
     v-slot="{ open }"
     :by="by"
     :name="name"
@@ -21,7 +21,7 @@
     >
 
     <component
-      :is="searchable ? 'ComboboxButton' : 'ListboxButton'"
+      :is="searchable ? 'HComboboxButton' : 'HListboxButton'"
       ref="trigger"
       as="div"
       role="button"
@@ -51,9 +51,9 @@
     </component>
 
     <div v-if="open" ref="container" :class="[ui.container, ui.width]">
-      <transition v-bind="ui.transition">
+      <Transition v-bind="ui.transition">
-        <component :is="searchable ? 'ComboboxOptions' : 'ListboxOptions'" static :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.padding, ui.height]">
+        <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.padding, ui.height]">
-          <ComboboxInput
+          <HComboboxInput
             v-if="searchable"
             ref="searchInput"
             :display-value="() => query"
@@ -65,7 +65,7 @@
             @change="query = $event.target.value"
           />
           <component
-            :is="searchable ? 'ComboboxOption' : 'ListboxOption'"
+            :is="searchable ? 'HComboboxOption' : 'HListboxOption'"
             v-for="(option, index) in filteredOptions"
             v-slot="{ active, selected, disabled: optionDisabled }"
             :key="index"
@@ -95,7 +95,7 @@
             </li>
           </component>
 
-          <component :is="searchable ? 'ComboboxOption' : 'ListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template">
+          <component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template">
             <li :class="[ui.option.base, ui.option.rounded, ui.option.padding, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive]">
               <div :class="ui.option.container">
                 <slot name="option-create" :option="queryOption" :active="active" :selected="selected">
@@ -110,7 +110,7 @@
             </slot>
           </p>
         </component>
-      </transition>
+      </Transition>
     </div>
   </component>
 </template>
@@ -118,8 +118,18 @@
 <script lang="ts">
 import { ref, computed, watch, defineComponent } from 'vue'
 import type { PropType, ComponentPublicInstance } from 'vue'
+import {
+  Combobox as HCombobox,
+  ComboboxButton as HComboboxButton,
+  ComboboxOptions as HComboboxOptions,
+  ComboboxOption as HComboboxOption,
+  ComboboxInput as HComboboxInput,
+  Listbox as HListbox,
+  ListboxButton as HListboxButton,
+  ListboxOptions as HListboxOptions,
+  ListboxOption as HListboxOption
+} from '@headlessui/vue'
 import { defu } from 'defu'
-import { Combobox, ComboboxButton, ComboboxOptions, ComboboxOption, ComboboxInput, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import { classNames } from '../../utils'
@@ -134,15 +144,15 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    Combobox,
+    HCombobox,
-    ComboboxButton,
+    HComboboxButton,
-    ComboboxOptions,
+    HComboboxOptions,
-    ComboboxOption,
+    HComboboxOption,
-    ComboboxInput,
+    HComboboxInput,
-    Listbox,
+    HListbox,
-    ListboxButton,
+    HListboxButton,
-    ListboxOptions,
+    HListboxOptions,
-    ListboxOption,
+    HListboxOption,
     UIcon,
     UAvatar
   },

src/runtime/components/forms/Toggle.vue

@@ -1,5 +1,5 @@
 <template>
-  <Switch
+  <HSwitch
     v-model="active"
     :name="name"
     :disabled="disabled"
@@ -13,14 +13,14 @@
         <UIcon :name="offIcon" :class="offIconClass" />
       </span>
     </span>
-  </Switch>
+  </HSwitch>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
-import { Switch } from '@headlessui/vue'
+import { Switch as HSwitch } from '@headlessui/vue'
 import UIcon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
@@ -32,8 +32,7 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    // eslint-disable-next-line vue/no-reserved-component-names
+    HSwitch,
-    Switch,
     UIcon
   },
   props: {

src/runtime/components/navigation/CommandPalette.vue

@@ -1,5 +1,5 @@
 <template>
-  <Combobox
+  <HCombobox
     :by="by"
     :model-value="modelValue"
     :multiple="multiple"
@@ -9,7 +9,7 @@
     <div :class="ui.wrapper">
       <div v-show="searchable" :class="ui.input.wrapper">
         <UIcon v-if="iconName" :name="iconName" :class="iconClass" aria-hidden="true" />
-        <ComboboxInput
+        <HComboboxInput
           ref="comboboxInput"
           :value="query"
           :class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding]"
@@ -27,7 +27,7 @@
         />
       </div>
 
-      <ComboboxOptions
+      <HComboboxOptions
         v-if="groups.length"
         static
         hold
@@ -49,7 +49,7 @@
             <slot :name="name" v-bind="slotData" />
           </template>
         </CommandPaletteGroup>
-      </ComboboxOptions>
+      </HComboboxOptions>
 
       <template v-else-if="emptyState">
         <slot name="empty-state">
@@ -62,12 +62,12 @@
         </slot>
       </template>
     </div>
-  </Combobox>
+  </HCombobox>
 </template>
 
 <script lang="ts">
 import { ref, computed, watch, onMounted, defineComponent } from 'vue'
-import { Combobox, ComboboxInput, ComboboxOptions } from '@headlessui/vue'
+import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions as HComboboxOptions } from '@headlessui/vue'
 import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
@@ -89,9 +89,9 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    Combobox,
+    HCombobox,
-    ComboboxInput,
+    HComboboxInput,
-    ComboboxOptions,
+    HComboboxOptions,
     UIcon,
     UButton,
     CommandPaletteGroup

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -5,7 +5,7 @@
     </h2>
 
     <div :class="ui.group.container" role="listbox" :aria-label="group[groupAttribute]">
-      <ComboboxOption
+      <HComboboxOption
         v-for="(command, index) of group.commands"
         :key="`${group.key}-${index}`"
         v-slot="{ active, selected }"
@@ -50,7 +50,7 @@
             <span v-else-if="!command.disabled && group.inactive" :class="ui.group.inactive">{{ group.inactive }}</span>
           </slot>
         </div>
-      </ComboboxOption>
+      </HComboboxOption>
     </div>
   </div>
 </template>
@@ -58,7 +58,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { ComboboxOption } from '@headlessui/vue'
+import { ComboboxOption as HComboboxOption } from '@headlessui/vue'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UKbd from '../elements/Kbd.vue'
@@ -71,7 +71,7 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    ComboboxOption,
+    HComboboxOption,
     UIcon,
     UAvatar,
     UKbd

src/runtime/components/overlays/ContextMenu.vue

@@ -1,10 +1,10 @@
 <template>
   <div v-if="isOpen" ref="container" :class="[ui.container, ui.width]">
-    <transition appear v-bind="ui.transition">
+    <Transition appear v-bind="ui.transition">
       <div :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
         <slot />
       </div>
-    </transition>
+    </Transition>
   </div>
 </template>
 

src/runtime/components/overlays/Modal.vue

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
-    <Dialog :class="ui.wrapper" @close="close">
+    <HDialog :class="ui.wrapper" @close="close">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -8,13 +8,13 @@
       <div :class="ui.inner">
         <div :class="[ui.container, ui.padding]">
           <TransitionChild as="template" :appear="appear" v-bind="ui.transition">
-            <DialogPanel :class="[ui.base, ui.width, ui.height, ui.background, ui.ring, ui.rounded, ui.shadow]">
+            <HDialogPanel :class="[ui.base, ui.width, ui.height, ui.background, ui.ring, ui.rounded, ui.shadow]">
               <slot />
-            </DialogPanel>
+            </HDialogPanel>
           </TransitionChild>
         </div>
       </div>
-    </Dialog>
+    </HDialog>
   </TransitionRoot>
 </template>
 
@@ -22,7 +22,7 @@
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
-import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
+import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -32,9 +32,8 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    // eslint-disable-next-line vue/no-reserved-component-names
+    HDialog,
-    Dialog,
+    HDialogPanel,
-    DialogPanel,
     TransitionRoot,
     TransitionChild
   },

src/runtime/components/overlays/Notification.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition appear v-bind="ui.transition">
+  <Transition appear v-bind="ui.transition">
     <div :class="[ui.wrapper, ui.background, ui.rounded, ui.shadow]" @mouseover="onMouseover" @mouseleave="onMouseleave">
       <div :class="[ui.container, ui.rounded, ui.ring]">
         <div :class="ui.padding">
@@ -31,7 +31,7 @@
         <div v-if="timeout" :class="progressClass" :style="progressStyle" />
       </div>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <script lang="ts">

src/runtime/components/overlays/Popover.vue

@@ -1,6 +1,6 @@
 <template>
-  <Popover v-slot="{ open, close }" :class="ui.wrapper" @mouseleave="onMouseLeave">
+  <HPopover v-slot="{ open, close }" :class="ui.wrapper" @mouseleave="onMouseLeave">
-    <PopoverButton
+    <HPopoverButton
       ref="trigger"
       as="div"
       :disabled="disabled"
@@ -13,23 +13,23 @@
           Open
         </button>
       </slot>
-    </PopoverButton>
+    </HPopoverButton>
 
     <div v-if="open" ref="container" :class="[ui.container, ui.width]" @mouseover="onMouseOver">
-      <transition appear v-bind="ui.transition">
+      <Transition appear v-bind="ui.transition">
-        <PopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
+        <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
           <slot name="panel" :open="open" :close="close" />
-        </PopoverPanel>
+        </HPopoverPanel>
-      </transition>
+      </Transition>
     </div>
-  </Popover>
+  </HPopover>
 </template>
 
 <script lang="ts">
 import { computed, ref, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from '@headlessui/vue'
 import { usePopper } from '../../composables/usePopper'
 import type { PopperOptions } from '../../types'
 import { useAppConfig } from '#imports'
@@ -41,9 +41,9 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    Popover,
+    HPopover,
-    PopoverButton,
+    HPopoverButton,
-    PopoverPanel
+    HPopoverPanel
   },
   props: {
     mode: {

src/runtime/components/overlays/Slideover.vue

@@ -1,16 +1,16 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <Dialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" @close="close">
+    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" @close="close">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
 
       <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-        <DialogPanel :class="[ui.base, ui.width, ui.background, ui.ring, ui.padding]">
+        <HDialogPanel :class="[ui.base, ui.width, ui.background, ui.ring, ui.padding]">
           <slot />
-        </DialogPanel>
+        </HDialogPanel>
       </TransitionChild>
-    </Dialog>
+    </HDialog>
   </TransitionRoot>
 </template>
 
@@ -18,7 +18,7 @@
 import { computed, defineComponent } from 'vue'
 import type { WritableComputedRef, PropType } from 'vue'
 import { defu } from 'defu'
-import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
+import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -28,9 +28,8 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    // eslint-disable-next-line vue/no-reserved-component-names
+    HDialog,
-    Dialog,
+    HDialogPanel,
-    DialogPanel,
     TransitionRoot,
     TransitionChild
   },

src/runtime/components/overlays/Tooltip.vue

@@ -1,11 +1,11 @@
 <template>
   <div ref="trigger" :class="ui.wrapper" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
     <slot :open="open">
-      hover
+      Hover
     </slot>
 
     <div v-if="open && !prevent" ref="container" :class="[ui.container, ui.width]">
-      <transition appear v-bind="ui.transition">
+      <Transition appear v-bind="ui.transition">
         <div :class="[ui.base, ui.background, ui.color, ui.rounded, ui.shadow, ui.ring]">
           <slot name="text">
             {{ text }}
@@ -18,7 +18,7 @@
             </Ukbd>
           </span>
         </div>
-      </transition>
+      </Transition>
     </div>
   </div>
 </template>