chore: update test

__test__/date-picker.test.js

@@ -1,6 +1,6 @@
 import { shallowMount, createWrapper, mount } from '@vue/test-utils';
 import { format, parse } from 'date-fns';
-import Popup from '../src/popup';
+import Popup from '../src/popup.vue';
 import DatePicker from '../src/date-picker';
 
 let wrapper;
@@ -194,7 +194,7 @@ describe('DatePicker', () => {
 
   it('prop: shortcut', async () => {
     const date = new Date(2019, 4, 10);
-    wrapper = shallowMount(DatePicker, {
+    wrapper = mount(DatePicker, {
       propsData: {
         open: true,
         valueType: 'YYYY/MM/DD',
@@ -224,7 +224,7 @@ describe('DatePicker', () => {
         },
       ],
     });
-    btn.trigger('click');
+    await btn.trigger('click');
     expect(emitted.input[1]).toEqual([['2019/05/10', '2019/05/10']]);
   });
 
@@ -352,7 +352,7 @@ describe('DatePicker', () => {
       },
     });
     const els = wrapper.findAll('button');
-    els.wrappers.forEach(v => {
+    els.wrappers.forEach((v) => {
       expect(v.element.type).toBe('button');
     });
   });
@@ -428,7 +428,7 @@ describe('DatePicker', () => {
     wrapper = shallowMount(DatePicker, {
       format: 'YYYY-MM-DD',
       propsData: {
-        disabledDate: date => {
+        disabledDate: (date) => {
           return date < someday;
         },
       },

package.json

@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/mengxiong10/vue2-datepicker#readme",
   "peerDependencies": {
-    "vue": "^2.5.0"
+    "vue": "^2.7.14"
   },
   "dependencies": {
     "date-format-parse": "^0.2.7"
@@ -95,7 +95,7 @@
     "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-vue": "^5.1.6",
     "sass": "^1.22.10",
-    "vue": "^2.6.10",
+    "vue": "^2.7.14",
     "vue-hot-reload-api": "^2.3.3",
     "vue-jest": "^3.0.5",
     "vue-template-compiler": "^2.6.10"

src/calendar/calendar-panel.js

@@ -7,9 +7,9 @@ import {
   startOfMonth,
   startOfDay,
 } from '../util/date';
-import TableDate from './table-date';
-import TableMonth from './table-month';
-import TableYear from './table-year';
+import TableDate from './table-date.vue';
+import TableMonth from './table-month.vue';
+import TableYear from './table-year.vue';
 
 export default {
   name: 'CalendarPanel',
@@ -85,7 +85,7 @@ export default {
         date: startOfDay,
       };
       const start = map[this.type] || map.date;
-      return value.filter(isValidDate).map(v => start(v));
+      return value.filter(isValidDate).map((v) => start(v));
     },
     calendarYear() {
       return this.innerCalendar.getFullYear();
@@ -224,7 +224,7 @@ export default {
       if (this.isDisabled(cellDate)) {
         return 'disabled';
       }
-      if (this.innerValue.some(v => v.getTime() === cellDate.getTime())) {
+      if (this.innerValue.some((v) => v.getTime() === cellDate.getTime())) {
         return 'active';
       }
       return '';
@@ -233,7 +233,7 @@ export default {
       if (this.type !== 'week') return '';
       const start = row[0].getTime();
       const end = row[6].getTime();
-      const active = this.innerValue.some(v => {
+      const active = this.innerValue.some((v) => {
         const time = v.getTime();
         return time >= start && time <= end;
       });

src/calendar/table-date.vue

@@ -26,9 +26,7 @@
           v-for="item in yearMonth"
           :key="item.panel"
           type="button"
-          :class="
-            `${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-current-${item.panel}`
-          "
+          :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-current-${item.panel}`"
           @click="handlePanelChange(item.panel)"
         >
           {{ item.label }}
@@ -77,7 +75,7 @@
 
 <script>
 import { getWeek, format } from 'date-format-parse';
-import IconButton from './icon-button';
+import IconButton from './icon-button.vue';
 import { chunk } from '../util/base';
 import { getCalendar, setMonth, setYear } from '../util/date';
 import { getLocale } from '../locale';
@@ -186,28 +184,28 @@ export default {
     handleIconLeftClick() {
       this.$emit(
         'changecalendar',
-        setMonth(this.calendar, v => v - 1),
+        setMonth(this.calendar, (v) => v - 1),
         'last-month'
       );
     },
     handleIconRightClick() {
       this.$emit(
         'changecalendar',
-        setMonth(this.calendar, v => v + 1),
+        setMonth(this.calendar, (v) => v + 1),
         'next-month'
       );
     },
     handleIconDoubleLeftClick() {
       this.$emit(
         'changecalendar',
-        setYear(this.calendar, v => v - 1),
+        setYear(this.calendar, (v) => v - 1),
         'last-year'
       );
     },
     handleIconDoubleRightClick() {
       this.$emit(
         'changecalendar',
-        setYear(this.calendar, v => v + 1),
+        setYear(this.calendar, (v) => v + 1),
         'next-year'
       );
     },
@@ -231,7 +229,7 @@ export default {
       }
       const index = target.getAttribute('data-row-col');
       if (index) {
-        const [row, col] = index.split(',').map(v => parseInt(v, 10));
+        const [row, col] = index.split(',').map((v) => parseInt(v, 10));
         const date = this.dates[row][col];
         this.$emit('select', new Date(date));
       }

src/calendar/table-month.vue

@@ -41,7 +41,7 @@
 
 <script>
 import { chunk } from '../util/base';
-import IconButton from './icon-button';
+import IconButton from './icon-button.vue';
 import { getLocale } from '../locale';
 import { setYear } from '../util/date';
 
@@ -102,14 +102,14 @@ export default {
     handleIconDoubleLeftClick() {
       this.$emit(
         'changecalendar',
-        setYear(this.calendar, v => v - 1),
+        setYear(this.calendar, (v) => v - 1),
         'last-year'
       );
     },
     handleIconDoubleRightClick() {
       this.$emit(
         'changecalendar',
-        setYear(this.calendar, v => v + 1),
+        setYear(this.calendar, (v) => v + 1),
         'next-year'
       );
     },

src/calendar/table-year.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import IconButton from './icon-button';
+import IconButton from './icon-button.vue';
 import { chunk } from '../util/base';
 import { setYear } from '../util/date';
 
@@ -77,7 +77,7 @@ export default {
       return this.years[0][0];
     },
     lastYear() {
-      const last = arr => arr[arr.length - 1];
+      const last = (arr) => arr[arr.length - 1];
       return last(last(this.years));
     },
   },
@@ -108,14 +108,14 @@ export default {
     handleIconDoubleLeftClick() {
       this.$emit(
         'changecalendar',
-        setYear(this.calendar, v => v - 10),
+        setYear(this.calendar, (v) => v - 10),
         'last-decade'
       );
     },
     handleIconDoubleRightClick() {
       this.$emit(
         'changecalendar',
-        setYear(this.calendar, v => v + 10),
+        setYear(this.calendar, (v) => v + 10),
         'next-decade'
       );
     },

src/date-picker.js

@@ -2,13 +2,13 @@ import { parse, format, getWeek } from 'date-format-parse';
 import { isValidDate, isValidRangeDate, isValidDates } from './util/date';
 import { pick, isObject, mergeDeep } from './util/base';
 import { getLocale } from './locale';
-import Popup from './popup';
-import IconCalendar from './icon/icon-calendar';
-import IconTime from './icon/icon-time';
-import IconClose from './icon/icon-close';
+import Popup from './popup.vue';
+import IconCalendar from './icon/icon-calendar.vue';
+import IconTime from './icon/icon-time.vue';
+import IconClose from './icon/icon-close.vue';
 import CalendarPanel from './calendar/calendar-panel';
 import CalendarRange from './calendar/calendar-range';
-import TimePanel from './time/time-panel';
+import TimePanel from './time/time-panel.vue';
 import TimeRange from './time/time-range';
 import DatetimePanel from './datetime/datetime-panel';
 import DatetimeRange from './datetime/datetime-range';
@@ -125,7 +125,7 @@ export default {
         return (
           Array.isArray(value) &&
           value.every(
-            v => isObject(v) && typeof v.text === 'string' && typeof v.onClick === 'function'
+            (v) => isObject(v) && typeof v.text === 'string' && typeof v.onClick === 'function'
           )
         );
       },
@@ -184,7 +184,7 @@ export default {
         return '';
       }
       if (Array.isArray(this.innerValue)) {
-        return this.innerValue.map(v => this.formatDate(v)).join(this.innerRangeSeparator);
+        return this.innerValue.map((v) => this.formatDate(v)).join(this.innerRangeSeparator);
       }
       return this.formatDate(this.innerValue);
     },
@@ -322,11 +322,11 @@ export default {
       if (!Array.isArray(value)) {
         value = [value];
       }
-      return value.every(v => !disabledDate(v) && !disabledTime(v));
+      return value.every((v) => !disabledDate(v) && !disabledTime(v));
     },
     handleMultipleDates(date, dates) {
       if (this.validMultipleType && dates) {
-        const nextDates = dates.filter(v => v.getTime() !== date.getTime());
+        const nextDates = dates.filter((v) => v.getTime() !== date.getTime());
         if (nextDates.length === dates.length) {
           nextDates.push(date);
         }
@@ -402,7 +402,7 @@ export default {
       }
       let date;
       if (this.validMultipleType) {
-        date = text.split(this.innerRangeSeparator).map(v => this.parseDate(v.trim()));
+        date = text.split(this.innerRangeSeparator).map((v) => this.parseDate(v.trim()));
       } else if (this.range) {
         let arr = text.split(this.innerRangeSeparator);
         if (arr.length !== 2) {
@@ -410,7 +410,7 @@ export default {
           // eg: 2019-10-09-2020-01-02
           arr = text.split(this.innerRangeSeparator.trim());
         }
-        date = arr.map(v => this.parseDate(v.trim()));
+        date = arr.map((v) => this.parseDate(v.trim()));
       } else {
         date = this.parseDate(text);
       }

src/datetime/datetime-panel.js

@@ -1,5 +1,5 @@
 import CalendarPanel from '../calendar/calendar-panel';
-import TimePanel from '../time/time-panel';
+import TimePanel from '../time/time-panel.vue';
 import { assignTime, getValidDate } from '../util/date';
 import { pick } from '../util/base';
 

src/index.js

@@ -2,7 +2,7 @@
 import DatePicker from './date-picker';
 import CalendarPanel from './calendar/calendar-panel';
 import CalendarRange from './calendar/calendar-range';
-import TimePanel from './time/time-panel';
+import TimePanel from './time/time-panel.vue';
 import TimeRange from './time/time-range';
 import DatetimePanel from './datetime/datetime-panel';
 import DatetimeRange from './datetime/datetime-range';

src/time/list-columns.vue

@@ -21,17 +21,17 @@
 </template>
 
 <script>
-import ScrollbarVertical from '../scrollbar/scrollbar-vertical';
+import ScrollbarVertical from '../scrollbar/scrollbar-vertical.vue';
 import { getScrollParent } from '../util/dom';
 
-const padNumber = value => {
+const padNumber = (value) => {
   value = parseInt(value, 10);
   return value < 10 ? `0${value}` : `${value}`;
 };
 
 const generateOptions = (length, step, options) => {
   if (Array.isArray(options)) {
-    return options.filter(v => v >= 0 && v < length);
+    return options.filter((v) => v >= 0 && v < length);
   }
   if (step <= 0) {
     step = 1;
@@ -122,7 +122,7 @@ export default {
       if (this.showSecond) cols.push({ type: 'second', list: this.getSecondsList() });
       if (this.use12h) cols.push({ type: 'ampm', list: this.getAMPMList() });
 
-      return cols.filter(v => v.list.length > 0);
+      return cols.filter((v) => v.list.length > 0);
     },
   },
   watch: {
@@ -139,7 +139,7 @@ export default {
   },
   methods: {
     getHoursList() {
-      return generateOptions(this.use12h ? 12 : 24, this.hourStep, this.hourOptions).map(num => {
+      return generateOptions(this.use12h ? 12 : 24, this.hourStep, this.hourOptions).map((num) => {
         const date = new Date(this.date);
         let text = padNumber(num);
         if (this.use12h) {
@@ -155,13 +155,13 @@ export default {
       });
     },
     getMinutesList() {
-      return generateOptions(60, this.minuteStep, this.minuteOptions).map(num => {
+      return generateOptions(60, this.minuteStep, this.minuteOptions).map((num) => {
         const value = new Date(this.date).setMinutes(num);
         return { value, text: padNumber(num) };
       });
     },
     getSecondsList() {
-      return generateOptions(60, this.secondStep, this.secondOptions).map(num => {
+      return generateOptions(60, this.secondStep, this.secondOptions).map((num) => {
         const value = new Date(this.date).setSeconds(num);
         return { value, text: padNumber(num) };
       });

src/time/list-options.vue

@@ -13,7 +13,7 @@
 
 <script>
 import { format } from 'date-format-parse';
-import ScrollbarVertical from '../scrollbar/scrollbar-vertical';
+import ScrollbarVertical from '../scrollbar/scrollbar-vertical.vue';
 import { getScrollParent } from '../util/dom';
 import { getLocale } from '../locale';
 

src/time/time-panel.vue

@@ -39,8 +39,8 @@
 <script>
 import { format } from 'date-format-parse';
 import { getValidDate } from '../util/date';
-import ListColumns from './list-columns';
-import ListOptions from './list-options';
+import ListColumns from './list-columns.vue';
+import ListOptions from './list-options.vue';
 import { getLocale } from '../locale';
 
 export default {
@@ -143,7 +143,7 @@ export default {
         use12h: /a/i.test(fmt),
       };
       const obj = {};
-      Object.keys(defaultProps).forEach(key => {
+      Object.keys(defaultProps).forEach((key) => {
         obj[key] = typeof this[key] === 'boolean' ? this[key] : defaultProps[key];
       });
       return obj;

src/time/time-range.js

@@ -1,4 +1,4 @@
-import TimePanel from './time-panel';
+import TimePanel from './time-panel.vue';
 import { isValidRangeDate } from '../util/date';
 
 export default {