rw-admin-ui 1.0.0

package/packages/date-picker/REFACTOR-TASKS.md

@@ -0,0 +1,63 @@
+# DatePicker 交互重构任务清单
+
+基于 ant-design-vue DatePicker 交互文档，对 rw-element DatePicker 进行交互修改重构。
+
+---
+
+## 高优先级
+
+- [ ] **1. PageUp/PageDown 切换月份**
+  - 文件: `src/panel/date.vue`, `src/basic/date-table.vue`
+  - 内容: 在键盘事件处理中添加 PageUp(33)/PageDown(34) 支持
+  - 效果: PageUp 跳转上月同一天，PageDown 跳转下月同一天
+
+- [ ] **2. Ctrl+←/→ 切换年份**
+  - 文件: `src/panel/date.vue`, `src/basic/date-table.vue`
+  - 内容: 检测 Ctrl 键 + 方向键组合
+  - 效果: Ctrl+Left 跳转上年同一天，Ctrl+Right 跳转下年同一天
+
+- [ ] **3. 范围选择输入框悬停预览**
+  - 文件: `src/panel/date-range.vue`, `src/picker.vue`
+  - 内容: 鼠标在日期面板滑动时，输入框实时显示悬停日期值
+  - 效果: 起始/结束输入框显示灰色预览文字，移出后恢复
+
+---
+
+## 中优先级
+
+- [ ] **4. 范围高亮预览增强**
+  - 文件: `src/basic/date-table.vue`
+  - 内容: 选中起始日期后，悬停其他日期时显示完整预览区间
+  - 效果: 起始到悬停位置的日期单元格显示淡色背景
+
+- [ ] **5. 输入框错误状态样式**
+  - 文件: `src/picker.vue`
+  - 内容: 格式验证失败时添加错误样式类
+  - 效果: 输入框边框变红色
+
+- [ ] **6. 今日按钮行为优化**
+  - 文件: `src/panel/date.vue`
+  - 内容: 确保"今天"按钮只跳转视图，不自动选中日期
+  - 效果: 点击后面板跳转到当月，今天日期高亮但不选中
+
+---
+
+## 低优先级
+
+- [ ] **7. 弹出层动画优化**
+  - 文件: `src/picker.vue`
+  - 内容: 检查/添加 slide-up/down 动画过渡
+  - 效果: 面板打开时从下向上滑出，关闭时向下滑出
+
+- [ ] **8. 自定义单元格渲染增强**
+  - 文件: `src/basic/date-table.vue`
+  - 内容: 增强 cellClassName 支持，允许更多自定义
+  - 效果: 支持根据日期返回自定义类名
+
+---
+
+## 完成记录
+
+| 任务 | 完成时间 | 备注 |
+|-----|---------|------|
+| - | - | - |

package/packages/date-picker/index.js

@@ -0,0 +1,8 @@
+import DatePicker from './src/picker/date-picker.vue';
+
+/* istanbul ignore next */
+DatePicker.install = function install(Vue) {
+  Vue.component(DatePicker.name, DatePicker);
+};
+
+export default DatePicker;

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

