@opentiny/vue-renderless 3.1.0-alpha.0

package/modal/vue.js

@@ -0,0 +1,130 @@
+import { dragEvent, handleEvent, mousedownEvent, toggleZoomEvent, revert, maximize, getBox, handleGlobalKeydownEvent, close, updateStyle, addMsgQueue, removeMsgQueue, computedIsMsg, watchValue, created, mounted, beforeUnmouted, selfClickEvent, updateZindex, closeEvent, confirmEvent, cancelEvent, open } from './index';
+export var api = ['state', 'dragEvent', 'mousedownEvent', 'toggleZoomEvent', 'revert', 'maximize', 'getBox', 'close', 'updateStyle', 'selfClickEvent', 'updateZindex', 'closeEvent', 'confirmEvent', 'cancelEvent', 'open', 'beforeUnmouted'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    onMounted = _ref.onMounted,
+    onBeforeUnmount = _ref.onBeforeUnmount,
+    reactive = _ref.reactive,
+    watch = _ref.watch;
+  var refs = _ref2.refs,
+    emit = _ref2.emit,
+    emitter = _ref2.emitter,
+    nextTick = _ref2.nextTick,
+    broadcast = _ref2.broadcast,
+    parent = _ref2.vm;
+  var api = {};
+  var state = reactive({
+    emitter: emitter(),
+    visible: false,
+    contentVisible: false,
+    cumsumZindex: 0,
+    modalTop: 0,
+    modalZindex: 0,
+    zoomLocat: null,
+    isMsg: computed(function () {
+      return api.computedIsMsg(props);
+    }),
+    prevEvent: null
+  });
+  Object.assign(api, {
+    state: state,
+    broadcast: broadcast,
+    computedIsMsg: computedIsMsg(),
+    updateStyle: updateStyle(nextTick),
+    getBox: getBox(refs),
+    watchValue: watchValue(api),
+    created: created({
+      api: api,
+      props: props,
+      state: state
+    }),
+    mounted: mounted({
+      api: api,
+      parent: parent,
+      props: props
+    }),
+    beforeUnmouted: beforeUnmouted({
+      api: api,
+      parent: parent
+    }),
+    selfClickEvent: selfClickEvent({
+      api: api,
+      parent: parent,
+      props: props
+    }),
+    updateZindex: updateZindex({
+      state: state,
+      props: props
+    }),
+    handleEvent: handleEvent({
+      api: api,
+      emit: emit,
+      parent: parent,
+      props: props
+    }),
+    closeEvent: closeEvent(api),
+    confirmEvent: confirmEvent(api),
+    cancelEvent: cancelEvent(api),
+    open: open({
+      api: api,
+      emit: emit,
+      nextTick: nextTick,
+      parent: parent,
+      props: props,
+      state: state
+    }),
+    addMsgQueue: addMsgQueue({
+      api: api,
+      parent: parent
+    }),
+    removeMsgQueue: removeMsgQueue({
+      api: api,
+      parent: parent
+    }),
+    close: close({
+      emit: emit,
+      parent: parent,
+      props: props,
+      state: state
+    }),
+    handleGlobalKeydownEvent: handleGlobalKeydownEvent(api),
+    maximize: maximize({
+      api: api,
+      nextTick: nextTick,
+      props: props,
+      state: state
+    }),
+    revert: revert({
+      api: api,
+      nextTick: nextTick,
+      state: state
+    }),
+    toggleZoomEvent: toggleZoomEvent({
+      api: api,
+      emit: emit,
+      parent: parent,
+      state: state
+    }),
+    mousedownEvent: mousedownEvent({
+      api: api,
+      nextTick: nextTick,
+      props: props,
+      state: state,
+      emit: emit
+    }),
+    dragEvent: dragEvent({
+      api: api,
+      emit: emit,
+      parent: parent,
+      props: props,
+      state: state
+    })
+  });
+  watch(function () {
+    return props.modelValue;
+  }, api.watchValue);
+  api.created();
+  onMounted(api.mounted);
+  onBeforeUnmount(api.beforeUnmouted);
+  return api;
+};

