refactor: date

components/vc-picker/PanelContext.tsx

@@ -1,4 +1,5 @@
-import { inject, InjectionKey, provide, Ref } from 'vue';
+import type { InjectionKey, Ref } from 'vue';
+import { inject, provide } from 'vue';
 import type { OnSelect, PanelMode } from './interface';
 
 export type ContextOperationRefProps = {

components/vc-picker/Picker.tsx

@@ -20,27 +20,19 @@ import PickerPanel from './PickerPanel';
 import PickerTrigger from './PickerTrigger';
 import { formatValue, isEqual, parseValue } from './utils/dateUtil';
 import getDataOrAriaProps, { toArray } from './utils/miscUtil';
-import { ContextOperationRefProps, useProvidePanel } from './PanelContext';
+import type { ContextOperationRefProps } from './PanelContext';
+import { useProvidePanel } from './PanelContext';
 import type { CustomFormat, PickerMode } from './interface';
 import { getDefaultFormat, getInputSize, elementsContains } from './utils/uiUtil';
 import usePickerInput from './hooks/usePickerInput';
 import useTextValueMapping from './hooks/useTextValueMapping';
 import useValueTexts from './hooks/useValueTexts';
 import useHoverValue from './hooks/useHoverValue';
-import {
-  computed,
-  createVNode,
-  CSSProperties,
-  defineComponent,
-  HtmlHTMLAttributes,
-  ref,
-  Ref,
-  toRef,
-  watch,
-} from 'vue';
-import { ChangeEvent, FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
-import { VueNode } from '../_util/type';
-import { AlignType } from '../vc-align/interface';
+import type { CSSProperties, HtmlHTMLAttributes, Ref } from 'vue';
+import { computed, createVNode, defineComponent, ref, toRef, watch } from 'vue';
+import type { ChangeEvent, FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
+import type { VueNode } from '../_util/type';
+import type { AlignType } from '../vc-align/interface';
 import useMergedState from '../_util/hooks/useMergedState';
 import { warning } from '../vc-util/warning';
 import classNames from '../_util/classNames';
@@ -137,6 +129,7 @@ type MergedPickerProps<DateType> = {
 function Picker<DateType>() {
   return defineComponent<MergedPickerProps<DateType>>({
     name: 'Picker',
+    inheritAttrs: false,
     props: [
       'prefixCls',
       'id',
@@ -181,7 +174,6 @@ function Picker<DateType>() {
       'direction',
       'autocomplete',
     ] as any,
-    inheritAttrs: false,
     slots: [
       'suffixIcon',
       'clearIcon',
@@ -267,7 +259,7 @@ function Picker<DateType>() {
           onChange(
             newValue,
             newValue
-              ? formatValue(newValue, { generateConfig, locale, format: formatList[0] })
+              ? formatValue(newValue, { generateConfig, locale, format: formatList.value[0] })
               : '',
           );
         }
@@ -317,7 +309,7 @@ function Picker<DateType>() {
         triggerOpen,
         forwardKeyDown,
         isClickOutside: target =>
-          !elementsContains([panelDivRef.current, inputDivRef.current], target as HTMLElement),
+          !elementsContains([panelDivRef.value, inputDivRef.value], target as HTMLElement),
         onSubmit: () => {
           if (props.disabledDate && props.disabledDate(selectedValue.value)) {
             return false;

components/vc-picker/PickerPanel.tsx

@@ -32,17 +32,9 @@ import { useInjectRange } from './RangeContext';
 import getExtraFooter from './utils/getExtraFooter';
 import getRanges from './utils/getRanges';
 import { getLowerBoundTime, setDateTime, setTime } from './utils/timeUtil';
-import { VueNode } from '../_util/type';
-import {
-  computed,
-  createVNode,
-  defineComponent,
-  HTMLAttributes,
-  ref,
-  toRef,
-  watch,
-  watchEffect,
-} from 'vue';
+import type { VueNode } from '../_util/type';
+import type { HTMLAttributes } from 'vue';
+import { computed, createVNode, defineComponent, ref, toRef, watch, watchEffect } from 'vue';
 import useMergedState from '../_util/hooks/useMergedState';
 import { warning } from '../vc-util/warning';
 import KeyCode from '../_util/KeyCode';
@@ -292,7 +284,7 @@ function PickerPanel<DateType>() {
       const triggerSelect = (
         date: DateType,
         type: 'key' | 'mouse' | 'submit',
-        forceTriggerSelect: boolean = false,
+        forceTriggerSelect = false,
       ) => {
         const { picker, generateConfig, onSelect, onChange, disabledDate } = props;
         if (mergedMode.value === picker || forceTriggerSelect) {
@@ -359,9 +351,9 @@ function PickerPanel<DateType>() {
           generateConfig.getHour(now),
           generateConfig.getMinute(now),
           generateConfig.getSecond(now),
-          isHourStepValid ? hourStep : 1,
-          isMinuteStepValid ? minuteStep : 1,
-          isSecondStepValid ? secondStep : 1,
+          isHourStepValid.value ? hourStep : 1,
+          isMinuteStepValid.value ? minuteStep : 1,
+          isSecondStepValid.value ? secondStep : 1,
         );
         const adjustedNow = setTime(
           generateConfig,

components/vc-picker/PickerTrigger.tsx

@@ -1,8 +1,8 @@
-import { CSSProperties } from '@vue/runtime-dom';
-import { AlignType } from '../vc-align/interface';
+import type { CSSProperties } from '@vue/runtime-dom';
+import type { AlignType } from '../vc-align/interface';
 import Trigger from '../vc-trigger';
 import classNames from '../_util/classNames';
-import { VueNode } from '../_util/type';
+import type { VueNode } from '../_util/type';
 import useMergeProps from './hooks/useMergeProps';
 
 const BUILT_IN_PLACEMENTS = {

components/vc-picker/RangeContext.tsx

@@ -1,14 +1,5 @@
-import {
-  defineComponent,
-  inject,
-  InjectionKey,
-  PropType,
-  provide,
-  ref,
-  Ref,
-  toRef,
-  watch,
-} from 'vue';
+import type { InjectionKey, PropType, Ref } from 'vue';
+import { defineComponent, inject, provide, ref, toRef, watch } from 'vue';
 import type { NullableDateType, RangeValue } from './interface';
 
 export type RangeContextProps = {

components/vc-picker/RangePicker.tsx

@@ -6,7 +6,8 @@ import PickerPanel from './PickerPanel';
 import usePickerInput from './hooks/usePickerInput';
 import getDataOrAriaProps, { toArray, getValue, updateValues } from './utils/miscUtil';
 import { getDefaultFormat, getInputSize, elementsContains } from './utils/uiUtil';
-import { ContextOperationRefProps, useProvidePanel } from './PanelContext';
+import type { ContextOperationRefProps } from './PanelContext';
+import { useProvidePanel } from './PanelContext';
 import {
   isEqual,
   getClosingViewDate,
@@ -27,18 +28,10 @@ import getRanges from './utils/getRanges';
 import useRangeViewDates from './hooks/useRangeViewDates';
 import type { DateRender } from './panels/DatePanel/DateBody';
 import useHoverValue from './hooks/useHoverValue';
-import { VueNode } from '../_util/type';
-import { ChangeEvent, FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
-import {
-  computed,
-  createVNode,
-  defineComponent,
-  HTMLAttributes,
-  ref,
-  toRef,
-  watch,
-  watchEffect,
-} from 'vue';
+import type { VueNode } from '../_util/type';
+import type { ChangeEvent, FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
+import type { HTMLAttributes } from 'vue';
+import { computed, createVNode, defineComponent, ref, toRef, watch, watchEffect } from 'vue';
 import useMergedState from '../_util/hooks/useMergedState';
 import { warning } from '../vc-util/warning';
 import useState from '../_util/hooks/useState';
@@ -291,7 +284,7 @@ function RangerPicker<DateType>() {
         postState: values => {
           let postValues = values;
 
-          if (mergedDisabled[0] && mergedDisabled[1]) {
+          if (mergedDisabled.value[0] && mergedDisabled.value[1]) {
             return postValues;
           }
 
@@ -449,11 +442,11 @@ function RangerPicker<DateType>() {
 
         const startStr =
           values && values[0]
-            ? formatValue(values[0], { generateConfig, locale, format: formatList[0] })
+            ? formatValue(values[0], { generateConfig, locale, format: formatList.value[0] })
             : '';
         const endStr =
           values && values[1]
-            ? formatValue(values[1], { generateConfig, locale, format: formatList[0] })
+            ? formatValue(values[1], { generateConfig, locale, format: formatList.value[0] })
             : '';
 
         if (onCalendarChange) {
@@ -941,8 +934,8 @@ function RangerPicker<DateType>() {
           direction,
           autocomplete = 'off',
         } = props;
-        let arrowLeft: number = 0;
-        let panelLeft: number = 0;
+        let arrowLeft = 0;
+        let panelLeft = 0;
         if (
           mergedActivePickerIndex.value &&
           startInputDivRef.value &&
@@ -1094,10 +1087,10 @@ function RangerPicker<DateType>() {
                 e.stopPropagation();
                 let values = mergedValue.value;
 
-                if (!mergedDisabled[0]) {
+                if (!mergedDisabled.value[0]) {
                   values = updateValues(values, null, 0);
                 }
-                if (!mergedDisabled[1]) {
+                if (!mergedDisabled.value[1]) {
                   values = updateValues(values, null, 1);
                 }
 
@@ -1112,11 +1105,11 @@ function RangerPicker<DateType>() {
         }
 
         const inputSharedProps = {
-          size: getInputSize(picker, formatList[0], generateConfig),
+          size: getInputSize(picker, formatList.value[0], generateConfig),
         };
 
-        let activeBarLeft: number = 0;
-        let activeBarWidth: number = 0;
+        let activeBarLeft = 0;
+        let activeBarWidth = 0;
         if (startInputDivRef.value && endInputDivRef.value && separatorRef.value) {
           if (mergedActivePickerIndex.value === 0) {
             activeBarWidth = startInputDivRef.value.offsetWidth;

components/vc-picker/index.tsx

@@ -2,12 +2,6 @@ import Picker, { PickerProps } from './Picker';
 import PickerPanel, { PickerPanelProps } from './PickerPanel';
 import RangePicker, { RangePickerProps } from './RangePicker';
 
-export {
-  PickerPanel,
-  RangePicker,
-  PickerProps,
-  PickerPanelProps,
-  RangePickerProps,
-};
+export { PickerPanel, RangePicker, PickerProps, PickerPanelProps, RangePickerProps };
 
 export default Picker;

components/vc-picker/locale/by_BY.ts

@@ -1,33 +1,33 @@
 import type { Locale } from '../interface';
 
 const locale: Locale = {
-locale: 'by_BY',
-today: 'Сёння',
-now: 'Зараз',
-backToToday: 'Дадзеная дата',
-ok: 'Ok',
-clear: 'Ачысціць',
-month: 'Месяц',
-year: 'Год',
-timeSelect: 'Выбраць час',
-dateSelect: 'Выбраць дату',
-weekSelect: 'Выбраць тыдзень',
-monthSelect: 'Выбраць месяц',
-yearSelect: 'Выбраць год',
-decadeSelect: 'Выбраць дзесяцігоддзе',
-yearFormat: 'YYYY',
-dateFormat: 'D-M-YYYY',
-dayFormat: 'D',
-dateTimeFormat: 'D-M-YYYY HH:mm:ss',
-monthBeforeYear: true,
-previousMonth: 'Папярэдні месяц (PageUp)',
-nextMonth: 'Наступны месяц (PageDown)',
-previousYear: 'Папярэдні год (Control + left)',
-nextYear: 'Наступны год (Control + right)',
-previousDecade: 'Папярэдняе дзесяцігоддзе',
-nextDecade: 'Наступнае дзесяцігоддзе',
-previousCentury: 'Папярэдні век',
-nextCentury: 'Наступны век',
+  locale: 'by_BY',
+  today: 'Сёння',
+  now: 'Зараз',
+  backToToday: 'Дадзеная дата',
+  ok: 'Ok',
+  clear: 'Ачысціць',
+  month: 'Месяц',
+  year: 'Год',
+  timeSelect: 'Выбраць час',
+  dateSelect: 'Выбраць дату',
+  weekSelect: 'Выбраць тыдзень',
+  monthSelect: 'Выбраць месяц',
+  yearSelect: 'Выбраць год',
+  decadeSelect: 'Выбраць дзесяцігоддзе',
+  yearFormat: 'YYYY',
+  dateFormat: 'D-M-YYYY',
+  dayFormat: 'D',
+  dateTimeFormat: 'D-M-YYYY HH:mm:ss',
+  monthBeforeYear: true,
+  previousMonth: 'Папярэдні месяц (PageUp)',
+  nextMonth: 'Наступны месяц (PageDown)',
+  previousYear: 'Папярэдні год (Control + left)',
+  nextYear: 'Наступны год (Control + right)',
+  previousDecade: 'Папярэдняе дзесяцігоддзе',
+  nextDecade: 'Наступнае дзесяцігоддзе',
+  previousCentury: 'Папярэдні век',
+  nextCentury: 'Наступны век',
 };
 
 export default locale;

components/vc-picker/locale/pt_BR.ts

@@ -28,20 +28,7 @@ const locale: Locale = {
   previousCentury: 'Século anterior',
   nextCentury: 'Próximo século',
   shortWeekDays: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
-    shortMonths: [
-      'Jan',
-      'Fev',
-      'Mar',
-      'Abr',
-      'Mai',
-      'Jun',
-      'Jul',
-      'Ago',
-      'Set',
-      'Out',
-      'Nov',
-      'Dez',
-    ],
+  shortMonths: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
 };
 
 export default locale;

components/vc-picker/panels/DatePanel/DateBody.tsx

@@ -9,7 +9,7 @@ import {
 import type { Locale } from '../../interface';
 import useCellClassName from '../../hooks/useCellClassName';
 import PanelBody from '../PanelBody';
-import { VueNode } from '../../../_util/type';
+import type { VueNode } from '../../../_util/type';
 import { useInjectRange } from '../../RangeContext';
 import useMergeProps from '../../hooks/useMergeProps';
 

components/vc-picker/panels/DatePanel/DateHeader.tsx

@@ -3,7 +3,7 @@ import type { Locale } from '../../interface';
 import type { GenerateConfig } from '../../generate';
 import { useInjectPanel } from '../../PanelContext';
 import { formatValue } from '../../utils/dateUtil';
-import { VueNode } from '../../../_util/type';
+import type { VueNode } from '../../../_util/type';
 import useMergeProps from '../../hooks/useMergeProps';
 
 export type DateHeaderProps<DateType> = {

components/vc-picker/panels/DatePanel/index.tsx

@@ -6,7 +6,6 @@ import { WEEK_DAY_COUNT } from '../../utils/dateUtil';
 import type { KeyboardConfig } from '../../utils/uiUtil';
 import { createKeyDownHandler } from '../../utils/uiUtil';
 import classNames from '../../../_util/classNames';
-import { ref } from '@vue/reactivity';
 import useMergeProps from '../../hooks/useMergeProps';
 
 const DATE_ROW_COUNT = 6;

components/vc-picker/panels/Header.tsx

@@ -1,5 +1,5 @@
-import { CSSProperties } from 'vue';
-import { VueNode } from '../../_util/type';
+import type { CSSProperties } from 'vue';
+import type { VueNode } from '../../_util/type';
 import useMergeProps from '../hooks/useMergeProps';
 import { useInjectPanel } from '../PanelContext';
 

components/vc-picker/panels/MonthPanel/MonthBody.tsx

@@ -4,7 +4,7 @@ import { formatValue, isSameMonth } from '../../utils/dateUtil';
 import { useInjectRange } from '../../RangeContext';
 import useCellClassName from '../../hooks/useCellClassName';
 import PanelBody from '../PanelBody';
-import { VueNode } from '../../../_util/type';
+import type { VueNode } from '../../../_util/type';
 import useMergeProps from '../../hooks/useMergeProps';
 
 export const MONTH_COL_COUNT = 3;

components/vc-picker/panels/PanelBody.tsx

@@ -3,7 +3,7 @@ import type { GenerateConfig } from '../generate';
 import { getLastDay } from '../utils/timeUtil';
 import type { PanelMode } from '../interface';
 import { getCellDateDisabled } from '../utils/dateUtil';
-import { VueNode } from '../../_util/type';
+import type { VueNode } from '../../_util/type';
 import classNames from '../../_util/classNames';
 import useMergeProps from '../hooks/useMergeProps';
 

components/vc-picker/panels/QuarterPanel/QuarterBody.tsx

@@ -1,7 +1,7 @@
 import type { GenerateConfig } from '../../generate';
 import type { Locale } from '../../interface';
 import { formatValue, isSameQuarter } from '../../utils/dateUtil';
-import RangeContext, { useInjectRange } from '../../RangeContext';
+import { useInjectRange } from '../../RangeContext';
 import useCellClassName from '../../hooks/useCellClassName';
 import PanelBody from '../PanelBody';
 import useMergeProps from '../../hooks/useMergeProps';

components/vc-picker/panels/TimePanel/TimeBody.tsx

@@ -6,7 +6,7 @@ import { leftPad } from '../../utils/miscUtil';
 import type { SharedTimeProps } from '.';
 import { setTime as utilSetTime } from '../../utils/timeUtil';
 import { cloneElement } from '../../../_util/vnode';
-import { VueNode } from '../../../_util/type';
+import type { VueNode } from '../../../_util/type';
 import type { Ref } from 'vue';
 import { computed, defineComponent } from 'vue';
 
@@ -74,7 +74,7 @@ const TimeBody = defineComponent({
         return false;
       }
     });
-    let hour = computed(() => {
+    const hour = computed(() => {
       // Should additional logic to handle 12 hours
       if (props.use12Hours) {
         return originHour.value % 12;
@@ -134,7 +134,7 @@ const TimeBody = defineComponent({
     const hours = computed(() => {
       if (!props.use12Hours) return rawHours.value;
       return rawHours.value
-        .filter(isPM ? hourMeta => hourMeta.value >= 12 : hourMeta => hourMeta.value < 12)
+        .filter(isPM.value ? hourMeta => hourMeta.value >= 12 : hourMeta => hourMeta.value < 12)
         .map(hourMeta => {
           const hourValue = hourMeta.value % 12;
           const hourLabel = hourValue === 0 ? '12' : leftPad(hourValue, 2);
@@ -260,8 +260,8 @@ const TimeBody = defineComponent({
 
       // 12 Hours
       let PMIndex = -1;
-      if (typeof isPM === 'boolean') {
-        PMIndex = isPM ? 1 : 0;
+      if (typeof isPM.value === 'boolean') {
+        PMIndex = isPM.value ? 1 : 0;
       }
 
       addColumnNode(

components/vc-picker/utils/getRanges.tsx

@@ -1,4 +1,4 @@
-import { VueNode } from '../../_util/type';
+import type { VueNode } from '../../_util/type';
 import type { Components, RangeList, Locale } from '../interface';
 
 export type RangesProps = {