docs: update docs #4466
docs: update docs #4466
Conversation
|
|
Warning Rate limit exceeded@anncwb has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 16 minutes and 25 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughThis pull request introduces enhancements to form handling within a Vue.js application using the Ant Design Vue component library. Key changes include the addition of a new component type, Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 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: 17
Outside diff range and nitpick comments (4)
docs/src/demos/vben-form/rules/index.vue (1)
180-184: Consider removing form values from the success message in production.The
onSubmitfunction correctly handles form submission and displays a success message usingmessage.success. Including the submitted form values in the success message can be helpful for debugging purposes.However, for production environments, consider removing the form values from the success message to avoid exposing potentially sensitive information to users.
function onSubmit(values: Record<string, any>) { message.success({ - content: `form values: ${JSON.stringify(values)}`, + content: 'Form submitted successfully!', }); }playground/src/views/examples/form/api.vue (1)
117-117: Improve localization support for the success message.Adding a success message to provide user feedback is a good practice. However, the message is hardcoded in Chinese, which could be a localization concern if the application needs to support multiple languages.
Consider extracting the success message to a localization file or using a localization library for better maintainability and localization support. For example, you can use the
vue-i18nlibrary to manage translations:-message.success('字段 `fieldOptions` 下拉选项更新成功。'); +message.success(t('form.updateSuccess', { field: 'fieldOptions' }));And define the translation in the localization file:
{ "form": { "updateSuccess": "Field '{field}' dropdown options updated successfully." } }docs/src/demos/vben-form/dynamic/index.vue (1)
7-7: Translate comments to English for consistencyThe code contains comments in Chinese. For better maintainability and readability, especially in a multilingual team, it's recommended to translate comments to English.
Apply this diff to translate the comments:
// 提交函数 + // Submission function ... // 随意一个字段改变时，都会触发 + // Triggered when any field changes ... // 通过Dom控制销毁 + // Destroyed through DOM control ... // 通过css控制隐藏 + // Hidden via CSS ... // 只有指定的字段改变时，才会触发 + // Only triggers when specified fields change ... // 字段名 + // Field name ... // 界面显示的label + // Label displayed on the UI ... // 当字段1的值为`123`时，必填 + // Required when the value of field1 is '123' ... // 当字段2的值为`123`时，更改下拉选项 + // When field2 value is '123', change the dropdown options ... // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个 + // Display 3 columns on large screens, 2 on medium screens, 1 on small screensAlso applies to: 15-15, 25-25, 32-32, 52-52, 65-65, 86-86, 104-104, 151-151, 155-155
docs/src/demos/vben-form/api/index.vue (1)
1-56: Consider translating comments to English for consistencyThe code contains comments in Chinese. For better team collaboration and broader accessibility, it's advisable to use English for code comments and documentation.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
Files selected for processing (26)
- apps/web-antd/src/adapter/form.ts (4 hunks)
- docs/.vitepress/theme/components/site-layout.vue (1 hunks)
- docs/.vitepress/theme/styles/base.css (1 hunks)
- docs/package.json (1 hunks)
- docs/src/_env/adapter/form.ts (1 hunks)
- docs/src/_env/adapter/index.ts (1 hunks)
- docs/src/components/common-ui/vben-form.md (1 hunks)
- docs/src/demos/vben-form/api/index.vue (1 hunks)
- docs/src/demos/vben-form/basic/index.vue (1 hunks)
- docs/src/demos/vben-form/custom/index.vue (1 hunks)
- docs/src/demos/vben-form/dynamic/index.vue (1 hunks)
- docs/src/demos/vben-form/query/index.vue (1 hunks)
- docs/src/demos/vben-form/rules/index.vue (1 hunks)
- docs/tsconfig.json (1 hunks)
- packages/@core/base/shared/src/utils/tests/inference.test.ts (2 hunks)
- packages/@core/base/shared/src/utils/inference.ts (2 hunks)
- packages/@core/ui-kit/form-ui/src/form-api.ts (1 hunks)
- packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts (3 hunks)
- packages/@core/ui-kit/form-ui/src/form-render/form-field.vue (2 hunks)
- packages/@core/ui-kit/form-ui/src/types.ts (5 hunks)
- packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue (1 hunks)
- packages/effects/layouts/src/widgets/notification/notification.vue (2 hunks)
- playground/src/adapter/form.ts (4 hunks)
- playground/src/views/examples/form/api.vue (1 hunks)
- playground/src/views/examples/form/custom.vue (2 hunks)
- playground/src/views/examples/form/dynamic.vue (1 hunks)
Additional context used
GitHub Check: Lint (windows-latest)
packages/@core/base/shared/src/utils/inference.ts
[warning] 16-16:
Missing JSDoc @returns description
GitHub Check: Lint (ubuntu-latest)
packages/@core/base/shared/src/utils/inference.ts
[warning] 16-16:
Missing JSDoc @returns description
GitHub Check: Test (ubuntu-latest)
packages/@core/ui-kit/form-ui/src/form-api.ts
[failure] 225-225: packages/@core/ui-kit/form-ui/tests/form-api.test.ts > formApi > should validate form
TypeError: Cannot convert undefined or null to object
❯ FormApi.validate packages/@core/ui-kit/form-ui/src/form-api.ts:225:16
❯ packages/@core/ui-kit/form-ui/tests/form-api.test.ts:142:21
Additional comments not posted (60)
docs/src/_env/adapter/index.ts (1)
1-1: LGTM!The change improves the organization and accessibility of the codebase by providing a centralized entry point for the
formmodule. It follows a common pattern in TypeScript and does not introduce any potential issues or side effects.docs/.vitepress/theme/styles/base.css (1)
9-11: LGTM!The new CSS rule looks good. It removes the default margins on paragraph elements within the
.form-valid-errorclass, which is likely intended to improve the spacing and alignment of error messages.The change is small, focused, and does not appear to have any negative impact on the existing styles.
docs/tsconfig.json (1)
4-9: LGTM!The changes in the
compilerOptionssection are beneficial:
- Setting the
baseUrlto the current directory establishes a clear base path for module resolution.- Defining the
pathsmapping with the"#/*"alias provides a convenient way to import modules from the./src/_env/directory.These changes can improve code readability and maintainability by reducing the need for relative import paths.
docs/package.json (3)
10-12: LGTM!The addition of the "imports" section with the mapping
"#/*": "./src/_env/*"is a valid configuration. This can be useful for organizing environment-specific configurations and keeping the import paths clean.
16-18: LGTM!The addition of the new dependencies
@vben/hooks,@vben/locales, and@vben/preferenceswith the "workspace:*" version is a valid change. These internal packages likely provide useful functionalities for the project.
20-20: LGTM!The addition of the
ant-design-vuedependency with the "catalog:" version is a valid change. This suggests that the project will be using Ant Design Vue components, which can provide a consistent and feature-rich UI.playground/src/views/examples/form/custom.vue (2)
10-10: LGTM!The renaming of the
BaseFormvariable toFormis consistent with the AI-generated summary and does not introduce any functional changes to the component. TheuseVbenFormfunction is used correctly to create theFormcomponent.
68-72: LGTM!The renaming of the
<BaseForm>component to<Form>in the template section is consistent with the variable renaming in the script section. The usage of the<Form>component and thefield3slot is correct and does not introduce any functional issues.docs/src/demos/vben-form/custom/index.vue (5)
1-60: LGTM!The script section of the component is well-structured and follows the expected format. The usage of the
useVbenFormfunction and the form configuration are correct.
62-68: LGTM!The template section of the component is well-structured and uses the
Formcomponent correctly. The slot for the third field is defined properly and allows for customization of the input.
8-53: LGTM!The form configuration is well-structured and follows the expected format. The common properties, layout, and schema are correctly defined. The input fields have different configurations, which are all valid and demonstrate various customization options.
55-59: LGTM!The
onSubmitfunction is correctly defined as the submission handler for the form. It receives the form values as a parameter and displays a success message containing the stringified form values.
64-66: LGTM!The slot for the third field is correctly defined using the
#field3syntax. It receives theslotPropsas a parameter and binds them to the renderedInputcomponent. The placeholder attribute is also set on theInputcomponent.docs/src/demos/vben-form/query/index.vue (1)
1-94: Excellent work on the query form component!The component is well-structured, follows best practices, and provides a reusable and configurable query form. Here are some positive aspects:
- The use of the
useVbenFormhook from the adapter ensures consistency and maintainability.- The form schema is defined using a declarative approach, making it easy to understand and maintain.
- The form fields are configured with appropriate props and placeholders.
- The form submission is handled properly, displaying the form values as a success message.
- The component is well-documented with comments explaining the purpose and usage of various options.
Overall, this component is a great addition to the project and can be easily integrated into other parts of the application.
apps/web-antd/src/adapter/form.ts (6)
30-30: LGTM!The
Textareacomponent is correctly imported fromant-design-vueto be used as a form component type.
Line range hint
36-58: LGTM!The
Textareacomponent is correctly added to theFormComponentTypetype definition to be used as a form component type.
87-87: LGTM!The
Textareacomponent is correctly added to the list of components in thesetupVbenFormfunction to be used as a form component type.
93-94: LGTM!The comment correctly clarifies that the default model property name for Ant Design Vue components is
value.
Line range hint
96-103: LGTM!The comment correctly clarifies that some components use
checkedorfileListas the model property name, and themodelPropNameMapobject correctly maps the model property name for specific components.
Line range hint
105-119: LGTM!The comments correctly clarify that the
requiredrule is for input fields and theselectRequiredrule is for selection fields, and that the error messages for these rules include internationalization support. The code for therequiredandselectRequiredrules is consistent with the comments.playground/src/adapter/form.ts (6)
30-30: LGTM!The
Textareacomponent is correctly imported fromant-design-vueto be used as a form component type.
54-54: LGTM!The
Textareacomponent is correctly added to theFormComponentTypeunion type to be used as a valid form component type.
87-87: LGTM!The
Textareacomponent is correctly registered in thecomponentsobject of thesetupVbenFormfunction to be used as a valid form component.
93-93: LGTM!The comment correctly clarifies that the default model property name for Ant Design Vue components is
value, which is consistent with thebaseModelPropNameconfiguration.
Line range hint
96-103: LGTM!The comment correctly clarifies that some components use alternative model property names, and the
modelPropNameMapobject correctly maps specific components to their alternative model property names.
105-110: LGTM!The comments correctly clarify the purpose and internationalization of the validation rules for required input and select fields, and the validation rules correctly use the
$tfunction to adapt the error messages for internationalization.Also applies to: 112-117
packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts (4)
9-9: LGTM!The import statement is correct and aligns with the changes made to handle boolean values for
whenIf,show, anddisabledparameters.
77-79: LGTM!The code segment correctly handles the case when
whenIfis a boolean value and returns early when it evaluates to false, aligning with the expected behavior.
86-88: LGTM!The code segment correctly handles the case when
showis a boolean value and returns early when it evaluates to false, aligning with the expected behavior.
101-102: LGTM!The code segment correctly handles the case when
disabledis a boolean value and setsisDisableddirectly to the boolean value, aligning with the expected behavior.packages/@core/base/shared/src/utils/inference.ts (1)
13-20: LGTM!The
isBooleanfunction implementation looks good. The logic is correct, and the function signature and return type are properly defined.packages/effects/layouts/src/widgets/notification/notification.vue (2)
84-84: LGTM!The
:disabledattribute is correctly set based on thenotificationsarray length to prevent unnecessary interactions when there are no notifications.
135-140: LGTM!The
:disabledattribute is correctly set based on thenotificationsarray length to prevent unnecessary interactions when there are no notifications.packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue (2)
165-165: LGTM!The change to use a more generic
border-borderclass for the border styles is a good refactor. It improves consistency and maintainability by centralizing border styles.
169-169: LGTM!The change to use
border-borderandflex-centerclasses is a good refactor. It improves consistency and maintainability by centralizing commonly used styles.docs/src/demos/vben-form/rules/index.vue (2)
1-185: LGTM!The script section of the Vue component is well-structured and follows best practices. The form schema is comprehensive and includes various field types and validation rules. The usage of the
useVbenFormhook and theonSubmitfunction is correct.
187-189: LGTM!The template section correctly renders the form component using the
<Form />tag. There are no issues with this code segment.packages/@core/base/shared/src/utils/__tests__/inference.test.ts (1)
100-113: LGTM!The
isBooleantest suite provides comprehensive coverage for theisBooleanfunction. The test cases verify the expected behavior for both boolean and non-boolean values, covering a good range of input types.docs/src/demos/vben-form/basic/index.vue (4)
1-5: LGTM!The script setup and imports follow best practices and are properly organized.
6-218: LGTM!The
useVbenFormhook configuration follows a clear and organized structure. The usage ofcommonConfig,handleSubmit, andlayoutoptions is appropriate and consistent.
222-226: LGTM!The
onSubmitfunction is well-defined and properly handles the form submission. The usage ofmessage.successprovides appropriate feedback to the user, and including the stringified form values in the success message can be helpful for debugging.
229-231: LGTM!The template section properly renders the
BaseFormcomponent without any unnecessary props or event listeners. The usage of the component matches the configuration defined in the script section.packages/@core/ui-kit/form-ui/src/types.ts (6)
91-91: LGTM!The change to the
disabledproperty type definition in theFormItemDependenciesinterface looks good. Allowing a direct boolean value in addition to a function that returns a boolean provides more flexibility without causing any issues.
96-96: LGTM!The change to the
ifproperty type definition in theFormItemDependenciesinterface looks good. Allowing a direct boolean value in addition to a function that returns a boolean provides more flexibility without causing any issues, similar to thedisabledproperty.
110-110: LGTM!The change to the
showproperty type definition in theFormItemDependenciesinterface looks good. Allowing a direct boolean value in addition to a function that returns a boolean provides more flexibility without causing any issues, similar to thedisabledandifproperties.
144-144: LGTM!The change to the default value annotation for the
formFieldPropsproperty in theFormCommonConfiginterface looks good. Updating the annotation to indicate an empty object as the default value aligns it with the actual default value and type of the property. This change improves the documentation without affecting the functionality.
164-164: LGTM!The change to the default value annotation for the
labelClassproperty in theFormCommonConfiginterface looks good. Updating the annotation to indicate an empty string as the default value aligns it with the actual default value of the property. This change improves the documentation without affecting the functionality.
298-298: LGTM!The addition of the default value annotation for the
showDefaultActionsproperty in theVbenFormPropsinterface looks good. Specifyingtrueas the default value improves the documentation and clarity of the property's default behavior. This change enhances the code's readability without affecting its functionality.packages/@core/ui-kit/form-ui/src/form-render/form-field.vue (2)
88-90: LGTM!The introduction of the
visiblecomputed property is a good refactor. It encapsulates the visibility logic based onisIfandisShow, making the code more readable and maintainable.
93-95: Looks good!The changes to
shouldRequiredandfieldRulescomputed properties correctly incorporate the newvisiblecomputed property. By returning early when the field is not visible, it ensures that the required status and validation rules are only applied to visible fields. This improves the consistency and efficiency of the form handling logic.Also applies to: 124-126
docs/src/components/common-ui/vben-form.md (7)
7-15: LGTM!The introduction provides good context about the form component's adaptability to various UI frameworks. The info block also conveys an important message about the flexibility to use native or custom components based on the user's needs.
17-157: Great job documenting the adapter section!The adapter section provides valuable information about adapting the form component to different UI frameworks. The Ant Design Vue adapter example is comprehensive and well-documented, making it easy for users to understand how to set up and configure the adapter for their specific UI framework.
159-165: Useful tip about potential issues in examples.The basic usage section is crucial for users to understand how to get started with the form component. The tip about potential internationalization and theme color issues in the examples is helpful to avoid confusion and clarify that they won't occur in actual usage.
167-201: Comprehensive coverage of form component features.The code segment covers various important topics related to the form component, including query form, form validation, form linking, custom components, and common operations. The brief descriptions and demo previews for each topic provide users with a good understanding of the features and how to implement them.
203-241: Clear explanation of theuseVbenFormAPI.The API section provides a clear explanation of how to use the
useVbenFormfunction and what it returns. The code example demonstrates how to destructure the returned array to access the form component and methods. The table listing the available form methods is a helpful reference for users to understand the capabilities of the form API.
242-373: Comprehensive documentation of form component props.The props section provides a comprehensive list of available props for configuring the form component. The table is well-structured, including the prop names, descriptions, types, and default values. The inclusion of TypeScript type definitions for
ActionButtonOptions,FormCommonConfig, andFormSchemais a helpful reference for users to understand the structure and expected properties of the related configurations.
375-444: Detailed explanation of form linking and validation.The form linking section provides a clear explanation of how to define dependencies between fields and control their behavior based on the values of other fields using the
dependenciesproperty in the schema. The form validation section covers two approaches for defining validation rules: using strings for simple rules and using Zod schemas for more complex validations. The examples are helpful for users to understand how to implement form linking and validation in their schemas.docs/.vitepress/theme/components/site-layout.vue (1)
84-86: Verify thatConfigProvidercorrectly applies the themeYou're passing
tokenThemetoConfigProvider:<ConfigProvider :theme="tokenTheme"> <Layout /> </ConfigProvider>Ensure that the
algorithmproperty withintokenThemeis structured correctly according toant-design-vue's expectations. Thethemeprop should be an object with thealgorithmproperty being a function or an array of functions provided byant-design-vue.To confirm that the theming works as intended, you can run your application and observe if the theme switches correctly between dark and light modes. Additionally, consult the ant-design-vue documentation to ensure you're using the
ConfigProvidercomponent properly.docs/src/demos/vben-form/api/index.vue (2)
58-62:onSubmitfunction implementation looks goodThe
onSubmitfunction correctly handles form submissions and displays the form values as a success message.
64-206:handleClickfunction handles actions appropriatelyThe
handleClickfunction effectively manages form state updates based on the action provided. All cases in the switch statement are handled correctly.
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
docs/.vitepress/theme/components/site-layout.vue (1)
74-83: LGTM, but consider removing the commented-outtokenproperty.The computed property
tokenThemecorrectly determines the theme algorithm based on the current dark mode state.However, the
tokenproperty is commented out:// token: tokens,If this property is no longer needed, consider removing it to keep the codebase clean and maintainable.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
Files selected for processing (3)
- docs/.vitepress/components/demo-preview.vue (1 hunks)
- docs/.vitepress/theme/components/site-layout.vue (1 hunks)
- pnpm-workspace.yaml (5 hunks)
Additional comments not posted (10)
docs/.vitepress/components/demo-preview.vue (1)
27-36: LGTM! The introduction of<ClientOnly>is a good improvement.Wrapping the slot content and the error message within the
<ClientOnly>component ensures that they are rendered only on the client-side. This change can potentially improve the handling of server-side rendering scenarios and enhance the overall performance and compatibility of the component.The control flow and conditional rendering logic remain intact, preserving the existing functionality.
Great work on this enhancement!
docs/.vitepress/theme/components/site-layout.vue (3)
2-9: LGTM!The additional imports are valid and likely used in the new code segments.
28-28: InitializeisDarkto the actual current theme state.Currently,
isDarkis initialized totrue:const isDark = ref(true);This might not reflect the actual theme when the component is mounted. Consider initializing it based on the current state of the document to ensure consistency:
const isDark = ref(document.documentElement.classList.contains('dark'));This ensures that the theme is correctly set when the component is first rendered.
43-72: Simplify dark mode detection using existing utilities.You've implemented a custom
watchDarkModeChangefunction with aMutationObserverto detect dark mode changes. While this works, you can simplify your code by using existing utilities like theuseDarkanduseTogglecomposables from@vueuse/core.Using these composables can reduce code complexity and improve readability.
Here's how you can refactor the code:
- Install
@vueuse/coreif not already installed:npm install @vueuse/core
- Import and use the composables:
import { useDark } from '@vueuse/core'; const isDark = useDark({ selector: 'html', attribute: 'class', valueDark: 'dark', valueLight: '', });This eliminates the need for the
watchDarkModeChangefunction and automatically keepsisDarkin sync with thedarkclass on thehtmlelement.
Translate comments to maintain consistency.
The comment on line 43 is in Chinese:
// 使用该函数For consistency and to aid all contributors, consider translating the comment to English:
// Use this functionpnpm-workspace.yaml (6)
27-27: LGTM!The minor version update for
@intlify/core-baselooks good. It should introduce new features and bug fixes while maintaining backward compatibility.
56-57: LGTM!The patch version updates for
@vue/reactivityand@vue/sharedlook good. They should introduce bug fixes and performance improvements while maintaining backward compatibility.
109-109: LGTM!The patch version update for
jsdomlooks good. It should introduce bug fixes and performance improvements while maintaining backward compatibility.
142-142: LGTM!The patch version update for
stylelint-config-recess-orderlooks good. It should introduce bug fixes and performance improvements while maintaining backward compatibility.
169-169: LGTM!The patch version update for
vuelooks good. It should introduce bug fixes and performance improvements while maintaining backward compatibility.
171-171: LGTM!The minor version update for
vue-i18nlooks good. It should introduce new features and bug fixes while maintaining backward compatibility.
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (9)
- apps/web-antd/src/adapter/form.ts (4 hunks)
- apps/web-ele/src/adapter/form.ts (1 hunks)
- apps/web-naive/src/adapter/form.ts (1 hunks)
- docs/.vitepress/config/zh.mts (1 hunks)
- docs/src/_env/adapter/form.ts (1 hunks)
- docs/src/components/common-ui/vben-form.md (1 hunks)
- packages/@core/base/shared/src/utils/inference.ts (2 hunks)
- packages/@core/ui-kit/form-ui/src/form-api.ts (1 hunks)
- playground/src/adapter/form.ts (4 hunks)
Files skipped from review as they are similar to previous changes (5)
- apps/web-antd/src/adapter/form.ts
- docs/src/_env/adapter/form.ts
- packages/@core/base/shared/src/utils/inference.ts
- packages/@core/ui-kit/form-ui/src/form-api.ts
- playground/src/adapter/form.ts
Additional comments not posted (18)
apps/web-ele/src/adapter/form.ts (1)
76-79: LGTM!The updated condition in the
requiredvalidation rule improves the readability and clarity of the code by explicitly listing the conditions that trigger the required validation message. The change does not introduce any logical errors or bugs and enhances the maintainability of the code.apps/web-naive/src/adapter/form.ts (1)
85-88: LGTM! The change clarifies the required validation logic.The updated condition explicitly checks for
undefined,null, or a length of0, ensuring that only these specific cases trigger the required validation message. This change aligns with the intent described in the AI-generated summary and reduces potential confusion by excluding values like0orfalsefrom triggering the validation.The change enhances the clarity and predictability of the required validation rule.
docs/.vitepress/config/zh.mts (3)
157-157: LGTM!The text label update is consistent with the other changes and does not introduce any issues.
161-161: LGTM!The text label update is consistent with the other changes and does not introduce any issues.
165-166: LGTM!The text label update is consistent with the other changes and does not introduce any issues.
docs/src/components/common-ui/vben-form.md (13)
7-7: LGTM!The statement clearly communicates the adaptability of the form component to various UI frameworks.
9-9: LGTM!The tip provides clear guidance to users on where to find parameter explanations if not found in the documentation.
11-15: LGTM!The info block effectively communicates the flexibility and freedom users have in choosing components based on their requirements.
17-24: LGTM!The new section on adapters provides valuable insights into the form's validation and adaptability. The guidance on customizing adapters empowers users to tailor the form to their specific requirements.
25-157: LGTM!The Ant Design Vue adapter example is comprehensive and well-structured. It demonstrates best practices for integrating the form with a specific UI framework. The custom validation rules with internationalization support enhance the form's usability.
159-169: LGTM!The basic usage example provides a clear starting point for users to create a form using the
useVbenFormhook. The tip effectively communicates potential issues in the examples that can be ignored.
171-175: LGTM!The new section on query forms provides a clear explanation of their purpose and behavior. It effectively distinguishes query forms from regular forms.
177-181: LGTM!The new section on form validation emphasizes its importance and informs users about configuring validation using the
rulesproperty.
183-189: LGTM!The new section on form linking provides valuable information on configuring form linking using the
dependenciesproperty. The emphasis on specifyingtriggerFieldshelps users ensure correct form linking behavior.
191-195: LGTM!The new section on custom components informs users about the flexibility to create and integrate their own components into the form. It provides a solution for scenarios where the component library lacks a required component.
197-201: LGTM!The new section on form operations informs users that examples of common form operations will be provided, setting the expectation for users to learn about them.
203-241: LGTM!The API documentation for the
useVbenFormhook provides a clear explanation of its return values. The code example helps users understand how to use the form component and methods, while the table of form methods serves as a quick reference for available methods and their types.
242-444: LGTM!The Props documentation for the
useVbenFormhook provides a comprehensive reference for the available properties. The table of properties helps users understand the purpose, type, and default value of each property. The TypeScript type definitions provide clarity on the structure and expected properties of the configurations.The explanations of form linking and validation offer detailed guidance on configuring these features. The support for both string-based rules and Zod schemas offers flexibility in defining validation rules.
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
Release Notes
New Features
Textareacomponent in forms, enhancing component variety.Bug Fixes
Style
Chores