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

package/tabs/index.js

@@ -52,7 +52,7 @@ export var calcMorePanes = function calcMorePanes(_ref3) {
     var el = parent.$el;
     var tabs = el.querySelectorAll('.tiny-tabs__item');
     if (tabs && tabs.length) {
-      var tabsHeaderWidth = el.querySelector('.tiny-tabs__nav-scroll').clientWidth - 76;
+      var tabsHeaderWidth = el.querySelector('.tiny-tabs__nav-scroll').clientWidth + 15;
       var tabsAllWidth = 0;
       for (var i = 0, length = tabs.length; i < length; i++) {
         var width = tabs[i].offsetWidth;
@@ -65,15 +65,35 @@ export var calcMorePanes = function calcMorePanes(_ref3) {
     }
   };
 };
-export var handleTabClick = function handleTabClick(_ref4) {
-  var api = _ref4.api,
-    emit = _ref4.emit;
+export var calcExpandPanes = function calcExpandPanes(_ref4) {
+  var parent = _ref4.parent,
+    props = _ref4.props,
+    state = _ref4.state;
+  return function () {
+    if (!props.showExpandTabs) {
+      return;
+    }
+    var el = parent.$el;
+    var tabsHeader = el.querySelector('.tiny-mobile-tabs__header');
+    if (tabsHeader) {
+      state.expandPanesWidth = tabsHeader.clientWidth;
+    }
+  };
+};
+export var handleTabClick = function handleTabClick(_ref5) {
+  var api = _ref5.api,
+    emit = _ref5.emit,
+    props = _ref5.props,
+    refs = _ref5.refs;
   return function (pane, tabName, event) {
     if (pane.disabled) {
       return;
     }
     api.setCurrentName(tabName);
     emit('click', pane, event);
+    if (props.showExpandTabs) {
+      refs.nav && refs.nav.expandTabHide();
+    }
   };
 };
 export var handleTabRemove = function handleTabRemove(emit) {
@@ -92,11 +112,11 @@ export var handleTabAdd = function handleTabAdd(emit) {
     emit('add');
   };
 };
-export var setCurrentName = function setCurrentName(_ref5) {
-  var api = _ref5.api,
-    props = _ref5.props,
-    refs = _ref5.refs,
-    state = _ref5.state;
+export var setCurrentName = function setCurrentName(_ref6) {
+  var api = _ref6.api,
+    props = _ref6.props,
+    refs = _ref6.refs,
+    state = _ref6.state;
   return function (value) {
     api.changeDirection(state.currentName);
     if (state.currentName !== value && props.beforeLeave) {
@@ -114,18 +134,18 @@ export var setCurrentName = function setCurrentName(_ref5) {
     }
   };
 };
-export var changeCurrentName = function changeCurrentName(_ref6) {
-  var emit = _ref6.emit,
-    state = _ref6.state;
+export var changeCurrentName = function changeCurrentName(_ref7) {
+  var emit = _ref7.emit,
+    state = _ref7.state;
   return function (value) {
     state.currentName = value;
     emit('update:modelValue', value);
   };
 };
-export var created = function created(_ref7) {
-  var api = _ref7.api,
-    parent = _ref7.parent,
-    state = _ref7.state;
+export var created = function created(_ref8) {
+  var api = _ref8.api,
+    parent = _ref8.parent,
+    state = _ref8.state;
   return function () {
     if (!state.currentName) {
       state.currentIndex = 0;
@@ -135,9 +155,9 @@ export var created = function created(_ref7) {
     parent.$on('tab-nav-update', api.calcPaneInstances.bind(null, true));
   };
 };
-export var changeDirection = function changeDirection(_ref8) {
-  var props = _ref8.props,
-    state = _ref8.state;
+export var changeDirection = function changeDirection(_ref9) {
+  var props = _ref9.props,
+    state = _ref9.state;
   return function (currentName) {
     state.panes.forEach(function (item, index) {
       if (item.state.paneName === currentName && state.currentIndex !== index) {
@@ -149,21 +169,21 @@ export var changeDirection = function changeDirection(_ref8) {
     });
   };
 };
-export var handleTabDragStart = function handleTabDragStart(_ref9) {
-  var emit = _ref9.emit;
+export var handleTabDragStart = function handleTabDragStart(_ref10) {
+  var emit = _ref10.emit;
   return function (event) {
     emit('tab-drag-start', event);
   };
 };
-export var handleTabDragOver = function handleTabDragOver(_ref10) {
-  var emit = _ref10.emit;
+export var handleTabDragOver = function handleTabDragOver(_ref11) {
+  var emit = _ref11.emit;
   return function (event) {
     emit('tab-drag-over', event);
   };
 };
-export var handleTabDragEnd = function handleTabDragEnd(_ref11) {
-  var state = _ref11.state,
-    emit = _ref11.emit;
+export var handleTabDragEnd = function handleTabDragEnd(_ref12) {
+  var state = _ref12.state,
+    emit = _ref12.emit;
   return function (event) {
     var oldDraggableIndex = event.oldDraggableIndex,
       newDraggableIndex = event.newDraggableIndex;

package/tabs/vue.js

@@ -1,4 +1,4 @@
-import { calcMorePanes, calcPaneInstances, handleTabClick, handleTabAdd, handleTabRemove, setCurrentName, changeCurrentName, created, changeDirection, handleTabDragStart, handleTabDragOver, handleTabDragEnd } from './index';
+import { calcMorePanes, calcExpandPanes, calcPaneInstances, handleTabClick, handleTabAdd, handleTabRemove, setCurrentName, changeCurrentName, created, changeDirection, handleTabDragStart, handleTabDragOver, handleTabDragEnd } from './index';
 export var api = ['state', 'handleTabAdd', 'calcPaneInstances', 'handleTabRemove', 'handleTabClick', 'handleTabDragStart', 'handleTabDragOver', 'handleTabDragEnd', 'setCurrentName', 'getNavRefs'];
 var initState = function initState(_ref) {
   var reactive = _ref.reactive,
@@ -14,7 +14,8 @@ var initState = function initState(_ref) {
     deltaY: 0,
     offsetX: 0,
     offsetY: 0,
-    direction: ''
+    direction: '',
+    expandPanesWidth: ''
   });
 };
 var initWatcher = function initWatcher(_ref2) {
@@ -84,6 +85,11 @@ export var renderless = function renderless(props, _ref3, _ref4) {
       props: props,
       state: state
     }),
+    calcExpandPanes: calcExpandPanes({
+      parent: parent,
+      props: props,
+      state: state
+    }),
     calcPaneInstances: calcPaneInstances({
       constants: constants,
       parent: parent,
@@ -102,7 +108,9 @@ export var renderless = function renderless(props, _ref3, _ref4) {
     }),
     handleTabClick: handleTabClick({
       api: api,
-      emit: emit
+      emit: emit,
+      props: props,
+      refs: refs
     }),
     setCurrentName: setCurrentName({
       api: api,
@@ -132,10 +140,12 @@ export var renderless = function renderless(props, _ref3, _ref4) {
   onMounted(function () {
     api.calcPaneInstances();
     api.calcMorePanes();
+    api.calcExpandPanes();
   });
   onUpdated(function () {
     api.calcPaneInstances();
     api.calcMorePanes();
+    api.calcExpandPanes();
   });
   return api;
 };

package/tag/index.js

@@ -1,12 +1,17 @@
-export var handleClose = function handleClose(emit) {
+export var handleClose = function handleClose(_ref) {
+  var emit = _ref.emit,
+    props = _ref.props;
   return function (event) {
     event.stopPropagation();
-    emit('close', event);
+    var close = function close() {
+      return emit('close', event);
+    };
+    props.beforeDelete ? props.beforeDelete(close) : close();
   };
 };
-export var handleClick = function handleClick(_ref) {
-  var emit = _ref.emit,
-    parent = _ref.parent;
+export var handleClick = function handleClick(_ref2) {
+  var emit = _ref2.emit,
+    parent = _ref2.parent;
   return function (event) {
     parent.$parent && parent.$parent.tagSelectable && event.stopPropagation();
     emit('click', event);

package/tag/vue.js

@@ -4,7 +4,10 @@ export var renderless = function renderless(props, hooks, _ref) {
   var emit = _ref.emit,
     parent = _ref.parent;
   return {
-    handleClose: handleClose(emit),
+    handleClose: handleClose({
+      emit: emit,
+      props: props
+    }),
     handleClick: handleClick({
       emit: emit,
       parent: parent

package/wheel/index.js

@@ -0,0 +1,201 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { cloneDeep } from '@opentiny/vue-renderless/chart-core/deps/utils';
+export var created = function created(api) {
+  return function () {
+    api.loadPickerData();
+    api.loadWheels();
+  };
+};
+export var loadPickerData = function loadPickerData(_ref) {
+  var props = _ref.props,
+    state = _ref.state;
+  return function () {
+    state.dataSource = cloneDeep(props.dataSource);
+    state.defaultSelectedIndexs = cloneDeep(props.defaultSelectedIndexs);
+    var level_1 = state.dataSource.map(function (_ref2) {
+      var label = _ref2.label;
+      return {
+        label: label
+      };
+    });
+    var level_n = getNextLevel([], state.dataSource, state.defaultSelectedIndexs, 0);
+    if (level_n.length === 0) {
+      state.pickerData = [level_1];
+    } else {
+      state.pickerData = [level_1].concat(_toConsumableArray(level_n));
+    }
+  };
+};
+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 wheelChanged = function wheelChanged(_ref3) {
+  var api = _ref3.api,
+    state = _ref3.state;
+  return function (newIndexs, oldIndexs) {
+    if (newIndexs.length > 1) {
+      newIndexs.forEach(function (ii, ri) {
+        if (newIndexs[ri] !== oldIndexs[ri] && ri !== newIndexs.length - 1) {
+          var children = getChildren(state.dataSource, newIndexs, 0, ri);
+          state.pickerData.splice(ri + 1, 1, children);
+        }
+      });
+    }
+    api.wheelsTo(newIndexs);
+    api.changeWheelItemStyle(state.pickerData, newIndexs);
+  };
+};
+export var getChildren = function getChildren(levelItems, newIndexs, start, maxLoop) {
+  var _levelItems$newIndexs, _levelItems$newIndexs2;
+  var levelItem = (_levelItems$newIndexs = (_levelItems$newIndexs2 = levelItems[newIndexs[start]]) === null || _levelItems$newIndexs2 === void 0 ? void 0 : _levelItems$newIndexs2.children) !== null && _levelItems$newIndexs !== void 0 ? _levelItems$newIndexs : [];
+  if (start !== maxLoop) {
+    return getChildren(levelItem, newIndexs, ++start, maxLoop);
+  } else {
+    return levelItem;
+  }
+};
+export var wheelsTo = function wheelsTo(_ref4) {
+  var api = _ref4.api,
+    state = _ref4.state,
+    nextTick = _ref4.nextTick;
+  return function (indexs) {
+    nextTick(function () {
+      state.wheels.forEach(function (wheel, i) {
+        wheel.wheelTo(indexs[i], 0);
+        api.refreshWheel(wheel);
+      });
+    });
+  };
+};
+export var refreshWheel = function refreshWheel(nextTick) {
+  return function (wheel) {
+    nextTick(function () {
+      wheel.refresh();
+    });
+  };
+};
+export var loadWheels = function loadWheels(_ref5) {
+  var api = _ref5.api,
+    props = _ref5.props,
+    state = _ref5.state,
+    nextTick = _ref5.nextTick,
+    refs = _ref5.refs;
+  return function (wheel) {
+    if (state.wheels.length === 0) {
+      nextTick(function () {
+        state.wheels = [];
+        var wheelWrapper = refs.wheelWrapper;
+        if (props.hasFooter) {
+          for (var i = 0; i < state.pickerData.length; i++) {
+            api.createWheelHasFooter(wheelWrapper, i);
+          }
+        } else {
+          api.createWheelNoFooter(wheelWrapper);
+        }
+      });
+    }
+  };
+};
+export var createWheelHasFooter = function createWheelHasFooter(_ref6) {
+  var api = _ref6.api,
+    state = _ref6.state,
+    emit = _ref6.emit,
+    BScroll = _ref6.BScroll;
+  return function (wheelWrapper, i) {
+    var wheels = state.wheels;
+    if (!wheels[i]) {
+      wheels[i] = state.wheels[i] = new BScroll(wheelWrapper.children[i], {
+        wheel: {
+          selectedIndex: state.defaultSelectedIndexs[i],
+          wheelWrapperClass: 'wheel-scroll',
+          wheelItemClass: 'wheel-item'
+        },
+        probeType: 3
+      });
+      state.prevSelectedIndexs = state.defaultSelectedIndexs;
+      wheels[i].on('wheelIndexChanged', function () {
+        var currentSelectedIndex = wheels[i].getSelectedIndex();
+        var currentSelectedIndexs = [].concat(_toConsumableArray(state.prevSelectedIndexs.slice(0, i)), [currentSelectedIndex], _toConsumableArray(new Array(state.defaultSelectedIndexs.length - i - 1).fill(0)));
+        api.wheelChanged(currentSelectedIndexs, state.prevSelectedIndexs);
+        state.prevSelectedIndexs = currentSelectedIndexs;
+        var selectedLabels = [];
+        state.pickerData.forEach(function (data, i) {
+          var _data$index;
+          var index = currentSelectedIndexs[i];
+          if ((_data$index = data[index]) !== null && _data$index !== void 0 && _data$index.label) {
+            var _data$index2;
+            selectedLabels.push((_data$index2 = data[index]) === null || _data$index2 === void 0 ? void 0 : _data$index2.label);
+          }
+        });
+        emit('change', currentSelectedIndexs, selectedLabels.join(' '));
+      });
+      api.wheelsTo(state.defaultSelectedIndexs);
+      api.changeWheelItemStyle(state.pickerData, state.defaultSelectedIndexs);
+    } else {
+      wheels[i].refresh();
+    }
+    return wheels[i];
+  };
+};
+export var createWheelNoFooter = function createWheelNoFooter(_ref7) {
+  var api = _ref7.api,
+    state = _ref7.state,
+    BScroll = _ref7.BScroll;
+  return function (wheelWrapper) {
+    var wheels = state.wheels;
+    if (!wheels[0]) {
+      wheels[0] = state.wheels[0] = new BScroll(wheelWrapper.children[0], {
+        probeType: 3,
+        click: true
+      });
+      api.changeWheelItemStyle(state.pickerData, state.defaultSelectedIndexs);
+      api.refreshWheel(wheels[0]);
+    } else {
+      wheels[0].refresh();
+    }
+    return wheels[0];
+  };
+};
+export var changeWheelItemStyle = function changeWheelItemStyle(state) {
+  return function (pickerData, currentSelectedIndexs) {
+    pickerData.forEach(function (item, index) {
+      state.pickerData[index] = item.map(function (rItem, i) {
+        rItem.selected = i === currentSelectedIndexs[index];
+        return rItem;
+      });
+    });
+  };
+};
+export var dealWheels = function dealWheels(state) {
+  return function () {
+    state.wheels.forEach(function (wheel) {
+      wheel.destroy();
+    });
+    state.wheels = [];
+    state.pickerData = [];
+    state.prevSelectedIndexs = [];
+    state.defaultSelectedIndexs = [];
+  };
+};
+export var clickWheelItem = function clickWheelItem(_ref8) {
+  var api = _ref8.api,
+    state = _ref8.state,
+    emit = _ref8.emit;
+  return function (index) {
+    api.changeWheelItemStyle(state.pickerData, [index]);
+    var rItem = state.pickerData[0][index];
+    if (state.defaultSelectedIndexs[0] !== index) {
+      var selectedLabel = rItem === null || rItem === void 0 ? void 0 : rItem.label;
+      emit('clickWheelItem', [index], selectedLabel);
+    } else {
+      emit('clickWheelItem', [], '');
+    }
+  };
+};

package/wheel/vue.js

@@ -0,0 +1,110 @@
+import { created, loadPickerData, wheelChanged, changeWheelItemStyle, loadWheels, createWheelHasFooter, createWheelNoFooter, wheelsTo, refreshWheel, dealWheels, clickWheelItem } from './index';
+export var api = ['state', 'created', 'loadPickerData', 'wheelChanged', 'changeWheelItemStyle', 'loadWheels', 'createWheelHasFooter', 'createWheelNoFooter', 'wheelsTo', 'refreshWheel', 'dealWheels', 'clickWheelItem'];
+var initState = function initState(reactive) {
+  var state = reactive({
+    dataSource: [],
+    defaultSelectedIndexs: [],
+    pickerData: [],
+    wheels: [],
+    prevSelectedIndexs: []
+  });
+  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,
+    BScroll = _ref.BScroll;
+  Object.assign(api, {
+    state: state,
+    created: created(api),
+    loadPickerData: loadPickerData({
+      props: props,
+      state: state
+    }),
+    wheelChanged: wheelChanged({
+      api: api,
+      state: state
+    }),
+    changeWheelItemStyle: changeWheelItemStyle(state),
+    loadWheels: loadWheels({
+      api: api,
+      props: props,
+      state: state,
+      nextTick: nextTick,
+      refs: refs
+    }),
+    createWheelHasFooter: createWheelHasFooter({
+      api: api,
+      state: state,
+      emit: emit,
+      BScroll: BScroll
+    }),
+    createWheelNoFooter: createWheelNoFooter({
+      api: api,
+      state: state,
+      BScroll: BScroll
+    }),
+    wheelsTo: wheelsTo({
+      api: api,
+      state: state,
+      nextTick: nextTick
+    }),
+    refreshWheel: refreshWheel(nextTick),
+    dealWheels: dealWheels(state),
+    clickWheelItem: clickWheelItem({
+      api: api,
+      state: state,
+      emit: emit
+    })
+  });
+};
+var initWatch = function initWatch(_ref2) {
+  var watch = _ref2.watch,
+    api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state,
+    nextTick = _ref2.nextTick;
+  watch(function () {
+    return props.defaultSelectedIndexs;
+  }, function () {
+    api.dealWheels(state);
+    nextTick(function () {
+      api.created(api);
+    });
+  });
+};
+export var renderless = function renderless(props, _ref3, _ref4, _ref5) {
+  var onMounted = _ref3.onMounted,
+    reactive = _ref3.reactive,
+    watch = _ref3.watch;
+  var emit = _ref4.emit,
+    nextTick = _ref4.nextTick,
+    refs = _ref4.refs;
+  var BScroll = _ref5.BScroll;
+  var api = {};
+  var state = initState(reactive);
+  initApi({
+    api: api,
+    props: props,
+    state: state,
+    emit: emit,
+    nextTick: nextTick,
+    refs: refs,
+    BScroll: BScroll
+  });
+  initWatch({
+    watch: watch,
+    api: api,
+    props: props,
+    state: state,
+    nextTick: nextTick
+  });
+  onMounted(function () {
+    api.created(api);
+  });
+  return api;
+};