Fix/picker style (#567)

* fix: update time-picker style

* fix: fix date-time-picker style

* fix: fix time picker popper arrow

* chore: update

* chore: update

packages/theme-chalk/src/date-picker/date-picker.scss

@@ -94,4 +94,8 @@
     line-height: 30px;
     margin-left: 10px;
   }
+
+  .el-time-panel {
+    position: absolute;
+  }
 }

packages/theme-chalk/src/date-picker/date-range-picker.scss

@@ -97,5 +97,8 @@
       z-index: 1;
       background: $--color-white;
     }
+    .el-time-panel {
+      position: absolute;
+    }
   }
 }

packages/theme-chalk/src/date-picker/picker-panel.scss

@@ -3,12 +3,16 @@
 @include b(picker-panel) {
   position: relative;
   color: $--color-text-regular;
-  border: 1px solid $--datepicker-border-color;
-  box-shadow: $--box-shadow-light;
   background: $--color-white;
   border-radius: $--border-radius-base;
   line-height: 30px;
-  margin: 5px 0;
+
+  .el-time-panel {
+    margin: 5px 0;
+    border: solid 1px $--datepicker-border-color;
+    background-color: $--color-white;
+    box-shadow: $--box-shadow-light;
+  }
 
   @include e((body, body-wrapper)) {
     &::after {

packages/theme-chalk/src/date-picker/picker.scss

@@ -2,6 +2,21 @@
 @import "../common/var";
 @import "../common/transition";
 
+@include b(picker) {
+  @include e(popper) {
+    &[role="tooltip"] {
+      padding: 0px;
+      box-shadow: $--box-shadow-light;
+    }
+    &.is-light[role="tooltip"] {
+      border: solid 1px $--datepicker-border-color;
+      .el-popper__arrow::before {
+        border: solid 1px $--datepicker-border-color;
+      }
+    }
+  }
+}
+
 @include b(date-editor) {
   position: relative;
   display: inline-block;

packages/theme-chalk/src/date-picker/time-picker.scss

@@ -1,12 +1,8 @@
 @import "../common/var";
 
 @include b(time-panel) {
-  margin: 5px 0;
-  border: solid 1px $--datepicker-border-color;
-  background-color: $--color-white;
-  box-shadow: $--box-shadow-light;
   border-radius: 2px;
-  position: absolute;
+  position: relative;
   width: 180px;
   left: 0;
   z-index: $--index-top;

packages/theme-chalk/src/date-picker/time-range-picker.scss

@@ -8,6 +8,7 @@
     position: relative;
     text-align: center;
     padding: 10px;
+    z-index: 1;
   }
 
   @include e(cell) {

packages/theme-chalk/src/popper.scss

@@ -32,7 +32,7 @@
     }
   }
 
-  @include m(pure) {
+  @include when(pure) {
     padding: 0;
     border: none;
 

packages/time-picker/src/common/picker.vue

@@ -5,10 +5,10 @@
   <el-popper
     ref="popper"
     v-model:visible="pickerVisible"
-    pure
     manual-mode
     effect="light"
     trigger="click"
+    popper-class="el-picker__popper"
   >
     <template #trigger>
       <el-input

packages/time-picker/src/time-picker-com/panel-time-pick.vue

@@ -70,10 +70,6 @@ export default defineComponent({
     parsedValue: {
       type: [Object, String] as PropType<string | Dayjs>,
     },
-    arrowControl: {
-      type: Boolean,
-      default: false,
-    },
     format: {
       type: String,
       default: '',
@@ -197,7 +193,7 @@ export default defineComponent({
       timePickeOptions[e[0]] = e[1]
     }
     const pickerBase = inject('EP_PICKER_BASE') as any
-    const { disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props
+    const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props
     const {
       getAvaliableHours,
       getAvaliableMinutes,
@@ -205,6 +201,7 @@ export default defineComponent({
     } = getAvaliableArrs(disabledHours, disabledMinutes, disabledSeconds)
 
     return {
+      arrowControl,
       onSetOption,
       t,
       handleConfirm,

packages/time-picker/src/time-picker-com/panel-time-range.vue

@@ -104,10 +104,6 @@ export default defineComponent({
       type: [Boolean],
       default: false,
     },
-    arrowControl: {
-      type: [Boolean],
-      default: false,
-    },
     parsedValue: {
       type: [Array, String] as PropType<string | Array<Dayjs>>,
     },
@@ -319,9 +315,10 @@ export default defineComponent({
     }
 
     const pickerBase = inject('EP_PICKER_BASE') as any
-    const { disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props
+    const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props
 
     return {
+      arrowControl,
       onSetOption,
       setMaxSelectionRange,
       setMinSelectionRange,