From 34e1e393f7c8d71e5673de9fe1db0d56b78c93f7 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Thu, 7 Jul 2022 00:18:45 +0800
Subject: [PATCH] fix(popover): scrollable with header or footer

---
 src/popover/demos/enUS/slots.demo.vue |  4 +---
 src/popover/demos/zhCN/slots.demo.vue |  4 +---
 src/popover/src/PopoverBody.tsx       | 16 +++++++---------
 src/popover/src/styles/index.cssr.ts  | 26 +++++++++++++-------------
 4 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/popover/demos/enUS/slots.demo.vue b/src/popover/demos/enUS/slots.demo.vue
index 7525cd6be..c006882cc 100644
--- a/src/popover/demos/enUS/slots.demo.vue
+++ b/src/popover/demos/enUS/slots.demo.vue
@@ -16,9 +16,7 @@ Use `header` or `footer` slot to customize header or footer.
     </template>
     Content.
     <template #footer>
-      <n-text strong depth="1">
-        Divider is on the top.
-      </n-text>
+      Divider is on the top.
     </template>
   </n-popover>
 </template>
diff --git a/src/popover/demos/zhCN/slots.demo.vue b/src/popover/demos/zhCN/slots.demo.vue
index 63d2e8abf..f254a22dd 100644
--- a/src/popover/demos/zhCN/slots.demo.vue
+++ b/src/popover/demos/zhCN/slots.demo.vue
@@ -16,9 +16,7 @@
     </template>
     内容
     <template #footer>
-      <n-text strong depth="1">
-        上面就是分割线
-      </n-text>
+      上面就是分割线
     </template>
   </n-popover>
 </template>
diff --git a/src/popover/src/PopoverBody.tsx b/src/popover/src/PopoverBody.tsx
index fc9fb2c8e..c069111b9 100644
--- a/src/popover/src/PopoverBody.tsx
+++ b/src/popover/src/PopoverBody.tsx
@@ -278,12 +278,10 @@ export default defineComponent({
       if (!renderBody) {
         const { value: extraClass } = NPopover.extraClassRef
         const { internalTrapFocus } = props
+        const hasHeaderOrFooter =
+          !isSlotEmpty(slots.header) || !isSlotEmpty(slots.footer)
         const renderContentInnerNode = (): VNodeChild[] => {
-          const hasContent =
-            !isSlotEmpty(slots.header) ||
-            !isSlotEmpty(slots.footer) ||
-            !isSlotEmpty(slots.default)
-          const body = hasContent ? (
+          const body = hasHeaderOrFooter ? (
             <>
               {resolveWrappedSlot(slots.header, (children) => {
                 return children ? (
@@ -329,9 +327,11 @@ export default defineComponent({
           const maybeScrollableBody = props.scrollable ? (
             <NxScrollbar
               contentClass={
-                !hasContent ? undefined : `${mergedClsPrefix}-popover__content`
+                hasHeaderOrFooter
+                  ? undefined
+                  : `${mergedClsPrefix}-popover__content`
               }
-              contentStyle={!hasContent ? undefined : props.contentStyle}
+              contentStyle={hasHeaderOrFooter ? undefined : props.contentStyle}
             >
               {{
                 default: () => body
@@ -348,8 +348,6 @@ export default defineComponent({
             : null
           return [maybeScrollableBody, arrow]
         }
-        const hasHeaderOrFooter =
-          !isSlotEmpty(slots.header) || !isSlotEmpty(slots.footer)
         contentNode = h(
           'div',
           mergeProps(
diff --git a/src/popover/src/styles/index.cssr.ts b/src/popover/src/styles/index.cssr.ts
index f4d5c66b3..9eb15508d 100644
--- a/src/popover/src/styles/index.cssr.ts
+++ b/src/popover/src/styles/index.cssr.ts
@@ -115,55 +115,55 @@ export default c([
     `)
   ]),
   placementStyle('top-start', `
-    top: calc(${arrowSize} / -2 + 1px);
+    top: calc(${arrowSize} / -2);
     left: calc(${getArrowOffset('top-start')} - var(--v-offset-left));
   `),
   placementStyle('top', `
-    top: calc(${arrowSize} / -2 + 1px);
+    top: calc(${arrowSize} / -2);
     transform: translateX(calc(${arrowSize} / -2)) rotate(45deg);
     left: 50%;
   `),
   placementStyle('top-end', `
-    top: calc(${arrowSize} / -2 + 1px);
+    top: calc(${arrowSize} / -2);
     right: calc(${getArrowOffset('top-end')} + var(--v-offset-left));
   `),
   placementStyle('bottom-start', `
-    bottom: calc(${arrowSize} / -2 + 1px);
+    bottom: calc(${arrowSize} / -2);
     left: calc(${getArrowOffset('bottom-start')} - var(--v-offset-left));
   `),
   placementStyle('bottom', `
-    bottom: calc(${arrowSize} / -2 + 1px);
+    bottom: calc(${arrowSize} / -2);
     transform: translateX(calc(${arrowSize} / -2)) rotate(45deg);
     left: 50%;
   `),
   placementStyle('bottom-end', `
-    bottom: calc(${arrowSize} / -2 + 1px);
+    bottom: calc(${arrowSize} / -2);
     right: calc(${getArrowOffset('bottom-end')} + var(--v-offset-left));
   `),
   placementStyle('left-start', `
-    left: calc(${arrowSize} / -2 + 1px);
+    left: calc(${arrowSize} / -2);
     top: calc(${getArrowOffset('left-start')} - var(--v-offset-top));
   `),
   placementStyle('left', `
-    left: calc(${arrowSize} / -2 + 1px);
+    left: calc(${arrowSize} / -2);
     transform: translateY(calc(${arrowSize} / -2)) rotate(45deg);
     top: 50%;
   `),
   placementStyle('left-end', `
-    left: calc(${arrowSize} / -2 + 1px);
+    left: calc(${arrowSize} / -2);
     bottom: calc(${getArrowOffset('left-end')} + var(--v-offset-top));
   `),
   placementStyle('right-start', `
-    right: calc(${arrowSize} / -2 + 1px);
+    right: calc(${arrowSize} / -2);
     top: calc(${getArrowOffset('right-start')} - var(--v-offset-top));
   `),
   placementStyle('right', `
-    right: calc(${arrowSize} / -2 + 1px);
+    right: calc(${arrowSize} / -2);
     transform: translateY(calc(${arrowSize} / -2)) rotate(45deg);
     top: 50%;
   `),
   placementStyle('right-end', `
-    right: calc(${arrowSize} / -2 + 1px);
+    right: calc(${arrowSize} / -2);
     bottom: calc(${getArrowOffset('right-end')} + var(--v-offset-top));
   `),
   ...map(
@@ -231,7 +231,7 @@ function placementStyle (
         left: 0;
         top: 0;
         bottom: 0;
-        ${position}: calc(100% - 1px);
+        ${position}: 100%;
         ${oppositePlacement[position]}: auto;
         ${sizeStyle}
       `, [