From da5d78378f204a2084cce8443ae217a02ff0b50d Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Wed, 16 Jun 2021 14:04:39 +0800 Subject: [PATCH] feat(element): pass `themeVars` to default slot & add `abstract` prop (#146) --- CHANGELOG.en-US.md | 2 ++ CHANGELOG.zh-CN.md | 2 ++ .../color.demo.md} | 6 ++-- src/element/demos/enUS/index.demo-entry.md | 16 +++++---- src/element/demos/zhCN/color.demo.md | 16 +++++++++ src/element/demos/zhCN/index.demo-entry.md | 17 +++++----- src/element/src/Element.ts | 34 ++++++------------- src/progress/demos/enUS/color.demo.md | 2 +- src/progress/demos/zhCN/color.demo.md | 2 +- 9 files changed, 52 insertions(+), 45 deletions(-) rename src/element/demos/{zhCN/color-debug.demo.md => enUS/color.demo.md} (62%) create mode 100644 src/element/demos/zhCN/color.demo.md diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index ab45bb441..ff6ec4aaa 100644 --- a/CHANGELOG.en-US.md +++ b/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 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 9cc11ba9a..15add3dae 100644 --- a/CHANGELOG.zh-CN.md +++ b/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 diff --git a/src/element/demos/zhCN/color-debug.demo.md b/src/element/demos/enUS/color.demo.md similarity index 62% rename from src/element/demos/zhCN/color-debug.demo.md rename to src/element/demos/enUS/color.demo.md index 32dbd48ce..ea4bf9d47 100644 --- a/src/element/demos/zhCN/color-debug.demo.md +++ b/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 diff --git a/src/element/demos/enUS/index.demo-entry.md b/src/element/demos/enUS/index.demo-entry.md index 943aca390..b9fdd7375 100644 --- a/src/element/demos/enUS/index.demo-entry.md +++ b/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)` | | diff --git a/src/element/demos/zhCN/color.demo.md b/src/element/demos/zhCN/color.demo.md new file mode 100644 index 000000000..4f89f297b --- /dev/null +++ b/src/element/demos/zhCN/color.demo.md @@ -0,0 +1,16 @@ +# 主题变量 + +你可以从 default slot 获取主题变量。 + +```html + + 
+{{ JSON.stringify(themeVars, 0, 2) }}
+ +``` diff --git a/src/element/demos/zhCN/index.demo-entry.md b/src/element/demos/zhCN/index.demo-entry.md index 7650a2822..612c0ccd0 100644 --- a/src/element/demos/zhCN/index.demo-entry.md +++ b/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)` | | diff --git a/src/element/src/Element.ts b/src/element/src/Element.ts index 394c41abe..b45d288cd 100644 --- a/src/element/src/Element.ts +++ b/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 @@ -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 diff --git a/src/progress/demos/enUS/color.demo.md b/src/progress/demos/enUS/color.demo.md index fd303c769..b78a72d4f 100644 --- a/src/progress/demos/enUS/color.demo.md +++ b/src/progress/demos/enUS/color.demo.md @@ -3,7 +3,7 @@ If you are not satisfied with builtin colors. ```html - + +