@opentiny/vue-renderless 3.1.0-alpha.0

package/button/vue.js

@@ -0,0 +1,43 @@
+import { handleClick, clearTimer } from './index';
+export var api = ['state', 'handleClick'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    onBeforeUnmount = _ref.onBeforeUnmount,
+    reactive = _ref.reactive,
+    watch = _ref.watch,
+    inject = _ref.inject;
+  var emit = _ref2.emit,
+    parent = _ref2.parent;
+  parent.tinyForm = parent.tinyForm || inject('form', null);
+  var state = reactive({
+    timer: null,
+    disabled: props.disabled,
+    plain: computed(function () {
+      return props.plain || (parent.buttonGroup || {}).plain;
+    }),
+    formDisabled: computed(function () {
+      return (parent.tinyForm || {}).disabled;
+    }),
+    buttonDisabled: computed(function () {
+      return props.disabled || state.disabled || (parent.buttonGroup || {}).disabled || state.formDisabled;
+    })
+  });
+  watch(function () {
+    return props.disabled;
+  }, function (value) {
+    state.disabled = value;
+  }, {
+    immediate: true
+  });
+  var api = {
+    state: state,
+    clearTimer: clearTimer(state),
+    handleClick: handleClick({
+      emit: emit,
+      props: props,
+      state: state
+    })
+  };
+  onBeforeUnmount(api.clearTimer);
+  return api;
+};

package/button-group/index.js

@@ -0,0 +1,25 @@
+export var handleClick = function handleClick(_ref) {
+  var emit = _ref.emit,
+    props = _ref.props,
+    state = _ref.state;
+  return function (node) {
+    if (!state.disabled) {
+      state.value = node[props.valueField];
+      emit('update:modelValue', state.value);
+    }
+  };
+};
+export var moreNodeClick = function moreNodeClick(_ref2) {
+  var emit = _ref2.emit,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function (node) {
+    if (!state.disabled) {
+      var index = state.moreData.indexOf(node);
+      state.moreData.splice(index, 1, state.buttonData[state.buttonData.length - 1]);
+      state.buttonData.splice(state.buttonData.length - 1, 1, node);
+      state.value = node[props.valueField];
+      emit('update:modelValue', state.value);
+    }
+  };
+};

package/button-group/vue.js

