From fe3fea491f78f06e3610c02115450d2cb43b0af8 Mon Sep 17 00:00:00 2001
From: mengxiong10 <15623530290@163.com>
Date: Thu, 19 Nov 2020 09:42:51 +0800
Subject: [PATCH] feat: add `panel-change` `update:showTimePanel`
---
example/.eslintrc.js | 2 +-
src/calendar/calendar-panel.js | 14 ++++++++++----
src/calendar/calendar-range.js | 2 +-
src/calendar/table-year.vue | 30 ++++++++++++++++++++----------
src/date-picker.js | 28 ++++++++++++++++++++++++++--
src/datetime/datetime-panel.js | 6 +++++-
src/datetime/datetime-range.js | 4 ++++
src/time/list-columns.vue | 12 ++++++------
src/util/base.js | 8 ++++++--
9 files changed, 79 insertions(+), 27 deletions(-)
diff --git a/example/.eslintrc.js b/example/.eslintrc.js
index ea77d02..080c66e 100644
--- a/example/.eslintrc.js
+++ b/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'],
diff --git a/src/calendar/calendar-panel.js b/src/calendar/calendar-panel.js
index 00fd58c..8314ee2 100644
--- a/src/calendar/calendar-panel.js
+++ b/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 {
diff --git a/src/calendar/calendar-range.js b/src/calendar/calendar-range.js
index 04fe5eb..efed38a 100644
--- a/src/calendar/calendar-range.js
+++ b/src/calendar/calendar-range.js
@@ -8,10 +8,10 @@ export default {
default: 'mx',
},
},
- emits: ['select'],
props: {
...CalendarPanel.props,
},
+ emits: ['select'],
data() {
return {
innerValue: [],
diff --git a/src/calendar/table-year.vue b/src/calendar/table-year.vue
index 9ce62d6..985a219 100644
--- a/src/calendar/table-year.vue
+++ b/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();
diff --git a/src/date-picker.js b/src/date-picker.js
index 1216b13..39bf67c 100644
--- a/src/date-picker.js
+++ b/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 = ;
+ const content = ;
return (
{this.renderSlot('content', content, {
diff --git a/src/datetime/datetime-panel.js b/src/datetime/datetime-panel.js
index fd13d12..9d7159e 100644
--- a/src/datetime/datetime-panel.js
+++ b/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() {
diff --git a/src/datetime/datetime-range.js b/src/datetime/datetime-range.js
index af6cf7d..6b3bf86 100644
--- a/src/datetime/datetime-range.js
+++ b/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() {
diff --git a/src/time/list-columns.vue b/src/time/list-columns.vue
index 32224c3..94311aa 100644
--- a/src/time/list-columns.vue
+++ b/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) };
});
diff --git a/src/util/base.js b/src/util/base.js
index f87ef33..bc1b9a0 100644
--- a/src/util/base.js
+++ b/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);
+}