@opentiny/vue-renderless 3.1.0-alpha.0

package/date-table/index.js

@@ -0,0 +1,457 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { formatDate } from '@opentiny/vue-renderless/common/deps/date-util';
+import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, prevDate, nextDate, isDate, clearTime } from '@opentiny/vue-renderless/common/deps/date-util';
+import { DATEPICKER } from '@opentiny/vue-renderless/common';
+var formatJudg = function formatJudg(_ref) {
+  var day = _ref.day,
+    offset = _ref.offset,
+    j = _ref.j,
+    i = _ref.i,
+    cell = _ref.cell,
+    count = _ref.count,
+    dateCountOfLastMonth = _ref.dateCountOfLastMonth;
+  var nodfpm = day + offset < 0 ? 7 + day + offset : day + offset;
+  if (j + i * 7 >= nodfpm) {
+    cell.text = count++;
+  } else {
+    cell.text = dateCountOfLastMonth - (nodfpm - j % 7) + 1 + i * 7;
+    cell.type = DATEPICKER.PreMonth;
+  }
+  return {
+    count: count
+  };
+};
+export var getOffsetDay = function getOffsetDay(props) {
+  return function () {
+    var week = props.firstDayOfWeek;
+    return week > 3 ? 7 - week : -week;
+  };
+};
+export var getWeeks = function getWeeks(_ref2) {
+  var props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    var week = props.firstDayOfWeek;
+    return state.constWeeks.concat(state.constWeeks).slice(week, week + 7);
+  };
+};
+export var getDateTimestamp = function getDateTimestamp(time) {
+  if (typeof time === 'number' || typeof time === 'string') {
+    return clearTime(new Date(time)).getTime();
+  } else if (time instanceof Date) {
+    return clearTime(time).getTime();
+  }
+  return NaN;
+};
+export var arrayFindIndex = function arrayFindIndex(arr, pred) {
+  for (var i = 0, len = arr.length; i !== len; ++i) {
+    if (pred(arr[i])) {
+      return i;
+    }
+  }
+  return -1;
+};
+export var arrayFind = function arrayFind(arr, pred) {
+  var idx = arrayFindIndex(arr, pred);
+  return ~idx ? arr[idx] : undefined;
+};
+var getSelected = function getSelected(_ref3) {
+  var props = _ref3.props,
+    cell = _ref3.cell,
+    format = _ref3.format,
+    t = _ref3.t,
+    cellDate = _ref3.cellDate,
+    selectedDate = _ref3.selectedDate;
+  var selected = cell.selected;
+  if (props.selectionMode === 'dates') {
+    selected = arrayFind(selectedDate, function (date) {
+      return formatDate(date, format, t) === formatDate(cellDate, format, t);
+    });
+  } else {
+    selected = arrayFind(selectedDate, function (date) {
+      return date.getTime() === cellDate.getTime();
+    });
+  }
+  return selected;
+};
+export var getCell = function getCell(_ref4) {
+  var state = _ref4.state,
+    props = _ref4.props;
+  return function (row, i, j) {
+    var now = getDateTimestamp(new Date());
+    var cell = row[props.showWeekNumber ? j + 1 : j];
+    if (!cell) {
+      cell = {
+        row: i,
+        column: j,
+        inRange: false,
+        start: false,
+        end: false,
+        type: DATEPICKER.Normal
+      };
+    }
+    cell.type = DATEPICKER.Normal;
+    var index = i * 7 + j;
+    var time = nextDate(state.startDate, index - state.offsetDay).getTime();
+    cell.inRange = time >= getDateTimestamp(props.minDate) && time <= getDateTimestamp(props.maxDate);
+    cell.start = props.minDate && time === getDateTimestamp(props.minDate);
+    cell.end = props.maxDate && time === getDateTimestamp(props.maxDate);
+    time === now && (cell.type = DATEPICKER.Today);
+    return {
+      cell: cell,
+      cellDate: new Date(time)
+    };
+  };
+};
+var doCount = function doCount(_ref5) {
+  var i = _ref5.i,
+    day = _ref5.day,
+    offset = _ref5.offset,
+    j = _ref5.j,
+    cell = _ref5.cell,
+    count = _ref5.count,
+    dateCountOfLastMonth = _ref5.dateCountOfLastMonth,
+    dateCountOfMonth = _ref5.dateCountOfMonth;
+  if (i >= 0 && i <= 1) {
+    var ret = formatJudg({
+      day: day,
+      offset: offset,
+      j: j,
+      i: i,
+      cell: cell,
+      count: count,
+      dateCountOfLastMonth: dateCountOfLastMonth
+    });
+    count = ret.count;
+  } else {
+    if (count <= dateCountOfMonth) {
+      cell.text = count++;
+    } else {
+      cell.text = count++ - dateCountOfMonth;
+      cell.type = DATEPICKER.NextMonth;
+    }
+  }
+  return count;
+};
+export var coerceTruthyValueToArray = function coerceTruthyValueToArray(val) {
+  return Array.isArray(val) ? val : val ? [val] : [];
+};
+export var getRows = function getRows(_ref6) {
+  var api = _ref6.api,
+    props = _ref6.props,
+    state = _ref6.state,
+    t = _ref6.t,
+    vm = _ref6.vm;
+  return function () {
+    var date = new Date(state.year, state.month, 1);
+    var day = getFirstDayOfMonth(date);
+    var dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
+    var dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth() === 0 ? 11 : date.getMonth() - 1);
+    day = day === 0 ? 7 : day;
+    var offset = state.offsetDay;
+    var rows = state.tableRows;
+    var startDate = state.startDate;
+    var disabledDate = props.disabledDate;
+    var cellClassName = props.cellClassName;
+    var selectedDate = props.selectionMode === DATEPICKER.Dates ? coerceTruthyValueToArray(props.value) : [];
+    var count = 1;
+    for (var i = 0; i < 6; i++) {
+      var row = rows[i];
+      if (props.showWeekNumber && !row[0]) {
+        row[0] = {
+          type: DATEPICKER.Week,
+          text: getWeekNumber(nextDate(startDate, i * 7 + 1))
+        };
+      }
+      for (var j = 0; j < 7; j++) {
+        var _api$getCell = api.getCell(row, i, j, DATEPICKER.Normal, props),
+          cell = _api$getCell.cell,
+          cellDate = _api$getCell.cellDate;
+        count = doCount({
+          i: i,
+          day: day,
+          offset: offset,
+          j: j,
+          cell: cell,
+          count: count,
+          dateCountOfLastMonth: dateCountOfLastMonth,
+          dateCountOfMonth: dateCountOfMonth
+        });
+        cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);
+        cell.selected = getSelected({
+          props: props,
+          cell: cell,
+          api: api,
+          format: DATEPICKER.DateFormats.date,
+          t: t,
+          cellDate: cellDate,
+          selectedDate: selectedDate
+        });
+        cell.customClass = typeof cellClassName === 'function' && cellClassName(cellDate);
+        vm.$set(row, props.showWeekNumber ? j + 1 : j, cell);
+      }
+      if (props.selectionMode === DATEPICKER.Week) {
+        var _ref7 = props.showWeekNumber ? [1, 7] : [0, 6],
+          _ref8 = _slicedToArray(_ref7, 2),
+          start = _ref8[0],
+          end = _ref8[1];
+        var _isWeekActive = api.isWeekActive(row[start + 1]);
+        Object.assign(row[start], {
+          inRange: _isWeekActive,
+          start: _isWeekActive
+        });
+        Object.assign(row[end], {
+          inRange: _isWeekActive,
+          end: _isWeekActive
+        });
+      }
+    }
+    return rows;
+  };
+};
+export var watchMinDate = function watchMinDate(_ref9) {
+  var api = _ref9.api,
+    props = _ref9.props;
+  return function (value, oldvalue) {
+    if (getDateTimestamp(value) !== getDateTimestamp(oldvalue)) {
+      api.markRange(props.minDate, props.maxDate);
+    }
+  };
+};
+export var watchMaxDate = function watchMaxDate(_ref10) {
+  var api = _ref10.api,
+    props = _ref10.props;
+  return function (value, oldvalue) {
+    if (getDateTimestamp(value) !== getDateTimestamp(oldvalue)) {
+      api.markRange(props.minDate, props.maxDate);
+    }
+  };
+};
+export var cellMatchesDate = function cellMatchesDate(state) {
+  return function (cell, date) {
+    var value = new Date(date);
+    return state.year === value.getFullYear() && state.month === value.getMonth() && Number(cell.text) === value.getDate();
+  };
+};
+export var getCellRangeClasses = function getCellRangeClasses(_ref11) {
+  var props = _ref11.props;
+  return function (cell, classes) {
+    if (cell.type === DATEPICKER.Normal || cell.type === DATEPICKER.Today || props.selectionMode === DATEPICKER.Week) {
+      classes.push(DATEPICKER.InRange);
+      if (cell.start) {
+        classes.push(DATEPICKER.StartDate);
+      }
+      if (cell.end) {
+        classes.push(DATEPICKER.EndDate);
+      }
+    }
+  };
+};
+export var getCellClasses = function getCellClasses(_ref12) {
+  var api = _ref12.api,
+    props = _ref12.props,
+    state = _ref12.state;
+  return function (cell) {
+    var classes = [];
+    var selectionMode = props.selectionMode;
+    var defaultValue = props.defaultValue ? Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue] : [];
+    if ((cell.type === DATEPICKER.Normal || cell.type === DATEPICKER.Today) && !cell.disabled) {
+      classes.push(DATEPICKER.Aviailable);
+      if (cell.type === DATEPICKER.Today) {
+        classes.push(DATEPICKER.Today);
+      }
+    } else {
+      classes.push(cell.type);
+    }
+    if (cell.type === DATEPICKER.Normal && defaultValue.some(function (date) {
+      return api.cellMatchesDate(cell, date);
+    })) {
+      classes.push(DATEPICKER.Default);
+    }
+    if (selectionMode === DATEPICKER.Day && ~[DATEPICKER.Normal, DATEPICKER.Today].indexOf(cell.type) && api.cellMatchesDate(cell, props.value || state.date)) {
+      classes.push(DATEPICKER.Current);
+    }
+    if (cell.inRange) {
+      api.getCellRangeClasses(cell, classes);
+    }
+    if (cell.disabled) {
+      classes.push(DATEPICKER.Disabled);
+    }
+    if (cell.selected) {
+      classes.push(DATEPICKER.Selected);
+    }
+    if (cell.customClass) {
+      classes.push(cell.customClass);
+    }
+    return classes.join(' ');
+  };
+};
+export var getDateOfCell = function getDateOfCell(_ref13) {
+  var props = _ref13.props,
+    state = _ref13.state;
+  return function (row, column) {
+    var offsetFromStart = row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - state.offsetDay;
+    return nextDate(state.startDate, offsetFromStart);
+  };
+};
+export var isWeekActive = function isWeekActive(_ref14) {
+  var props = _ref14.props,
+    state = _ref14.state;
+  return function (cell) {
+    if (props.selectionMode !== DATEPICKER.Week) return false;
+    var newDate = new Date(state.year, state.month, 1);
+    var year = newDate.getFullYear();
+    var month = newDate.getMonth();
+    if (cell.type === DATEPICKER.PreMonth) {
+      newDate.setMonth(month === 0 ? 11 : month - 1);
+      newDate.setFullYear(month === 0 ? year - 1 : year);
+    }
+    if (cell.type === DATEPICKER.NextMonth) {
+      newDate.setMonth(month === 11 ? 0 : month + 1);
+      newDate.setFullYear(month === 11 ? year + 1 : year);
+    }
+    newDate.setDate(parseInt(cell.text, 10));
+    if (isDate(props.value)) {
+      var dayOffset = (props.value.getDay() - props.firstDayOfWeek + 7) % 7 - 1;
+      var weekDate = prevDate(props.value, dayOffset);
+      return weekDate.getTime() === newDate.getTime();
+    }
+    return false;
+  };
+};
+export var markRange = function markRange(_ref15) {
+  var props = _ref15.props,
+    state = _ref15.state;
+  return function (minDate, maxDate) {
+    var minDateTimestamp = getDateTimestamp(minDate);
+    var maxDateTimestamp = getDateTimestamp(maxDate) || minDateTimestamp;
+    minDate = Math.min(minDateTimestamp, maxDateTimestamp);
+    maxDate = Math.max(minDateTimestamp, maxDateTimestamp);
+    var startDate = state.startDate;
+    var rows = state.rows;
+    for (var i = 0, k = rows.length; i < k; i++) {
+      var row = rows[i];
+      for (var j = 0, l = row.length; j < l; j++) {
+        if (!props.showWeekNumber || j !== 0) {
+          var cell = row[j];
+          var index = i * 7 + j + (props.showWeekNumber ? -1 : 0);
+          var time = nextDate(startDate, index - state.offsetDay).getTime();
+          cell.inRange = minDate && time >= minDate && time <= maxDate;
+          cell.start = minDate && time === minDate;
+          cell.end = maxDate && time === maxDate;
+        }
+      }
+    }
+  };
+};
+export var handleMouseMove = function handleMouseMove(_ref16) {
+  var api = _ref16.api,
+    emit = _ref16.emit,
+    props = _ref16.props,
+    state = _ref16.state;
+  return function (event) {
+    if (!props.rangeState.selecting) {
+      return;
+    }
+    var targetEl = event.target;
+    if (targetEl.tagName === 'SPAN') {
+      targetEl = targetEl.parentNode.parentNode;
+    }
+    if (targetEl.tagName === 'DIV') {
+      targetEl = targetEl.parentNode;
+    }
+    if (targetEl.tagName !== 'TD') {
+      return;
+    }
+    var row = targetEl.parentNode.rowIndex - 1;
+    var column = targetEl.cellIndex;
+    if (state.rows[row][column].disabled) {
+      return;
+    }
+    if (row !== state.lastRow || column !== state.lastColumn) {
+      state.lastRow = row;
+      state.lastColumn = column;
+      emit('changerange', {
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        rangeState: {
+          selecting: true,
+          endDate: api.getDateOfCell(row, column)
+        }
+      });
+    }
+  };
+};
+var getTarget = function getTarget(event) {
+  var target = event.target;
+  if (target.tagName === 'SPAN') {
+    target = target.parentNode.parentNode;
+  }
+  if (target.tagName === 'DIV') {
+    target = target.parentNode;
+  }
+  return target;
+};
+export var removeFromArray = function removeFromArray(arr, pred) {
+  var idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred);
+  return idx >= 0 ? [].concat(_toConsumableArray(arr.slice(0, idx)), _toConsumableArray(arr.slice(idx + 1))) : arr;
+};
+export var handleClick = function handleClick(_ref17) {
+  var api = _ref17.api,
+    emit = _ref17.emit,
+    props = _ref17.props,
+    state = _ref17.state;
+  return function (event) {
+    var target = getTarget(event);
+    if (target.tagName !== 'TD') {
+      return;
+    }
+    var row = target.parentNode.rowIndex - 1;
+    var column = props.selectionMode === DATEPICKER.Week ? 1 : target.cellIndex;
+    var cell = state.rows[row][column];
+    if (cell.disabled || cell.type === DATEPICKER.Week) {
+      return;
+    }
+    var newDate = api.getDateOfCell(row, column);
+    if (props.selectionMode === DATEPICKER.Range) {
+      if (!props.rangeState.selecting) {
+        emit('pick', {
+          minDate: newDate,
+          maxDate: null
+        });
+        props.rangeState.selecting = true;
+      } else {
+        if (newDate >= props.minDate) {
+          emit('pick', {
+            minDate: props.minDate,
+            maxDate: newDate
+          });
+        } else {
+          emit('pick', {
+            minDate: newDate,
+            maxDate: props.minDate
+          });
+        }
+        props.rangeState.selecting = false;
+      }
+    } else if (props.selectionMode === DATEPICKER.Day) {
+      emit('pick', newDate);
+    } else if (props.selectionMode === DATEPICKER.Week) {
+      var weekNumber = getWeekNumber(newDate);
+      var value = newDate.getFullYear() + 'w' + weekNumber;
+      emit('pick', {
+        year: newDate.getFullYear(),
+        week: weekNumber,
+        value: value,
+        date: newDate
+      });
+    } else if (props.selectionMode === DATEPICKER.Dates) {
+      var _value = props.value || [];
+      var newValue = cell.selected ? removeFromArray(_value, function (date) {
+        return date.getTime() === newDate.getTime();
+      }) : [].concat(_toConsumableArray(_value), [newDate]);
+      emit('pick', newValue);
+    }
+  };
+};