@@ -0,0 +1,51 @@
+import { handleClick, moreNodeClick } from './index';
+export var api = ['state', 'handleClick', 'moreNodeClick'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var _props$data, _props$data2;
+  var computed = _ref.computed,
+    reactive = _ref.reactive,
+    watch = _ref.watch,
+    inject = _ref.inject;
+  var emit = _ref2.emit,
+    parent = _ref2.parent;
+  parent.tinyForm = parent.tinyForm || inject('form', null);
+  var state = reactive({
+    value: props.modelValue,
+    buttonData: ((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.slice(0, props.showMore)) || [],
+    moreData: ((_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.slice(props.showMore, props.data.length)) || [],
+    formDisabled: computed(function () {
+      return (parent.tinyForm || {}).disabled;
+    }),
+    disabled: computed(function () {
+      return props.disabled || state.formDisabled;
+    }),
+    attributeValue: computed(function () {
+      if (state.disabled) {
+        return {
+          disabled: state.disabled
+        };
+      }
+      return props.plain ? {
+        plain: props.plain
+      } : '';
+    })
+  });
+  watch(function () {
+    return props.modelValue;
+  }, function (value) {
+    if (!state.disabled && state.value !== value) {
+      state.value = value;
+    }
+  }, {
+    immediate: true
+  });
+  var api = {
+    state: state,
+    handleClick: handleClick({
+      emit: emit,
+      props: props,
+      state: state
+    })
+  };
+  return api;
+};

package/calendar/index.js

@@ -0,0 +1,279 @@
+import { isLeapYear } from '@opentiny/vue-renderless/common/date';
+import { copyArray } from '@opentiny/vue-renderless/common/object';
+export var getDays = function getDays(year, month) {
+  return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month - 1];
+};
+export var getWeek = function getWeek(year, month, day) {
+  return new Date("".concat(year, "/").concat(month, "/").concat(day)).getDay();
+};
+export var lastMonth = function lastMonth(year, month) {
+  year = +year;
+  month = +month;
+  if (month === 1) {
+    year--;
+    month = 12;
+  } else {
+    month--;
+  }
+  return {
+    year: year,
+    month: month
+  };
+};
+export var nextMonth = function nextMonth(year, month) {
+  year = +year;
+  month = +month;
+  if (month === 12) {
+    year++;
+    month = 1;
+  } else {
+    month++;
+  }
+  return {
+    year: year,
+    month: month
+  };
+};
+export var getCalendar = function getCalendar(year, month) {
+  if (year && month && month <= 12) {
+    var days = getDays(year, month);
+    var firstWeek = getWeek(year, month, 1);
+    var lastWeek = getWeek(year, month, days);
+    var last = lastMonth(year, month);
+    var lastDays = getDays(last.year, last.month);
+    var remainDays = 0;
+    var totalDays = days + firstWeek + 7 - lastWeek - 1;
+    if (totalDays / 7 < 6 && totalDays / 7 >= 5) {
+      remainDays = 6 * 7 - totalDays;
+    }
+    return {
+      last: {
+        start: lastDays - (firstWeek - 1),
+        end: lastDays
+      },
+      current: {
+        start: 1,
+        end: days
+      },
+      next: {
+        start: 1,
+        end: 7 - lastWeek - 1 + remainDays
+      }
+    };
+  }
+};
+export var transformArray = function transformArray(array) {
+  var result = [];
+  var index = 0;
+  if (array && array.length) {
+    var length = array.length / 7;
+    for (var i = 0; i < length; i++) {
+      result[i] = [];
+      for (var j = 0; j < 7; j++) {
+        result[i][j] = array[index++];
+      }
+    }
+  }
+  return result;
+};
+export var parseDate = function parseDate(time) {
+  var date = new Date(time && typeof time === 'number' ? time : 0);
+  return {
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    day: date.getDate(),
+    hours: date.getHours(),
+    minutes: date.getMinutes(),
+    seconds: date.getSeconds()
+  };
+};
+export var computedCalendar = function computedCalendar(_ref) {
+  var state = _ref.state;
+  return function () {
+    var calendar = getCalendar(state.activeYear, state.activeMonth);
+    var result = [];
+    if (calendar) {
+      var last = calendar.last,
+        current = calendar.current,
+        next = calendar.next;
+      if (last && calendar.last.end >= calendar.last.start) {
+        for (var i = last.start; i <= last.end; i++) {
+          result.push({
+            value: i,
+            isLast: true
+          });
+        }
+      }
+      if (current) {
+        for (var _i = current.start; _i <= current.end; _i++) {
+          result.push({
+            value: _i
+          });
+        }
+      }
+      if (next.end >= next.start) {
+        for (var _i2 = next.start; _i2 <= next.end; _i2++) {
+          result.push({
+            value: _i2,
+            isNext: true
+          });
+        }
+      }
+    }
+    return transformArray(result);
+  };
+};
+export var computedEventList = function computedEventList(_ref2) {
+  var props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    var result = [];
+    if (props.events && props.events.length) {
+      result = props.events.filter(function (item) {
+        var _parseDate = parseDate(item.time),
+          year = _parseDate.year,
+          month = _parseDate.month;
+        return +state.activeYear === year && +state.activeMonth === month;
+      });
+    }
+    return result;
+  };
+};
+export var toggeModel = function toggeModel(state) {
+  return function (mode) {
+    var isYearOrMonth = /^(year|month)$/.test(mode);
+    state.displayMode = isYearOrMonth ? mode : state.displayMode === 'year' ? 'month' : 'year';
+  };
+};
+export var selectMonth = function selectMonth(state) {
+  return function (month) {
+    if (month && typeof month === 'number' && month <= 12) {
+      state.activeMonth = month;
+    }
+  };
+};
+export var selectDay = function selectDay(state) {
+  return function (day) {
+    if (day && day.value) {
+      if (day.isLast) {
+        var _lastMonth = lastMonth(state.activeYear, state.activeMonth),
+          year = _lastMonth.year,
+          month = _lastMonth.month;
+        state.activeMonth = month;
+        state.activeYear = year;
+      }
+      if (day.isNext) {
+        var _nextMonth = nextMonth(state.activeYear, state.activeMonth),
+          _year = _nextMonth.year,
+          _month = _nextMonth.month;
+        state.activeMonth = _month;
+        state.activeYear = _year;
+      }
+      state.selectedTip = "You selected date: ".concat(state.activeYear, "-").concat(state.activeMonth, "-").concat(day.value);
+      state.selectedDate = +new Date("".concat(state.activeYear, "/").concat(state.activeMonth, "/").concat(day.value));
+    }
+  };
+};
+export var getEventByDay = function getEventByDay(state) {
+  return function (day) {
+    var events = [];
+    if (state.eventList && state.eventList.length) {
+      events = copyArray(state.eventList).filter(function (_ref3) {
+        var time = _ref3.time;
+        var date = new Date(time);
+        return date.getDate() === day && date.getFullYear() === +state.activeYear && date.getMonth() + 1 === +state.activeMonth;
+      }).map(function (event) {
+        event.parseTime = parseDate(event.time);
+        return event;
+      });
+    }
+    return events;
+  };
+};
+export var getEventByMonth = function getEventByMonth(_ref4) {
+  var props = _ref4.props,
+    state = _ref4.state;
+  return function (month) {
+    var events = [];
+    if (props.events) {
+      events = copyArray(props.events).filter(function (_ref5) {
+        var time = _ref5.time;
+        var date = new Date(time);
+        return date.getFullYear() === +state.activeYear && date.getMonth() + 1 === month;
+      }).map(function (event) {
+        event.parseTime = parseDate(event.time);
+        return event;
+      });
+    }
+    return events;
+  };
+};
+export var getTime = function getTime(state) {
+  return function (day) {
+    return +new Date("".concat(state.activeYear, "/").concat(state.activeMonth, "/").concat(day));
+  };
+};
+export var getYearList = function getYearList() {
+  return function () {
+    var date = new Date();
+    var year = date.getFullYear();
+    var yesrs = [];
+    for (var i = year - 10; i < year + 10; i++) {
+      yesrs.push(i);
+    }
+    return yesrs;
+  };
+};
+export var isToday = function isToday(state) {
+  return function (day) {
+    var date = new Date();
+    var year = +state.activeYear;
+    var month = +state.activeMonth;
+    if (day.isLast) {
+      var lastDate = lastMonth(state.activeYear, state.activeMonth);
+      year = lastDate.year;
+      month = lastDate.month;
+    }
+    if (day.isNext) {
+      var nextDate = nextMonth(state.activeYear, state.activeMonth);
+      year = nextDate.year;
+      month = nextDate.month;
+    }
+    return date.getDate() === day.value && date.getFullYear() === year && date.getMonth() + 1 === month;
+  };
+};
+export var isThisMonth = function isThisMonth(state) {
+  return function (month) {
+    var date = new Date();
+    var year = +state.activeYear;
+    return date.getMonth() + 1 === month && date.getFullYear() === year;
+  };
+};
+export var genMonths = function genMonths() {
+  var result = [];
+  var index = 1;
+  for (var i = 0; i < 3; i++) {
+    result[i] = [];
+    for (var j = 0; j < 4; j++) {
+      result[i][j] = index++;
+    }
+  }
+  return result;
+};
+export var toToday = function toToday(state) {
+  return function () {
+    var year = new Date().getFullYear();
+    var month = new Date().getMonth() + 1;
+    var day = new Date().getDate();
+    state.activeMonth = month;
+    state.activeYear = year;
+    state.selectedTip = "You selected date: ".concat(year, "-").concat(month, "-").concat(day);
+    state.selectedDate = +new Date("".concat(year, "/").concat(month, "/").concat(day));
+  };
+};
+export var getCurrentDate = function getCurrentDate() {
+  var day = new Date().getDate();
+  var month = new Date().getMonth() + 1;
+  var year = new Date().getFullYear();
+  return +new Date("".concat(year, "/").concat(month, "/").concat(day));
+};

