refactor: date

components/components.ts

@@ -50,7 +50,8 @@ export { default as Comment } from './comment';
 
 export { default as ConfigProvider } from './config-provider';
 
-export { default as DatePicker, RangePicker, MonthPicker, WeekPicker } from './date-picker';
+export type { DatePickerProps } from './date-picker';
+export { default as DatePicker } from './date-picker';
 
 export type { DescriptionsProps } from './descriptions';
 export { default as Descriptions, DescriptionsItem } from './descriptions';

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -15,7 +15,7 @@ import classNames from '../../_util/classNames';
 
 export default function generateRangePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   const RangePicker = defineComponent<RangePickerProps<DateType>>({
-    name: 'RangePicker',
+    name: 'ARangePicker',
     inheritAttrs: false,
     props: ['size', 'prefixCls', 'direction', 'getPopupContainer', 'locale'] as any,
     slots: ['suffixIcon'],

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -107,14 +107,14 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
     });
   }
 
-  const DatePicker = getPicker<DatePickerProps>();
-  const WeekPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('week', 'WeekPicker');
-  const MonthPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('month', 'MonthPicker');
-  const YearPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('year', 'YearPicker');
-  const TimePicker = getPicker<Omit<PickerTimeProps<DateType>, 'picker'>>('time', 'TimePicker');
+  const DatePicker = getPicker<DatePickerProps>('date', 'ADatePicker');
+  const WeekPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('week', 'AWeekPicker');
+  const MonthPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('month', 'AMonthPicker');
+  const YearPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('year', 'AYearPicker');
+  const TimePicker = getPicker<Omit<PickerTimeProps<DateType>, 'picker'>>('time', 'TimePicker'); // 给独立组件 TimePicker 使用，此处名称不用更改
   const QuarterPicker = getPicker<Omit<PickerTimeProps<DateType>, 'picker'>>(
     'quarter',
-    'QuarterPicker',
+    'AQuarterPicker',
   );
 
   return { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker };

components/date-picker/index.tsx

@@ -1,5 +1,6 @@
 import type { Moment } from 'moment';
 import momentGenerateConfig from '../vc-picker/generate/moment';
+import { withInstall } from '../_util/type';
 import type {
   PickerProps,
   PickerDateProps,
@@ -14,4 +15,4 @@ export type RangePickerProps = BaseRangePickerProps<Moment>;
 
 const DatePicker = generatePicker<Moment>(momentGenerateConfig);
 
-export default DatePicker;
+export default withInstall(DatePicker);

components/style/themes/default.less

@@ -578,9 +578,30 @@
 
 // TimePicker
 // ---
-@time-picker-panel-column-width: 56px;
-@time-picker-panel-width: @time-picker-panel-column-width * 3;
-@time-picker-selected-bg: @background-color-base;
+@picker-bg: @component-background;
+@picker-basic-cell-hover-color: @item-hover-bg;
+@picker-basic-cell-active-with-range-color: @primary-1;
+@picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%);
+@picker-basic-cell-disabled-bg: @disabled-bg;
+@picker-border-color: @border-color-split;
+@picker-date-hover-range-border-color: lighten(@primary-color, 20%);
+@picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color;
+@picker-time-panel-column-width: 56px;
+@picker-time-panel-column-height: 224px;
+@picker-time-panel-cell-height: 28px;
+@picker-panel-cell-height: 24px;
+@picker-panel-cell-width: 36px;
+@picker-text-height: 40px;
+@picker-panel-without-time-cell-height: 66px;
+
+// Calendar
+// ---
+@calendar-bg: @component-background;
+@calendar-input-bg: @input-bg;
+@calendar-border-color: @border-color-inverse;
+@calendar-item-active-bg: @item-active-bg;
+@calendar-full-bg: @calendar-bg;
+@calendar-full-panel-bg: @calendar-full-bg;
 
 // Carousel
 // ---

components/time-picker/style/index.less

