@opentiny/vue-renderless 3.1.0-alpha.0

package/table/vue.js

@@ -0,0 +1,66 @@
+import { computedCheckableData, computedSelectedKeys, computedSelectCls, watchDefaultChecked, watchSelected, selectRow, togeSelected, togeSelectAll } from './index';
+export var api = ['state', 'selectRow', 'togeSelected', 'togeSelectAll'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive,
+    watch = _ref.watch;
+  var t = _ref2.t,
+    emit = _ref2.emit;
+  var api = {};
+  var state = reactive({
+    selectedRow: null,
+    checkChangeByUser: false,
+    selected: [],
+    checkableData: computed(function () {
+      return api.computedCheckableData();
+    }),
+    selectedKeys: computed(function () {
+      return api.computedSelectedKeys();
+    }),
+    selectCls: computed(function () {
+      return api.computedSelectCls();
+    })
+  });
+  Object.assign(api, {
+    t: t,
+    state: state,
+    computedSelectCls: computedSelectCls({
+      state: state
+    }),
+    computedSelectedKeys: computedSelectedKeys({
+      props: props,
+      state: state
+    }),
+    computedCheckableData: computedCheckableData({
+      props: props
+    }),
+    selectRow: selectRow({
+      emit: emit,
+      state: state
+    }),
+    togeSelected: togeSelected({
+      state: state
+    }),
+    togeSelectAll: togeSelectAll({
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    watchSelected: watchSelected({
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    watchDefaultChecked: watchDefaultChecked({
+      props: props,
+      state: state
+    })
+  });
+  watch(function () {
+    return props.defaultChecked;
+  }, api.watchDefaultChecked);
+  watch(function () {
+    return state.selected;
+  }, api.watchSelected);
+  return api;
+};

package/tabs/index.js

@@ -0,0 +1,174 @@
+export var calcPaneInstances = function calcPaneInstances(_ref) {
+  var constants = _ref.constants,
+    parent = _ref.parent,
+    state = _ref.state,
+    childrenHandler = _ref.childrenHandler;
+  return function () {
+    var isForceUpdate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var tabItemVNodes = parent.$slots["default"];
+    if (tabItemVNodes) {
+      var currentPanes = [];
+      childrenHandler(function (_ref2) {
+        var vm = _ref2.vm,
+          isLevel1 = _ref2.isLevel1;
+        isLevel1 && vm.$options.componentName === constants.TAB_ITEM && currentPanes.push(vm);
+      });
+      var currentPaneStates = currentPanes.map(function (pane) {
+        return pane.state;
+      });
+      var paneStates = state.panes.map(function (pane) {
+        return pane.state;
+      });
+      var newPanes = [];
+      for (var i = 0; i < paneStates.length; i++) {
+        var paneState = paneStates[i];
+        var index = currentPaneStates.indexOf(paneState);
+        if (index > -1) {
+          newPanes.push(state.panes[i]);
+          currentPanes.splice(index, 1);
+          currentPaneStates.splice(index, 1);
+        }
+      }
+      newPanes = newPanes.concat(currentPanes);
+      var panesChanged = !(newPanes.length === state.panes.length && newPanes.every(function (pane, index) {
+        return pane.state === state.panes[index].state;
+      }));
+      if (isForceUpdate || panesChanged) {
+        state.panes = newPanes;
+      }
+    } else if (state.panes.length !== 0) {
+      state.panes = [];
+    }
+  };
+};
+export var calcMorePanes = function calcMorePanes(_ref3) {
+  var parent = _ref3.parent,
+    props = _ref3.props,
+    state = _ref3.state;
+  return function () {
+    if (!props.showMoreTabs) {
+      return;
+    }
+    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 tabsAllWidth = 0;
+      for (var i = 0, length = tabs.length; i < length; i++) {
+        var width = tabs[i].offsetWidth;
+        tabsAllWidth += width;
+        if (tabsAllWidth > tabsHeaderWidth) {
+          state.showPanesCount = i;
+          break;
+        }
+      }
+    }
+  };
+};
+export var handleTabClick = function handleTabClick(_ref4) {
+  var api = _ref4.api,
+    emit = _ref4.emit;
+  return function (pane, tabName, event) {
+    if (pane.disabled) {
+      return;
+    }
+    api.setCurrentName(tabName);
+    emit('click', pane, event);
+  };
+};
+export var handleTabRemove = function handleTabRemove(emit) {
+  return function (pane, event) {
+    if (pane.disabled) {
+      return;
+    }
+    event.stopPropagation();
+    emit('edit', pane.name, 'remove');
+    emit('close', pane.name);
+  };
+};
+export var handleTabAdd = function handleTabAdd(emit) {
+  return function () {
+    emit('edit', null, 'add');
+    emit('add');
+  };
+};
+export var setCurrentName = function setCurrentName(_ref5) {
+  var api = _ref5.api,
+    props = _ref5.props,
+    refs = _ref5.refs,
+    state = _ref5.state;
+  return function (value) {
+    api.changeDirection(state.currentName);
+    if (state.currentName !== value && props.beforeLeave) {
+      var before = props.beforeLeave(value, state.currentName);
+      if (before && before.then) {
+        before.then(function () {
+          api.changeCurrentName(value);
+          refs.nav && refs.nav.removeFocus(value);
+        });
+      } else if (before !== false) {
+        api.changeCurrentName(value);
+      }
+    } else {
+      api.changeCurrentName(value);
+    }
+  };
+};
+export var changeCurrentName = function changeCurrentName(_ref6) {
+  var emit = _ref6.emit,
+    state = _ref6.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;
+  return function () {
+    if (!state.currentName) {
+      state.currentIndex = 0;
+      api.setCurrentName('0');
+    }
+    api.changeDirection(state.currentName || '0');
+    parent.$on('tab-nav-update', api.calcPaneInstances.bind(null, true));
+  };
+};
+export var changeDirection = function changeDirection(_ref8) {
+  var props = _ref8.props,
+    state = _ref8.state;
+  return function (currentName) {
+    state.panes.forEach(function (item, index) {
+      if (item.state.paneName === currentName && state.currentIndex !== index) {
+        var isTopOrBottom = ~['top', 'bottom'].indexOf(props.position);
+        var isPrev = state.currentIndex < index;
+        state.direction = isTopOrBottom ? isPrev ? 'right' : 'left' : isPrev ? 'bottom' : 'top';
+        state.currentIndex = index;
+      }
+    });
+  };
+};
+export var handleTabDragStart = function handleTabDragStart(_ref9) {
+  var emit = _ref9.emit;
+  return function (event) {
+    emit('tab-drag-start', event);
+  };
+};
+export var handleTabDragOver = function handleTabDragOver(_ref10) {
+  var emit = _ref10.emit;
+  return function (event) {
+    emit('tab-drag-over', event);
+  };
+};
+export var handleTabDragEnd = function handleTabDragEnd(_ref11) {
+  var state = _ref11.state,
+    emit = _ref11.emit;
+  return function (event) {
+    var oldDraggableIndex = event.oldDraggableIndex,
+      newDraggableIndex = event.newDraggableIndex;
+    var panel = state.panes.splice(oldDraggableIndex, 1)[0];
+    state.panes.splice(newDraggableIndex, 0, panel);
+    emit('tab-drag-end', event);
+  };
+};

package/tabs/vue.js

@@ -0,0 +1,141 @@
+import { calcMorePanes, 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,
+    props = _ref.props;
+  return reactive({
+    panes: [],
+    currentName: props.modelValue || props.activeName,
+    currentIndex: -1,
+    showPanesCount: -1,
+    startX: 0,
+    startY: 0,
+    deltaX: 0,
+    deltaY: 0,
+    offsetX: 0,
+    offsetY: 0,
+    direction: ''
+  });
+};
+var initWatcher = function initWatcher(_ref2) {
+  var watch = _ref2.watch,
+    props = _ref2.props,
+    api = _ref2.api,
+    state = _ref2.state,
+    nextTick = _ref2.nextTick,
+    refs = _ref2.refs;
+  watch(function () {
+    return props.modelValue;
+  }, api.setCurrentName);
+  watch(function () {
+    return props.activeName;
+  }, api.setCurrentName);
+  watch(function () {
+    return state.currentName;
+  }, function () {
+    nextTick(function () {
+      refs.nav.scrollToActiveTab();
+    });
+  }, {
+    deep: true
+  });
+  watch(function () {
+    return props.showMoreTabs;
+  }, function (value) {
+    if (!value) {
+      state.morePanes = [];
+      state.showPanesCount = -1;
+    }
+  }, {
+    immediate: true
+  });
+};
+export var renderless = function renderless(props, _ref3, _ref4) {
+  var onMounted = _ref3.onMounted,
+    onUpdated = _ref3.onUpdated,
+    provide = _ref3.provide,
+    reactive = _ref3.reactive,
+    watch = _ref3.watch;
+  var refs = _ref4.refs,
+    parent = _ref4.parent,
+    emit = _ref4.emit,
+    constants = _ref4.constants,
+    nextTick = _ref4.nextTick,
+    childrenHandler = _ref4.childrenHandler;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    props: props
+  });
+  Object.assign(api, {
+    state: state,
+    handleTabAdd: handleTabAdd(emit),
+    handleTabRemove: handleTabRemove(emit),
+    changeDirection: changeDirection({
+      props: props,
+      state: state
+    }),
+    changeCurrentName: changeCurrentName({
+      emit: emit,
+      state: state
+    }),
+    calcMorePanes: calcMorePanes({
+      parent: parent,
+      props: props,
+      state: state
+    }),
+    calcPaneInstances: calcPaneInstances({
+      constants: constants,
+      parent: parent,
+      state: state,
+      childrenHandler: childrenHandler
+    }),
+    handleTabDragStart: handleTabDragStart({
+      emit: emit
+    }),
+    handleTabDragOver: handleTabDragOver({
+      emit: emit
+    }),
+    handleTabDragEnd: handleTabDragEnd({
+      state: state,
+      emit: emit
+    }),
+    handleTabClick: handleTabClick({
+      api: api,
+      emit: emit
+    }),
+    setCurrentName: setCurrentName({
+      api: api,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    created: created({
+      api: api,
+      parent: parent,
+      state: state
+    })
+  });
+  api.created();
+  provide('rootTabs', parent);
+  initWatcher({
+    watch: watch,
+    props: props,
+    api: api,
+    state: state,
+    nextTick: nextTick,
+    refs: refs
+  });
+  if (!state.currentName) {
+    api.setCurrentName('0');
+  }
+  onMounted(function () {
+    api.calcPaneInstances();
+    api.calcMorePanes();
+  });
+  onUpdated(function () {
+    api.calcPaneInstances();
+    api.calcMorePanes();
+  });
+  return api;
+};

package/tag/index.js

@@ -0,0 +1,14 @@
+export var handleClose = function handleClose(emit) {
+  return function (event) {
+    event.stopPropagation();
+    emit('close', event);
+  };
+};
+export var handleClick = function handleClick(_ref) {
+  var emit = _ref.emit,
+    parent = _ref.parent;
+  return function (event) {
+    parent.$parent && parent.$parent.tagSelectable && event.stopPropagation();
+    emit('click', event);
+  };
+};

package/tag/vue.js

@@ -0,0 +1,13 @@
+import { handleClose, handleClick } from './index';
+export var api = ['handleClose', 'handleClick'];
+export var renderless = function renderless(props, hooks, _ref) {
+  var emit = _ref.emit,
+    parent = _ref.parent;
+  return {
+    handleClose: handleClose(emit),
+    handleClick: handleClick({
+      emit: emit,
+      parent: parent
+    })
+  };
+};

package/tall-storage/index.js

@@ -0,0 +1,161 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import { KEY_CODE } from '@opentiny/vue-renderless/common';
+export var mousedown = function mousedown(event) {
+  if (event && event.preventDefault) {
+    event.preventDefault();
+  } else {
+    window.event.returnValue = false;
+  }
+  return false;
+};
+export var selectItem = function selectItem(_ref) {
+  var emit = _ref.emit,
+    state = _ref.state;
+  return function (value) {
+    state.hoverValue = '';
+    emit('selected', value);
+  };
+};
+export var keydown = function keydown(_ref2) {
+  var emit = _ref2.emit,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    var key = window.event.keyCode;
+    var index = props.localstorageData.indexOf(state.hoverValue);
+    var endIndex = props.localstorageData.length - 1;
+    if (key === KEY_CODE.ArrowUp && props.isMemoryStorage) {
+      if (index > 0 && index <= endIndex) {
+        state.hoverValue = props.localstorageData[index - 1];
+      } else {
+        state.hoverValue = props.localstorageData[endIndex];
+      }
+      return false;
+    }
+    if (key === KEY_CODE.ArrowDown && props.isMemoryStorage) {
+      if (index >= 0 && index < endIndex) {
+        state.hoverValue = props.localstorageData[index + 1];
+      } else {
+        state.hoverValue = props.localstorageData[0];
+      }
+      return false;
+    }
+    if (key === KEY_CODE.NumpadEnter) {
+      if (props.isMemoryStorage && state.hoverValue && state.hoverValue.length > 0) {
+        emit('selected', state.hoverValue);
+      }
+    }
+  };
+};
+var sortDeduplication = function sortDeduplication(array) {
+  var memorySpace = 5;
+  var length = array.length;
+  var newArray = [];
+  var fillterObj = {};
+  for (var i = 0, j = 1; j <= memorySpace; j++) {
+    if (i < 0 || i >= length) {
+      break;
+    }
+    if (fillterObj[array[i]]) {
+      j = j - 1;
+    } else {
+      fillterObj[array[i]] = true;
+      newArray.push(array[i]);
+    }
+    if (j === length) {
+      break;
+    }
+    i++;
+  }
+  return newArray;
+};
+var isJSONobject = function isJSONobject(string, type) {
+  if (typeof string === 'string') {
+    try {
+      var obj = JSON.parse(string);
+      if (_typeof(obj) === 'object' && obj && (type ? obj.constructor === type : true)) {
+        return true;
+      } else {
+        return false;
+      }
+    } catch (error) {
+      return false;
+    }
+  }
+};
+var setLocalStorageage = function setLocalStorageage(name, value) {
+  if (typeof value === 'string') {
+    var oldValue = localStorage.getItem(name);
+    var isArray = isJSONobject(oldValue, Array);
+    var newValue = '';
+    if (oldValue && isArray) {
+      var oldArray = JSON.parse(localStorage.getItem(name));
+      oldArray.unshift(value);
+      oldArray = sortDeduplication(oldArray);
+      newValue = JSON.stringify(oldArray);
+    } else if (oldValue === null || oldValue === value) {
+      newValue = value;
+    } else {
+      newValue = JSON.stringify([value, oldValue]);
+    }
+    localStorage.setItem(name, newValue);
+  }
+};
+export var addMemory = function addMemory(props) {
+  return function (value) {
+    if (props.name && value) {
+      setLocalStorageage(props.name, value);
+    }
+  };
+};
+export var searchMemory = function searchMemory(_ref3) {
+  var props = _ref3.props,
+    state = _ref3.state;
+  return function (inputVal) {
+    if (!props.name) {
+      return;
+    }
+    var memoryBox = localStorage.getItem(props.name);
+    var storageData = [];
+    var isMemoryStorage = true;
+    if (isJSONobject(memoryBox)) {
+      var memoryArry = JSON.parse(memoryBox);
+      if (!inputVal) {
+        storageData = JSON.parse(memoryBox);
+      } else {
+        for (var i = 0, len = memoryArry.length; i < len; i++) {
+          memoryArry[i].indexOf(inputVal) >= 0 && storageData.push(memoryArry[i]);
+        }
+      }
+      if (storageData.length === 0) {
+        isMemoryStorage = false;
+      }
+    } else {
+      if (memoryBox === null) {
+        isMemoryStorage = false;
+      } else {
+        storageData.push(memoryBox);
+      }
+    }
+    state.storageData = storageData;
+    state.isMemoryStorage = isMemoryStorage;
+  };
+};
+export var selectedMemory = function selectedMemory(_ref4) {
+  var api = _ref4.api,
+    state = _ref4.state;
+  return function (value) {
+    api.getInput().value = value;
+    api.handleInput({
+      target: {
+        value: value
+      }
+    });
+    api.handleChange({
+      target: {
+        value: value
+      }
+    });
+    state.isMemoryStorage = false;
+  };
+};

package/tall-storage/vue-storage-box.js

@@ -0,0 +1,25 @@
+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 { addMemory, searchMemory, selectedMemory } from './index';
+export default (function (_ref) {
+  var api = _ref.api,
+    props = _ref.props,
+    reactive = _ref.reactive,
+    toRefs = _ref.toRefs;
+  var state = reactive({
+    storageData: [],
+    isMemoryStorage: false
+  });
+  return _objectSpread(_objectSpread({}, toRefs(state)), {}, {
+    addMemory: addMemory(props),
+    searchMemory: searchMemory({
+      props: props,
+      state: state
+    }),
+    selectedMemory: selectedMemory({
+      api: api,
+      state: state
+    })
+  });
+});

package/tall-storage/vue.js

@@ -0,0 +1,38 @@
+import { mousedown, selectItem, keydown } from './index';
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+export var api = ['state', 'mousedown', 'selectItem'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var onUnmounted = _ref.onUnmounted,
+    reactive = _ref.reactive,
+    watch = _ref.watch;
+  var emit = _ref2.emit;
+  var state = reactive({
+    hoverValue: ''
+  });
+  var api = {
+    state: state,
+    mousedown: mousedown,
+    selectItem: selectItem({
+      emit: emit,
+      state: state
+    }),
+    keydown: keydown({
+      emit: emit,
+      props: props,
+      state: state
+    })
+  };
+  watch(function () {
+    return props.isMemoryStorage;
+  }, function (value) {
+    return !value && (state.hoverValue = '');
+  }, {
+    immediate: true
+  });
+  onUnmounted(function () {
+    state.hoverValue = '';
+    off(document, 'keydown', api.keydown);
+  });
+  on(document, 'keydown', api.keydown);
+  return api;
+};