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>