feat: popover (#6)

* feat: add popover demo

* chore: rename parseEmit, fix tsconfig baseURL missing

packages/shadcn-vue/src/App.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import AccordionDemo from './components/ui/AccordionDemo.vue'
+import PopoverDemo from './components/ui/PopoverDemo.vue'
 </script>
 
 <template>
-  <div class="p-8">
+  <div class="p-8 grid gap-8 grid-cols-3 place-items-center">
     <AccordionDemo class="max-w-[20rem]" />
+
+    <PopoverDemo />
   </div>
 </template>

packages/shadcn-vue/src/components/ui/Popover.ts

@@ -0,0 +1,29 @@
+import { defineComponent, h } from 'vue'
+import {
+  type PopoverContentEmits, PopoverContent as PopoverContentPrimitive, type PopoverContentProps,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger as PopoverTriggerPrimitive,
+} from 'radix-vue'
+import { type ParseEmits, cn } from '@/utils'
+
+export const Popover = PopoverRoot
+export const PopoverTrigger = PopoverTriggerPrimitive
+
+export const PopoverContent = defineComponent<PopoverContentProps, ParseEmits<PopoverContentEmits>>(
+  (props, { attrs, slots }) => {
+    return () => h(PopoverPortal,
+      () => h(PopoverContentPrimitive,
+        {
+          align: 'center',
+          sideOffset: 20, // set default value
+
+          ...attrs,
+          ...props,
+          class: cn('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', attrs.class),
+        }, slots),
+    )
+  }, {
+    name: 'PopoverContent',
+  },
+)

packages/shadcn-vue/src/components/ui/PopoverDemo.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from './Popover'
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <button>
+        Open popover
+      </button>
+    </PopoverTrigger>
+    <PopoverContent class="w-80" @open-auto-focus.prevent>
+      <div class="grid gap-4">
+        <div class="space-y-2">
+          <h4 class="font-medium leading-none">
+            Dimensions
+          </h4>
+          <p class="text-sm text-muted-foreground">
+            Set the dimensions for the layer.
+          </p>
+        </div>
+        <div class="grid gap-2">
+          <div class="grid grid-cols-3 items-center gap-4">
+            <label for="width">Width</label>
+            <input
+              id="width"
+              type="text"
+              default-value="100%"
+              class="col-span-2 h-8"
+            >
+          </div>
+          <div class="grid grid-cols-3 items-center gap-4">
+            <label for="maxWidth">Max. width</label>
+            <input
+              id="maxWidth"
+              type="text"
+              default-value="300px"
+              class="col-span-2 h-8"
+            >
+          </div>
+          <div class="grid grid-cols-3 items-center gap-4">
+            <label for="height">Height</label>
+            <input
+              id="height"
+              type="text"
+              default-value="25px"
+              class="col-span-2 h-8"
+            >
+          </div>
+          <div class="grid grid-cols-3 items-center gap-4">
+            <label for="maxHeight">Max. height</label>
+            <input
+              id="maxHeight"
+              type="text"
+              default-value="none"
+              class="col-span-2 h-8"
+            >
+          </div>
+        </div>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>

packages/shadcn-vue/src/utils.ts

@@ -2,7 +2,7 @@ import type { ClassValue } from 'clsx'
 import { clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-export type ShortEmits<T extends Record<string, any>> = {
+export type ParseEmits<T extends Record<string, any>> = {
   [K in keyof T]: (...args: T[K]) => void;
 }
 

packages/shadcn-vue/tsconfig.json

@@ -21,6 +21,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
+    "baseUrl": "./",
     "paths": {
       "@/*": ["src/*"]
     }