From f1620004f885068fca6f43b1865b7813dfa30461 Mon Sep 17 00:00:00 2001 From: puxiao Date: Sun, 21 Jul 2024 21:41:25 +0800 Subject: [PATCH 1/6] docs(customize-theme): get theme vars (#6015) --- demo/pages/docs/customize-theme/enUS/index.md | 4 ++++ demo/pages/docs/customize-theme/zhCN/index.md | 4 ++++ volar.d.ts | 8 ++++---- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/demo/pages/docs/customize-theme/enUS/index.md b/demo/pages/docs/customize-theme/enUS/index.md index a2e66b816ce..af0eabc5d3c 100644 --- a/demo/pages/docs/customize-theme/enUS/index.md +++ b/demo/pages/docs/customize-theme/enUS/index.md @@ -35,6 +35,10 @@ If `theme` is `undefined` it won't affect the theme of components inside. ``` +## Get theme vars + +Whether it's the default light theme (`lightTheme`), the modified dark theme (`darkTheme`), or the custom theme we adjusted, you can get theme variables within the scope of the theme using [useThemeVars](./theme#use-theme-vars). + ## Customizing theme vars (design tokens) No CSS (Scss, Less) needed. diff --git a/demo/pages/docs/customize-theme/zhCN/index.md b/demo/pages/docs/customize-theme/zhCN/index.md index 3f6eeb0f066..91fb0839cad 100644 --- a/demo/pages/docs/customize-theme/zhCN/index.md +++ b/demo/pages/docs/customize-theme/zhCN/index.md @@ -35,6 +35,10 @@ Naive UI 通过使用 `n-config-provider` 调整主题。 ``` +## 获取主题变量 + +无论是默认的亮色主题(`lightTheme`)，还是修改后的暗色主题(`darkTheme`)，亦或我们通过调整得到的自定义主题，在该主题生效范围内的组件中都可以通过 [useThemeVars](./theme#use-theme-vars) 来获取主题变量。 + ## 调整主题变量 你不需要写任何 CSS（Scss、Less...）。 diff --git a/volar.d.ts b/volar.d.ts index 84e15034442..755f354078b 100644 --- a/volar.d.ts +++ b/volar.d.ts @@ -49,6 +49,8 @@ declare module 'vue' { NEmpty: (typeof import('naive-ui'))['NEmpty'] NEquation: (typeof import('naive-ui'))['NEquation'] NFlex: (typeof import('naive-ui'))['NFlex'] + NFloatButton: (typeof import('naive-ui'))['NFloatButton'] + NFloatButtonGroup: (typeof import('naive-ui'))['NFloatButtonGroup'] NForm: (typeof import('naive-ui'))['NForm'] NFormItem: (typeof import('naive-ui'))['NFormItem'] NFormItemCol: (typeof import('naive-ui'))['NFormItemCol'] @@ -71,6 +73,7 @@ declare module 'vue' { NIconWrapper: (typeof import('naive-ui'))['NIconWrapper'] NImage: (typeof import('naive-ui'))['NImage'] NImageGroup: (typeof import('naive-ui'))['NImageGroup'] + NInfiniteScroll: (typeof import('naive-ui'))['NInfiniteScroll'] NInput: (typeof import('naive-ui'))['NInput'] NInputGroup: (typeof import('naive-ui'))['NInputGroup'] NInputGroupLabel: (typeof import('naive-ui'))['NInputGroupLabel'] @@ -90,6 +93,7 @@ declare module 'vue' { NMenu: (typeof import('naive-ui'))['NMenu'] NMessageProvider: (typeof import('naive-ui'))['NMessageProvider'] NModal: (typeof import('naive-ui'))['NModal'] + NModalProvider: (typeof import('naive-ui'))['NModalProvider'] NNotificationProvider: (typeof import('naive-ui'))['NNotificationProvider'] NNumberAnimation: (typeof import('naive-ui'))['NNumberAnimation'] NOl: (typeof import('naive-ui'))['NOl'] @@ -146,10 +150,6 @@ declare module 'vue' { NUploadTrigger: (typeof import('naive-ui'))['NUploadTrigger'] NVirtualList: (typeof import('naive-ui'))['NVirtualList'] NWatermark: (typeof import('naive-ui'))['NWatermark'] - NModalProvider: (typeof import('naive-ui'))['NModalProvider'] - NFloatButton: (typeof import('naive-ui'))['NFloatButton'] - NFloatButtonGroup: (typeof import('naive-ui'))['NFloatButtonGroup'] - NInfiniteScroll: (typeof import('naive-ui'))['NInfiniteScroll'] } } export {} From a6e4eff57fc2a8f9e11cc2e67811123828f8c4b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=89=E4=BB=94?= <1414589221@qq.com> Date: Sun, 28 Jul 2024 23:38:44 +0800 Subject: [PATCH 2/6] docs(upload): prop desc (#5963) Co-authored-by: 07akioni <07akioni2@gmail.com> --- src/upload/demos/enUS/index.demo-entry.md | 4 ++-- src/upload/demos/zhCN/index.demo-entry.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/upload/demos/enUS/index.demo-entry.md b/src/upload/demos/enUS/index.demo-entry.md index dc5555e76f6..bd4fa443a41 100644 --- a/src/upload/demos/enUS/index.demo-entry.md +++ b/src/upload/demos/enUS/index.demo-entry.md @@ -61,11 +61,11 @@ download.vue | trigger-class | `string` | `undefined` | Class of trigger area. | 2.36.0 | | trigger-style | `Object \| string` | `undefined` | Style of trigger area. | 2.29.1 | | with-credentials | `boolean` | `false` | Any credentials to be sent with the request (e.g. cookie). | | -| on-change | `(options: { file: UploadFileInfo, fileList: Array, event?: Event }) => void` | `() => {}` | Uploaded file(s) status change callback. | | +| on-change | `(options: { file: UploadFileInfo, fileList: Array, event?: Event }) => void` | `undefined` | Uploaded file(s) status change callback. | | | on-error | `(options: { file: UploadFileInfo, event?: ProgressEvent }) => UploadFileInfo \| void` | `undefined` | Upload failed callback. | 2.24.0 | | on-finish | `(options: { file: UploadFileInfo, event?: Event }) => UploadFileInfo \| undefined` | `({ file }) => file` | Upload finished callback. You can intercept and even modify the uploaded `UploadFileInfo`. Note: file will be null in next event-loop | | | on-before-upload | `(options: { file: UploadFileInfo, fileList: Array }) => (Promise \| boolean \| void)` | `true` | Upload ready to start callback. Returning `false`, a promise resolved with `false`, or a rejected promise will cancel the upload. | | -| on-download | `(file: FileInfo) => void` | `undefined` | Callback for clicking download buttons. Returning `false`, `Promise resolve false`, `Promise rejected` will cancel the download. | | +| on-download | `(file: FileInfo) => Promise \| boolean \| any` | `undefined` | Callback for clicking download buttons. Returning `false`, `Promise resolve false`, `Promise rejected` will cancel the download. | | | on-preview | `(file: FileInfo, detail: { event: MouseEvent }) => void` | `undefined` | Callback for clicking file links or preview buttons. You can use `preventDefault` to prevent default anchor link open behavior. | `detail.event` 2.39.0 | | on-remove | `(options: { file: UploadFileInfo, fileList: Array, index: number }) => Promise \| boolean \| any` | `() => true` | File removed callback. Returning `false`, a promise resolved with `false`, or a rejected promise will cancel this removal. | `index` 2.38.2 | | on-update:file-list | `(fileList: UploadFileInfo[]) => void` | `undefined` | Callback function triggered on file-list changes. | | diff --git a/src/upload/demos/zhCN/index.demo-entry.md b/src/upload/demos/zhCN/index.demo-entry.md index cb4ced74de8..51989bb43c1 100644 --- a/src/upload/demos/zhCN/index.demo-entry.md +++ b/src/upload/demos/zhCN/index.demo-entry.md @@ -62,11 +62,11 @@ debug.vue | trigger-class | `string` | `undefined` | 触发器区域的类名 | 2.36.0 | | trigger-style | `Object \| string` | `undefined` | 触发器区域的样式 | 2.29.1 | | with-credentials | `boolean` | `false` | 是否携带 Cookie | | -| on-change | `(options: { file: UploadFileInfo, fileList: Array, event?: Event }) => void` | `() => {}` | 组件状态变化的回调，组件的任何文件状态变化都会触发回调 | | +| on-change | `(options: { file: UploadFileInfo, fileList: Array, event?: Event }) => void` | `undefined` | 组件状态变化的回调，组件的任何文件状态变化都会触发回调 | | | on-error | `(options: { file: UploadFileInfo, event?: ProgressEvent }) => UploadFileInfo \| void` | `undefined` | 文件上传失败的回调 | 2.24.0 | | on-finish | `(options: { file: UploadFileInfo, event?: ProgressEvent }) => UploadFileInfo \| undefined` | `({ file }) => file` | 文件上传结束的回调，可以修改传入的 UploadFileInfo 或者返回一个新的 UploadFileInfo。注意：file 将会下一次事件循环中被置为 null | | | on-before-upload | `(options: { file: UploadFileInfo, fileList: UploadFileInfo[] }) => (Promise \| boolean \| void)` | `undefined` | 文件上传之前的回调，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次上传 | | -| on-download | `(file: FileInfo) => void` | `undefined` | 点击文件下载按钮的回调函数，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次下载 | | +| on-download | `(file: FileInfo) => Promise \| boolean \| any` | `undefined` | 点击文件下载按钮的回调函数，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次下载 | | | on-preview | `(file: FileInfo, detail: { event: MouseEvent }) => void` | `undefined` | 点击文件链接或预览按钮的回调函数，你可以通过 `preventDefault` 来取消默认的链接打开行为 | `detail.event` 2.39.0 | | on-remove | `(options: { file: UploadFileInfo, fileList: Array, index: number }) => Promise \| boolean \| any` | `() => true` | 文件删除回调，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次删除 | `index` 2.38.2 | | on-update:file-list | `(fileList: UploadFileInfo[]) => void` | `undefined` | 当 file-list 改变时触发的回调函数 | | From c42bf9d336d678a3ef684141d7abafe1999e58d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=89=E4=BB=94?= <1414589221@qq.com> Date: Mon, 5 Aug 2024 23:57:33 +0800 Subject: [PATCH 3/6] docs(popover): remove non-existent prop `title` (#6202) --- src/popover/demos/enUS/index.demo-entry.md | 1 - src/popover/demos/zhCN/index.demo-entry.md | 1 - 2 files changed, 2 deletions(-) diff --git a/src/popover/demos/enUS/index.demo-entry.md b/src/popover/demos/enUS/index.demo-entry.md index 32462440a25..07ead3e5940 100644 --- a/src/popover/demos/enUS/index.demo-entry.md +++ b/src/popover/demos/enUS/index.demo-entry.md @@ -50,7 +50,6 @@ slots.vue | scrollable | `boolean` | `false` | Whether the popover's content is scrollable. | 2.28.3 | | show-arrow | `boolean` | `true` | Whether to show arrow if set. | | | show | `boolean` | `undefined` | Whether to show popover. | | -| title | `string` | `undefined` | Popover title. | | | to | `string \| HTMLElement \| false` | `'body'` | Container node of the popover content. `false` will keep it at trigger container. | | | trigger | `'hover' \| 'click' \| 'focus' \| 'manual'` | `'hover'` | The popover trigger type. | | | width | `number \| 'trigger'` | `undefined` | `'trigger'` means popover's width will follow its trigger's width. | | diff --git a/src/popover/demos/zhCN/index.demo-entry.md b/src/popover/demos/zhCN/index.demo-entry.md index 72e7696aeb6..fbe31339b00 100644 --- a/src/popover/demos/zhCN/index.demo-entry.md +++ b/src/popover/demos/zhCN/index.demo-entry.md @@ -57,7 +57,6 @@ center-arrow-debug.vue | scrollable | `boolean` | `false` | popover 内容是否可滚动 | 2.28.3 | | show-arrow | `boolean` | `true` | 是否显示箭头 | | | show | `boolean` | `undefined` | 是否展示 popover | | -| title | `string` | `undefined` | popover 的 title 信息 | | | to | `string \| HTMLElement \| false` | `'body'` | 弹出内容的目标容器位置，`false` 会待在原地 | | | trigger | `'hover' \| 'click' \| 'focus' \| 'manual'` | `'hover'` | popover 的触发方式 | | | width | `number \| 'trigger'` | `undefined` | `'trigger'` 表示 popover 的宽度会和它的触发元素一致 | | From 21b34b6b085831ca6e1cde4aa11e220e51a75340 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=89=E4=BB=94?= <1414589221@qq.com> Date: Sun, 11 Aug 2024 22:49:54 +0800 Subject: [PATCH 4/6] docs: fix prop desc (#5881) Co-authored-by: 07akioni <07akioni2@gmail.com> --- src/checkbox/demos/enUS/index.demo-entry.md | 2 ++ src/checkbox/demos/zhCN/index.demo-entry.md | 2 ++ src/switch/demos/enUS/index.demo-entry.md | 2 +- 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/checkbox/demos/enUS/index.demo-entry.md b/src/checkbox/demos/enUS/index.demo-entry.md index be46e63d540..6169f927df8 100644 --- a/src/checkbox/demos/enUS/index.demo-entry.md +++ b/src/checkbox/demos/enUS/index.demo-entry.md @@ -23,12 +23,14 @@ focus.vue | Name | Type | Default | Description | | --- | --- | --- | --- | | checked | `boolean` | `false` | Whether the checkbox is being checked manually. | +| checked-value | `string \| boolean \| number` | `true` | Value of checked state. | | default-checked | `boolean` | `false` | Whether the checkbox is checked by default. | | disabled | `boolean` | `false` | Whether the checkbox is disabled. | | focusable | `boolean` | `true` | Whether the checkbox gains focus after being checked. | | indeterminate | `boolean` | `false` | Whether the checkbox can have a third indeterminate state. | | label | `string` | `undefined` | Checkbox label. | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | The size of the checkbox. | +| unchecked-value | `string \| boolean \| number` | `false` | Value of unchecked state. | | value | `string \| number` | `undefined` | The value of the checkbox to be used in a checkbox group. | | on-update:checked | `(checked: boolean) => void` | `undefined` | Callback function triggered on a checked status change. | diff --git a/src/checkbox/demos/zhCN/index.demo-entry.md b/src/checkbox/demos/zhCN/index.demo-entry.md index 9d96d5ca105..499de79c057 100644 --- a/src/checkbox/demos/zhCN/index.demo-entry.md +++ b/src/checkbox/demos/zhCN/index.demo-entry.md @@ -24,12 +24,14 @@ rtl-debug.vue | 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | checked | `boolean` | `false` | 受控状态下是否选中 | +| checked-value | `string \| boolean \| number` | `true` | 选中时对应的值 | | default-checked | `boolean` | `false` | 非受控模式下默认是否选中 | | disabled | `boolean` | `false` | 是否禁用 | | focusable | `boolean` | `true` | 是否可被 focus | | indeterminate | `boolean` | `false` | 是否部分选中 | | label | `string` | `undefined` | Checkbox 的标签 | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 组件尺寸 | +| unchecked-value | `string \| boolean \| number` | `false` | 未选中时对应的值 | | value | `string \| number` | `undefined` | Checkbox 在 checkbox group 中使用的值 | | on-update:checked | `(checked: boolean) => void` | `undefined` | 当 checked 改变时触发的回调函数 | diff --git a/src/switch/demos/enUS/index.demo-entry.md b/src/switch/demos/enUS/index.demo-entry.md index 76b1652247c..fdc8eb4bbbe 100644 --- a/src/switch/demos/enUS/index.demo-entry.md +++ b/src/switch/demos/enUS/index.demo-entry.md @@ -30,7 +30,7 @@ icon.vue | round | `boolean` | `true` | Whether the switch has rounded corners. | | | rubber-band | `boolean` | `true` | Whether the switch button has rubber band effect. | 2.28.3 | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | The size of the switch. | | -| unchecked-value | `string \| boolean \| number` | `false` | Value of checked state. | | +| unchecked-value | `string \| boolean \| number` | `false` | Value of unchecked state. | | | value | `string \| number \| boolean \| undefined` | `undefined` | Value when being set manually. | | | on-update:value | `(value: boolean) => void` | `undefined` | Callback when the component's value changes. | | From 2622b63b63df9fffb806a0fe77a082fc5e2e37e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?23=E6=9C=B5=E6=AF=92=E8=98=91=E8=8F=87?= <62051421+wurencaideli@users.noreply.github.com> Date: Wed, 18 Sep 2024 22:01:23 +0800 Subject: [PATCH 5/6] Update index.md --- demo/pages/docs/community/zhCN/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/demo/pages/docs/community/zhCN/index.md b/demo/pages/docs/community/zhCN/index.md index 02569715129..b0d49eed5ab 100644 --- a/demo/pages/docs/community/zhCN/index.md +++ b/demo/pages/docs/community/zhCN/index.md @@ -19,3 +19,4 @@ Naive-ui 是统一设计规范的高质量 Vue 组件库，我们倾向于只提 | [Celeris Web](https://github.com/kirklin/celeris-web) | 一个基于 Vue 3 和 Vite 的免费开源前端框架，具有 Naive UI 组件和 TypeScript 支持，采用 Monorepo 结构。它还集成了 OpenAI，为现代 Web 开发提供自然语言处理能力。 | | [Pinx](https://themeforest.net/item/pinx-vuejs-admin-template/47799543?ref=DverseStudio&utm_source=awesomevue) | Pinx 是一个使用 Vue 3 + TypeScript 构建的管理模板，对开发人员友好，并使用 Naive UI 和 Tailwind CSS 进行设计。 与 Nuxt 兼容！ | | [Nova admin](https://github.com/chansee97/nova-admin) | 一个基于Vue3、Vite5、Typescript、Naive UI, 简洁干净后台管理模板，用简单的方式实现完整功能，并尽可能的考虑代码规范，易读易理解无过度封装，方便二次开发。 | +| [Dumogu-admin](https://admin.dumogu.top/base-naive-ui/) | 一个基于Vue3、Vite5、Naive UI, 简洁干净后台管理模板，方便二次开发，易于上手，只有基础功能。 | From 9d8b322b5f2264c443fd8a2fafcb2e55c66477a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?23=E6=9C=B5=E6=AF=92=E8=98=91=E8=8F=87?= <62051421+wurencaideli@users.noreply.github.com> Date: Wed, 18 Sep 2024 22:02:43 +0800 Subject: [PATCH 6/6] Update index.md --- demo/pages/docs/community/enUS/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/demo/pages/docs/community/enUS/index.md b/demo/pages/docs/community/enUS/index.md index 9fca913f7ed..67fecd59777 100644 --- a/demo/pages/docs/community/enUS/index.md +++ b/demo/pages/docs/community/enUS/index.md @@ -19,3 +19,4 @@ If you want to contribute excellent resources, please contact 07akioni or amadeu | [Celeris Web](https://github.com/kirklin/celeris-web) | Celeris Web, based on Vue 3 and Vite, is a free and open-source front-end framework with Naive UI components and TypeScript support, featuring a Monorepo structure. It also integrates with OpenAI, providing natural language processing capabilities for modern web development. | | [Pinx](https://themeforest.net/item/pinx-vuejs-admin-template/47799543?ref=DverseStudio&utm_source=awesomevue) | Pinx is an admin template crafted with Vue 3 + TypeScript, developer-friendly and designed with Naive UI and Tailwind CSS. Nuxt compatible !| | [Nova admin](https://github.com/chansee97/nova-admin) | a clean and concise back-end management template based on Vue3, Vite5, Typescript, and Naive UI. It implements complete functionality in a simple way, while also considering code standards, readability, and avoiding excessive encapsulation to facilitate secondary development. | +| [Dumogu-admin](https://admin.dumogu.top/base-naive-ui/) | Vue3,Vite5,Naive UI,Minimalist clean background management template. |