package/calendar/vue.js

@@ -0,0 +1,124 @@
+import { computedCalendar, computedEventList, toggeModel, selectMonth, selectDay, getEventByDay, getEventByMonth, getTime, getYearList, isToday, isThisMonth, genMonths, toToday, getCurrentDate } from './index';
+export var api = ['state', 'renderProxy', 'isToday', 'isThisMonth', 'getEventByMonth', 'getEventByDay', 'selectDay', 'selectMonth', 'toggeModel', 'getTime', 'genMonths', 'toToday'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    props = _ref.props,
+    computed = _ref.computed,
+    api = _ref.api;
+  var state = reactive({
+    index: 0,
+    selectedTip: '',
+    selectedDate: getCurrentDate(),
+    showYear: false,
+    showMonth: false,
+    activeYear: props.year,
+    displayMode: props.mode,
+    activeMonth: props.month,
+    dropdownYear: computed(function () {
+      return api.getYearList();
+    }),
+    calendar: computed(function () {
+      return api.computedCalendar();
+    }),
+    eventList: computed(function () {
+      return api.computedEventList();
+    })
+  });
+  return state;
+};
+var initWatch = function initWatch(_ref2) {
+  var watch = _ref2.watch,
+    props = _ref2.props,
+    state = _ref2.state,
+    emit = _ref2.emit;
+  watch(function () {
+    return props.year;
+  }, function (value, oldValue) {
+    if (value !== oldValue) {
+      state.activeYear = value;
+    }
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return props.month;
+  }, function (value, oldValue) {
+    if (value !== oldValue) {
+      state.activeMonth = value;
+    }
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return state.activeYear;
+  }, function (value, oldValue) {
+    if (value !== oldValue) {
+      emit('year-change', value, oldValue);
+      emit('update:modelValue', value, oldValue);
+    }
+  });
+  watch(function () {
+    return state.activeMonth;
+  }, function (value, oldValue) {
+    if (value !== oldValue) {
+      emit('month-change', value, oldValue);
+    }
+  });
+};
+var initApi = function initApi(_ref3) {
+  var api = _ref3.api,
+    state = _ref3.state,
+    t = _ref3.t,
+    props = _ref3.props;
+  Object.assign(api, {
+    state: state,
+    genMonths: genMonths,
+    computedCalendar: computedCalendar({
+      state: state
+    }),
+    computedEventList: computedEventList({
+      props: props,
+      state: state
+    }),
+    getTime: getTime(state),
+    isToday: isToday(state),
+    selectDay: selectDay(state),
+    getYearList: getYearList(t),
+    toggeModel: toggeModel(state),
+    selectMonth: selectMonth(state),
+    isThisMonth: isThisMonth(state),
+    getEventByDay: getEventByDay(state),
+    getEventByMonth: getEventByMonth({
+      props: props,
+      state: state
+    }),
+    toToday: toToday(state)
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch;
+  var t = _ref5.t,
+    emit = _ref5.emit;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    props: props,
+    computed: computed,
+    api: api
+  });
+  initWatch({
+    watch: watch,
+    props: props,
+    state: state,
+    emit: emit
+  });
+  initApi({
+    api: api,
+    state: state,
+    t: t,
+    props: props
+  });
+  return api;
+};

