@opentiny/vue-renderless 3.1.0-alpha.0

package/top-box/vue.js

@@ -0,0 +1,77 @@
+import { clearTimer, startTimer, close, handleAfterLeave, bindEvent, unBindEvent, destroy, watchClosed, getTypeClass, getOffsetStyle, getZindex } from './index';
+export var api = ['state', 'handleAfterLeave', 'clearTimer', 'startTimer', 'close', 'getZindex'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    onBeforeUnmount = _ref.onBeforeUnmount,
+    onMounted = _ref.onMounted,
+    reactive = _ref.reactive,
+    watch = _ref.watch;
+  var vm = _ref2.vm,
+    parent = _ref2.parent,
+    constants = _ref2.constants;
+  var api = {};
+  var state = reactive({
+    timer: null,
+    message: '',
+    type: 'info',
+    iconClass: '',
+    onClose: null,
+    closed: false,
+    center: false,
+    buttons: null,
+    duration: 3000,
+    visible: false,
+    customClass: '',
+    showClose: false,
+    verticalOffset: 20,
+    dangerouslyUseHTMLString: false,
+    typeClass: computed(function () {
+      return api.getTypeClass();
+    }),
+    positionStyle: computed(function () {
+      return api.getOffsetStyle();
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    getZindex: getZindex,
+    close: close(state),
+    destroy: destroy(parent),
+    clearTimer: clearTimer(state),
+    getOffsetStyle: getOffsetStyle({
+      state: state
+    }),
+    getTypeClass: getTypeClass({
+      constants: constants,
+      state: state
+    }),
+    bindEvent: bindEvent({
+      api: api,
+      state: state
+    }),
+    startTimer: startTimer({
+      api: api,
+      state: state
+    }),
+    unBindEvent: unBindEvent({
+      api: api,
+      state: state
+    }),
+    handleAfterLeave: handleAfterLeave(api),
+    watchClosed: watchClosed({
+      api: api,
+      state: state
+    })
+  });
+  watch(function () {
+    return state.closed;
+  }, api.watchClosed, {
+    immediate: true
+  });
+  onMounted(function () {
+    props.emitter.emit('TopBoxMounted', vm);
+    api.bindEvent();
+  });
+  onBeforeUnmount(api.unBindEvent);
+  return api;
+};

package/transfer/index.js

@@ -0,0 +1,296 @@
+import { copyArray } from '@opentiny/vue-renderless/common/object';
+export var getObj = function getObj(props) {
+  return function () {
+    return props.data.reduce(function (o, cur) {
+      return (o[cur[props.props.key]] = cur) && o;
+    }, {});
+  };
+};
+export var getSourceData = function getSourceData(_ref) {
+  var props = _ref.props,
+    Tree = _ref.Tree;
+  return function () {
+    if (props.render && props.render.plugin.name === Tree) {
+      return props.data;
+    }
+    return props.data.filter(function (item) {
+      return props.modelValue.indexOf(item[props.props.key]) === -1;
+    });
+  };
+};
+export var getFlatData = function getFlatData(data, hasChildren) {
+  var nodes = [];
+  var getChild = function getChild(data) {
+    data.forEach(function (node) {
+      nodes.push(node);
+      if (node.children && node.children.length > 0) {
+        getChild(node.children);
+      }
+    });
+  };
+  getChild(data);
+  if (hasChildren) {
+    nodes.forEach(function (item) {
+      if (item.children) {
+        delete item.children;
+      }
+    });
+  }
+  return nodes;
+};
+export var getTargetData = function getTargetData(_ref2) {
+  var order = _ref2.order,
+    props = _ref2.props,
+    state = _ref2.state,
+    Tree = _ref2.Tree,
+    Table = _ref2.Table;
+  return function () {
+    if (props.render && props.render.plugin.name === Tree) {
+      var nodes = getFlatData(copyArray(props.data), true);
+      var rightData = nodes.filter(function (item) {
+        return props.modelValue.indexOf(item[props.props.key]) > -1;
+      });
+      var sortAry = [];
+      props.modelValue.forEach(function (value) {
+        sortAry.push(rightData.filter(function (item) {
+          return item[props.props.key] === value;
+        })[0]);
+      });
+      sortAry.flag = 'sort';
+      return sortAry;
+    }
+    if (props.targetOrder === order) {
+      return props.data.filter(function (item) {
+        return props.modelValue.indexOf(item[props.props.key]) > -1;
+      });
+    } else {
+      var data = props.modelValue.reduce(function (arr, cur) {
+        var val = state.dataObj[cur];
+        if (val) {
+          arr.push(val);
+        }
+        return arr;
+      }, []);
+      if (props.render && props.render.plugin.name === Table) {
+        data.flag = 'table';
+      }
+      return data;
+    }
+  };
+};
+export var onSourceCheckedChange = function onSourceCheckedChange(_ref3) {
+  var emit = _ref3.emit,
+    state = _ref3.state;
+  return function (val, movedKeys) {
+    state.leftChecked = val;
+    if (movedKeys === undefined) {
+      return;
+    }
+    emit('left-check-change', val, movedKeys);
+  };
+};
+export var onTargetCheckedChange = function onTargetCheckedChange(_ref4) {
+  var emit = _ref4.emit,
+    state = _ref4.state;
+  return function (val, movedKeys) {
+    state.rightChecked = val;
+    if (movedKeys === undefined) {
+      return;
+    }
+    emit('right-check-change', val, movedKeys);
+  };
+};
+export var addToLeft = function addToLeft(_ref5) {
+  var emit = _ref5.emit,
+    props = _ref5.props,
+    state = _ref5.state;
+  return function (value) {
+    state.isToLeft = true;
+    var currentValue = props.modelValue.slice();
+    if (value === 'all') {
+      state.rightChecked = state.rightData.map(function (item) {
+        return item[props.props.key];
+      });
+    }
+    state.rightChecked.forEach(function (item) {
+      var index = currentValue.indexOf(item);
+      if (index > -1) {
+        currentValue.splice(index, 1);
+      }
+    });
+    state.rightChecked = state.rightChecked.slice(0);
+    emit('update:modelValue', currentValue);
+    emit('change', currentValue, 'left', state.rightChecked);
+  };
+};
+export var addToRight = function addToRight(_ref6) {
+  var emit = _ref6.emit,
+    refs = _ref6.refs,
+    props = _ref6.props,
+    state = _ref6.state,
+    Tree = _ref6.Tree;
+  return function (value) {
+    state.isToLeft = false;
+    var currentValue = props.modelValue.slice();
+    var itemsToBeMoved = [];
+    var key = props.props.key;
+    if (props.render && props.render.plugin.name === Tree) {
+      if (!props.treeOp.checkStrictly) {
+        currentValue = refs.leftPanel.$refs.plugin.getCheckedKeys();
+      } else {
+        state.leftChecked.forEach(function (item) {
+          return currentValue.indexOf(item) === -1 && currentValue.push(item);
+        });
+      }
+    } else {
+      if (value === 'all') {
+        state.leftData.forEach(function (item) {
+          var itemKey = item[key];
+          if (props.modelValue.indexOf(itemKey) === -1) {
+            itemsToBeMoved.push(itemKey);
+          }
+        });
+        state.leftChecked = itemsToBeMoved.slice();
+      } else {
+        props.data.forEach(function (item) {
+          var itemKey = item[key];
+          if (state.leftChecked.indexOf(itemKey) > -1 && props.modelValue.indexOf(itemKey) === -1) {
+            itemsToBeMoved.push(itemKey);
+          }
+        });
+      }
+      currentValue = props.targetOrder === 'unshift' ? itemsToBeMoved.concat(currentValue) : currentValue.concat(itemsToBeMoved);
+    }
+    state.rightDisabled = false;
+    emit('update:modelValue', currentValue);
+    emit('change', currentValue, 'right', state.leftChecked);
+  };
+};
+export var clearQuery = function clearQuery(refs) {
+  return function (which) {
+    if (which === 'left') {
+      refs.leftPanel.state.query = '';
+    } else if (which === 'right') {
+      refs.rightPanel.state.query = '';
+    }
+  };
+};
+export var logicFun = function logicFun(_ref7) {
+  var props = _ref7.props,
+    emit = _ref7.emit,
+    state = _ref7.state;
+  return function (_ref8) {
+    var event = _ref8.event,
+      isAdd = _ref8.isAdd,
+      pullMode = _ref8.pullMode;
+    var currentValue = props.modelValue.slice();
+    var movedKeys = [];
+    if (pullMode) {
+      currentValue.splice(event.newIndex, 0, currentValue.splice(event.oldIndex, 1)[0]);
+    } else {
+      var key = isAdd ? state.targetData[event.oldIndex][props.props.key] : state.sourceData[event.oldIndex][props.props.key];
+      var index = isAdd ? state.rightChecked.indexOf(key) : state.leftChecked.indexOf(key);
+      var valueIndex = currentValue.indexOf(key);
+      if (isAdd) {
+        ~valueIndex && currentValue.splice(valueIndex, 1);
+      } else {
+        !~valueIndex && currentValue.splice(event.newIndex, 0, key);
+      }
+      if (~index) {
+        isAdd ? state.rightChecked.splice(index, 1) : state.leftChecked.splice(index, 1);
+      }
+      movedKeys = [key];
+    }
+    state.rightChecked = state.rightChecked.slice(0);
+    emit('update:modelValue', currentValue);
+    emit('change', currentValue, 'left', movedKeys);
+  };
+};
+export var sortableEvent = function sortableEvent(_ref9) {
+  var api = _ref9.api,
+    droppanel = _ref9.droppanel,
+    props = _ref9.props,
+    queryDom = _ref9.queryDom,
+    refs = _ref9.refs;
+  return function () {
+    if (props.dropConfig) {
+      var leftPanel = refs.leftPanel.$el.querySelector(droppanel);
+      var Sortable = props.dropConfig.plugin;
+      new Sortable(leftPanel, {
+        group: 'sorting',
+        handle: queryDom,
+        sort: false,
+        filter: '.is-disabled',
+        onAdd: function onAdd(event) {
+          api.logicFun({
+            event: event,
+            isAdd: true
+          });
+        },
+        onRemove: function onRemove(event) {
+          api.logicFun({
+            event: event,
+            isAdd: false
+          });
+        }
+      });
+      var rightPanle = refs.rightPanel.$el.querySelector(droppanel);
+      new Sortable(rightPanle, {
+        group: 'sorting',
+        handle: queryDom,
+        sort: true,
+        filter: '.is-disabled',
+        onUpdate: function onUpdate(event) {
+          if (event.pullMode) {
+            return;
+          }
+          api.logicFun({
+            event: event,
+            pullMode: 'sort'
+          });
+        }
+      });
+    }
+  };
+};
+export var getLeftCheckedData = function getLeftCheckedData(_ref10) {
+  var props = _ref10.props,
+    state = _ref10.state;
+  return function () {
+    return state.sourceData.filter(function (item) {
+      return !item[props.props.disabled];
+    });
+  };
+};
+export var getRightCheckedData = function getRightCheckedData(_ref11) {
+  var props = _ref11.props,
+    state = _ref11.state;
+  return function () {
+    return state.targetData.filter(function (item) {
+      return !item[props.props.disabled];
+    });
+  };
+};
+export var recursiveData = function recursiveData(_ref12) {
+  var api = _ref12.api,
+    props = _ref12.props,
+    state = _ref12.state;
+  return function (data, isCasader, sign) {
+    var propChildren = props.treeOp && props.treeOp.props && props.treeOp.props.children || 'children';
+    var values = props.modelValue.slice();
+    var key = props.props.key;
+    data.forEach(function (obj) {
+      var isChecked = ~values.indexOf(obj[key]);
+      if (sign && !isCasader) {
+        state.treeData.push(obj);
+      } else {
+        if (isChecked) {
+          state.treeData.push(obj);
+        }
+      }
+      if (obj[propChildren] && obj[propChildren].length > 0) {
+        api.recursiveData(obj[propChildren], isCasader, isChecked ? true : false);
+      }
+    });
+  };
+};

package/transfer/vue.js

@@ -0,0 +1,138 @@
+import { getObj, getSourceData, recursiveData, getLeftCheckedData, getRightCheckedData, getTargetData, logicFun, onSourceCheckedChange, onTargetCheckedChange, addToLeft, addToRight, clearQuery, sortableEvent } from './index';
+export var api = ['state', 'onSourceCheckedChange', 'onTargetCheckedChange', 'addToLeft', 'addToRight', 'clearQuery'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api,
+    props = _ref.props,
+    h = _ref.h,
+    slots = _ref.slots;
+  return reactive({
+    leftChecked: [],
+    rightChecked: [],
+    rightData: computed(function () {
+      return api.getRightCheckedData();
+    }),
+    leftData: computed(function () {
+      return api.getLeftCheckedData();
+    }),
+    dataObj: computed(function () {
+      return api.getObj();
+    }),
+    sourceData: computed(function () {
+      return api.getSourceData();
+    }),
+    targetData: computed(function () {
+      return api.getTargetData();
+    }),
+    hasButtonTexts: computed(function () {
+      return props.buttonTexts.length === 2;
+    }),
+    treeData: [],
+    sourceTreeData: [],
+    isToLeft: false,
+    optionRender: computed(function () {
+      return function (option) {
+        if (props.renderContent) {
+          return props.renderContent(h, option);
+        }
+        if (slots["default"]) {
+          return slots["default"]({
+            option: option
+          });
+        }
+        return h('span', option[props.props.label] || option[props.props.key]);
+      };
+    })
+  });
+};
+export var renderless = function renderless(props, _ref2, _ref3) {
+  var computed = _ref2.computed,
+    onMounted = _ref2.onMounted,
+    reactive = _ref2.reactive,
+    h = _ref2.h;
+  var $prefix = _ref3.$prefix,
+    emit = _ref3.emit,
+    refs = _ref3.refs,
+    parent = _ref3.parent,
+    slots = _ref3.slots;
+  var api = {};
+  var Tree = $prefix + 'Tree';
+  var Table = $prefix + 'Table';
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api,
+    props: props,
+    h: h,
+    slots: slots
+  });
+  var _parent$$constants = parent.$constants,
+    DROPPANEL = _parent$$constants.DROPPANEL,
+    TRANSFERPANEL = _parent$$constants.TRANSFERPANEL;
+  Object.assign(api, {
+    state: state,
+    $slots: parent.$slots,
+    getObj: getObj(props),
+    clearQuery: clearQuery(refs),
+    getSourceData: getSourceData({
+      props: props,
+      Tree: Tree
+    }),
+    addToLeft: addToLeft({
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    getLeftCheckedData: getLeftCheckedData({
+      props: props,
+      state: state
+    }),
+    getRightCheckedData: getRightCheckedData({
+      props: props,
+      state: state
+    }),
+    addToRight: addToRight({
+      emit: emit,
+      refs: refs,
+      props: props,
+      state: state,
+      Tree: Tree
+    }),
+    onTargetCheckedChange: onTargetCheckedChange({
+      emit: emit,
+      state: state
+    }),
+    onSourceCheckedChange: onSourceCheckedChange({
+      emit: emit,
+      state: state
+    }),
+    logicFun: logicFun({
+      props: props,
+      emit: emit,
+      state: state
+    }),
+    getTargetData: getTargetData({
+      props: props,
+      state: state,
+      order: parent.TARGETORDER,
+      Tree: Tree,
+      Table: Table
+    }),
+    recursiveData: recursiveData({
+      api: api,
+      props: props,
+      state: state
+    }),
+    sortableEvent: sortableEvent({
+      api: api,
+      droppanel: DROPPANEL,
+      props: props,
+      queryDom: TRANSFERPANEL,
+      refs: refs,
+      state: state
+    })
+  });
+  onMounted(api.sortableEvent);
+  return api;
+};