Merge branch 'TuSimple:main' into main

.github/workflows/node.js.yml

@@ -29,7 +29,3 @@ jobs:
     - run: npm install
     - run: npm run lint
     - run: npm run test:cov
-    - uses: codecov/[email protected]
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-dropdown` support class attr, closes [#180](https://github.com/TuSimple/naive-ui/issues/180).
+
 ## 2.12.0 (2020-06-16)
 
 ### Breaking Changes

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-dropdown` 支持 class 属性，关闭 [#180](https://github.com/TuSimple/naive-ui/issues/180)
+
 ## 2.12.0 (2020-06-16)
 
 ### Feats
@@ -8,7 +14,7 @@
 
 ### Breaking Changes
 
-- 移除了 `n-a` 的 `to` 属性。现在如果你需要把 `n-a` 用作 router-link，你可以参考文档网站。
+- 移除了 `n-a` 的 `to` 属性。现在如果你需要把 `n-a` 用作 router-link，你可以参考文档网站
 
 ### Feats
 

src/_utils/index.ts

@@ -12,7 +12,7 @@ export {
 } from './vue'
 export type { MaybeArray } from './vue'
 export { warn, warnOnce, throwError, smallerSize, largerSize } from './naive'
-export type { ExtractPublicPropTypes } from './naive'
+export type { ExtractPublicPropTypes, ExtractInternalPropTypes } from './naive'
 export { formatLength } from './css'
 export { createKey } from './cssr'
 export * from './composable'

src/_utils/naive/extract-public-props.ts

@@ -7,3 +7,5 @@ export type ExtractPublicPropTypes<T> = Omit<
 Partial<ExtractPropTypes<T>>,
 themePropKeys | Extract<keyof T, `internal${string}`>
 >
+
+export type ExtractInternalPropTypes<T> = Partial<ExtractPropTypes<T>>

src/_utils/naive/index.ts

@@ -1,3 +1,6 @@
 export { warn, warnOnce, throwError } from './warn'
 export { smallerSize, largerSize } from './prop'
-export type { ExtractPublicPropTypes } from './extract-public-props'
+export type {
+  ExtractPublicPropTypes,
+  ExtractInternalPropTypes
+} from './extract-public-props'

src/avatar/tests/Avatar.spec.tsx

@@ -105,7 +105,7 @@ describe('n-avatar', () => {
       },
       render () {
         const { text } = this as any
-        return <NAvatar size="medium">{text}</NAvatar>
+        return <NAvatar size="medium">{{ default: () => text }}</NAvatar>
       }
     }
     const wrapper = mount(AdjustAvatar)

src/collapse/tests/Collapse.spec.tsx

@@ -17,7 +17,6 @@ describe('n-collapse', () => {
         </NCollapse>
       )
     })
-    console.log(wrapper.html())
     expect(wrapper.find('.my-icon').exists()).toEqual(true)
   })
 })

src/dropdown/demos/enUS/cascade.demo.md

@@ -30,8 +30,7 @@ const options = [
         default: () => h(CashIcon)
       })
     },
-    key: 'daisy buchanan',
-    disabled: true
+    key: 'daisy buchanan'
   },
   {
     type: 'divider',

src/dropdown/demos/zhCN/cascade.demo.md

@@ -30,8 +30,7 @@ const options = [
         default: () => h(CashIcon)
       })
     },
-    key: 'daisy buchanan',
-    disabled: true
+    key: 'daisy buchanan'
   },
   {
     type: 'divider',

src/dropdown/src/Dropdown.ts

@@ -9,12 +9,15 @@ import {
   provide,
   CSSProperties,
   InjectionKey,
-  Ref
+  Ref,
+  mergeProps
 } from 'vue'
 import { createTreeMate, Key, TreeMateOptions, TreeNode } from 'treemate'
 import { useMergedState, useKeyboard, useMemo } from 'vooks'
 import { FollowerPlacement } from 'vueuc'
+import type { InternalRenderBody } from '../../popover/src/interface'
 import { popoverBaseProps } from '../../popover/src/Popover'
+import type { PopoverInternalProps } from '../../popover/src/Popover'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { NPopover } from '../../popover'
@@ -363,28 +366,38 @@ export default defineComponent({
     }
   },
   render () {
-    return h(
-      NPopover,
-      keep(this.$props, popoverPropKeys, {
-        show: this.mergedShow,
-        onUpdateShow: this.doUpdateShow,
-        showArrow: false,
-        raw: true,
-        shadow: false,
-        theme: this.mergedTheme.peers.Popover,
-        themeOverrides: this.mergedTheme.peerOverrides.Popover,
-        internalExtraClass: 'dropdown'
-      }),
-      {
-        trigger: this.$slots.default,
-        default: () => {
-          return h(NDropdownMenu, {
-            clsPrefix: this.mergedClsPrefix,
-            tmNodes: this.tmNodes,
-            style: this.cssVars as CSSProperties
-          })
-        }
+    const renderPopoverBody: InternalRenderBody = (
+      className,
+      ref,
+      style,
+      onMouseenter,
+      onMouseleave
+    ) => {
+      const { mergedClsPrefix } = this
+      const dropdownProps = {
+        ref,
+        class: [className, `${mergedClsPrefix}-dropdown`],
+        clsPrefix: mergedClsPrefix,
+        tmNodes: this.tmNodes,
+        style: [style, this.cssVars as CSSProperties],
+        onMouseenter,
+        onMouseleave
       }
-    )
+      return h(
+        NDropdownMenu,
+        mergeProps(this.$attrs, dropdownProps) as typeof dropdownProps
+      )
+    }
+    const { mergedTheme } = this
+    const popoverProps: PopoverInternalProps = {
+      show: this.mergedShow,
+      theme: mergedTheme.peers.Popover,
+      themeOverrides: mergedTheme.peerOverrides.Popover,
+      internalRenderBody: renderPopoverBody,
+      onUpdateShow: this.doUpdateShow
+    }
+    return h(NPopover, keep(this.$props, popoverPropKeys, popoverProps), {
+      trigger: this.$slots.default
+    })
   }
 })