@opentiny/vue-renderless 3.5.0 → 3.6.0-alpha.1

package/fullscreen/index.js

@@ -21,42 +21,49 @@ export var request = function request(_ref2) {
     sf = _ref2.sf,
     api = _ref2.api;
   return function () {
-    if (state.isPageOnly) {
-      state.isFullscreen = true;
-      api.onChangeFullscreen();
-      off(document, 'keyup', api.keypressCallback);
-      on(document, 'keyup', api.keypressCallback);
-    } else {
-      sf.off('change', api.fullScreenCallback);
-      sf.on('change', api.fullScreenCallback);
-      sf.request(props.teleport ? document.body : vm.$el);
-    }
-    if (props.teleport) {
-      if (vm.$el.parentNode === document.body) {
-        return;
+    var change = function change() {
+      if (state.isPageOnly) {
+        state.isFullscreen = true;
+        api.onChangeFullscreen();
+        off(document, 'keyup', api.keypressCallback);
+        on(document, 'keyup', api.keypressCallback);
+      } else {
+        sf.off('change', api.fullScreenCallback);
+        sf.on('change', api.fullScreenCallback);
+        sf.request(props.teleport ? document.body : vm.$el);
       }
-      state.__parentNode = vm.$el.parentNode;
-      state.__token = document.createComment('fullscreen-token');
-      state.__parentNode.insertBefore(state.__token, vm.$el);
-      document.body.appendChild(vm.$el);
-    }
+      if (props.teleport) {
+        if (vm.$el.parentNode === document.body) {
+          return;
+        }
+        state.__parentNode = vm.$el.parentNode;
+        state.__token = document.createComment('fullscreen-token');
+        state.__parentNode.insertBefore(state.__token, vm.$el);
+        document.body.appendChild(vm.$el);
+      }
+    };
+    props.beforeChange ? props.beforeChange(change) : change();
   };
 };
 export var exit = function exit(_ref3) {
   var state = _ref3.state,
     api = _ref3.api,
-    sf = _ref3.sf;
+    sf = _ref3.sf,
+    props = _ref3.props;
   return function () {
-    if (!state.isFullscreen) {
-      return;
-    }
-    if (state.isPageOnly) {
-      state.isFullscreen = false;
-      api.onChangeFullscreen();
-      off(document, 'keyup', api.keypressCallback);
-    } else {
-      sf.exit();
-    }
+    var change = function change() {
+      if (!state.isFullscreen) {
+        return;
+      }
+      if (state.isPageOnly) {
+        state.isFullscreen = false;
+        api.onChangeFullscreen();
+        off(document, 'keyup', api.keypressCallback);
+      } else {
+        sf.exit();
+      }
+    };
+    props.beforeChange ? props.beforeChange(change) : change();
   };
 };
 export var shadeClick = function shadeClick(_ref4) {

package/fullscreen/vue.js

@@ -28,7 +28,8 @@ export var renderless = function renderless(props, _ref, _ref2) {
     exit: exit({
       state: state,
       api: api,
-      sf: sf
+      sf: sf,
+      props: props
     }),
     toggle: toggle({
       state: state,

package/index-bar/index.js

@@ -0,0 +1,76 @@
+export var switchIndex = function switchIndex(index, state, emit) {
+  if (index === state.index) {
+    return;
+  }
+  emit('select', index);
+  state.index = index;
+  if (index < state.childrenAnchor.length) {
+    var item = state.childrenAnchor[index];
+    document.documentElement.scrollTop = item.offsetTop;
+  }
+};
+export var handleTouchDown = function handleTouchDown(_ref) {
+  var state = _ref.state;
+  return function () {
+    state.isMouseDown = true;
+  };
+};
+export var handleTouchMove = function handleTouchMove(_ref2) {
+  var emit = _ref2.emit,
+    state = _ref2.state;
+  return function (e) {
+    console.log(e, state.isMouseDown);
+    if (state.isMouseDown && e.target.id) {
+      switchIndex(Number(e.target.id), state, emit);
+    }
+  };
+};
+export var handleTouchUp = function handleTouchUp(_ref3) {
+  var state = _ref3.state;
+  return function () {
+    state.isMouseDown = false;
+  };
+};
+export var handleIndexClick = function handleIndexClick(_ref4) {
+  var emit = _ref4.emit,
+    state = _ref4.state;
+  return function (value) {
+    switchIndex(value.index, state, emit);
+  };
+};
+export var updateAnchorChildren = function updateAnchorChildren(_ref5) {
+  var state = _ref5.state,
+    refs = _ref5.refs;
+  return function () {
+    var node = refs.indexBarContent;
+    if (node) {
+      state.childrenAnchor = [];
+      getAnchorChildren(node, state);
+    }
+  };
+};
+export var getAnchorChildren = function getAnchorChildren(node, state) {
+  node.childNodes.forEach(function (ele) {
+    if (ele.className === 'tiny-mobile-index-bar-anchor') {
+      state.childrenAnchor.push(ele);
+    } else {
+      getAnchorChildren(ele, state);
+    }
+  });
+};
+export var handleScroll = function handleScroll(_ref6) {
+  var state = _ref6.state;
+  return function () {
+    findTopAnchor(state);
+  };
+};
+export var findTopAnchor = function findTopAnchor(state) {
+  var scrollTop = document.documentElement.scrollTop;
+  for (var index = 0; index < state.childrenAnchor.length; index++) {
+    var item = state.childrenAnchor[index];
+    if (item.offsetTop + item.offsetHeight > scrollTop) {
+      state.index = index;
+      break;
+    }
+  }
+};

package/index-bar/vue.js

@@ -0,0 +1,87 @@
+import { handleScroll, updateAnchorChildren, handleTouchDown, handleTouchMove, handleTouchUp, handleIndexClick } from './index';
+export var api = ['state', 'handleIndexClick', 'handleScroll', 'updateAnchorChildren', 'handleTouchDown', 'handleTouchMove', 'handleTouchUp', 'handleIndexClick'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive,
+    onMounted = _ref.onMounted,
+    onUnmounted = _ref.onUnmounted,
+    onUpdated = _ref.onUpdated,
+    watch = _ref.watch;
+  var emit = _ref2.emit,
+    parent = _ref2.parent,
+    refs = _ref2.refs;
+  var state = reactive({
+    index: 0,
+    childrenAnchor: [],
+    isFistUpdate: true
+  });
+  var api = {
+    state: state,
+    isMouseDown: false,
+    handleScroll: handleScroll({
+      state: state
+    }),
+    updateAnchorChildren: updateAnchorChildren({
+      emit: emit,
+      parent: parent,
+      refs: refs,
+      state: state
+    }),
+    handleTouchDown: handleTouchDown({
+      state: state
+    }),
+    handleTouchMove: handleTouchMove({
+      emit: emit,
+      state: state
+    }),
+    handleTouchUp: handleTouchUp({
+      state: state
+    }),
+    handleIndexClick: handleIndexClick({
+      emit: emit,
+      parent: parent,
+      refs: refs,
+      state: state
+    })
+  };
+  Object.assign(api, {
+    state: state
+  });
+  onMounted(function (e) {
+    window.addEventListener('scroll', api.handleScroll);
+  });
+  onUnmounted(function () {
+    window.removeEventListener('scroll', api.handleScroll);
+  });
+  watch(function () {
+    return state.index;
+  }, function (value, oldValue) {
+    var isChange = value !== oldValue && value >= 0 && value < parent.indexList.length;
+    if (isChange) {
+      emit('change', value);
+    }
+  }, {
+    immediate: false
+  });
+  watch(function () {
+    return props.indexList;
+  }, function () {
+    api.updateAnchorChildren({
+      refs: refs,
+      state: state
+    });
+  }, {
+    immediate: false,
+    deep: true
+  });
+  onUpdated(function () {
+    if (state.isFistUpdate) {
+      state.isFistUpdate = false;
+      api.updateAnchorChildren({
+        refs: refs,
+        state: state
+      });
+    }
+  });
+  return api;
+};

package/index-bar-anchor/vue.js

@@ -0,0 +1,20 @@
+import './index';
+export var api = ['state'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive,
+    onMounted = _ref.onMounted,
+    onUpdated = _ref.onUpdated,
+    watch = _ref.watch;
+  var emit = _ref2.emit,
+    parent = _ref2.parent,
+    refs = _ref2.refs;
+  var state = reactive({});
+  var api = {
+    state: state
+  };
+  Object.assign(api, {
+    state: state
+  });
+  return api;
+};

package/ip-address/index.js

@@ -148,7 +148,9 @@ export var select = function select(_ref7) {
 };
 export var inputEvent = function inputEvent(_ref9) {
   var api = _ref9.api,
+    componentName = _ref9.componentName,
     emit = _ref9.emit,
+    eventName = _ref9.eventName,
     props = _ref9.props;
   return function (_ref10) {
     var item = _ref10.item,
@@ -166,6 +168,7 @@ export var inputEvent = function inputEvent(_ref9) {
     }
     value = api.getValue();
     emit('update:modelValue', value, index);
+    api.dispatch(componentName, eventName, [value]);
   };
 };
 export var change = function change(_ref11) {
@@ -192,7 +195,7 @@ export var blur = function blur(_ref12) {
       item.value = item.value.replace(/\D/g, '');
     }
     emit('blur', item.value, index);
-    api.dispatch(componentName, eventName);
+    api.dispatch(componentName, eventName, [item.value]);
   };
 };
 export var keyup = function keyup(_ref14) {
@@ -229,13 +232,12 @@ export var keyup = function keyup(_ref14) {
   };
 };
 var checkError1 = function checkError1(_ref16) {
-  var Tab = _ref16.Tab,
-    Space = _ref16.Space,
+  var Space = _ref16.Space,
     NumpadDecimal = _ref16.NumpadDecimal,
     NumpadComma = _ref16.NumpadComma,
     keyCode = _ref16.keyCode,
     value = _ref16.value;
-  return [Tab, Space, NumpadDecimal, NumpadComma].indexOf(keyCode) > -1 && value;
+  return [Space, NumpadDecimal, NumpadComma].indexOf(keyCode) > -1 && value;
 };
 var checkError2 = function checkError2(newValue) {
   return newValue && (isNaN(newValue) || newValue > IPTHRESHOLD.Max);
@@ -270,13 +272,11 @@ var isError = function isError(_ref20) {
     ctrlKey = _ref20.ctrlKey,
     keyCode = _ref20.keyCode,
     newValue = _ref20.newValue;
-  var Tab = KEY_CODE.Tab,
-    Space = KEY_CODE.Space,
+  var Space = KEY_CODE.Space,
     NumpadDecimal = KEY_CODE.NumpadDecimal,
     NumpadComma = KEY_CODE.NumpadComma,
     KeyV = KEY_CODE.KeyV;
   return checkError1({
-    Tab: Tab,
     Space: Space,
     NumpadDecimal: NumpadDecimal,
     NumpadComma: NumpadComma,

package/ip-address/vue.js

@@ -75,8 +75,7 @@ var initApi = function initApi(_ref2) {
     }),
     change: change({
       api: api,
-      emit: emit,
-      props: props
+      emit: emit
     }),
     keydown: keydown({
       api: api,
@@ -86,7 +85,9 @@ var initApi = function initApi(_ref2) {
     inputEvent: inputEvent({
       api: api,
       emit: emit,
-      props: props
+      props: props,
+      componentName: componentName,
+      eventName: eventName.change
     })
   }));
 };
@@ -147,10 +148,10 @@ export var renderless = function renderless(props, _ref4, _ref5) {
     broadcast = _ref5.broadcast,
     dispatch = _ref5.dispatch;
   var api = {};
-  var componentName = "".concat($prefix, "FormItem");
+  var componentName = "FormItem";
   var eventName = {
-    change: "".concat($prefix, ".form.change"),
-    blur: "".concat($prefix, ".form.blur")
+    change: "form.change",
+    blur: "form.blur"
   };
   parent.tinyForm = parent.tinyForm || inject('form', null);
   var handleValue = useHandleValue({

package/multi-select/index.js

@@ -0,0 +1,282 @@
+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 wheelLevelText = getWheelLevelText(wheelLevelItems, state.defaultSelectedIndexs);
+    state.headerInfo[state.headerIndex] = {
+      isSelected: true,
+      title: wheelLevelText,
+      isUP: false
+    };
+    state.defaultSelectedArray[state.headerIndex] = state.defaultSelectedIndexs;
+    emit('confirm', state.defaultSelectedIndexs, wheelLevelText);
+    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.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) {
+    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', indexs, text);
+    state.showWheel = false;
+  };
+};
+export var getWheelLevelItems = function getWheelLevelItems(wheelData, newIndexs) {
+  var level_1 = wheelData.map(function (_ref6) {
+    var label = _ref6.label;
+    return {
+      label: label
+    };
+  });
+  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 getWheelLevelText = function getWheelLevelText(wheelLevelItems, selectedIndexs) {
+  var selectedLabels = [];
+  wheelLevelItems.forEach(function (levelItem, i) {
+    var _levelItem$index;
+    var index = selectedIndexs[i];
+    if ((_levelItem$index = levelItem[index]) !== null && _levelItem$index !== void 0 && _levelItem$index.label) {
+      var _levelItem$index2;
+      selectedLabels.push((_levelItem$index2 = levelItem[index]) === null || _levelItem$index2 === void 0 ? void 0 : _levelItem$index2.label);
+    }
+  });
+  return selectedLabels.join(' ');
+};
+export var loadDefault = function loadDefault(_ref7) {
+  var props = _ref7.props,
+    state = _ref7.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
+    };
+  });
+};