@nuxt/ui 2.18.4 → 3.0.0-alpha.1

package/dist/runtime/components/Modal.vue

@@ -0,0 +1,163 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/modal'
+import type { ButtonProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { modal: Partial<typeof theme> } }
+
+const modal = tv({ extend: tv(theme), ...(appConfig.ui?.modal || {}) })
+
+export interface ModalProps extends DialogRootProps {
+  title?: string
+  description?: string
+  /** The content of the modal. */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render an overlay behind the modal.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Animate the modal when opening or closing.
+   * @defaultValue true
+   */
+  transition?: boolean
+  /**
+   * When `true`, the modal will take up the full screen.
+   * @defaultValue false
+   */
+  fullscreen?: boolean
+  /**
+   * Render the modal in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * Display a close button to dismiss the modal.
+   * `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  closeIcon?: string
+  /**
+   * When `true`, the modal will not close when clicking outside.
+   * @defaultValue false
+   */
+  preventClose?: boolean
+  class?: any
+  ui?: Partial<typeof modal.slots>
+}
+
+export interface ModalEmits extends DialogRootEmits {}
+
+export interface ModalSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+  header(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  close(props: { ui: any }): any
+  body(props?: {}): any
+  footer(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import UButton from './Button.vue'
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  close: true,
+  portal: true,
+  overlay: true,
+  transition: true,
+  modal: true
+})
+const emits = defineEmits<ModalEmits>()
+const slots = defineSlots<ModalSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const contentProps = toRef(() => props.content)
+const contentEvents = computed(() => {
+  if (props.preventClose) {
+    return {
+      pointerDownOutside: (e: Event) => e.preventDefault(),
+      interactOutside: (e: Event) => e.preventDefault()
+    }
+  }
+
+  return {}
+})
+
+const appConfig = useAppConfig()
+
+const ui = computed(() => modal({
+  transition: props.transition,
+  fullscreen: props.fullscreen
+}))
+</script>
+
+<template>
+  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+    <DialogTrigger v-if="!!slots.default" as-child>
+      <slot :open="open" />
+    </DialogTrigger>
+
+    <DialogPortal :disabled="!portal">
+      <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+
+      <DialogContent :class="ui.content({ class: [props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+        <slot name="content">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
+            <slot name="header">
+              <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+                <slot name="title">
+                  {{ title }}
+                </slot>
+              </DialogTitle>
+
+              <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                <slot name="description">
+                  {{ description }}
+                </slot>
+              </DialogDescription>
+
+              <DialogClose as-child>
+                <slot name="close" :ui="ui">
+                  <UButton
+                    v-if="close"
+                    :icon="closeIcon || appConfig.ui.icons.close"
+                    size="md"
+                    color="gray"
+                    variant="ghost"
+                    aria-label="Close"
+                    v-bind="typeof close === 'object' ? close : undefined"
+                    :class="ui.close({ class: props.ui?.close })"
+                  />
+                </slot>
+              </DialogClose>
+            </slot>
+          </div>
+
+          <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+            <slot name="body" />
+          </div>
+
+          <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+            <slot name="footer" />
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/dist/runtime/components/ModalProvider.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { useModal, modalInjectionKey } from '../composables/useModal'
+
+const modalState = inject(modalInjectionKey)
+
+const { isOpen } = useModal()
+</script>
+
+<template>
+  <component :is="modalState.component" v-if="modalState" v-bind="modalState.props" v-model:open="isOpen" />
+</template>

package/dist/runtime/components/NavigationMenu.vue

