docs(discrete): basic docs

demo/routes/routes.js

@@ -513,6 +513,10 @@ export const enComponentRoutes = [
     path: 'watermark',
     component: () =>
       import('../../src/watermark/demos/enUS/index.demo-entry.md')
+  },
+  {
+    path: 'discrete',
+    component: () => import('../../src/discrete/demos/enUS/index.demo-entry.md')
   }
 ]
 
@@ -877,6 +881,10 @@ export const zhComponentRoutes = [
     path: 'watermark',
     component: () =>
       import('../../src/watermark/demos/zhCN/index.demo-entry.md')
+  },
+  {
+    path: 'discrete',
+    component: () => import('../../src/discrete/demos/zhCN/index.demo-entry.md')
   }
 ]
 

demo/store/menu-options.js

@@ -704,6 +704,12 @@ export function createComponentMenuOptions ({ lang, theme, mode }) {
           enSuffix: true,
           path: '/collapse-transition'
         },
+        {
+          en: 'Discrete API',
+          zh: '独立 API',
+          enSuffix: true,
+          path: '/discrete'
+        },
         {
           en: 'Scrollbar',
           zh: '滚动条',

src/config-provider/src/ConfigProvider.ts

@@ -6,12 +6,13 @@ import {
   PropType,
   provide,
   ComputedRef,
-  markRaw
+  markRaw,
+  ExtractPropTypes
 } from 'vue'
 import { useMemo } from 'vooks'
 import { merge } from 'lodash-es'
 import { hash } from 'css-render'
-import { ExtractPublicPropTypes, warn } from '../../_utils'
+import { warn } from '../../_utils'
 import { defaultClsPrefix, Hljs } from '../../_mixins'
 import { NDateLocale, NLocale } from '../../locales'
 import type {
@@ -64,8 +65,8 @@ export const configProviderProps = {
   }
 } as const
 
-export type ConfigProviderProps = ExtractPublicPropTypes<
-  typeof configProviderProps
+export type ConfigProviderProps = Partial<
+ExtractPropTypes<typeof configProviderProps>
 >
 
 export default defineComponent({

src/discrete/demos/enUS/basic.demo.vue

@@ -0,0 +1,51 @@
+<markdown>
+# 基础用法
+
+使用 `useDiscreteApi` 来创建一系列 API。
+</markdown>
+
+<template>
+  <n-space>
+    <n-button @click="handleMessageTriggerClick">
+      message
+    </n-button>
+    <n-button @click="handleNotificationTriggerClick">
+      notification
+    </n-button>
+    <n-button @click="handleDialogTriggerClick">
+      dialog
+    </n-button>
+    <n-button @click="handleLoadingBarTriggerClick">
+      loadingBar
+    </n-button>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { createDiscreteApi } from 'naive-ui'
+
+const { message, notification, dialog, loadingBar } = createDiscreteApi()
+
+export default defineComponent({
+  setup () {
+    return {
+      handleMessageTriggerClick () {
+        message.info('Message')
+      },
+      handleNotificationTriggerClick () {
+        notification.create({ title: 'Notification' })
+      },
+      handleDialogTriggerClick () {
+        dialog.info({ title: 'Dialog' })
+      },
+      handleLoadingBarTriggerClick () {
+        loadingBar.start()
+        setTimeout(() => {
+          loadingBar.finish()
+        }, 1000)
+      }
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,15 @@
+# 脱离上下文的 API
+
+如果你用过想在 `setup` 外使用 `useDialog`、`useMessage`、`useNotification`、`useLoadingBar`，你可以通过 `createDiscreateApi` 来构建对应的 API。
+
+<n-alert title="注意" type="warning">
+  脱离上下文的 API 不会受 <n-text code>n-xxx-provider</n-text> 的影响，并且和应用上下文中对应组件会使用不同的 DOM 容器。如果需要的话，你需要手动同步这些信息。并且最好不要混用两类 API。
+</n-alert>
+
+## 演示
+
+```demo
+basic.vue
+```
+
+## API

src/discrete/demos/zhCN/basic.demo.vue

@@ -0,0 +1,71 @@
+<markdown>
+# 基础用法
+
+使用 `useDiscreteApi` 来创建一系列 API。
+</markdown>
+
+<template>
+  <n-space>
+    <n-button @click="handleThemeChangeClick">
+      theme: {{ theme }}
+    </n-button>
+    <n-button @click="handleMessageTriggerClick">
+      message
+    </n-button>
+    <n-button @click="handleNotificationTriggerClick">
+      notification
+    </n-button>
+    <n-button @click="handleDialogTriggerClick">
+      dialog
+    </n-button>
+    <n-button @click="handleLoadingBarTriggerClick">
+      loadingBar
+    </n-button>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+import {
+  createDiscreteApi,
+  ConfigProviderProps,
+  darkTheme,
+  lightTheme
+} from 'naive-ui'
+
+const themeRef = ref<'light' | 'dark'>('light')
+const configProviderPropsRef = computed<ConfigProviderProps>(() => ({
+  theme: themeRef.value === 'light' ? lightTheme : darkTheme
+}))
+
+const { message, notification, dialog, loadingBar } = createDiscreteApi({
+  configProviderProps: configProviderPropsRef
+})
+
+export default defineComponent({
+  setup () {
+    return {
+      theme: themeRef,
+      handleThemeChangeClick () {
+        if (themeRef.value === 'light') themeRef.value = 'dark'
+        else themeRef.value = 'light'
+      },
+      handleMessageTriggerClick () {
+        message.info('Message')
+      },
+      handleNotificationTriggerClick () {
+        notification.create({ title: 'Notification' })
+      },
+      handleDialogTriggerClick () {
+        dialog.info({ title: 'Dialog' })
+      },
+      handleLoadingBarTriggerClick () {
+        loadingBar.start()
+        setTimeout(() => {
+          loadingBar.finish()
+        }, 1000)
+      }
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,15 @@
+# 脱离上下文的 API
+
+如果你用过想在 `setup` 外使用 `useDialog`、`useMessage`、`useNotification`、`useLoadingBar`，你可以通过 `createDiscreateApi` 来构建对应的 API。
+
+<n-alert title="注意" type="warning">
+  脱离上下文的 API 不会受 <n-text code>n-xxx-provider</n-text> 的影响，并且和应用上下文中对应组件会使用不同的 DOM 容器。如果需要的话，你需要手动同步这些信息。并且最好不要混用两类 API。
+</n-alert>
+
+## 演示
+
+```demo
+basic.vue
+```
+
+## API

src/discrete/src/discrete.ts

@@ -2,7 +2,7 @@ import { NMessageProvider, useMessage } from '../../message'
 import { NDialogProvider, useDialog } from '../../dialog'
 import { NNotificationProvider, useNotification } from '../../notification'
 import { NLoadingBarProvider, useLoadingBar } from '../../loading-bar'
-import { createDiscreteApp } from './discrete-app'
+import { createDiscreteApp } from './discreteApp'
 import {
   DialogApiOptions,
   DialogDiscreteApi,