@opentiny/vue-renderless 3.1.0-alpha.0

package/date-picker/vue.js

@@ -0,0 +1,169 @@
+import { getBoundary, clearDisplayValue, showPickerAndlockSrcoll, hookMounted, getMonthEndDay, getDisplayValue, getRanges, onConfirm, onCancel, getOrigiCol, getColumns, updateInnerValue, formatValue, onChange, updateColumnValue } from './index';
+import { DATE } from '../common';
+export var api = ['state', 'clearDisplayValue', 'showPickerAndlockSrcoll', 'hookMounted', 'onConfirm', 'onCancel', 'onChange'];
+var setWatchFn = function setWatchFn(_ref) {
+  var api = _ref.api,
+    watch = _ref.watch,
+    props = _ref.props,
+    state = _ref.state,
+    emit = _ref.emit;
+  watch(function () {
+    return props.minDate;
+  }, function () {
+    return api.updateInnerValue();
+  }, {
+    lazy: true
+  });
+  watch(function () {
+    return props.visible;
+  }, function (value) {
+    return state.visible = value;
+  }, {
+    lazy: true
+  });
+  watch(function () {
+    return props.maxDate;
+  }, function () {
+    return api.updateInnerValue();
+  }, {
+    lazy: true
+  });
+  watch(function () {
+    return props.modelValue;
+  }, function (value) {
+    if (value) {
+      var val = api.formatValue(new Date(value));
+      if (val.valueOf() !== state.innerValue.valueOf()) {
+        state.innerValue = val;
+      }
+      state.displayValue = api.getDisplayValue();
+    }
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return state.columns;
+  }, function () {
+    return api.updateColumnValue();
+  }, {
+    lazy: true
+  });
+  watch(function () {
+    return state.innerValue;
+  }, function (value) {
+    return emit('input', value);
+  }, {
+    lazy: true
+  });
+};
+export var renderless = function renderless(props, context, _ref2, _ref3) {
+  var computed = _ref2.computed,
+    onMounted = _ref2.onMounted,
+    reactive = _ref2.reactive,
+    watch = _ref2.watch;
+  var constants = _ref3.constants,
+    emit = _ref3.emit,
+    nextTick = _ref3.nextTick,
+    refs = _ref3.refs,
+    parent = _ref3.parent;
+  var api = {
+    formatValue: formatValue(props),
+    getMonthEndDay: getMonthEndDay(constants),
+    hookMounted: hookMounted({
+      constants: constants,
+      parent: parent,
+      refs: refs,
+      nextTick: nextTick
+    })
+  };
+  var state = reactive({
+    visible: false,
+    innerValue: formatValue(props)(props.modelValue),
+    ranges: computed(function () {
+      return api.getRanges();
+    }),
+    originColumns: computed(function () {
+      return api.getOrigiCol();
+    }),
+    columns: computed(function () {
+      return api.getColumns();
+    }),
+    displayValue: '',
+    isReadonly: false,
+    clearable: props.clearable
+  });
+  Object.assign(api, {
+    state: state,
+    getOrigiCol: getOrigiCol(state),
+    onCancel: onCancel({
+      emit: emit,
+      state: state
+    }),
+    getColumns: getColumns({
+      props: props,
+      state: state
+    }),
+    clearDisplayValue: clearDisplayValue(state),
+    getDisplayValue: getDisplayValue({
+      constants: constants,
+      DATE: DATE,
+      props: props,
+      state: state
+    }),
+    showPickerAndlockSrcoll: showPickerAndlockSrcoll({
+      constants: constants,
+      state: state
+    }),
+    updateColumnValue: updateColumnValue({
+      constants: constants,
+      nextTick: nextTick,
+      props: props,
+      refs: refs,
+      state: state
+    })
+  });
+  api.getBoundary = getBoundary({
+    api: api,
+    constants: constants,
+    props: props
+  });
+  api.updateInnerValue = updateInnerValue({
+    api: api,
+    constants: constants,
+    props: props,
+    refs: refs,
+    state: state
+  });
+  api.getRanges = getRanges({
+    api: api,
+    constants: constants,
+    props: props,
+    state: state
+  });
+  setWatchFn({
+    api: api,
+    watch: watch,
+    props: props,
+    state: state,
+    emit: emit
+  });
+  onMounted(function () {
+    api.updateColumnValue();
+    nextTick(function () {
+      api.updateInnerValue();
+    });
+  });
+  return Object.assign(api, {
+    onConfirm: onConfirm({
+      api: api,
+      emit: emit,
+      state: state
+    }),
+    onChange: onChange({
+      api: api,
+      emit: emit,
+      refs: refs,
+      nextTick: nextTick
+    })
+  });
+};