package/card-template/index.js

@@ -0,0 +1,39 @@
+import PopupManager from '@opentiny/vue-renderless/common/deps/popup-manager';
+export var toolClick = function toolClick(showMoreTools) {
+  return function (cb) {
+    typeof cb === 'function' && cb();
+    showMoreTools.value = false;
+  };
+};
+export var computedMoreTools = function computedMoreTools(_ref) {
+  var props = _ref.props;
+  return function () {
+    return Array.isArray(props.tools) && props.tools.length > 3 ? props.tools.slice(2) : [];
+  };
+};
+export var computedTools = function computedTools(_ref2) {
+  var props = _ref2.props,
+    state = _ref2.state,
+    constants = _ref2.constants,
+    refs = _ref2.refs,
+    t = _ref2.t;
+  return function () {
+    var result = [];
+    var tools = props.tools;
+    if (Array.isArray(tools) && tools.length) {
+      if (tools.length <= 3) {
+        result = tools;
+      } else {
+        result = [].concat(tools[0], tools[1], {
+          icon: constants.MOREICON,
+          title: t('ui.base.more'),
+          click: function click() {
+            state.showMoreTools = !state.showMoreTools;
+            refs['selector'].style.zIndex = PopupManager.nextZIndex();
+          }
+        });
+      }
+    }
+    return result;
+  };
+};

package/card-template/vue.js

@@ -0,0 +1,34 @@
+import { toolClick, computedTools, computedMoreTools } from './index';
+export var api = ['state', 'toolClick'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var t = _ref2.t,
+    refs = _ref2.refs,
+    constants = _ref2.constants;
+  var api = {
+    computedMoreTools: computedMoreTools({
+      props: props
+    })
+  };
+  var state = reactive({
+    isEnter: false,
+    showMoreTools: false,
+    moreTools: computed(function () {
+      return api.computedMoreTools(props);
+    }),
+    currentTools: computed(function () {
+      return api.computedTools();
+    })
+  });
+  api.state = state;
+  api.computedTools = computedTools({
+    constants: constants,
+    props: props,
+    refs: refs,
+    state: state,
+    t: t
+  });
+  api.toolClick = toolClick(state);
+  return api;
+};