@@ -0,0 +1,195 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuItemProps, NavigationMenuContentProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/navigation-menu'
+import type { AvatarProps, BadgeProps, LinkProps } from '../types'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }
+
+const navigationMenu = tv({ extend: tv(theme), ...(appConfig.ui?.navigationMenu || {}) })
+
+export interface NavigationMenuChildItem extends Omit<LinkProps, 'raw' | 'custom'> {
+  label: string
+  description?: string
+  icon?: string
+  select?(e: Event): void
+}
+
+export interface NavigationMenuItem extends Omit<LinkProps, 'raw' | 'custom'>, Pick<NavigationMenuItemProps, 'value'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  badge?: string | number | BadgeProps
+  trailingIcon?: string
+  slot?: string
+  children?: NavigationMenuChildItem[]
+  select?(e: Event): void
+}
+
+type NavigationMenuVariants = VariantProps<typeof navigationMenu>
+
+export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'modelValue' | 'skipDelayDuration'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  /**
+   * The icon displayed to open the menu.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   */
+  trailingIcon?: string
+  items?: T[] | T[][]
+  color?: NavigationMenuVariants['color']
+  variant?: NavigationMenuVariants['variant']
+  /**
+   * The orientation of the menu.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: NavigationMenuRootProps['orientation']
+  /** Display a line next to the active item. */
+  highlight?: boolean
+  highlightColor?: NavigationMenuVariants['highlightColor']
+  /** The content of the menu. */
+  content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean
+  class?: any
+  ui?: Partial<typeof navigationMenu.slots>
+}
+
+export interface NavigationMenuEmits extends NavigationMenuRootEmits {}
+
+type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
+
+export type NavigationMenuSlots<T extends { slot?: string }> = {
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script setup lang="ts" generic="T extends NavigationMenuItem">
+import { computed, toRef } from 'vue'
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import ULinkBase from './LinkBase.vue'
+import ULink from './Link.vue'
+import UAvatar from './Avatar.vue'
+import UIcon from './Icon.vue'
+import UBadge from './Badge.vue'
+import { pickLinkProps } from '../utils/link'
+
+const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
+  orientation: 'horizontal',
+  delayDuration: 0
+})
+const emits = defineEmits<NavigationMenuEmits>()
+const slots = defineSlots<NavigationMenuSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'delayDuration', 'skipDelayDuration', 'orientation'), emits)
+const contentProps = toRef(() => props.content)
+
+const ui = computed(() => navigationMenu({
+  orientation: props.orientation,
+  color: props.color,
+  variant: props.variant,
+  highlight: props.highlight,
+  highlightColor: props.highlightColor || props.color
+}))
+
+const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as T[][] : [])
+</script>
+
+<template>
+  <NavigationMenuRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
+      <NavigationMenuList :class="ui.list({ class: props.ui?.list })">
+        <NavigationMenuItem v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :value="item.value || String(index)" :class="ui.item({ class: props.ui?.item })">
+          <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+            <component
+              :is="item.children?.length ? NavigationMenuTrigger : NavigationMenuLink"
+              v-bind="item.children?.length ? { disabled: item.disabled } : { active }"
+              as-child
+              :active="active"
+              @select="item.select"
+            >
+              <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active, disabled: !!item.disabled })">
+                <slot :name="item.slot || 'item'" :item="item" :index="index">
+                  <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="item" :active="active" :index="index">
+                    <UAvatar v-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
+                    <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active, disabled: !!item.disabled })" />
+                  </slot>
+
+                  <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+                    <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="active" :index="index">
+                      {{ item.label }}
+                    </slot>
+
+                    <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: props.ui?.linkLabelExternalIcon, active })" />
+                  </span>
+
+                  <span v-if="item.badge || (item.children?.length && orientation === 'horizontal') || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
+                    <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="item" :active="active" :index="index">
+                      <UBadge
+                        v-if="item.badge"
+                        color="gray"
+                        variant="outline"
+                        :size="((props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
+                        v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
+                        :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
+                      />
+                      <UIcon v-if="item.children?.length && orientation === 'horizontal'" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
+                    </slot>
+                  </span>
+                </slot>
+              </ULinkBase>
+            </component>
+
+            <NavigationMenuContent v-if="item.children?.length && orientation === 'horizontal'" v-bind="contentProps" :class="ui.content({ class: props.ui?.content })">
+              <ul :class="ui.childList({ class: props.ui?.childList })">
+                <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.ui?.childItem })">
+                  <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
+                    <NavigationMenuLink as-child :active="childActive" @select="childItem.select">
+                      <ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, childItem.class], active: childActive })">
+                        <UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: props.ui?.childLinkIcon, active: childActive })" />
+
+                        <div :class="ui.childLinkWrapper({ class: props.ui?.childLinkWrapper })">
+                          <p :class="ui.childLinkLabel({ class: props.ui?.childLinkLabel, active: childActive })">
+                            {{ childItem.label }}
+
+                            <UIcon v-if="childItem.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: props.ui?.childLinkLabelExternalIcon, active: childActive })" />
+                          </p>
+                          <p v-if="childItem.description" :class="ui.childLinkDescription({ class: props.ui?.childLinkDescription, active: childActive })">
+                            {{ childItem.description }}
+                          </p>
+                        </div>
+                      </ULinkBase>
+                    </NavigationMenuLink>
+                  </ULink>
+                </li>
+              </ul>
+            </NavigationMenuContent>
+          </ULink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+
+      <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" />
+    </template>
+
+    <div v-if="orientation === 'horizontal'" :class="ui.viewportWrapper({ class: props.ui?.viewportWrapper })">
+      <NavigationMenuIndicator v-if="arrow" :class="ui.indicator({ class: props.ui?.indicator })">
+        <div :class="ui.arrow({ class: props.ui?.arrow })" />
+      </NavigationMenuIndicator>
+
+      <NavigationMenuViewport :class="ui.viewport({ class: props.ui?.viewport })" />
+    </div>
+  </NavigationMenuRoot>
+</template>

