rw-admin-ui 1.0.0

package/packages/date-picker/src/basic/month-table.vue

@@ -0,0 +1,284 @@
+<template>
+  <table @click="handleMonthTableClick" @mousemove="handleMouseMove" class="el-month-table" :class="{ 'is-selecting': rangeState.selecting }">
+    <tbody>
+      <tr v-for="(row, key) in rows" :key="key">
+        <td class="el-month-table__cell" :class="getCellStyle(cell)" v-for="(cell, key) in row" :key="key">
+          <div class="el-month-table__cell-inner">
+            <a class="el-month-table__cell-text">{{ t('el.datepicker.months.' + months[cell.text]) }}</a>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script type="text/babel">
+  import Locale from 'rowinself-ui/src/mixins/locale';
+  import { isDate, range, getDayCountOfMonth, nextDate } from 'rowinself-ui/src/utils/date-util';
+  import { hasClass } from 'rowinself-ui/src/utils/dom';
+  import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from 'rowinself-ui/src/utils/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;
+    }
+  };
+
+  // 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: {
+      disabledDate: {
+        type: Function
+      },
+      value: {
+        type: [Date, String, Number, Array]
+      },
+      selectionMode: {
+        default: 'month',
+        type: String,
+        validator(val) {
+          return ['month', 'months', 'range'].indexOf(val) > -1;
+        }
+      },
+      minDate: {
+        type: [Date, String, Number]
+      },
+
+      maxDate: {
+        type: [Date, String, Number]
+      },
+      defaultValue: {
+        validator(val) {
+          // null or valid Date Object
+          return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate));
+        }
+      },
+      date: {
+        type: Date
+      },
+      rangeState: {
+        default() {
+          return {
+            endDate: null,
+            selecting: false
+          };
+        },
+        type: Object
+      }
+    },
+
+    data() {
+      return {
+        months: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],
+        tableRows: [ [], [], [] ],
+        lastRow: null,
+        lastColumn: null
+      };
+    },
+
+    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;
+      }
+    },
+
+    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);
+        }
+      }
+    },
+
+    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['is-disabled'] = typeof this.disabledDate === 'function'
+          ? datesInMonth(year, month).every(this.disabledDate)
+          : false;
+        style['is-current'] = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year && date.getMonth() === month) >= 0;
+        style['is-today'] = today.getFullYear() === year && today.getMonth() === month;
+        style['is-default'] = defaultValue.some(date => this.cellMatchesDate(cell, date));
+
+        if (cell.inRange) {
+          style['is-in-range'] = true;
+
+          if (cell.start) {
+            style['is-start-date'] = true;
+          }
+
+          if (cell.end) {
+            style['is-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, 'is-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 if (this.selectionMode === 'months') {
+          const value = this.value || [];
+          const year = this.date.getFullYear();
+          const newValue = arrayFindIndex(value, date => date.getFullYear() === year && date.getMonth() === month) >= 0
+            ? removeFromArray(value, date => date.getTime() === newDate.getTime())
+            : [...value, newDate];
+          this.$emit('pick', newValue);
+        } else {
+          this.$emit('pick', month);
+        }
+      }
+    }
+  };
+</script>

package/packages/date-picker/src/basic/quarter-table.vue

