refactor: datapickerpro

packages/devui-vue/devui/date-picker-pro/__tests__/date-picker-pro.spec.tsx

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import dayjs from 'dayjs';
 import DDatePickerPro from '../src/date-picker-pro';
 import { nextTick, ref, getCurrentInstance } from 'vue';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import DButton from '../../button/src/button';
 import { Locale } from '../../locale';
 import { getDateIndex, getSelectedDate, getSelectedIndex } from './utils';

packages/devui-vue/devui/date-picker-pro/__tests__/month-picker.spec.tsx

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import DDatePickerPro from '../src/date-picker-pro';
 import DRangeDatePickerPro from '../src/components/range-date-picker-pro';
 import { nextTick, ref, getCurrentInstance } from 'vue';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { Locale } from '../../locale';
 
 const ns = useNamespace('date-picker-pro', true);

packages/devui-vue/devui/date-picker-pro/__tests__/range-date-picker-pro.spec.tsx

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import dayjs from 'dayjs';
 import DRangeDatePickerPro from '../src/components/range-date-picker-pro';
 import { nextTick, ref, getCurrentInstance } from 'vue';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import DButton from '../../button/src/button';
 import { Locale } from '../../locale';
 import { getDateIndex, getSelectedDate, getSelectedIndex } from './utils';

packages/devui-vue/devui/date-picker-pro/__tests__/utils.ts

@@ -6,9 +6,9 @@ export const getDateIndex = (date: Date): number => {
 };
 
 export const getSelectedIndex = (todayIndex: number, intervalDay = 1): number => {
-  return todayIndex > 20 ? todayIndex : todayIndex + intervalDay;
+  return todayIndex > 20 ? todayIndex - 1 : todayIndex + intervalDay;
 };
 
 export const getSelectedDate = (todayIndex: number, date: Date, intervalDay = 1): string => {
-  return todayIndex > 20 ? dayjs(date).format(DATE_FORMAT) : dayjs(date).add(intervalDay, 'day').format(DATE_FORMAT);
+  return todayIndex > 20 ? dayjs(date).subtract(1, 'day').format(DATE_FORMAT) : dayjs(date).add(intervalDay, 'day').format(DATE_FORMAT);
 };

packages/devui-vue/devui/date-picker-pro/__tests__/year-picker.spec.tsx

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import DDatePickerPro from '../src/date-picker-pro';
 import DRangeDatePickerPro from '../src/components/range-date-picker-pro';
 import { nextTick, ref, getCurrentInstance } from 'vue';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { Locale } from '../../locale';
 
 const ns = useNamespace('date-picker-pro', true);

packages/devui-vue/devui/date-picker-pro/src/components/calendar-panel.tsx

@@ -1,11 +1,13 @@
 import { defineComponent, getCurrentInstance } from 'vue';
 import type { SetupContext } from 'vue';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
