refactor(dropdown): use v-binder

package.json

@@ -93,6 +93,6 @@
     "vfonts": "^0.0.1",
     "vooks": "^0.0.1",
     "vue": "^3.0.2",
-    "vueuc": "^0.1.0-alpha.15"
+    "vueuc": "^0.1.0-alpha.17"
   }
 }

src/_directives/zindexable/index.js

@@ -19,7 +19,6 @@ const zindexable = {
     el[ctx].enabled = enabled
   },
   unmounted (el) {
-    // TODO: bug, sometimes vue will unmount popover twice when change route
     if (el[ctx].unmounted) return
     el[ctx].unmounted = true
     zIndexManager.unregisterElement(el)

src/dropdown/src/DropdownOption.js

@@ -1,6 +1,10 @@
 import { h, computed, inject, ref, Transition } from 'vue'
+import {
+  VBinder,
+  VTarget,
+  VFollower
+} from 'vueuc'
 import { render } from '../../_utils/vue'
-import { placeable } from '../../_mixins'
 import { ChevronRightIcon } from '../../_base/icons'
 import NIcon from '../../icon'
 import { useMemo } from 'vooks'
@@ -10,9 +14,6 @@ import { isSubmenuNode } from './utils'
 
 export default {
   name: 'DropdownOption',
-  mixins: [
-    placeable
-  ],
   provide () {
     return {
       NDropdownOption: this
@@ -32,7 +33,7 @@ export default {
       default: null
     },
     placement: {
-      ...placeable.props.placement,
+      type: String,
       default: 'right-start'
     }
   },
@@ -83,31 +84,10 @@ export default {
         const { key } = props.tmNode
         return activeKeyPath.includes(key) || activeKeyPath.includes(key)
       }),
-      // placeable
-      trackingRef: ref(null),
-      offsetContainerRef: ref(null),
-      bodyRef: ref(null),
       NDropdownOption
     }
   },
-  computed: {
-    __placeableEnabled () {
-      return this.mergedShowSubmenu
-    }
-  },
   methods: {
-    __placeableTracking () {
-      return this.trackingRef
-    },
-    __placeableTracked () {
-      return this.offsetContainerRef
-    },
-    __placeableOffsetContainer () {
-      return this.offsetContainerRef
-    },
-    __placeableBody () {
-      return this.bodyRef
-    },
     handleSubmenuBeforeEnter () {
       this.enteringSubmenu = true
     },
@@ -171,7 +151,6 @@ export default {
     } = this
     const submenuVNode = mergedShowSubmenu
       ? h(NDropdownMenu, {
-        ref: 'bodyRef',
         tmNodes: this.tmNode.children,
         parentKey: this.tmNode.key
       })
@@ -222,27 +201,43 @@ export default {
           }) : null
         ])
       ]),
-      this.hasSubmenu ? h('div', {
-        ref: 'offsetContainerRef',
-        class: 'n-dropdown-offset-container'
-      }, [
-        h(
-          'div',
-          {
-            ref: 'trackingRef',
-            class: 'n-dropdown-menu-wrapper'
-          },
-          [
-            animated ? h(Transition, {
-              onBeforeEnter: this.handleSubmenuBeforeEnter,
-              onAfterEnter: this.handleSubmenuAfterEnter,
-              name: 'n-fade-in-scale-up-transition'
-            }, {
-              default: () => submenuVNode
-            }) : submenuVNode
-          ]
-        )
-      ]) : null
+      this.hasSubmenu ? h(VBinder, null, {
+        default: () => {
+          return h(VTarget, null, {
+            default: () => {
+              return h('div', {
+                class: 'n-dropdown-offset-container'
+              }, [
+                h(VFollower, {
+                  show: this.mergedShowSubmenu,
+                  teleportDisabled: true,
+                  placement: this.placement
+                }, {
+                  default: () => {
+                    return h(
+                      'div',
+                      {
+                        class: 'n-dropdown-menu-wrapper'
+                      },
+                      [
+                        animated ? h(Transition, {
+                          onBeforeEnter: this.handleSubmenuBeforeEnter,
+                          onAfterEnter: this.handleSubmenuAfterEnter,
+                          name: 'n-fade-in-scale-up-transition',
+                          appear: true
+                        }, {
+                          default: () => submenuVNode
+                        }) : submenuVNode
+                      ]
+                    )
+                  }
+                })
+              ])
+            }
+          })
+        }
+      })
+        : null
     ])
   }
 }

src/dropdown/src/styles/themed-base.cssr.js

@@ -55,7 +55,8 @@ export default c([
               }),
               cE('suffix', {
                 boxSizing: 'border-box',
-                flex: 1,
+                flexGrow: 0,
+                flexShrink: 0,
                 display: 'flex',
                 justifyContent: 'flex-end',
                 alignItems: 'center',
@@ -100,6 +101,7 @@ export default c([
             pointerEvents: 'all'
           }),
           cB('dropdown-menu-wrapper', {
+            transformOrigin: 'inherit',
             width: 'fit-content'
           })
         ])

src/popover/src/PopoverBody.js

@@ -198,7 +198,7 @@ export default {
           'n-popover--no-arrow': !this.showArrow,
           'n-popover--shadow': this.shadow,
           [this.bodyClass]: this.bodyClass,
-          'n-popover--styled': !this.raw
+          'n-popover--raw': this.raw
         }
       ],
       ref: 'body',

src/popover/src/styles/themed-base.cssr.js

@@ -1,4 +1,4 @@
-import { c, cTB, cB, cM } from '../../../_utils/cssr'
+import { c, cTB, cB, cM, cNotM } from '../../../_utils/cssr'
 import { depx, pxfy } from '../../../_utils/css'
 
 export default c([
@@ -27,9 +27,7 @@ export default c([
           position: relative;
           font-size: 13px;
           color: ${textColor};
-          background-color: ${color};
-          border-radius: ${borderRadius};
-          padding: 8px 14px;
+          
         `
       }, [
         bodyTransition(
@@ -37,6 +35,13 @@ export default c([
           cubicBezierEaseOut,
           cubicBezierEaseIn
         ),
+        cNotM('raw', {
+          raw: `
+            background-color: ${color};
+            border-radius: ${borderRadius};
+            padding: 8px 14px;
+          `
+        }),
         cB('popover-arrow-wrapper', {
           raw: `
             position: absolute;