fix(components): prefix @headlessui/vue components

Resolves #315
2026-01-14 12:14:41 +01:00 · 2023-06-22 13:01:58 +02:00
parent 759af058df
commit 41b85d50a8
12 changed files with 104 additions and 88 deletions
--- a/src/runtime/app.config.ts
+++ b/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',
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -1,6 +1,6 @@
 <template>
-  <Menu v-slot="{ open }" as="div" :class="ui.wrapper" @mouseleave="onMouseLeave">
-    <MenuButton
+  <HMenu v-slot="{ open }" as="div" :class="ui.wrapper" @mouseleave="onMouseLeave">
+    <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">
-        <MenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
+      <Transition appear v-bind="ui.transition">
+        <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>
-      </transition>
+        </HMenuItems>
+      </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
-    Menu,
-    MenuButton,
-    MenuItems,
-    MenuItem,
+    HMenu,
+    HMenuButton,
+    HMenuItems,
+    HMenuItem,
    UIcon,
    UAvatar,
    UKbd,
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/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">
-        <component :is="searchable ? 'ComboboxOptions' : 'ListboxOptions'" static :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.padding, ui.height]">
-          <ComboboxInput
+      <Transition v-bind="ui.transition">
+        <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.padding, ui.height]">
+          <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,
-    ComboboxButton,
-    ComboboxOptions,
-    ComboboxOption,
-    ComboboxInput,
-    Listbox,
-    ListboxButton,
-    ListboxOptions,
-    ListboxOption,
+    HCombobox,
+    HComboboxButton,
+    HComboboxOptions,
+    HComboboxOption,
+    HComboboxInput,
+    HListbox,
+    HListboxButton,
+    HListboxOptions,
+    HListboxOption,
    UIcon,
    UAvatar
  },
--- a/src/runtime/components/forms/Toggle.vue
+++ b/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
-    Switch,
+    HSwitch,
    UIcon
  },
  props: {
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/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,
-    ComboboxInput,
-    ComboboxOptions,
+    HCombobox,
+    HComboboxInput,
+    HComboboxOptions,
    UIcon,
    UButton,
    CommandPaletteGroup
--- a/src/runtime/components/navigation/CommandPaletteGroup.vue
+++ b/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
--- a/src/runtime/components/overlays/ContextMenu.vue
+++ b/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>

--- a/src/runtime/components/overlays/Modal.vue
+++ b/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
-    Dialog,
-    DialogPanel,
+    HDialog,
+    HDialogPanel,
    TransitionRoot,
    TransitionChild
  },
--- a/src/runtime/components/overlays/Notification.vue
+++ b/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">
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -1,6 +1,6 @@
 <template>
-  <Popover v-slot="{ open, close }" :class="ui.wrapper" @mouseleave="onMouseLeave">
-    <PopoverButton
+  <HPopover v-slot="{ open, close }" :class="ui.wrapper" @mouseleave="onMouseLeave">
+    <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">
-        <PopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
+      <Transition appear v-bind="ui.transition">
+        <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
          <slot name="panel" :open="open" :close="close" />
-        </PopoverPanel>
-      </transition>
+        </HPopoverPanel>
+      </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,
-    PopoverButton,
-    PopoverPanel
+    HPopover,
+    HPopoverButton,
+    HPopoverPanel
  },
  props: {
    mode: {
--- a/src/runtime/components/overlays/Slideover.vue
+++ b/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
-    Dialog,
-    DialogPanel,
+    HDialog,
+    HDialogPanel,
    TransitionRoot,
    TransitionChild
  },
--- a/src/runtime/components/overlays/Tooltip.vue
+++ b/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>