fix(components): prefix @headlessui/vue components

Resolves #315
2026-01-23 00:15:05 +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/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>