vxe-pc-ui 3.4.6 → 3.4.7

package/packages/date-picker/src/date-picker.ts

@@ -418,30 +418,35 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       return years
     },
-    computeSelectDatePanelLabel () {
+    computeSelectDatePanelObj () {
       const $xeDatePicker = (this as any)
       const reactData = $xeDatePicker.reactData
 
       const isDatePickerType = $xeDatePicker.computeIsDatePickerType
+      let y = ''
+      let m = ''
       if (isDatePickerType) {
         const { datePanelType, selectMonth } = reactData
-        const yearList = $xeDatePicker.computeYearList as VxeDatePickerDefines.DateYearItem[]
+        const yearList = $xeDatePicker.computeYearList
         let year = ''
         let month
         if (selectMonth) {
           year = selectMonth.getFullYear()
           month = selectMonth.getMonth() + 1
         }
-        if (datePanelType === 'quarter') {
-          return getI18n('vxe.input.date.quarterLabel', [year])
-        } else if (datePanelType === 'month') {
-          return getI18n('vxe.input.date.monthLabel', [year])
+        if (datePanelType === 'quarter' || datePanelType === 'month') {
+          y = `${year}`
         } else if (datePanelType === 'year') {
-          return yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : ''
+          y = yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : ''
+        } else {
+          y = `${year}`
+          m = month ? getI18n(`vxe.input.date.m${month}`) : '-'
         }
-        return getI18n('vxe.input.date.dayLabel', [year, month ? getI18n(`vxe.input.date.m${month}`) : '-'])
       }
-      return ''
+      return {
+        y,
+        m
+      }
     },
     computeFirstDayOfWeek () {
       const $xeDatePicker = this
@@ -1173,7 +1178,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
       reactData.currentDate = currentDate
       $xeDatePicker.dateMonthHandle(currentDate, 0)
     },
-    dateToggleTypeEvent  () {
+    dateToggleYearTypeEvent () {
+      const $xeDatePicker = this
+      const reactData = $xeDatePicker.reactData
+
+      reactData.datePanelType = 'year'
+    },
+    dateToggleMonthTypeEvent  () {
       const $xeDatePicker = this
       const reactData = $xeDatePicker.reactData
 
@@ -2205,7 +2216,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { datePanelType } = reactData
       const isDisabledPrevDateBtn = $xeDatePicker.computeIsDisabledPrevDateBtn
       const isDisabledNextDateBtn = $xeDatePicker.computeIsDisabledNextDateBtn
-      const selectDatePanelLabel = $xeDatePicker.computeSelectDatePanelLabel
+      const selectDatePanelObj = $xeDatePicker.computeSelectDatePanelObj
+      const supportMultiples = $xeDatePicker.computeSupportMultiples
       return [
         h('div', {
           class: 'vxe-date-picker--date-picker-header'
@@ -2216,13 +2228,25 @@ export default /* define-vxe-component start */ defineVxeComponent({
             datePanelType === 'year'
               ? h('span', {
                 class: 'vxe-date-picker--date-picker-label'
-              }, selectDatePanelLabel)
+              }, selectDatePanelObj.y)
               : h('span', {
-                class: 'vxe-date-picker--date-picker-btn',
-                on: {
-                  click: $xeDatePicker.dateToggleTypeEvent
-                }
-              }, selectDatePanelLabel)
+                class: 'vxe-date-picker--date-picker-btns'
+              }, [
+                h('span', {
+                  class: 'vxe-date-picker--date-picker-btn',
+                  on: {
+                    click: $xeDatePicker.dateToggleYearTypeEvent
+                  }
+                }, selectDatePanelObj.y),
+                selectDatePanelObj.m
+                  ? h('span', {
+                    class: 'vxe-date-picker--date-picker-btn',
+                    on: {
+                      click: $xeDatePicker.dateToggleMonthTypeEvent
+                    }
+                  }, selectDatePanelObj.m)
+                  : renderEmptyElement($xeDatePicker)
+              ])
           ]),
           h('div', {
             class: 'vxe-date-picker--date-picker-btn-wrapper'
@@ -2261,7 +2285,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
                 class: 'vxe-icon-caret-right'
               })
             ]),
-            multiple && $xeDatePicker.computeSupportMultiples
+            multiple && supportMultiples
               ? h('span', {
                 class: 'vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-confirm-btn'
               }, [

package/styles/components/date-picker.scss

@@ -325,7 +325,11 @@
   margin-right: 0.5em;
 }
 .vxe-date-picker--time-picker-btn {
+  display: flex;
   flex-shrink: 0;
+  &:active {
+    transform: scale(0.9);
+  }
 }
 .vxe-date-picker--time-picker-confirm,
 .vxe-date-picker--date-picker-confirm {
@@ -391,6 +395,7 @@
   &:not(.is--disabled) {
     cursor: pointer;
     &:hover {
+      color: var(--vxe-ui-font-primary-color);
       background-color: #fff;
     }
     &:active {
@@ -398,6 +403,14 @@
     }
   }
 }
+.vxe-date-picker--date-picker-btns {
+  .vxe-date-picker--date-picker-btn {
+    margin-left: 0.6em;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
 .vxe-date-picker--date-picker-body {
   border-radius: var(--vxe-ui-base-border-radius);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -523,6 +536,8 @@
 
 .vxe-date-picker--date-label {
   position: relative;
+  font-size: 1.1em;
+  line-height: 1em;
   &.is-notice {
     &:before {
       content: "";
@@ -541,8 +556,8 @@
   position: absolute;
   right: 0.1em;
   top: -0.2em;
-  font-size: 0.86em;
-  transform: scale(0.85);
+  font-size: 12px;
+  transform: scale(0.9);
   color: var(--vxe-ui-input-date-extra-color);
   &.is-important {
     color: var(--vxe-ui-input-date-extra-important-color);
@@ -551,7 +566,8 @@
 
 .vxe-date-picker--date-festival {
   color: var(--vxe-ui-input-date-festival-color);
-  height: 14px;
+  height: 1.2em;
+  line-height: 1.1em;
   overflow: hidden;
   &.is-important {
     color: var(--vxe-ui-input-date-festival-important-color);
@@ -559,8 +575,8 @@
 }
 .vxe-date-picker--date-festival--label {
   display: block;
-  font-size: 0.86em;
-  transform: scale(0.9);
+  font-size: 1em;
+  transform: scale(0.8);
 }
 
 @keyframes festivalOverlap2 {
@@ -760,6 +776,9 @@
   .vxe-date-picker--date-picker-btn-wrapper {
     .vxe-date-picker--date-picker-btn {
       margin-left: 9px - $sizeIndex;
+      &:active {
+        transform: scale(0.9);
+      }
     }
     .vxe-date-picker--date-picker-prev-btn,
     .vxe-date-picker--date-picker-current-btn,
@@ -771,7 +790,7 @@
   }
   .vxe-date-picker--date-picker-type-wrapper {
     .vxe-date-picker--date-picker-label,
-    .vxe-date-picker--date-picker-btn {
+    .vxe-date-picker--date-picker-btns {
       padding: 0 10px - $sizeIndex;
     }
   }
@@ -831,9 +850,6 @@
   .vxe-date-picker--date-picker-confirm {
     height: 31px - $sizeIndex;
   }
-  .vxe-date-picker--date-label {
-    line-height: calc(list.nth($fontSizeList, $sizeIndex) + 1px);
-  }
 }
 
 .vxe-date-picker--panel {

package/styles/theme/base.scss

@@ -43,7 +43,7 @@
   /*input*/
   --vxe-ui-input-disabled-color: #dcdfe6;
   --vxe-ui-input-number-disabled-color: #e4e7ed;
-  --vxe-ui-input-date-festival-color: #999999;
+  --vxe-ui-input-date-festival-color: #abaaaa;
   --vxe-ui-input-date-festival-important-color: var(--vxe-ui-font-primary-color);
   --vxe-ui-input-date-notice-background-color: #FF0000;
   --vxe-ui-input-date-picker-hover-background-color: #f2f6fc;