package/month-range/index.js

@@ -0,0 +1,169 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { isDate, modifyWithTimeString, prevYear, nextYear, nextMonth } from '@opentiny/vue-renderless/common/deps/date-util';
+export var calcDefaultValue = function calcDefaultValue(defaultValue) {
+  if (Array.isArray(defaultValue)) {
+    return [new Date(defaultValue[0]), new Date(defaultValue[1])];
+  } else if (defaultValue) {
+    return [new Date(defaultValue), nextMonth(new Date(defaultValue))];
+  }
+  return [new Date(), nextMonth(new Date())];
+};
+export var watchValue = function watchValue(_ref) {
+  var state = _ref.state;
+  return function (value) {
+    if (!value) {
+      state.maxDate = null;
+      state.minDate = null;
+    } else if (Array.isArray(value)) {
+      if (isDate(value[0])) {
+        state.minDate = new Date(value[0]);
+      } else {
+        state.minDate = null;
+      }
+      if (isDate(value[1])) {
+        state.maxDate = new Date(value[1]);
+      } else {
+        state.maxDate = null;
+      }
+      if (state.minDate) {
+        state.leftDate = state.minDate;
+        if (state.maxDate && state.unlinkPanels) {
+          var maxDateYear = state.maxDate.getFullYear();
+          var minDateYear = state.minDate.getFullYear();
+          state.rightDate = maxDateYear === minDateYear ? nextYear(state.maxDate) : state.maxDate;
+        } else {
+          state.rightDate = nextYear(state.leftDate);
+        }
+      } else {
+        state.leftDate = calcDefaultValue(state.defaultValue)[0];
+        state.rightDate = nextYear(state.leftDate);
+      }
+    }
+  };
+};
+export var watchDefaultValue = function watchDefaultValue(_ref2) {
+  var state = _ref2.state;
+  return function (value) {
+    if (!Array.isArray(state.value)) {
+      var _calcDefaultValue = calcDefaultValue(value),
+        _calcDefaultValue2 = _slicedToArray(_calcDefaultValue, 2),
+        left = _calcDefaultValue2[0],
+        right = _calcDefaultValue2[1];
+      state.leftDate = left;
+      state.rightDate = value && value[1] && left.getFullYear() !== right.getFullYear() && state.unlinkPanels ? right : nextYear(state.leftDate);
+    }
+  };
+};
+export var handleClear = function handleClear(_ref3) {
+  var emit = _ref3.emit,
+    state = _ref3.state;
+  return function () {
+    state.minDate = null;
+    state.maxDate = null;
+    state.leftDate = calcDefaultValue(state.defaultValue)[0];
+    state.rightDate = nextYear(state.leftDate);
+    emit('pick', null);
+  };
+};
+export var handleChangeRange = function handleChangeRange(state) {
+  return function (val) {
+    state.minDate = val.minDate;
+    state.maxDate = val.maxDate;
+    state.rangeState = val.rangeState;
+  };
+};
+export var handleRangePick = function handleRangePick(_ref4) {
+  var api = _ref4.api,
+    state = _ref4.state,
+    t = _ref4.t;
+  return function (val) {
+    var close = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var defaultTime = state.defaultTime || [];
+    var maxDate = modifyWithTimeString(val.maxDate, defaultTime[1], t);
+    var minDate = modifyWithTimeString(val.minDate, defaultTime[0], t);
+    if (state.minDate === minDate && state.maxDate === maxDate) {
+      return;
+    }
+    if (state.onPick) {
+      state.onPick(val);
+    }
+    state.minDate = minDate;
+    state.maxDate = maxDate;
+    setTimeout(function () {
+      state.minDate = minDate;
+      state.maxDate = maxDate;
+    }, 10);
+    if (!close) {
+      return;
+    }
+    api.handleConfirm();
+  };
+};
+export var handleShortcutClick = function handleShortcutClick(api) {
+  return function (shortcut) {
+    if (shortcut.onClick) {
+      var choose = {
+        $emit: function $emit(type, _ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2),
+            start = _ref6[0],
+            end = _ref6[1];
+          api.doPick(start, end);
+        }
+      };
+      shortcut.onClick(choose);
+    }
+  };
+};
+export var doPick = function doPick(emit) {
+  return function (begin, end) {
+    emit('pick', [begin, end], false);
+  };
+};
+export var leftPrevYear = function leftPrevYear(state) {
+  return function () {
+    state.leftDate = prevYear(state.leftDate);
+    if (!state.unlinkPanels) {
+      state.rightDate = prevYear(state.rightDate);
+    }
+  };
+};
+export var rightNextYear = function rightNextYear(state) {
+  return function () {
+    if (!state.unlinkPanels) {
+      state.leftDate = nextYear(state.leftDate);
+    }
+    state.rightDate = nextYear(state.rightDate);
+  };
+};
+export var leftNextYear = function leftNextYear(state) {
+  return function () {
+    return state.leftDate = nextYear(state.leftDate);
+  };
+};
+export var rightPrevYear = function rightPrevYear(state) {
+  return function () {
+    return state.rightDate = prevYear(state.rightDate);
+  };
+};
+export var handleConfirm = function handleConfirm(_ref7) {
+  var api = _ref7.api,
+    emit = _ref7.emit,
+    state = _ref7.state;
+  return function () {
+    var visible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (api.isValidValue([state.minDate, state.maxDate])) {
+      emit('pick', [state.minDate, state.maxDate], visible);
+    }
+  };
+};
+export var isValidValue = function isValidValue(state) {
+  return function (value) {
+    return Array.isArray(value) && value && value[1] && value[0] && isDate(value[1]) && isDate(value[0]) && value[0].getTime() <= value[1].getTime() && (typeof state.disabledDate === 'function' ? !state.disabledDate(value[1]) && !state.disabledDate(value[0]) : true);
+  };
+};
+export var resetView = function resetView(state) {
+  return function () {
+    state.minDate = state.value && isDate(state.value[0]) ? new Date(state.value[0]) : null;
+    state.maxDate = state.value && isDate(state.value[0]) ? new Date(state.value[1]) : null;
+  };
+};

