feat(global-style)

CHANGELOG.en-US.md

@@ -8,6 +8,8 @@
 
 ### Feats
 
+- Add `n-global-style` component.
+- Add `n-theme-editor` component.
 - Add `n-page-header` component.
 - `n-statistic` add `label` slot.
 - `n-breadcrumb-item` add `separator` slot & prop.

CHANGELOG.zh-CN.md

@@ -8,6 +8,8 @@
 
 ### Feats
 
+- 添加 `n-global-style` 组件
+- 添加 `n-theme-editor` 组件
 - 添加 `n-page-header` 组件
 - `n-statistic` 增加 `label` slot
 - `n-breadcrumb-item` 增加 `separator` slot & prop

demo/SiteHeader.vue

@@ -33,7 +33,7 @@
       <template #trigger>
         <n-icon size="20" style="margin-left: 12px"><menu-outline /></n-icon>
       </template>
-      <div style="overflow: auto; max-height: 80vh">
+      <div style="overflow: auto; max-height: 79vh">
         <n-menu
           :value="xsMenuValue"
           :options="xsMenuOptions"
@@ -52,7 +52,7 @@
       <template #trigger>
         <n-icon size="20" style="margin-left: 12px"><menu-outline /></n-icon>
       </template>
-      <div style="overflow: auto; max-height: 80vh">
+      <div style="overflow: auto; max-height: 75vh">
         <n-menu
           :value="sMenuValue"
           :options="sMenuOptions"

demo/SiteRoot.vue

@@ -19,6 +19,7 @@
           </n-notification-provider>
         </n-message-provider>
       </n-loading-bar-provider>
+      <n-global-style />
     </n-theme-editor>
   </component>
 </template>

demo/routes/routes.js

@@ -376,6 +376,11 @@ export const enComponentRoutes = [
     component: () =>
       import('../../src/page-header/demos/enUS/index.demo-entry.md')
   },
+  {
+    path: 'n-global-style',
+    component: () =>
+      import('../../src/global-style/demos/enUS/index.demo-entry.md')
+  },
   // deprecated
   {
     path: 'n-nimbus-service-layout',
@@ -692,6 +697,11 @@ export const zhComponentRoutes = [
     component: () =>
       import('../../src/page-header/demos/zhCN/index.demo-entry.md')
   },
+  {
+    path: 'n-global-style',
+    component: () =>
+      import('../../src/global-style/demos/zhCN/index.demo-entry.md')
+  },
   // deprecated
   {
     path: 'n-nimbus-service-layout',

demo/store/menu-options.js

@@ -582,6 +582,12 @@ export function createComponentMenuOptions ({ lang, theme, mode }) {
           zh: '元素',
           enSuffix: true,
           path: '/n-element'
+        },
+        {
+          en: 'Global Style',
+          zh: '全局样式',
+          enSuffix: true,
+          path: '/n-global-style'
         }
       ]
     }),

src/components.ts

@@ -27,6 +27,7 @@ export * from './element'
 export * from './ellipsis'
 export * from './empty'
 export * from './form'
+export * from './global-style'
 export * from './gradient-text'
 export * from './grid'
 export * from './icon'

src/config-provider/src/ConfigProvider.ts

@@ -6,11 +6,12 @@ import {
   PropType,
   provide,
   reactive,
-  InjectionKey
+  InjectionKey,
+  renderSlot
 } from 'vue'
 import { useMemo } from 'vooks'
 import { merge } from 'lodash-es'
-import { warn, getSlot } from '../../_utils'
+import { warn } from '../../_utils'
 import type { Hljs } from '../../_mixins'
 import type {
   GlobalTheme,
@@ -210,8 +211,8 @@ export default defineComponent({
         {
           class: ['n-config-provider']
         },
-        getSlot(this)
+        renderSlot(this.$slots, 'default')
       )
-      : getSlot(this)
+      : renderSlot(this.$slots, 'default')
   }
 })

src/config-provider/src/internal-interface.ts

@@ -25,6 +25,7 @@ import type { ElementTheme } from '../../element/styles'
 import type { EllipsisTheme } from '../../ellipsis/styles'
 import type { EmptyTheme } from '../../empty/styles'
 import type { FormTheme } from '../../form/styles'