package/date-table/vue.js

@@ -0,0 +1,151 @@
+import { getOffsetDay, getWeeks, getRows, handleClick, watchMinDate, watchMaxDate, cellMatchesDate, getCellClasses, getDateOfCell, isWeekActive, markRange, handleMouseMove, getCellRangeClasses, getCell } from './index';
+import { getStartDateOfMonth } from '@opentiny/vue-renderless/common/deps/date-util';
+export var api = ['state', 'getCellClasses', 'isWeekActive', 'handleMouseMove', 'handleClick'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api,
+    props = _ref.props;
+  var state = reactive({
+    tableRows: [[], [], [], [], [], []],
+    lastRow: null,
+    lastColumn: null,
+    constWeeks: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
+    rows: computed(function () {
+      return api.getRows();
+    }),
+    weeks: computed(function () {
+      return api.getWeeks();
+    }),
+    month: computed(function () {
+      return props.date.getMonth();
+    }),
+    offsetDay: computed(function () {
+      return api.getOffsetDay();
+    }),
+    year: computed(function () {
+      return props.date.getFullYear();
+    }),
+    startDate: computed(function () {
+      return getStartDateOfMonth(state.year, state.month);
+    }),
+    date: props.value
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    props = _ref2.props,
+    emit = _ref2.emit,
+    t = _ref2.t,
+    vm = _ref2.vm;
+  Object.assign(api, {
+    t: t,
+    state: state,
+    getOffsetDay: getOffsetDay(props),
+    getWeeks: getWeeks({
+      props: props,
+      state: state
+    }),
+    markRange: markRange({
+      props: props,
+      state: state
+    }),
+    cellMatchesDate: cellMatchesDate(state),
+    getDateOfCell: getDateOfCell({
+      props: props,
+      state: state
+    }),
+    getCell: getCell({
+      state: state,
+      props: props
+    }),
+    isWeekActive: isWeekActive({
+      props: props,
+      state: state
+    }),
+    watchMaxDate: watchMaxDate({
+      api: api,
+      props: props
+    }),
+    watchMinDate: watchMinDate({
+      api: api,
+      props: props
+    }),
+    handleMouseMove: handleMouseMove({
+      api: api,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    getRows: getRows({
+      api: api,
+      props: props,
+      state: state,
+      t: t,
+      vm: vm
+    }),
+    handleClick: handleClick({
+      api: api,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    getCellClasses: getCellClasses({
+      api: api,
+      props: props,
+      state: state
+    }),
+    getCellRangeClasses: getCellRangeClasses({
+      props: props
+    })
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    props = _ref3.props,
+    api = _ref3.api;
+  watch(function () {
+    return props.rangeState;
+  }, function (value) {
+    return api.markRange(props.minDate, value.endDate);
+  }, {
+    deep: true
+  });
+  watch(function () {
+    return props.minDate;
+  }, api.watchMinDate);
+  watch(function () {
+    return props.maxDate;
+  }, api.watchMaxDate);
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch;
+  var t = _ref5.t,
+    vm = _ref5.vm,
+    emit = _ref5.emit;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api,
+    props: props
+  });
+  initApi({
+    api: api,
+    state: state,
+    props: props,
+    emit: emit,
+    t: t,
+    vm: vm
+  });
+  initWatch({
+    watch: watch,
+    props: props,
+    api: api
+  });
+  return api;
+};