package/month-range/vue.js

@@ -0,0 +1,104 @@
+import { resetView, isValidValue, handleConfirm, rightPrevYear, leftNextYear, rightNextYear, leftPrevYear, handleClear, watchValue, watchDefaultValue, handleChangeRange, handleRangePick, handleShortcutClick, doPick } from './index';
+import { nextYear } from '@opentiny/vue-renderless/common/deps/date-util';
+export var api = ['state', 'rightNextYear', 'rightPrevYear', 'handleRangePick', 'handleShortcutClick', 'handleChangeRange', 'leftPrevYear', 'leftNextYear'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api,
+    t = _ref.t;
+  var state = reactive({
+    popperClass: '',
+    value: [],
+    defaultValue: null,
+    defaultTime: null,
+    minDate: '',
+    maxDate: '',
+    leftDate: new Date(),
+    rightDate: nextYear(new Date()),
+    rangeState: {
+      endDate: null,
+      selecting: false,
+      row: null,
+      column: null
+    },
+    shortcuts: '',
+    visible: '',
+    disabledDate: '',
+    format: '',
+    arrowControl: false,
+    unlinkPanels: false,
+    btnDisabled: computed(function () {
+      return !(state.minDate && state.maxDate && !state.selecting && api.isValidValue([state.minDate, state.maxDate]));
+    }),
+    leftLabel: computed(function () {
+      return state.leftDate.getFullYear() + ' ' + t('ui.datepicker.year');
+    }),
+    rightLabel: computed(function () {
+      return state.rightDate.getFullYear() + ' ' + t('ui.datepicker.year');
+    }),
+    leftYear: computed(function () {
+      return state.leftDate.getFullYear();
+    }),
+    rightYear: computed(function () {
+      return state.rightDate.getFullYear() === state.leftDate.getFullYear() ? state.leftDate.getFullYear() + 1 : state.rightDate.getFullYear();
+    }),
+    enableYearArrow: computed(function () {
+      return state.unlinkPanels && state.rightYear > state.leftYear + 1;
+    })
+  });
+  return state;
+};
+export var renderless = function renderless(props, _ref2, _ref3) {
+  var computed = _ref2.computed,
+    reactive = _ref2.reactive,
+    watch = _ref2.watch;
+  var t = _ref3.t,
+    $emit = _ref3.emit;
+  var api = {};
+  var emit = props.emitter ? props.emitter.emit : $emit;
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api,
+    t: t
+  });
+  Object.assign(api, {
+    state: state,
+    resetView: resetView(state),
+    handleChangeRange: handleChangeRange(state),
+    isValidValue: isValidValue(state),
+    leftNextYear: leftNextYear(state),
+    leftPrevYear: leftPrevYear(state),
+    doPick: doPick(emit),
+    rightNextYear: rightNextYear(state),
+    rightPrevYear: rightPrevYear(state),
+    watchValue: watchValue({
+      state: state
+    }),
+    handleClear: handleClear({
+      emit: emit,
+      state: state
+    }),
+    watchDefaultValue: watchDefaultValue({
+      state: state
+    }),
+    handleConfirm: handleConfirm({
+      api: api,
+      emit: emit,
+      state: state
+    }),
+    handleRangePick: handleRangePick({
+      api: api,
+      state: state,
+      t: t
+    }),
+    handleShortcutClick: handleShortcutClick(api)
+  });
+  watch(function () {
+    return state.value;
+  }, api.watchValue);
+  watch(function () {
+    return state.defaultValue;
+  }, api.watchDefaultValue);
+  return api;
+};