@@ -0,0 +1,229 @@
+<template>
+  <table @click="handleQuarterTableClick" @mousemove="handleMouseMove" class="el-quarter-table">
+    <tbody>
+      <tr>
+        <td class="el-quarter-table__cell" :class="getCellStyle(0)">
+          <div class="el-quarter-table__cell-inner">
+            <a class="el-quarter-table__cell-text">{{ t('el.datepicker.quarters.Q1') }}</a>
+          </div>
+        </td>
+        <td class="el-quarter-table__cell" :class="getCellStyle(1)">
+          <div class="el-quarter-table__cell-inner">
+            <a class="el-quarter-table__cell-text">{{ t('el.datepicker.quarters.Q2') }}</a>
+          </div>
+        </td>
+        <td class="el-quarter-table__cell" :class="getCellStyle(2)">
+          <div class="el-quarter-table__cell-inner">
+            <a class="el-quarter-table__cell-text">{{ t('el.datepicker.quarters.Q3') }}</a>
+          </div>
+        </td>
+        <td class="el-quarter-table__cell" :class="getCellStyle(3)">
+          <div class="el-quarter-table__cell-inner">
+            <a class="el-quarter-table__cell-text">{{ t('el.datepicker.quarters.Q4') }}</a>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script type="text/babel">
+  import Locale from 'rowinself-ui/src/mixins/locale';
+  import { isDate, range, nextDate, getDayCountOfMonth } from 'rowinself-ui/src/utils/date-util';
+  import { hasClass } from 'rowinself-ui/src/utils/dom';
+  import { arrayFindIndex, coerceTruthyValueToArray } from 'rowinself-ui/src/utils/util';
+
+  const datesInQuarter = (year, quarter) => {
+    const startMonth = quarter * 3;
+    let dates = [];
+    for (let i = 0; i < 3; i++) {
+      const month = startMonth + i;
+      const numOfDays = getDayCountOfMonth(year, month);
+      const firstDay = new Date(year, month, 1);
+      dates = dates.concat(range(numOfDays).map(n => nextDate(firstDay, n)));
+    }
+    return dates;
+  };
+
+  export default {
+    mixins: [Locale],
+
+    props: {
+      disabledDate: {
+        type: Function,
+        default: null
+      },
+      value: {
+        type: [Date, Array, String],
+        default: null
+      },
+      selectionMode: {
+        type: String,
+        default: 'quarter'
+      },
+      minDate: {
+        type: Date,
+        default: null
+      },
+      maxDate: {
+        type: Date,
+        default: null
+      },
+      defaultValue: {
+        type: [Date, Array],
+        default: null,
+        validator(val) {
+          // null 或有效 Date 对象
+          return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate));
+        }
+      },
+      date: {
+        type: Date,
+        required: true
+      },
+      rangeState: {
+        type: Object,
+        default() {
+          return {
+            endDate: null,
+            selecting: false
+          };
+        }
+      }
+    },
+
+    data() {
+      return {
+      };
+    },
+
+    methods: {
+      getCellStyle(quarter) {
+        const style = {};
+        const year = this.date.getFullYear();
+        const today = new Date();
+        const month = today.getMonth();
+        const currentQuarter = Math.floor(month / 3);
+        const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : [];
+
+        style['is-disabled'] = typeof this.disabledDate === 'function'
+          ? datesInQuarter(year, quarter).every(this.disabledDate)
+          : false;
+
+        style['is-current'] = arrayFindIndex(coerceTruthyValueToArray(this.value), date => 
+          date.getFullYear() === year && Math.floor(date.getMonth() / 3) === quarter
+        ) >= 0;
+
+        style['is-today'] = today.getFullYear() === year && currentQuarter === quarter;
+        style['is-default'] = defaultValue.some(date => 
+          date.getFullYear() === year && Math.floor(date.getMonth() / 3) === quarter
+        );
+
+        if (this.selectionMode === 'range') {
+          const quarterStartMonth = quarter * 3;
+          const quarterStartDate = new Date(year, quarterStartMonth, 1);
+          const quarterEndDate = new Date(year, quarterStartMonth + 3, 0);
+
+          let minDate = this.minDate;
+          let maxDate = this.maxDate;
+          
+          if (this.rangeState.selecting && this.rangeState.endDate) {
+             const endDate = this.rangeState.endDate;
+             if (endDate < minDate) {
+               maxDate = minDate;
+               minDate = endDate;
+             } else {
+               maxDate = endDate;
+             }
+          }
+
+          if (minDate && maxDate) {
+             style['is-in-range'] = 
+               (minDate <= quarterEndDate && maxDate >= quarterStartDate);
+             
+             // Check start date (approximate check for quarter)
+             const minQuarter = Math.floor(minDate.getMonth() / 3);
+             const minYear = minDate.getFullYear();
+             style['is-start-date'] = minYear === year && minQuarter === quarter;
+
+             // Check end date
+             const maxQuarter = Math.floor(maxDate.getMonth() / 3);
+             const maxYear = maxDate.getFullYear();
+             style['is-end-date'] = maxYear === year && maxQuarter === quarter;
+          } else if (minDate) {
+             const minQuarter = Math.floor(minDate.getMonth() / 3);
+             const minYear = minDate.getFullYear();
+             style['is-start-date'] = minYear === year && minQuarter === quarter;
+          }
+        }
+
+        return style;
+      },
+
+      handleMouseMove(event) {
+        if (!this.rangeState.selecting) return;
+
+        let target = event.target;
+        while (target.tagName !== 'TD') {
+          if (target.tagName === 'TABLE') return;
+          target = target.parentNode;
+        }
+
+        const column = target.cellIndex;
+        const quarter = column;
+        // Check if disabled
+        if (hasClass(target, 'is-disabled')) return;
+        
+        const year = this.date.getFullYear();
+        const quarterStartMonth = quarter * 3;
+        // Use the end of the quarter as the end date for range calculation logic usually?
+        // Or the start?
+        // In year-table, we used start of year.
+        // Let's use start of quarter.
+        const newDate = new Date(year, quarterStartMonth, 1);
+
+        this.$emit('changerange', {
+          minDate: this.minDate,
+          maxDate: this.maxDate,
+          rangeState: {
+            selecting: true,
+            endDate: newDate
+          }
+        });
+      },
+
+      handleQuarterTableClick(event) {
+        let target = event.target;
+        while (target.tagName !== 'TD') {
+          if (target.tagName === 'TABLE') return;
+          target = target.parentNode;
+        }
+
+        if (hasClass(target, 'is-disabled')) return;
+
+        const column = target.cellIndex;
+        const quarter = column; // 0, 1, 2, 3
+        
+        if (this.selectionMode === 'range') {
+          const year = this.date.getFullYear();
+          const quarterStartMonth = quarter * 3;
+          const newDate = new Date(year, quarterStartMonth, 1);
+          
+          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', quarter);
+        }
+      }
+    }
+  };
+</script>