meixioacomponent 1.1.48 → 2.0.1

package/packages/components/base/elDatePicker/panel/date.vue

@@ -1,609 +0,0 @@
-<template>
-  <transition name="el-zoom-in-top" @after-enter="handleEnter" @after-leave="handleLeave">
-    <div
-      v-show="visible"
-      class="el-picker-panel el-date-picker el-popper"
-      :class="[{
-        'has-sidebar': $slots.sidebar || shortcuts,
-        'has-time': showTime
-      }, popperClass]">
-      <div class="el-picker-panel__body-wrapper">
-        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
-        <div class="el-picker-panel__sidebar" v-if="shortcuts">
-          <button
-            type="button"
-            class="el-picker-panel__shortcut"
-            v-for="(shortcut, key) in shortcuts"
-            :key="key"
-            @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
-        </div>
-        <div class="el-picker-panel__body">
-          <div class="el-date-picker__time-header" v-if="showTime">
-            <span class="el-date-picker__editor-wrap">
-              <el-input
-                :placeholder="t('el.datepicker.selectDate')"
-                :value="visibleDate"
-                size="small"
-                @input="val => userInputDate = val"
-                @change="handleVisibleDateChange" />
-            </span>
-            <span class="el-date-picker__editor-wrap" v-clickoutside="handleTimePickClose">
-              <el-input
-                ref="input"
-                @focus="timePickerVisible = true"
-                :placeholder="t('el.datepicker.selectTime')"
-                :value="visibleTime"
-                size="small"
-                @input="val => userInputTime = val"
-                @change="handleVisibleTimeChange" />
-              <time-picker
-                ref="timepicker"
-                :time-arrow-control="arrowControl"
-                @pick="handleTimePick"
-                :visible="timePickerVisible"
-                @mounted="proxyTimePickerDataProperties">
-              </time-picker>
-            </span>
-          </div>
-          <div
-            class="el-date-picker__header"
-            :class="{ 'el-date-picker__header--bordered': currentView === 'year' || currentView === 'month' }"
-            v-show="currentView !== 'time'">
-            <button
-              type="button"
-              @click="prevYear"
-              :aria-label="t(`el.datepicker.prevYear`)"
-              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
-            </button>
-            <button
-              type="button"
-              @click="prevMonth"
-              v-show="currentView === 'date'"
-              :aria-label="t(`el.datepicker.prevMonth`)"
-              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left">
-            </button>
-            <span
-              @click="showYearPicker"
-              role="button"
-              class="el-date-picker__header-label">{{ yearLabel }}</span>
-            <span
-              @click="showMonthPicker"
-              v-show="currentView === 'date'"
-              role="button"
-              class="el-date-picker__header-label"
-              :class="{ active: currentView === 'month' }">{{t(`el.datepicker.month${ month + 1 }`)}}</span>
-            <button
-              type="button"
-              @click="nextYear"
-              :aria-label="t(`el.datepicker.nextYear`)"
-              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
-            </button>
-            <button
-              type="button"
-              @click="nextMonth"
-              v-show="currentView === 'date'"
-              :aria-label="t(`el.datepicker.nextMonth`)"
-              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right">
-            </button>
-          </div>
-
-          <div class="el-picker-panel__content">
-            <date-table
-              v-show="currentView === 'date'"
-              @pick="handleDatePick"
-              :selection-mode="selectionMode"
-              :first-day-of-week="firstDayOfWeek"
-              :value="value"
-              :default-value="defaultValue ? new Date(defaultValue) : null"
-              :date="date"
-              :cell-class-name="cellClassName"
-              :disabled-date="disabledDate">
-            </date-table>
-            <year-table
-              v-show="currentView === 'year'"
-              @pick="handleYearPick"
-              :selection-mode="selectionMode"
-              :value="value"
-              :default-value="defaultValue ? new Date(defaultValue) : null"
-              :date="date"
-              :disabled-date="disabledDate">
-            </year-table>
-            <month-table
-              v-show="currentView === 'month'"
-              @pick="handleMonthPick"
-              :selection-mode="selectionMode"
-              :value="value"
-              :default-value="defaultValue ? new Date(defaultValue) : null"
-              :date="date"
-              :disabled-date="disabledDate">
-            </month-table>
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="el-picker-panel__footer"
-        v-show="footerVisible && (currentView === 'date' || currentView === 'month' || currentView === 'year')">
-        <el-button
-          size="mini"
-          type="text"
-          class="el-picker-panel__link-btn"
-          @click="changeToNow"
-          v-show="selectionMode !== 'dates' && selectionMode !== 'months' && selectionMode !== 'years'">
-          {{ t('el.datepicker.now') }}
-        </el-button>
-        <el-button
-          plain
-          size="mini"
-          class="el-picker-panel__link-btn"
-          @click="confirm">
-          {{ t('el.datepicker.confirm') }}
-        </el-button>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script type="text/babel">
-  import {
-    formatDate,
-    parseDate,
-    getWeekNumber,
-    isDate,
-    modifyDate,
-    modifyTime,
-    modifyWithTimeString,
-    clearMilliseconds,
-    clearTime,
-    prevYear,
-    nextYear,
-    prevMonth,
-    nextMonth,
-    changeYearMonthAndClampDate,
-    extractDateFormat,
-    extractTimeFormat,
-    timeWithinRange
-  } from 'element-ui/src/utils/date-util';
-  import Clickoutside from 'element-ui/src/utils/clickoutside';
-  import Locale from 'element-ui/src/mixins/locale';
-  import ElInput from 'element-ui/packages/input';
-  import ElButton from 'element-ui/packages/button';
-  import TimePicker from './time';
-  import YearTable from '../basic/year-table';
-  import MonthTable from '../basic/month-table';
-  import DateTable from '../basic/date-table';
-
-  export default {
-    mixins: [Locale],
-
-    directives: { Clickoutside },
-
-    watch: {
-      showTime(val) {
-        /* istanbul ignore if */
-        if (!val) return;
-        this.$nextTick(_ => {
-          const inputElm = this.$refs.input.$el;
-          if (inputElm) {
-            this.pickerWidth = inputElm.getBoundingClientRect().width + 10;
-          }
-        });
-      },
-
-      value(val) {
-        if (this.selectionMode === 'dates' && this.value) return;
-        if (this.selectionMode === 'months' && this.value) return;
-        if (this.selectionMode === 'years' && this.value) return;
-        if (isDate(val)) {
-          this.date = new Date(val);
-        } else {
-          this.date = this.getDefaultValue();
-        }
-      },
-
-      defaultValue(val) {
-        if (!isDate(this.value)) {
-          this.date = val ? new Date(val) : new Date();
-        }
-      },
-
-      timePickerVisible(val) {
-        if (val) this.$nextTick(() => this.$refs.timepicker.adjustSpinners());
-      },
-
-      selectionMode(newVal) {
-        if (newVal === 'month') {
-          /* istanbul ignore next */
-          if (this.currentView !== 'year' || this.currentView !== 'month') {
-            this.currentView = 'month';
-          }
-        } else if (newVal === 'dates') {
-          this.currentView = 'date';
-        } else if (newVal === 'years') {
-          this.currentView = 'year';
-        } else if (newVal === 'months') {
-          this.currentView = 'month';
-        }
-      }
-    },
-
-    methods: {
-      proxyTimePickerDataProperties() {
-        const format = timeFormat => {this.$refs.timepicker.format = timeFormat;};
-        const value = value => {this.$refs.timepicker.value = value;};
-        const date = date => {this.$refs.timepicker.date = date;};
-        const selectableRange = selectableRange => {this.$refs.timepicker.selectableRange = selectableRange;};
-
-        this.$watch('value', value);
-        this.$watch('date', date);
-        this.$watch('selectableRange', selectableRange);
-
-        format(this.timeFormat);
-        value(this.value);
-        date(this.date);
-        selectableRange(this.selectableRange);
-      },
-
-      handleClear() {
-        this.date = this.getDefaultValue();
-        this.$emit('pick', null);
-      },
-
-      emit(value, ...args) {
-        if (!value) {
-          this.$emit('pick', value, ...args);
-        } else if (Array.isArray(value)) {
-          const dates = value.map(date => this.showTime ? clearMilliseconds(date) : clearTime(date));
-          this.$emit('pick', dates, ...args);
-        } else {
-          this.$emit('pick', this.showTime ? clearMilliseconds(value) : clearTime(value), ...args);
-        }
-        this.userInputDate = null;
-        this.userInputTime = null;
-      },
-
-      // resetDate() {
-      //   this.date = new Date(this.date);
-      // },
-
-      showMonthPicker() {
-        this.currentView = 'month';
-      },
-
-      showYearPicker() {
-        this.currentView = 'year';
-      },
-
-      // XXX: 没用到
-      // handleLabelClick() {
-      //   if (this.currentView === 'date') {
-      //     this.showMonthPicker();
-      //   } else if (this.currentView === 'month') {
-      //     this.showYearPicker();
-      //   }
-      // },
-
-      prevMonth() {
-        this.date = prevMonth(this.date);
-      },
-
-      nextMonth() {
-        this.date = nextMonth(this.date);
-      },
-
-      prevYear() {
-        if (this.currentView === 'year') {
-          this.date = prevYear(this.date, 10);
-        } else {
-          this.date = prevYear(this.date);
-        }
-      },
-
-      nextYear() {
-        if (this.currentView === 'year') {
-          this.date = nextYear(this.date, 10);
-        } else {
-          this.date = nextYear(this.date);
-        }
-      },
-
-      handleShortcutClick(shortcut) {
-        if (shortcut.onClick) {
-          shortcut.onClick(this);
-        }
-      },
-
-      handleTimePick(value, visible, first) {
-        if (isDate(value)) {
-          const newDate = this.value
-            ? modifyTime(this.value, value.getHours(), value.getMinutes(), value.getSeconds())
-            : modifyWithTimeString(this.getDefaultValue(), this.defaultTime);
-          this.date = newDate;
-          this.emit(this.date, true);
-        } else {
-          this.emit(value, true);
-        }
-        if (!first) {
-          this.timePickerVisible = visible;
-        }
-      },
-
-      handleTimePickClose() {
-        this.timePickerVisible = false;
-      },
-
-      handleMonthPick(month) {
-        if (this.selectionMode === 'month') {
-          this.date = modifyDate(this.date, this.year, month, 1);
-          this.emit(this.date);
-        } else if (this.selectionMode === 'months') {
-          this.emit(month, true);
-        } else {
-          this.date = changeYearMonthAndClampDate(this.date, this.year, month);
-          // TODO: should emit intermediate value ??
-          // this.emit(this.date);
-          this.currentView = 'date';
-        }
-      },
-
-      handleDatePick(value) {
-        if (this.selectionMode === 'day') {
-          let newDate = this.value
-            ? modifyDate(this.value, value.getFullYear(), value.getMonth(), value.getDate())
-            : modifyWithTimeString(value, this.defaultTime);
-          // change default time while out of selectableRange
-          if (!this.checkDateWithinRange(newDate)) {
-            newDate = modifyDate(this.selectableRange[0][0], value.getFullYear(), value.getMonth(), value.getDate());
-          }
-          this.date = newDate;
-          this.emit(this.date, this.showTime);
-        } else if (this.selectionMode === 'week') {
-          this.emit(value.date);
-        } else if (this.selectionMode === 'dates') {
-          this.emit(value, true); // set false to keep panel open
-        }
-      },
-
-      handleYearPick(year) {
-        if (this.selectionMode === 'year') {
-          this.date = modifyDate(this.date, year, 0, 1);
-          this.emit(this.date);
-        } else if (this.selectionMode === 'years') {
-          this.emit(year, true);
-        } else {
-          this.date = changeYearMonthAndClampDate(this.date, year, this.month);
-          // TODO: should emit intermediate value ??
-          // this.emit(this.date, true);
-          this.currentView = 'month';
-        }
-      },
-
-      changeToNow() {
-        // NOTE: not a permanent solution
-        //       consider disable "now" button in the future
-        if ((!this.disabledDate || !this.disabledDate(new Date())) && this.checkDateWithinRange(new Date())) {
-          this.date = new Date();
-          this.emit(this.date);
-        }
-      },
-
-      confirm() {
-        if (this.selectionMode === 'dates' || this.selectionMode === 'months' || this.selectionMode === 'years') {
-          this.emit(this.value);
-        } else {
-          // value were emitted in handle{Date,Time}Pick, nothing to update here
-          // deal with the scenario where: user opens the picker, then confirm without doing anything
-          const value = this.value
-            ? this.value
-            : modifyWithTimeString(this.getDefaultValue(), this.defaultTime);
-          this.date = new Date(value); // refresh date
-          this.emit(value);
-        }
-      },
-
-      resetView() {
-        if (this.selectionMode === 'month' || this.selectionMode === 'months') {
-          this.currentView = 'month';
-        } else if (this.selectionMode === 'year' || this.selectionMode === 'years') {
-          this.currentView = 'year';
-        } else {
-          this.currentView = 'date';
-        }
-      },
-
-      handleEnter() {
-        document.body.addEventListener('keydown', this.handleKeydown);
-      },
-
-      handleLeave() {
-        this.$emit('dodestroy');
-        document.body.removeEventListener('keydown', this.handleKeydown);
-      },
-
-      handleKeydown(event) {
-        const keyCode = event.keyCode;
-        const list = [38, 40, 37, 39];
-        if (this.visible && !this.timePickerVisible) {
-          if (list.indexOf(keyCode) !== -1) {
-            this.handleKeyControl(keyCode);
-            event.stopPropagation();
-            event.preventDefault();
-          }
-          if (keyCode === 13 && this.userInputDate === null && this.userInputTime === null) { // Enter
-            this.emit(this.date, false);
-          }
-        }
-      },
-
-      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 mode = this.selectionMode;
-        const year = 3.1536e10;
-        const now = this.date.getTime();
-        const newDate = new Date(this.date.getTime());
-        while (Math.abs(now - newDate.getTime()) <= year) {
-          const map = mapping[mode];
-          map.offset(newDate, map[keyCode]);
-          if (typeof this.disabledDate === 'function' && this.disabledDate(newDate)) {
-            continue;
-          }
-          this.date = newDate;
-          this.$emit('pick', newDate, true);
-          break;
-        }
-      },
-
-      handleVisibleTimeChange(value) {
-        const time = parseDate(value, this.timeFormat);
-        if (time && this.checkDateWithinRange(time)) {
-          this.date = modifyDate(time, this.year, this.month, this.monthDate);
-          this.userInputTime = null;
-          this.$refs.timepicker.value = this.date;
-          this.timePickerVisible = false;
-          this.emit(this.date, true);
-        }
-      },
-
-      handleVisibleDateChange(value) {
-        const date = parseDate(value, this.dateFormat);
-        if (date) {
-          if (typeof this.disabledDate === 'function' && this.disabledDate(date)) {
-            return;
-          }
-          this.date = modifyTime(date, this.date.getHours(), this.date.getMinutes(), this.date.getSeconds());
-          this.userInputDate = null;
-          this.resetView();
-          this.emit(this.date, true);
-        }
-      },
-
-      isValidValue(value) {
-        return value && !isNaN(value) && (
-          typeof this.disabledDate === 'function'
-            ? !this.disabledDate(value)
-            : true
-        ) && this.checkDateWithinRange(value);
-      },
-
-      getDefaultValue() {
-        // if default-value is set, return it
-        // otherwise, return now (the moment this method gets called)
-        return this.defaultValue ? new Date(this.defaultValue) : new Date();
-      },
-
-      checkDateWithinRange(date) {
-        return this.selectableRange.length > 0
-          ? timeWithinRange(date, this.selectableRange, this.format || 'HH:mm:ss')
-          : true;
-      }
-    },
-
-    components: {
-      TimePicker, YearTable, MonthTable, DateTable, ElInput, ElButton
-    },
-
-    data() {
-      return {
-        popperClass: '',
-        date: new Date(),
-        value: '',
-        defaultValue: null, // use getDefaultValue() for time computation
-        defaultTime: null,
-        showTime: false,
-        selectionMode: 'day',
-        shortcuts: '',
-        visible: false,
-        currentView: 'date',
-        disabledDate: '',
-        cellClassName: '',
-        selectableRange: [],
-        firstDayOfWeek: 7,
-        showWeekNumber: false,
-        timePickerVisible: false,
-        format: '',
-        arrowControl: false,
-        userInputDate: null,
-        userInputTime: null
-      };
-    },
-
-    computed: {
-      year() {
-        return this.date.getFullYear();
-      },
-
-      month() {
-        return this.date.getMonth();
-      },
-
-      week() {
-        return getWeekNumber(this.date);
-      },
-
-      monthDate() {
-        return this.date.getDate();
-      },
-
-      footerVisible() {
-        return this.showTime || this.selectionMode === 'dates' || this.selectionMode === 'months' || this.selectionMode === 'years';
-      },
-
-      visibleTime() {
-        if (this.userInputTime !== null) {
-          return this.userInputTime;
-        } else {
-          return formatDate(this.value || this.defaultValue, this.timeFormat);
-        }
-      },
-
-      visibleDate() {
-        if (this.userInputDate !== null) {
-          return this.userInputDate;
-        } else {
-          return formatDate(this.value || this.defaultValue, this.dateFormat);
-        }
-      },
-
-      yearLabel() {
-        const yearTranslation = this.t('el.datepicker.year');
-        if (this.currentView === 'year') {
-          const startYear = Math.floor(this.year / 10) * 10;
-          if (yearTranslation) {
-            return startYear + ' ' + yearTranslation + ' - ' + (startYear + 9) + ' ' + yearTranslation;
-          }
-          return startYear + ' - ' + (startYear + 9);
-        }
-        return this.year + ' ' + yearTranslation;
-      },
-
-      timeFormat() {
-        if (this.format) {
-          return extractTimeFormat(this.format);
-        } else {
-          return 'HH:mm:ss';
-        }
-      },
-
-      dateFormat() {
-        if (this.format) {
-          return extractDateFormat(this.format);
-        } else {
-          return 'yyyy-MM-dd';
-        }
-      }
-    }
-  };
-</script>