feat(element): pass themeVars to default slot & add abstract prop (#146)

CHANGELOG.en-US.md

@@ -5,6 +5,8 @@
 ### Feats
 
 - `n-drawer-content` add `closable` prop, closes [#139](https://github.com/TuSimple/naive-ui/issues/139).
+- `n-element` pass `themeVars` to default slot.
+- `n-element` add `abstract` prop.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -5,6 +5,8 @@
 ### Feats
 
 - `n-drawer-content` 新增 `closable` 属性，关闭 [#139](https://github.com/TuSimple/naive-ui/issues/139)
+- `n-element` 向 default slot 传递 `themeVars`
+- `n-element` 新增 `abstract` 属性
 
 ### Fixes
 

src/element/demos/enUS/color.demo.md

@@ -1,8 +1,6 @@
-# 样式方案（弃用）
+# Theme Variabls
 
-它也可以获得 Style Scheme。
-
-确保你理解这些颜色的含义，请看[使用样式方案的注意事项](../doc/n-theme#style-scheme)。
+You can get theme variables from default slot.
 
 ```html
 <n-element tag="div" class="myel" style="overflow: auto;" #="{ themeVars }">

src/element/demos/enUS/index.demo-entry.md

@@ -1,21 +1,23 @@
 # Element
 
-Element has many CSS variables provided by Naive UI.
+Element has many theme variables provided by Naive UI.
 
 ## Demos
 
 ```demo
 basic
+color
 ```
 
 ## Props
 
-| Name | Type     | Default | Description                                |
-| ---- | -------- | ------- | ------------------------------------------ |
-| tag  | `string` | `'div'` | The tag `n-element` should be rendered as. |
+| Name     | Type      | Default | Description                                |
+| -------- | --------- | ------- | ------------------------------------------ |
+| abstract | `boolean` | `false` | Whether to render a wrapper DOM.           |
+| tag      | `string`  | `'div'` | The tag `n-element` should be rendered as. |
 
 ## Slots
 
-| Name    | Parameters | Description |
-| ------- | ---------- | ----------- |
-| default | `()`       |             |
+| Name    | Parameters                     | Description |
+| ------- | ------------------------------ | ----------- |
+| default | `(themeVars: CommonThemeVars)` |             |

src/element/demos/zhCN/color.demo.md

@@ -0,0 +1,16 @@
+# 主题变量
+
+你可以从 default slot 获取主题变量。
+
+```html
+<n-element tag="div" class="myel" style="overflow: auto;" #="{ themeVars }">
+  <pre
+    :style="{
+      color: themeVars.secondaryTextColor,
+      transition: `color .3s ${themeVars.easeInOutCubicBezier}`
+    }"
+  >
+{{ JSON.stringify(themeVars, 0, 2) }}</pre
+  >
+</n-element>
+```

src/element/demos/zhCN/index.demo-entry.md

@@ -1,22 +1,23 @@
 # 元素 Element
 
-Element 上面有很多 Naive UI 提供的 CSS 变量。
+Element 上面有很多 Naive UI 提供的主题变量。
 
 ## 演示
 
 ```demo
 basic
-color-debug
+color
 ```
 
 ## Props
 
-| 名称 | 类型     | 默认值  | 说明                           |
-| ---- | -------- | ------- | ------------------------------ |
-| tag  | `string` | `'div'` | `n-element` 需要渲染为什么元素 |
+| 名称     | 类型      | 默认值  | 说明                           |
+| -------- | --------- | ------- | ------------------------------ |
+| abstract | `boolean` | `false` | 是否渲染一个 Wrapper DOM       |
+| tag      | `string`  | `'div'` | `n-element` 需要渲染为什么元素 |
 
 ## Slots
 
-| 名称    | 参数 | 说明 |
-| ------- | ---- | ---- |
-| default | `()` |      |
+| 名称    | 参数                           | 说明 |
+| ------- | ------------------------------ | ---- |
+| default | `(themeVars: CommonThemeVars)` |      |

src/element/src/Element.ts

@@ -1,8 +1,7 @@
-import { computed, h, defineComponent, PropType } from 'vue'
+import { computed, h, defineComponent } from 'vue'
 import { kebabCase } from 'lodash-es'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
-import { warn } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import { elementLight } from '../styles'
 import type { ElementTheme } from '../styles'
@@ -13,23 +12,7 @@ const elementProps = {
     type: String,
     default: 'div'
   },
-  // deprecated
-  onThemeChange: {
-    type: Function as PropType<(theme: string | undefined) => void>,
-    validator: () => {
-      warn('element', '`on-theme-change` is deprecated.')
-      return true
-    },
-    default: undefined
-  },
-  as: {
-    type: String,
-    validator: () => {
-      warn('element', '`as` is deprecated, please use `tag` instead.')
-      return true
-    },
-    default: undefined
-  }
+  abstract: Boolean
 } as const
 
 export type ElementProps = ExtractPublicPropTypes<typeof elementProps>
@@ -64,15 +47,18 @@ export default defineComponent({
   },
   render () {
     const {
-      as,
-      tag,
-      mergedClsPrefix,
       $slots,
-      cssVars,
+      abstract,
       mergedTheme: { common }
     } = this
+    if (abstract) {
+      return $slots.default?.({
+        themeVars: common
+      })
+    }
+    const { tag, mergedClsPrefix, cssVars } = this
     return h(
-      as || tag,
+      tag,
       {
         class: `${mergedClsPrefix}-element`,
         style: cssVars

src/progress/demos/enUS/color.demo.md

@@ -3,7 +3,7 @@
 If you are not satisfied with builtin colors.
 
 ```html
-<n-element #="{ themeVars }">
+<n-element #="{ themeVars }" abstract>
   <n-progress
     style="margin: 0 8px 12px 0;"
     type="circle"

src/progress/demos/zhCN/color.demo.md

@@ -3,7 +3,7 @@
 如果你觉得内置的颜色不行 🙅‍♂️。
 
 ```html
-<n-element #="{ themeVars }">
+<n-element #="{ themeVars }" abstract>
   <n-progress
     style="margin: 0 8px 12px 0;"
     type="circle"