package/date-range/index.js

@@ -0,0 +1,463 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { isDate, nextDate, parseDate, formatDate, modifyDate, modifyTime, nextYear, prevYear, nextMonth, prevMonth, modifyWithTimeString } 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), nextDate(new Date(defaultValue), 1)];
+  }
+  return [new Date(), nextDate(new Date(), 1)];
+};
+export var getMinVisibleDate = function getMinVisibleDate(_ref) {
+  var state = _ref.state,
+    t = _ref.t;
+  return function () {
+    if (state.dateUserInput.min !== null) return state.dateUserInput.min;
+    if (state.minDate) return formatDate(state.minDate, state.dateFormat, t);
+    return '';
+  };
+};
+export var getMaxVisibleDate = function getMaxVisibleDate(_ref2) {
+  var state = _ref2.state,
+    t = _ref2.t;
+  return function () {
+    if (state.dateUserInput.max !== null) return state.dateUserInput.max;
+    if (state.maxDate || state.minDate) {
+      return formatDate(state.maxDate || state.minDate, state.dateFormat, t);
+    }
+    return '';
+  };
+};
+export var getMinVisibleTime = function getMinVisibleTime(_ref3) {
+  var state = _ref3.state,
+    t = _ref3.t;
+  return function () {
+    if (state.timeUserInput.min !== null) return state.timeUserInput.min;
+    if (state.minDate) return formatDate(state.minDate, state.timeFormat, t);
+    return '';
+  };
+};
+export var getMaxVisibleTime = function getMaxVisibleTime(_ref4) {
+  var state = _ref4.state,
+    t = _ref4.t;
+  return function () {
+    if (state.timeUserInput.max !== null) return state.timeUserInput.max;
+    if (state.maxDate || state.minDate) {
+      return formatDate(state.maxDate || state.minDate, state.timeFormat, t);
+    }
+    return '';
+  };
+};
+export var getEnableMonthArrow = function getEnableMonthArrow(state) {
+  return function () {
+    var nextMonth = (state.leftMonth + 1) % 12;
+    var yearOffset = state.leftMonth + 1 >= 12 ? 1 : 0;
+    return state.unlinkPanels && new Date(state.leftYear + yearOffset, nextMonth) < new Date(state.rightYear, state.rightMonth);
+  };
+};
+export var watchMinDate = function watchMinDate(_ref5) {
+  var state = _ref5.state,
+    t = _ref5.t,
+    vm = _ref5.vm;
+  return function (value) {
+    state.dateUserInput.min = null;
+    state.timeUserInput.min = null;
+    var minTimePicker = vm.$refs.minTimePicker;
+    if (!minTimePicker) return;
+    if (state.maxDate && state.maxDate < state.minDate) {
+      var format = 'HH:mm:ss';
+      minTimePicker.state.selectableRange = [[parseDate(formatDate(state.minDate, format, t), format, t), parseDate('23:59:59', format, t)]];
+    }
+    if (value) {
+      minTimePicker.state.value = value;
+    }
+  };
+};
+export var watchMaxDate = function watchMaxDate(_ref6) {
+  var state = _ref6.state,
+    vm = _ref6.vm;
+  return function (value) {
+    state.dateUserInput.max = null;
+    state.timeUserInput.max = null;
+    var maxTimePicker = vm.$refs.maxTimePicker;
+    if (value && maxTimePicker) {
+      maxTimePicker.state.value = value;
+    }
+  };
+};
+export var watchMinTimePickerVisible = function watchMinTimePickerVisible(_ref7) {
+  var nextTick = _ref7.nextTick,
+    state = _ref7.state,
+    vm = _ref7.vm;
+  return function (value) {
+    if (value) {
+      nextTick(function () {
+        vm.$refs.minTimePicker.state.value = state.minDate;
+      });
+    }
+  };
+};
+export var watchMaxTimePickerVisible = function watchMaxTimePickerVisible(_ref8) {
+  var nextTick = _ref8.nextTick,
+    state = _ref8.state,
+    vm = _ref8.vm;
+  return function (value) {
+    if (value) {
+      nextTick(function () {
+        vm.$refs.maxTimePicker.state.value = state.maxDate;
+      });
+    }
+  };
+};
+export var watchValue = function watchValue(_ref9) {
+  var state = _ref9.state;
+  return function (value) {
+    if (!value) {
+      state.minDate = null;
+      state.maxDate = null;
+    } else if (Array.isArray(value)) {
+      state.minDate = isDate(value[0]) ? new Date(value[0]) : null;
+      state.maxDate = isDate(value[1]) ? new Date(value[1]) : null;
+      if (state.minDate) {
+        state.leftDate = state.minDate;
+        if (state.unlinkPanels && state.maxDate) {
+          var minDateYear = state.minDate.getFullYear();
+          var minDateMonth = state.minDate.getMonth();
+          var maxDateYear = state.maxDate.getFullYear();
+          var maxDateMonth = state.maxDate.getMonth();
+          state.rightDate = minDateYear === maxDateYear && minDateMonth === maxDateMonth ? nextMonth(state.maxDate) : state.maxDate;
+        } else {
+          state.rightDate = nextMonth(state.leftDate);
+        }
+      } else {
+        state.leftDate = calcDefaultValue(state.defaultValue)[0];
+        state.rightDate = nextMonth(state.leftDate);
+      }
+    }
+  };
+};
+export var watchDefault = function watchDefault(_ref10) {
+  var state = _ref10.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] && state.unlinkPanels ? right : nextMonth(state.leftDate);
+    }
+  };
+};
+export var handleClear = function handleClear(_ref11) {
+  var emit = _ref11.emit,
+    state = _ref11.state;
+  return function () {
+    state.minDate = null;
+    state.maxDate = null;
+    state.leftDate = calcDefaultValue(state.defaultValue)[0];
+    state.rightDate = nextMonth(state.leftDate);
+    state.rangeState.selecting = false;
+    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 handleDateInput = function handleDateInput(_ref12) {
+  var state = _ref12.state,
+    t = _ref12.t;
+  return function (value, type) {
+    state.dateUserInput[type] = value;
+    if (value.length !== state.dateFormat.length) return;
+    var parsedValue = parseDate(value, state.dateFormat, t);
+    if (parsedValue) {
+      if (typeof state.disabledDate === 'function' && state.disabledDate(new Date(parsedValue))) {
+        return;
+      }
+      if (type === 'min') {
+        state.minDate = modifyDate(state.minDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+        state.leftDate = new Date(parsedValue);
+        if (!state.unlinkPanels) {
+          state.rightDate = nextMonth(state.leftDate);
+        }
+      } else {
+        state.maxDate = modifyDate(state.maxDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+        state.rightDate = new Date(parsedValue);
+        if (!state.unlinkPanels) {
+          state.leftDate = prevMonth(parsedValue);
+        }
+      }
+    }
+  };
+};
+export var handleDateChange = function handleDateChange(_ref13) {
+  var state = _ref13.state,
+    t = _ref13.t;
+  return function (value, type) {
+    var parsedValue = parseDate(value, state.dateFormat, t);
+    if (parsedValue) {
+      if (type === 'min') {
+        state.minDate = modifyDate(state.minDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+        if (state.minDate > state.maxDate) {
+          state.maxDate = state.minDate;
+        }
+      } else {
+        state.maxDate = modifyDate(state.maxDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+        if (state.maxDate < state.minDate) {
+          state.minDate = state.maxDate;
+        }
+      }
+    }
+  };
+};
+export var handleTimeInput = function handleTimeInput(_ref14) {
+  var state = _ref14.state,
+    t = _ref14.t;
+  return function (value, type) {
+    state.timeUserInput[type] = value;
+    if (value.length !== state.timeFormat.length) return;
+    var parsedValue = parseDate(value, state.timeFormat, t);
+    if (parsedValue) {
+      if (type === 'min') {
+        state.minDate = modifyTime(state.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+      } else {
+        state.maxDate = modifyTime(state.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+      }
+    }
+  };
+};
+export var handleTimeChange = function handleTimeChange(_ref15) {
+  var state = _ref15.state,
+    t = _ref15.t,
+    vm = _ref15.vm;
+  return function (value, type) {
+    var parsedValue = parseDate(value, state.timeFormat, t);
+    if (parsedValue) {
+      if (type === 'min') {
+        state.minDate = modifyTime(state.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+        if (state.minDate > state.maxDate) {
+          state.maxDate = state.minDate;
+        }
+        vm.$refs.minTimePicker.state.value = state.minDate;
+        state.minTimePickerVisible = false;
+      } else {
+        state.maxDate = modifyTime(state.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+        if (state.maxDate < state.minDate) {
+          state.minDate = state.maxDate;
+        }
+        vm.$refs.maxTimePicker.state.value = state.minDate;
+        state.maxTimePickerVisible = false;
+      }
+    }
+  };
+};
+export var handleRangePick = function handleRangePick(_ref16) {
+  var api = _ref16.api,
+    state = _ref16.state,
+    t = _ref16.t;
+  return function (val) {
+    var close = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var defaultTime = state.defaultTime || [];
+    var minDate = modifyWithTimeString(val.minDate, defaultTime[0], t);
+    var maxDate = modifyWithTimeString(val.maxDate, defaultTime[1], t);
+    if (state.maxDate === maxDate && state.minDate === minDate) {
+      return;
+    }
+    state.onPick && state.onPick(val);
+    state.maxDate = maxDate;
+    state.minDate = minDate;
+    setTimeout(function () {
+      state.maxDate = maxDate;
+      state.minDate = minDate;
+    }, 10);
+    if (!close || state.showTime) {
+      return;
+    }
+    api.handleConfirm();
+  };
+};
+export var handleShortcutClick = function handleShortcutClick(api) {
+  return function (shortcut) {
+    if (shortcut.onClick) {
+      var picker = {
+        $emit: function $emit(type, _ref17) {
+          var _ref18 = _slicedToArray(_ref17, 2),
+            start = _ref18[0],
+            end = _ref18[1];
+          api.doPick(start, end);
+        }
+      };
+      shortcut.onClick(picker);
+    }
+  };
+};
+export var doPick = function doPick(emit) {
+  return function (start, end) {
+    emit('pick', [start, end], false);
+  };
+};
+export var handleMinTimePick = function handleMinTimePick(_ref19) {
+  var state = _ref19.state;
+  return function (value, visible, first) {
+    state.minDate = state.minDate || new Date();
+    if (value) {
+      state.minDate = modifyTime(state.minDate, value.getHours(), value.getMinutes(), value.getSeconds());
+    }
+    if (!first) {
+      state.minTimePickerVisible = visible;
+    }
+    if (!state.maxDate || state.maxDate && state.maxDate.getTime() < state.minDate.getTime()) {
+      state.maxDate = new Date(state.minDate);
+    }
+  };
+};
+export var handleMinTimeClose = function handleMinTimeClose(state) {
+  return function () {
+    return state.minTimePickerVisible = false;
+  };
+};
+export var handleMaxTimePick = function handleMaxTimePick(_ref20) {
+  var state = _ref20.state;
+  return function (value, visible, first) {
+    if (state.maxDate && value) {
+      state.maxDate = modifyTime(state.maxDate, value.getHours(), value.getMinutes(), value.getSeconds());
+    }
+    if (!first) {
+      state.maxTimePickerVisible = visible;
+    }
+    if (state.maxDate && state.minDate && state.minDate.getTime() > state.maxDate.getTime()) {
+      state.minDate = new Date(state.maxDate);
+    }
+  };
+};
+export var handleMaxTimeClose = function handleMaxTimeClose(state) {
+  return function () {
+    return state.maxTimePickerVisible = false;
+  };
+};
+export var leftPrevYear = function leftPrevYear(_ref21) {
+  var state = _ref21.state;
+  return function () {
+    state.leftDate = prevYear(state.leftDate);
+    if (!state.unlinkPanels) {
+      state.rightDate = nextMonth(state.leftDate);
+    }
+  };
+};
+export var leftPrevMonth = function leftPrevMonth(_ref22) {
+  var state = _ref22.state;
+  return function () {
+    state.leftDate = prevMonth(state.leftDate);
+    if (!state.unlinkPanels) {
+      state.rightDate = nextMonth(state.leftDate);
+    }
+  };
+};
+export var rightNextYear = function rightNextYear(_ref23) {
+  var state = _ref23.state;
+  return function () {
+    var leftDate = state.leftDate,
+      rightDate = state.rightDate,
+      unlinkPanels = state.unlinkPanels;
+    if (!unlinkPanels) {
+      state.leftDate = nextYear(leftDate);
+      state.rightDate = nextMonth(state.leftDate);
+    } else {
+      state.rightDate = nextYear(rightDate);
+    }
+  };
+};
+export var rightNextMonth = function rightNextMonth(_ref24) {
+  var state = _ref24.state;
+  return function () {
+    if (!state.unlinkPanels) {
+      state.leftDate = nextMonth(state.leftDate);
+      state.rightDate = nextMonth(state.leftDate);
+    } else {
+      state.rightDate = nextMonth(state.rightDate);
+    }
+  };
+};
+export var leftNextYear = function leftNextYear(_ref25) {
+  var state = _ref25.state;
+  return function () {
+    return state.leftDate = nextYear(state.leftDate);
+  };
+};
+export var leftNextMonth = function leftNextMonth(_ref26) {
+  var state = _ref26.state;
+  return function () {
+    return state.leftDate = nextMonth(state.leftDate);
+  };
+};
+export var rightPrevYear = function rightPrevYear(_ref27) {
+  var state = _ref27.state;
+  return function () {
+    return state.rightDate = prevYear(state.rightDate);
+  };
+};
+export var rightPrevMonth = function rightPrevMonth(_ref28) {
+  var state = _ref28.state;
+  return function () {
+    return state.rightDate = prevMonth(state.rightDate);
+  };
+};
+export var handleConfirm = function handleConfirm(_ref29) {
+  var api = _ref29.api,
+    emit = _ref29.emit,
+    state = _ref29.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(_ref30) {
+  var state = _ref30.state;
+  return function (value) {
+    return Array.isArray(value) && value && value[0] && value[1] && isDate(value[0]) && isDate(value[1]) && value[0].getTime() <= value[1].getTime() && (typeof state.disabledDate === 'function' ? !state.disabledDate(value[0]) && !state.disabledDate(value[1]) : true);
+  };
+};
+export var resetView = function resetView(_ref31) {
+  var state = _ref31.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;
+  };
+};
+export var setTimeFormat = function setTimeFormat(_ref32) {
+  var nextTick = _ref32.nextTick,
+    vm = _ref32.vm,
+    state = _ref32.state;
+  return function () {
+    nextTick(function () {
+      vm.$refs.maxTimePicker.state.format = state.timeFormat;
+      vm.$refs.minTimePicker.state.format = state.timeFormat;
+    });
+  };
+};
+export var computerBtnDisabled = function computerBtnDisabled(_ref33) {
+  var state = _ref33.state,
+    api = _ref33.api;
+  return function () {
+    return !(state.minDate && state.maxDate && !state.selecting && api.isValidValue([state.minDate, state.maxDate]));
+  };
+};
+export var computerLabel = function computerLabel(_ref34) {
+  var state = _ref34.state,
+    t = _ref34.t;
+  return function (type) {
+    return "".concat(state[type].getFullYear(), " ").concat(t('ui.datepicker.year'), " ").concat(t("ui.datepicker.month".concat(state[type].getMonth() + 1)));
+  };
+};
+export var computerEnableYearArrow = function computerEnableYearArrow(state) {
+  return function () {
+    return state.unlinkPanels && state.rightYear * 12 + state.rightMonth - (state.leftYear * 12 + state.leftMonth + 1) >= 12;
+  };
+};