feat: Popover bottom

Signed-off-by: Tenny <joel.shu@qq.com>

Author: Tenny

docs/components/popover.md

@@ -25,7 +25,7 @@
   </template>
   </textarea>
   <template #preview>
-    <Popover content="Content">
+    <Popover content="Content" placement="bottom">
       <template #trigger>
         <Button @click="click1">悬浮</Button>
       </template>

src/components/Popover.vue

@@ -7,7 +7,6 @@ import {
   ref,
   Transition,
   nextTick,
-  onMounted,
 } from 'vue';
 import type { PropType } from 'vue';
 
@@ -39,8 +38,11 @@ export default defineComponent({
     },
     /** 显示的内容，也可以通过写入默认 slot 修改显示内容 */
     content: String,
+    /** 弹出位置 */
     placement: {
-      type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
+      type: String as PropType<
+        'topStart' | 'top' | 'topEnd' | 'bottomStart' | 'bottom' | 'bottomEnd'
+      >,
       default: 'top',
     },
   },
@@ -49,20 +51,32 @@ export default defineComponent({
 
     const $popover = ref<HTMLDivElement>();
 
-    const posStyle = ref();
+    let closeT: number | undefined;
+
+    const posStyle = ref({});
 
     function handleMouseEnter(e: Event) {
+      if (show.value) {
+        if (closeT != null) {
+          clearTimeout(closeT);
+          closeT = undefined;
+        }
+        return;
+      }
       const $target = e.target as HTMLElement;
       show.value = true;
-      console.log('enter');
       nextTick(() => {
         const { left, top } = getDistanceToContainer($target);
         let offsetTop = 0;
         let offsetLeft = 0;
         if ($popover.value != null) {
           const popoverRect = $popover.value.getBoundingClientRect();
-          offsetTop = popoverRect.height + 10;
           const targetRect = $target.getBoundingClientRect();
+          if (props.placement === 'top') {
+            offsetTop = popoverRect.height + 10;
+          } else if (props.placement === 'bottom') {
+            offsetTop = -(targetRect.height + 10);
+          }
           offsetLeft = popoverRect.width / 2 - targetRect.width / 2;
         }
         posStyle.value = {
@@ -74,7 +88,9 @@ export default defineComponent({
 
     /** 鼠标离开事件 */
     function hanldeMouseLeave() {
-      show.value = false;
+      closeT = setTimeout(() => {
+        show.value = false;
+      }, 150) as any;
     }
 
     function handleClick(e: Event) {
@@ -108,9 +124,25 @@ export default defineComponent({
                       'div',
                       {
                         ...attrs,
-                        class: ['nt-popover', attrs.class],
+                        class: [
+                          'nt-popover',
+                          props.placement.startsWith('top')
+                            ? 'nt-popover-top'
+                            : '',
+                          props.placement.startsWith('bottom')
+                            ? 'nt-popover-bottom'
+                            : '',
+                          props.placement.endsWith('Start')
+                            ? 'nt-popover-start'
+                            : '',
+                          props.placement.endsWith('End')
+                            ? 'nt-popover-end'
+                            : '',
+                          attrs.class,
+                        ],
                         style: [attrs.style, posStyle.value],
                         ref: $popover,
+                        ...prop,
                       },
                       [
                         slots.default != null

style/popover/index.css

@@ -17,7 +17,6 @@
   height: 8px;
   z-index: -1;
   left: 50%;
-  bottom: -4px;
   margin-left: -4px;
 }
 
@@ -30,9 +29,22 @@
   background-color: #ffffff;
   border-width: 1px;
   border-style: solid;
-  border: transparent var(--nt-popover-border-color)
+}
+
+/* top */
+.nt-popover-top .nt-popover-arrow {
+  bottom: -4px;
+}
+.nt-popover-top .nt-popover-arrow::before {
+  border-color: transparent var(--nt-popover-border-color)
     var(--nt-popover-border-color) transparent;
-  box-sizing:
-    inset 0 -0.5px 0 var(--td-gray-color-9),
-    inset -0.5px 0 0 var(--td-gray-color-9);
+}
+
+/* bottom */
+.nt-popover-bottom .nt-popover-arrow {
+  top: -4px;
+}
+.nt-popover-bottom .nt-popover-arrow::before {
+  border-color: var(--nt-popover-border-color) transparent transparent
+    var(--nt-popover-border-color);
 }