From ff1e54bddd101a4fefffd8c049612236fbe952db Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 23 Aug 2023 15:05:55 +0800
Subject: [PATCH] feat: add popover demo

---
 packages/shadcn-vue/src/App.vue               |  5 +-
 .../shadcn-vue/src/components/ui/Popover.ts   | 29 ++++++++
 .../src/components/ui/PopoverDemo.vue         | 67 +++++++++++++++++++
 3 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 packages/shadcn-vue/src/components/ui/Popover.ts
 create mode 100644 packages/shadcn-vue/src/components/ui/PopoverDemo.vue

diff --git a/packages/shadcn-vue/src/App.vue b/packages/shadcn-vue/src/App.vue
index e2f833c8..89d0308b 100644
--- a/packages/shadcn-vue/src/App.vue
+++ b/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>
diff --git a/packages/shadcn-vue/src/components/ui/Popover.ts b/packages/shadcn-vue/src/components/ui/Popover.ts
new file mode 100644
index 00000000..14eb19fc
--- /dev/null
+++ b/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',
+  },
+)
diff --git a/packages/shadcn-vue/src/components/ui/PopoverDemo.vue b/packages/shadcn-vue/src/components/ui/PopoverDemo.vue
new file mode 100644
index 00000000..3f5de128
--- /dev/null
+++ b/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>