+import type { GlobalStyleTheme } from '../../global-style/styles'
 import type { GradientTextTheme } from '../../gradient-text/styles'
 import type { IconTheme } from '../../icon/styles'
 import type { InputTheme } from '../../input/styles'
@@ -105,6 +106,7 @@ export interface GlobalThemeWithoutCommon {
   Ellipsis?: EllipsisTheme
   Empty?: EmptyTheme
   Form?: FormTheme
+  GlobalStyle?: GlobalStyleTheme
   GradientText?: GradientTextTheme
   Icon?: IconTheme
   Input?: InputTheme

src/global-style/demos/enUS/index.demo-entry.md

@@ -0,0 +1,25 @@
+# Global Style
+
+Sometimes you want apply some naive-ui style to document body. For example font family, background color & font...
+
+A specific scene is on iOS Safari, if you over-scroll the page in dark mode, the overflowed part will be white. At that time you may want to set body's color.
+
+If you want work with theme, put it inside `n-config-provider`.
+
+## Usage
+
+```html
+// default theme
+<app>
+  <n-global-style />
+  ...
+</app>
+```
+
+```html
+// follow config-provider's theme
+<n-config-provider>
+  <n-global-style />
+  ...
+</n-config-provider>
+```

src/global-style/demos/zhCN/index.demo-entry.md

@@ -0,0 +1,25 @@
+# 全局样式 Global Style
+
+有时候你会希望某些样式会应用到 body 上，例如背景色，字体或者其他什么的。
+
+具体的例子是在暗色模式下，iOS Safari 在过度滚动的情况下会显示出白色，这时候需要我们设定 body 的颜色。
+
+如果你需要它随主题变化，那么请把它放到 `n-config-provider` 内部。
+
+## 用法
+
+```html
+// 默认主题
+<app>
+  <n-global-style />
+  ...
+</app>
+```
+
+```html
+// 跟随 n-config-provider 的主题
+<n-config-provider>
+  <n-global-style />
+  ...
+</n-config-provider>
+```

src/global-style/index.ts

@@ -0,0 +1 @@
+export { default as NGlobalStyle } from './src/GlobalStyle'

src/global-style/src/GlobalStyle.ts

@@ -0,0 +1,62 @@
+import { defineComponent, watchEffect, onBeforeMount, onUnmounted } from 'vue'
+import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
+import type { GlobalStyleTheme } from '../styles'
+import { globalStyleLight } from '../styles'
+import { warn } from '../../_utils'
+
+export default defineComponent({
+  name: 'GlobalStyle',
+  props: {
+    ...(useTheme.props as ThemeProps<GlobalStyleTheme>)
+  },
+  setup (props) {
+    const themeRef = useTheme(
+      'GlobalStyle',
+      'GlobalStyle',
+      undefined,
+      globalStyleLight,
+      props
+    )
+    const { body } = document
+    const { style } = body
+    let styleApplied = false
+    onBeforeMount(() => {
+      watchEffect(() => {
+        const {
+          value: {
+            common: {
+              textColor2,
+              fontSize,
+              fontFamily,
+              bodyColor,
+              cubicBezierEaseInOut
+            }
+          }
+        } = themeRef
+        if (styleApplied || !body.hasAttribute('n-styled')) {
+          body.setAttribute('n-styled', '')
+          styleApplied = true
+          style.backgroundColor = bodyColor
+          style.color = textColor2
+          style.fontSize = fontSize
+          style.fontFamily = fontFamily
+          style.transition = `color .3s ${cubicBezierEaseInOut}, background-color .3s ${cubicBezierEaseInOut}`
+        } else if (__DEV__) {
+          warn(
+            'global-style',
+            'More than one n-global-style exist in the document.body. Only the first mounted one will work.'
+          )
+        }
+      })
+    })
+    onUnmounted(() => {
+      if (styleApplied) {
+        body.removeAttribute('n-styled')
+      }
+    })
+  },
+  render () {
+    return null
+  }
+})

src/global-style/styles/dark.ts

@@ -0,0 +1,8 @@
+import { createTheme } from '../../_mixins'
+import { commonDark } from '../../_styles/common'
+import type { GlobalStyleTheme } from './light'
+
+export const globalStyleDark: GlobalStyleTheme = createTheme({
+  name: 'GlobalStyle',
+  common: commonDark
+})

src/global-style/styles/index.ts

@@ -0,0 +1,3 @@
+export { globalStyleLight } from './light'
+export { globalStyleDark } from './dark'
+export type { GlobalStyleTheme, GlobalStyleThemeVars } from './light'

src/global-style/styles/light.ts

@@ -0,0 +1,11 @@
+import { createTheme } from '../../_mixins'
+import { commonLight } from '../../_styles/common'
+
+export const globalStyleLight = createTheme({
+  name: 'GlobalStyle',
+  common: commonLight
+})
+
+export type GlobalStyleTheme = typeof globalStyleLight
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface GlobalStyleThemeVars {}

src/themes/dark.ts

@@ -25,6 +25,7 @@ import { elementDark } from '../element/styles'
 import { ellipsisDark } from '../ellipsis/styles'
 import { emptyDark } from '../empty/styles'
 import { formDark } from '../form/styles'
+import { globalStyleDark } from '../global-style/styles'
 import { gradientTextDark } from '../gradient-text/styles'
 import { iconDark } from '../icon/styles'
 import { inputDark } from '../input/styles'
@@ -38,6 +39,7 @@ import { mentionDark } from '../mention/styles'
 import { messageDark } from '../message/styles'
 import { modalDark } from '../modal/styles'
 import { notificationDark } from '../notification/styles'
+import { pageHeaderDark } from '../page-header/styles'
 import { paginationDark } from '../pagination/styles'
 import { popconfirmDark } from '../popconfirm/styles'
 import { popoverDark } from '../popover/styles'
@@ -66,7 +68,6 @@ import { treeDark } from '../tree/styles'
 import { uploadDark } from '../upload/styles'
 import { selectDark } from '../select/styles'
 import type { BuiltInGlobalTheme } from './interface'
-import { pageHeaderDark } from '../page-header/styles'
 
 export const darkTheme: BuiltInGlobalTheme = {
   common: commonDark,
@@ -96,6 +97,7 @@ export const darkTheme: BuiltInGlobalTheme = {
   Empty: emptyDark,
   Ellipsis: ellipsisDark,
   Form: formDark,
+  GlobalStyle: globalStyleDark,
   GradientText: gradientTextDark,
   Icon: iconDark,
   Input: inputDark,

src/themes/light.ts

@@ -27,6 +27,7 @@ import { elementLight } from '../element/styles'
 import { ellipsisLight } from '../ellipsis/styles'
 import { emptyLight } from '../empty/styles'
 import { formLight } from '../form/styles'
+import { globalStyleLight } from '../global-style/styles'
 import { gradientTextLight } from '../gradient-text/styles'
 import { iconLight } from '../icon/styles'
 import { inputLight } from '../input/styles'
@@ -40,6 +41,7 @@ import { mentionLight } from '../mention/styles'
 import { messageLight } from '../message/styles'
 import { modalLight } from '../modal/styles'
 import { notificationLight } from '../notification/styles'
+import { pageHeaderLight } from '../page-header/styles'
 import { paginationLight } from '../pagination/styles'
 import { popconfirmLight } from '../popconfirm/styles'
 import { popoverLight } from '../popover/styles'
@@ -68,7 +70,6 @@ import { treeLight } from '../tree/styles'
 import { uploadLight } from '../upload/styles'
 import { selectLight } from '../select/styles'
 import type { BuiltInGlobalTheme } from './interface'
-import { pageHeaderLight } from '../page-header/styles'
 
 export const lightTheme: BuiltInGlobalTheme = {
   common: commonLight,
@@ -98,6 +99,7 @@ export const lightTheme: BuiltInGlobalTheme = {
   Empty: emptyLight,
   Ellipsis: ellipsisLight,
   Form: formLight,
+  GlobalStyle: globalStyleLight,
   GradientText: gradientTextLight,
   Icon: iconLight,
   Input: inputLight,