feat(Popover): new

playground/app.vue

@@ -5,14 +5,14 @@ useHead({
   }
 })
 
-const components = ['avatar', 'badge', 'button', 'collapsible', 'kbd', 'tooltip']
+const components = ['avatar', 'badge', 'button', 'collapsible', 'kbd', 'popover', 'tooltip']
 </script>
 
 <template>
   <UProvider>
     <UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center overflow-y-auto">
       <div class="flex gap-1.5 py-4">
-        <ULink v-for="component in components" :key="component" :to="`/${component}`" active-class="text-primary capitalize text-sm">
+        <ULink v-for="component in components" :key="component" :to="`/${component}`" active-class="text-primary-500 dark:text-primary-400 font-medium" class="capitalize text-sm">
           {{ component }}
         </ULink>
       </div>

playground/pages/popover.vue

@@ -0,0 +1,26 @@
+<template>
+  <UPopover v-model:open="open" arrow>
+    <UButton label="Click me" color="white" />
+
+    <template #content>
+      <div class="flex gap-2 p-4">
+        <UButton label="Close" color="gray" @click="open = false" />
+        <UButton label="Send" color="black" trailing-icon="i-heroicons-paper-airplane" :loading="loading" @click="send" />
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<script setup>
+const open = ref(false)
+const loading = ref(false)
+
+function send () {
+  loading.value = true
+
+  setTimeout(() => {
+    loading.value = false
+    open.value = false
+  }, 1000)
+}
+</script>

src/runtime/components/Popover.vue

@@ -0,0 +1,145 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { PopoverRootProps, PopoverRootEmits, PopoverContentProps, PopoverArrowProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/popover'
+import type { KbdProps } from '#ui/components/Kbd.vue'
+
+const appConfig = _appConfig as AppConfig & { ui: { popover: Partial<typeof theme> } }
+
+const popover = tv({ extend: tv(theme), ...(appConfig.ui?.popover || {}) })
+
+export interface PopoverProps extends PopoverRootProps {
+  text?: string
+  shortcuts?: string[] | KbdProps[]
+  content?: Omit<PopoverContentProps, 'as' | 'asChild'>
+  arrow?: boolean | Omit<PopoverArrowProps, 'as' | 'asChild'>
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof popover.slots>
+}
+
+export interface PopoverEmits extends PopoverRootEmits {}
+
+export interface PopoverSlots {
+  default(): any
+  content(): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { defu } from 'defu'
+import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent, PopoverArrow, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = defineProps<PopoverProps>()
+const emits = defineEmits<PopoverEmits>()
+defineSlots<PopoverSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'modal'), emits)
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8 }) as PopoverContentProps)
+const arrowProps = toRef(() => props.arrow as PopoverArrowProps)
+
+const ui = computed(() => tv({ extend: popover, slots: props.ui })())
+</script>
+
+<template>
+  <PopoverRoot v-bind="rootProps">
+    <PopoverTrigger as-child>
+      <slot />
+    </PopoverTrigger>
+
+    <PopoverPortal :disabled="!portal">
+      <PopoverContent v-bind="contentProps" :class="ui.content({ class: props.class })">
+        <slot name="content" />
+
+        <PopoverArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow()" />
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>
+
+<style>
+@keyframes popover-down-open {
+  from {
+    opacity: 0;
+    transform: translateY(-0.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes popover-down-closed {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-0.25rem);
+  }
+}
+@keyframes popover-right-open {
+  from {
+    opacity: 0;
+    transform: translateX(-0.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes popover-right-closed {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-0.25rem);
+  }
+}
+@keyframes popover-up-open {
+  from {
+    opacity: 0;
+    transform: translateY(0.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes popover-up-closed {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(0.25rem);
+  }
+}
+@keyframes popover-left-open {
+  from {
+    opacity: 0;
+    transform: translateX(0.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes popover-left-closed {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(0.25rem);
+  }
+}
+</style>

src/theme/index.ts

@@ -5,4 +5,5 @@ export { default as collapsible } from './collapsible'
 export { default as container } from './container'
 export { default as icons } from './icons'
 export { default as kbd } from './kbd'
+export { default as popover } from './popover'
 export { default as tooltip } from './tooltip'

src/theme/popover.ts

@@ -0,0 +1,6 @@
+export default {
+  slots: {
+    content: 'bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-[popover-down-open_200ms_ease-out] data-[state=closed]:data-[side=top]:animate-[popover-down-closed_200ms_ease-in] data-[state=open]:data-[side=right]:animate-[popover-left-open_200ms_ease-out] data-[state=closed]:data-[side=right]:animate-[popover-left-closed_200ms_ease-in] data-[state=open]:data-[side=left]:animate-[popover-right-open_200ms_ease-out] data-[state=closed]:data-[side=left]:animate-[popover-right-closed_200ms_ease-in] data-[state=open]:data-[side=bottom]:animate-[popover-up-open_200ms_ease-out] data-[state=closed]:data-[side=bottom]:animate-[popover-up-closed_200ms_ease-in]',
+    arrow: 'fill-gray-200 dark:fill-gray-800'
+  }
+}

test/components/Popover.spec.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest'
+import Popover, { type PopoverProps } from '../../src/runtime/components/Popover.vue'
+import ComponentRender from '../component-render'
+
+describe('Popover', () => {
+  it.each([
+    ['basic case', { props: { open: true, arrow: true }, slots: { default: () => 'Click me', content: () => 'Popover content' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: PopoverProps, slots?: any }) => {
+    const html = await ComponentRender(nameOrHtml, options, Popover)
+    expect(html).toMatchSnapshot()
+  })
+})

test/components/__snapshots__/Popover.spec.ts.snap

@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Popover > renders basic case correctly 1`] = `
+"Click me
+<!--teleport start-->
+
+
+<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div trapfocus="false" disableoutsidepointerevents="false" id="radix-vue-popover-content-1" data-state="open" role="dialog" style="--radix-popover-content-transform-origin: var(--radix-popper-transform-origin); --radix-popover-content-available-width: var(--radix-popper-available-width); --radix-popover-content-available-height: var(--radix-popper-available-height); --radix-popover-trigger-width: var(--radix-popper-anchor-width); --radix-popover-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" tabindex="-1" class="bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-[popover-down-open_200ms_ease-out] data-[state=closed]:data-[side=top]:animate-[popover-down-closed_200ms_ease-in] data-[state=open]:data-[side=right]:animate-[popover-left-open_200ms_ease-out] data-[state=closed]:data-[side=right]:animate-[popover-left-closed_200ms_ease-in] data-[state=open]:data-[side=left]:animate-[popover-right-open_200ms_ease-out] data-[state=closed]:data-[side=left]:animate-[popover-right-closed_200ms_ease-in] data-[state=open]:data-[side=bottom]:animate-[popover-up-open_200ms_ease-out] data-[state=closed]:data-[side=bottom]:animate-[popover-up-closed_200ms_ease-in]" data-side="bottom" data-align="center">Popover content<span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-gray-200 dark:fill-gray-800" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span></div>
+</div>
+
+
+<!--teleport end-->"
+`;