element-plus
Version:
A Component Library for Vue3.0
1,179 lines (1,158 loc) • 97.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var timePicker = require('../el-time-picker');
var locale = require('../locale');
var ElInput = require('../el-input');
var directives = require('../directives');
var aria = require('../utils/aria');
var ElButton = require('../el-button');
var dayjs = require('dayjs');
var util = require('../utils/util');
var dom = require('../utils/dom');
var customParseFormat = require('dayjs/plugin/customParseFormat');
var advancedFormat = require('dayjs/plugin/advancedFormat');
var localeData = require('dayjs/plugin/localeData');
var weekOfYear = require('dayjs/plugin/weekOfYear');
var weekYear = require('dayjs/plugin/weekYear');
var dayOfYear = require('dayjs/plugin/dayOfYear');
var isSameOrAfter = require('dayjs/plugin/isSameOrAfter');
var isSameOrBefore = require('dayjs/plugin/isSameOrBefore');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var ElInput__default = /*#__PURE__*/_interopDefaultLegacy(ElInput);
var ElButton__default = /*#__PURE__*/_interopDefaultLegacy(ElButton);
var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
var customParseFormat__default = /*#__PURE__*/_interopDefaultLegacy(customParseFormat);
var advancedFormat__default = /*#__PURE__*/_interopDefaultLegacy(advancedFormat);
var localeData__default = /*#__PURE__*/_interopDefaultLegacy(localeData);
var weekOfYear__default = /*#__PURE__*/_interopDefaultLegacy(weekOfYear);
var weekYear__default = /*#__PURE__*/_interopDefaultLegacy(weekYear);
var dayOfYear__default = /*#__PURE__*/_interopDefaultLegacy(dayOfYear);
var isSameOrAfter__default = /*#__PURE__*/_interopDefaultLegacy(isSameOrAfter);
var isSameOrBefore__default = /*#__PURE__*/_interopDefaultLegacy(isSameOrBefore);
var script = vue.defineComponent({
props: {
date: {
type: Object,
},
minDate: {
type: Object,
},
maxDate: {
type: Object,
},
parsedValue: {
type: [Object, Array],
},
selectionMode: {
type: String,
default: 'day',
},
showWeekNumber: {
type: Boolean,
default: false,
},
disabledDate: {
type: Function,
},
cellClassName: {
type: Function,
},
rangeState: {
type: Object,
default: () => ({
endDate: null,
selecting: false,
}),
},
},
emits: ['changerange', 'pick', 'select'],
setup(props, ctx) {
const lastRow = vue.ref(null);
const lastColumn = vue.ref(null);
const tableRows = vue.ref([[], [], [], [], [], []]);
const firstDayOfWeek = props.date.$locale().weekStart || 7;
const WEEKS_CONSTANT = props.date.locale('en').localeData().weekdaysShort().map(_ => _.toLowerCase());
const offsetDay = vue.computed(() => {
return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek;
});
const startDate = vue.computed(() => {
const startDayOfMonth = props.date.startOf('month');
return startDayOfMonth.subtract(startDayOfMonth.day() || 7, 'day');
});
const WEEKS = vue.computed(() => {
return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(firstDayOfWeek, firstDayOfWeek + 7);
});
const rows = vue.computed(() => {
var _a;
const startOfMonth = props.date.startOf('month');
const startOfMonthDay = startOfMonth.day() || 7;
const dateCountOfMonth = startOfMonth.daysInMonth();
const dateCountOfLastMonth = startOfMonth.subtract(1, 'month').daysInMonth();
const offset = offsetDay.value;
const rows_ = tableRows.value;
let count = 1;
const selectedDate = props.selectionMode === 'dates' ? util.coerceTruthyValueToArray(props.parsedValue) : [];
const calNow = dayjs__default['default']().startOf('day');
for (let i = 0; i < 6; i++) {
const row = rows_[i];
if (props.showWeekNumber) {
if (!row[0]) {
row[0] = {
type: 'week',
text: startDate.value.add(i * 7 + 1, 'day').week(),
};
}
}
for (let j = 0; j < 7; j++) {
let cell = row[props.showWeekNumber ? j + 1 : j];
if (!cell) {
cell = {
row: i,
column: j,
type: 'normal',
inRange: false,
start: false,
end: false,
};
}
const index = i * 7 + j;
const calTime = startDate.value.add(index - offset, 'day');
cell.type = 'normal';
const calEndDate = props.rangeState.endDate || props.maxDate
|| props.rangeState.selecting && props.minDate;
cell.inRange = (props.minDate &&
calTime.isSameOrAfter(props.minDate, 'day')) && (calEndDate &&
calTime.isSameOrBefore(calEndDate, 'day')) || (props.minDate &&
calTime.isSameOrBefore(props.minDate, 'day')) && (calEndDate &&
calTime.isSameOrAfter(calEndDate, 'day'));
if ((_a = props.minDate) === null || _a === void 0 ? void 0 : _a.isSameOrAfter(calEndDate)) {
cell.start = calEndDate && calTime.isSame(calEndDate, 'day');
cell.end = props.minDate && calTime.isSame(props.minDate, 'day');
}
else {
cell.start = props.minDate && calTime.isSame(props.minDate, 'day');
cell.end = calEndDate && calTime.isSame(calEndDate, 'day');
}
const isToday = calTime.isSame(calNow, 'day');
if (isToday) {
cell.type = 'today';
}
if (i >= 0 && i <= 1) {
const numberOfDaysFromPreviousMonth = startOfMonthDay + offset < 0 ? 7 + startOfMonthDay + offset : startOfMonthDay + offset;
if (j + i * 7 >= numberOfDaysFromPreviousMonth) {
cell.text = count++;
}
else {
cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - j % 7) + 1 + i * 7;
cell.type = 'prev-month';
}
}
else {
if (count <= dateCountOfMonth) {
cell.text = count++;
}
else {
cell.text = count++ - dateCountOfMonth;
cell.type = 'next-month';
}
}
const cellDate = calTime.toDate();
cell.selected = selectedDate.find(_ => _.valueOf() === calTime.valueOf());
cell.disabled = props.disabledDate && props.disabledDate(cellDate);
cell.customClass = props.cellClassName && props.cellClassName(cellDate);
row[props.showWeekNumber ? j + 1 : j] = cell;
}
if (props.selectionMode === 'week') {
const start = props.showWeekNumber ? 1 : 0;
const end = props.showWeekNumber ? 7 : 6;
const isActive = isWeekActive(row[start + 1]);
row[start].inRange = isActive;
row[start].start = isActive;
row[end].inRange = isActive;
row[end].end = isActive;
}
}
return rows_;
});
const cellMatchesDate = (cell, date) => {
if (!date)
return false;
return dayjs__default['default'](date)
.isSame(props.date.date(Number(cell.text)), 'day');
};
const getCellClasses = cell => {
let classes = [];
if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {
classes.push('available');
if (cell.type === 'today') {
classes.push('today');
}
}
else {
classes.push(cell.type);
}
if (props.selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && cellMatchesDate(cell, props.parsedValue)) {
classes.push('current');
}
if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today') || props.selectionMode === 'week')) {
classes.push('in-range');
if (cell.start) {
classes.push('start-date');
}
if (cell.end) {
classes.push('end-date');
}
}
if (cell.disabled) {
classes.push('disabled');
}
if (cell.selected) {
classes.push('selected');
}
if (cell.customClass) {
classes.push(cell.customClass);
}
return classes.join(' ');
};
const getDateOfCell = (row, column) => {
const offsetFromStart = row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - offsetDay.value;
return startDate.value.add(offsetFromStart, 'day');
};
const handleMouseMove = event => {
if (!props.rangeState.selecting)
return;
let target = event.target;
if (target.tagName === 'SPAN') {
target = target.parentNode.parentNode;
}
if (target.tagName === 'DIV') {
target = target.parentNode;
}
if (target.tagName !== 'TD')
return;
const row = target.parentNode.rowIndex - 1;
const column = target.cellIndex;
if (rows.value[row][column].disabled)
return;
if (row !== lastRow.value || column !== lastColumn.value) {
lastRow.value = row;
lastColumn.value = column;
ctx.emit('changerange', {
selecting: true,
endDate: getDateOfCell(row, column),
});
}
};
const handleClick = event => {
let target = event.target;
if (target.tagName === 'SPAN') {
target = target.parentNode.parentNode;
}
if (target.tagName === 'DIV') {
target = target.parentNode;
}
if (target.tagName !== 'TD')
return;
const row = target.parentNode.rowIndex - 1;
const column = target.cellIndex;
const cell = rows.value[row][column];
if (cell.disabled || cell.type === 'week')
return;
const newDate = getDateOfCell(row, column);
if (props.selectionMode === 'range') {
if (!props.rangeState.selecting) {
ctx.emit('pick', { minDate: newDate, maxDate: null });
ctx.emit('select', true);
}
else {
if (newDate >= props.minDate) {
ctx.emit('pick', { minDate: props.minDate, maxDate: newDate });
}
else {
ctx.emit('pick', { minDate: newDate, maxDate: props.minDate });
}
ctx.emit('select', false);
}
}
else if (props.selectionMode === 'day') {
ctx.emit('pick', newDate);
}
else if (props.selectionMode === 'week') {
const weekNumber = newDate.week();
const value = newDate.year() + 'w' + weekNumber;
ctx.emit('pick', {
year: newDate.year(),
week: weekNumber,
value: value,
date: newDate.startOf('week'),
});
}
else if (props.selectionMode === 'dates') {
const newValue = cell.selected
? util.coerceTruthyValueToArray(props.parsedValue).filter(_ => _.valueOf() !== newDate.valueOf())
: util.coerceTruthyValueToArray(props.parsedValue).concat([newDate]);
ctx.emit('pick', newValue);
}
};
const isWeekActive = cell => {
if (props.selectionMode !== 'week')
return false;
let newDate = props.date.startOf('day');
if (cell.type === 'prev-month') {
newDate = newDate.subtract(1, 'month');
}
if (cell.type === 'next-month') {
newDate = newDate.add(1, 'month');
}
newDate = newDate.date(parseInt(cell.text, 10));
if (props.parsedValue && !Array.isArray(props.parsedValue)) {
const dayOffset = (props.parsedValue.day() - firstDayOfWeek + 7) % 7 - 1;
const weekDate = props.parsedValue.subtract(dayOffset, 'day');
return weekDate.isSame(newDate, 'day');
}
return false;
};
return {
handleMouseMove,
t: locale.t,
rows,
isWeekActive,
getCellClasses,
WEEKS,
handleClick,
};
},
});
const _hoisted_1 = { key: 0 };
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createBlock("table", {
cellspacing: "0",
cellpadding: "0",
class: ["el-date-table", { 'is-week-mode': _ctx.selectionMode === 'week' }],
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args))),
onMousemove: _cache[2] || (_cache[2] = (...args) => (_ctx.handleMouseMove && _ctx.handleMouseMove(...args)))
}, [
vue.createVNode("tbody", null, [
vue.createVNode("tr", null, [
(_ctx.showWeekNumber)
? (vue.openBlock(), vue.createBlock("th", _hoisted_1, vue.toDisplayString(_ctx.t('el.datepicker.week')), 1 /* TEXT */))
: vue.createCommentVNode("v-if", true),
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.WEEKS, (week, key) => {
return (vue.openBlock(), vue.createBlock("th", { key: key }, vue.toDisplayString(_ctx.t('el.datepicker.weeks.' + week)), 1 /* TEXT */))
}), 128 /* KEYED_FRAGMENT */))
]),
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row, key) => {
return (vue.openBlock(), vue.createBlock("tr", {
key: key,
class: ["el-date-table__row", { current: _ctx.isWeekActive(row[1]) }]
}, [
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(row, (cell, key_) => {
return (vue.openBlock(), vue.createBlock("td", {
key: key_,
class: _ctx.getCellClasses(cell)
}, [
vue.createVNode("div", null, [
vue.createVNode("span", null, vue.toDisplayString(cell.text), 1 /* TEXT */)
])
], 2 /* CLASS */))
}), 128 /* KEYED_FRAGMENT */))
], 2 /* CLASS */))
}), 128 /* KEYED_FRAGMENT */))
])
], 34 /* CLASS, HYDRATE_EVENTS */))
}
script.render = render;
script.__file = "packages/date-picker/src/date-picker-com/basic-date-table.vue";
const datesInMonth = (year, month) => {
const firstDay = dayjs__default['default']().startOf('month').month(month).year(year);
const numOfDays = firstDay.daysInMonth();
return timePicker.rangeArr(numOfDays).map(n => firstDay.add(n, 'day').toDate());
};
var script$1 = vue.defineComponent({
props: {
disabledDate: {
type: Function,
},
selectionMode: {
type: String,
default: 'month',
},
minDate: {
type: Object,
},
maxDate: {
type: Object,
},
date: {
type: Object,
},
parsedValue: {
type: Object,
},
rangeState: {
type: Object,
default: () => ({
endDate: null,
selecting: false,
}),
},
},
emits: ['changerange', 'pick', 'select'],
setup(props, ctx) {
const months = vue.ref(props.date.locale('en').localeData().monthsShort().map(_ => _.toLowerCase()));
const tableRows = vue.ref([[], [], []]);
const lastRow = vue.ref(null);
const lastColumn = vue.ref(null);
const rows = vue.computed(() => {
var _a;
const rows = tableRows.value;
const now = dayjs__default['default']().startOf('month');
for (let i = 0; i < 3; i++) {
const row = rows[i];
for (let j = 0; j < 4; j++) {
let cell = row[j];
if (!cell) {
cell = {
row: i,
column: j,
type: 'normal',
inRange: false,
start: false,
end: false,
};
}
cell.type = 'normal';
const index = i * 4 + j;
const calTime = props.date.startOf('year').month(index);
const calEndDate = props.rangeState.endDate || props.maxDate
|| props.rangeState.selecting && props.minDate;
cell.inRange = (props.minDate &&
calTime.isSameOrAfter(props.minDate, 'month')
&& (calEndDate &&
calTime.isSameOrBefore(calEndDate, 'month'))) || (props.minDate &&
calTime.isSameOrBefore(props.minDate, 'month')
&& (calEndDate &&
calTime.isSameOrAfter(calEndDate, 'month')));
if ((_a = props.minDate) === null || _a === void 0 ? void 0 : _a.isSameOrAfter(calEndDate)) {
cell.start = calEndDate && calTime.isSame(calEndDate, 'month');
cell.end = props.minDate && calTime.isSame(props.minDate, 'month');
}
else {
cell.start = props.minDate && calTime.isSame(props.minDate, 'month');
cell.end = calEndDate && calTime.isSame(calEndDate, 'month');
}
const isToday = now.isSame(calTime);
if (isToday) {
cell.type = 'today';
}
cell.text = index;
let cellDate = calTime.toDate();
cell.disabled = props.disabledDate && props.disabledDate(cellDate);
row[j] = cell;
}
}
return rows;
});
const getCellStyle = cell => {
const style = {};
const year = props.date.year();
const today = new Date();
const month = cell.text;
style.disabled = props.disabledDate
? datesInMonth(year, month).every(props.disabledDate)
: false;
style.current = util.coerceTruthyValueToArray(props.parsedValue).findIndex(date => date.year() === year && date.month() === month) >= 0;
style.today = today.getFullYear() === year && today.getMonth() === month;
if (cell.inRange) {
style['in-range'] = true;
if (cell.start) {
style['start-date'] = true;
}
if (cell.end) {
style['end-date'] = true;
}
}
return style;
};
const handleMouseMove = event => {
if (!props.rangeState.selecting)
return;
let target = event.target;
if (target.tagName === 'A') {
target = target.parentNode.parentNode;
}
if (target.tagName === 'DIV') {
target = target.parentNode;
}
if (target.tagName !== 'TD')
return;
const row = target.parentNode.rowIndex;
const column = target.cellIndex;
if (rows.value[row][column].disabled)
return;
if (row !== lastRow.value || column !== lastColumn.value) {
lastRow.value = row;
lastColumn.value = column;
ctx.emit('changerange', {
selecting: true,
endDate: props.date.startOf('year').month(row * 4 + column),
});
}
};
const handleMonthTableClick = event => {
let target = event.target;
if (target.tagName === 'A') {
target = target.parentNode.parentNode;
}
if (target.tagName === 'DIV') {
target = target.parentNode;
}
if (target.tagName !== 'TD')
return;
if (dom.hasClass(target, 'disabled'))
return;
const column = target.cellIndex;
const row = target.parentNode.rowIndex;
const month = row * 4 + column;
const newDate = props.date.startOf('year').month(month);
if (props.selectionMode === 'range') {
if (!props.rangeState.selecting) {
ctx.emit('pick', { minDate: newDate, maxDate: null });
ctx.emit('select', true);
}
else {
if (newDate >= props.minDate) {
ctx.emit('pick', { minDate: props.minDate, maxDate: newDate });
}
else {
ctx.emit('pick', { minDate: newDate, maxDate: props.minDate });
}
ctx.emit('select', false);
}
}
else {
ctx.emit('pick', month);
}
};
return {
handleMouseMove,
handleMonthTableClick,
rows,
getCellStyle,
t: locale.t,
months,
};
},
});
const _hoisted_1$1 = { class: "cell" };
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createBlock("table", {
class: "el-month-table",
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleMonthTableClick && _ctx.handleMonthTableClick(...args))),
onMousemove: _cache[2] || (_cache[2] = (...args) => (_ctx.handleMouseMove && _ctx.handleMouseMove(...args)))
}, [
vue.createVNode("tbody", null, [
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row, key) => {
return (vue.openBlock(), vue.createBlock("tr", { key: key }, [
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(row, (cell, key_) => {
return (vue.openBlock(), vue.createBlock("td", {
key: key_,
class: _ctx.getCellStyle(cell)
}, [
vue.createVNode("div", null, [
vue.createVNode("a", _hoisted_1$1, vue.toDisplayString(_ctx.t('el.datepicker.months.' + _ctx.months[cell.text])), 1 /* TEXT */)
])
], 2 /* CLASS */))
}), 128 /* KEYED_FRAGMENT */))
]))
}), 128 /* KEYED_FRAGMENT */))
])
], 32 /* HYDRATE_EVENTS */))
}
script$1.render = render$1;
script$1.__file = "packages/date-picker/src/date-picker-com/basic-month-table.vue";
const datesInYear = year => {
const firstDay = dayjs__default['default'](String(year)).startOf('year');
const lastDay = firstDay.endOf('year');
const numOfDays = lastDay.dayOfYear();
return timePicker.rangeArr(numOfDays).map(n => firstDay.add(n, 'day').toDate());
};
var script$2 = vue.defineComponent({
props: {
disabledDate: {
type: Function,
},
parsedValue: {
type: Object,
},
date: {
type: Object,
},
},
emits: ['pick'],
setup(props, ctx) {
const startYear = vue.computed(() => {
return Math.floor(props.date.year() / 10) * 10;
});
const getCellStyle = year => {
const style = {};
const today = dayjs__default['default']();
style.disabled = props.disabledDate
? datesInYear(year).every(props.disabledDate)
: false;
style.current = util.coerceTruthyValueToArray(props.parsedValue).findIndex(_ => _.year() === year) >= 0;
style.today = today.year() === year;
return style;
};
const handleYearTableClick = event => {
const target = event.target;
if (target.tagName === 'A') {
if (dom.hasClass(target.parentNode, 'disabled'))
return;
const year = target.textContent || target.innerText;
ctx.emit('pick', Number(year));
}
};
return {
startYear,
getCellStyle,
handleYearTableClick,
};
},
});
const _hoisted_1$2 = { class: "cell" };
const _hoisted_2 = { class: "cell" };
const _hoisted_3 = { class: "cell" };
const _hoisted_4 = { class: "cell" };
const _hoisted_5 = { class: "cell" };
const _hoisted_6 = { class: "cell" };
const _hoisted_7 = { class: "cell" };
const _hoisted_8 = { class: "cell" };
const _hoisted_9 = { class: "cell" };
const _hoisted_10 = { class: "cell" };
const _hoisted_11 = /*#__PURE__*/vue.createVNode("td", null, null, -1 /* HOISTED */);
const _hoisted_12 = /*#__PURE__*/vue.createVNode("td", null, null, -1 /* HOISTED */);
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createBlock("table", {
class: "el-year-table",
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleYearTableClick && _ctx.handleYearTableClick(...args)))
}, [
vue.createVNode("tbody", null, [
vue.createVNode("tr", null, [
vue.createVNode("td", {
class: ["available", _ctx.getCellStyle(_ctx.startYear + 0)]
}, [
vue.createVNode("a", _hoisted_1$2, vue.toDisplayString(_ctx.startYear), 1 /* TEXT */)
], 2 /* CLASS */),
vue.createVNode("td", {
class: ["available", _ctx.getCellStyle(_ctx.startYear + 1)]
}, [
vue.createVNode("a", _hoisted_2, vue.toDisplayString(_ctx.startYear + 1), 1 /* TEXT */)
], 2 /* CLASS */),
vue.createVNode("td", {
class: ["available", _ctx.getCellStyle(_ctx.startYear + 2)]
}, [
vue.createVNode("a", _hoisted_3, vue.toDisplayString(_ctx.startYear + 2), 1 /* TEXT */)
], 2 /* CLASS */),
vue.createVNode("td", {
class: ["available", _ctx.getCellStyle(_ctx.startYear + 3)]
}, [
vue.createVNode("a", _hoisted_4, vue.toDisplayString(_ctx.startYear + 3), 1 /* TEXT */)
], 2 /* CLASS */)
]),
vue.createVNode("tr", null, [
vue.createVNode("td", {
class: ["available", _ctx.getCellStyle(_ctx.startYear + 4)]
}, [
vue.createVNode("a", _hoisted_5, vue.toDisplayString(_ctx.startYear + 4), 1 /* TEXT */)
], 2 /* CLASS */),
vue.createVNode("td", {
class: ["available", _ctx.getCellStyle(_ctx.startYear + 5)]
}, [
vue.createVNode("a", _hoisted_6, vue.toDisplayString(_ctx.startYear + 5), 1 /* TEXT */)
], 2 /* CLASS */),
vue.createVNode("td", {
class: ["available", _ctx.getCellStyle(_ctx.startYear + 6)]
}, [
vue.createVNode("a", _hoisted_7, vue.toDisplayString(_ctx.startYear + 6), 1 /* TEXT */)
], 2 /* CLASS */),
vue.createVNode("td", {
class: ["available", _ctx.getCellStyle(_ctx.startYear + 7)]
}, [
vue.createVNode("a", _hoisted_8, vue.toDisplayString(_ctx.startYear + 7), 1 /* TEXT */)
], 2 /* CLASS */)
]),
vue.createVNode("tr", null, [
vue.createVNode("td", {
class: ["available", _ctx.getCellStyle(_ctx.startYear + 8)]
}, [
vue.createVNode("a", _hoisted_9, vue.toDisplayString(_ctx.startYear + 8), 1 /* TEXT */)
], 2 /* CLASS */),
vue.createVNode("td", {
class: ["available", _ctx.getCellStyle(_ctx.startYear + 9)]
}, [
vue.createVNode("a", _hoisted_10, vue.toDisplayString(_ctx.startYear + 9), 1 /* TEXT */)
], 2 /* CLASS */),
_hoisted_11,
_hoisted_12
])
])
]))
}
script$2.render = render$2;
script$2.__file = "packages/date-picker/src/date-picker-com/basic-year-table.vue";
const timeWithinRange = () => true;
var script$3 = vue.defineComponent({
components: {
DateTable: script, ElInput: ElInput__default['default'], ElButton: ElButton__default['default'], TimePickPanel: timePicker.TimePickPanel, MonthTable: script$1, YearTable: script$2,
},
directives: { clickoutside: directives.ClickOutside },
props: {
visible: {
type: Boolean,
default: false,
},
parsedValue: {
type: [Object, Array],
},
format: {
type: String,
default: '',
},
type: {
type: String,
required: true,
},
},
emits: ['pick', 'set-picker-option'],
setup(props, ctx) {
const innerDate = vue.ref(dayjs__default['default']());
const month = vue.computed(() => {
return innerDate.value.month();
});
const year = vue.computed(() => {
return innerDate.value.year();
});
const selectableRange = vue.ref([]);
const userInputDate = vue.ref(null);
const userInputTime = vue.ref(null);
const checkDateWithinRange = date => {
return selectableRange.value.length > 0
? timeWithinRange(date, selectableRange.value, props.format || 'HH:mm:ss')
: true;
};
const formatEmit = (emitDayjs) => {
if (showTime.value)
return emitDayjs.millisecond(0);
if (defaultTime) {
const defaultTimeD = dayjs__default['default'](defaultTime);
return defaultTimeD.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date());
}
return emitDayjs.startOf('day');
};
const emit = (value, ...args) => {
if (!value) {
ctx.emit('pick', value, ...args);
}
else if (Array.isArray(value)) {
const dates = value.map(formatEmit);
ctx.emit('pick', dates, ...args);
}
else {
ctx.emit('pick', formatEmit(value), ...args);
}
userInputDate.value = null;
userInputTime.value = null;
};
const handleDatePick = (value) => {
if (selectionMode.value === 'day') {
let newDate = props.parsedValue ? props.parsedValue.year(value.year()).month(value.month()).date(value.date()) : value;
if (!checkDateWithinRange(newDate)) {
newDate = selectableRange.value[0][0].year(value.year()).month(value.month()).date(value.date());
}
innerDate.value = newDate;
emit(newDate, showTime.value);
}
else if (selectionMode.value === 'week') {
emit(value.date);
}
else if (selectionMode.value === 'dates') {
emit(value, true);
}
};
const prevMonth_ = () => {
innerDate.value = innerDate.value.subtract(1, 'month');
};
const nextMonth_ = () => {
innerDate.value = innerDate.value.add(1, 'month');
};
const prevYear_ = () => {
if (currentView.value === 'year') {
innerDate.value = innerDate.value.subtract(10, 'year');
}
else {
innerDate.value = innerDate.value.subtract(1, 'year');
}
};
const nextYear_ = () => {
if (currentView.value === 'year') {
innerDate.value = innerDate.value.add(10, 'year');
}
else {
innerDate.value = innerDate.value.add(1, 'year');
}
};
const currentView = vue.ref('date');
const yearLabel = vue.computed(() => {
const yearTranslation = locale.t('el.datepicker.year');
if (currentView.value === 'year') {
const startYear = Math.floor(year.value / 10) * 10;
if (yearTranslation) {
return startYear + ' ' + yearTranslation + ' - ' + (startYear + 9) + ' ' + yearTranslation;
}
return startYear + ' - ' + (startYear + 9);
}
return year.value + ' ' + yearTranslation;
});
const handleShortcutClick = shortcut => {
if (shortcut.value) {
emit(dayjs__default['default'](shortcut.value));
return;
}
if (shortcut.onClick) {
shortcut.onClick(ctx);
}
};
const selectionMode = vue.computed(() => {
if (['week', 'month', 'year', 'dates'].includes(props.type)) {
return props.type;
}
return 'day';
});
vue.watch(() => selectionMode.value, val => {
if (['month', 'year'].includes(val)) {
currentView.value = val;
return;
}
currentView.value = 'date';
}, { immediate: true });
const hasShortcuts = vue.computed(() => !!shortcuts.length);
const handleMonthPick = month => {
innerDate.value = innerDate.value.startOf('month').month(month);
if (selectionMode.value === 'month') {
emit(innerDate.value);
}
else {
currentView.value = 'date';
}
};
const handleYearPick = year => {
if (selectionMode.value === 'year') {
innerDate.value = innerDate.value.startOf('year').year(year);
emit(innerDate.value);
}
else {
innerDate.value = innerDate.value.year(year);
currentView.value = 'month';
}
};
const showMonthPicker = () => {
currentView.value = 'month';
};
const showYearPicker = () => {
currentView.value = 'year';
};
const showTime = vue.computed(() => props.type === 'datetime' || props.type === 'datetimerange');
const footerVisible = vue.computed(() => {
return showTime.value || selectionMode.value === 'dates';
});
const onConfirm = () => {
if (selectionMode.value === 'dates') {
emit(props.parsedValue);
}
else {
let result = props.parsedValue;
if (!result) {
const defaultTimeD = dayjs__default['default'](defaultTime);
const defaultValueD = getDefaultValue();
result = defaultTimeD.year(defaultValueD.year()).month(defaultValueD.month()).date(defaultValueD.date());
}
innerDate.value = result;
emit(result);
}
};
const changeToNow = () => {
const now = dayjs__default['default']();
const nowDate = now.toDate();
if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) {
innerDate.value = dayjs__default['default']();
emit(innerDate.value);
}
};
const timeFormat = vue.computed(() => {
return timePicker.extractTimeFormat(props.format);
});
const dateFormat = vue.computed(() => {
return timePicker.extractDateFormat(props.format);
});
const visibleTime = vue.computed(() => {
if (userInputTime.value)
return userInputTime.value;
if (!props.parsedValue && !defaultValue)
return;
return (props.parsedValue || innerDate.value).format(timeFormat.value);
});
const visibleDate = vue.computed(() => {
if (userInputDate.value)
return userInputDate.value;
if (!props.parsedValue && !defaultValue)
return;
return (props.parsedValue || innerDate.value).format(dateFormat.value);
});
const timePickerVisible = vue.ref(false);
const onTimePickerInputFocus = () => {
timePickerVisible.value = true;
};
const handleTimePickClose = () => {
timePickerVisible.value = false;
};
const handleTimePick = (value, visible, first) => {
const newDate = props.parsedValue ? props.parsedValue.hour(value.hour()).minute(value.minute()).second(value.second()) : value;
innerDate.value = newDate;
emit(innerDate.value, true);
if (!first) {
timePickerVisible.value = visible;
}
};
const handleVisibleTimeChange = value => {
const newDate = dayjs__default['default'](value, timeFormat.value);
if (newDate.isValid() && checkDateWithinRange(newDate)) {
innerDate.value = newDate.year(innerDate.value.year()).month(innerDate.value.month()).date(innerDate.value.date());
userInputTime.value = null;
timePickerVisible.value = false;
emit(innerDate.value, true);
}
};
const handleVisibleDateChange = value => {
const newDate = dayjs__default['default'](value, dateFormat.value);
if (newDate.isValid()) {
if (disabledDate && disabledDate(newDate.toDate())) {
return;
}
innerDate.value = newDate.hour(innerDate.value.hour()).minute(innerDate.value.minute()).second(innerDate.value.second());
userInputDate.value = null;
emit(innerDate.value, true);
}
};
const isValidValue = date_ => {
return date_.isValid() && (disabledDate
? !disabledDate(date_.toDate())
: true);
};
const formatToString = value => {
if (selectionMode.value === 'dates') {
return value.map(_ => _.format(props.format));
}
return value.format(props.format);
};
const parseUserInput = value => {
return dayjs__default['default'](value, props.format);
};
const getDefaultValue = () => {
return dayjs__default['default'](defaultValue);
};
const handleKeydown = event => {
const { code, keyCode } = event;
const list = [aria.EVENT_CODE.up, aria.EVENT_CODE.down, aria.EVENT_CODE.left, aria.EVENT_CODE.right];
if (props.visible && !timePickerVisible.value) {
if (list.includes(code)) {
handleKeyControl(keyCode);
event.stopPropagation();
event.preventDefault();
}
if (code === aria.EVENT_CODE.enter
&& userInputDate.value === null
&& userInputTime.value === null) {
emit(innerDate, false);
}
}
};
const handleKeyControl = keyCode => {
const mapping = {
'year': {
38: -4, 40: 4, 37: -1, 39: 1, offset: (date, step) => date.setFullYear(date.getFullYear() + step),
},
'month': {
38: -4, 40: 4, 37: -1, 39: 1, offset: (date, step) => date.setMonth(date.getMonth() + step),
},
'week': {
38: -1, 40: 1, 37: -1, 39: 1, offset: (date, step) => date.setDate(date.getDate() + step * 7),
},
'day': {
38: -7, 40: 7, 37: -1, 39: 1, offset: (date, step) => date.setDate(date.getDate() + step),
},
};
const newDate = innerDate.value.toDate();
while (Math.abs(innerDate.value.diff(newDate, 'year', true)) < 1) {
const map = mapping[selectionMode.value];
map.offset(newDate, map[keyCode]);
if (disabledDate && disabledDate(newDate)) {
continue;
}
const result = dayjs__default['default'](newDate);
innerDate.value = result;
ctx.emit('pick', result, true);
break;
}
};
ctx.emit('set-picker-option', ['isValidValue', isValidValue]);
ctx.emit('set-picker-option', ['formatToString', formatToString]);
ctx.emit('set-picker-option', ['parseUserInput', parseUserInput]);
ctx.emit('set-picker-option', ['handleKeydown', handleKeydown]);
const pickerBase = vue.inject('EP_PICKER_BASE');
const { shortcuts, disabledDate, cellClassName, defaultTime, defaultValue, arrowControl } = pickerBase.props;
vue.watch(() => props.parsedValue, val => {
if (val) {
if (selectionMode.value === 'dates')
return;
if (Array.isArray(val))
return;
innerDate.value = val;
}
else {
innerDate.value = getDefaultValue();
}
}, { immediate: true });
return {
handleTimePick,
handleTimePickClose,
onTimePickerInputFocus,
timePickerVisible,
visibleTime,
visibleDate,
showTime,
changeToNow,
onConfirm,
footerVisible,
handleYearPick,
showMonthPicker,
showYearPicker,
handleMonthPick,
hasShortcuts,
shortcuts,
arrowControl,
disabledDate,
cellClassName,
selectionMode,
handleShortcutClick,
prevYear_,
nextYear_,
prevMonth_,
nextMonth_,
innerDate,
t: locale.t,
yearLabel,
currentView,
month,
handleDatePick,
handleVisibleTimeChange,
handleVisibleDateChange,
timeFormat,
userInputTime,
userInputDate,
};
},
});
const _hoisted_1$3 = { class: "el-picker-panel__body-wrapper" };
const _hoisted_2$1 = {
key: 0,
class: "el-picker-panel__sidebar"
};
const _hoisted_3$1 = { class: "el-picker-panel__body" };
const _hoisted_4$1 = {
key: 0,
class: "el-date-picker__time-header"
};
const _hoisted_5$1 = { class: "el-date-picker__editor-wrap" };
const _hoisted_6$1 = { class: "el-date-picker__editor-wrap" };
const _hoisted_7$1 = { class: "el-picker-panel__content" };
const _hoisted_8$1 = { class: "el-picker-panel__footer" };
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_input = vue.resolveComponent("el-input");
const _component_time_pick_panel = vue.resolveComponent("time-pick-panel");
const _component_date_table = vue.resolveComponent("date-table");
const _component_year_table = vue.resolveComponent("year-table");
const _component_month_table = vue.resolveComponent("month-table");
const _component_el_button = vue.resolveComponent("el-button");
const _directive_clickoutside = vue.resolveDirective("clickoutside");
return (vue.openBlock(), vue.createBlock("div", {
class: ["el-picker-panel el-date-picker", [{
'has-sidebar': _ctx.$slots.sidebar || _ctx.hasShortcuts,
'has-time': _ctx.showTime
}]]
}, [
vue.createVNode("div", _hoisted_1$3, [
vue.renderSlot(_ctx.$slots, "sidebar", { class: "el-picker-panel__sidebar" }),
(_ctx.hasShortcuts)
? (vue.openBlock(), vue.createBlock("div", _hoisted_2$1, [
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.shortcuts, (shortcut, key) => {
return (vue.openBlock(), vue.createBlock("button", {
key: key,
type: "button",
class: "el-picker-panel__shortcut",
onClick: $event => (_ctx.handleShortcutClick(shortcut))
}, vue.toDisplayString(shortcut.text), 9 /* TEXT, PROPS */, ["onClick"]))
}), 128 /* KEYED_FRAGMENT */))
]))
: vue.createCommentVNode("v-if", true),
vue.createVNode("div", _hoisted_3$1, [
(_ctx.showTime)
? (vue.openBlock(), vue.createBlock("div", _hoisted_4$1, [
vue.createVNode("span", _hoisted_5$1, [
vue.createVNode(_component_el_input, {
placeholder: _ctx.t('el.datepicker.selectDate'),
"model-value": _ctx.visibleDate,
size: "small",
onInput: _cache[1] || (_cache[1] = val => _ctx.userInputDate = val),
onChange: _ctx.handleVisibleDateChange
}, null, 8 /* PROPS */, ["placeholder", "model-value", "onChange"])
]),
vue.withDirectives(vue.createVNode("span", _hoisted_6$1, [
vue.createVNode(_component_el_input, {
placeholder: _ctx.t('el.datepicker.selectTime'),
"model-value": _ctx.visibleTime,
size: "small",
onFocus: _ctx.onTimePickerInputFocus,
onInput: _cache[2] || (_cache[2] = val => _ctx.userInputTime = val),
onChange: _ctx.handleVisibleTimeChange
}, null, 8 /* PROPS */, ["placeholder", "model-value", "onFocus", "onChange"]),
vue.createVNode(_component_time_pick_panel, {
visible: _ctx.timePickerVisible,
format: _ctx.timeFormat,
"time-arrow-control": _ctx.arrowControl,
"parsed-value": _ctx.innerDate,
onPick: _ctx.handleTimePick
}, null, 8 /* PROPS */, ["visible", "format", "time-arrow-control", "parsed-value", "onPick"])
], 512 /* NEED_PATCH */), [
[_directive_clickoutside, _ctx.handleTimePickClose]
])
]))
: vue.createCommentVNode("v-if", true),
vue.withDirectives(vue.createVNode("div", {
class: ["el-date-picker__header", { 'el-date-picker__header--bordered': _ctx.currentView === 'year' || _ctx.currentView === 'month' }]
}, [
vue.createVNode("button", {
type: "button",
"aria-label": _ctx.t(`el.datepicker.prevYear`),
class: "el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",
onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.prevYear_ && _ctx.prevYear_(...args)))
}, null, 8 /* PROPS */, ["aria-label"]),
vue.withDirectives(vue.createVNode("button", {
type: "button",
"aria-label": _ctx.t(`el.datepicker.prevMonth`),
class: "el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",
onClick: _cache[4] || (_cache[4] = (...args) => (_ctx.prevMonth_ && _ctx.prevMonth_(...args)))
}, null, 8 /* PROPS */, ["aria-label"]), [
[vue.vShow, _ctx.currentView === 'date']
]),