fix(popover): use scoped slots to avoid wrong implements in render function

packages/common/Popconfirm/src/main.vue

@@ -22,42 +22,35 @@ export default {
       type: String,
       default: 'click'
     },
-    inFunctionalComponent: {
-      type: Boolean,
-      default: true
-    },
     controller: {
       type: Object,
       default: null
     }
   },
   render (h, context) {
+    const slots = context.scopedSlots
     const controller = context.props.controller || {}
     return h(NPopover, {
       props: {
         ...context.props,
         controller
+      },
+      scopedSlots: {
+        activator: () => slots.activator && slots.activator(),
+        default: () => h(PopconfirmPanel, {
+          props: {
+            ...context.props,
+            controller
+          },
+          on: context.listeners,
+          scopedSlots: {
+            action: () => slots.action && slots.action(),
+            icon: () => slots.icon && slots.icon(),
+            default: () => slots.default && slots.default()
+          }
+        })
       }
-    }, [
-      h('template', {
-        slot: 'activator'
-      }, context.slots().activator),
-      h(PopconfirmPanel, {
-        props: {
-          ...context.props,
-          controller
-        },
-        on: context.listeners
-      }, [
-        h('template', {
-          slot: 'action'
-        }, context.slots().action),
-        h('template', {
-          slot: 'icon'
-        }, context.slots().icon),
-        context.slots().default
-      ])
-    ])
+    })
   }
 }
 </script>

packages/common/Popover/src/main.js

@@ -56,22 +56,12 @@ export default {
     controller: {
       type: Object,
       default: null
-    },
-    /** private props */
-    inFunctionalComponent: {
-      type: Boolean,
-      default: false
     }
   },
   render (h, context) {
-    const slots = context.slots()
-    const defaultSlot = slots.default || []
-    let activatorSlot = slots.activator
-    if (context.props.inFunctionalComponent) {
-      activatorSlot = defaultSlot[0].children
-      defaultSlot.shift()
-    }
-    activatorSlot = activatorSlot || []
+    const slots = context.scopedSlots
+    const defaultSlot = slots.default && slots.default()
+    const activatorSlot = slots.activator && slots.activator()
     const id = genId()
     const props = context.props
     const listeners = context.listeners

packages/common/Popselect/src/main.vue

@@ -48,27 +48,25 @@ export default {
     }
   },
   render (h, context) {
-    const slots = context.slots()
+    const slots = context.scopedSlots
     const controller = context.props.controller || {}
     return h(
       NPopover, {
         props: {
-          inFunctionalComponent: true,
           trigger: 'click',
           controller
+        },
+        scopedSlots: {
+          activator: () => slots.activator(),
+          default: () => h(NPopselectPanel, {
+            props: {
+              ...context.props,
+              controller
+            },
+            on: context.listeners
+          })
         }
-      }, [
-        h('template', {
-          slot: 'activator'
-        }, slots.activator),
-        h(NPopselectPanel, {
-          props: {
-            ...context.props,
-            controller
-          },
-          on: context.listeners
-        }, slots.default)
-      ])
+      })
   }
 }
 </script>

packages/common/Tooltip/src/main.vue

@@ -58,23 +58,22 @@ export default {
     }
   },
   render (h, context) {
+    const slots = context.scopedSlots
     return h(NPopover, {
       on: context.listeners,
       props: {
-        ...context.props,
-        inFunctionalComponent: true
+        ...context.props
+      },
+      scopedSlots: {
+        activator: () => slots.activator && slots.activator(),
+        default: () => h('div', {
+          staticClass: 'n-tooltip__content',
+          class: {
+            'n-tooltip__content--fix-width': context.props.width !== null || context.props.maxWidth !== null
+          }
+        }, slots.default && slots.default())
       }
-    }, [
-      h('template', {
-        slot: 'activator'
-      }, context.slots().activator),
-      h('div', {
-        staticClass: 'n-tooltip__content',
-        class: {
-          'n-tooltip__content--fix-width': context.props.width !== null || context.props.maxWidth !== null
-        }
-      }, context.slots().default)
-    ])
+    })
   }
 }
 </script>