feat: add panel-change update:showTimePanel

example/.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
     },
     'import/extensions': ['.js', '.jsx', '.vue'],
   },
-  extends: ['airbnb-base', 'plugin:vue/recommended', 'prettier', 'prettier/vue'],
+  extends: ['airbnb-base', 'prettier', 'prettier/vue'],
 
   plugins: ['vue'],
 

src/calendar/calendar-panel.js

@@ -21,7 +21,6 @@ export default {
       default: () => () => {},
     },
   },
-  emits: ['select', 'update:calendar'],
   props: {
     value: {},
     defaultValue: {
@@ -50,6 +49,9 @@ export default {
       type: Boolean,
       default: undefined,
     },
+    getYearPanel: {
+      type: Function,
+    },
     titleFormat: {
       type: String,
       default: 'YYYY-MM-DD',
@@ -61,6 +63,7 @@ export default {
       default: false,
     },
   },
+  emits: ['select', 'update:calendar'],
   data() {
     const panels = ['date', 'month', 'year'];
     const index = Math.max(panels.indexOf(this.type), panels.indexOf(this.defaultPanel));
@@ -79,7 +82,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();
@@ -126,7 +129,9 @@ export default {
       this.dispatchDatePicker('calendar-change', calendar, oldCalendar, type);
     },
     handelPanelChange(panel) {
+      const oldPanel = this.panel;
       this.panel = panel;
+      this.dispatchDatePicker('panel-change', panel, oldPanel);
     },
     handleSelectYear(year) {
       if (this.type === 'year') {
@@ -202,7 +207,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 '';
@@ -211,7 +216,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;
       });
@@ -225,6 +230,7 @@ export default {
         <TableYear
           calendar={innerCalendar}
           getCellClasses={this.getYearClasses}
+          getYearPanel={this.getYearPanel}
           onSelect={this.handleSelectYear}
           onChangecalendar={this.handleCalendarChange}
         />

src/calendar/calendar-range.js

@@ -8,10 +8,10 @@ export default {
       default: 'mx',
     },
   },
-  emits: ['select'],
   props: {
     ...CalendarPanel.props,
   },
+  emits: ['select'],
   data() {
     return {
       innerValue: [],

src/calendar/table-year.vue

@@ -49,26 +49,36 @@ export default {
       type: Function,
       default: () => [],
     },
+    getYearPanel: {
+      type: Function,
+    },
   },
   emits: ['select', 'changecalendar'],
   computed: {
     years() {
-      const firstYear = Math.floor(this.calendar.getFullYear() / 10) * 10;
+      const calendar = new Date(this.calendar);
+      if (typeof this.getYearPanel === 'function') {
+        return this.getYearPanel(calendar);
+      }
+      return this.getYears(calendar);
+    },
+    firstYear() {
+      return this.years[0][0];
+    },
+    lastYear() {
+      const last = (arr) => arr[arr.length - 1];
+      return last(last(this.years));
+    },
+  },
+  methods: {
+    getYears(calendar) {
+      const firstYear = Math.floor(calendar.getFullYear() / 10) * 10;
       const years = [];
       for (let i = 0; i < 10; i++) {
         years.push(firstYear + i);
       }
       return chunk(years, 2);
     },
-    firstYear() {
-      return this.years[0][0];
-    },
-    lastYear() {
-      const last = arr => arr[arr.length - 1];
-      return last(last(this.years));
-    },
-  },
-  methods: {
     getNextCalendar(diffYear) {
       const year = this.calendar.getFullYear();
       const month = this.calendar.getMonth();

src/date-picker.js

@@ -1,6 +1,6 @@
 import { parse, format, getWeek } from 'date-format-parse';
 import { isValidDate, isValidRangeDate, isValidDates } from './util/date';
-import { pick, isObject, mergeDeep } from './util/base';
+import { pick, isObject, mergeDeep, capitalize } from './util/base';
 import { getLocale } from './locale';
 import Popup from './popup';
 import IconCalendar from './icon/icon-calendar';
@@ -133,6 +133,25 @@ export default {
       },
     },
   },
+  emits: [
+    'update:modelValue',
+    'input',
+    'change',
+    'clear',
+    'confirm',
+    'open',
+    'close',
+    'update:open',
+    'blur',
+    'focus',
+    'pick',
+    'input-error',
+    'calendar-change',
+    'panel-change',
+    'inputError',
+    'calendarChange',
+    'panelChange',
+  ],
   data() {
     return {
       // cache the innervalue, wait to confirm
@@ -468,9 +487,14 @@ export default {
       const Component = map[this.type] || map.default;
       const props = {
         ...pick(this.$props, Object.keys(Component.props)),
+        ...pick(
+          this.$attrs,
+          (Component.emits || []).map((v) => `on${capitalize(v)}`)
+        ),
         value: this.currentValue,
+        onSelect: this.handleSelectDate,
       };
-      const content = <Component {...props} onSelect={this.handleSelectDate} ref="picker" />;
+      const content = <Component {...props} ref="picker" />;
       return (
         <div class={`${this.prefixClass}-datepicker-body`}>
           {this.renderSlot('content', content, {

src/datetime/datetime-panel.js

@@ -10,7 +10,6 @@ export default {
       default: 'mx',
     },
   },
-  emits: ['select'],
   props: {
     ...CalendarPanel.props,
     ...TimePanel.props,
@@ -19,6 +18,8 @@ export default {
       default: undefined,
     },
   },
+  emits: ['select', 'update:showTimePanel'],
+
   data() {
     return {
       defaultTimeVisible: false,
@@ -34,6 +35,9 @@ export default {
     value(val) {
       this.currentValue = val;
     },
+    defaultTimeVisible(val) {
+      this.$emit('update:showTimePanel', val);
+    },
   },
   methods: {
     closeTimePanel() {

src/datetime/datetime-range.js

@@ -18,6 +18,7 @@ export default {
       default: undefined,
     },
   },
+  emits: ['select', 'update:showTimePanel'],
   data() {
     return {
       defaultTimeVisible: false,
@@ -33,6 +34,9 @@ export default {
     value(val) {
       this.currentValue = val;
     },
+    defaultTimeVisible(val) {
+      this.$emit('update:showTimePanel', val);
+    },
   },
   methods: {
     closeTimePanel() {

src/time/list-columns.vue

@@ -24,14 +24,14 @@
 import ScrollbarVertical from '../scrollbar/scrollbar-vertical';
 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;
@@ -123,7 +123,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: {
@@ -140,7 +140,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) {
@@ -156,13 +156,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/util/base.js

@@ -37,7 +37,7 @@ export function pick(obj, props) {
     props = [props];
   }
   const res = {};
-  props.forEach(prop => {
+  props.forEach((prop) => {
     if (prop in obj) {
       res[prop] = obj[prop];
     }
@@ -56,7 +56,7 @@ export function mergeDeep(target, source) {
   }
   let result = target;
   if (isObject(source)) {
-    Object.keys(source).forEach(key => {
+    Object.keys(source).forEach((key) => {
       let value = source[key];
       if (isObject(value) && isObject(target[key])) {
         value = mergeDeep(target[key], value);
@@ -66,3 +66,7 @@ export function mergeDeep(target, source) {
   }
   return result;
 }
+
+export function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}