mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-04-06 14:30:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'docs'

Browse Source
This commit is contained in:
07akioni 2024-07-18 23:46:50 +08:00
commit 0eb4fb560d
26 changed files with 606 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
demo/pages/docs/nuxtjs/enUS/index.md Normal file
View File

@ -0,0 +1,57 @@
# Nuxt.js
## Caveat
This document pertains to SSR (Server-Side Rendering). Please familiarize yourself with the [SSR Caveats](ssr#Caveat) before proceeding.
## Nuxt.js Demo
You can refer to [example](https://github.com/07akioni/naive-ui-nuxt-demo).
## Using Nuxt Module
This is the same approach which previous demo uses.
Install the [module](https://github.com/07akioni/nuxtjs-naive-ui) to your Nuxt application with one command:
```bash
# npm
npx nuxi module add nuxtjs-naive-ui
# pnpm
pnpm dlx nuxi module add nuxtjs-naive-ui
```
## 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({
modules: ['nuxtjs-naive-ui'],
vite: {
plugins: [
AutoImport({
imports: [
{
'naive-ui': [
'useDialog',
'useMessage',
'useNotification',
'useLoadingBar'
]
}
]
}),
Components({
resolvers: [NaiveUiResolver()]
})
]
}
})
```

57
demo/pages/docs/nuxtjs/zhCN/index.md Normal file
View File

@ -0,0 +1,57 @@
# Nuxt.js
## 注意
本文档涉及到 SSR，请先了解[SSR 的注意事项](ssr#注意)。
## Nuxt.js 示例
参考[例子](https://github.com/07akioni/naive-ui-nuxt-demo)。
## 使用 Nuxt Module
这和上一个示例使用的是同样的方式。
在你的 Nuxt 应用中使用下列命令安装此[模块](https://github.com/07akioni/nuxtjs-naive-ui)：
```bash
# npm
npx nuxi module add nuxtjs-naive-ui
# pnpm
pnpm dlx nuxi module add nuxtjs-naive-ui
```
## 在 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({
modules: ['nuxtjs-naive-ui'],
vite: {
plugins: [
AutoImport({
imports: [
{
'naive-ui': [
'useDialog',
'useMessage',
'useNotification',
'useLoadingBar'
]
}
]
}),
Components({
resolvers: [NaiveUiResolver()]
})
]
}
})
```

93
demo/pages/docs/ssr/enUS/index.md
View File

@ -2,97 +2,30 @@
Since naive-ui is using CSS in JS, in SSR mode it needs some extra configuration.
## Nuxt
## Caveat
If you are using Nuxt, please make sure you are using `naive-ui@>=2.29.0`.
When using SSR under any framework, it is essential to ensure that the project meets the following conditions:
### Nuxt Example
1. During the build process, any direct or indirect references to the `@css-render/*` and `css-render` packages must have a version of `>=0.15.14`.
2. During the build process, each direct or indirect reference to any `@css-render/*` and `css-render` package should ultimately point to a single target (a package should not have multiple versions or multiple copies of the same version).
If you are using Nuxt, please see [example](https://github.com/07akioni/naive-ui-nuxt-demo).
You can search for `css-render` in the lock file to check for duplicate packages.
### Main Process
Failure to meet these conditions may result in SSR build failures.
1. Install `naive-ui` and `@css-render/vue3-ssr`.
2. Add the following config in your `nuxt.config.ts`.
If you encounter issues due to this, you can resolve the problem by directing all related packages to the same version using the `resolution` field in the `package.json` file.
```ts
import { defineNuxtConfig } from 'nuxt'
## Nuxt.js
// 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/formatInTimeZone']
: []
}
}
})
```
See [Nuxt.js](nuxtjs).
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.
## Vitepress
### Using Auto Import in Nuxt
See [Vitepress](vitepress).
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.
## Vite SSG/SSE
```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()]
})
]
}
})
```
See [Vite SSG/SSE](vite-ssge).
## Vite Example

93
demo/pages/docs/ssr/zhCN/index.md
View File

@ -2,97 +2,30 @@
由于 naive-ui 在使用 CSS in JS，在 SSR 的情况下需要一些额外的配置。
## Nuxt
## 注意
如果你在使用 Nuxt，请确保你在使用 `naive-ui@>=2.29.0`。
无论在任何框架下使用 SSR，需要确保项目满足以下条件：
### Nuxt 示例
1. 构建时，任何被直接和间接引用的 `@css-render/*` 和 `css-render` 包版本都 `>=0.15.14`
2. 构建时，任何被直接和间接引用的每个 `@css-render/*` 和 `css-render` 包最终只都指向一个目标（一个包不会有多个版本，也不会有同一个版本的多个副本）
如果你在使用 Nuxt，参考[例子](https://github.com/07akioni/naive-ui-nuxt-demo)。
你可以在 lock file 中搜索 `css-render` 去检查是否有重复的包。
### 重点步骤
如果上述条件没有满足，可能会导致 SSR 构建失败。
1. 安装 `naive-ui` 和 `@css-render/vue3-ssr`
2. 在 `nuxt.config.ts` 增添下列配置
如果因为这个原因遇到问题，你可以通过 `package.json` 中的 `resolution` 字段来让所有相关包指向同一个版本来解决问题。
```ts
import { defineNuxtConfig } from 'nuxt'
## Nuxt.js
// 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/formatInTimeZone']
: []
}
}
})
```
参考 [Nuxt.js](nuxtjs)。
3. 在 Nuxt 项目的 `plugins` 文件夹增加这个[插件](https://github.com/07akioni/naive-ui-nuxt-demo/blob/main/plugins/naive-ui.ts)
## Vitepress
### 在 Nuxt 中使用自动引入
参考 [Vitepress](vitepress)。
同样可以使用 `unplugin-auto-import` 插件来自动导入 API，使用 `unplugin-vue-components` 插件来按需自动加载组件。在这种情况下，`nuxt.config.ts` 会比上面的例子多几行配置。
## Vite SSG/SSE
```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 SSG/SSE](vite-ssge)。
## Vite 示例

48
demo/pages/docs/vite-ssge/enUS/index.md Normal file
View File

@ -0,0 +1,48 @@
# Vite SSG/SSE
## Caveat
This document pertains to SSR (Server-Side Rendering). Please familiarize yourself with the [SSR Caveats](ssr#Caveat) before proceeding.
## Setup Guide
If you are using `vite-sse` or `vite-ssg`. Follow the following steps to setup `naive-ui`.
### 1. Install `naive-ui`, `@css-render/vue3-ssr`
```bash
# pnpm
pnpm i naive-ui @css-render/vue3-ssr
# npm
npm i naive-ui @css-render/vue3-ssr
```
### 2. Modify `vite.config.ts`
Add following content. If there exists content already, merge them.
```ts
import { setup } from '@css-render/vue3-ssr'
defineConfig({
ssr: {
noExternal: ['naive-ui', 'vueuc', 'date-fns']
},
ssgOptions: {
async onBeforePageRender(_, __, appCtx) {
const { collect } = setup(appCtx.app)
;(appCtx as any).__collectStyle = collect
return undefined
},
async onPageRendered(_, renderedHTML, appCtx) {
return renderedHTML.replace(
/<\/head>/,
`${(appCtx as any).__collectStyle()}</head>`
)
}
}
})
```
Then you can using naive-ui in `vite-ssg` or `vite-sse` project.

48
demo/pages/docs/vite-ssge/zhCN/index.md Normal file
View File

@ -0,0 +1,48 @@
# Vite SSG/SSE
## 注意
本文档涉及到 SSR，请先了解[SSR 的注意事项](ssr#注意)。
## 配置指南
如果你正在使用 `vite-sse` 或者 `vite-ssg`，通过下面的步骤设定 `naive-ui`。
### 1. 安装 `naive-ui`、`@css-render/vue3-ssr`
```bash
# pnpm
pnpm i naive-ui @css-render/vue3-ssr
# npm
npm i naive-ui @css-render/vue3-ssr
```
### 2. 修改 `vite.config.ts`
增加下列内容，如果已经存在一些内容，则合并他们。
```ts
import { setup } from '@css-render/vue3-ssr'
defineConfig({
ssr: {
noExternal: ['naive-ui', 'vueuc', 'date-fns']
},
ssgOptions: {
async onBeforePageRender(_, __, appCtx) {
const { collect } = setup(appCtx.app)
;(appCtx as any).__collectStyle = collect
return undefined
},
async onPageRendered(_, renderedHTML, appCtx) {
return renderedHTML.replace(
/<\/head>/,
`${(appCtx as any).__collectStyle()}</head>`
)
}
}
})
```
现在你可以在 `vite-ssg` 或 `vite-sse` 项目中使用 `naive-ui` 了。

140
demo/pages/docs/vitepress/enUS/index.md Normal file
View File

@ -0,0 +1,140 @@
# Vitepress
## Caveat
This document pertains to SSR (Server-Side Rendering). Please familiarize yourself with the [SSR Caveats](ssr#Caveat) before proceeding.
## Example
This is a [demo](https://github.com/07akioni/naive-ui-vitepress-demo) for using `naive-ui` in `vitepress` with SSR enabled.
You can directly use the demo.
## Key process from scratch
If you want to build your own demo from scratch, follow the next steps:
### 0. Install `@css-render/vue3-ssr`
Make sure its version `>=0.15.14`.
```bash
# npm
npm install --save-dev @css-render/vue3-ssr
# pnpm
pnpm install --save-dev @css-render/vue3-ssr
```
### 1. Add this content to `.vitepress/theme/index.js`
```js
// .vitepress/theme/index.js
import { defineComponent, h, inject } from 'vue'
import DefaultTheme from 'vitepress/theme'
import { NConfigProvider } from 'naive-ui'
import { setup } from '@css-render/vue3-ssr'
import { useRoute } from 'vitepress'
const { Layout } = DefaultTheme
const CssRenderStyle = defineComponent({
setup () {
const collect = inject('css-render-collect')
return {
style: collect()
}
},
render () {
return h('css-render-style', {
innerHTML: this.style
})
}
})
const VitepressPath = defineComponent({
setup () {
const route = useRoute()
return () => {
return h('vitepress-path', null, [route.path])
}
}
})
const NaiveUIProvider = defineComponent({
render () {
return h(
NConfigProvider,
{ abstract: true, inlineThemeDisabled: true },
{
default: () => [
h(Layout, null, { default: this.$slots.default?.() }),
import.meta.env.SSR ? [h(CssRenderStyle), h(VitepressPath)] : null
]
}
)
}
})
export default {
extends: DefaultTheme,
Layout: NaiveUIProvider,
enhanceApp: ({ app }) => {
if (import.meta.env.SSR) {
const { collect } = setup(app)
app.provide('css-render-collect', collect)
}
}
}
```
### 2. Add this content to `.vitepress/config.mts`
```ts
import { defineConfig } from 'vitepress'
const fileAndStyles: Record<string, string> = {}
export default defineConfig({
// ...
vite: {
ssr: {
noExternal: ['naive-ui', 'date-fns', 'vueuc']
}
},
postRender(context) {
const styleRegex = /<css-render-style>((.|\s)+)<\/css-render-style>/
const vitepressPathRegex = /<vitepress-path>(.+)<\/vitepress-path>/
const style = styleRegex.exec(context.content)?.[1]
const vitepressPath = vitepressPathRegex.exec(context.content)?.[1]
if (vitepressPath && style) {
fileAndStyles[vitepressPath] = style
}
context.content = context.content.replace(styleRegex, '')
context.content = context.content.replace(vitepressPathRegex, '')
},
transformHtml(code, id) {
const html = id.split('/').pop()
if (!html) return
const style = fileAndStyles[`/${html}`]
if (style) {
return code.replace(/<\/head>/, style + '</head>')
}
}
})
```
### 3. Start using naive-ui in your markdown file
```md
...
<script setup>
import { NButton } from 'naive-ui'
</script>
<NButton>Hello World</NButton>
...
```

140
demo/pages/docs/vitepress/zhCN/index.md Normal file
View File

@ -0,0 +1,140 @@
# Vitepress
## 注意
本文档涉及到 SSR，请先了解[SSR 的注意事项](ssr#注意)。
## 例子
这是一个使用 `naive-ui`、`vitepress` 的[样例](https://github.com/07akioni/naive-ui-vitepress-demo)，支持 SSR。
你可以直接使用这个样例。
## 从零开始的关键步骤
如果你希望从头开始改造一个 vitepress 项目，遵循下列步骤
### 0. 安装 `@css-render/vue3-ssr`
确保其版本 `>=0.15.14`。
```bash
# npm
npm install --save-dev @css-render/vue3-ssr
# pnpm
pnpm install --save-dev @css-render/vue3-ssr
```
### 1. 把下面的内容增加到 `.vitepress/theme/index.js`
```js
// .vitepress/theme/index.js
import { defineComponent, h, inject } from 'vue'
import DefaultTheme from 'vitepress/theme'
import { NConfigProvider } from 'naive-ui'
import { setup } from '@css-render/vue3-ssr'
import { useRoute } from 'vitepress'
const { Layout } = DefaultTheme
const CssRenderStyle = defineComponent({
setup () {
const collect = inject('css-render-collect')
return {
style: collect()
}
},
render () {
return h('css-render-style', {
innerHTML: this.style
})
}
})
const VitepressPath = defineComponent({
setup () {
const route = useRoute()
return () => {
return h('vitepress-path', null, [route.path])
}
}
})
const NaiveUIProvider = defineComponent({
render () {
return h(
NConfigProvider,
{ abstract: true, inlineThemeDisabled: true },
{
default: () => [
h(Layout, null, { default: this.$slots.default?.() }),
import.meta.env.SSR ? [h(CssRenderStyle), h(VitepressPath)] : null
]
}
)
}
})
export default {
extends: DefaultTheme,
Layout: NaiveUIProvider,
enhanceApp: ({ app }) => {
if (import.meta.env.SSR) {
const { collect } = setup(app)
app.provide('css-render-collect', collect)
}
}
}
```
### 2. 把下面的内容增加到 `.vitepress/config.mts`
```ts
import { defineConfig } from 'vitepress'
const fileAndStyles: Record<string, string> = {}
export default defineConfig({
// ...
vite: {
ssr: {
noExternal: ['naive-ui', 'date-fns', 'vueuc']
}
},
postRender(context) {
const styleRegex = /<css-render-style>((.|\s)+)<\/css-render-style>/
const vitepressPathRegex = /<vitepress-path>(.+)<\/vitepress-path>/
const style = styleRegex.exec(context.content)?.[1]
const vitepressPath = vitepressPathRegex.exec(context.content)?.[1]
if (vitepressPath && style) {
fileAndStyles[vitepressPath] = style
}
context.content = context.content.replace(styleRegex, '')
context.content = context.content.replace(vitepressPathRegex, '')
},
transformHtml(code, id) {
const html = id.split('/').pop()
if (!html) return
const style = fileAndStyles[`/${html}`]
if (style) {
return code.replace(/<\/head>/, style + '</head>')
}
}
})
```
### 3. 在 markdown 文件中开始使用 naive-ui
```md
...
<script setup>
import { NButton } from 'naive-ui'
</script>
<NButton>Hello World</NButton>
...
```

4
demo/pages/home/Footer.vue
View File

@ -131,7 +131,9 @@ export default defineComponent({
{{ t('memberLimitReached') }} 32377370<br>
{{ t('dingTalkGroupChat') }} 4
{{ t('memberLimitReached') }} 8165002788<br>
{{ t('dingTalkGroupChat') }} 5 31205022250
{{ t('dingTalkGroupChat') }} 5
{{ t('memberLimitReached') }} 31205022250<br>
{{ t('dingTalkGroupChat') }} 6 62720001971
</n-tooltip>
</div>
<div class="footer-links-col footer-links-col--last">

24
demo/routes/routes.js
View File

@ -52,6 +52,18 @@ export const enDocRoutes = [
path: 'ssr',
component: () => import('../pages/docs/ssr/enUS/index.md')
},
{
path: 'nuxtjs',
component: () => import('../pages/docs/nuxtjs/enUS/index.md')
},
{
path: 'vitepress',
component: () => import('../pages/docs/vitepress/enUS/index.md')
},
{
path: 'vite-ssge',
component: () => import('../pages/docs/vite-ssge/enUS/index.md')
},
{
path: 'common-issues',
component: () => import('../pages/docs/common-issues/enUS/index.md')
@ -133,6 +145,18 @@ export const zhDocRoutes = [
path: 'ssr',
component: () => import('../pages/docs/ssr/zhCN/index.md')
},
{
path: 'nuxtjs',
component: () => import('../pages/docs/nuxtjs/zhCN/index.md')
},
{
path: 'vitepress',
component: () => import('../pages/docs/vitepress/zhCN/index.md')
},
{
path: 'vite-ssge',
component: () => import('../pages/docs/vite-ssge/zhCN/index.md')
},
{
path: 'common-issues',
component: () => import('../pages/docs/common-issues/zhCN/index.md')

15
demo/store/menu-options.js
View File

@ -159,6 +159,21 @@ export function createDocumentationMenuOptions({ lang, theme }) {
zh: '服务端渲染 SSR',
path: '/ssr'
},
{
en: 'Nuxt.js',
zh: 'Nuxt.js',
path: '/nuxtjs'
},
{
en: 'Vitepress',
zh: 'Vitepress',
path: '/vitepress'
},
{
en: 'Vite SSG/SSE',
zh: 'Vite SSG/SSE',
path: '/vite-ssge'
},
{
en: 'Customizing Theme',
zh: '调整主题',

10
src/card/demos/enUS/index.demo-entry.md
View File

@ -25,20 +25,20 @@ embedded.vue
| Name | Type | Default | Description | Version |
| --- | --- | --- | --- | --- |
| action | `() => VNodeChild` | `undefined` | Operating area content, must be a render function. | NEXT_VERION |
| action | `() => VNodeChild` | `undefined` | Operating area content, must be a render function. | 2.38.2 |
| bordered | `boolean` | `true` | Whether to show the card border. | |
| closable | `boolean` | `false` | Is it allowed to close. | |
| content | `string \| (() => VNodeChild)` | `undefined` | Card content, can be a render function. | NEXT_VERION |
| content | `string \| (() => VNodeChild)` | `undefined` | Card content, can be a render function. | 2.38.2 |
| content-class | `string` | `undefined` | The class of the card content area. | 2.36.0 |
| content-style | `Object \| string` | `undefined` | The style of the card content area. | |
| cover | `() => VNodeChild` | `undefined` | Cover content, must be a render function. | NEXT_VERION |
| cover | `() => VNodeChild` | `undefined` | Cover content, must be a render function. | 2.38.2 |
| embedded | `boolean` | `false` | Use a darker background color to show the embedding effect (only for bright themes) | |
| footer | `() => VNodeChild` | `undefined` | Footer content, must be a render function. | NEXT_VERION |
| footer | `() => VNodeChild` | `undefined` | Footer content, must be a render function. | 2.38.2 |
| footer-class | `string` | `undefined` | The class of the bottom area of the card. | 2.36.0 |
| footer-style | `Object \| string` | `undefined` | The style of the bottom area of the card. | |
| header-class | `string` | `undefined` | The class of the card head area. | 2.36.0 |
| header-style | `Object \| string` | `undefined` | The style of the card head area. | |
| header-extra | `() => VNodeChild` | `undefined` | Header extra content, must be a render function. | NEXT_VERION |
| header-extra | `() => VNodeChild` | `undefined` | Header extra content, must be a render function. | 2.38.2 |
| header-extra-class | `string` | `undefined` | The class of the card head extra area. | 2.36.0 |
| header-extra-style | `Object \| string` | `undefined` | The style of the card head extra area. | 2.25.0 |
| hoverable | `boolean` | `false` | Whether to show shadow when hovering on the card. | |

12
src/card/demos/zhCN/index.demo-entry.md
View File

@ -27,27 +27,27 @@ embedded-debug.vue
| 名称 | 类型 | 默认值 | 说明 | 版本 |
| --- | --- | --- | --- | --- |
| action | `() => VNodeChild` | `undefined` | 操作区域内容。，需要是 render 函数 | NEXT_VERION |
| action | `() => VNodeChild` | `undefined` | 操作区域内容，需要是 render 函数 | 2.38.2 |
| bordered | `boolean` | `true` | 是否显示卡片边框 | |
| closable | `boolean` | `false` | 是否允许关闭 | |
| content | `string \| (() => VNodeChild)` | `undefined` | 卡片内容，，可以是 render 函数 | NEXT_VERION |
| content | `string \| (() => VNodeChild)` | `undefined` | 卡片内容，可以是 render 函数 | 2.38.2 |
| content-class | `string` | `undefined` | 卡片内容区域的类名 | 2.36.0 |
| content-style | `Object \| string` | `undefined` | 卡片内容区域的样式 | |
| cover | `() => VNodeChild` | `undefined` | 覆盖内容，需要是 render 函数 | NEXT_VERION |
| cover | `() => VNodeChild` | `undefined` | 覆盖内容，需要是 render 函数 | 2.38.2 |
| embedded | `boolean` | `false` | 使用更深的背景色展现嵌入效果，只对亮色主题生效 | |
| footer | `() => VNodeChild` | `undefined` | 底部内容 | NEXT_VERION |
| footer | `() => VNodeChild` | `undefined` | 底部内容 | 2.38.2 |
| footer-class | `string` | `undefined` | 卡片底部区域的类名 | 2.36.0 |
| footer-style | `Object \| string` | `undefined` | 卡片底部区域的样式 | |
| header-class | `string` | `undefined` | 卡片头部区域的类名 | 2.36.0 |
| header-style | `Object \| string` | `undefined` | 卡片头部区域的样式 | |
| header-extra | `() => VNodeChild` | `undefined` | 头部额外内容，需要是 render 函数 | NEXT_VERION |
| header-extra | `() => VNodeChild` | `undefined` | 头部额外内容，需要是 render 函数 | 2.38.2 |
| header-extra-class | `string` | `undefined` | 卡片头部额外内容的类名 | 2.36.0 |
| header-extra-style | `Object \| string` | `undefined` | 卡片头部额外内容的样式 | 2.25.0 |
| hoverable | `boolean` | `false` | 卡片是否可悬浮 | |
| segmented | `boolean \| { [part in 'content' \| 'footer' \| 'action']?: boolean \| 'soft' }` | `false` | 卡片的分段区域设置 | |
| size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | 卡片的尺寸 | |
| tag | `string` | `'div'` | 卡片组件要渲染为什么标签 | 2.34.3 |
| title | `string \| (() => VNodeChild)` | `undefined` | 卡片的标题，，可以是 render 函数 | 2.38.2 支持 render 函数 |
| title | `string \| (() => VNodeChild)` | `undefined` | 卡片的标题，可以是 render 函数 | 2.38.2 支持 render 函数 |
| on-close | `() => void` | `undefined` | 点击卡片关闭图标时的回调 | |
### Card Slots

1
src/color-picker/demos/enUS/index.demo-entry.md
View File

@ -47,6 +47,7 @@ native.vue
| Name | Parameters | Description | Version |
| --- | --- | --- | --- |
| label | `(color: string \| null)` | Label of the color picker trigger. | 2.24.0 |
| action | `()` | Custom action. | 2.24.0 |
## Q & A

7
src/color-picker/demos/zhCN/index.demo-entry.md
View File

@ -45,9 +45,10 @@ close-debug.vue
### ColorPicker Slots
| 名称 | 参数 | 说明 | 版本 |
| ----- | ------------------------- | ------------ | ------ |
| label | `(color: string \| null)` | 触发器的内容 | 2.24.0 |
| 名称 | 参数 | 说明 | 版本 |
| ------ | ------------------------- | ------------------- | ------ |
| label | `(color: string \| null)` | 触发器的内容 | 2.24.0 |
| action | `()` | 菜单操作区域的 slot | 2.24.0 |
## Q & A

2
src/data-table/demos/enUS/index.demo-entry.md
View File

@ -157,7 +157,7 @@ export-csv.vue
| sorter | `boolean \| function \| 'default'` | `false` | The sorter of the column. If set `'default'`, it will use a basic builtin compare function. If set to `true`, it will only display sort icon on the column, which can be used in async status. Otherwise it works like `Array.sort`'s compare function. | |
| tree | `boolean` | `false` | Whether to show tree data expand trigger in the column. | 2.28.3 |
| title | `string \| (() => VNodeChild)` | `undefined` | Column title, Can be a render function. | |
| titleRowSpan | `number` | `undefined` | The number of cells occupied by the title row. | |
| titleColSpan | `number` | `undefined` | The number of cells occupied by the title col. | |
| type | `'selection' \| 'expand'` | `undefined` | Column type. | |
| width | `number \| string` | `undefined` | Width of the column (**required and should be number** when fixed). | 2.24.0 (`string` type) |

2
src/data-table/demos/zhCN/index.demo-entry.md
View File

@ -168,7 +168,7 @@ rtl-debug.vue
| sorter | `boolean \| function \| 'default'` | `undefined` | 这一列的排序方法。如果设为 `'default'` 表格将会使用一个内置的排序函数；如果设为 `true`，表格将只会在这列展示一个排序图标，在异步的时候可能有用。其他情况下它工作的方式类似 `Array.sort` 的对比函数 | |
| tree | `boolean` | `false` | 是否在这一列展示树形数据的展开按钮 | 2.28.3 |
| title | `string \| (() => VNodeChild)` | `undefined` | 列的 title 信息，可以是渲染函数 | |
| titleRowSpan | `number` | `undefined` | title 行所占的单元格的个数 | |
| titleColSpan | `number` | `undefined` | title 列占据的列数 | |
| type | `'selection' \| 'expand'` | `undefined` | 列的类型 | |
| width | `number \| string` | `undefined` | 列的宽度（在列固定时是**必需**的，并且需要为 `number` 类型） | 2.24.0（`string` 类型） |

2
src/form/demos/enUS/abnormal-warning.demo.vue
View File

@ -45,7 +45,7 @@ export default defineComponent({
formRef.value?.validate((errors, { warnings }) => {
if (errors) {
console.error(errors)
message.error('Valid.')
message.error('Invalid.')
}
else if (warnings) {
message.warning('Valid but be aware of warnings.')

20
src/form/demos/enUS/index.demo-entry.md
View File

@ -5,7 +5,7 @@
The element to collect and validate data.
<n-alert type="warning" title="Caveat" :bordered="false">
If you want to apply required rule for a form item with number typed value, you need to set <n-text code>`type: number`</n-text> in the rule object.
If you want to apply required rule for a form item with number typed value, you need to set <n-text code>`type: 'number'`</n-text> in the rule object.
</n-alert>
## Demos
@ -54,14 +54,16 @@ feedback-style.vue
The follow table doesn't demostrate all props of rules. If you want to know all the usages, please see <n-a href="https://github.com/yiminghe/async-validator" target="_blank">async-validator</n-a>.
</n-alert>
| Property | Type | Description | Version |
| --- | --- | --- | --- |
| asyncValidator | `(rule: FormItemRule, value: any, callback: (error?: Error) => void) => void` | Asynchronous validation in the form of a callback. | |
| message | `string` | Text to show when validation fails. | |
| renderMessage | `() => VNodeChild` | Render function or message. | 2.29.1 |
| required | `boolean` | Is it required. | |
| trigger | `string \| Array<string>` | Trigger type. | |
| validator | `(rule: FormItemRule, value: any) => boolean \| Error` | Validation rule. | |
| Property | Type | Default | Description | Version |
| --- | --- | --- | --- | --- |
| asyncValidator | `(rule: FormItemRule, value: any, callback: (error?: Error) => void) => void` | `undefined` | Asynchronous validation in the form of a callback. | |
| key | `string` | `undefined` | Unique key of this rule, which can be used to apply partial rules. See [Apply partial rules](form#partially-apply-rules.vue) example. | |
| level | `'error'` \| `'warning'` | `undefined` | Validation level. If there are already errors, `'warning'` level validation would be skipped. | |
| message | `string` | `undefined` | Text to show when validation fails. | |
| renderMessage | `() => VNodeChild` | `undefined` | Render function or message. | 2.29.1 |
| required | `boolean` | `undefined` | Is it required. | |
| trigger | `string \| Array<string>` | `undefined` | Trigger type. | |
| validator | `(rule: FormItemRule, value: any) => boolean \| Error` | `undefined` | Validation rule. | |
#### FormValidateMessages Type

2
src/form/demos/zhCN/abnormal-warning.demo.vue
View File

@ -43,7 +43,7 @@ export default defineComponent({
formRef.value?.validate((errors, { warnings }) => {
if (errors) {
console.error(errors)
message.error('校验通过了')
message.error('校验未通过')
}
else if (warnings) {
message.warning('校验通过但是留意还有警告')

20
src/form/demos/zhCN/index.demo-entry.md
View File

@ -5,7 +5,7 @@
收集、验证信息。
<n-alert type="warning" title="注意" :bordered="false">
如果你需要为一个值为 number 类型的表项设定 required，你需要在 rule 对象中设定 <n-text code>`type: number`</n-text>。
如果你需要为一个值为 number 类型的表项设定 required，你需要在 rule 对象中设定 <n-text code>`type: 'number'`</n-text>。
</n-alert>
## 演示
@ -54,14 +54,16 @@ feedback-style.vue
以下并不是规则的全部用法，如果你想了解更多的用法，请参考 <n-a href="https://github.com/yiminghe/async-validator" target="_blank">async-validator</n-a>。
</n-alert>
| 属性 | 类型 | 说明 | 版本 |
| --- | --- | --- | --- |
| asyncValidator | `(rule: FormItemRule, value: any, callback: (error?: Error) => void) => void` | 异步校验，支持定义回调函数 | |
| message | `string` | 校验失败时展示的信息 | |
| renderMessage | `() => VNodeChild` | 信息的渲染函数 | 2.29.1 |
| required | `boolean` | 是否必填 | |
| trigger | `string \| Array<string>` | 触发方式 | |
| validator | `(rule: FormItemRule, value: any) => boolean \| Error` | 校验规则 | |
| 属性 | 类型 | 默认值 | 说明 | 版本 |
| --- | --- | --- | --- | --- |
| asyncValidator | `(rule: FormItemRule, value: any, callback: (error?: Error) => void) => void` | `undefined` | 异步校验，支持定义回调函数 | |
| key | `string` | `undefined` | 规则的唯一 key，可用于只执行部分规则验证。参考示例 [只执行部分规则](form#partially-apply-rules.vue) | |
| level | `'error'` \| `'warning'` | `undefined` | 验证级别。如果存在 `error` 级别错误，则会跳过 `warning` 级别验证 | |
| message | `string` | `undefined` | 校验失败时展示的信息 | |
| renderMessage | `() => VNodeChild` | `undefined` | 信息的渲染函数 | 2.29.1 |
| required | `boolean` | `undefined` | 是否必填 | |
| trigger | `string \| Array<string>` | `undefined` | 触发方式 | |
| validator | `(rule: FormItemRule, value: any) => boolean \| Error` | `undefined` | 校验规则 | |
### FormItem Props

2
src/image/src/utils.ts
View File

@ -18,7 +18,7 @@ export function resolveOptionsAndHash(
hash: `${options.rootMargin || '0px 0px 0px 0px'}-${
Array.isArray(options.threshold)
? options.threshold.join(',')
: options.threshold ?? '0'
: (options.threshold ?? '0')
}`,
options: {
...options,

2
src/infinite-scroll/demos/enUS/basic.demo.vue
View File

@ -34,7 +34,7 @@ export default defineComponent({
height: 46px;
justify-content: center;
margin-bottom: 10px;
background-color: #e7f5ee;
background-color: rgba(0, 128, 0, 0.16);
}
.item:last-child {

2
src/infinite-scroll/demos/zhCN/basic.demo.vue
View File

@ -34,7 +34,7 @@ export default defineComponent({
height: 46px;
justify-content: center;
margin-bottom: 10px;
background-color: #e7f5ee;
background-color: rgba(0, 128, 0, 0.16);
}
.item:last-child {

4
src/skeleton/src/Skeleton.tsx
View File

@ -68,8 +68,8 @@ export default defineComponent({
if (size !== undefined) {
sizeHeight = selfThemeVars[createKey('height', size)]
}
const mergedWidth = circle ? width ?? height ?? sizeHeight : width
const mergedHeight = (circle ? width ?? height : height) ?? sizeHeight
const mergedWidth = circle ? (width ?? height ?? sizeHeight) : width
const mergedHeight = (circle ? (width ?? height) : height) ?? sizeHeight
return {
display: text ? 'inline-block' : '',
verticalAlign: text ? '-0.125em' : '',

2
src/slider/src/Slider.tsx
View File

@ -470,7 +470,7 @@ export default defineComponent({
return
const values = arrifiedValueRef.value.slice()
const activeIndex = props.range
? getClosestMark(pointValue, values)?.index ?? -1
? (getClosestMark(pointValue, values)?.index ?? -1)
: 0
if (activeIndex !== -1) {
// avoid triggering scrolling on touch