feat: add api

Author: jahnli

demo/utils/ChangeLogButton.vue

@@ -17,18 +17,21 @@ export default defineComponent({
   },
   props: {
     text: Boolean,
-    id: String,
     quaternary: Boolean,
     size: {
       type: String as PropType<ButtonProps['size']>,
       default: 'small'
     }
   },
-  setup(props) {
+  setup() {
     const route = useRoute()
     const themeVars = useThemeVars()
+    const miscMap: { [key: string]: string } = {
+      discrete: 'createDiscreteApi'
+    }
     const isCN = route.path.startsWith('/zh-CN')
-    const componentName = `n-${props.id?.split('-').slice(1).join('-').toLowerCase()}`
+    const name = route.fullPath.split('/').pop()
+    const componentName = miscMap[name as string] || `n-${name}`
     const logs = isCN ? zhCN[componentName] : enUS[componentName]
     const drawerRef = ref(false)
     const renderer = new marked.Renderer()

demo/utils/EditOnGithubHeader.vue

@@ -23,8 +23,8 @@ export default defineComponent({
     }
   },
   setup() {
-    const components = zhComponentRoutes.map((route: any) => route.path)
     const route = useRoute()
+    const components = zhComponentRoutes.map((route: any) => route.path)
     const isComponent = components.includes(route.fullPath.split('/').pop())
     return {
       ...i18n({
@@ -67,7 +67,7 @@ export default defineComponent({
     <span v-if="isComponent" class="edit-button">
       <n-tooltip placement="right" :show-arrow="false">
         <template #trigger>
-          <ChangeLogButton :id="id" text quaternary />
+          <ChangeLogButton quaternary />
         </template>
         {{ t('changeLog') }}
       </n-tooltip>

scripts/gen-component-changelog.js

@@ -33,25 +33,29 @@ function parseChangelog(content) {
     }
 
     const componentMatch = line.match(/^- .*?`(n-[^`]*)`/)
-    if (!componentMatch)
-      return
+    const apiMatch = line.match(/^- .*?`([^`]*Api)`/)
+
+    const name = componentMatch
+      ? componentMatch[1]
+      : apiMatch
+        ? apiMatch[1]
+        : ''
 
-    const componentName = componentMatch[1]
     const content = isBreaking ? `${line.trim()} 🚨` : `${line.trim()}`
 
-    if (!logs[componentName]) {
-      logs[componentName] = []
+    if (!logs[name]) {
+      logs[name] = []
     }
 
-    const existingLog = logs[componentName].find(
+    const existingLog = logs[name].find(
       log => log.version === version && log.date === date
     )
 
     if (existingLog) {
       existingLog.changes.push(content)
     }
     else {
-      logs[componentName].push({
+      logs[name].push({
         version,
         date,
         changes: [content]

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

@@ -1,11 +1,13 @@
-# Discrete API（v2.29.0)
+# Discrete API
 
 If you want to use `useDialog`, `useMessage`, `useNotification`, `useLoadingBar`, `useModal` outside `setup`, you can use `createDiscreteApi` to create corresponding API.
 
 <n-alert title="Caveat" type="warning" :bordered="false">
 1. Discrete API won't be affected by <n-text code>n-xxx-provider</n-text> in current app. If you need to share config, you should sync them manually. Also, you'd better not using discrete API and normal API together. 2. Do not call <n-text code>createDiscreteApi</n-text> in <n-text code>setup</n-text> since it may cause some unexpected behaviors.
 </n-alert>
 
+Available since `2.29.1`.
+
 ## Demo
 
 ```demo

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

@@ -1,11 +1,13 @@
-# 脱离上下文的 API（v2.29.0）
+# 脱离上下文的 API CreateDiscreteAPI
 
 如果你想在 `setup` 外使用 `useDialog`、`useMessage`、`useNotification`、`useLoadingBar`，`useModal`，可以通过 `createDiscreteApi` 来构建对应的 API。
 
 <n-alert title="注意" type="warning" :bordered="false">
   1. 脱离上下文的 API 不会受 <n-text code>n-xxx-provider</n-text> 的影响，并且和应用上下文中对应组件会使用不同的 DOM 容器。如果需要的话，你需要手动同步这些信息。并且最好不要混用两类 API。2. 不要在 <n-text code>setup</n-text> 中调用 <n-text code>createDiscreteApi</n-text>，可能会有一些意外的问题出现。
 </n-alert>
 
+自 `2.29.1` 开始提供。
+
 ## 演示
 
 ```demo