@opentiny/vue-renderless 3.5.0 → 3.6.0

package/multi-select/index.js

@@ -0,0 +1,283 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { cloneDeep } from '@opentiny/vue-renderless/chart-core/deps/utils';
+export var created = function created(_ref) {
+  var props = _ref.props,
+    state = _ref.state,
+    refs = _ref.refs,
+    nextTick = _ref.nextTick;
+  return function () {
+    nextTick(function () {
+      state.dataSource = cloneDeep(props.dataSource);
+      state.defaultSelectedArray = cloneDeep(props.defaultSelectedArray);
+      state.labelLevelsInfo = getLabelLevelsInfo(refs);
+      state.labelsStyle = getLabelsStyle(state);
+      state.headerInfo = state.dataSource.map(function (item) {
+        return {
+          isSelected: false,
+          title: item.title,
+          isUP: false
+        };
+      });
+    });
+  };
+};
+export var handleClick = function handleClick(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function (value) {
+    var _props$dataSource$val;
+    state.wheelData = (_props$dataSource$val = props.dataSource[value]) === null || _props$dataSource$val === void 0 ? void 0 : _props$dataSource$val.children;
+    if (state.headerIndex === -1) {
+      var _state$defaultSelecte;
+      state.showWheel = true;
+      state.headerIndex = value;
+      state.headerInfo[value] = getNewHeaderInfo(state.headerInfo, value, true);
+      state.defaultSelectedIndexs = (_state$defaultSelecte = state.defaultSelectedArray[value]) !== null && _state$defaultSelecte !== void 0 ? _state$defaultSelecte : api.loadDefault(value);
+    } else if (state.headerIndex !== value) {
+      var _state$defaultSelecte2;
+      state.showWheel = true;
+      state.headerInfo[state.headerIndex] = getNewHeaderInfo(state.headerInfo, state.headerIndex, false);
+      state.headerIndex = value;
+      state.headerInfo[value] = getNewHeaderInfo(state.headerInfo, value, true);
+      state.defaultSelectedIndexs = (_state$defaultSelecte2 = state.defaultSelectedArray[value]) !== null && _state$defaultSelecte2 !== void 0 ? _state$defaultSelecte2 : api.loadDefault(value);
+    } else {
+      state.showWheel = !state.showWheel;
+      var isUP = state.headerInfo[value].isUP;
+      state.headerInfo[value] = getNewHeaderInfo(state.headerInfo, value, !isUP);
+    }
+  };
+};
+export var confirm = function confirm(_ref3) {
+  var state = _ref3.state,
+    emit = _ref3.emit;
+  return function () {
+    var wheelLevelItems = getWheelLevelItems(state.wheelData, state.defaultSelectedIndexs);
+    var _getSelected = getSelected(wheelLevelItems, state.defaultSelectedIndexs),
+      selectedLabels = _getSelected.selectedLabels,
+      selectedItems = _getSelected.selectedItems;
+    state.headerInfo[state.headerIndex] = {
+      isSelected: true,
+      title: selectedLabels,
+      isUP: false
+    };
+    state.defaultSelectedArray[state.headerIndex] = state.defaultSelectedIndexs;
+    emit('confirm', selectedItems, state.headerIndex, state.defaultSelectedIndexs);
+    state.showWheel = false;
+  };
+};
+export var reset = function reset(_ref4) {
+  var api = _ref4.api,
+    props = _ref4.props,
+    state = _ref4.state,
+    emit = _ref4.emit;
+  return function () {
+    var _props$defaultSelecte;
+    state.headerInfo[state.headerIndex] = {
+      isSelected: false,
+      title: '',
+      isUP: false
+    };
+    state.defaultSelectedIndexs = (_props$defaultSelecte = props.defaultSelectedArray[state.headerIndex]) !== null && _props$defaultSelecte !== void 0 ? _props$defaultSelecte : api.loadDefault(state.headerIndex);
+    state.defaultSelectedArray[state.headerIndex] = state.defaultSelectedIndexs;
+    emit('reset', [], state.headerIndex, state.defaultSelectedIndexs);
+    state.showWheel = false;
+  };
+};
+export var wheelChange = function wheelChange(state) {
+  return function (indexs) {
+    state.defaultSelectedIndexs = indexs;
+  };
+};
+export var clickWheelItem = function clickWheelItem(_ref5) {
+  var state = _ref5.state,
+    emit = _ref5.emit;
+  return function (indexs, text, item) {
+    if (indexs.length === 0) {
+      state.defaultSelectedIndexs = [-1];
+      state.headerInfo[state.headerIndex] = {
+        isSelected: false,
+        title: '',
+        isUP: false
+      };
+    } else {
+      state.defaultSelectedIndexs = indexs;
+      state.headerInfo[state.headerIndex] = {
+        isSelected: true,
+        title: text,
+        isUP: false
+      };
+    }
+    state.defaultSelectedArray[state.headerIndex] = state.defaultSelectedIndexs;
+    emit('confirm', item, state.headerIndex, indexs);
+    state.showWheel = false;
+  };
+};
+export var getWheelLevelItems = function getWheelLevelItems(wheelData, newIndexs) {
+  var level_1 = wheelData;
+  var level_n = getNextLevel([], wheelData, newIndexs, 0);
+  var wheelLevelItems = [];
+  if (level_n.length === 0) {
+    wheelLevelItems = [level_1];
+  } else {
+    wheelLevelItems = [level_1].concat(_toConsumableArray(level_n));
+  }
+  return wheelLevelItems;
+};
+export var getNextLevel = function getNextLevel(levelItems, children, nextIndexs, start) {
+  var _children$nextIndexs$, _children$nextIndexs$2;
+  var levelItem = (_children$nextIndexs$ = (_children$nextIndexs$2 = children[nextIndexs[start]]) === null || _children$nextIndexs$2 === void 0 ? void 0 : _children$nextIndexs$2.children) !== null && _children$nextIndexs$ !== void 0 ? _children$nextIndexs$ : [];
+  if (start !== nextIndexs.length - 1) {
+    levelItems.push(levelItem);
+    return getNextLevel(levelItems, levelItem, nextIndexs, ++start);
+  } else {
+    return levelItems;
+  }
+};
+export var getSelected = function getSelected(wheelLevelItems, selectedIndexs) {
+  var selectedItems = [];
+  wheelLevelItems.forEach(function (levelItem, i) {
+    var index = selectedIndexs[i];
+    if (levelItem[index]) {
+      selectedItems.push(levelItem[index]);
+    }
+  });
+  var selectedLabels = selectedItems.map(function (item) {
+    return item === null || item === void 0 ? void 0 : item.label;
+  }).join(' ');
+  return {
+    selectedLabels: selectedLabels,
+    selectedItems: selectedItems
+  };
+};
+export var loadDefault = function loadDefault(_ref6) {
+  var props = _ref6.props,
+    state = _ref6.state;
+  return function (value) {
+    var _props$defaultSelecte2, _state$dataSource$sta;
+    var current = (_props$defaultSelecte2 = props.defaultSelectedArray[value]) !== null && _props$defaultSelecte2 !== void 0 ? _props$defaultSelecte2 : [];
+    var defaultSelectedIndexs = [];
+    if ((_state$dataSource$sta = state.dataSource[state.headerIndex]) !== null && _state$dataSource$sta !== void 0 && _state$dataSource$sta.hasFooter) {
+      var defaultL = current.length;
+      var dataSL = getMaxFloor(state.wheelData);
+      if (defaultL <= dataSL) {
+        defaultSelectedIndexs = current.concat(new Array(dataSL - defaultL).fill(0));
+      } else {
+        defaultSelectedIndexs = current.slice(0, dataSL);
+      }
+    } else {
+      defaultSelectedIndexs = current.length > 0 ? current : [-1];
+    }
+    return defaultSelectedIndexs;
+  };
+};
+export var getMaxFloor = function getMaxFloor(treeData) {
+  var maxFloor = 0;
+  var loop = function loop(data, level) {
+    data.forEach(function (item) {
+      var _item$children;
+      item.level = level;
+      if (level > maxFloor) {
+        maxFloor = level;
+      }
+      if ((item === null || item === void 0 ? void 0 : (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0) {
+        loop(item.children, level + 1);
+      }
+    });
+  };
+  loop(treeData, 1);
+  return maxFloor;
+};
+export var getNewHeaderInfo = function getNewHeaderInfo(headerInfo, index, isUP) {
+  var _headerInfo$index, _headerInfo$index2;
+  return {
+    isSelected: (_headerInfo$index = headerInfo[index]) === null || _headerInfo$index === void 0 ? void 0 : _headerInfo$index.isSelected,
+    title: (_headerInfo$index2 = headerInfo[index]) === null || _headerInfo$index2 === void 0 ? void 0 : _headerInfo$index2.title,
+    isUP: isUP
+  };
+};
+export var getLabelLevelsInfo = function getLabelLevelsInfo(refs) {
+  var headerBox = refs.headerBox,
+    label = refs.label;
+  if (!headerBox || !label) return [];
+  var totalWidth = getRect(getEl(headerBox)).width;
+  var labelWidth = label.map(function (node) {
+    return getRect(getEl(node));
+  }).map(function (rect) {
+    return rect.width;
+  });
+  return labelWidth.map(function (labelWidth, idx) {
+    var isOver25 = totalWidth * 0.25 < labelWidth;
+    return {
+      idx: idx,
+      labelWidth: labelWidth,
+      totalWidth: totalWidth,
+      isOver25: isOver25
+    };
+  });
+};
+export var getRect = function getRect(el) {
+  return {
+    top: el.offsetTop,
+    left: el.offsetLeft,
+    width: el.offsetWidth,
+    height: el.offsetHeight
+  };
+};
+export var getEl = function getEl(node) {
+  return node.$el || node;
+};
+export var getLabelsStyle = function getLabelsStyle(state) {
+  var over25Labels = state.labelLevelsInfo.filter(function (i) {
+    return i && !i.isOver25;
+  });
+  var widthInfo = over25Labels;
+  var len = state.dataSource.length;
+  if (len >= 4) {
+    return getStyleConfig(state.labelLevelsInfo, {
+      width: "".concat((1 / len * 100).toFixed(2), "%")
+    });
+  }
+  if (!widthInfo.length || widthInfo.length === state.labelLevelsInfo.length) {
+    return getStyleConfig(state.labelLevelsInfo, {
+      maxWidth: "".concat((1 / len * 100).toFixed(2), "%")
+    });
+  }
+  var fillArr;
+  if (widthInfo.length === 1) {
+    fillArr = getFillArray(state, widthInfo, "37.5%");
+  } else if (widthInfo.length === 2) {
+    fillArr = getFillArray(state, widthInfo, "50%");
+  }
+  widthInfo = widthInfo.concat(fillArr);
+  return widthInfo.reduce(function (styles, item) {
+    styles[item.idx] = item.maxWidth ? {
+      maxWidth: item.maxWidth
+    } : {
+      maxWidth: "25%"
+    };
+    return styles;
+  }, {});
+};
+export var getStyleConfig = function getStyleConfig(data, style) {
+  return data.reduce(function (styleConfig, _, idx) {
+    styleConfig[idx] = style;
+    return styleConfig;
+  }, {});
+};
+export var getFillArray = function getFillArray(state, widthInfo, maxWidth) {
+  var labelIndexArr = state.labelLevelsInfo.map(function (_, idx) {
+    return idx;
+  });
+  var mapWidthInfoArr = widthInfo.map(function (i) {
+    return i.idx;
+  });
+  return labelIndexArr.filter(function (i) {
+    return mapWidthInfoArr.indexOf(i) === -1;
+  }).map(function (i) {
+    return {
+      idx: i,
+      maxWidth: maxWidth
+    };
+  });
+};

package/multi-select/vue.js

@@ -0,0 +1,120 @@
+import { created, handleClick, confirm, reset, wheelChange, clickWheelItem, loadDefault } from './index';
+export var api = ['state', 'created', 'handleClick', 'confirm', 'reset', 'wheelChange', 'clickWheelItem', 'loadDefault'];
+var initState = function initState(reactive) {
+  var state = reactive({
+    dataSource: [],
+    wheelData: [],
+    headerIndex: -1,
+    showWheel: false,
+    labelLevelsInfo: [],
+    labelsStyle: [],
+    wheelIndex: [],
+    wheelText: '',
+    headerInfo: [],
+    defaultSelectedIndexs: [],
+    defaultSelectedArray: []
+  });
+  return state;
+};
+var initApi = function initApi(_ref) {
+  var api = _ref.api,
+    props = _ref.props,
+    state = _ref.state,
+    emit = _ref.emit,
+    nextTick = _ref.nextTick,
+    refs = _ref.refs;
+  Object.assign(api, {
+    state: state,
+    created: created({
+      props: props,
+      state: state,
+      refs: refs,
+      nextTick: nextTick
+    }),
+    handleClick: handleClick({
+      api: api,
+      props: props,
+      state: state
+    }),
+    confirm: confirm({
+      state: state,
+      emit: emit
+    }),
+    reset: reset({
+      api: api,
+      props: props,
+      state: state,
+      emit: emit
+    }),
+    wheelChange: wheelChange(state),
+    clickWheelItem: clickWheelItem({
+      state: state,
+      emit: emit
+    }),
+    loadDefault: loadDefault({
+      props: props,
+      state: state
+    })
+  });
+};
+var initWatch = function initWatch(_ref2) {
+  var watch = _ref2.watch,
+    props = _ref2.props,
+    state = _ref2.state,
+    refs = _ref2.refs,
+    nextTick = _ref2.nextTick;
+  watch(function () {
+    return props.dataSource;
+  }, function () {
+    api.created({
+      props: props,
+      state: state,
+      refs: refs,
+      nextTick: nextTick
+    });
+  });
+  watch(function () {
+    return props.defaultSelectedArray;
+  }, function () {
+    api.created({
+      props: props,
+      state: state,
+      refs: refs,
+      nextTick: nextTick
+    });
+  });
+};
+export var renderless = function renderless(props, _ref3, _ref4) {
+  var onMounted = _ref3.onMounted,
+    reactive = _ref3.reactive,
+    watch = _ref3.watch;
+  var emit = _ref4.emit,
+    nextTick = _ref4.nextTick,
+    refs = _ref4.refs;
+  var api = {};
+  var state = initState(reactive);
+  initApi({
+    api: api,
+    props: props,
+    state: state,
+    emit: emit,
+    nextTick: nextTick,
+    refs: refs
+  });
+  initWatch({
+    watch: watch,
+    props: props,
+    state: state,
+    refs: refs,
+    nextTick: nextTick
+  });
+  onMounted(function () {
+    api.created({
+      props: props,
+      state: state,
+      refs: refs,
+      nextTick: nextTick
+    });
+  });
+  return api;
+};

package/package.json

@@ -1,16 +1,24 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.5.0",
-  "description": "@opentiny/vue-renderless",
+  "version": "3.6.0",
+  "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
+  "homepage": "https://opentiny.design/tiny-vue",
   "repository": {
     "type": "git",
-    "url": ""
+    "url": "https://github.com/opentiny/tiny-vue-renderless"
   },
   "keywords": [
     "vue",
-    "Tiny"
+    "vue3",
+    "frontend",
+    "component-library",
+    "components",
+    "vue-components",
+    "opentiny",
+    "renderless-components",
+    "headless-components"
   ],
-  "author": "Tiny Team",
+  "author": "OpenTiny Team",
   "license": "MIT",
   "sideEffects": false,
   "scripts": {

package/pull-refresh/index.js

@@ -1,67 +1,111 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
-export var onTouchstart = function onTouchstart(_ref) {
-  var state = _ref.state;
+export var initPullRefresh = function initPullRefresh(_ref) {
+  var t = _ref.t,
+    props = _ref.props,
+    state = _ref.state;
+  return function () {
+    var _props$loosingText, _props$successText, _props$failedText;
+    var defaultOption = {
+      pullingUpText: t('ui.pullRefresh.pullingUp'),
+      pullingDownText: t('ui.pullRefresh.pullingDown'),
+      pullUpDisabled: false,
+      pullDownDisabled: false,
+      headHeight: 50,
+      footHeight: 50
+    };
+    state.pullUp = _objectSpread(_objectSpread({}, defaultOption), props.pullUp);
+    state.pullDown = _objectSpread(_objectSpread({}, defaultOption), props.pullDown);
+    state.refreshStyle = {
+      paddingTop: state.pullDown.headHeight + 'px',
+      paddingBottom: state.pullUp.footHeight + 'px'
+    };
+    state.loosingText = (_props$loosingText = props.loosingText) !== null && _props$loosingText !== void 0 ? _props$loosingText : t('ui.pullRefresh.loosing');
+    state.successText = (_props$successText = props.successText) !== null && _props$successText !== void 0 ? _props$successText : t('ui.pullRefresh.success');
+    state.failedText = (_props$failedText = props.failedText) !== null && _props$failedText !== void 0 ? _props$failedText : t('ui.pullRefresh.failed');
+  };
+};
+export var onTouchstart = function onTouchstart(state) {
   return function (event) {
     state.draggposition = event.touches[0].clientY;
   };
 };
 export var onTouchmove = function onTouchmove(_ref2) {
-  var refs = _ref2.refs,
+  var props = _ref2.props,
     state = _ref2.state;
   return function (event) {
-    if (!state.disabled) {
-      if (event.touches[0].clientY < state.draggposition || refs.track.parentNode.scrollTop > 10) {
-        return;
+    if (event.touches[0].clientY < state.draggposition) {
+      if (!state.pullUp.pullUpDisabled) {
+        if (props.hasMore) {
+          state.translate3d = (event.touches[0].clientY - state.draggposition) / 2;
+          state.pullUpReplaces = Math.abs(state.translate3d) > state.pullUp.footHeight ? state.loosingText : state.pullUp.pullingUpText;
+          state.pullDownReplaces = '';
+        }
       }
-      state.replaces = state.pullingText;
-      state.animationDuration = 0;
-      state.translate3d = (event.touches[0].clientY - state.draggposition) / 2;
-      state.styleObj = {
-        'transition-duration': '0ms',
-        transform: 'translate3d(0px,' + state.translate3d + 'px,0px)'
-      };
-      state.checkStatus = false;
-      if (state.translate3d > state.headHeight) {
-        state.replaces = state.loosingText;
-      } else {
-        state.replaces = state.pullingText;
+    } else {
+      if (!state.pullDown.pullDownDisabled) {
+        state.translate3d = (event.touches[0].clientY - state.draggposition) / 2;
+        state.pullDownReplaces = Math.abs(state.translate3d) > state.pullDown.headHeight ? state.loosingText : state.pullDown.pullingDownText;
+        state.pullUpReplaces = '';
       }
     }
+    state.animationDuration = 0;
+    state.pullUpLoading = false;
+    state.pullDownLoading = false;
   };
 };
 export var onTouchend = function onTouchend(_ref3) {
-  var emit = _ref3.emit,
+  var api = _ref3.api,
     props = _ref3.props,
     state = _ref3.state;
   return function () {
     state.animationDuration = props.animationDuration;
-    if (state.translate3d >= state.headHeight) {
-      state.translate3d = state.headHeight;
-      state.checkStatus = true;
-      state.styleObj = {
-        'transition-duration': state.animationDuration + 'ms',
-        transform: 'translate3d(0px,' + state.translate3d + 'px,0px)'
-      };
-      emit('update:modelValue', true);
-      emit('refresh');
+    if (Math.abs(state.translate3d) >= state.pullDown.headHeight || Math.abs(state.translate3d) >= state.pullUp.footHeight) {
+      if (state.translate3d >= 0) {
+        state.translate3d = state.pullDown.headHeight;
+        var handler = state.pullDown.handler;
+        var pullDownPromise = handler && handler();
+        state.pullDownLoading = true;
+        if (pullDownPromise !== null && pullDownPromise !== void 0 && pullDownPromise.then) {
+          pullDownPromise.then(function () {
+            api.handlerModelValue('down', 'success');
+          }, function (e) {
+            console.log(e);
+            api.handlerModelValue('down', 'failed');
+          });
+          return;
+        }
+        console.error(new Error('handler down is not promise'));
+      } else {
+        state.translate3d = -state.pullUp.footHeight;
+        var _handler = state.pullUp.handler;
+        var pullUpPromise = _handler && _handler();
+        state.pullUpLoading = true;
+        if (pullUpPromise !== null && pullUpPromise !== void 0 && pullUpPromise.then) {
+          pullUpPromise.then(function () {
+            api.handlerModelValue('up', 'success');
+          }, function (e) {
+            console.log(e);
+            api.handlerModelValue('up', 'failed');
+          });
+          return;
+        }
+        console.error(new Error('handler up is not promise'));
+      }
+      api.clearPullRefresh();
     } else {
-      state.styleObj = {
-        'transition-duration': state.animationDuration + 'ms'
-      };
-      state.translate3d = 0;
-      state.checkStatus = false;
-      state.replaces = '';
+      state.pullUpLoading = false;
+      state.pullDownLoading = false;
+      api.clearPullRefresh();
     }
   };
 };
 export var mountedHandler = function mountedHandler(_ref4) {
   var api = _ref4.api,
-    refs = _ref4.refs,
-    state = _ref4.state;
+    refs = _ref4.refs;
   return function () {
-    state.styleObj = {
-      'transition-duration': state.animationDuration + 'ms'
-    };
     var track = refs.track;
     on(track, 'touchstart', api.onTouchstart);
     on(track, 'touchmove', api.onTouchmove);
@@ -78,27 +122,26 @@ export var beforeUnmountHandler = function beforeUnmountHandler(_ref5) {
     off(track, 'touchend', api.onTouchend);
   };
 };
-export var watchModelValue = function watchModelValue(_ref6) {
-  var value = _ref6.value,
+export var handlerModelValue = function handlerModelValue(_ref6) {
+  var api = _ref6.api,
     state = _ref6.state;
-  if (!value) {
-    if (state.successText) {
-      state.checkStatus = false;
-      state.replaces = state.successText;
-      setTimeout(function () {
-        state.translate3d = 0;
-        state.styleObj = {
-          'transition-duration': state.animationDuration + 'ms'
-        };
-        state.replaces = '';
-      }, state.successDuration);
+  return function (value, result) {
+    state.pullUpLoading = false;
+    state.pullDownLoading = false;
+    if (value === 'down') {
+      state.pullDownReplaces = state["".concat(result, "Text")];
     } else {
-      state.translate3d = 0;
-      state.checkStatus = false;
-      state.replaces = '';
-      state.styleObj = {
-        'transition-duration': state.animationDuration + 'ms'
-      };
+      state.pullUpReplaces = state["".concat(result, "Text")];
     }
-  }
+    setTimeout(function () {
+      api.clearPullRefresh();
+    }, state.successDuration);
+  };
+};
+export var clearPullRefresh = function clearPullRefresh(state) {
+  return function () {
+    state.translate3d = 0;
+    state.pullUpReplaces = '';
+    state.pullDownReplaces = '';
+  };
 };