-
+
{{ title }}
@@ -52,11 +55,11 @@ const dialogKls = computed(() => [
ns.is('draggable', props.draggable),
ns.is('align-center', props.alignCenter),
{ [ns.m('center')]: props.center },
- props.customClass,
])
const composedDialogRef = composeRefs(focusTrapRef, dialogRef)
const draggable = computed(() => props.draggable)
-useDraggable(dialogRef, headerRef, draggable)
+const overflow = computed(() => props.overflow)
+useDraggable(dialogRef, headerRef, draggable, overflow)
diff --git a/packages/components/dialog/src/dialog.vue b/packages/components/dialog/src/dialog.vue
index 4ff4a08eb9567..4d1434bf510a7 100644
--- a/packages/components/dialog/src/dialog.vue
+++ b/packages/components/dialog/src/dialog.vue
@@ -41,11 +41,11 @@
v-if="rendered"
ref="dialogContentRef"
v-bind="$attrs"
- :custom-class="customClass"
:center="center"
:align-center="alignCenter"
:close-icon="closeIcon"
:draggable="draggable"
+ :overflow="overflow"
:fullscreen="fullscreen"
:show-close="showClose"
:title="title"
@@ -104,18 +104,6 @@ useDeprecated(
computed(() => !!slots.title)
)
-useDeprecated(
- {
- scope: 'el-dialog',
- from: 'custom-class',
- replacement: 'class',
- version: '2.3.0',
- ref: 'https://element-plus.org/en-US/component/dialog.html#attributes',
- type: 'Attribute',
- },
- computed(() => !!props.customClass)
-)
-
const ns = useNamespace('dialog')
const dialogRef = ref()
const headerRef = ref()
diff --git a/packages/components/drawer/__tests__/drawer.test.ts b/packages/components/drawer/__tests__/drawer.test.ts
index 6b52168fcc980..e092f76930a0b 100644
--- a/packages/components/drawer/__tests__/drawer.test.ts
+++ b/packages/components/drawer/__tests__/drawer.test.ts
@@ -229,23 +229,6 @@ describe('Drawer', () => {
expect(wrapper.find('.el-drawer__close-btn').exists()).toBe(false)
})
- test('should have custom classes when custom classes were given', async () => {
- const classes = 'some-custom-class'
- const wrapper = _mount(
- `
-
- ${content}
-
- `,
- () => ({
- title,
- visible: true,
- })
- )
-
- expect(wrapper.find(`.${classes}`).exists()).toBe(true)
- })
-
test('drawer header should have slot props', async () => {
const wrapper = _mount(
`
diff --git a/packages/components/drawer/src/drawer.vue b/packages/components/drawer/src/drawer.vue
index a513d2879599a..c3a92e3b11e89 100644
--- a/packages/components/drawer/src/drawer.vue
+++ b/packages/components/drawer/src/drawer.vue
@@ -27,7 +27,7 @@
:aria-labelledby="!title ? titleId : undefined"
:aria-describedby="bodyId"
v-bind="$attrs"
- :class="[ns.b(), direction, visible && 'open', customClass]"
+ :class="[ns.b(), direction, visible && 'open']"
:style="
isHorizontal ? 'width: ' + drawerSize : 'height: ' + drawerSize
"
@@ -112,17 +112,6 @@ useDeprecated(
},
computed(() => !!slots.title)
)
-useDeprecated(
- {
- scope: 'el-drawer',
- from: 'custom-class',
- replacement: 'class',
- version: '2.3.0',
- ref: 'https://element-plus.org/en-US/component/drawer.html#attributes',
- type: 'Attribute',
- },
- computed(() => !!props.customClass)
-)
const drawerRef = ref()
const focusStartRef = ref()
diff --git a/packages/hooks/use-draggable/index.ts b/packages/hooks/use-draggable/index.ts
index 3aafff8a1d4d5..33a9a40aa9dc8 100644
--- a/packages/hooks/use-draggable/index.ts
+++ b/packages/hooks/use-draggable/index.ts
@@ -5,7 +5,8 @@ import type { ComputedRef, Ref } from 'vue'
export const useDraggable = (
targetRef: Ref,
dragRef: Ref,
- draggable: ComputedRef
+ draggable: ComputedRef,
+ overflow?: ComputedRef
) => {
let transform = {
offsetX: 0,
@@ -32,14 +33,13 @@ export const useDraggable = (
const maxTop = clientHeight - targetTop - targetHeight + offsetY
const onMousemove = (e: MouseEvent) => {
- const moveX = Math.min(
- Math.max(offsetX + e.clientX - downX, minLeft),
- maxLeft
- )
- const moveY = Math.min(
- Math.max(offsetY + e.clientY - downY, minTop),
- maxTop
- )
+ let moveX = offsetX + e.clientX - downX
+ let moveY = offsetY + e.clientY - downY
+
+ if (!overflow?.value) {
+ moveX = Math.min(Math.max(moveX, minLeft), maxLeft)
+ moveY = Math.min(Math.max(moveY, minTop), maxTop)
+ }
transform = {
offsetX: moveX,
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index ae72d73c8e9de..260beb9cbd40e 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -786,7 +786,7 @@ $dialog: map.merge(
'title-font-size': getCssVar('font-size-large'),
'content-font-size': 14px,
'font-line-height': getCssVar('font-line-height-primary'),
- 'padding-primary': 20px,
+ 'padding-primary': 16px,
'border-radius': getCssVar('border-radius-small'),
),
$dialog
diff --git a/packages/theme-chalk/src/dialog.scss b/packages/theme-chalk/src/dialog.scss
index f0f361706b168..e2d1b535b9081 100644
--- a/packages/theme-chalk/src/dialog.scss
+++ b/packages/theme-chalk/src/dialog.scss
@@ -15,6 +15,7 @@
border-radius: getCssVar('dialog', 'border-radius');
box-shadow: getCssVar('dialog', 'box-shadow');
box-sizing: border-box;
+ padding: getCssVar('dialog', 'padding-primary');
width: var(#{getCssVarName('dialog-width')}, 50%);
&:focus {
@@ -52,18 +53,23 @@
}
@include e(header) {
- padding: getCssVar('dialog', 'padding-primary');
- padding-bottom: 10px;
- margin-right: 16px;
+ padding-bottom: getCssVar('dialog', 'padding-primary');
+
+ &.show-close {
+ padding-right: calc(getCssVar('dialog', 'padding-primary') + var(
+ #{getCssVarName('message-close-size')},
+ map.get($message, 'close-size')
+ ));
+ }
}
@include e(headerbtn) {
position: absolute;
- top: 6px;
+ top: 0;
right: 0;
padding: 0;
- width: 54px;
- height: 54px;
+ width: 48px;
+ height: 48px;
background: transparent;
border: none;
outline: none;
@@ -93,15 +99,12 @@
}
@include e(body) {
- padding: calc(#{getCssVar('dialog-padding-primary')} + 10px)
- getCssVar('dialog-padding-primary');
color: getCssVar('text-color', 'regular');
font-size: getCssVar('dialog-content-font-size');
}
@include e(footer) {
- padding: getCssVar('dialog-padding-primary');
- padding-top: 10px;
+ padding-top: getCssVar('dialog', 'padding-primary');
text-align: right;
box-sizing: border-box;
}
@@ -112,7 +115,6 @@
@include e(body) {
text-align: initial;
- padding: 25px calc(#{getCssVar('dialog-padding-primary')} + 5px) 30px;
}
@include e(footer) {