@zkwq/business 0.0.4 → 0.0.6

package/src/components/base/ui/date-picker/basic/date-table.vue

@@ -1,441 +0,0 @@
-<template>
-  <table
-    cellspacing="0"
-    cellpadding="0"
-    class="base-date-table"
-    @click="handleClick"
-    @mousemove="handleMouseMove"
-    :class="{ 'is-week-mode': selectionMode === 'week' }">
-    <tbody>
-    <tr>
-      <th v-if="showWeekNumber">{{ t('base.datepicker.week') }}</th>
-      <th v-for="(week, key) in WEEKS" :key="key">{{ t('base.datepicker.weeks.' + week) }}</th>
-    </tr>
-    <tr
-      class="base-date-table__row"
-      v-for="(row, key) in rows"
-      :class="{ current: isWeekActive(row[1]) }"
-      :key="key">
-      <td
-        v-for="(cell, key) in row"
-        :class="getCellClasses(cell)"
-        :key="key">
-        <div>
-          <span>
-            {{ cell.text }}
-          </span>
-        </div>
-      </td>
-    </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-  import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, prevDate, nextDate, isDate, clearTime as _clearTime} from '../../util/date-util';
-  import Locale from '../../mixin/locale';
-  import { arrayFindIndex, arrayFind, coerceTruthyValueToArray } from '../../util';
-
-  const WEEKS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
-  const getDateTimestamp = function(time) {
-    if (typeof time === 'number' || typeof time === 'string') {
-      return _clearTime(new Date(time)).getTime();
-    } else if (time instanceof Date) {
-      return _clearTime(time).getTime();
-    } else {
-      return NaN;
-    }
-  };
-
-  // remove the first element that satisfies `pred` from arr
-  // return a new array if modification occurs
-  // return the original array otherwise
-  const removeFromArray = function(arr, pred) {
-    const idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred);
-    return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr;
-  };
-
-  export default {
-    mixins: [Locale],
-
-    props: {
-      firstDayOfWeek: {
-        default: 7,
-        type: Number,
-        validator: val => val >= 1 && val <= 7
-      },
-
-      value: {},
-
-      defaultValue: {
-        validator(val) {
-          // either: null, valid Date object, Array of valid Date objects
-          return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate));
-        }
-      },
-
-      date: {},
-
-      selectionMode: {
-        default: 'day'
-      },
-
-      showWeekNumber: {
-        type: Boolean,
-        default: false
-      },
-
-      disabledDate: {},
-
-      cellClassName: {},
-
-      minDate: {},
-
-      maxDate: {},
-
-      rangeState: {
-        default() {
-          return {
-            endDate: null,
-            selecting: false
-          };
-        }
-      }
-    },
-
-    computed: {
-      offsetDay() {
-        const week = this.firstDayOfWeek;
-        // 周日为界限，左右偏移的天数，3217654 例如周一就是 -1，目的是调整前两行日期的位置
-        return week > 3 ? 7 - week : -week;
-      },
-
-      WEEKS() {
-        const week = this.firstDayOfWeek;
-        return WEEKS.concat(WEEKS).slice(week, week + 7);
-      },
-
-      year() {
-        return this.date.getFullYear();
-      },
-
-      month() {
-        return this.date.getMonth();
-      },
-
-      startDate() {
-        return getStartDateOfMonth(this.year, this.month);
-      },
-
-      rows() {
-        // TODO: refactory rows / getCellClasses
-        const date = new Date(this.year, this.month, 1);
-        let day = getFirstDayOfMonth(date); // day of first day
-        const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
-        const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));
-
-        day = (day === 0 ? 7 : day);
-
-        const offset = this.offsetDay;
-        const rows = this.tableRows;
-        let count = 1;
-
-        const startDate = this.startDate;
-        const disabledDate = this.disabledDate;
-        const cellClassName = this.cellClassName;
-        const selectedDate = this.selectionMode === 'dates' ? coerceTruthyValueToArray(this.value) : [];
-        const now = getDateTimestamp(new Date());
-
-        for (let i = 0; i < 6; i++) {
-          const row = rows[i];
-
-          if (this.showWeekNumber) {
-            if (!row[0]) {
-              row[0] = { type: 'week', text: getWeekNumber(nextDate(startDate, i * 7 + 1)) };
-            }
-          }
-
-          for (let j = 0; j < 7; j++) {
-            let cell = row[this.showWeekNumber ? j + 1 : j];
-            if (!cell) {
-              cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false };
-            }
-
-            cell.type = 'normal';
-
-            const index = i * 7 + j;
-            const time = nextDate(startDate, index - offset).getTime();
-            cell.inRange = time >= getDateTimestamp(this.minDate) && time <= getDateTimestamp(this.maxDate);
-            cell.start = this.minDate && time === getDateTimestamp(this.minDate);
-            cell.end = this.maxDate && time === getDateTimestamp(this.maxDate);
-            const isToday = time === now;
-
-            if (isToday) {
-              cell.type = 'today';
-            }
-
-            if (i >= 0 && i <= 1) {
-              const numberOfDaysFromPreviousMonth = day + offset < 0 ? 7 + day + offset : day + 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';
-              }
-            }
-
-            let cellDate = new Date(time);
-            cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);
-            cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime());
-            cell.customClass = typeof cellClassName === 'function' && cellClassName(cellDate);
-            this.$set(row, this.showWeekNumber ? j + 1 : j, cell);
-          }
-
-          if (this.selectionMode === 'week') {
-            const start = this.showWeekNumber ? 1 : 0;
-            const end = this.showWeekNumber ? 7 : 6;
-            const isWeekActive = this.isWeekActive(row[start + 1]);
-
-            row[start].inRange = isWeekActive;
-            row[start].start = isWeekActive;
-            row[end].inRange = isWeekActive;
-            row[end].end = isWeekActive;
-          }
-        }
-
-        return rows;
-      }
-    },
-
-    watch: {
-      'rangeState.endDate'(newVal) {
-        this.markRange(this.minDate, newVal);
-      },
-
-      minDate(newVal, oldVal) {
-        if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {
-          this.markRange(this.minDate, this.maxDate);
-        }
-      },
-
-      maxDate(newVal, oldVal) {
-        if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {
-          this.markRange(this.minDate, this.maxDate);
-        }
-      }
-    },
-
-    data() {
-      return {
-        tableRows: [ [], [], [], [], [], [] ],
-        lastRow: null,
-        lastColumn: null
-      };
-    },
-
-    methods: {
-      cellMatchesDate(cell, date) {
-        const value = new Date(date);
-        return this.year === value.getFullYear() &&
-          this.month === value.getMonth() &&
-          Number(cell.text) === value.getDate();
-      },
-
-      getCellClasses(cell) {
-        const selectionMode = this.selectionMode;
-        const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : [];
-
-        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 (cell.type === 'normal' && defaultValue.some(date => this.cellMatchesDate(cell, date))) {
-          classes.push('default');
-        }
-
-        if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && this.cellMatchesDate(cell, this.value)) {
-          classes.push('current');
-        }
-
-        if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today') || this.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(' ');
-      },
-
-      getDateOfCell(row, column) {
-        const offsetFromStart = row * 7 + (column - (this.showWeekNumber ? 1 : 0)) - this.offsetDay;
-        return nextDate(this.startDate, offsetFromStart);
-      },
-
-      isWeekActive(cell) {
-        if (this.selectionMode !== 'week') return false;
-        const newDate = new Date(this.year, this.month, 1);
-        const year = newDate.getFullYear();
-        const month = newDate.getMonth();
-
-        if (cell.type === 'prev-month') {
-          newDate.setMonth(month === 0 ? 11 : month - 1);
-          newDate.setFullYear(month === 0 ? year - 1 : year);
-        }
-
-        if (cell.type === 'next-month') {
-          newDate.setMonth(month === 11 ? 0 : month + 1);
-          newDate.setFullYear(month === 11 ? year + 1 : year);
-        }
-
-        newDate.setDate(parseInt(cell.text, 10));
-
-        if (isDate(this.value)) {
-          const dayOffset = (this.value.getDay() - this.firstDayOfWeek + 7) % 7 - 1;
-          const weekDate = prevDate(this.value, dayOffset);
-          return weekDate.getTime() === newDate.getTime();
-        }
-        return false;
-      },
-
-      markRange(minDate, maxDate) {
-        minDate = getDateTimestamp(minDate);
-        maxDate = getDateTimestamp(maxDate) || minDate;
-        [minDate, maxDate] = [Math.min(minDate, maxDate), Math.max(minDate, maxDate)];
-
-        const startDate = this.startDate;
-        const rows = this.rows;
-        for (let i = 0, k = rows.length; i < k; i++) {
-          const row = rows[i];
-          for (let j = 0, l = row.length; j < l; j++) {
-            if (this.showWeekNumber && j === 0) continue;
-
-            const cell = row[j];
-            const index = i * 7 + j + (this.showWeekNumber ? -1 : 0);
-            const time = nextDate(startDate, index - this.offsetDay).getTime();
-
-            cell.inRange = minDate && time >= minDate && time <= maxDate;
-            cell.start = minDate && time === minDate;
-            cell.end = maxDate && time === maxDate;
-          }
-        }
-      },
-
-      handleMouseMove(event) {
-        if (!this.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;
-
-        // can not select disabled date
-        if (this.rows[row][column].disabled) return;
-
-        // only update rangeState when mouse moves to a new cell
-        // this avoids frequent Date object creation and improves performance
-        if (row !== this.lastRow || column !== this.lastColumn) {
-          this.lastRow = row;
-          this.lastColumn = column;
-          this.$emit('changerange', {
-            minDate: this.minDate,
-            maxDate: this.maxDate,
-            rangeState: {
-              selecting: true,
-              endDate: this.getDateOfCell(row, column)
-            }
-          });
-        }
-      },
-
-      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 = this.selectionMode === 'week' ? 1 : target.cellIndex;
-        const cell = this.rows[row][column];
-
-        if (cell.disabled || cell.type === 'week') return;
-
-        const newDate = this.getDateOfCell(row, column);
-
-        if (this.selectionMode === 'range') {
-          if (!this.rangeState.selecting) {
-            this.$emit('pick', {minDate: newDate, maxDate: null});
-            this.rangeState.selecting = true;
-          } else {
-            if (newDate >= this.minDate) {
-              this.$emit('pick', {minDate: this.minDate, maxDate: newDate});
-            } else {
-              this.$emit('pick', {minDate: newDate, maxDate: this.minDate});
-            }
-            this.rangeState.selecting = false;
-          }
-        } else if (this.selectionMode === 'day') {
-          this.$emit('pick', newDate);
-        } else if (this.selectionMode === 'week') {
-          const weekNumber = getWeekNumber(newDate);
-          const value = newDate.getFullYear() + 'w' + weekNumber;
-          this.$emit('pick', {
-            year: newDate.getFullYear(),
-            week: weekNumber,
-            value: value,
-            date: newDate
-          });
-        } else if (this.selectionMode === 'dates') {
-          const value = this.value || [];
-          const newValue = cell.selected
-            ? removeFromArray(value, date => date.getTime() === newDate.getTime())
-            : [...value, newDate];
-          this.$emit('pick', newValue);
-        }
-      }
-    }
-  };
-</script>

