feat: add modal and drawer components and examples #4229
Conversation
|
WalkthroughThe changes across various files introduce new components, updates to functionalities, and a reorganization of localization and configuration settings. Key updates include a migration to a new modal and drawer management system, enhancements to user interactions, and the expansion of localization resources for these components. Additionally, several new demo files showcase the updated drawer functionalities, streamlining the overall codebase structure. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Drawer API
participant Drawer Component
User->>Drawer Component: Open Drawer
Drawer Component->>Drawer API: Call open()
Drawer API-->>Drawer Component: Update State (isOpen = true)
Drawer Component->>User: Show Drawer
User->>Drawer Component: Interact with Content
User->>Drawer Component: Close Drawer
Drawer Component->>Drawer API: Call close()
Drawer API-->>Drawer Component: Update State (isOpen = false)
Drawer Component->>User: Hide Drawer
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 as PR comments)
Additionally, you can add 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: 11
Outside diff range, codebase verification and nitpick comments (9)
playground/src/views/examples/modal/drag-demo.vue (1)
6-15: Review modal setup and handlers.The modal setup with
draggable: trueis appropriate for the demo. TheonCancelandonConfirmhandlers are implemented correctly. However, consider uncommenting themodalApi.close()in theonConfirmmethod if the intention is to close the modal upon confirmation.playground/src/views/examples/drawer/base-demo.vue (2)
12-12: Consider uncommenting or removing the commented drawerApi.close().The commented line inside
onConfirmmight be an oversight. If the intention is to close the drawer after confirmation, it should be uncommented; otherwise, it should be removed to avoid confusion.
29-30: Clarify the purpose of commented-out slots.The commented-out slots for
prepend-footerandappend-footerare not used but present in the code. If these are planned for future use, consider adding a TODO comment or documentation to clarify their purpose.playground/src/views/examples/modal/auto-height-demo.vue (1)
14-14: Consider uncommenting or removing the commented modalApi.close().The commented line inside
onConfirmmight be an oversight. If the intention is to close the modal after confirmation, it should be uncommented; otherwise, it should be removed to avoid confusion.packages/@core/ui-kit/popup-ui/package.json (1)
1-11: Discrepancy in repository directory path.The
directoryfield in thepackage.jsonfile specifiespackages/@vben-core/uikit/popup-ui, but the actual directory ispackages/@core/ui-kit/popup-ui. Please update thepackage.jsonto reflect the correct directory structure.
- File:
packages/@core/ui-kit/popup-ui/package.json- Field:
repository.directoryAnalysis chain
Verify the repository directory.
Ensure that the
directoryfield in the repository object correctly reflects the actual directory structure in the project.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the repository directory matches the actual structure. # Test: Search for the directory. Expect: Directory exists. fd --type d 'packages/@vben-core/uikit/popup-ui'Length of output: 48
Script:
#!/bin/bash # Description: Broaden the search to verify the repository directory structure. # Test: Search for any similar directories in the repository. fd --type d 'popup-ui'Length of output: 54
packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts (1)
18-44: Proper handling ofconnectedComponent.The handling of
connectedComponentthroughprovideandinjectis appropriate. However, ensure that this does not lead to tight coupling between components.Review the usage of
connectedComponentto ensure it does not lead to excessive coupling between components, affecting modularity and testability.packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts (1)
22-47: Handling ofconnectedComponentinuseVbenDrawer.The handling through
provideandinjectis consistent withuseVbenModal. Ensure that this pattern does not introduce unnecessary complexity or coupling.Evaluate the use of
connectedComponentto ensure it maintains modularity and does not overly complicate the component architecture.playground/src/views/examples/drawer/shared-data-demo.vue (1)
8-23: Clarify commented code and ensure data handling robustness.The drawer setup includes handlers for various states. However, the
drawerApi.close()is commented out in theonConfirmhandler, which might be intentional for demonstration purposes but should be clarified.Consider adding error handling or a fallback for the
getDatamethod to ensure robustness, especially when dealing with external data sources.playground/src/views/examples/drawer/dynamic-demo.vue (1)
6-21: Ensure clarity on commented code and review dynamic title functionality.The dynamic update of the drawer's title is a good demonstration of component interactivity. However, the commented out
drawerApi.close()in theonConfirmhandler should be clarified or removed if not needed.Additionally, ensure that the state update function handles potential errors or invalid states gracefully.
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 (63)
- .vscode/settings.json (1 hunks)
- cspell.json (2 hunks)
- internal/vite-config/src/plugins/inject-app-loading/default-loading-antd.html (2 hunks)
- packages/@core/base/icons/src/lucide.ts (2 hunks)
- packages/@core/base/shared/src/utils/inference.test.ts (3 hunks)
- packages/@core/base/shared/src/utils/inference.ts (2 hunks)
- packages/@core/base/shared/src/utils/letter.test.ts (2 hunks)
- packages/@core/base/shared/src/utils/letter.ts (1 hunks)
- packages/@core/composables/src/tests/use-sortable.test.ts (2 hunks)
- packages/@core/composables/src/index.ts (1 hunks)
- packages/@core/composables/src/use-priority-value.ts (1 hunks)
- packages/@core/preferences/src/use-preferences.ts (2 hunks)
- packages/@core/ui-kit/popup-ui/build.config.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/package.json (1 hunks)
- packages/@core/ui-kit/popup-ui/postcss.config.mjs (1 hunks)
- packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue (1 hunks)
- packages/@core/ui-kit/popup-ui/src/drawer/index.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/index.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/index.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/modal.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/modal.vue (1 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/tailwind.config.mjs (1 hunks)
- packages/@core/ui-kit/popup-ui/tsconfig.json (1 hunks)
- packages/@core/ui-kit/shadcn-ui/src/components/index.ts (2 hunks)
- packages/@core/ui-kit/shadcn-ui/src/components/spinner/index.ts (1 hunks)
- packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue (1 hunks)
- packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue (3 hunks)
- packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue (5 hunks)
- packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/sheet.ts (2 hunks)
- packages/effects/common-ui/package.json (1 hunks)
- packages/effects/common-ui/src/components/index.ts (1 hunks)
- packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue (2 hunks)
- packages/effects/layouts/package.json (1 hunks)
- packages/effects/layouts/src/widgets/global-search/global-search.vue (4 hunks)
- packages/effects/layouts/src/widgets/global-search/search-panel.vue (1 hunks)
- packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue (3 hunks)
- packages/effects/layouts/src/widgets/preferences/blocks/shortcut-keys/global.vue (2 hunks)
- packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue (9 hunks)
- packages/effects/layouts/src/widgets/preferences/preferences.vue (2 hunks)
- packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue (7 hunks)
- playground/src/locales/langs/en-US.json (1 hunks)
- playground/src/locales/langs/zh-CN.json (1 hunks)
- playground/src/router/routes/modules/examples.ts (1 hunks)
- playground/src/views/examples/drawer/auto-height-demo.vue (1 hunks)
- playground/src/views/examples/drawer/base-demo.vue (1 hunks)
- playground/src/views/examples/drawer/dynamic-demo.vue (1 hunks)
- playground/src/views/examples/drawer/index.vue (1 hunks)
- playground/src/views/examples/drawer/shared-data-demo.vue (1 hunks)
- playground/src/views/examples/ellipsis/index.vue (1 hunks)
- playground/src/views/examples/modal/auto-height-demo.vue (1 hunks)
- playground/src/views/examples/modal/base-demo.vue (1 hunks)
- playground/src/views/examples/modal/drag-demo.vue (1 hunks)
- playground/src/views/examples/modal/dynamic-demo.vue (1 hunks)
- playground/src/views/examples/modal/index.vue (1 hunks)
- playground/src/views/examples/modal/shared-data-demo.vue (1 hunks)
- scripts/vsh/src/check-circular/index.ts (1 hunks)
- vben-admin.code-workspace (1 hunks)
Files skipped from review due to trivial changes (15)
- packages/@core/composables/src/tests/use-sortable.test.ts
- packages/@core/composables/src/index.ts
- packages/@core/ui-kit/popup-ui/build.config.ts
- packages/@core/ui-kit/popup-ui/postcss.config.mjs
- packages/@core/ui-kit/popup-ui/src/index.ts
- packages/@core/ui-kit/popup-ui/src/modal/index.ts
- packages/@core/ui-kit/popup-ui/tailwind.config.mjs
- packages/@core/ui-kit/popup-ui/tsconfig.json
- packages/effects/layouts/package.json
- packages/effects/layouts/src/widgets/global-search/search-panel.vue
- packages/effects/layouts/src/widgets/preferences/blocks/shortcut-keys/global.vue
- playground/src/locales/langs/en-US.json
- playground/src/locales/langs/zh-CN.json
- playground/src/views/examples/ellipsis/index.vue
- scripts/vsh/src/check-circular/index.ts
Additional comments not posted (82)
packages/effects/common-ui/src/components/index.ts (1)
3-3: Approved: New export statement for@vben-core/popup-ui.The addition of this export statement enhances module functionality by making
popup-uicomponents more accessible, aligning with the PR's objectives.packages/@core/ui-kit/shadcn-ui/src/components/spinner/index.ts (1)
1-1: Approved: New export forVbenLoading.The addition of this export statement expands the module's capabilities, allowing for more versatile use of loading components alongside existing spinner components.
packages/@core/ui-kit/popup-ui/src/drawer/index.ts (1)
1-3: Approved: New file structure and exports for drawer components.The file correctly exports types, the main component, and a hook, enhancing modularity and reusability of the drawer components within the application.
playground/src/views/examples/modal/drag-demo.vue (1)
18-18: Template content review.The template clearly indicates the draggable feature by instructing users to move the mouse to the header. This is a good use of direct instructions to demonstrate the feature.
playground/src/views/examples/modal/shared-data-demo.vue (2)
8-23: Review modal setup with shared data handling.The setup for handling shared data using Vue's
refand updating it in theonOpenChangehandler is well implemented. This demonstrates a practical use case for modals that need to interact with external data.
26-27: Template content review for data display.The template effectively demonstrates how to display data passed to the modal. The use of Vue's reactivity system to update and display data is correctly implemented.
playground/src/views/examples/modal/base-demo.vue (2)
6-22: Review basic modal setup with state management.The modal setup includes a loading state simulation which is a good demonstration of handling asynchronous operations within modals. The handlers are implemented correctly, and the state management is appropriate for a basic demo.
25-27: Template content review for basic modal.The template is well-structured with a clear and informative tooltip for the modal title. This enhances user understanding and interaction with the modal.
playground/src/views/examples/drawer/base-demo.vue (1)
1-23: Overall structure and logic look good.The use of
useVbenDrawercustom hook and its configuration is well implemented. The script setup block is clean and straightforward, adhering to Vue 3 composition API standards.packages/effects/common-ui/package.json (1)
23-23: New dependency@vben-core/popup-uiadded.Ensure that the version specified (
workspace:*) aligns with your project's workspace settings. This dependency should be compatible with other packages and meet the project's requirements.Verification successful
Dependency
@vben-core/popup-uiis correctly configured.The dependency
@vben-core/popup-uiis set toworkspace:*and exists in the workspace, confirming its compatibility and correct setup in the monorepo environment. No further action is needed.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the compatibility of the new dependency with other packages. # Test: Check the workspace configuration for the specified version. cat packages/effects/common-ui/package.json | jq '.dependencies["@vben-core/popup-ui"]'Length of output: 103
Script:
#!/bin/bash # Description: Check if the `@vben-core/popup-ui` package exists in the workspace. # Find the package.json files in the workspace to locate `@vben-core/popup-ui`. fd package.json --exec jq -r 'select(.name == "@vben-core/popup-ui") | .name'Length of output: 99
playground/src/views/examples/modal/auto-height-demo.vue (2)
1-25: Overall structure and logic look good.The use of
useVbenModalcustom hook and its configuration is well implemented. The script setup block is clean and straightforward, adhering to Vue 3 composition API standards.
22-24: Ensure proper handling of reactive updates.The function
handleUpdatemodifies the reactive referencelist. Ensure that this update does not cause unintended side effects or performance issues, especially with larger lists.Verification successful
Reactive update handling is appropriate.
The
handleUpdatefunction modifies a small list, and its usage within av-forloop does not introduce performance issues or side effects. The list size is small, and there are no dependent watchers or computed properties.
- The list is declared as a reactive reference and used in a straightforward manner.
- The update operation is simple and efficient for the given list size.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the performance impact of the reactive update. # Test: Check the reactivity system handling for large lists. echo "Check Vue DevTools for reactivity performance with large lists."Length of output: 136
Script:
#!/bin/bash # Find the declaration of `list` in the `auto-height-demo.vue` file. ast-grep --lang vue --pattern 'const list = $_' # Search for any watchers or computed properties that depend on `list`. rg 'list' -A 5 --glob '**/auto-height-demo.vue'Length of output: 2925
playground/src/views/examples/drawer/auto-height-demo.vue (2)
1-25: Well-structured script setup and logical use of Vue components.The imports and setup of the
Drawercomponent are correctly handled. ThehandleUpdatefunction is well-defined for updating the list dynamically.
26-40: Template uses components effectively.The Drawer component is used effectively with a dynamic list rendering and a button that triggers list updates. The use of slots (
prepend-footer) to add custom elements like buttons is a good practice in Vue.packages/@core/base/shared/src/utils/letter.ts (2)
32-40: Efficient implementation ofkebabToCamelCase.The function uses string manipulation methods effectively to convert kebab-case to camelCase. It's a useful addition to the string utilities.
42-47: Updated export statement correctly includes new utility function.The export statement has been properly updated to include the new
kebabToCamelCasefunction, ensuring it is available for use elsewhere in the application.cspell.json (1)
40-40: Appropriate updates to spell checker configuration.The addition of new words and ignore patterns in
cspell.jsonis well-justified, enhancing the spell checker's functionality and reducing the likelihood of irrelevant alerts.Also applies to: 57-60
packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/sheet.ts (2)
4-4: Updated z-index value toz-[1000].This change significantly increases the stacking context, which could affect the visibility and layering of UI elements. Ensure this change is tested across different parts of the application to avoid visual regressions.
Run the following script to verify the impact of this change:
13-15: Refinement in responsive behavior forrightvariant.The removal of
sm:max-w-smsuggests a change in how the component behaves in smaller screens. Verify that this change aligns with the intended responsive design principles of the project.Run the following script to verify the responsive behavior:
playground/src/views/examples/modal/dynamic-demo.vue (2)
6-16: Implementation of dynamic modal behaviors.The setup for the modal with dynamic behaviors such as draggable and dynamic title updates is well-implemented. Ensure that the modal API (
modalApi) is thoroughly tested, especially theonConfirmandonCancelmethods.Run the following script to verify the integration and testing of
modalApi:
20-28: Dynamic state management for fullscreen toggle.The implementation of toggling fullscreen mode using a reactive state management approach is a good practice. Verify that the state updates do not cause re-rendering issues or conflicts with other components.
Run the following script to verify the state management and its impact:
Verification successful
Dynamic state management for fullscreen toggle verified.
The
fullscreenstate management indynamic-demo.vueis locally handled and does not appear to cause re-rendering issues or conflicts with other components. The implementation follows a good practice of using a reactive state management approach.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the state management for fullscreen toggle. # Test: Search for other components using `fullscreen` state. Expect: No conflicts or issues. rg 'fullscreen'Length of output: 3612
Script:
#!/bin/bash # Check for shared state management involving `fullscreen` rg 'fullscreen' -A 5 -B 5 # Check for lifecycle hooks or effects related to `fullscreen` rg 'mounted|beforeUpdate|updated|beforeDestroy|destroyed' -A 5 -B 5Length of output: 50024
playground/src/router/routes/modules/examples.ts (2)
19-20: Updated route name and path for clarity and consistency.The renaming of the route to 'EllipsisExample' and its path update to '/examples/ellipsis' enhances clarity and consistency in the routing structure. Ensure that all references to the old route name and path are updated across the application.
Run the following script to verify the update of route references:
Verification successful
No remaining references to 'EllipsisDemo' found.
The search confirmed that all references to 'EllipsisDemo' have been successfully updated to 'EllipsisExample'. There are no remaining instances of the old route name in the codebase.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the update of route references. # Test: Search for old route name and path. Expect: No remaining references. rg 'EllipsisDemo'Length of output: 17
Script:
#!/bin/bash # Re-run the search for 'EllipsisDemo' to confirm no remaining references. rg 'EllipsisDemo' --hidden --glob '!.git/*' --glob '!node_modules/*'Length of output: 68
27-40: Addition of new routes for modal and drawer examples.The new routes for modal and drawer examples are well-defined with appropriate paths and lazy-loaded components. Ensure that these new routes are included in any relevant navigation components and that their metadata is correctly used for page titles and other UI elements.
Run the following script to verify the integration of new routes:
packages/@core/ui-kit/popup-ui/package.json (2)
23-30: Approve the main and module configuration.The
mainandmodulefields are correctly pointing to the distribution files. The exports configuration is well set up to handle different environments.
39-46: Approve the dependencies configuration.The dependencies are well-defined, with appropriate versions for external libraries and workspace links for internal packages.
packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts (4)
5-52: Interface definitions are clear and well-documented.The
DrawerPropsinterface is well-documented with comments explaining each property. This is crucial for maintainability and understanding the component's API.
54-61: State interface extends props correctly.The
DrawerStateinterface extendsDrawerPropswhich is a good practice as it keeps the state management consistent with the props.
63-67: Extended API type is well-defined.The
ExtendedDrawerApitype extendsDrawerApiand adds auseStoremethod, which is a typical pattern for state management in modern UI frameworks.
69-75: API options interface includes necessary hooks.The
DrawerApiOptionsinterface provides hooks likeonBeforeCloseandonConfirm, which are essential for handling drawer interactions.packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue (2)
32-39: Modal state synchronization is implemented correctly.The use of a
watchfunction to synchronize the modal's open state with the Vue reactive system is appropriate and follows best practices in Vue 3.
44-62: Template uses the new modal component effectively.The modal template is simplified and uses the new
Modalcomponent effectively, with properties set to control its behavior based on the requirements.internal/vite-config/src/plugins/inject-app-loading/default-loading-antd.html (1)
105-105: Loading animation simplified correctly.The simplification of the loading animation by removing specific CSS classes and styles is consistent with the intent to streamline the user experience.
packages/@core/ui-kit/popup-ui/src/modal/modal.ts (3)
5-82: Comprehensive and well-documented interface definitions.The
ModalPropsinterface is well-documented with clear comments for each property. This should help developers understand the expected behavior of the modal component.
84-91: Clear state management interface.The
ModalStateinterface extendsModalPropsand includes additional state management properties, which is a good practice for clarity and maintainability.
93-97: Effective use of extended API for state management.The
ExtendedModalApitype effectively extendsModalApiwith additional functionality to use the store pattern. This is a good use of TypeScript's capabilities to enhance modularity and reusability.packages/effects/layouts/src/widgets/preferences/preferences.vue (3)
4-9: Updated imports to support new drawer functionality.The new imports for icons, utilities, and the drawer management hook are correctly added to support the new
PreferencesDrawercomponent.
11-15: Correct setup of drawer management.The
useVbenDrawerhook is correctly configured with thePreferencesDrawercomponent, ensuring that the drawer functionality is properly initialized.
57-70: Template correctly integrates new drawer and button components.The template has been updated to include the new
Drawercomponent and aVbenButtonwithin a slot. This setup correctly handles the drawer's opening mechanism and integrates the settings icon, enhancing the UI's interactivity and visual appeal.packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue (2)
37-41: Proper use of reactive reference for component access.The introduction of
contentRefand its exposure throughgetContentRefis a good practice for providing access to the component instance, which can be useful for parent components.
Line range hint
51-69: Enhanced customization options for the close button.The template now allows for customizing the close button's class through the
closeClassprop. This enhancement improves the component's flexibility in terms of styling.packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue (4)
4-4: Approved import changes.The new imports align with the transition to using
@vben-core/popup-uicomponents. Ensure that theuseVbenModalhook is used as intended by the library's documentation.
37-41: Simplified modal interaction approved.The direct integration of the
handleSubmitfunction in theonConfirmmethod of theModalcomponent simplifies the component's interaction model and reduces the complexity of state management.
42-47: Reactive state management is appropriate and well-implemented.The use of Vue's reactive system for managing form state is efficient and aligns with common Vue patterns.
66-101: Template structure changes approved; review for accessibility recommended.The integration of the new
Modalcomponent and specific UI elements likeVbenAvatarandVbenInputPasswordenhances the modal's functionality. Ensure that these changes maintain accessibility standards.playground/src/views/examples/modal/index.vue (4)
2-11: Proper use of imports and component setup.Imports are correctly organized, and component demos are modularly imported. The structure is clean and follows best practices for Vue and TypeScript.
12-31: Effective use of custom hooks for modal management.The
useVbenModalhook is used effectively to create modal components with connected Vue components. This pattern promotes reusability and modularity.
63-103: Well-structured template with descriptive elements and actions.The template is well-organized with descriptive text and clear action buttons for each modal. This enhances user experience and accessibility.
33-60: Ensure consistent naming and functionality for modal open functions.The functions for opening modals are consistently named and implemented. However, ensure that all modals are tested for correct behavior when opened.
packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts (2)
5-67: Robust implementation of the DrawerApi class with clear API definitions.The
DrawerApiclass is well-implemented with clear handling of state and API interactions. The use of TypeScript ensures type safety and better predictability of the code behavior.
69-122: Ensure batch state updates and individual method functionalities are tested.The
batchUpdateState,close,getData,onCancel,onConfirm,open,setData, andsetStatemethods are crucial for the drawer's functionality. It's important to ensure that these methods are thoroughly tested, especially the state management logic.packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue (3)
6-31: Well-defined props with sensible defaults and clear documentation.The props are well-documented with descriptions in both English and Chinese, providing clarity on their usage. Default values are sensible, ensuring the component behaves predictably out of the box.
37-65: Effective use of Vue's reactivity system with watch effect.The watch effect is correctly set up to handle the spinner's visibility based on the
spinningprop. This reactive setup ensures that the spinner's visibility is managed efficiently.
68-137: Visually appealing spinner with well-implemented CSS animations.The spinner uses CSS animations effectively to create a visually appealing loading indicator. The use of scoped styles ensures that the styles do not leak to other components.
packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts (2)
18-18: Initialization ofstorewith state management.The store is initialized with a combination of default and provided state, which is a good practice. However, ensure that the
onUpdatecallback does not introduce side effects that could lead to unexpected behavior.Also applies to: 48-66
Verification successful
No side effects found in
onUpdatecallback.The
onUpdatemethod inmodal-api.tssynchronizes the state with the store's state without introducing side effects. The logic is straightforward and aligns with typical state management practices.
- Location:
packages/@core/ui-kit/popup-ui/src/modal/modal-api.tsScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for potential side effects in the onUpdate callback. # Test: Search for usage of the onUpdate method in the project. Expect: No harmful side effects. rg --type typescript -A 5 $'onUpdate' src/modal/Length of output: 82
Script:
#!/bin/bash # Description: Check for potential side effects in the onUpdate callback. # Test: Search for usage of the onUpdate method in the project. Expect: No harmful side effects. rg --type ts -A 5 'onUpdate'Length of output: 1538
1-1: Ensure appropriate import of types.Verify that
ModalApiOptionsandModalStateare correctly defined in the referenced file to ensure type safety.Verification successful
Types are correctly defined and imported
The types
ModalApiOptionsandModalStateare properly defined as interfaces inmodal.tsand are correctly imported inmodal-api.ts. No issues found with the type imports.
ModalApiOptionsis defined and extendsModalState.ModalStateis defined and extendsModalProps.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the definition of ModalApiOptions and ModalState in the modal.ts file. # Test: Search for the type definitions in modal.ts. Expect: Definitions are present and correct. ast-grep --lang typescript --pattern $'type ModalApiOptions = $$$; type ModalState = $$$' src/modal/modal.tsLength of output: 581
Script:
#!/bin/bash # Description: Verify the definition of ModalApiOptions in the modal.ts file. # Test: Search for the type definition of ModalApiOptions in modal.ts. ast-grep --lang typescript --pattern 'type ModalApiOptions = $_' src/modal/modal.tsLength of output: 151
Script:
#!/bin/bash # Description: Verify the definition of ModalState in the modal.ts file. # Test: Search for the type definition of ModalState in modal.ts. ast-grep --lang typescript --pattern 'type ModalState = $_' src/modal/modal.tsLength of output: 146
Script:
#!/bin/bash # Find the correct path for modal.ts file. fd modal.tsLength of output: 117
Script:
#!/bin/bash # Description: Verify the definition of ModalApiOptions in the correct modal.ts file. # Find the correct path for modal.ts and search for the type definition of ModalApiOptions. fd modal.ts --exec ast-grep --lang typescript --pattern 'type ModalApiOptions = $_' {}Length of output: 90
Script:
#!/bin/bash # Description: Verify the definition of ModalState in the correct modal.ts file. # Find the correct path for modal.ts and search for the type definition of ModalState. fd modal.ts --exec ast-grep --lang typescript --pattern 'type ModalState = $_' {}Length of output: 85
Script:
#!/bin/bash # Search for ModalApiOptions across the entire repository to find its definition. rg 'ModalApiOptions'Length of output: 711
Script:
#!/bin/bash # Search for ModalState across the entire repository to find its definition. rg 'ModalState'Length of output: 1161
vben-admin.code-workspace (1)
88-90: Approved: Addition of@vben-core/popup-ui.The new package has been added correctly to the workspace configuration. The JSON syntax is correct, and the package is logically placed within the existing structure.
packages/@core/base/shared/src/utils/letter.test.ts (1)
81-117: Approved: Comprehensive tests forkebabToCamelCase.The tests for the new
kebabToCamelCasefunction are well-structured and cover a wide range of scenarios, including edge cases. The use ofvitestfor assertions is correctly implemented, and the tests are clear and concise.packages/@core/base/shared/src/utils/inference.ts (2)
27-27: Approved: Enhancement toisEmptyfunction.The modification to make the
isEmptyfunction accept optional parameters is a sensible enhancement, increasing its utility and flexibility in handling inputs.
131-140: Approved: Addition ofgetFirstNonNullOrUndefined.The new function
getFirstNonNullOrUndefinedis well-documented and implemented correctly. It provides a useful feature for retrieving the first non-null or non-undefined value from a list, enhancing the utility module's functionality.packages/@core/preferences/src/use-preferences.ts (1)
Line range hint
1-149: Assess impact of removingglobalPreferencesShortcutKey.The removal of
globalPreferencesShortcutKeysimplifies the return object ofusePreferencesbut potentially impacts other components or modules that relied on this property to determine the state of global preferences. It's crucial to verify whether this change affects other parts of the application.Run the following script to verify the usage of
globalPreferencesShortcutKeythroughout the codebase:Verification successful
No impact from removing
globalPreferencesShortcutKey.The search for
globalPreferencesShortcutKeyacross the codebase returned no results, indicating that its removal does not affect other components or modules. This change simplifies the return object ofusePreferenceswithout impacting functionality elsewhere.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `globalPreferencesShortcutKey` throughout the codebase. # Test: Search for the property usage. Expect: No occurrences since it's removed. rg --type ts -A 5 $'globalPreferencesShortcutKey'Length of output: 48
packages/effects/layouts/src/widgets/global-search/global-search.vue (1)
33-37: Review modal management and shortcut key handling changes.The transition to
useVbenModaland the associated changes in modal management and shortcut key handling enhance modularity and maintainability. Ensure that the new modal API is integrated correctly and that the component's functionality remains intact.The changes appear to streamline interactions and reduce direct state management, which is a positive improvement for the maintainability of the code.
Also applies to: 44-44, 52-52, 76-78
packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts (1)
11-131: Review implementation of draggable functionality.The
useModalDraggablefunction provides essential draggable functionality for modals. Ensure that the implementation handles edge cases, such as preventing elements from being dragged out of the viewport. The current setup with event listeners and position adjustments appears to be robust, but testing for edge cases in a live environment is recommended.The implementation seems well-structured and should provide the necessary functionality for draggable modals.
packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue (2)
1-46: Well-structured Vue component setup.The script setup block is well-organized, and the use of TypeScript enhances type safety and integration with the project's architecture.
47-141: Template review: Ensure accessibility and semantic HTML.The template uses various components to construct the drawer UI. Ensure that accessibility concerns, such as keyboard navigation and ARIA attributes, are adequately addressed. Also, verify that the HTML is semantic and that the Vue components are used correctly to maintain reactivity.
packages/@core/base/shared/src/utils/inference.test.ts (1)
Line range hint
4-167: Comprehensive test suite for new utility function.The addition of
getFirstNonNullOrUndefinedis well-implemented, and the test cases are thorough, covering various scenarios and data types. The removal of the undefined test case forisObjecthelps focus the test suite on more relevant cases.packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue (1)
Line range hint
7-160: Modal implementation and functionality changes in user dropdown.The transition to using modals for lock and logout functionalities is a significant change. Ensure that these modals are integrated properly and that all functionalities are accessible and user-friendly. The removal of certain shortcut keys and functionalities should be evaluated to ensure it does not negatively impact the user experience.
Verification successful
Modal functionalities are integrated correctly in the user dropdown.
The use of
useVbenModalfor managing lock and logout modals, along with the appropriate use ofopenandclosemethods, indicates that the modal functionalities are well integrated. The functions handling these operations are straightforward and align with the expected behavior, ensuring a user-friendly experience.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for proper integration and accessibility of new modal functionalities. # Test: Search for modal-related properties and methods to ensure they are implemented correctly. rg --type vue -A 5 $'modal|open|close' packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vueLength of output: 136
Script:
#!/bin/bash # Description: Check for proper integration and accessibility of new modal functionalities. # Test: Search for modal-related properties and methods to ensure they are implemented correctly. rg -A 5 $'modal|open|close' packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vueLength of output: 728
.vscode/settings.json (2)
171-171: Updated path for locale files.The path for locale files has been updated to
"playground/src/locales/langs", which should improve the organization of these files.
174-174: New path matching setting added.The new setting
"i18n-ally.pathMatcher": "{locale}.json"specifies the naming convention for locale files, which is a good addition for managing internationalization resources.packages/@core/ui-kit/popup-ui/src/modal/modal.vue (1)
1-231: Well-implemented modal component.The modal component is well-structured and makes good use of Vue's composition API, props, computed properties, and slots. It handles various UI states and behaviors effectively.
packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue (2)
Line range hint
225-420: Successful integration of the new drawer component.The new
Drawercomponent has been integrated successfully, replacing theVbenSheetcomponent. This change should enhance the user interface by providing a more streamlined and modern component for managing preferences.
136-136: Removal of theshortcutKeysGlobalPreferencesmodel.The removal of this model simplifies the preferences management logic, which could make the component easier to maintain and use.
playground/src/views/examples/drawer/shared-data-demo.vue (2)
1-7: Setup and imports are correctly implemented.The TypeScript setup and the imports from Vue and other libraries are appropriately used for the Vue composition API.
25-29: Template implementation is clean and effective.The use of the Drawer component and the dynamic data display are well-implemented using Vue's reactive capabilities.
playground/src/views/examples/drawer/dynamic-demo.vue (2)
1-5: Consistent and correct setup for Vue component.The TypeScript setup and imports are correctly used, consistent with Vue composition API practices.
23-31: Template setup is effective for demonstrating dynamic updates.The use of the Drawer component and the button to trigger dynamic updates is well-implemented and serves as a good example of component interactivity.
packages/@core/base/icons/src/lucide.ts (1)
23-23: New icon exports are correctly added.The icons
Expand,Info, andShrinkare correctly added to the exports. Ensure these icons are consistently used where applicable across the project.Run the following script to check for consistent usage of the new icons:
Also applies to: 30-30, 51-51
packages/@core/ui-kit/shadcn-ui/src/components/index.ts (1)
1-1: Verify the impact of removed exports.The removal of
alert-dialog,sheet, andui/alert-dialogexports may affect modules that depend on these components. Ensure that this change is well-documented and check if other parts of the application require updates.Run the following script to find references to the removed exports:
packages/@core/composables/src/use-priority-value.ts (1)
9-47: Well-implemented utility function.The
usePriorityValuefunction is well-implemented using Vue.js composition API. Consider adding more documentation or examples to help other developers understand how to use this utility effectively.packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue (1)
Line range hint
4-91: Enhancements to the spinner component are well-executed.The renaming to
VbenSpinnerand the addition of aclassproperty enhance the component's flexibility. Ensure that these changes are documented and verify the component's behavior with the new enhancements.Run the following script to verify the component's behavior:
Verification successful
VbenSpinner Component Usage Verified
The
VbenSpinnercomponent is correctly integrated and used in the codebase with its new name and properties. The enhancements appear to be utilized as intended.
- Verified in
content-spinner.vueandiframe-router-view.vue.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the behavior of the VbenSpinner component. # Test: Search for the component usage. Expect: Proper usage of the new name and properties. rg --type vue -A 5 $'VbenSpinner'Length of output: 60
Script:
#!/bin/bash # Description: Verify the behavior of the VbenSpinner component. # Test: Search for the component usage across all files and filter for .vue files. rg 'VbenSpinner' --glob '*.vue' -A 5Length of output: 2384
playground/src/views/examples/drawer/index.vue (3)
11-27: Ensure proper usage of theuseVbenDrawerhook.The hook is used to create drawer components with connected Vue components. It's crucial to ensure that the hook is used correctly to maintain the functionality and readability of the component.
55-90: Assess the template structure for best practices and usability.The template uses the Page component to wrap various drawer components and provides interactive buttons to demonstrate the functionality. Ensure that the descriptions and titles are clear and informative for the best user experience.
2-4: Review imports for correctness and necessity.Ensure that all imported components and hooks are used within the file. This helps in avoiding unnecessary imports which can lead to bloated bundles.
Verification successful
All imports in
index.vueare necessary and used. The verification confirms that each imported component and hook is utilized within the file, adhering to best practices.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that all imports are used in the file. # Test: Search for the usage of imported entities. Expect: At least one usage of each import. rg --type vue -A 5 $'import { Page, useVbenDrawer } from \'@vben/common-ui\'' rg --type vue -A 5 $'import { Button, Card } from \'ant-design-vue\'' rg --type vue -A 5 $'import AutoHeightDemo from \'./auto-height-demo.vue\'' rg --type vue -A 5 $'import BaseDemo from \'./base-demo.vue\'' rg --type vue -A 5 $'import DynamicDemo from \'./dynamic-demo.vue\'' rg --type vue -A 5 $'import SharedDataDemo from \'./shared-data-demo.vue\''Length of output: 855
Script:
#!/bin/bash # Description: Verify that all imports are used in the file by specifying the .vue extension. # Test: Search for the usage of imported entities. Expect: At least one usage of each import. rg --glob '*.vue' -A 5 'import \{ Page, useVbenDrawer \} from '\''@vben/common-ui'\''' rg --glob '*.vue' -A 5 'import \{ Button, Card \} from '\''ant-design-vue'\''' rg --glob '*.vue' -A 5 'import AutoHeightDemo from '\''./auto-height-demo.vue'\''' rg --glob '*.vue' -A 5 'import BaseDemo from '\''./base-demo.vue'\''' rg --glob '*.vue' -A 5 'import DynamicDemo from '\''./dynamic-demo.vue'\''' rg --glob '*.vue' -A 5 'import SharedDataDemo from '\''./shared-data-demo.vue'\'''Length of output: 8338
packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range, codebase verification and nitpick comments (5)
apps/backend-mock/utils/jwt-utils.ts (1)
Line range hint
8-8: Reminder: Replace the secret key.The TODO comment about replacing the secret key should be addressed to ensure security.
Would you like me to help generate a more secure method of managing secret keys or open a GitHub issue to track this task?
packages/@core/base/shared/src/utils/__tests__/letter.test.ts (1)
81-117: Comprehensive test suite forkebabToCamelCase.The tests are well-structured and cover a wide range of scenarios, ensuring that the function handles various edge cases correctly.
Consider adding a test for strings that include numbers or special characters to further enhance coverage.
packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts (1)
34-112: Thorough testing ofModalApifunctionalities.The test cases are well-structured and cover essential functionalities such as opening, closing, and state management. The use of hooks like
onBeforeCloseandonOpenChangeis effectively tested.Consider adding tests for error handling scenarios, such as failures in state updates, to ensure robustness.
packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts (1)
36-112: Comprehensive testing ofDrawerApifunctionalities.The tests cover key functionalities such as opening, closing, and updating state. The use of hooks and state management is well tested, ensuring that the drawer behaves as expected under various scenarios.
To enhance test coverage, consider adding scenarios where network or data fetching errors might affect the drawer's behavior.
packages/@core/base/shared/src/utils/__tests__/inference.test.ts (1)
4-10: Update the import path in the test file.The import path for the utility functions in
inference.test.tsis incorrect. Please update it to reflect the correct location of theinference.tsfile.
- Change the import path to
../utils/inference.Analysis chain
Review updated import paths.
The import paths have been updated, likely due to a restructuring of the module organization. Ensure that the new path accurately points to the intended modules.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the updated import paths are correct. # Test: Check if the file exists at the new path. if [ -f "../inference.ts" ]; then echo "Import path is valid." else echo "Import path is invalid." fiLength of output: 85
Script:
#!/bin/bash # Search for the `inference.ts` file or any file that might contain the relevant utility functions. fd --type f --name 'inference.ts'Length of output: 284
Script:
#!/bin/bash # Corrected search for the `inference.ts` file or any file that might contain the relevant utility functions. fd 'inference.ts'Length of output: 67
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (26)
- apps/backend-mock/utils/jwt-utils.ts (1 hunks)
- internal/node-utils/src/tests/hash.test.ts (1 hunks)
- internal/node-utils/src/tests/path.test.ts (1 hunks)
- packages/@core/base/shared/src/cache/tests/storage-manager.test.ts (1 hunks)
- packages/@core/base/shared/src/color/tests/convert.test.ts (1 hunks)
- packages/@core/base/shared/src/utils/tests/diff.test.ts (1 hunks)
- packages/@core/base/shared/src/utils/tests/dom.test.ts (1 hunks)
- packages/@core/base/shared/src/utils/tests/inference.test.ts (3 hunks)
- packages/@core/base/shared/src/utils/tests/letter.test.ts (2 hunks)
- packages/@core/base/shared/src/utils/tests/tree.test.ts (1 hunks)
- packages/@core/base/shared/src/utils/tests/unique.test.ts (1 hunks)
- packages/@core/base/shared/src/utils/tests/update-css-variables.test.ts (1 hunks)
- packages/@core/base/shared/src/utils/tests/window.test.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/drawer/tests/drawer-api.test.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/tests/modal-api.test.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/modal.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/modal.vue (1 hunks)
- packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue (1 hunks)
- packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue (7 hunks)
- packages/utils/src/helpers/tests/find-menu-by-path.test.ts (1 hunks)
- packages/utils/src/helpers/tests/generate-menus.test.ts (1 hunks)
- packages/utils/src/helpers/tests/generate-routes-frontend.test.ts (1 hunks)
- packages/utils/src/helpers/tests/merge-route-modules.test.ts (1 hunks)
Files skipped from review due to trivial changes (15)
- internal/node-utils/src/tests/hash.test.ts
- internal/node-utils/src/tests/path.test.ts
- packages/@core/base/shared/src/cache/tests/storage-manager.test.ts
- packages/@core/base/shared/src/color/tests/convert.test.ts
- packages/@core/base/shared/src/utils/tests/diff.test.ts
- packages/@core/base/shared/src/utils/tests/dom.test.ts
- packages/@core/base/shared/src/utils/tests/tree.test.ts
- packages/@core/base/shared/src/utils/tests/unique.test.ts
- packages/@core/base/shared/src/utils/tests/update-css-variables.test.ts
- packages/@core/base/shared/src/utils/tests/window.test.ts
- packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
- packages/utils/src/helpers/tests/find-menu-by-path.test.ts
- packages/utils/src/helpers/tests/generate-menus.test.ts
- packages/utils/src/helpers/tests/generate-routes-frontend.test.ts
- packages/utils/src/helpers/tests/merge-route-modules.test.ts
Files skipped from review as they are similar to previous changes (4)
- packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
- packages/@core/ui-kit/popup-ui/src/modal/modal.ts
- packages/@core/ui-kit/popup-ui/src/modal/modal.vue
- packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
Additional comments not posted (6)
apps/backend-mock/utils/jwt-utils.ts (1)
17-17: Approved change to token expiration.The extension of the access token's expiration from 1 day to 7 days is noted. While this may improve user experience by reducing the frequency of re-authentications, it's crucial to ensure it aligns with security best practices.
Consider reviewing this change with your security team to ensure it does not introduce potential vulnerabilities.
packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts (1)
1-123: Comprehensive API for Drawer management.The
DrawerApiclass provides a robust set of functionalities for managing the drawer's state and handling user interactions.Verify the integration of this API with the Drawer component to ensure seamless functionality and user experience.
packages/@core/base/shared/src/utils/__tests__/letter.test.ts (1)
5-8: Verify the import path forkebabToCamelCase.Ensure that the import path '../letter' correctly points to the location of the
kebabToCamelCasefunction.Verification successful
Import Path Verified: The import path for
kebabToCamelCaseis correct.The import path '../letter' in the test file accurately points to the
letter.tsfile. No changes are needed.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the import path for `kebabToCamelCase`. # Test: Search for the file `letter.ts` to confirm the relative path. fd --type f --name 'letter.ts'Length of output: 281
Script:
#!/bin/bash # Description: Verify the import path for `kebabToCamelCase`. # Test: Correctly search for the file `letter.ts` to confirm the relative path. fd 'letter.ts'Length of output: 61
packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts (1)
6-32: Review the mock setup for the shared store.The mock setup for the shared store is comprehensive, simulating various functionalities like state management and batch updates. Ensure that the
Storeclass and its methods are correctly implemented in the actual application to match this mock.packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts (1)
7-33: Review the mock setup for the drawer store.The mock setup for the drawer store is similar to the modal's, providing a good simulation of the drawer's environment. Verify that the actual implementation of the
Storeclass matches this mock to ensure consistency.packages/@core/base/shared/src/utils/__tests__/inference.test.ts (1)
116-167: Comprehensive review of the newgetFirstNonNullOrUndefinedfunction and its tests.The new function
getFirstNonNullOrUndefinedand its tests have been added to enhance the utility library. The tests cover various scenarios including arrays of numbers and strings, handling mixed types, and cases where all inputs are null or undefined.
- Correctness: The function appears to be implemented correctly based on the tests provided.
- Coverage: The tests seem to cover a broad range of inputs and scenarios, which is good for ensuring the function behaves as expected across different use cases.
- Performance: The function's performance is not directly addressed, but given its straightforward logic, performance issues are unlikely unless used with very large data sets.
- Readability: The tests are well-organized and easy to understand, which is beneficial for future maintenance.
Overall, the addition of this function and its tests seems to be a valuable contribution to the utility library.
| import type { DrawerApi } from './drawer-api'; | ||
|
|
||
| import type { Component, Ref } from 'vue'; | ||
|
|
||
| export interface DrawerProps { | ||
| /** | ||
| * 取消按钮文字 | ||
| */ | ||
| cancelText?: string; | ||
|
|
||
| /** | ||
| * 是否显示右上角的关闭按钮 | ||
| * @default true | ||
| */ | ||
| closable?: boolean; | ||
| /** | ||
| * 确定按钮 loading | ||
| * @default false | ||
| */ | ||
| confirmLoading?: boolean; | ||
| /** | ||
| * 确定按钮文字 | ||
| */ | ||
| confirmText?: string; | ||
| /** | ||
| * 弹窗描述 | ||
| */ | ||
| description?: string; | ||
| /** | ||
| * 是否显示底部 | ||
| * @default true | ||
| */ | ||
| footer?: boolean; | ||
| /** | ||
| * 弹窗是否显示 | ||
| * @default false | ||
| */ | ||
| loading?: boolean; | ||
| /** | ||
| * 是否显示遮罩 | ||
| * @default true | ||
| */ | ||
| modal?: boolean; | ||
| /** | ||
| * 弹窗标题 | ||
| */ | ||
| title?: string; | ||
| /** | ||
| * 弹窗标题提示 | ||
| */ | ||
| titleTooltip?: string; | ||
| } | ||
|
|
||
| export interface DrawerState extends DrawerProps { | ||
| /** 弹窗打开状态 */ | ||
| isOpen?: boolean; | ||
| /** | ||
| * 共享数据 | ||
| */ | ||
| sharedData?: Record<string, any>; | ||
| } | ||
|
|
||
| export type ExtendedDrawerApi = { | ||
| useStore: <T = NoInfer<DrawerState>>( | ||
| selector?: (state: NoInfer<DrawerState>) => T, | ||
| ) => Readonly<Ref<T>>; | ||
| } & DrawerApi; | ||
|
|
||
| export interface DrawerApiOptions extends DrawerState { | ||
| /** | ||
| * 独立的弹窗组件 | ||
| */ | ||
| connectedComponent?: Component; | ||
| /** | ||
| * 关闭前的回调，返回 false 可以阻止关闭 | ||
| * @returns | ||
| */ | ||
| onBeforeClose?: () => void; | ||
| /** | ||
| * 点击取消按钮的回调 | ||
| */ | ||
| onCancel?: () => void; | ||
| /** | ||
| * 点击确定按钮的回调 | ||
| */ | ||
| onConfirm?: () => void; | ||
| /** | ||
| * 弹窗状态变化回调 | ||
| * @param isOpen | ||
| * @returns | ||
| */ | ||
| onOpenChange?: (isOpen: boolean) => void; | ||
| } |
There was a problem hiding this comment.
Well-structured new Drawer component.
The new Drawer component is well-documented and structured, providing clear options for customization and event handling.
Ensure that unit tests cover the functionality of all properties and callbacks to maintain robustness and reliability.
Would you like assistance in setting up the unit tests for this component?
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
BaseDrawer,AutoHeightDrawer,DynamicDrawer,SharedDataDrawer) with interactive functionalities.Expand,Info, andShrinkicons in the icon library.ModalandDrawercomponents from the new@vben-core/popup-uilibrary for modals and preferences.Bug Fixes
Documentation