+import { RecycleScroller } from 'vue-virtual-scroller'
 import useCalendarPanel from '../composables/use-calendar-panel';
 import { YearAndMonthItem, datePickerProPanelProps, DatePickerProPanelProps } from '../date-picker-pro-types';
 import { createI18nTranslate } from '../../../locale/create';
 import { yearListHeight, yearItemHeight, calendarListHeight, calendarItemHeight } from '../const';
 import { VirtualList } from '../../../virtual-list';
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 export default defineComponent({
   name: 'CalendarPanel',
@@ -34,7 +36,8 @@ export default defineComponent({
     } = useCalendarPanel(props, ctx);
     return () => {
       const yearItemSlots = {
-        item: (item: YearAndMonthItem) => {
+        default: (scoped: any) => {
+          const item = scoped.item;
           return (
             <div class={[ns.em('calendar-panel', 'year-list-item'), item.active && ns.e('year-title-active')]}>
               {!item.isMonth && !isListCollapse.value && (
@@ -106,13 +109,14 @@ export default defineComponent({
 
       return (
         <div class={ns.e('calendar-panel')}>
-          <VirtualList
-            ref={yearScrollRef}
-            class={ns.em('calendar-panel', 'year-list')}
-            data={yearAndMonthList.value}
-            height={yearListHeight}
-            itemHeight={yearItemHeight}
-            v-slots={yearItemSlots}></VirtualList>
+          <div class={ns.em('calendar-panel', 'year-list')}>
+            <RecycleScroller
+              ref={yearScrollRef}
+              items={yearAndMonthList.value}
+              itemSize={yearListHeight}
+              style={{ width: '100%', height: '100%' }}
+              v-slot={yearItemSlots}></RecycleScroller>
+          </div>
           <div class={ns.em('calendar-panel', 'main')}>
             <table class={ns.e('calendar-table')}>
               <thead>

packages/devui-vue/devui/date-picker-pro/src/components/date-picker-panel.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, getCurrentInstance } from 'vue';
 import type { SetupContext } from 'vue';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import CalendarPanel from './calendar-panel';
 import TimerPickerPanel from './time-picker-panel';
 import { Button } from '../../../button';

packages/devui-vue/devui/date-picker-pro/src/components/month-calendar-panel.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, getCurrentInstance } from 'vue';
 import type { SetupContext } from 'vue';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import useMonthCalendarPanel from '../composables/use-month-calendar-panel';
 import { datePickerProPanelProps, DatePickerProPanelProps, YearAndMonthItem } from '../date-picker-pro-types';
 import { createI18nTranslate } from '../../../locale/create';

packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx

@@ -1,12 +1,12 @@
-import { defineComponent, Transition, ref, renderSlot, useSlots, getCurrentInstance, Teleport, withModifiers } from 'vue';
+import { defineComponent, Transition, ref, renderSlot, useSlots, getCurrentInstance, Teleport, withModifiers, toRefs } from 'vue';
 import type { SetupContext } from 'vue';
 import { rangeDatePickerProProps, RangeDatePickerProProps } from '../range-date-picker-types';
 import { FlexibleOverlay } from '../../../overlay';
 import DatePickerProPanel from './date-picker-panel';
 import { Input } from '../../../input';
 import { IconCalendar } from './icon-calendar';
 import { IconClose } from './icon-close';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import useRangePickerPro from '../composables/use-range-date-picker-pro';
 
 import '../date-picker-pro.scss';
@@ -19,6 +19,7 @@ export default defineComponent({
   setup(props: RangeDatePickerProProps, ctx: SetupContext) {
     const app = getCurrentInstance();
     const t = createI18nTranslate('DDatePickerPro', app);
+    const { position } = toRefs(props)
 
     const ns = useNamespace('range-date-picker-pro');
     const {
@@ -42,8 +43,8 @@ export default defineComponent({
       onSelectedDate,
       handlerClearTime,
       onChangeRangeFocusType,
+      onStartInputChange,
     } = useRangePickerPro(props, ctx);
-    const position = ref(['bottom-start', 'top-start']);
 
     return () => {
       const vSlots = {
@@ -56,8 +57,8 @@ export default defineComponent({
           <div
             class={[ns.e('range-picker'), pickerDisabled.value && ns.m('disabled'), isValidateError.value && ns.m('error')]}
             ref={originRef}
-            onMouseover={() => (isMouseEnter.value = true)}
-            onMouseout={() => (isMouseEnter.value = false)}>
+            onMouseenter={() => (isMouseEnter.value = true)}
+            onMouseleave={() => (isMouseEnter.value = false)}>
             <span
               class={[
                 isPanelShow.value && focusType.value === 'start' ? ns.e('active-input') : ns.e('normal-input'),
@@ -68,6 +69,8 @@ export default defineComponent({
                 ref={startInputRef}
                 modelValue={displayDateValue.value[0]}
                 placeholder={placeholder.value[0] || t('startPlaceholder')}
+                onUpate:modelValue={(val) => onStartInputChange(val, 'start')}
+                validate-event={false}
                 onFocus={withModifiers(
                   (e: MouseEvent) => {
                     onFocus('start');
@@ -98,6 +101,8 @@ export default defineComponent({
                 ref={endInputRef}
                 modelValue={displayDateValue.value[1]}
                 placeholder={placeholder.value[1] || t('endPlaceholder')}
+                onUpate:modelValue={(val) => onStartInputChange(val, 'end')}
+                validate-event={false}
                 onFocus={withModifiers(
                   (e: MouseEvent) => {
                     onFocus('end');
@@ -109,11 +114,11 @@ export default defineComponent({
                 disabled={pickerDisabled.value}
                 v-slots={{
                   suffix: () => (
-                    <span
-                      class={[showCloseIcon.value ? ns.m('icon-visible') : ns.m('icon-hidden'), 'close-icon']}
-                      onClick={handlerClearTime}>
-                      <IconClose></IconClose>
-                    </span>
+                    showCloseIcon.value ?
+                      <span
+                        class={[ns.m('icon-visible'), 'close-icon']} onClick={handlerClearTime}>
+                        <IconClose />
+                      </span> : null
                   ),
                 }}
               />

packages/devui-vue/devui/date-picker-pro/src/components/time-picker-panel.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, getCurrentInstance } from 'vue';
 import type { SetupContext } from 'vue';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import DTimeList from '../../../time-picker/src/components/popup-line';
 import useTimePickerPanel from '../composables/use-time-picker-panel';
 import { TimerPickerPanelProps, timerPickerPanelProps } from '../date-picker-pro-types';

packages/devui-vue/devui/date-picker-pro/src/components/year-calendar-panel.tsx

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import type { SetupContext } from 'vue';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import useYearCalendarPanel from '../composables/use-year-calendar-panel';
 import { datePickerProPanelProps, DatePickerProPanelProps } from '../date-picker-pro-types';
 import { yearPickerHeight, yearCalendarItemHeight } from '../const';

packages/devui-vue/devui/date-picker-pro/src/composables/use-calendar-panel.ts

@@ -1,10 +1,11 @@
 import { ref, onBeforeMount, nextTick, watch, onMounted } from 'vue';
 import type { SetupContext } from 'vue';
+import { v4 as uuidv4 } from 'uuid'
 import { DAY_DURATION, calendarItemHeight } from '../const';
 import { CalendarDateItem, YearAndMonthItem, UseCalendarPanelReturnType, DatePickerProPanelProps } from '../date-picker-pro-types';
 import dayjs from 'dayjs';
 import type { Dayjs } from 'dayjs';
-import { throttle } from 'lodash';
+import throttle from 'lodash/throttle';
 import useCalendarSelected from './use-calendar-selected';
 
 export default function useCalendarPanel(props: DatePickerProPanelProps, ctx: SetupContext): UseCalendarPanelReturnType {
@@ -68,6 +69,7 @@ export default function useCalendarPanel(props: DatePickerProPanelProps, ctx: Se
 
     for (let year = calendarRange.value[0]; year <= calendarRange.value[1]; year++) {
       const yearOption: YearAndMonthItem = {
+        id: uuidv4(),
         year,
         isMonth: false,
         active: false,
@@ -81,6 +83,7 @@ export default function useCalendarPanel(props: DatePickerProPanelProps, ctx: Se
         };
         allMonthList.value.push(monthOption);
         const yearMonthOption: YearAndMonthItem = {
+          id: uuidv4(),
           year,
           month,
           isMonth: true,
@@ -121,7 +124,7 @@ export default function useCalendarPanel(props: DatePickerProPanelProps, ctx: Se
     }
     nextTick(() => {
       const scrollEl = yearScrollRef.value;
-      scrollEl?.scrollTo?.(scrollIndex);
+      scrollEl?.scrollToItem?.(scrollIndex);
     });
   };
 
@@ -149,7 +152,9 @@ export default function useCalendarPanel(props: DatePickerProPanelProps, ctx: Se
     }
     const toDate = getToDate(props.dateValue);
     if (toDate) {
-      goToShowDate(toDate.toDate());
+      nextTick(() => {
+        goToShowDate(toDate.toDate());
+      })
     }
   };
 
@@ -202,7 +207,12 @@ export default function useCalendarPanel(props: DatePickerProPanelProps, ctx: Se
     const selectedMonth = activeItem?.month;
     isListCollapse.value = !isListCollapse.value;
     if (isListCollapse.value) {
-      yearAndMonthList.value = yearAndMonthList.value.filter((child) => !child.isMonth);
+      yearAndMonthList.value = yearAndMonthList.value
+        .map((child) => {
+          child.active = false;
+          return child;
+        })
+        .filter((child) => !child.isMonth);
     } else {
       initCalendarData();
     }

packages/devui-vue/devui/date-picker-pro/src/composables/use-month-calendar-panel.ts

@@ -1,9 +1,9 @@
 import { ref, onBeforeMount, nextTick, watch } from 'vue';
 import type { SetupContext } from 'vue';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { monthCalendarItemHeight } from '../const';
 import { DatePickerProPanelProps, YearAndMonthItem, UseMonthCalendarPanelReturnType } from '../date-picker-pro-types';
-import { throttle } from 'lodash';
+import throttle from 'lodash/throttle';
 import dayjs from 'dayjs';
 import type { Dayjs } from 'dayjs';
 import useCalendarSelected from './use-calendar-selected';