package/month-table/index.js

@@ -0,0 +1,232 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import { toDate } from '@opentiny/vue-renderless/common/date';
+import { hasClass } from '@opentiny/vue-renderless/common/deps/dom';
+import { range as rangeDate, getDayCountOfMonth, nextDate } from '@opentiny/vue-renderless/common/deps/date-util';
+import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from '@opentiny/vue-renderless/date-table';
+import { DATEPICKER } from '@opentiny/vue-renderless/common';
+export var datesInMonth = function datesInMonth(year, month) {
+  var numOfDays = getDayCountOfMonth(year, month);
+  var firstDay = new Date(year, month, 1);
+  return rangeDate(numOfDays).map(function (n) {
+    return nextDate(firstDay, n);
+  });
+};
+export var clearDate = function clearDate(date) {
+  return new Date(date.getFullYear(), date.getMonth());
+};
+export var getMonthTimestamp = function getMonthTimestamp(time) {
+  if (typeof time === 'number' || typeof time === 'string') {
+    return clearDate(new Date(time)).getTime();
+  } else if (time instanceof Date) {
+    return clearDate(time).getTime();
+  }
+  return NaN;
+};
+export var getRows = function getRows(_ref) {
+  var props = _ref.props,
+    state = _ref.state,
+    vm = _ref.vm;
+  return function () {
+    var tableRows = state.tableRows;
+    var disabledDate = state.disabledDate;
+    var selectedDate = [];
+    var now = getMonthTimestamp(new Date());
+    var date = props.date,
+      minDate = props.minDate,
+      maxDate = props.maxDate;
+    for (var i = 0; i < 3; i++) {
+      var row = tableRows[i];
+      var _loop = function _loop(j) {
+        var cell = row[j];
+        if (!cell) {
+          cell = {
+            type: DATEPICKER.Normal,
+            row: i,
+            column: j,
+            inRange: false,
+            start: false,
+            end: false
+          };
+        }
+        cell.type = DATEPICKER.Normal;
+        var index = i * 4 + j;
+        var time = new Date(date.getFullYear(), index).getTime();
+        cell.start = minDate && time === getMonthTimestamp(minDate);
+        cell.end = maxDate && time === getMonthTimestamp(maxDate);
+        cell.inRange = time >= getMonthTimestamp(minDate) && time <= getMonthTimestamp(maxDate);
+        var isToday = time === now;
+        if (isToday) {
+          cell.type = DATEPICKER.Today;
+        }
+        cell.text = index;
+        var cellDate = new Date(time);
+        cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);
+        cell.selected = arrayFind(selectedDate, function (selectDate) {
+          return selectDate.getTime() === cellDate.getTime();
+        });
+        vm.$set(row, j, cell);
+      };
+      for (var j = 0; j < 4; j++) {
+        _loop(j);
+      }
+    }
+    return tableRows;
+  };
+};
+export var markRange = function markRange(_ref2) {
+  var props = _ref2.props,
+    state = _ref2.state;
+  return function (minDate, maxDate) {
+    minDate = Math.min(getMonthTimestamp(minDate), getMonthTimestamp(maxDate));
+    maxDate = Math.max(getMonthTimestamp(minDate), getMonthTimestamp(maxDate));
+    var rows = state.rows;
+    for (var i = 0, len = rows.length; i < len; i++) {
+      var row = rows[i];
+      for (var j = 0, l = row.length; j < l; j++) {
+        var cell = row[j];
+        var index = i * 4 + j;
+        var time = new Date(props.date.getFullYear(), index).getTime();
+        cell.start = minDate && time === minDate;
+        cell.end = maxDate && time === maxDate;
+        cell.inRange = minDate && time >= minDate && time <= maxDate;
+      }
+    }
+  };
+};
+export var watchDate = function watchDate(_ref3) {
+  var api = _ref3.api,
+    props = _ref3.props;
+  return function (value, oldvalue) {
+    if (getMonthTimestamp(value) !== getMonthTimestamp(oldvalue)) {
+      api.markRange(props.minDate, props.maxDate);
+    }
+  };
+};
+var getTarget = function getTarget(event) {
+  var target = event.target;
+  if (target.tagName === 'A') {
+    target = target.parentNode.parentNode;
+  }
+  if (target.tagName === 'DIV') {
+    target = target.parentNode;
+  }
+  if (target.tagName !== 'TD') {
+    return;
+  }
+  return target;
+};
+export var handleMouseMove = function handleMouseMove(_ref4) {
+  var api = _ref4.api,
+    emit = _ref4.emit,
+    props = _ref4.props,
+    state = _ref4.state;
+  return function (event) {
+    if (!props.rangeState.selecting) {
+      return;
+    }
+    var target = getTarget(event);
+    if (!target) {
+      return;
+    }
+    var row = target.parentNode.rowIndex;
+    var colu = target.cellIndex;
+    if (state.rows[row][colu].disabled) {
+      return;
+    }
+    if (row !== state.lastRow || colu !== state.lastColumn) {
+      state.lastColumn = colu;
+      state.lastRow = row;
+      emit('changerange', {
+        maxDate: props.maxDate,
+        minDate: props.minDate,
+        rangeState: {
+          selecting: true,
+          endDate: api.getMonthOfCell(row * 4 + colu)
+        }
+      });
+    }
+  };
+};
+export var handleMonthTableClick = function handleMonthTableClick(_ref5) {
+  var api = _ref5.api,
+    emit = _ref5.emit,
+    props = _ref5.props;
+  return function (event) {
+    var target = getTarget(event);
+    if (!target) {
+      return;
+    }
+    if (hasClass(target, 'disabled')) {
+      return;
+    }
+    var column = target.cellIndex;
+    var row = target.parentNode.rowIndex;
+    var month = row * 4 + column;
+    var newDate = api.getMonthOfCell(month);
+    if (props.selectionMode === DATEPICKER.Range) {
+      if (props.rangeState.selecting) {
+        if (newDate < props.minDate) {
+          emit('pick', {
+            minDate: newDate,
+            maxDate: props.minDate
+          });
+        } else {
+          emit('pick', {
+            minDate: props.minDate,
+            maxDate: newDate
+          });
+        }
+        props.rangeState.selecting = false;
+      } else {
+        emit('pick', {
+          minDate: newDate,
+          maxDate: null
+        });
+        props.rangeState.selecting = true;
+      }
+    } else {
+      emit('pick', month);
+    }
+  };
+};
+export var cellMatchesDate = function cellMatchesDate(props) {
+  return function (cell, date) {
+    var value = new Date(date);
+    return props.date.getFullYear() === value.getFullYear() && Number(cell.text) === value.getMonth();
+  };
+};
+export var getCellStyle = function getCellStyle(_ref6) {
+  var api = _ref6.api,
+    props = _ref6.props;
+  return function (cell) {
+    var style = {};
+    var year = props.date.getFullYear();
+    var today = new Date();
+    var month = cell.text;
+    var defaultValue = props.defaultValue ? Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue] : [];
+    style.disabled = typeof props.disabledDate === 'function' ? datesInMonth(year, month).every(props.disabledDate) : false;
+    var execDate = _typeof(props.value) === 'object' ? props.value : toDate(props.value);
+    style.current = arrayFindIndex(coerceTruthyValueToArray(execDate), function (date) {
+      return date.getFullYear() === year && date.getMonth() === month;
+    }) >= 0;
+    style.today = today.getFullYear() === year && today.getMonth() === month;
+    style["default"] = defaultValue.some(function (date) {
+      return api.cellMatchesDate(cell, date);
+    });
+    if (cell.inRange) {
+      style[DATEPICKER.InRange] = true;
+      if (cell.start) {
+        style[DATEPICKER.StartDate] = true;
+      }
+      if (cell.end) {
+        style[DATEPICKER.EndDate] = true;
+      }
+    }
+    return style;
+  };
+};
+export var getMonthOfCell = function getMonthOfCell(props) {
+  return function (month) {
+    return new Date(props.date.getFullYear(), month, 1);
+  };
+};

