fix: dialog and drawer footer gap in small screen
#5025
Conversation
|
WalkthroughThe changes in this pull request involve modifications to the class bindings in the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
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/shadcn-ui/src/ui/dialog/DialogFooter.vueOops! Something went wrong! :( ESLint: 9.16.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: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogFooter.vue(1 hunks)packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetFooter.vue(1 hunks)
🔇 Additional comments (1)
packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetFooter.vue (1)
10-10: Consider extracting shared footer styles into a base component
This component has identical styling to DialogFooter.vue and faces the same potential issues with removing responsive classes.
Consider creating a base footer component to reduce code duplication:
// New file: BaseFooter.vue
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+const props = defineProps<{ class?: any }>();
+</script>
+
+<template>
+ <div :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
+ <slot></slot>
+ </div>
+</template>Then both DialogFooter and SheetFooter could extend this base component:
+import BaseFooter from './BaseFooter.vue';
+
+<template>
+ <BaseFooter :class="props.class">
+ <slot></slot>
+ </BaseFooter>
+</template>The same concerns about removing responsive classes apply here as mentioned in the DialogFooter review.
Description
修复
Dialog和Drawer的底部按钮在小屏幕下没有间距的问题。fixed #5022Type 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