@opentiny/vue-renderless 3.1.0-alpha.0

package/link-menu/index.js

@@ -0,0 +1,146 @@
+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 { mapTree } from '@opentiny/vue-renderless/grid/static';
+import { copyArray } from '@opentiny/vue-renderless/common/object';
+export var dialogTitle = function dialogTitle(_ref) {
+  var constants = _ref.constants,
+    props = _ref.props,
+    t = _ref.t;
+  return function () {
+    return props.title || t(constants.DIALOG_TITLE);
+  };
+};
+export var showDialog = function showDialog(state) {
+  return function () {
+    return state.boxVisibility = true;
+  };
+};
+export var hideDialog = function hideDialog(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    vm = _ref2.vm,
+    props = _ref2.props;
+  return function () {
+    if (!props.keepSelectedNodes) {
+      state.currentCheckNode.forEach(function (item) {
+        var isNode = state.listItem.filter(function (data) {
+          return data.id === item.id;
+        });
+        if (isNode.length) {
+          vm.$refs.tree.setChecked(item, true, true);
+          if (item.disabled !== undefined) {
+            item.disabled = false;
+          }
+        } else {
+          vm.$refs.tree.setChecked(item, false, true);
+        }
+      });
+      state.getNodeValue = copyArray(state.listItem);
+      if (state.getNodeValue.length === props.maxItem) {
+        api.disabledTreeNode(state.getNodeValue, true);
+      } else if (state.getNodeValue.length < props.maxItem) {
+        api.disabledTreeNode(state.getNodeValue, false);
+      }
+      state.currentCheckNode = [];
+    }
+    state.boxVisibility = false;
+  };
+};
+export var sureNodevalue = function sureNodevalue(state) {
+  return function () {
+    state.listItem = state.getNodeValue.slice();
+    state.currentCheckNode = [];
+    state.boxVisibility = false;
+  };
+};
+export var filterNode = function filterNode() {
+  return function (value, data) {
+    return data.label.indexOf(value) !== -1;
+  };
+};
+export var getValue = function getValue(_ref3) {
+  var api = _ref3.api,
+    props = _ref3.props,
+    state = _ref3.state;
+  return function (value) {
+    if (!props.keepSelectedNodes) {
+      state.currentCheckNode.push(value);
+    }
+    var index = -1;
+    state.getNodeValue.forEach(function (data, indexx) {
+      if (data.id === value.id) {
+        index = indexx;
+      }
+    });
+    index !== -1 ? state.getNodeValue.splice(index, 1) : state.getNodeValue.push(value);
+    if (state.getNodeValue.length === props.maxItem) {
+      api.disabledTreeNode(state.getNodeValue, true);
+    } else if (state.getNodeValue.length < props.maxItem) {
+      api.disabledTreeNode(state.getNodeValue, false);
+    }
+  };
+};
+export var disabledTreeNode = function disabledTreeNode(state) {
+  return function (arr, isDisabled) {
+    state.datas.forEach(function (item) {
+      if (!item.children) {
+        var index = arr.filter(function (data) {
+          return data.id === item.id;
+        });
+        if (!index.length) {
+          item.disabled = isDisabled;
+        }
+      } else {
+        item.children.forEach(function (item) {
+          var index = arr.filter(function (data) {
+            return data.id === item.id;
+          });
+          if (!index.length) {
+            item.disabled = isDisabled;
+          }
+        });
+      }
+    });
+  };
+};
+export var initData = function initData(_ref4) {
+  var state = _ref4.state,
+    props = _ref4.props,
+    service = _ref4.service,
+    api = _ref4.api;
+  return function () {
+    var data = props.data;
+    if (!data && typeof service.getMenuDataSync === 'function') {
+      var menuData = service.getMenuDataSync();
+      data = api.setMenuKey({
+        newData: [],
+        menuData: menuData
+      });
+    }
+    state.datas = mapTree(data || [], function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        disabled: false
+      });
+    });
+  };
+};
+export var disabledParentNode = function disabledParentNode(state) {
+  return function () {
+    state.datas.forEach(function (item) {
+      if (item.children) {
+        item.disabled = true;
+      }
+    });
+  };
+};
+export var initService = function initService(_ref5) {
+  var props = _ref5.props,
+    service = _ref5.service;
+  var $service = service || {
+    base: {}
+  };
+  return {
+    getMenuDataSync: props.getMenuDataSync || $service.base.getMenuDataSync
+  };
+};

package/link-menu/vue.js