package/src/components/base/ui/date-picker/basic/month-table.vue

@@ -1,254 +0,0 @@
-<template>
-  <table @click="handleMonthTableClick" @mousemove="handleMouseMove" class="base-month-table">
-    <tbody>
-    <tr v-for="(row, key) in rows" :key="key">
-      <td :class="getCellStyle(cell)" v-for="(cell, key) in row" :key="key">
-        <div>
-          <a class="cell">{{ t('base.datepicker.months.' + months[cell.text]) }}</a>
-        </div>
-      </td>
-    </tr>
-    </tbody>
-  </table>
-</template>
-
-<script type="text/babel">
-  import Locale from '../../mixin/locale';
-  import { isDate, range, getDayCountOfMonth, nextDate } from '../../util/date-util';
-  import { hasClass } from '../../util/dom';
-  import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from '../../util';
-
-  const datesInMonth = (year, month) => {
-    const numOfDays = getDayCountOfMonth(year, month);
-    const firstDay = new Date(year, month, 1);
-    return range(numOfDays).map(n => nextDate(firstDay, n));
-  };
-
-  const clearDate = (date) => {
-    return new Date(date.getFullYear(), date.getMonth());
-  };
-
-  const getMonthTimestamp = function(time) {
-    if (typeof time === 'number' || typeof time === 'string') {
-      return clearDate(new Date(time)).getTime();
-    } else if (time instanceof Date) {
-      return clearDate(time).getTime();
-    } else {
-      return NaN;
-    }
-  };
-  export default {
-    props: {
-      disabledDate: {},
-      value: {},
-      selectionMode: {
-        default: 'month'
-      },
-      minDate: {},
-
-      maxDate: {},
-      defaultValue: {
-        validator(val) {
-          // null or valid Date Object
-          return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate));
-        }
-      },
-      date: {},
-      rangeState: {
-        default() {
-          return {
-            endDate: null,
-            selecting: false
-          };
-        }
-      }
-    },
-
-    mixins: [Locale],
-
-    watch: {
-      'rangeState.endDate'(newVal) {
-        this.markRange(this.minDate, newVal);
-      },
-
-      minDate(newVal, oldVal) {
-        if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {
-          this.markRange(this.minDate, this.maxDate);
-        }
-      },
-
-      maxDate(newVal, oldVal) {
-        if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {
-          this.markRange(this.minDate, this.maxDate);
-        }
-      }
-    },
-
-    data() {
-      return {
-        months: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],
-        tableRows: [ [], [], [] ],
-        lastRow: null,
-        lastColumn: null
-      };
-    },
-
-    methods: {
-      cellMatchesDate(cell, date) {
-        const value = new Date(date);
-        return this.date.getFullYear() === value.getFullYear() && Number(cell.text) === value.getMonth();
-      },
-      getCellStyle(cell) {
-        const style = {};
-        const year = this.date.getFullYear();
-        const today = new Date();
-        const month = cell.text;
-        const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : [];
-        style.disabled = typeof this.disabledDate === 'function'
-          ? datesInMonth(year, month).every(this.disabledDate)
-          : false;
-        style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year && date.getMonth() === month) >= 0;
-        style.today = today.getFullYear() === year && today.getMonth() === month;
-        style.default = defaultValue.some(date => this.cellMatchesDate(cell, date));
-
-        if (cell.inRange) {
-          style['in-range'] = true;
-
-          if (cell.start) {
-            style['start-date'] = true;
-          }
-
-          if (cell.end) {
-            style['end-date'] = true;
-          }
-        }
-        return style;
-      },
-      getMonthOfCell(month) {
-        const year = this.date.getFullYear();
-        return new Date(year, month, 1);
-      },
-      markRange(minDate, maxDate) {
-        minDate = getMonthTimestamp(minDate);
-        maxDate = getMonthTimestamp(maxDate) || minDate;
-        [minDate, maxDate] = [Math.min(minDate, maxDate), Math.max(minDate, maxDate)];
-        const rows = this.rows;
-        for (let i = 0, k = rows.length; i < k; i++) {
-          const row = rows[i];
-          for (let j = 0, l = row.length; j < l; j++) {
-
-            const cell = row[j];
-            const index = i * 4 + j;
-            const time = new Date(this.date.getFullYear(), index).getTime();
-
-            cell.inRange = minDate && time >= minDate && time <= maxDate;
-            cell.start = minDate && time === minDate;
-            cell.end = maxDate && time === maxDate;
-          }
-        }
-      },
-      handleMouseMove(event) {
-        if (!this.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;
-        // can not select disabled date
-        if (this.rows[row][column].disabled) return;
-
-        // only update rangeState when mouse moves to a new cell
-        // this avoids frequent Date object creation and improves performance
-        if (row !== this.lastRow || column !== this.lastColumn) {
-          this.lastRow = row;
-          this.lastColumn = column;
-          this.$emit('changerange', {
-            minDate: this.minDate,
-            maxDate: this.maxDate,
-            rangeState: {
-              selecting: true,
-              endDate: this.getMonthOfCell(row * 4 + column)
-            }
-          });
-        }
-      },
-      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 (hasClass(target, 'disabled')) return;
-        const column = target.cellIndex;
-        const row = target.parentNode.rowIndex;
-        const month = row * 4 + column;
-        const newDate = this.getMonthOfCell(month);
-        if (this.selectionMode === 'range') {
-          if (!this.rangeState.selecting) {
-            this.$emit('pick', {minDate: newDate, maxDate: null});
-            this.rangeState.selecting = true;
-          } else {
-            if (newDate >= this.minDate) {
-              this.$emit('pick', {minDate: this.minDate, maxDate: newDate});
-            } else {
-              this.$emit('pick', {minDate: newDate, maxDate: this.minDate});
-            }
-            this.rangeState.selecting = false;
-          }
-        } else {
-          this.$emit('pick', month);
-        }
-      }
-    },
-
-    computed: {
-      rows() {
-        // TODO: refactory rows / getCellClasses
-        const rows = this.tableRows;
-        const disabledDate = this.disabledDate;
-        const selectedDate = [];
-        const now = getMonthTimestamp(new Date());
-
-        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 time = new Date(this.date.getFullYear(), index).getTime();
-            cell.inRange = time >= getMonthTimestamp(this.minDate) && time <= getMonthTimestamp(this.maxDate);
-            cell.start = this.minDate && time === getMonthTimestamp(this.minDate);
-            cell.end = this.maxDate && time === getMonthTimestamp(this.maxDate);
-            const isToday = time === now;
-
-            if (isToday) {
-              cell.type = 'today';
-            }
-            cell.text = index;
-            let cellDate = new Date(time);
-            cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);
-            cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime());
-
-            this.$set(row, j, cell);
-          }
-        }
-        return rows;
-      }
-    }
-  };
-</script>