fix: improve prompt component #5879
Conversation
mynetfan
requested review from
anncwb,
vince292007,
jinmao88 and
a team
as code owners
WalkthroughThe pull request introduces enhancements to the alert system across documentation, demo components, and core UI-kit modules. It updates the type definitions by adding properties ( Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant P as PromptComponent
participant F as showAsyncPrompt Function
participant B as beforeClose Hook
participant S as Async Operation
U->>P: Click "Async Prompt" button
P->>F: Trigger showAsyncPrompt()
F->>B: Execute beforeClose hook with user input
alt Valid value provided
B-->>F: Return with valid input
F->>S: Simulate async delay
S-->>F: Async process complete
F->>P: Close prompt successfully
else No value provided
B-->>F: Return without valid input
F->>U: Alert "Select an option"
F->>P: Keep prompt open
end
sequenceDiagram
participant U as User
participant V as vbenPrompt Function
participant R as ContentRenderer
participant M as Focus Manager
U->>V: Request prompt display
V->>R: Call dynamic contentRenderer
R-->>V: Render input component and content
V->>M: Invoke onOpened to set focus
M-->>V: Focus applied
V->>U: Display updated alert/prompt view
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
Scope: all 5 workspace projects This error happened while installing a direct dependency of /tmp/eslint/internal/lint-configs/eslint-config 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (4)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts (1)
1-7: Update to imports looks good, but could be better organized.The added imports support the enhanced functionality for the prompt component. Consider organizing imports by sorting alphabetically within each import group for better maintainability.
-import type { Component, VNode } from 'vue'; -import type { Recordable } from '@vben-core/typings'; -import type { AlertProps, BeforeCloseScope, PromptProps } from './alert'; -import { h, nextTick, ref, render } from 'vue'; +import type { Component, VNode } from 'vue'; +import type { Recordable } from '@vben-core/typings'; +import type { AlertProps, BeforeCloseScope, PromptProps } from './alert'; + +import { h, nextTick, ref, render } from 'vue';docs/src/demos/vben-alert/prompt/index.vue (1)
40-43: Add JSDoc comment to utility function.The
sleeputility function should have a JSDoc comment explaining its purpose and parameters for better code documentation.+/** + * Creates a promise that resolves after the specified delay + * @param ms Delay in milliseconds + * @returns Promise that resolves after the delay + */ function sleep(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs/src/components/common-ui/vben-alert.md(3 hunks)docs/src/demos/vben-alert/alert/index.vue(2 hunks)docs/src/demos/vben-alert/prompt/index.vue(2 hunks)packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts(3 hunks)packages/@core/ui-kit/popup-ui/src/alert/alert.ts(3 hunks)packages/@core/ui-kit/popup-ui/src/alert/alert.vue(2 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts (1)
packages/@core/ui-kit/popup-ui/src/alert/alert.ts (1)
PromptProps(43-63)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Test (windows-latest)
- GitHub Check: Lint (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
- GitHub Check: post-update (windows-latest)
🔇 Additional comments (24)
docs/src/demos/vben-alert/alert/index.vue (2)
6-6: Import change from Empty to Result component.The update from importing
EmptytoResultcomponent from ant-design-vue enhances the alert demo's visual presentation, providing more comprehensive feedback to users.
21-26: Enhancement to alert presentation.Good improvement to the alert customization by:
- Adding button alignment configuration with
buttonAlign: 'center'- Using the
Resultcomponent with success status and descriptive titles- Providing more informative feedback to users with order ID information
This change aligns well with the PR objective to allow configuration of button alignment.
packages/@core/ui-kit/popup-ui/src/alert/alert.vue (3)
33-33: Default button alignment added.Added default value of 'right' for
buttonAlignproperty, which maintains backward compatibility while introducing the new alignment feature.
158-158: Conditional loading mask.Modified the loading condition to check for both
loadingandcontentMasking, ensuring the loading overlay is displayed only when explicitly requested. This supports the PR objective to make the loading overlay configurable and only show it for the prompt by default.
160-160: Dynamic button alignment.Updated the button container class to dynamically use the
buttonAlignproperty, allowing for flexible button positioning within the alert dialog.packages/@core/ui-kit/popup-ui/src/alert/alert.ts (4)
1-3: Import type additions.Added import for VNode and VNodeArrayChildren types, which are necessary for the new componentSlots property in PromptProps.
18-19: Button alignment option.Added
buttonAlignproperty to AlertProps with appropriate type definition, supporting the alignment of buttons as 'center', 'end', or 'start'.
32-33: Content masking configuration.Added
contentMaskingproperty to AlertProps, allowing control over whether a loading mask is displayed in the content area during the execution of the beforeClose callback.
42-63: New PromptProps type.Created a comprehensive PromptProps type that extends AlertProps with additional properties for handling user input:
- Enhanced beforeClose callback with value parameter
- Component selection for user input
- Component props and slots support
- Default value configuration
- Model property name customization
This addresses the PR objective to improve the prompt component and fix value binding issues.
docs/src/components/common-ui/vben-alert.md (4)
46-48: Improved type documentation.Enhanced the JSDoc comment for AlertProps to improve clarity of the type definition.
56-57: Button alignment documentation.Added documentation for the new
buttonAlignproperty in AlertProps, clearly defining its purpose and available options.
70-71: Content masking documentation.Added documentation for the new
contentMaskingproperty, explaining its purpose to show a loading mask during the beforeClose callback execution.
80-97: PromptProps documentation.Added comprehensive documentation for the new PromptProps type, including:
- Enhanced beforeClose callback with value parameter
- Component selection for user input
- Component props and slots support
- Default value configuration
- Model property name customization
This documentation aligns with the implementation and provides clear guidance on how to use the enhanced prompt functionality.
packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts (7)
132-134: Good addition of generic type parameter.Using a generic type parameter
<T = any>withPromptProps<T>improves type safety for the function by allowing consumers to specify the expected return type.
136-144: Proper destructuring of new props.The expanded destructuring now correctly handles the new
componentSlotsproperty, which enables slot support in prompt components.
146-147: Good addition of refs for tracking component state.Using refs to track the input component allows for accessing it later in lifecycle hooks, which is needed for focus management.
159-183: Good implementation of dynamic content rendering.The content renderer function is a significant improvement that enables:
- Reactive updates to the input component
- Proper two-way binding via the modelPropName
- Support for custom slots through componentSlots
- Consistent layout with flex container
This approach is more flexible than the previous static content array.
198-231: Comprehensive focus management improvement.The enhanced
onOpenedcallback significantly improves accessibility by attempting multiple strategies to focus the input component:
- First tries component's exposed focus method
- Then attempts element's native focus if it's a standard form element
- Falls back to querySelector for finding focusable elements
- Finally tries nextElementSibling as a last resort
This ensures better keyboard navigation and accessibility compliance.
196-197:❓ Verification inconclusive
New contentMasking feature might affect existing behavior.
Setting
contentMasking: trueby default for prompts means they'll show a loading overlay during async operations. While this is a useful addition, it's a behavior change that could affect existing implementations.Make sure this behavior change is documented and doesn't negatively impact existing usages:
🌐 Web query:
What is the best practice for displaying loading states during async form submissions?💡 Result:
To ensure a smooth user experience during async form submissions, follow these best practices for displaying loading states:
Provide Immediate Visual Feedback
- Use loading spinners/progress bars to indicate ongoing processes[6][9]
- Disable submit buttons to prevent duplicate submissions[1][3][10]
<button type="submit" disabled={isPending}> {isPending ? "Submitting..." : "Submit"} </button>Leverage React Hooks for State Management
useActionStatefor tracking submission status[1][2]const [state, formAction, isPending] = useActionState(async (prevState, formData) => { // Submission logic }, null);
useFormStatusin child components for form status[1][2]function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>{pending ? "Sending..." : "Send"}</button>; }Maintain UI Responsiveness
- Disable form fields during submission[3][10]
- Preserve focus for keyboard/screen reader users[3][6]
- Show skeleton screens for content-heavy forms[6]
Implement Accessible Feedback
- ARIA live regions for screen readers[6][9]
- Text status updates alongside visual indicators[3][6]
<div aria-live="polite"> {isPending && "Processing your submission..."} </div>Handle Edge Cases Gracefully
- Error states with clear recovery options[3][6]
- Optimistic UI updates for instant feedback[1][2]
- Request timeouts with retry mechanisms[3][6]
Framework-Specific Solutions
For React applications:
// Combined hook usage example function Form() { const [state, formAction] = useActionState(submitForm); const { pending } = useFormStatus(); return ( <form action={formAction}> <input name="email" /> <button disabled={pending}> {pending ? <LoadingSpinner /> : "Submit"} </button> </form> ); }These practices balance technical implementation with UX considerations, ensuring forms remain usable and informative during async operations while preventing invalid submissions[1][2][6][10].
Citations:
- 1: https://www.freecodecamp.org/news/react-19-actions-simpliy-form-submission-and-loading-states/
- 2: https://www.robinwieruch.de/react-form-loading-pending-action/
- 3: https://pqina.nl/blog/async-form-posts-with-a-couple-lines-of-vanilla-javascript/
- 4: Best way to show loading state when using server action on client vercel/next.js#51371
- 5: Showing a loading indicator when using the async pipe ng-select/ng-select#1083
- 6: https://www.pencilandpaper.io/articles/ux-pattern-analysis-loading-feedback
- 7: https://community.retool.com/t/loading-indicator-and-disabled-state-does-not-work-for-form-triggering-js-query/5105
- 8: https://www.digitalocean.com/community/tutorials/how-to-handle-async-data-loading-lazy-loading-and-code-splitting-with-react
- 9: https://blog.logrocket.com/choosing-right-progress-indicators-async-flutter-apps/
- 10: https://daily.dev/blog/form-on-react-best-practices
Documentation & Impact Verification for
contentMaskingDefaultSetting
contentMasking: truenow causes prompts to display a loading overlay during async operations—providing immediate visual feedback in line with best practices (e.g., using spinners or progress indicators). However, this behavior change may affect existing implementations that rely on the previous behavior.
- Action Items:
- Ensure that the new behavior is clearly documented in the component’s documentation.
- Verify that current usages of
AlertBuilderhandle the loading overlay appropriately and that the new visual feedback doesn’t inadvertently disrupt the user experience.content: contentRenderer, - contentMasking: false, + contentMasking: true,
149-153:❓ Verification inconclusive
Check whether this preserves existing behavior.
The handling of static content has changed. Make sure that existing prompt usage with string content still renders correctly.
🏁 Script executed:
#!/bin/bash # Check if the string content rendering is tested in existing tests rg -A 5 "vbenPrompt.*content: ('|\").*('|\")" --type tsLength of output: 61
Below is an additional verification step to help confirm that the changes in static content handling (specifically rendering string content as a span node) still behave as expected. The previous automated search produced no output, so we need to manually verify that tests exist—or if none do, that manual testing confirms that prompt usage with plain strings continues to work as intended.
Please run this additional shell script:
If these searches still produce no results, please manually verify that passing a string to the alert (via vbenPrompt or similar usage) indeed renders the string inside a element using the AlertBuilder logic in packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts.
Manual Verification Required:
- Confirm that the behavior for string
content(i.e.h('span', content)) has not changed.- Ensure that existing UI prompts that rely on string content still render correctly.
🏁 Script executed:
#!/bin/bash # Search for test cases referencing AlertBuilder and the specific rendering of string content. rg -n "AlertBuilder" --type ts --glob "*test*" rg -n "staticContents.push\\(h\\('span'" --type tsLength of output: 331
Static Content Rendering Verification
The code change appears to preserve the intended behavior—string content is wrapped in a
<span>(viah('span', content)) before being pushed tostaticContents. Our search confirms that the updated logic exists inAlertBuilder.ts(line 150). However, we didn't locate clear test cases explicitly verifying how string content is rendered via usage of directives likevbenPrompt.Action Items:
- Manual Verification: Please ensure that any prompt using plain string content continues to render correctly (i.e., as a
<span>element) in the UI.- Test Coverage: If this behavior isn’t already covered, consider adding tests to validate that string-based content is rendered as expected by
AlertBuilder.docs/src/demos/vben-alert/prompt/index.vue (4)
2-8: Good addition of required imports.The added imports support the new functionality:
hfunction for rendering component slotsInputandRadioGroupfrom ant-design-vue for form componentsBadgeJapaneseYenicon for visual enhancement
21-38: Component upgrade with slot support demonstrates new capabilities.The updated
showSelectPromptfunction showcases the new component slot functionality:
- Switched from VbenSelect to Input for better user experience
- Added helpful properties like placeholder and prefix
- Demonstrates the new componentSlots feature with a currency icon
- Provides a descriptive content message explaining the example
This is a good example for documentation purposes.
44-74: Good demonstration of async prompt with loading state.The
showAsyncPromptfunction effectively demonstrates:
- Async validation in the
beforeClosehook- Prevention of dialog closing with
return false- Simulated async operation with loading state
- User feedback with alerts for validation errors
- Usage of the RadioGroup component with custom styling
This comprehensively showcases the new async capabilities of the prompt component.
However, there's a console.log statement that should be removed:
function showAsyncPrompt() { prompt({ async beforeClose(scope) { - console.log(scope); if (scope.isConfirm) { if (scope.value) { // 模拟异步操作，如果不成功，可以返回false await sleep(2000); } else { alert('请选择一个选项'); return false; } } }, // Rest of the function...
78-79: Clear button labels to demonstrate different prompt types.The button labels clearly indicate the purpose of each example, making the demo more user-friendly:
- "Prompt" for basic text input
- "Prompt With Select" for demonstrating component slots
- "Prompt With Async" for showcasing async validation
Squashed commit of the following: commit 79de6bc Author: Netfan <[email protected]> Date: Thu Apr 17 22:23:05 2025 +0800 fix: alert send wrong confirm state to beforeClose (vbenjs#5991) * 修复alert在按下Esc或者点击遮罩关闭时，可能发送错误的isConfirm状态 commit 14bd6dd Author: Netfan <[email protected]> Date: Thu Apr 17 20:25:49 2025 +0800 fix: destroyOnClose works within connectedComponent (vbenjs#5989) * 修复destroyOnClose没能销毁connectedComponent自身的问题 commit 7f269e0 Author: PIPEDREA_WZJ <[email protected]> Date: Thu Apr 17 14:01:39 2025 +0800 Update tailwindcss.md (vbenjs#5602) tailwindcss最新的版本已经是v4.x，vben中使用的是3.x的tailwindcss。在未进行兼容前，会出现运行失败的问题 commit 4baec83 Author: yuh <[email protected]> Date: Thu Apr 17 14:00:46 2025 +0800 feat: add examples: form-upload (vbenjs#5955) * feat: add examples: form-upload * fix: upload: accept and label * fix: upload: 设置表单值、图片预览 commit f7a4d13 Author: Netfan <[email protected]> Date: Wed Apr 16 14:11:04 2025 +0800 fix: fixed arguments of callbacks in `formApi` (vbenjs#5970) * 修复 `handleValuesChange` 传递的参数不是处理后的表单值的问题 * 修复 `handleReset` 未能传递正确参数的问题 commit 0936861 Author: Netfan <[email protected]> Date: Wed Apr 16 11:29:01 2025 +0800 feat: pass `fieldsChanged` into the `handleValuesChange` callback function (vbenjs#5968) * fieldsChanged(已被改变值的字段名)将传入handleValuesChange回调函数 commit 3318d76 Author: ming4762 <[email protected]> Date: Wed Apr 16 11:28:36 2025 +0800 perf: improve `destroyOnClose` for VbenModal (vbenjs#5964) commit 8f3881e Author: LinaBell <[email protected]> Date: Wed Apr 16 11:27:13 2025 +0800 perf: `beforeClose` of drawer support promise (vbenjs#5932) * perf: the beforeClose function of drawer is consistent with that of modal * refactor: drawer test update commit 5252480 Author: zhouda1fu <[email protected]> Date: Wed Apr 16 11:22:59 2025 +0800 fix: missing await in department form(vbenjs#5967) commit d18f561 Author: Netfan <[email protected]> Date: Tue Apr 15 20:52:23 2025 +0800 docs: update alert and apiComponent docs (vbenjs#5961) commit 333998b Author: wyc001122 <[email protected]> Date: Tue Apr 15 20:51:38 2025 +0800 fix: determine if scrollbar has been totally scrolled (vbenjs#5934) * 修复在系统屏幕缩放比例不为100%的情况下，滚动组件对是否已滚动到边界的判断可能不正确的问题 commit 3fb4fba Author: ming4762 <[email protected]> Date: Tue Apr 15 18:49:57 2025 +0800 fix: modal closing animation (vbenjs#5960) commit c7e6210 Author: ming4762 <[email protected]> Date: Tue Apr 15 16:04:44 2025 +0800 feat: `modal`&`drawer` support `center-footer` slot (vbenjs#5956) commit d864085 Author: lztb <[email protected]> Date: Tue Apr 15 16:03:20 2025 +0800 feat: vben-form添加arrayToStringFields属性 (vbenjs#5957) * feat: vben-form添加arrayToStringFields属性 * feat: 修改handleArrayToStringFields和handleStringToArrayFields中嵌套数组格式的处理不一致 --------- Co-authored-by: 米山 <[email protected]> commit fcdc1a1 Author: Netfan <[email protected]> Date: Tue Apr 15 15:32:30 2025 +0800 feat: add more expose methods for `apiComponent` (vbenjs#5958) * 为ApiComponent组件添加getOptions和getValue导出方法。 commit bf7496f Author: Netfan <[email protected]> Date: Tue Apr 15 00:00:05 2025 +0800 feat: add `useAlertContext` for Alert component (vbenjs#5947) * 新增Alert的子组件中获取弹窗上下文的能力 commit 9700150 Author: Netfan <[email protected]> Date: Mon Apr 14 19:56:52 2025 +0800 fix: table actions in fixed column (vbenjs#5945) commit f0e9e55 Author: Netfan <[email protected]> Date: Mon Apr 14 11:48:21 2025 +0800 feat: alert support customize `footer` (vbenjs#5940) * Alert组件支持自定义footer commit ff88274 Author: Netfan <[email protected]> Date: Mon Apr 14 11:18:33 2025 +0800 fix: long navigation menu can be scrolled (vbenjs#5939) * 修复超长的导航菜单无法纵向滚动的问题 commit afce9dc Author: ming4762 <[email protected]> Date: Sun Apr 13 23:02:07 2025 +0800 perf: improve `destroyOnClose` for `VbenModal` (vbenjs#5935) * perf: 优化Vben Modal destroyOnClose，解决destroyOnClose=false，Modal依旧会被销毁的问题 影响范围（重要）：destroyOnClose默认为true，这会导致所有的modal都会默认渲染到body radix-vue Dialog组件默认会销毁挂载的组件，所以即使destroyOnClose=false，Modal依旧会被销毁的问题 对于一些大表单重复渲染导致卡顿，ApiComponent也会频繁的加载数据 * fix: modal closing animation --------- Co-authored-by: Netfan <[email protected]> commit b5700bd Author: ming4762 <[email protected]> Date: Sun Apr 13 20:03:18 2025 +0800 perf: improve `autoSelect` of `ApiComponent` (vbenjs#5936) * fix: 修复autoSelect不生效的问题，props.valueField已经被omit了 * feat: ApiComponent autoSelect支持使用函数，可以满足灵活性要求更高的场景 commit a8c4786 Author: Netfan <[email protected]> Date: Sat Apr 12 14:02:35 2025 +0800 feat: api-component support autoSelect prop (vbenjs#5931) * feat: api-component support autoSelect prop * docs: add version requirement commit 2971ccc Author: Netfan <[email protected]> Date: Sat Apr 12 13:41:40 2025 +0800 docs: docs modal z-index fixed, update alert docs (vbenjs#5930) commit 4a2c7b3 Author: Netfan <[email protected]> Date: Sat Apr 12 10:37:47 2025 +0800 fix: alert animation (vbenjs#5927) commit 36bf6fc Author: Netfan <[email protected]> Date: Sat Apr 12 01:44:08 2025 +0800 fix: builtin color change throttled in preference drawer (vbenjs#5924) 修复偏好设置中的自定义主题色拖动选择颜色时页面会明显卡顿的问题 commit f46ec30 Author: Netfan <[email protected]> Date: Sat Apr 12 01:16:57 2025 +0800 fix: theme mode follow the system only `auto` (vbenjs#5923) * 修复主题在未设置为auto时，仍然会跟随系统主题变化的问题。 commit 9bd5a19 Author: Netfan <[email protected]> Date: Sat Apr 12 00:59:56 2025 +0800 fix: alert action button focus, fixed vbenjs#5921 (vbenjs#5922) * 修复Alert组件的按钮焦点切换问题 commit 86da3ce Author: zhang <[email protected]> Date: Wed Apr 9 16:16:56 2025 +0800 chore: 导出框架自带的组件，方便独立页面使用 (vbenjs#5876) commit 329a176 Author: Netfan <[email protected]> Date: Wed Apr 9 01:05:20 2025 +0800 perf: optimize bootstrap modules to speed up first-screen loading (vbenjs#5899) 优化首屏加载速度 commit 9379093 Author: Netfan <[email protected]> Date: Tue Apr 8 20:28:50 2025 +0800 feat: customizable table separator (vbenjs#5898) * 表格的分隔条支持定制背景色或完全移除 commit c9014d0 Author: ming4762 <[email protected]> Date: Tue Apr 8 20:27:03 2025 +0800 perf: 优化关闭页面切换动画的tab切换性能 (vbenjs#5883) commit ed26dca Author: Netfan <[email protected]> Date: Tue Apr 8 16:31:41 2025 +0800 chore: update pnpm-lock.yaml commit 08c6496 Author: Netfan <[email protected]> Date: Tue Apr 8 14:56:40 2025 +0800 chore: update deps commit a8c5df3 Author: Netfan <[email protected]> Date: Tue Apr 8 14:50:05 2025 +0800 fix: possible circular reference issue during build (vbenjs#5894) * 修复构建期间出现的循环引用警告 commit 71e8d12 Author: Netfan <[email protected]> Date: Mon Apr 7 01:21:30 2025 +0800 fix: improve prompt component (vbenjs#5879) * fix: prompt component render fixed * fix: alert buttonAlign default value commit d216fdc Author: Netfan <[email protected]> Date: Sat Apr 5 13:07:52 2025 +0800 feat: support logo text slot (vbenjs#5872) * 基础布局中的LOGO的文字区域允许通过插槽logo-text定制 commit 384c5d7 Author: wyc001122 <[email protected]> Date: Sat Apr 5 11:04:59 2025 +0800 fix: 布局为双列菜单或者水平模式下， 一级菜单高亮问题 (vbenjs#5870) Co-authored-by: 王泳超 <[email protected]> commit b0ad08d Author: Netfan <[email protected]> Date: Fri Apr 4 15:21:09 2025 +0800 feat: use the not-found component instead of the invalid route component in the backend mode (vbenjs#5871) * 后端菜单模式下，使用not-found组件代替无效的路由组件
Squashed commit of the following: commit 1437770 Author: Netfan <[email protected]> Date: Wed Apr 23 12:20:52 2025 +0800 fix: alert confirm state in beforeClose callback (vbenjs#6019) commit b985ff0 Author: pangyajun123 <[email protected]> Date: Mon Apr 21 19:15:05 2025 +0800 fix: vxe-table theme token follow primary color (vbenjs#6007) commit b148b8e Author: wyc001122 <[email protected]> Date: Sat Apr 19 14:35:33 2025 +0800 fix: fix geader menu activation path (vbenjs#5997) Co-authored-by: 王泳超 <[email protected]> commit 79de6bc Author: Netfan <[email protected]> Date: Thu Apr 17 22:23:05 2025 +0800 fix: alert send wrong confirm state to beforeClose (vbenjs#5991) * 修复alert在按下Esc或者点击遮罩关闭时，可能发送错误的isConfirm状态 commit 14bd6dd Author: Netfan <[email protected]> Date: Thu Apr 17 20:25:49 2025 +0800 fix: destroyOnClose works within connectedComponent (vbenjs#5989) * 修复destroyOnClose没能销毁connectedComponent自身的问题 commit 7f269e0 Author: PIPEDREA_WZJ <[email protected]> Date: Thu Apr 17 14:01:39 2025 +0800 Update tailwindcss.md (vbenjs#5602) tailwindcss最新的版本已经是v4.x，vben中使用的是3.x的tailwindcss。在未进行兼容前，会出现运行失败的问题 commit 4baec83 Author: yuh <[email protected]> Date: Thu Apr 17 14:00:46 2025 +0800 feat: add examples: form-upload (vbenjs#5955) * feat: add examples: form-upload * fix: upload: accept and label * fix: upload: 设置表单值、图片预览 commit f7a4d13 Author: Netfan <[email protected]> Date: Wed Apr 16 14:11:04 2025 +0800 fix: fixed arguments of callbacks in `formApi` (vbenjs#5970) * 修复 `handleValuesChange` 传递的参数不是处理后的表单值的问题 * 修复 `handleReset` 未能传递正确参数的问题 commit 0936861 Author: Netfan <[email protected]> Date: Wed Apr 16 11:29:01 2025 +0800 feat: pass `fieldsChanged` into the `handleValuesChange` callback function (vbenjs#5968) * fieldsChanged(已被改变值的字段名)将传入handleValuesChange回调函数 commit 3318d76 Author: ming4762 <[email protected]> Date: Wed Apr 16 11:28:36 2025 +0800 perf: improve `destroyOnClose` for VbenModal (vbenjs#5964) commit 8f3881e Author: LinaBell <[email protected]> Date: Wed Apr 16 11:27:13 2025 +0800 perf: `beforeClose` of drawer support promise (vbenjs#5932) * perf: the beforeClose function of drawer is consistent with that of modal * refactor: drawer test update commit 5252480 Author: zhouda1fu <[email protected]> Date: Wed Apr 16 11:22:59 2025 +0800 fix: missing await in department form(vbenjs#5967) commit d18f561 Author: Netfan <[email protected]> Date: Tue Apr 15 20:52:23 2025 +0800 docs: update alert and apiComponent docs (vbenjs#5961) commit 333998b Author: wyc001122 <[email protected]> Date: Tue Apr 15 20:51:38 2025 +0800 fix: determine if scrollbar has been totally scrolled (vbenjs#5934) * 修复在系统屏幕缩放比例不为100%的情况下，滚动组件对是否已滚动到边界的判断可能不正确的问题 commit 3fb4fba Author: ming4762 <[email protected]> Date: Tue Apr 15 18:49:57 2025 +0800 fix: modal closing animation (vbenjs#5960) commit c7e6210 Author: ming4762 <[email protected]> Date: Tue Apr 15 16:04:44 2025 +0800 feat: `modal`&`drawer` support `center-footer` slot (vbenjs#5956) commit d864085 Author: lztb <[email protected]> Date: Tue Apr 15 16:03:20 2025 +0800 feat: vben-form添加arrayToStringFields属性 (vbenjs#5957) * feat: vben-form添加arrayToStringFields属性 * feat: 修改handleArrayToStringFields和handleStringToArrayFields中嵌套数组格式的处理不一致 --------- Co-authored-by: 米山 <[email protected]> commit fcdc1a1 Author: Netfan <[email protected]> Date: Tue Apr 15 15:32:30 2025 +0800 feat: add more expose methods for `apiComponent` (vbenjs#5958) * 为ApiComponent组件添加getOptions和getValue导出方法。 commit bf7496f Author: Netfan <[email protected]> Date: Tue Apr 15 00:00:05 2025 +0800 feat: add `useAlertContext` for Alert component (vbenjs#5947) * 新增Alert的子组件中获取弹窗上下文的能力 commit 9700150 Author: Netfan <[email protected]> Date: Mon Apr 14 19:56:52 2025 +0800 fix: table actions in fixed column (vbenjs#5945) commit f0e9e55 Author: Netfan <[email protected]> Date: Mon Apr 14 11:48:21 2025 +0800 feat: alert support customize `footer` (vbenjs#5940) * Alert组件支持自定义footer commit ff88274 Author: Netfan <[email protected]> Date: Mon Apr 14 11:18:33 2025 +0800 fix: long navigation menu can be scrolled (vbenjs#5939) * 修复超长的导航菜单无法纵向滚动的问题 commit afce9dc Author: ming4762 <[email protected]> Date: Sun Apr 13 23:02:07 2025 +0800 perf: improve `destroyOnClose` for `VbenModal` (vbenjs#5935) * perf: 优化Vben Modal destroyOnClose，解决destroyOnClose=false，Modal依旧会被销毁的问题 影响范围（重要）：destroyOnClose默认为true，这会导致所有的modal都会默认渲染到body radix-vue Dialog组件默认会销毁挂载的组件，所以即使destroyOnClose=false，Modal依旧会被销毁的问题 对于一些大表单重复渲染导致卡顿，ApiComponent也会频繁的加载数据 * fix: modal closing animation --------- Co-authored-by: Netfan <[email protected]> commit b5700bd Author: ming4762 <[email protected]> Date: Sun Apr 13 20:03:18 2025 +0800 perf: improve `autoSelect` of `ApiComponent` (vbenjs#5936) * fix: 修复autoSelect不生效的问题，props.valueField已经被omit了 * feat: ApiComponent autoSelect支持使用函数，可以满足灵活性要求更高的场景 commit a8c4786 Author: Netfan <[email protected]> Date: Sat Apr 12 14:02:35 2025 +0800 feat: api-component support autoSelect prop (vbenjs#5931) * feat: api-component support autoSelect prop * docs: add version requirement commit 2971ccc Author: Netfan <[email protected]> Date: Sat Apr 12 13:41:40 2025 +0800 docs: docs modal z-index fixed, update alert docs (vbenjs#5930) commit 4a2c7b3 Author: Netfan <[email protected]> Date: Sat Apr 12 10:37:47 2025 +0800 fix: alert animation (vbenjs#5927) commit 36bf6fc Author: Netfan <[email protected]> Date: Sat Apr 12 01:44:08 2025 +0800 fix: builtin color change throttled in preference drawer (vbenjs#5924) 修复偏好设置中的自定义主题色拖动选择颜色时页面会明显卡顿的问题 commit f46ec30 Author: Netfan <[email protected]> Date: Sat Apr 12 01:16:57 2025 +0800 fix: theme mode follow the system only `auto` (vbenjs#5923) * 修复主题在未设置为auto时，仍然会跟随系统主题变化的问题。 commit 9bd5a19 Author: Netfan <[email protected]> Date: Sat Apr 12 00:59:56 2025 +0800 fix: alert action button focus, fixed vbenjs#5921 (vbenjs#5922) * 修复Alert组件的按钮焦点切换问题 commit 86da3ce Author: zhang <[email protected]> Date: Wed Apr 9 16:16:56 2025 +0800 chore: 导出框架自带的组件，方便独立页面使用 (vbenjs#5876) commit 329a176 Author: Netfan <[email protected]> Date: Wed Apr 9 01:05:20 2025 +0800 perf: optimize bootstrap modules to speed up first-screen loading (vbenjs#5899) 优化首屏加载速度 commit 9379093 Author: Netfan <[email protected]> Date: Tue Apr 8 20:28:50 2025 +0800 feat: customizable table separator (vbenjs#5898) * 表格的分隔条支持定制背景色或完全移除 commit c9014d0 Author: ming4762 <[email protected]> Date: Tue Apr 8 20:27:03 2025 +0800 perf: 优化关闭页面切换动画的tab切换性能 (vbenjs#5883) commit ed26dca Author: Netfan <[email protected]> Date: Tue Apr 8 16:31:41 2025 +0800 chore: update pnpm-lock.yaml commit 08c6496 Author: Netfan <[email protected]> Date: Tue Apr 8 14:56:40 2025 +0800 chore: update deps commit a8c5df3 Author: Netfan <[email protected]> Date: Tue Apr 8 14:50:05 2025 +0800 fix: possible circular reference issue during build (vbenjs#5894) * 修复构建期间出现的循环引用警告 commit 71e8d12 Author: Netfan <[email protected]> Date: Mon Apr 7 01:21:30 2025 +0800 fix: improve prompt component (vbenjs#5879) * fix: prompt component render fixed * fix: alert buttonAlign default value commit d216fdc Author: Netfan <[email protected]> Date: Sat Apr 5 13:07:52 2025 +0800 feat: support logo text slot (vbenjs#5872) * 基础布局中的LOGO的文字区域允许通过插槽logo-text定制 commit 384c5d7 Author: wyc001122 <[email protected]> Date: Sat Apr 5 11:04:59 2025 +0800 fix: 布局为双列菜单或者水平模式下， 一级菜单高亮问题 (vbenjs#5870) Co-authored-by: 王泳超 <[email protected]> commit b0ad08d Author: Netfan <[email protected]> Date: Fri Apr 4 15:21:09 2025 +0800 feat: use the not-found component instead of the invalid route component in the backend mode (vbenjs#5871) * 后端菜单模式下，使用not-found组件代替无效的路由组件
Description
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
Documentation