Repository navigation
feat: modal and drawer locking - #5648
Conversation
|
WalkthroughThis pull request introduces new lock and unlock functionalities for both drawer and modal components. It adds corresponding API methods, state properties, and updates documentation along with demo examples. The changes ensure that components can enter a submission state where user interactions are controlled consistently through a locking mechanism, with version restrictions starting from >5.5.3. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant Demo as Drawer Demo
participant DrawerApi as Drawer API
User->>Demo: Click "锁定抽屉状态" button
Demo->>DrawerApi: Call lock(true)
DrawerApi->>DrawerApi: Set submitting = true (lock drawer)
Note over DrawerApi: Drawer UI shows loading state and disables close actions
Demo->>DrawerApi: After 3000ms, call lock(false)
DrawerApi->>DrawerApi: Set submitting = false (unlock drawer)
Note over DrawerApi: Drawer returns to normal state
sequenceDiagram
participant User as User
participant Demo as Modal Demo
participant ModalApi as Modal API
User->>Demo: Click button to lock modal
Demo->>ModalApi: Call lock(true)
ModalApi->>ModalApi: Set locked state (prevent close actions)
Note over ModalApi: Modal reflects a loading/submission state
Demo->>ModalApi: After 3000ms, call unlock()
ModalApi->>ModalApi: Set locked state to false (unlock modal)
Note over ModalApi: Modal returns to normal state
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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 (
|
917ddcc to
90de32a
Compare
![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/modal/modal.vue (1)
203-209: Improved modal close button control with better separation of concerns.The changes to
DialogContentproperties improve the control flow:
:show-close="closable"now directly determines if the close button is visible:close-disabled="submitting"allows the button to remain visible but disabled when submittingThis is a better separation of concerns than the previous implementation which conflated visibility with disabled state.
docs/src/components/common-ui/vben-drawer.md (1)
142-147: Need to fix table column count inconsistency.The table row for "setState" has only 3 columns while the header has 4 columns. This causes a formatting issue that should be fixed for better readability.
-| setState | 动态设置弹窗状态属性 | `(((prev: ModalState) => Partial<ModalState>)\| Partial<ModalState>)=>drawerApi` | +| setState | 动态设置弹窗状态属性 | `(((prev: ModalState) => Partial<ModalState>)\| Partial<ModalState>)=>drawerApi` | --- |🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
142-142: Table column count
Expected: 4; Actual: 3; Too few cells, row will be missing data(MD056, table-column-count)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
docs/src/components/common-ui/vben-drawer.md(1 hunks)docs/src/components/common-ui/vben-modal.md(1 hunks)packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts(3 hunks)packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts(3 hunks)packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue(8 hunks)packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts(1 hunks)packages/@core/ui-kit/popup-ui/src/modal/modal.vue(1 hunks)packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue(2 hunks)playground/src/views/examples/drawer/base-demo.vue(2 hunks)playground/src/views/examples/modal/base-demo.vue(2 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
docs/src/components/common-ui/vben-drawer.md
142-142: Table column count
Expected: 4; Actual: 3; Too few cells, row will be missing data
(MD056, table-column-count)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: post-update (windows-latest)
🔇 Additional comments (30)
packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts (1)
183-190: Good addition of theunlockmethod as an alias forlock(false)This is a well-implemented addition that provides a more semantically clear way to release the modal's lock state. The method properly returns the result of
this.lock(false)to maintain the fluent interface pattern used throughout the class.playground/src/views/examples/modal/base-demo.vue (3)
4-4: Appropriate import for the new Button componentThe import statement correctly includes the Button component from ant-design-vue which is needed for the new locking functionality demo.
22-27: Good implementation of the lockModal functionThis function demonstrates a practical use case for the new lock/unlock API. The implementation correctly locks the modal and then unlocks it after a 3-second delay, providing a clear example of the API usage.
32-32: Well-integrated button for demonstrating the lock functionalityThe button is properly integrated into the template and includes the appropriate primary type and click handler to demonstrate the modal locking functionality.
playground/src/views/examples/drawer/base-demo.vue (3)
4-4: Appropriate import for the new Button componentThe import statement correctly includes the Button component from ant-design-vue which is needed for the new locking functionality demo.
19-24: Good implementation of the lockDrawer functionThe function demonstrates the drawer lock/unlock API in a consistent manner with the modal example. It correctly locks the drawer and then unlocks it after a 3-second delay, providing a clear example of how to use this functionality.
30-30: Well-integrated button for demonstrating the drawer lock functionalityThe button is properly positioned in the template with the appropriate primary type and click handler to demonstrate the drawer locking functionality.
packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue (3)
26-27: Good addition of the closeDisabled propAdding this prop is necessary for supporting the locking mechanism and controlling the close button's state. The prop follows the component's naming conventions and is well-integrated with the existing props structure.
34-35: Proper default value for closeDisabledSetting the default value to
falseensures backward compatibility with existing code that doesn't explicitly set this prop, maintaining the component's previous behavior.
112-113: Correct binding of the closeDisabled prop to the DialogClose componentThe disabled attribute is properly bound to the closeDisabled prop, allowing the close button to be conditionally disabled when the dialog is in a locked state.
docs/src/components/common-ui/vben-modal.md (2)
158-158: Documentation added for newunlockmethod.The new
unlockmethod documentation provides a clear and consistent API for unlocking modals that have been locked, serving as a more semantically meaningful alternative tolock(false).
162-162: Updated lock method documentation to include unlock references.The documentation update for the
lockmethod now correctly references the newunlockmethod as an alternative way to release the locked state, improving the clarity and completeness of the API documentation.packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts (1)
108-111: Added submitting state property to DrawerProps.The addition of the
submittingproperty with proper JSDoc comments aligns the drawer component with the modal component, enabling consistent locking behavior across all popup components in the framework.packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts (4)
55-55: Added submitting state to drawer default state.The default state now includes
submitting: false, which is necessary for the new locking functionality to work properly.
96-100: Improved close method to reset submitting state.The close method now explicitly resets the
submittingstate to false when closing the drawer, ensuring proper cleanup and preventing potential state issues if the drawer is reopened.
108-115: Added lock method to drawer API.The lock method implementation with proper JSDoc documentation allows users to lock the drawer during submission processes, preventing unwanted interactions and providing consistent behavior with the modal component.
175-181: Added unlock method to drawer API.The unlock method serves as a semantic alias for
lock(false), providing a more intuitive API for releasing the locked state of a drawer. The implementation and documentation are clear and consistent with the modal component.packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue (10)
39-39: Good implementation of the submitting prop.The default value of
falseis appropriate for this feature as it ensures backward compatibility with existing code.
77-77: Good priority handling for the submitting state.Correctly including the submitting state in the usePriorityValues function ensures consistency between props and internal state.
96-97: Properly enhanced modal interaction safety.Adding the
submitting.valuecheck prevents unwanted modal dismissal during form submission, which is a good UX practice to prevent data loss.
101-103: Escape key prevention works correctly during submission.The implementation properly prevents the escape key from closing the drawer when in submitting state, consistent with the locking mechanism.
109-114: Comprehensive pointer event handling.The condition now properly accounts for the submitting state, ensuring consistent behavior across all dismissal methods. The logical ordering of conditions is also good - checking submitting first makes the code more readable.
178-179: Properly disabled close button during submission.Disabling the close button when submitting is active prevents users from inadvertently canceling operations in progress.
219-220: Consistent treatment of both close buttons.Both close buttons (left and right) are treated consistently with respect to the submitting state, which ensures a predictable user experience.
244-248: Enhanced loading state visibility.Showing the loading indicator during both standard loading operations and submission states provides clear visual feedback to the user.
268-269: Appropriately disabled cancel button during submission.Disabling the cancel button during submission prevents users from accidentally canceling an operation in progress.
279-280: Good loading state for confirmation button.The confirm button now correctly shows its loading state when either confirmLoading or submitting is true, providing appropriate visual feedback for both scenarios.
docs/src/components/common-ui/vben-drawer.md (3)
140-141: Table structure improved with version information.Adding the version column is helpful for users to understand when specific features were introduced. This improves documentation clarity.
148-149: Well-documented new lock and unlock methods.The documentation for the new lock and unlock methods is clear and informative. The version restriction information is also helpful to indicate when these features became available.
151-155: Excellent detailed explanation of the lock functionality.The info block provides a comprehensive explanation of the lock method, its purpose, and its behavior. This helps developers understand when and how to use this feature effectively.
Description
fix: #5645
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