package/dist/runtime/components/Pagination.vue

@@ -0,0 +1,173 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { PaginationRootProps, PaginationRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import type { RouteLocationRaw } from '#vue-router'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/pagination'
+import type { ButtonProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { pagination: Partial<typeof theme> } }
+
+const pagination = tv({ extend: tv(theme), ...(appConfig.ui?.pagination || {}) })
+
+export interface PaginationProps extends Pick<PaginationRootProps, 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  /**
+   * The icon to use for the first page control.
+   * @defaultValue appConfig.ui.icons.chevronDoubleLeft
+   */
+  firstIcon?: string
+  /**
+   * The icon to use for the previous page control.
+   * @defaultValue appConfig.ui.icons.chevronLeft
+   */
+  prevIcon?: string
+  /**
+   * The icon to use for the next page control.
+   * @defaultValue appConfig.ui.icons.chevronRight
+   */
+  nextIcon?: string
+  /**
+   * The icon to use for the last page control.
+   * @defaultValue appConfig.ui.icons.chevronDoubleRight
+   */
+  lastIcon?: string
+  /**
+   * The icon to use for the ellipsis control.
+   * @defaultValue appConfig.ui.icons.ellipsis
+   */
+  ellipsisIcon?: string
+  /**
+   * The color of the pagination controls.
+   * @defaultValue 'white'
+   */
+  color?: ButtonProps['color']
+  /**
+   * The variant of the pagination controls.
+   * @defaultValue 'solid'
+   */
+  variant?: ButtonProps['variant']
+  /**
+   * The color of the active pagination control.
+   * @defaultValue 'black'
+   */
+  activeColor?: ButtonProps['color']
+  /**
+   * The variant of the active pagination control.
+   * @defaultValue 'solid'
+   */
+  activeVariant?: ButtonProps['variant']
+  /**
+   * Whether to show the first, previous, next, and last controls.
+   * @defaultValue true
+   */
+  showControls?: boolean
+  size?: ButtonProps['size']
+  /**
+   * A function to render page controls as links.
+   * @param page The page number to navigate to.
+   */
+  to?: (page: number) => RouteLocationRaw
+  class?: any
+  ui?: Partial<typeof pagination.slots>
+}
+
+export interface PaginationEmits extends PaginationRootEmits {}
+
+export interface PaginationSlots {
+  first(props?: {}): any
+  prev(props?: {}): any
+  next(props?: {}): any
+  last(props?: {}): any
+  ellipsis(props?: {}): any
+  item(props: {
+    page: number
+    pageCount: number
+    item: {
+      type: 'ellipsis'
+    } | {
+      type: 'page'
+      value: number
+    }
+    index: number
+  }): any
+}
+</script>
+
+<script setup lang="ts">
+import { PaginationRoot, PaginationList, PaginationListItem, PaginationFirst, PaginationPrev, PaginationEllipsis, PaginationNext, PaginationLast, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  color: 'gray',
+  activeColor: 'primary',
+  variant: 'outline',
+  activeVariant: 'solid',
+  showControls: true
+})
+const emits = defineEmits<PaginationEmits>()
+const slots = defineSlots<PaginationSlots>()
+
+const appConfig = useAppConfig()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emits)
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = pagination()
+</script>
+
+<template>
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })">
+      <PaginationFirst v-if="showControls || !!slots.first" as-child>
+        <slot name="first">
+          <UButton :color="color" :variant="variant" :size="size" :icon="firstIcon || appConfig.ui.icons.chevronDoubleLeft" :to="to?.(1)" />
+        </slot>
+      </PaginationFirst>
+      <PaginationPrev v-if="showControls || !!slots.prev" as-child>
+        <slot name="prev">
+          <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon || appConfig.ui.icons.chevronLeft" :to="page > 1 ? to?.(page - 1) : undefined" />
+        </slot>
+      </PaginationPrev>
+
+      <template v-for="(item, index) in items">
+        <PaginationListItem v-if="item.type === 'page'" :key="index" as-child :value="item.value">
+          <slot name="item" v-bind="{ item, index, page, pageCount }">
+            <UButton
+              :color="page === item.value ? activeColor : color"
+              :variant="page === item.value ? activeVariant : variant"
+              :size="size"
+              :label="String(item.value)"
+              :ui="{ label: ui.label() }"
+              :to="to?.(item.value)"
+              square
+            />
+          </slot>
+        </PaginationListItem>
+
+        <PaginationEllipsis v-else :key="item.type" :index="index" as-child>
+          <slot name="ellipsis">
+            <UButton :color="color" :variant="variant" :size="size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" :class="ui.ellipsis({ class: props.ui?.ellipsis })" />
+          </slot>
+        </PaginationEllipsis>
+      </template>
+
+      <PaginationNext v-if="showControls || !!slots.next" as-child>
+        <slot name="next">
+          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon || appConfig.ui.icons.chevronRight" :to="page < pageCount ? to?.(pageCount) : undefined" />
+        </slot>
+      </PaginationNext>
+      <PaginationLast v-if="showControls || !!slots.last" as-child>
+        <slot name="last">
+          <UButton :color="color" :variant="variant" :size="size" :icon="lastIcon || appConfig.ui.icons.chevronDoubleRight" :to=" to?.(pageCount)" />
+        </slot>
+      </PaginationLast>
+    </PaginationList>
+  </PaginationRoot>
+</template>

