Merge branch 'docs'

demo/SiteHeader.vue

@@ -328,9 +328,17 @@ export default defineComponent({
     const searchableOptionsRef = useFlattenedDocOptions()
     const searchPatternRef = ref('')
     const searchOptionsRef = computed(() => {
-      function getLabel (item) {
+      // function getLabel(item) {
+      //   if (item.label) {
+      //     return typeof item.extra === 'function'
+      //       ? () => [item.label, ' ', item.extra()]
+      //       : item.label + (item.extra ? ' ' + item.extra : '')
+      //   }
+      //   return item.key
+      // }
+      function getSearchableContent (item) {
         if (item.label) {
-          return item.label + (item.extra ? ' ' + item.extra : '')
+          return item.label + (item.extraString ? ' ' + item.extraString : '')
         }
         return item.key
       }
@@ -342,11 +350,13 @@ export default defineComponent({
             .toLowerCase()
             .replace(replaceRegex, '')
             .slice(0, 20)
-          const label = getLabel(item).toLowerCase().replace(replaceRegex, '')
+          const label = getSearchableContent(item)
+            .toLowerCase()
+            .replace(replaceRegex, '')
           return match(pattern, label)
         })
         .map((item) => ({
-          label: getLabel(item),
+          label: getSearchableContent(item),
           value: item.path
         }))
     })

demo/pages/docs/import-on-demand/enUS/index.md

@@ -52,7 +52,7 @@ For more info about theming, see [Customizing Theme](customize-theme).
 
 ## Auto Import
 
-you can use the `unplugin-auto-import` plugin to automatically import API.
+You can use the `unplugin-auto-import` plugin to automatically import APIs.
 
 If you develop using SFC, you can use the `unplugin-vue-components` plugin to automatically import components on demand.The plugin will automatically parse the components used in the template and import the components.
 

demo/pages/docs/ssr/enUS/index.md

@@ -18,7 +18,7 @@ If you are using Nuxt, please see [example](https://github.com/07akioni/naive-ui
 ```ts
 import { defineNuxtConfig } from 'nuxt'
 
-// https://v3.nuxtjs.org/api/configuration/nuxt.config
+// https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   build: {
     transpile:
@@ -44,6 +44,42 @@ export default defineNuxtConfig({
 
 3. Add the [plugin](https://github.com/07akioni/naive-ui-nuxt-demo/blob/main/plugins/naive-ui.ts) in `plugins` folder of your nuxt project.
 
+### Using Auto Import in Nuxt
+
+You can also use the `unplugin-auto-import` plugin to automatically import APIs and the `unplugin-vue-components` plugin to automatically import components on demand.
+In this case, the `nuxt.config.ts` file will have a few additional configuration lines compared to the example above.
+
+```ts
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  build: {
+    transpile:
+      process.env.NODE_ENV === 'production' ? ['naive-ui', 'vueuc', '@css-render/vue3-ssr', 'juggle/resize-observer'] : ['@juggle/resize-observer'],
+  },
+  vite: {
+    optimizeDeps: {
+      include: process.env.NODE_ENV === 'development' ? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone'] : [],
+    },
+    plugins: [
+      AutoImport({
+        imports: [
+          {
+            'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
+          },
+        ],
+      }),
+      Components({
+        resolvers: [NaiveUiResolver()]
+      })
+    ]
+  }
+});
+```
+
 ## Vite Example
 
 If you are using Vite, please see [example](https://github.com/07akioni/naive-ui-vite-ssr).

demo/pages/docs/ssr/zhCN/index.md

@@ -18,7 +18,7 @@
 ```ts
 import { defineNuxtConfig } from 'nuxt'
 
-// https://v3.nuxtjs.org/api/configuration/nuxt.config
+// https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   build: {
     transpile:
@@ -44,6 +44,42 @@ export default defineNuxtConfig({
 
 3. 在 Nuxt 项目的 `plugins` 文件夹增加这个[插件](https://github.com/07akioni/naive-ui-nuxt-demo/blob/main/plugins/naive-ui.ts)
 
+### 在 Nuxt 中使用自动引入
+
+同样可以使用 `unplugin-auto-import` 插件来自动导入 API，使用 `unplugin-vue-components` 插件来按需自动加载组件。
+在这种情况下，`nuxt.config.ts` 会比上面的例子多几行配置。
+
+```ts
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  build: {
+    transpile:
+      process.env.NODE_ENV === 'production' ? ['naive-ui', 'vueuc', '@css-render/vue3-ssr', 'juggle/resize-observer'] : ['@juggle/resize-observer'],
+  },
+  vite: {
+    optimizeDeps: {
+      include: process.env.NODE_ENV === 'development' ? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone'] : [],
+    },
+    plugins: [
+      AutoImport({
+        imports: [
+          {
+            'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
+          },
+        ],
+      }),
+      Components({
+        resolvers: [NaiveUiResolver()]
+      })
+    ]
+  }
+});
+```
+
 ## Vite 示例
 
 如果你是用的是 Vite，请参考[例子](https://github.com/07akioni/naive-ui-vite-ssr)。

demo/store/menu-options.js

@@ -2,6 +2,7 @@
 
 import { h } from 'vue'
 import { RouterLink } from 'vue-router'
+import { NTag, NSpace } from 'naive-ui'
 
 export const renderMenuLabel = (option) => {
   if (!('path' in option) || option.label === '--Debug') {
@@ -16,6 +17,33 @@ export const renderMenuLabel = (option) => {
   )
 }
 
+const renderNewTag = (isZh) =>
+  h(
+    NTag,
+    { type: 'success', size: 'small', round: true, bordered: false },
+    { default: isZh ? () => '新' : () => 'New' }
+  )
+
+const renderItemExtra = (rawItem, isZh) => {
+  if (!rawItem.enSuffix || !isZh) {
+    return rawItem.isNew ? renderNewTag : undefined
+  }
+  const renderEn = () =>
+    h(
+      NSpace,
+      { inline: true, size: 6, wrapItem: false, align: 'center' },
+      { default: () => [rawItem.en, renderNewTag(isZh)] }
+    )
+  return rawItem.isNew ? renderEn : rawItem.en
+}
+const getItemExtraString = (rawItem, isZh) => {
+  if (!rawItem.enSuffix || !isZh) {
+    return ''
+  } else {
+    return rawItem.en
+  }
+}
+
 const appendCounts = (item) => {
   if (!item.children) {
     item.count = 1
@@ -40,7 +68,8 @@ function createItems (lang, theme, prefix, items) {
       ...rawItem,
       key: rawItem.en,
       label: rawItem[langKey] || rawItem.en,
-      extra: rawItem.enSuffix && isZh ? rawItem.en : undefined,
+      extra: renderItemExtra(rawItem, isZh),
+      extraString: getItemExtraString(rawItem, isZh),
       path: rawItem.path
         ? `/${lang}/${theme}` + prefix + rawItem.path
         : undefined
@@ -465,7 +494,8 @@ export function createComponentMenuOptions ({ lang, theme, mode }) {
           en: 'QR Code',
           zh: '二维码',
           enSuffix: true,
-          path: '/qr-code'
+          path: '/qr-code',
+          isNew: true
         },
         {
           en: 'Statistic',
@@ -702,7 +732,8 @@ export function createComponentMenuOptions ({ lang, theme, mode }) {
           en: 'Split',
           zh: '面板分割',
           enSuffix: true,
-          path: '/split'
+          path: '/split',
+          isNew: true
         }
       ]
     }),
@@ -733,7 +764,8 @@ export function createComponentMenuOptions ({ lang, theme, mode }) {
           en: 'Virtual List',
           zh: '虚拟列表',
           enSuffix: true,
-          path: '/virtual-list'
+          path: '/virtual-list',
+          isNew: true
         }
       ]
     }),

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

@@ -49,7 +49,7 @@ rtl-debug.vue
 | options | `Array<AvatarOption>` | `[]` | 头像组的选项 |  |
 | vertical | `boolean` | `false` | 组内头像是否垂直排列 |  |
 
-参考 [Avatar Props](avatar#Props)
+参考 [Avatar Props](#Avatar-Props)
 
 ### Avatar Slots
 

src/checkbox/demos/enUS/event.demo.vue

@@ -14,7 +14,7 @@
         <n-checkbox value="Beijing" label="Beijing" />
         <n-checkbox value="Shanghai" label="Shanghai" />
         <n-checkbox value="Guangzhou" label="Guangzhou" />
-        <n-checkbox value="Shenzen" label="Shenzhen" />
+        <n-checkbox value="Shenzhen" label="Shenzhen" />
       </n-space>
     </n-checkbox-group>
   </n-space>

src/checkbox/demos/enUS/group.demo.vue

@@ -8,7 +8,7 @@
       <n-checkbox value="Beijing" label="Beijing" />
       <n-checkbox value="Shanghai" label="Shanghai" />
       <n-checkbox value="Guangzhou" label="Guangzhou" />
-      <n-checkbox value="Shenzen" label="Shenzhen" />
+      <n-checkbox value="Shenzhen" label="Shenzhen" />
     </n-space>
   </n-checkbox-group>
 </template>

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

@@ -41,7 +41,7 @@ resizable.vue
 | min-height | `number` | `undefined` | Max height of draggable drawer. | 2.35.0 |
 | placement | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Drawer placement. |  |
 | resizable | `boolean` | `false` | Whether to resize the width / height of drawer. | 2.31.0 |
-| scrollbar-props | `object` | `undefined` | 属性参考 [Scrollbar props](scrollbar#Scrollbar-Props) |  |
+| scrollbar-props | `object` | `undefined` | See [Scrollbar props](scrollbar#Scrollbar-Props). |  |
 | show | `boolean` | `false` | Whether to show drawer. |  |
 | show-mask | `boolean` | `true` | Whether to show mask. If set to `'transparent'`, transparent mask would be shown. If set to false, `trap-focus` will be disabled. | 2.28.3 |
 | to | `string \| HTMLElement` | `'body'` | Container node of the drawer. |  |

src/qr-code/demos/enUS/index.demo-entry.md

@@ -2,6 +2,8 @@
 
 It is always only valid for a short time.
 
+Available since `2.36.0`.
+
 ## Demos
 
 ```demo

src/qr-code/demos/zhCN/index.demo-entry.md

@@ -2,6 +2,8 @@
 
 总是即将过期。
 
+`2.36.0` 版本开始提供该组件。
+
 ## 演示
 
 ```demo

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

@@ -2,6 +2,8 @@
 
 The flexible layout tool provides the possibility of customizing the interface layout.
 
+Available since `2.36.0`.
+
 ## Demos
 
 ```demo

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

@@ -2,6 +2,8 @@
 
 灵活的布局工具，提供了用户自定义界面布局的可能性。
 
+`2.36.0` 版本开始提供该组件。
+
 ## 演示
 
 ```demo

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

@@ -101,6 +101,12 @@ override-click-behavior.vue
 | prefix? | `string \| (() => VNodeChild)` | Prefix of the node. |
 | suffix? | `string \| (() => VNodeChild)` | Suffix of the node. |
 
+### Tree Slots
+
+| Name  | Parameters | Description                    | Version |
+| ----- | ---------- | ------------------------------ | ------- |
+| empty | `()`       | Empty state slot for the tree. |         |
+
 ## Methods
 
 ### Tree Methods

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

@@ -107,6 +107,12 @@ expand-debug.vue
 | prefix? | `string \| (() => VNodeChild)` | 节点的前缀 |
 | suffix? | `string \| (() => VNodeChild)` | 节点的后缀 |
 
+### Tree Slots
+
+| 名称  | 参数 | 描述                  | 版本 |
+| ----- | ---- | --------------------- | ---- |
+| empty | `()` | 树组件无数据时的 slot |      |
+
 ### Tree Methods
 
 | 名称 | 参数 | 说明 | 版本 |

src/virtual-list/demos/enUS/index.demo-entry.md

@@ -4,6 +4,8 @@ When it comes to virtual lists, it can feel like a list is infinitely long, but
 
 It's like a lazy programmer holding up a blank note and saying, "You can't see me, and I can't load myself!"
 
+Available since `2.36.0`.
+
 ## Demos
 
 ```demo

src/virtual-list/demos/zhCN/index.demo-entry.md

@@ -4,6 +4,8 @@
 
 就像是个懒惰的程序员拿着一个空白纸条说：“你看不见我，我也不会加载自己！”
 
+`2.36.0` 版本开始提供该组件。
+
 ## 演示
 
 ```demo