@@ -0,0 +1,138 @@
+import { initData, dialogTitle, disabledParentNode, filterNode, getValue, hideDialog, showDialog, sureNodevalue, disabledTreeNode, initService } from './index';
+import { copyArray } from '@opentiny/vue-renderless/common/object';
+import { setMenuKey } from '@opentiny/vue-renderless/tree-menu';
+export var api = ['state', 'initData', 'filterNode', 'getValue', 'hideDialog', 'setMenuKey', 'showDialog', 'sureNodevalue'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api;
+  var state = reactive({
+    filterText: '',
+    datas: [],
+    disabled: false,
+    alertShow: false,
+    boxVisibility: false,
+    listItem: [],
+    getNodeValue: [],
+    currentCheckNode: [],
+    titles: computed(function () {
+      return api.dialogTitle();
+    })
+  });
+  return state;
+};
+var initWatch = function initWatch(_ref2) {
+  var watch = _ref2.watch,
+    state = _ref2.state,
+    props = _ref2.props,
+    nextTick = _ref2.nextTick,
+    vm = _ref2.vm;
+  watch(function () {
+    return state.filterText;
+  }, function (value) {
+    return nextTick(function () {
+      return vm.$refs.tree.filter(value);
+    });
+  });
+  watch(function () {
+    return props.data;
+  }, function (value) {
+    if (value) {
+      var changeData = copyArray(value);
+      changeData.forEach(function (item) {
+        if (!item.children) {
+          item.disabled = false;
+        } else {
+          item.children.forEach(function (item) {
+            item.disabled = false;
+          });
+        }
+      });
+      state.datas = changeData;
+    }
+  }, {
+    immediate: true
+  });
+};
+var initApi = function initApi(_ref3) {
+  var api = _ref3.api,
+    state = _ref3.state,
+    constants = _ref3.constants,
+    props = _ref3.props,
+    t = _ref3.t,
+    service = _ref3.service,
+    vm = _ref3.vm;
+  Object.assign(api, {
+    state: state,
+    filterNode: filterNode(),
+    showDialog: showDialog(state),
+    sureNodevalue: sureNodevalue(state),
+    disabledTreeNode: disabledTreeNode(state),
+    disabledParentNode: disabledParentNode(state),
+    dialogTitle: dialogTitle({
+      constants: constants,
+      props: props,
+      t: t
+    }),
+    setMenuKey: setMenuKey(api),
+    getValue: getValue({
+      api: api,
+      state: state,
+      props: props
+    }),
+    initData: initData({
+      state: state,
+      props: props,
+      service: service,
+      api: api
+    }),
+    hideDialog: hideDialog({
+      api: api,
+      state: state,
+      vm: vm,
+      props: props
+    })
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    onMounted = _ref4.onMounted,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch;
+  var t = _ref5.t,
+    vm = _ref5.vm,
+    service = _ref5.service,
+    constants = _ref5.constants,
+    nextTick = _ref5.nextTick;
+  service = initService({
+    props: props,
+    service: service
+  });
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api
+  });
+  initWatch({
+    watch: watch,
+    state: state,
+    props: props,
+    nextTick: nextTick,
+    vm: vm
+  });
+  onMounted(function () {
+    api.initData();
+    api.disabledParentNode(state);
+  });
+  initApi({
+    api: api,
+    state: state,
+    constants: constants,
+    props: props,
+    t: t,
+    service: service,
+    vm: vm
+  });
+  return api;
+};

package/list/index.js

@@ -0,0 +1,13 @@
+export var clickList = function clickList(_ref) {
+  var emit = _ref.emit,
+    props = _ref.props;
+  return function () {
+    var list = {
+      id: props.id,
+      content: props.content,
+      subtext: props.subText,
+      contentdes: props.contentDes
+    };
+    emit('click', list);
+  };
+};

package/list/vue.js

@@ -0,0 +1,17 @@
+import { clickList } from './index';
+export var api = ['state', 'clickList'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var reactive = _ref.reactive;
+  var emit = _ref2.emit;
+  var state = reactive({
+    test: '1'
+  });
+  var api = {
+    state: state,
+    clickList: clickList({
+      emit: emit,
+      props: props
+    })
+  };
+  return api;
+};

package/loading/index.js

@@ -0,0 +1,29 @@
+import afterLeave from '@opentiny/vue-renderless/common/deps/after-leave';
+import { removeClass } from '@opentiny/vue-renderless/common/deps/dom';
+export var handleAfterLeave = function handleAfterLeave(emit) {
+  return function () {
+    emit('after-leave');
+  };
+};
+export var setText = function setText(state) {
+  return function (text) {
+    state.text = text;
+  };
+};
+export var close = function close(_ref) {
+  var state = _ref.state,
+    constants = _ref.constants,
+    vm = _ref.vm;
+  return function () {
+    afterLeave(vm, function () {
+      var target = state.fullscreen || state.body ? document.body : state.target;
+      removeClass(target, constants.PARENT_RELATIVE_CLS);
+      removeClass(target, constants.PARENT_HIDDEN_CLS);
+      if (vm.$el && vm.$el.parentNode) {
+        vm.$el.parentNode.removeChild(vm.$el);
+      }
+      state.closed = true;
+    }, 300);
+    state.visible = false;
+  };
+};

package/loading/vue.js

