feat(use-theme-vars): add useThemeVars composable & remove n-element's abstract prop and theme vars from default slot

CHANGELOG.en-US.md

@@ -2,9 +2,15 @@
 
 ## Pending
 
+### Breaking Changes
+
+- `n-element` removes `abstract` prop.
+- `n-element` doesn't return theme variables in default slot. Please use `useThemeVars` instead.
+
 ### Feats
 
 - Add `n-carousel` component.
+- Add `useThemeVars` composable to provide theme variables.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -2,9 +2,15 @@
 
 ## Pending
 
+### Breaking Changes
+
+- `n-element` 移除了 `abstract` 属性
+- `n-element` 不再在 default slot 返回主题变量，请使用 `useThemeVars` 代替
+
 ### Feats
 
 - 新增 `n-carousel` 组件
+- 新增 `useThemeVars` 函数提供主题变量
 
 ### Fixes
 

demo/pages/docs/theme/enUS/index.demo-entry.md

@@ -9,4 +9,5 @@ Naive UI provide some tools for developers to create themed components easier.
 ```demo
 provide-theme
 element
+use-theme-vars
 ```

demo/pages/docs/theme/enUS/use-theme-vars.demo.md

@@ -0,0 +1,20 @@
+# useThemeVars
+
+Naive UI provide `useThemeVars`. It contains common theme variables.
+
+```html
+<pre style="overflow: auto;">{{ themeVars }}</pre>
+```
+
+```js
+import { defineComponent } from 'vue'
+import { useThemeVars } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    return {
+      themeVars: useThemeVars()
+    }
+  }
+})
+```

demo/pages/docs/theme/zhCN/index.demo-entry.md

@@ -9,4 +9,5 @@ Naive UI 提供一些工具帮助开发者简单的创建支持主题的组件
 ```demo
 provide-theme
 element
+use-theme-vars
 ```

demo/pages/docs/theme/zhCN/use-theme-vars.demo.md

@@ -0,0 +1,20 @@
+# useThemeVars
+
+Naive UI 提供 `useThemeVars`，它包含了常见的主题变量。
+
+```html
+<pre style="overflow: auto;">{{themeVars}}</pre>
+```
+
+```js
+import { defineComponent } from 'vue'
+import { useThemeVars } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    return {
+      themeVars: useThemeVars()
+    }
+  }
+})
+```

src/composables/index.ts

@@ -0,0 +1 @@
+export { useThemeVars } from './use-theme-vars'

src/composables/use-theme-vars.ts

@@ -0,0 +1,20 @@
+import { computed, ComputedRef, inject } from 'vue'
+import { configProviderInjectionKey } from '../config-provider/src/ConfigProvider'
+import { commonLight } from '../_styles/common'
+import type { ThemeCommonVars } from '../_styles/common'
+
+export function useThemeVars (): ComputedRef<ThemeCommonVars> {
+  return computed(() => {
+    const configProviderInjection = inject(configProviderInjectionKey, null)
+    if (configProviderInjection === null) return commonLight
+    const {
+      mergedThemeRef: { value: mergedTheme }
+    } = configProviderInjection
+    if (mergedTheme) {
+      const { common } = mergedTheme
+      return common || commonLight
+    } else {
+      return commonLight
+    }
+  })
+}

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

@@ -1,16 +0,0 @@
-# Theme Variabls
-
-You can get theme variables from 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/enUS/index.demo-entry.md

@@ -11,13 +11,12 @@ color
 
 ## Props
 
-| Name     | Type      | Default | Description                                |
-| -------- | --------- | ------- | ------------------------------------------ |
-| abstract | `boolean` | `false` | Whether to render a wrapper DOM.           |
-| tag      | `string`  | `'div'` | The tag `n-element` should be rendered as. |
+| Name | Type     | Default | Description                                |
+| ---- | -------- | ------- | ------------------------------------------ |
+| tag  | `string` | `'div'` | The tag `n-element` should be rendered as. |
 
 ## Slots
 
