From 05c17b9b5290134cae8c0319ab39b2bf9a50ebe4 Mon Sep 17 00:00:00 2001
From: jeremywu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Mon, 10 May 2021 22:52:23 +0800
Subject: [PATCH] fix(time-picker): fix/date-time-picker-positioning-issue
(#1980)
* fix(time-picker): fix/date-time-picker-positioning-issue
- Make time-picker accepting popper-options injection
* update the providing strategy
---
.../time-picker/__tests__/time-picker.spec.ts | 27 +++++++++++++++++++
packages/time-picker/src/common/picker.vue | 5 ++++
packages/time-picker/src/common/props.ts | 7 ++++-
packages/time-picker/src/time-picker.ts | 4 ++-
packages/utils/constants.ts | 1 -
website/docs/es/drawer.md | 1 +
website/docs/fr-FR/drawer.md | 1 +
website/docs/jp/drawer.md | 1 +
website/docs/zh-CN/drawer.md | 2 --
9 files changed, 44 insertions(+), 5 deletions(-)
diff --git a/packages/time-picker/__tests__/time-picker.spec.ts b/packages/time-picker/__tests__/time-picker.spec.ts
index 7f4788ab2b..d2216fa0ba 100644
--- a/packages/time-picker/__tests__/time-picker.spec.ts
+++ b/packages/time-picker/__tests__/time-picker.spec.ts
@@ -1,6 +1,7 @@
import { mount } from '@vue/test-utils'
import { nextTick } from 'vue'
import TimePicker from '../src/time-picker'
+import Picker from '../src/common/picker.vue'
import { triggerEvent } from '@element-plus/test-utils'
import dayjs from 'dayjs'
@@ -427,5 +428,31 @@ describe('TimePicker(range)', () => {
expect(dayjs(initValue).diff(addOneHour, 'minute')).toEqual(-60)
expect(dayjs(initValue).diff(addOneHourOneMinute, 'minute')).toEqual(-61)
})
+
+ it('should be able to inherit options from parent injection', async () => {
+ const ElPopperOptions = {
+ strategy: 'fixed',
+ }
+ const wrapper = _mount(
+ ``, () => ({ value: new Date(2016, 9, 10, 18, 40), options: ElPopperOptions }),
+ {
+ provide() {
+ return {
+ ElPopperOptions,
+ }
+ },
+ },
+ )
+
+ await nextTick()
+
+ expect((
+ (wrapper.findComponent(Picker).vm as any).elPopperOptions),
+ ).toEqual(ElPopperOptions)
+ })
})
diff --git a/packages/time-picker/src/common/picker.vue b/packages/time-picker/src/common/picker.vue
index 9a6d0c1996..db928c6dda 100644
--- a/packages/time-picker/src/common/picker.vue
+++ b/packages/time-picker/src/common/picker.vue
@@ -8,6 +8,7 @@
trigger="click"
v-bind="$attrs"
:popper-class="`el-picker__popper ${popperClass}`"
+ :popper-options="elPopperOptions"
transition="el-zoom-in-top"
:gpu-acceleration="false"
:stop-popper-mouse-event="false"
@@ -192,6 +193,7 @@ export default defineComponent({
const elForm = inject(elFormKey, {} as ElFormContext)
const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
+ const elPopperOptions = inject('ElPopperOptions', {})
const refPopper = ref(null)
const pickerVisible = ref(false)
@@ -496,6 +498,9 @@ export default defineComponent({
props,
})
return {
+ // injected popper options
+ elPopperOptions,
+
isDatesPicker,
handleEndChange,
handleStartChange,
diff --git a/packages/time-picker/src/common/props.ts b/packages/time-picker/src/common/props.ts
index 676d7503cd..d0120e6abd 100644
--- a/packages/time-picker/src/common/props.ts
+++ b/packages/time-picker/src/common/props.ts
@@ -1,5 +1,6 @@
-import type { PropType } from 'vue'
import { isValidComponentSize } from '@element-plus/utils/validators'
+import type { PropType } from 'vue'
+import type { Options } from '@popperjs/core'
export const defaultProps = {
name: {
type: [Array, String],
@@ -48,6 +49,10 @@ export const defaultProps = {
type: String,
default: '',
},
+ popperOptions: {
+ type: Object as PropType,
+ default: () => ({}),
+ },
modelValue: {
type: [Date, Array, String] as PropType,
default: '',
diff --git a/packages/time-picker/src/time-picker.ts b/packages/time-picker/src/time-picker.ts
index d782046aef..f7eb19a623 100644
--- a/packages/time-picker/src/time-picker.ts
+++ b/packages/time-picker/src/time-picker.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h, ref } from 'vue'
+import { defineComponent, h, ref, provide } from 'vue'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import { DEFAULT_FORMATS_TIME } from './common/constant'
@@ -29,6 +29,8 @@ export default defineComponent({
commonPicker.value?.handleFocus()
},
}
+
+ provide('ElPopperOptions', props.popperOptions)
ctx.expose(refProps)
return () => h(Picker, {
format: DEFAULT_FORMATS_TIME,
diff --git a/packages/utils/constants.ts b/packages/utils/constants.ts
index 1be7af99c3..37e97ec687 100644
--- a/packages/utils/constants.ts
+++ b/packages/utils/constants.ts
@@ -8,4 +8,3 @@ export const VALIDATE_STATE_MAP = {
success: 'el-icon-circle-check',
error: 'el-icon-circle-close',
}
-
diff --git a/website/docs/es/drawer.md b/website/docs/es/drawer.md
index 67e013401c..3035105f99 100644
--- a/website/docs/es/drawer.md
+++ b/website/docs/es/drawer.md
@@ -262,6 +262,7 @@ El Drawer proporciona una API llamada "destroyOnClose", que es una variable de b
:::
+
### Atributos de Drawer
| Parámetros | Descripción | Tipo | Valores aceptados | Por defecto |
diff --git a/website/docs/fr-FR/drawer.md b/website/docs/fr-FR/drawer.md
index 97945bdeb9..a87a1e0ca5 100644
--- a/website/docs/fr-FR/drawer.md
+++ b/website/docs/fr-FR/drawer.md
@@ -261,6 +261,7 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
:::
+
### Drawer Attributes
| Parameter| Description | Type | Acceptable Values | Defaults |
diff --git a/website/docs/jp/drawer.md b/website/docs/jp/drawer.md
index a633ccf788..baf8764453 100644
--- a/website/docs/jp/drawer.md
+++ b/website/docs/jp/drawer.md
@@ -262,6 +262,7 @@ Drawerは `destroyOnClose` というAPIを提供しています。これはフ
:::
+
### Drawer属性
| Parameter| Description | Type | Acceptable Values | Defaults |
diff --git a/website/docs/zh-CN/drawer.md b/website/docs/zh-CN/drawer.md
index 53fa0ff48f..e2dc361e0b 100644
--- a/website/docs/zh-CN/drawer.md
+++ b/website/docs/zh-CN/drawer.md
@@ -261,8 +261,6 @@ Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默
Drawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 **true** 用来保证初始状态的一致性
-:::
-
### Drawer Attributes
Drawer has almost identical attributes as Dialog.