package/month-table/vue.js

@@ -0,0 +1,72 @@
+import { getRows, getMonthTimestamp, markRange, watchDate, handleMouseMove, handleMonthTableClick, cellMatchesDate, getCellStyle, getMonthOfCell } from './index';
+import { DATEPICKER } from '@opentiny/vue-renderless/common';
+export var api = ['state', 'handleMonthTableClick', 'handleMouseMove', 'getCellStyle'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive,
+    watch = _ref.watch;
+  var t = _ref2.t,
+    vm = _ref2.vm,
+    emit = _ref2.emit;
+  var api = {};
+  var MonhtList = DATEPICKER.MonhtList;
+  var state = reactive({
+    months: MonhtList,
+    tableRows: [[], [], []],
+    lastRow: null,
+    lastColumn: null,
+    rows: computed(function () {
+      return api.getRows();
+    })
+  });
+  Object.assign(api, {
+    t: t,
+    state: state,
+    getMonthOfCell: getMonthOfCell(props),
+    cellMatchesDate: cellMatchesDate(props),
+    markRange: markRange({
+      api: api,
+      props: props,
+      state: state
+    }),
+    watchDate: watchDate({
+      api: api,
+      props: props
+    }),
+    getMonthTimestamp: getMonthTimestamp(api),
+    handleMouseMove: handleMouseMove({
+      api: api,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    handleMonthTableClick: handleMonthTableClick({
+      api: api,
+      emit: emit,
+      props: props
+    }),
+    getCellStyle: getCellStyle({
+      api: api,
+      props: props
+    }),
+    getRows: getRows({
+      props: props,
+      state: state,
+      vm: vm
+    })
+  });
+  watch(function () {
+    return props.rangeState;
+  }, function (value) {
+    return api.markRange(props.minDate, value.endDate);
+  }, {
+    deep: true
+  });
+  watch(function () {
+    return props.minDate;
+  }, api.watchDate);
+  watch(function () {
+    return props.maxDate;
+  }, api.watchDate);
+  return api;
+};