From ce905141ddf4aae996fe75a25356efe50acdacd4 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 23 May 2022 03:10:57 +0800
Subject: [PATCH] docs(discrete): basic docs

---
 demo/routes/routes.js                         |  8 +++
 demo/store/menu-options.js                    |  6 ++
 src/config-provider/src/ConfigProvider.ts     |  9 +--
 src/discrete/demos/enUS/basic.demo.vue        | 51 +++++++++++++
 src/discrete/demos/enUS/index.demo-entry.md   | 15 ++++
 src/discrete/demos/zhCN/basic.demo.vue        | 71 +++++++++++++++++++
 src/discrete/demos/zhCN/index.demo-entry.md   | 15 ++++
 src/discrete/src/discrete.ts                  |  2 +-
 .../src/{discrete-app.ts => discreteApp.ts}   |  0
 9 files changed, 172 insertions(+), 5 deletions(-)
 create mode 100644 src/discrete/demos/enUS/basic.demo.vue
 create mode 100644 src/discrete/demos/enUS/index.demo-entry.md
 create mode 100644 src/discrete/demos/zhCN/basic.demo.vue
 create mode 100644 src/discrete/demos/zhCN/index.demo-entry.md
 rename src/discrete/src/{discrete-app.ts => discreteApp.ts} (100%)

diff --git a/demo/routes/routes.js b/demo/routes/routes.js
index c3a5e5736..eca7821f0 100644
--- a/demo/routes/routes.js
+++ b/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')
   }
 ]
 
diff --git a/demo/store/menu-options.js b/demo/store/menu-options.js
index 28b4fdb41..964618319 100644
--- a/demo/store/menu-options.js
+++ b/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: '滚动条',
diff --git a/src/config-provider/src/ConfigProvider.ts b/src/config-provider/src/ConfigProvider.ts
index 8257f9590..279f246e6 100644
--- a/src/config-provider/src/ConfigProvider.ts
+++ b/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({
diff --git a/src/discrete/demos/enUS/basic.demo.vue b/src/discrete/demos/enUS/basic.demo.vue
new file mode 100644
index 000000000..05bf4e53b
--- /dev/null
+++ b/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>
diff --git a/src/discrete/demos/enUS/index.demo-entry.md b/src/discrete/demos/enUS/index.demo-entry.md
new file mode 100644
index 000000000..1bbf55659
--- /dev/null
+++ b/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
diff --git a/src/discrete/demos/zhCN/basic.demo.vue b/src/discrete/demos/zhCN/basic.demo.vue
new file mode 100644
index 000000000..e322d22d0
--- /dev/null
+++ b/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>
diff --git a/src/discrete/demos/zhCN/index.demo-entry.md b/src/discrete/demos/zhCN/index.demo-entry.md
new file mode 100644
index 000000000..1bbf55659
--- /dev/null
+++ b/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
diff --git a/src/discrete/src/discrete.ts b/src/discrete/src/discrete.ts
index b81a52ab9..4d97bb87b 100644
--- a/src/discrete/src/discrete.ts
+++ b/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,
diff --git a/src/discrete/src/discrete-app.ts b/src/discrete/src/discreteApp.ts
similarity index 100%
rename from src/discrete/src/discrete-app.ts
rename to src/discrete/src/discreteApp.ts