Repository: element-plus/element-plus
File: packages/components/dialog/src/dialog-content.vue (Vue)

Code before:
    <div :id="bodyId" :class="[ns.e('body'), bodyClass]">
      <slot />
    </div>
    <footer v-if="$slots.footer" :class="[ns.e('footer'), footerClass]">
      <slot name="footer" />
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue'
import { ElIcon } from '@element-plus/components/icon'
import { FOCUS_TRAP_INJECTION_KEY } from '@element-plus/components/focus-trap'
import { useDraggable, useLocale } from '@element-plus/hooks'
import { CloseComponents, composeRefs } from '@element-plus/utils'
import { dialogInjectionKey } from './constants'
import { dialogContentEmits } from './dialog-content'

import type { DialogContentProps } from './dialog-content'

const { t } = useLocale()
const { Close } = CloseComponents

defineOptions({ name: 'ElDialogContent' })
const props = withDefaults(defineProps<DialogContentProps>(), {
  showClose: true,
  title: '',
  ariaLevel: '2',
  center: false,
  fullscreen: false,
})
defineEmits(dialogContentEmits)

const { dialogRef, headerRef, bodyId, ns, style } = inject(dialogInjectionKey)!
const { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY)!

const composedDialogRef = composeRefs(focusTrapRef, dialogRef)

const draggable = computed(() => !!props.draggable)
const overflow = computed(() => !!props.overflow)
const { resetPosition, updatePosition, isDragging } = useDraggable(
  dialogRef,
  headerRef,
  draggable,
  overflow
)

const dialogKls = computed(() => [
  ns.b(),
  ns.is('fullscreen', props.fullscreen),
  ns.is('draggable', draggable.value),

Review comment (bug):
```suggestion
  alignCenter: undefined,
  draggable: undefined,
  overflow: undefined,
  showClose: true,
```
`center: false,` and `fullscreen: false,` should be removed.

Code after:
    <div :id="bodyId" :class="[ns.e('body'), bodyClass]">
      <slot />
    </div>
    <footer v-if="$slots.footer" :class="[ns.e('footer'), footerClass]">
      <slot name="footer" />
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue'
import { ElIcon } from '@element-plus/components/icon'
import { FOCUS_TRAP_INJECTION_KEY } from '@element-plus/components/focus-trap'
import { useDraggable, useLocale } from '@element-plus/hooks'
import { CloseComponents, composeRefs } from '@element-plus/utils'
import { dialogInjectionKey } from './constants'
import {
  dialogContentEmits,
  dialogContentPropsDefaults,
} from './dialog-content'

import type { DialogContentProps } from './dialog-content'

const { t } = useLocale()
const { Close } = CloseComponents

defineOptions({ name: 'ElDialogContent' })
const props = withDefaults(
  defineProps<DialogContentProps>(),
  dialogContentPropsDefaults
)
defineEmits(dialogContentEmits)

const { dialogRef, headerRef, bodyId, ns, style } = inject(dialogInjectionKey)!
const { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY)!

const composedDialogRef = composeRefs(focusTrapRef, dialogRef)

const draggable = computed(() => !!props.draggable)
const overflow = computed(() => !!props.overflow)
const { resetPosition, updatePosition, isDragging } = useDraggable(
  dialogRef,
  headerRef,
  draggable,
  overflow
)

const dialogKls = computed(() => [
  ns.b(),
  ns.is('fullscreen', props.fullscreen),
  ns.is('draggable', draggable.value),