@@ -0,0 +1,546 @@
+<template>
+  <table
+    cellspacing="0"
+    cellpadding="0"
+    class="el-date-table"
+    @click="handleClick"
+    @mousemove="handleMouseMove"
+    @mouseleave="handleMouseLeave"
+    :class="{ 'is-week-mode': selectionMode === 'week', 'is-selecting': rangeState.selecting }">
+    <tbody>
+      <tr>
+        <th v-if="showWeekNumber">{{ t('el.datepicker.week') }}</th>
+        <th v-for="(week, key) in WEEKS" :key="key">{{ t('el.datepicker.weeks.' + week) }}</th>
+      </tr>
+      <tr
+        class="el-date-table__row"
+        v-for="(row, key) in rows"
+        :class="{ 'is-current': isWeekActive(row[1]) }"
+        :key="key">
+        <td
+          v-for="(cell, key) in row"
+          class="el-date-table__cell"
+          :class="getCellClasses(cell)"
+          :key="key">
+          <div class="el-date-table__cell-inner">
+            <span class="el-date-table__cell-text">
+              {{ cell.text }}
+            </span>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+  import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, prevDate, nextDate, isDate, clearTime as _clearTime} from 'rowinself-ui/src/utils/date-util';
+  import Locale from 'rowinself-ui/src/mixins/locale';
+  import { arrayFindIndex, arrayFind, coerceTruthyValueToArray } from 'rowinself-ui/src/utils/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: {
+        type: [Date, String, Number, Array]
+      },
+
+      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: {
+        type: Date
+      },
+
+      selectionMode: {
+        default: 'day',
+        type: String
+      },
+
+      showWeekNumber: {
+        type: Boolean,
+        default: false
+      },
+
+      disabledDate: {
+        type: Function
+      },
+
+      cellClassName: {
+        type: [Function, String, Object, Array]
+      },
+
+      minDate: {
+        type: [Date, String, Number]
+      },
+
+      maxDate: {
+        type: [Date, String, Number]
+      },
+
+      rangeState: {
+        default() {
+          return {
+            endDate: null,
+            selecting: false
+          };
+        },
+        type: Object
+      },
+
+      isRangePicker: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data() {
+      return {
+        tableRows: [ [], [], [], [], [], [] ],
+        lastRow: null,
+        lastColumn: null
+      };
+    },
+
+    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 = 'is-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 = 'is-prev-month';
+              }
+            } else {
+              if (count <= dateCountOfMonth) {
+                cell.text = count++;
+              } else {
+                cell.text = count++ - dateCountOfMonth;
+                cell.type = 'is-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);
+        }
+      },
+      
+      value(newVal) {
+         if (this.isRangePicker && this.selectionMode === 'day') {
+             // Force update for range picker day mode
+             // We don't have a direct 'markRange' equivalent for single date styling update,
+             // but re-evaluating getCellClasses happens on render.
+             // We can use a key or similar to force update if needed, but Vue should handle reactivity.
+             // However, for cell classes logic update, we rely on the reactivity of 'value'.
+         }
+      }
+    },
+
+    methods: {
+      getWeekStartEnd(date) {
+        const day = date.getDay();
+        const offset = (day - this.firstDayOfWeek + 7) % 7;
+        const weekStart = prevDate(date, offset);
+        const weekEnd = nextDate(weekStart, 6);
+        return { start: weekStart, end: weekEnd };
+      },
+
+      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 === 'is-today') && !cell.disabled) {
+          classes.push('is-available');
+          if (cell.type === 'is-today') {
+            classes.push('is-today');
+          }
+        } else {
+          classes.push(cell.type);
+        }
+
+        if (cell.type === 'normal' && defaultValue.some(date => this.cellMatchesDate(cell, date))) {
+          classes.push('is-default');
+        }
+
+        if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'is-today') && this.cellMatchesDate(cell, this.value)) {
+          classes.push('is-current');
+          if (this.isRangePicker) {
+            classes.push('is-range-picker-preview');
+          }
+        }
+
+        if (cell.inRange && ((cell.type === 'normal' || cell.type === 'is-today') || this.selectionMode === 'week' || this.selectionMode === 'week-range')) {
+          classes.push('is-in-range');
+
+          if (cell.start) {
+            classes.push('is-start-date');
+          }
+
+          if (cell.end) {
+            classes.push('is-end-date');
+          }
+
+          if (this.rangeState.selecting && this.rangeState.endDate && this.cellMatchesDate(cell, this.rangeState.endDate)) {
+            classes.push('is-preview-end');
+          }
+        }
+
+        if (cell.disabled) {
+          classes.push('is-disabled');
+        }
+
+        if (cell.selected) {
+          classes.push('is-selected');
+        }
+
+        if (cell.customClass) {
+          if (Array.isArray(cell.customClass)) {
+            classes = classes.concat(cell.customClass.filter(Boolean));
+          } else if (typeof cell.customClass === 'object') {
+            classes = classes.concat(Object.keys(cell.customClass).filter(key => cell.customClass[key]));
+          } else if (typeof cell.customClass === 'string') {
+            classes = classes.concat(cell.customClass.split(' ').filter(Boolean));
+          } else {
+            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 === 'is-prev-month') {
+          newDate.setMonth(month === 0 ? 11 : month - 1);
+          newDate.setFullYear(month === 0 ? year - 1 : year);
+        }
+
+        if (cell.type === 'is-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 && !this.isRangePicker) 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;
+
+        if (row !== this.lastRow || column !== this.lastColumn) {
+          this.lastRow = row;
+          this.lastColumn = column;
+
+          let endDate = this.getDateOfCell(row, column);
+          if (this.selectionMode === 'week-range') {
+            const { end } = this.getWeekStartEnd(endDate);
+            endDate = end;
+          }
+
+          if (this.selectionMode === 'range' || this.selectionMode === 'week-range') {
+            this.$emit('changerange', {
+              minDate: this.minDate,
+              maxDate: this.maxDate,
+              rangeState: {
+                selecting: true,
+                endDate: endDate
+              }
+            });
+          }
+        }
+      },
+
+      handleMouseLeave() {
+        if (this.selectionMode !== 'range' && this.selectionMode !== 'week-range') return;
+        this.lastRow = null;
+        this.lastColumn = null;
+        this.$emit('changerange', {
+          minDate: this.minDate,
+          maxDate: this.maxDate,
+          rangeState: {
+            selecting: this.rangeState.selecting,
+            endDate: null
+          }
+        });
+      },
+
+      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') {
+          // Changed: For RangePicker, emit visible=false to indicate confirmation
+          const visible = this.isRangePicker ? false : undefined;
+          this.$emit('pick', newDate, visible);
+        } 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 === 'week-range') {
+          const { start, end } = this.getWeekStartEnd(newDate);
+          if (!this.rangeState.selecting) {
+            this.$emit('pick', {minDate: start, maxDate: null});
+            this.rangeState.selecting = true;
+          } else {
+            if (start >= this.minDate) {
+              this.$emit('pick', {minDate: this.minDate, maxDate: end});
+            } else {
+              const { end: minEnd } = this.getWeekStartEnd(this.minDate);
+              this.$emit('pick', {minDate: start, maxDate: minEnd});
+            }
+            this.rangeState.selecting = false;
+          }
+        } 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>
+
+<style>
+  .el-date-table td.current:not(.disabled) span {
+    color: #FFF;
+    background-color: #409EFF;
+  }
+  
+  .el-date-table td.current.is-range-picker-preview:not(.disabled) span {
+      background-color: transparent;
+      color: #409EFF;
+      border: 1px dashed #409EFF;
+      box-sizing: border-box;
+  }
+</style>