feat: add placement for Drawer
#4958
Conversation
mynetfan
requested review from
anncwb,
vince292007 and
a team
as code owners
|
WalkthroughThe pull request introduces a new Changes
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.tsOops! Something went wrong! :( ESLint: 9.15.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@vben/eslint-config/dist/index.mjs' imported from /eslint.config.mjs 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: 2
🧹 Outside diff range and nitpick comments (8)
packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts (1)
78-82: Consider enhancing the property documentation.While the documentation includes the default value, it would be helpful to add more details about:
- The purpose of this property
- The effect of each placement value
- Any layout implications
/** - * 抽屉位置 + * Controls the placement direction of the drawer + * - 'left': Drawer slides in from the left edge + * - 'right': Drawer slides in from the right edge + * - 'top': Drawer slides in from the top edge + * - 'bottom': Drawer slides in from the bottom edge * @default right */packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts (1)
44-44: Consider adding JSDoc for the placement property.To improve code documentation and IDE support, consider adding a JSDoc comment explaining the available placement options and their effects.
+ /** Position of the drawer. Can be 'left', 'right', 'top', or 'bottom'. */ placement: 'right',playground/src/views/examples/drawer/index.vue (2)
16-16: Remove commented codeThe commented placement configuration appears to be debugging code. It should be removed to maintain code cleanliness.
- // placement: 'left',
86-95: Consider accessibility and DRY improvementsThe buttons implementation is functionally correct but could be enhanced:
- Add aria-labels for better accessibility
- Consider using a more DRY approach for button styling
- <Button type="primary" @click="openBaseDrawer('right')">右侧打开</Button> - <Button class="ml-2" type="primary" @click="openBaseDrawer('bottom')"> + <Button + type="primary" + aria-label="Open drawer from right" + @click="openBaseDrawer('right')" + > + 右侧打开 + </Button> + <Button + class="ml-2" + type="primary" + aria-label="Open drawer from bottom" + @click="openBaseDrawer('bottom')" + >Consider creating a reusable component for these buttons to reduce repetition:
<script setup lang="ts"> const props = defineProps<{ placement: DrawerPlacement; label: string; }>(); </script> <template> <Button class="ml-2" type="primary" :aria-label="`Open drawer from ${placement}`" @click="openBaseDrawer(placement)" > {{ label }} </Button> </template>docs/src/components/common-ui/vben-drawer.md (3)
91-91: Documentation forplacementproperty needs enhancement.While the basic information is provided, consider enhancing the documentation to:
- Add a description in Chinese to maintain consistency with the bilingual format
- Include example usage for each placement value
- Clarify the visual behavior for each placement option
Consider updating the line to:
-| placement | 抽屉弹出位置 | `'left'\|'right'\|'top'\|'bottom'` | `right` | +| placement | 抽屉弹出位置 (控制抽屉弹出方向) | `'left'\|'right'\|'top'\|'bottom'` | `right` |Also, consider adding a usage example section before the API documentation:
## 自定义弹出方向 通过 `placement` 属性可以控制抽屉的弹出方向，支持 `left`、`right`、`top`、`bottom` 四个方向。 <DemoPreview dir="demos/vben-drawer/placement" />
Line range hint
1-24: Consider adding important sections to the documentation.To ensure comprehensive documentation, consider adding the following sections:
- Testing considerations for different placement values
- Browser compatibility notes
- Examples of common use cases for each placement direction
Add these sections before the API documentation:
## 浏览器兼容性 该组件的 `placement` 属性在所有现代浏览器中都能正常工作。 ## 测试建议 在使用不同的 `placement` 值时，请确保： - 检查抽屉内容在不同方向上的正确渲染 - 验证动画效果的正确性 - 测试响应式布局下的表现 ## 常见用例 - `left`: 适用于导航菜单 - `right`: 适用于详情面板 - `top`: 适用于通知或预览 - `bottom`: 适用于移动端的操作面板
Line range hint
3-3: Add version and feature information.Consider adding version information and feature history to help users understand when this capability was introduced.
Add after the title:
> 新功能: `placement` 属性从 v2.x.x 版本开始支持，允许自定义抽屉的弹出方向。该功能基于 issue #4952 的需求开发。packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue (1)
123-124: Consider adding placement-specific transitionsThe width and height handling for different placements is well implemented. However, consider adding specific transitions for each placement to enhance the user experience.
:class=" cn('flex w-[520px] flex-col', drawerClass, { '!w-full': isMobile || placement === 'bottom' || placement === 'top', - 'max-h-[100vh]': placement === 'bottom' || placement === 'top', + 'max-h-[100vh] transition-[max-height]': placement === 'bottom' || placement === 'top', + 'transition-[width]': placement === 'left' || placement === 'right', }) "
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
docs/src/components/common-ui/vben-drawer.md(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(2 hunks)packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue(2 hunks)playground/src/views/examples/drawer/index.vue(4 hunks)
🔇 Additional comments (6)
packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts (1)
7-7: LGTM! Well-defined type for drawer placement.
The DrawerPlacement type is well-defined with comprehensive values covering all possible directions.
packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts (1)
44-44: LGTM! Verify type definition for placement.
The addition of the placement property with default value 'right' looks good and aligns with the PR objectives.
Let's verify the type definition exists:
✅ Verification successful
Type definition for placement is correctly defined
The DrawerPlacement type is properly defined in drawer.ts with all expected values ('bottom', 'left', 'right', 'top'), which aligns perfectly with the default value 'right' used in drawer-api.ts.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the DrawerPlacement type definition
# Expected: Find the type definition that should include 'left', 'right', 'top', 'bottom'
ast-grep --pattern 'type DrawerPlacement = $_'
Length of output: 169
playground/src/views/examples/drawer/index.vue (2)
2-2: LGTM: Type import is correctly added
The DrawerPlacement type import is properly added and used consistently throughout the code.
35-37: LGTM: Function implementation is correct
The openBaseDrawer function is well-implemented with:
- Proper type safety using DrawerPlacement
- Sensible default value
- Correct state management sequence
packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue (2)
65-65: LGTM: Placement property correctly integrated
The placement property is properly added to the destructured values from usePriorityValues, aligning with the PR objectives.
129-129: Validate placement values
Add runtime validation for the placement prop to ensure only valid values are used.
Description
为
Drawer新增placement属性，用于控制抽屉的弹出方向。close: #4952Type 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
placementproperty for the Vben Drawer component, allowing users to specify its position as 'left', 'right', 'top', or 'bottom'.Documentation
placementproperty and its usage, including parameter handling and state management guidance.