@@ -0,0 +1,28 @@
+import { handleAfterLeave, setText, close } from './index';
+export var api = ['state', 'handleAfterLeave', 'setText', 'close'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var reactive = _ref.reactive;
+  var constants = _ref2.constants,
+    vm = _ref2.vm,
+    emit = _ref2.emit;
+  var state = reactive({
+    text: null,
+    spinner: null,
+    visible: false,
+    customClass: '',
+    background: null,
+    fullscreen: true,
+    closed: false
+  });
+  var api = {
+    state: state,
+    setText: setText(state),
+    handleAfterLeave: handleAfterLeave(emit),
+    close: close({
+      state: state,
+      constants: constants,
+      vm: vm
+    })
+  };
+  return api;
+};

package/milestone/index.js

@@ -0,0 +1,92 @@
+var hexToRgb = function hexToRgb(hex) {
+  hex = hex.slice(1);
+  if (hex.length == 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  return {
+    r: parseInt(hex.slice(0, 2), 16),
+    g: parseInt(hex.slice(2, 4), 16),
+    b: parseInt(hex.slice(4, 6), 16)
+  };
+};
+export var handleClick = function handleClick(_ref) {
+  var emit = _ref.emit;
+  return function (_ref2) {
+    var index = _ref2.index,
+      node = _ref2.node;
+    emit('click', index, node);
+  };
+};
+export var flagOprate = function flagOprate(_ref3) {
+  var constants = _ref3.constants,
+    refs = _ref3.refs,
+    state = _ref3.state;
+  return function (_ref4) {
+    var event = _ref4.event,
+      over = _ref4.over,
+      text = _ref4.text;
+    var tooltip = refs.tooltip;
+    if (over) {
+      var textEl = event.target.querySelector(constants.FLAG_CONTENT_CLS);
+      state.tipContent = text;
+      tooltip.state.referenceElm = event.target;
+      tooltip.doDestroy();
+      tooltip.setExpectedState(true);
+      textEl && textEl.scrollWidth > textEl.clientWidth && tooltip.handleShowPopper();
+    } else {
+      tooltip.setExpectedState(false);
+      tooltip.handleClosePopper();
+    }
+  };
+};
+export var getMileIcon = function getMileIcon(_ref5) {
+  var constants = _ref5.constants,
+    props = _ref5.props;
+  return function (node) {
+    var status = props.milestonesStatus[node[props.statusField]] || constants.DEFAULT_COLOR;
+    var isCompleted = node[props.statusField] === props.completedField;
+    var switchColor = isCompleted && !props.solid;
+    var _hexToRgb = hexToRgb(status),
+      r = _hexToRgb.r,
+      g = _hexToRgb.g,
+      b = _hexToRgb.b;
+    return {
+      background: switchColor ? constants.DEFAULT_BACK_COLOR : status,
+      color: switchColor ? status : constants.DEFAULT_BACK_COLOR,
+      boxShadow: "rgba(".concat(r, ",").concat(g, ",").concat(b, ",.4) ").concat(constants.BOX_SHADOW_PX)
+    };
+  };
+};
+export var getMileContent = function getMileContent(props) {
+  return function (_ref6) {
+    var data = _ref6.data,
+      index = _ref6.index;
+    var content = data[props.flagBefore ? index : index + 1][props.flagField];
+    return Array.isArray(content) ? content : [];
+  };
+};
+export var getLineColor = function getLineColor(props) {
+  return function (status) {
+    var background = '';
+    if (status) {
+      if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(props.lineStyle)) {
+        background = props.lineStyle;
+      }
+      if (props.lineStyle === 2) {
+        background = props.milestonesStatus[status];
+      } else if (props.lineStyle === 1) {
+        background = status === props.completedField ? props.milestonesStatus[status] : '';
+      }
+    }
+    return {
+      background: background
+    };
+  };
+};
+export var handleFlagClick = function handleFlagClick(emit) {
+  return function (_ref7) {
+    var idx = _ref7.idx,
+      flag = _ref7.flag;
+    return emit('flagclick', idx, flag);
+  };
+};

package/milestone/vue.js

@@ -0,0 +1,31 @@
+import { handleClick, flagOprate, getMileIcon, getMileContent, getLineColor, handleFlagClick } from './index';
+export var api = ['state', 'showTip', 'handleClick', 'handleFlagClick', 'flagOprate', 'getMileIcon', 'getMileContent', 'getMileFlagStyle', 'getLineColor', 'getStatus'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var reactive = _ref.reactive;
+  var emit = _ref2.emit,
+    refs = _ref2.refs,
+    constants = _ref2.constants;
+  var state = reactive({
+    tipContent: ''
+  });
+  var api = {
+    state: state,
+    getLineColor: getLineColor(props),
+    getMileContent: getMileContent(props),
+    handleFlagClick: handleFlagClick(emit),
+    handleClick: handleClick({
+      emit: emit,
+      state: state
+    }),
+    getMileIcon: getMileIcon({
+      constants: constants,
+      props: props
+    }),
+    flagOprate: flagOprate({
+      constants: constants,
+      refs: refs,
+      state: state
+    })
+  };
+  return api;
+};