@@ -1,247 +1,3 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
-
-@timepicker-prefix-cls: ~'@{ant-prefix}-time-picker';
-@timepicker-item-height: 32px;
-
-.@{timepicker-prefix-cls}-panel {
-  .reset-component();
-
-  position: absolute;
-  z-index: @zindex-picker;
-  font-family: @font-family;
-
-  &-inner {
-    position: relative;
-    left: -2px;
-    font-size: @font-size-base;
-    text-align: left;
-    list-style: none;
-    background-color: @component-background;
-    background-clip: padding-box;
-    border-radius: @border-radius-base;
-    outline: none;
-    box-shadow: @box-shadow-base;
-  }
-
-  &-input {
-    background: @input-bg;
-    width: 100%;
-    max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px;
-    margin: 0;
-    padding: 0;
-    line-height: normal;
-    border: 0;
-    outline: 0;
-    cursor: auto;
-
-    .placeholder();
-
-    &-wrap {
-      position: relative;
-      padding: 7px 2px 7px @control-padding-horizontal;
-      border-bottom: @border-width-base @border-style-base @border-color-split;
-    }
-
-    &-invalid {
-      border-color: @error-color;
-    }
-  }
-
-  &-narrow &-input-wrap {
-    max-width: @time-picker-panel-column-width * 2;
-  }
-
-  &-select {
-    position: relative; // Fix chrome weird render bug
-    float: left;
-    width: @time-picker-panel-column-width;
-    max-height: @timepicker-item-height * 6;
-    overflow: hidden;
-    font-size: @font-size-base;
-    border-left: @border-width-base @border-style-base @border-color-split;
-
-    &:hover {
-      overflow-y: auto;
-    }
-
-    &:first-child {
-      margin-left: 0;
-      border-left: 0;
-    }
-
-    &:last-child {
-      border-right: 0;
-    }
-
-    &:only-child {
-      width: 100%;
-    }
-
-    ul {
-      // use fixed width instead of 100%
-      // to fix strange render bug in safari: https://github.com/ant-design/ant-design/issues/17842
-      width: @time-picker-panel-column-width;
-      margin: 0;
-      padding: 0 0 @timepicker-item-height * 5;
-      list-style: none;
-    }
-
-    li {
-      width: 100%;
-      height: @timepicker-item-height;
-      margin: 0;
-      padding: 0 0 0 @control-padding-horizontal;
-      line-height: @timepicker-item-height;
-      text-align: left;
-      list-style: none;
-      cursor: pointer;
-      transition: all 0.3s;
-      user-select: none;
-
-      &:focus {
-        color: @primary-color;
-        font-weight: 600;
-        outline: none;
-      }
-    }
-
-    li:hover {
-      background: @item-hover-bg;
-    }
-
-    li&-option-selected {
-      font-weight: 600;
-      background: @time-picker-selected-bg;
-      &:hover {
-        background: @time-picker-selected-bg;
-      }
-    }
-
-    li&-option-disabled {
-      color: @btn-disable-color;
-      &:hover {
-        background: transparent;
-        cursor: not-allowed;
-      }
-      &:focus {
-        color: @btn-disable-color;
-        font-weight: inherit;
-      }
-    }
-  }
-
-  &-combobox {
-    .clearfix();
-  }
-
-  &-addon {
-    padding: 8px;
-    border-top: @border-width-base @border-style-base @border-color-split;
-  }
-
-  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
-  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
-  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
-  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
-    animation-name: antSlideDownIn;
-  }
-
-  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
-  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
-  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
-  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
-    animation-name: antSlideUpIn;
-  }
-
-  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
-  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
-    animation-name: antSlideDownOut;
-  }
-
-  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
-  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
-    animation-name: antSlideUpOut;
-  }
-}
-
-.@{timepicker-prefix-cls} {
-  .reset-component();
-
-  position: relative;
-  display: inline-block;
-  width: 128px;
-  outline: none;
-  cursor: text;
-  transition: opacity 0.3s;
-
-  &-input {
-    .input();
-    &[disabled] {
-      .disabled();
-    }
-  }
-
-  &-open {
-    opacity: 0;
-  }
-
-  &-icon,
-  &-clear {
-    position: absolute;
-    top: 50%;
-    right: @control-padding-horizontal - 1px;
-    z-index: 1;
-    width: 14px;
-    height: 14px;
-    margin-top: -7px;
-    color: @disabled-color;
-    line-height: 14px;
-    transition: all 0.3s @ease-in-out;
-    user-select: none;
-    .@{timepicker-prefix-cls}-clock-icon {
-      display: block;
-      color: @disabled-color;
-      line-height: 1;
-    }
-  }
-
-  &-clear {
-    z-index: 2;
-    background: @input-bg;
-    opacity: 0;
-    pointer-events: none;
-    &:hover {
-      color: @text-color-secondary;
-    }
-  }
-  &:hover &-clear {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  &-large &-input {
-    .input-lg();
-  }
-
-  &-small &-input {
-    .input-sm();
-  }
-
-  &-small &-icon,
-  &-small &-clear {
-    right: @control-padding-horizontal-sm - 1px;
-  }
-}
-
-// Fix cursor height in safari
-// https://stackoverflow.com/q/3843408/3040605
-// https://browserstrangeness.github.io/css_hacks.html#safari
-@media not all and (min-resolution: 0.001dpcm) {
-  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .@{ant-prefix}-input {
-      line-height: @line-height-base;
-    }
-  }
-}

components/time-picker/style/index.ts

@@ -1,2 +0,0 @@
-import '../../style/index.less';
-import './index.less';

components/time-picker/style/index.tsx

@@ -0,0 +1,5 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../date-picker/style';

examples/App.vue

@@ -1,9 +1,9 @@
 <template>
   <a-space direction="vertical">
     <a-date-picker v-model:value="value1" />
-    <a-month-picker v-model:value="value2" placeholder="Select month" />
+    <!-- <a-month-picker v-model:value="value2" placeholder="Select month" />
     <a-range-picker v-model:value="value3" />
-    <a-week-picker v-model:value="value4" placeholder="Select week" />
+    <a-week-picker v-model:value="value4" placeholder="Select week" /> -->
   </a-space>
 </template>
 <script lang="ts">