package/dist/runtime/components/Popover.vue

@@ -0,0 +1,88 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverArrowProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/popover'
+
+const appConfig = _appConfig as AppConfig & { ui: { popover: Partial<typeof theme> } }
+
+const popover = tv({ extend: tv(theme), ...(appConfig.ui?.popover || {}) })
+
+export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
+  /**
+   * The display mode of the popover.
+   * @defaultValue 'click'
+   */
+  mode?: 'click' | 'hover'
+  /**
+   * The content of the popover.
+   * @defaultValue { side: 'bottom', sideOffset: 8 }
+   */
+  content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the popover.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<PopoverArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the popover in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof popover.slots>
+}
+
+export interface PopoverEmits extends PopoverRootEmits {}
+
+export interface PopoverSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { defu } from 'defu'
+import { useForwardPropsEmits } from 'radix-vue'
+import { Popover, HoverCard } from 'radix-vue/namespaced'
+import { reactivePick } from '@vueuse/core'
+
+const props = withDefaults(defineProps<PopoverProps>(), {
+  portal: true,
+  mode: 'click',
+  openDelay: 0,
+  closeDelay: 0
+})
+const emits = defineEmits<PopoverEmits>()
+const slots = defineSlots<PopoverSlots>()
+
+const pick = props.mode === 'hover' ? reactivePick(props, 'defaultOpen', 'open', 'openDelay', 'closeDelay') : reactivePick(props, 'defaultOpen', 'open', 'modal')
+const rootProps = useForwardPropsEmits(pick, emits)
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8 }) as PopoverContentProps)
+const arrowProps = toRef(() => props.arrow as PopoverArrowProps)
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => popover({
+  side: contentProps.value.side
+}))
+
+const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
+</script>
+
+<template>
+  <Component.Root v-slot="{ open }" v-bind="rootProps">
+    <Component.Trigger v-if="!!slots.default" as-child>
+      <slot :open="open" />
+    </Component.Trigger>
+
+    <Component.Portal :disabled="!portal">
+      <Component.Content v-bind="contentProps" :class="ui.content({ class: [props.class, props.ui?.content] })">
+        <slot name="content" />
+
+        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+      </Component.Content>
+    </Component.Portal>
+  </Component.Root>
+</template>