fix(comp:data-picker): modify data-picker according to current desigin (

#859) * fix(comp:date-picker): modify according to design * fix(comp:input): add input color style * fix(comp:selector): set vertical align center
IDuxFE · Apr 25, 2022 · 7efdcb9 · 7efdcb9
1 parent 56db6f8
commit 7efdcb9
Show file tree

Hide file tree

Showing 25 changed files with 304 additions and 310 deletions.
diff --git a/packages/components/_private/date-panel/__tests__/__snapshots__/datePanel.spec.ts.snap b/packages/components/_private/date-panel/__tests__/__snapshots__/datePanel.spec.ts.snap
@@ -9,13 +9,27 @@ exports[`DatePanel > date type disabledDate work 1`] = `
     <table role=\\"grid\\">
       <thead>
         <tr role=\\"row\\">
-          <th role=\\"columnheader\\">一</th>
-          <th role=\\"columnheader\\">二</th>
-          <th role=\\"columnheader\\">三</th>
-          <th role=\\"columnheader\\">四</th>
-          <th role=\\"columnheader\\">五</th>
-          <th role=\\"columnheader\\">六</th>
-          <th role=\\"columnheader\\">日</th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">一</div>
+          </th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">二</div>
+          </th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">三</div>
+          </th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">四</div>
+          </th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">五</div>
+          </th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">六</div>
+          </th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">日</div>
+          </th>
         </tr>
       </thead>
       <tbody>
@@ -204,6 +218,43 @@ exports[`DatePanel > date type disabledDate work 1`] = `
             </div>
           </td>
         </tr>
+        <tr role=\\"row\\" class=\\"ix-date-panel-row\\">
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">1</div>
+            </div>
+          </td>
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">2</div>
+            </div>
+          </td>
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">3</div>
+            </div>
+          </td>
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">4</div>
+            </div>
+          </td>
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">5</div>
+            </div>
+          </td>
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">6</div>
+            </div>
+          </td>
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">7</div>
+            </div>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>
@@ -302,13 +353,27 @@ exports[`DatePanel > render work 1`] = `
     <table role=\\"grid\\">
       <thead>
         <tr role=\\"row\\">
-          <th role=\\"columnheader\\">一</th>
-          <th role=\\"columnheader\\">二</th>
-          <th role=\\"columnheader\\">三</th>
-          <th role=\\"columnheader\\">四</th>
-          <th role=\\"columnheader\\">五</th>
-          <th role=\\"columnheader\\">六</th>
-          <th role=\\"columnheader\\">日</th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">一</div>
+          </th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">二</div>
+          </th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">三</div>
+          </th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">四</div>
+          </th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">五</div>
+          </th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">六</div>
+          </th>
+          <th role=\\"columnheader\\">
+            <div class=\\"ix-date-panel-body-header-cell\\">日</div>
+          </th>
         </tr>
       </thead>
       <tbody>
@@ -497,6 +562,43 @@ exports[`DatePanel > render work 1`] = `
             </div>
           </td>
         </tr>
+        <tr role=\\"row\\" class=\\"ix-date-panel-row\\">
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">1</div>
+            </div>
+          </td>
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">2</div>
+            </div>
+          </td>
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">3</div>
+            </div>
+          </td>
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">4</div>
+            </div>
+          </td>
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">5</div>
+            </div>
+          </td>
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">6</div>
+            </div>
+          </td>
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-out-view\\" role=\\"gridcell\\">
+            <div class=\\"ix-date-panel-cell-inner\\">
+              <div class=\\"ix-date-panel-cell-trigger\\">7</div>
+            </div>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>
@@ -530,7 +632,7 @@ exports[`DatePanel > year type disabledDate work 1`] = `
           </td>
         </tr>
         <tr role=\\"row\\" class=\\"ix-date-panel-row\\">
-          <td class=\\"ix-date-panel-cell ix-date-panel-cell-disabled\\" role=\\"gridcell\\">
+          <td class=\\"ix-date-panel-cell ix-date-panel-cell-disabled ix-date-panel-cell-current\\" role=\\"gridcell\\">
             <div class=\\"ix-date-panel-cell-inner\\">
               <div class=\\"ix-date-panel-cell-trigger\\">2022</div>
             </div>

diff --git a/packages/components/_private/date-panel/src/DatePanel.tsx b/packages/components/_private/date-panel/src/DatePanel.tsx
@@ -27,7 +27,7 @@ export default defineComponent({
     const dateConfig = useDateConfig()
     const { activeType, setActiveType } = useActiveType(props)
     const { activeDate, setActiveDate, startActiveDate } = useActiveDate(props, dateConfig, activeType)
-    const { maxRowIndex, maxCellIndex } = useMaxIndex(activeType, dateConfig, activeDate)
+    const { maxRowIndex, maxCellIndex } = useMaxIndex(activeType)
 
     provide(datePanelToken, {
       props,

diff --git a/packages/components/_private/date-panel/src/composables/useMaxIndex.ts b/packages/components/_private/date-panel/src/composables/useMaxIndex.ts
@@ -6,7 +6,6 @@
  */
 
 import type { DatePanelType } from '../types'
-import type { DateConfig } from '@idux/components/config'
 import type { ComputedRef } from 'vue'
 
 import { computed } from 'vue'
@@ -16,31 +15,13 @@ export interface MaxIndexContext {
   maxCellIndex: ComputedRef<number>
 }
 
-export function useMaxIndex(
-  activeType: ComputedRef<DatePanelType>,
-  dateConfig: DateConfig,
-  activeDate: ComputedRef<Date>,
-): MaxIndexContext {
+export function useMaxIndex(activeType: ComputedRef<DatePanelType>): MaxIndexContext {
   const maxRowIndex = computed(() => {
     const currType = activeType.value
-    const { weekStartsOn, get, startOf, endOf } = dateConfig
     switch (currType) {
       case 'date':
-      case 'week': {
-        const currDate = activeDate.value
-        const weekStarts = weekStartsOn()
-        let startDay = get(startOf(currDate, 'month'), 'day')
-        if (startDay > weekStarts) {
-          startDay = startDay - weekStarts
-        } else if (startDay < weekStarts) {
-          startDay = startDay - weekStarts + 7
-        } else {
-          startDay = 0
-        }
-        const endDate = get(endOf(currDate, 'month'), 'date')
-        // 起始天数 + 当月总天数 > 5 * 7, 那么就多显示一周
-        return startDay + endDate > 35 ? 6 : 5
-      }
+      case 'week':
+        return 6
       case 'month':
         return 4
       case 'quarter':

diff --git a/packages/components/_private/date-panel/src/panel-body/PanelBody.tsx b/packages/components/_private/date-panel/src/panel-body/PanelBody.tsx
@@ -27,7 +27,7 @@ export default defineComponent({
         const { key, label } = cell
         return (
           <th role="columnheader" key={key}>
-            {label}
+            <div class={`${prefixCls}-header-cell`}>{label}</div>
           </th>
         )
       })

diff --git a/packages/components/_private/date-panel/src/panel-body/PanelCell.tsx b/packages/components/_private/date-panel/src/panel-body/PanelCell.tsx
@@ -58,8 +58,12 @@ export default defineComponent({
     )
     const isStart = computed(() => startDate.value && dateConfig.isSame(startDate.value, cellDate.value, 'date'))
     const isEnd = computed(() => endDate.value && dateConfig.isSame(endDate.value, cellDate.value, 'date'))
-    const isToday = computed(
-      () => dayTypes.includes(activeType.value) && dateConfig.isSame(cellDate.value, dateConfig.now(), 'day'),
+    const isCurrent = computed(() =>
+      dateConfig.isSame(
+        cellDate.value,
+        dateConfig.now(),
+        dayTypes.includes(activeType.value) ? 'day' : activeType.value,
+      ),
     )
     const outView = computed(() => {
       const currType = activeType.value
@@ -89,6 +93,10 @@ export default defineComponent({
       )
     })
     const isInRange = computed(() => {
+      if (outView.value) {
+        return false
+      }
+
       const compareType = dayTypes.includes(activeType.value) ? 'date' : activeType.value
       const cellDateValue = dateConfig.startOf(cellDate.value, compareType).valueOf()
 
@@ -108,7 +116,7 @@ export default defineComponent({
         [`${prefixCls}-disabled`]: isDisabled.value,
         [`${prefixCls}-selected`]: isSelected.value,
         [`${prefixCls}-in-range`]: isInRange.value,
-        [`${prefixCls}-today`]: isToday.value,
+        [`${prefixCls}-current`]: isCurrent.value,
         [`${prefixCls}-out-view`]: outView.value,
         [`${prefixCls}-start`]: isStart.value,
         [`${prefixCls}-end`]: isEnd.value,

diff --git a/packages/components/_private/date-panel/src/panel-header/PanelHeader.tsx b/packages/components/_private/date-panel/src/panel-header/PanelHeader.tsx
@@ -106,13 +106,20 @@ export default defineComponent({
   },
 })
 
+interface ContentAttrs {
+  key: string
+  label: string
+  title?: string
+  onClick?: (evt: Event) => void
+}
+
 function useContents(
   activeType: ComputedRef<DatePanelType>,
   activeDate: ComputedRef<Date>,
   locale: Locale,
   dateConfig: DateConfig,
   setActiveType: (type: DatePanelType) => void,
-) {
+): ComputedRef<ContentAttrs[]> {
   const handleClick = (evt: Event, type: DatePanelType) => {
     evt.stopPropagation()
     setActiveType(type)

diff --git a/packages/components/_private/selector/style/index.less b/packages/components/_private/selector/style/index.less
@@ -14,6 +14,7 @@
   &-content {
     position: relative;
     display: flex;
+    align-items: center;
     color: @select-color;
     background-color: @select-background-color;
     border: @select-border-width @select-border-style @select-border-color;

diff --git a/packages/components/_private/trigger/style/index.less b/packages/components/_private/trigger/style/index.less
@@ -74,6 +74,7 @@
     align-items: center;
     height: 100%;
     transition: @transition-all-base;
+    font-size: @trigger-icon-font-size;
   }
 
   &-suffix {

diff --git a/packages/components/date-picker/src/DatePicker.tsx b/packages/components/date-picker/src/DatePicker.tsx
@@ -67,12 +67,14 @@ export default defineComponent({
     })
 
     watch(overlayOpened, opened => {
-      if (!opened) {
-        controlContext.init(true)
-      }
-
       nextTick(() => {
-        opened ? focus() : blur()
+        if (opened) {
+          focus()
+          inputRef.value?.dispatchEvent(new FocusEvent('focus'))
+        } else {
+          blur()
+          inputRef.value?.dispatchEvent(new FocusEvent('blur'))
+        }
       })
     })
 

diff --git a/packages/components/date-picker/src/DateRangePicker.tsx b/packages/components/date-picker/src/DateRangePicker.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { computed, defineComponent, normalizeClass, provide, watch } from 'vue'
+import { computed, defineComponent, nextTick, normalizeClass, provide, watch } from 'vue'
 
 import { ɵOverlay } from '@idux/components/_private/overlay'
 import { useDateConfig, useGlobalConfig } from '@idux/components/config'
@@ -72,11 +72,15 @@ export default defineComponent({
     })
 
     watch(overlayOpened, opened => {
-      if (!opened) {
-        rangeControlContext.init(true)
-      }
-
-      opened ? focus() : blur()
+      nextTick(() => {
+        if (opened) {
+          focus()
+          inputRef.value?.dispatchEvent(new FocusEvent('focus'))
+        } else {
+          blur()
+          inputRef.value?.dispatchEvent(new FocusEvent('blur'))
+        }
+      })
     })
 
     watch(rangeControlContext.buffer, value => {

diff --git a/packages/components/date-picker/src/composables/useActiveDate.ts b/packages/components/date-picker/src/composables/useActiveDate.ts
@@ -133,11 +133,11 @@ export function useRangeActiveDate(
 
   const handleFromActiveDateUpdate = (value: Date) => {
     setFromActiveDate(value)
-    setToActiveDate(calcValidActiveDate(value, toPanelValue.value, 'to'))
+    setToActiveDate(calcValidActiveDate(value, toActiveDate.value, 'to'))
   }
   const handleToActiveDateUpdate = (value: Date) => {
     setToActiveDate(value)
-    setFromActiveDate(calcValidActiveDate(fromPanelValue.value, value, 'from'))
+    setFromActiveDate(calcValidActiveDate(fromActiveDate.value, value, 'from'))
   }
 
   return {