-| Name    | Parameters                     | Description |
-| ------- | ------------------------------ | ----------- |
-| default | `(themeVars: CommonThemeVars)` |             |
+| Name    | Parameters | Description |
+| ------- | ---------- | ----------- |
+| default | `()`       |             |

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

@@ -1,16 +0,0 @@
-# 主题变量
-
-你可以从 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

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

src/element/src/Element.ts

@@ -11,8 +11,7 @@ const elementProps = {
   tag: {
     type: String,
     default: 'div'
-  },
-  abstract: Boolean
+  }
 } as const
 
 export type ElementProps = ExtractPublicPropTypes<typeof elementProps>
@@ -33,7 +32,6 @@ export default defineComponent({
     )
     return {
       mergedClsPrefix: mergedClsPrefixRef,
-      mergedTheme: themeRef,
       cssVars: computed(() => {
         const { common } = themeRef.value
         return (
@@ -46,16 +44,7 @@ export default defineComponent({
     }
   },
   render () {
-    const {
-      $slots,
-      abstract,
-      mergedTheme: { common }
-    } = this
-    if (abstract) {
-      return $slots.default?.({
-        themeVars: common
-      })
-    }
+    const { $slots } = this
     const { tag, mergedClsPrefix, cssVars } = this
     return h(
       tag,
@@ -63,9 +52,7 @@ export default defineComponent({
         class: `${mergedClsPrefix}-element`,
         style: cssVars
       },
-      ($slots.default?.({
-        themeVars: common
-      }) || null) as any
+      $slots.default?.()
     )
   }
 })

src/index.ts

@@ -6,6 +6,7 @@ export { default as create } from './create'
 
 export * from './locales'
 export * from './components'
+export * from './composables'
 
 // component themes
 export * from './styles'

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

@@ -3,49 +3,49 @@
 If you are not satisfied with builtin colors.
 
 ```html
-<n-element #="{ themeVars }" abstract>
-  <n-progress
-    style="margin: 0 8px 12px 0;"
-    type="circle"
-    :percentage="20"
-    :color="themeVars.successColor"
-    :rail-color="changeColor(themeVars.successColor, { alpha: 0.2 })"
-    :indicator-text-color="themeVars.successColor"
-  />
-  <n-progress
-    style="width: 120px; margin: 0 8px 12px 0;"
-    type="multiple-circle"
-    :stroke-width="10"
-    :circle-gap="10"
-    :percentage="[50, 25]"
-    :color="[themeVars.infoColor, themeVars.infoColor]"
-    :rail-color="[changeColor(themeVars.infoColor, { alpha: 0.2 }), changeColor(themeVars.infoColor, { alpha: 0.2 })]"
-  />
-  <n-progress
-    type="line"
-    indicator-placement="inside-label"
-    :color="themeVars.errorColor"
-    :rail-color="changeColor(themeVars.errorColor, { alpha: 0.2 })"
-    :percentage="20"
-  />
-  <n-progress
-    type="line"
-    :color="themeVars.warningColor"
-    :rail-color="changeColor(themeVars.warningColor, { alpha: 0.2 })"
-    :percentage="20"
-    :indicator-text-color="themeVars.warningColor"
-  />
-</n-element>
+<n-progress
+  style="margin: 0 8px 12px 0;"
+  type="circle"
+  :percentage="20"
+  :color="themeVars.successColor"
+  :rail-color="changeColor(themeVars.successColor, { alpha: 0.2 })"
+  :indicator-text-color="themeVars.successColor"
+/>
+<n-progress
+  style="width: 120px; margin: 0 8px 12px 0;"
+  type="multiple-circle"
+  :stroke-width="10"
+  :circle-gap="10"
+  :percentage="[50, 25]"
+  :color="[themeVars.infoColor, themeVars.infoColor]"
+  :rail-color="[changeColor(themeVars.infoColor, { alpha: 0.2 }), changeColor(themeVars.infoColor, { alpha: 0.2 })]"
+/>
+<n-progress
+  type="line"
+  indicator-placement="inside-label"
+  :color="themeVars.errorColor"
+  :rail-color="changeColor(themeVars.errorColor, { alpha: 0.2 })"
+  :percentage="20"
+/>
+<n-progress
+  type="line"
+  :color="themeVars.warningColor"
+  :rail-color="changeColor(themeVars.warningColor, { alpha: 0.2 })"
+  :percentage="20"
+  :indicator-text-color="themeVars.warningColor"
+/>
 ```
 
 ```js
 import { defineComponent } from 'vue'
 import { changeColor } from 'seemly'
+import { useThemeVars } from 'naive-ui'
 
 export default defineComponent({
   setup () {
     return {
-      changeColor
+      changeColor,
+      themeVars: useThemeVars()
     }
   }
 })

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

@@ -3,49 +3,49 @@
 如果你觉得内置的颜色不行 🙅‍♂️。
 
 ```html
-<n-element #="{ themeVars }" abstract>
-  <n-progress
-    style="margin: 0 8px 12px 0;"
-    type="circle"
-    :percentage="20"
-    :color="themeVars.successColor"
-    :rail-color="changeColor(themeVars.successColor, { alpha: 0.2 })"
-    :indicator-text-color="themeVars.successColor"
-  />
-  <n-progress
-    style="width: 120px; margin: 0 8px 12px 0;"
-    type="multiple-circle"
-    :stroke-width="10"
-    :circle-gap="10"
-    :percentage="[50, 25]"
-    :color="[themeVars.infoColor, themeVars.infoColor]"
-    :rail-color="[changeColor(themeVars.infoColor, { alpha: 0.2 }), changeColor(themeVars.infoColor, { alpha: 0.2 })]"
-  />
-  <n-progress
-    type="line"
-    indicator-placement="inside-label"
-    :color="themeVars.errorColor"
-    :rail-color="changeColor(themeVars.errorColor, { alpha: 0.2 })"
-    :percentage="20"
-  />
-  <n-progress
-    type="line"
-    :color="themeVars.warningColor"
-    :rail-color="changeColor(themeVars.warningColor, { alpha: 0.2 })"
-    :percentage="20"
-    :indicator-text-color="themeVars.warningColor"
-  />
-</n-element>
+<n-progress
+  style="margin: 0 8px 12px 0;"
+  type="circle"
+  :percentage="20"
+  :color="themeVars.successColor"
+  :rail-color="changeColor(themeVars.successColor, { alpha: 0.2 })"
+  :indicator-text-color="themeVars.successColor"
+/>
+<n-progress
+  style="width: 120px; margin: 0 8px 12px 0;"
+  type="multiple-circle"
+  :stroke-width="10"
+  :circle-gap="10"
+  :percentage="[50, 25]"
+  :color="[themeVars.infoColor, themeVars.infoColor]"
+  :rail-color="[changeColor(themeVars.infoColor, { alpha: 0.2 }), changeColor(themeVars.infoColor, { alpha: 0.2 })]"
+/>
+<n-progress
+  type="line"
+  indicator-placement="inside-label"
+  :color="themeVars.errorColor"
+  :rail-color="changeColor(themeVars.errorColor, { alpha: 0.2 })"
+  :percentage="20"
+/>
+<n-progress
+  type="line"
+  :color="themeVars.warningColor"
+  :rail-color="changeColor(themeVars.warningColor, { alpha: 0.2 })"
+  :percentage="20"
+  :indicator-text-color="themeVars.warningColor"
+/>
 ```
 
 ```js
 import { defineComponent } from 'vue'
 import { changeColor } from 'seemly'
+import { useThemeVars } from 'naive-ui'
 
 export default defineComponent({
   setup () {
     return {
-      changeColor
+      changeColor,
+      themeVars: useThemeVars()
     }
   }
 })