@opentiny/vue-renderless 3.1.0-alpha.0

package/tree/vue.js

@@ -0,0 +1,268 @@
+import debounce from '@opentiny/vue-renderless/common/deps/debounce';
+import { computedShowEmptyText, closeMenu, setChildren, getChildren, computedTreeItemArray, computedIsEmpty, watchDefaultCheckedKeys, watchDefaultExpandedKeys, watchData, watchCheckboxItems, watchCheckStrictly, created, mounted, updated, filter, getNode, remove, append, getNodeKey, getNodePath, getHalfCheckedNodes, getHalfCheckedKeys, getCheckedNodes, getCheckedKeys, getCurrentNode, getCurrentKey, setCheckedNodes, setCheckedKeys, setChecked, setCurrentNode, setCurrentKey, insertBefore, insertAfter, handleNodeExpand, updateKeyChildren, initTabIndex, handleKeydown, setCurrentRadio, expandAllNodes, dragStart, dragOver, dragEnd, clearCurrentStore, initIsCurrent, beforeUnmount, wrapMounted } from './index';
+export var api = ['state', 'closeMenu', 'filter', 'getNodeKey', 'getNodePath', 'getCheckedNodes', 'getCheckedKeys', 'getCurrentNode', 'getCurrentKey', 'setCheckedNodes', 'setCheckedKeys', 'setChecked', 'getHalfCheckedNodes', 'getHalfCheckedKeys', 'setCurrentNode', 'setCurrentKey', 'getNode', 'remove', 'append', 'insertBefore', 'insertAfter', 'handleNodeExpand', 'updateKeyChildren', 'initTabIndex', 'handleKeydown', 'setCurrentRadio', 'expandAllNodes', 'clearCurrentStore'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    emitter = _ref.emitter,
+    props = _ref.props,
+    computed = _ref.computed,
+    api = _ref.api;
+  var state = reactive({
+    root: null,
+    store: null,
+    treeItems: null,
+    currentNode: null,
+    checkboxItems: [],
+    emitter: emitter(),
+    expandIcon: props.expandIcon,
+    shrinkIcon: props.shrinkIcon,
+    expandIconColor: props.expandIconColor,
+    shrinkIconColor: props.shrinkIconColor,
+    dragState: {
+      showDropIndicator: false,
+      draggingNode: null,
+      dropNode: null,
+      allowDrop: true
+    },
+    currentRadio: {
+      value: null
+    },
+    children: computed({
+      get: function get() {
+        return api.getChildren(props, state);
+      },
+      set: function set(data) {
+        return api.setChildren(data);
+      }
+    }),
+    treeItemArray: computed(function () {
+      return api.computedTreeItemArray(props, state);
+    }),
+    isEmpty: computed(function () {
+      return api.computedIsEmpty(props, state);
+    }),
+    showEmptyText: computed(function () {
+      return api.computedShowEmptyText(props, state);
+    }),
+    currentStore: {
+      flag: false,
+      node: null
+    }
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var state = _ref2.state,
+    dispatch = _ref2.dispatch,
+    broadcast = _ref2.broadcast,
+    props = _ref2.props,
+    vm = _ref2.vm,
+    constants = _ref2.constants,
+    t = _ref2.t,
+    emit = _ref2.emit,
+    refs = _ref2.refs;
+  return {
+    state: state,
+    dispatch: dispatch,
+    broadcast: broadcast,
+    setChildren: setChildren(props),
+    getChildren: getChildren(),
+    computedTreeItemArray: computedTreeItemArray(),
+    computedIsEmpty: computedIsEmpty(),
+    watchDefaultCheckedKeys: watchDefaultCheckedKeys(state),
+    watchData: watchData(state),
+    watchCheckboxItems: watchCheckboxItems(state),
+    watchCheckStrictly: watchCheckStrictly(state),
+    updated: updated({
+      vm: vm,
+      state: state
+    }),
+    filter: filter({
+      props: props,
+      state: state
+    }),
+    getNodeKey: getNodeKey(props),
+    getNodePath: getNodePath({
+      props: props,
+      state: state
+    }),
+    getCheckedNodes: getCheckedNodes(state),
+    getCheckedKeys: getCheckedKeys(state),
+    getCurrentNode: getCurrentNode(state),
+    setCheckedNodes: setCheckedNodes({
+      props: props,
+      state: state
+    }),
+    setCheckedKeys: setCheckedKeys({
+      props: props,
+      state: state
+    }),
+    setChecked: setChecked(state),
+    getHalfCheckedNodes: getHalfCheckedNodes(state),
+    getHalfCheckedKeys: getHalfCheckedKeys(state),
+    setCurrentNode: setCurrentNode({
+      props: props,
+      state: state
+    }),
+    setCurrentKey: setCurrentKey({
+      props: props,
+      state: state
+    }),
+    getNode: getNode(state),
+    remove: remove(state),
+    append: append(state),
+    insertBefore: insertBefore(state),
+    insertAfter: insertAfter(state),
+    updateKeyChildren: updateKeyChildren({
+      props: props,
+      state: state
+    }),
+    initTabIndex: initTabIndex({
+      vm: vm,
+      state: state
+    }),
+    handleKeydown: handleKeydown({
+      vm: vm,
+      state: state
+    }),
+    computedShowEmptyText: computedShowEmptyText({
+      constants: constants,
+      t: t
+    }),
+    setCurrentRadio: setCurrentRadio({
+      props: props,
+      state: state
+    }),
+    expandAllNodes: expandAllNodes({
+      state: state
+    }),
+    dragStart: dragStart({
+      props: props,
+      state: state,
+      emit: emit
+    }),
+    dragOver: dragOver({
+      props: props,
+      state: state,
+      emit: emit,
+      refs: refs,
+      vm: vm
+    }),
+    dragEnd: dragEnd({
+      state: state,
+      emit: emit
+    }),
+    clearCurrentStore: clearCurrentStore(state),
+    initIsCurrent: debounce(20, initIsCurrent({
+      props: props,
+      state: state
+    }))
+  };
+};
+var initWatcher = function initWatcher(_ref3) {
+  var watch = _ref3.watch,
+    props = _ref3.props,
+    api = _ref3.api;
+  watch(function () {
+    return props.defaultCheckedKeys;
+  }, api.watchDefaultCheckedKeys);
+  watch(function () {
+    return props.defaultExpandedKeys;
+  }, api.watchDefaultExpandedKeys);
+  watch(function () {
+    return props.defaultExpandedKeysHighlight;
+  }, api.initIsCurrent);
+  watch(function () {
+    return props.data;
+  }, api.watchData);
+  watch(function () {
+    return props.checkboxItems;
+  }, api.watchCheckboxItems);
+  watch(function () {
+    return props.checkStrictly;
+  }, api.watchCheckStrictly);
+  watch(function () {
+    return props.defaultCheckedKeys;
+  }, api.setCurrentRadio, {
+    immediate: true
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    onMounted = _ref4.onMounted,
+    onUpdated = _ref4.onUpdated,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch,
+    provide = _ref4.provide,
+    onBeforeUnmount = _ref4.onBeforeUnmount;
+  var vm = _ref5.vm,
+    t = _ref5.t,
+    refs = _ref5.refs,
+    emit = _ref5.emit,
+    constants = _ref5.constants,
+    broadcast = _ref5.broadcast,
+    dispatch = _ref5.dispatch,
+    service = _ref5.service,
+    emitter = _ref5.emitter,
+    nextTick = _ref5.nextTick;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    emitter: emitter,
+    props: props,
+    computed: computed,
+    api: api
+  });
+  provide('parentEmitter', state.emitter);
+  Object.assign(api, initApi({
+    state: state,
+    dispatch: dispatch,
+    broadcast: broadcast,
+    props: props,
+    vm: vm,
+    constants: constants,
+    t: t,
+    emit: emit,
+    refs: refs
+  }), {
+    closeMenu: closeMenu(state),
+    mounted: mounted({
+      api: api,
+      vm: vm
+    }),
+    created: created({
+      api: api,
+      props: props,
+      state: state
+    }),
+    getCurrentKey: getCurrentKey({
+      api: api,
+      props: props
+    }),
+    handleNodeExpand: handleNodeExpand(emit),
+    beforeUnmount: beforeUnmount({
+      api: api,
+      vm: vm
+    }),
+    wrapMounted: wrapMounted({
+      api: api,
+      props: props,
+      service: service
+    }),
+    watchDefaultExpandedKeys: watchDefaultExpandedKeys({
+      state: state,
+      api: api,
+      nextTick: nextTick
+    })
+  });
+  api.created();
+  initWatcher({
+    watch: watch,
+    props: props,
+    api: api
+  });
+  onMounted(api.wrapMounted);
+  onUpdated(api.updated);
+  onBeforeUnmount(api.beforeUnmount);
+  return api;
+};

package/tree-menu/index.js

@@ -0,0 +1,124 @@
+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; }
+export var initData = function initData(_ref) {
+  var state = _ref.state,
+    props = _ref.props,
+    service = _ref.service,
+    api = _ref.api;
+  return function () {
+    if (props.data) {
+      state.data = props.data;
+      return;
+    }
+    if (typeof service.getMenuDataSync === 'function') {
+      var menuData = service.getMenuDataSync();
+      state.data = api.setMenuKey({
+        newData: [],
+        menuData: menuData
+      });
+    }
+  };
+};
+export var setMenuKey = function setMenuKey(api) {
+  return function (_ref2) {
+    var newData = _ref2.newData,
+      menuData = _ref2.menuData;
+    Array.isArray(menuData) && menuData.forEach(function (data) {
+      var item = {};
+      Object.keys(data).forEach(function (key) {
+        if (key === 'name') {
+          item.label = data[key];
+        } else if (key === 'siteNodeId') {
+          item.id = data[key];
+        } else if (key === 'url' && data[key]) {
+          if (data[key].indexOf('#') === -1) {
+            item[key] = '#/' + data[key];
+          } else {
+            item[key] = data[key];
+          }
+        } else if (key === 'children' && data[key]) {
+          item.children = api.setMenuKey({
+            newData: [],
+            menuData: data.children
+          });
+        } else {
+          item[key] = data[key];
+        }
+      });
+      newData.push(_objectSpread(_objectSpread({}, data), item));
+    });
+    return newData;
+  };
+};
+export var filterNode = function filterNode() {
+  return function (value, data) {
+    if (!value) return true;
+    return data.label.indexOf(value) !== -1;
+  };
+};
+export var watchFilterText = function watchFilterText(refs) {
+  return function (value) {
+    refs.tree.filter(value);
+  };
+};
+export var nodeDragStart = function nodeDragStart(emit) {
+  return function (node, event) {
+    emit('node-drag-start', node, event);
+  };
+};
+export var nodeDragEnter = function nodeDragEnter(emit) {
+  return function (dragNode, dropNode, event) {
+    emit('node-drag-enter', dragNode, dropNode, event);
+  };
+};
+export var nodeDragOver = function nodeDragOver(emit) {
+  return function (dragNode, dropNode, event) {
+    emit('node-drag-over', dragNode, dropNode, event);
+  };
+};
+export var nodeDragEnd = function nodeDragEnd(emit) {
+  return function (dragNode, dropNode, dropType, event) {
+    emit('node-drag-end', dragNode, dropNode, dropType, event);
+  };
+};
+export var nodeDrop = function nodeDrop(emit) {
+  return function (dragNode, dropNode, dropType, event) {
+    emit('node-drop', dragNode, dropNode, dropType, event);
+  };
+};
+export var nodeExpand = function nodeExpand(emit) {
+  return function (nodeData, node) {
+    emit('node-expand', nodeData, node);
+  };
+};
+export var nodeCollapse = function nodeCollapse(emit) {
+  return function (nodeData, node) {
+    emit('node-collapse', nodeData, node);
+  };
+};
+export var nodeClick = function nodeClick(emit) {
+  return function (nodeData, node) {
+    emit('node-click', nodeData, node);
+  };
+};
+export var checkChange = function checkChange(emit) {
+  return function (data, checked, indeterminate) {
+    emit('check-change', data, checked, indeterminate);
+  };
+};
+export var check = function check(emit) {
+  return function (data, checkedStatus) {
+    emit('check', data, checkedStatus);
+  };
+};
+export var currentChange = function currentChange(emit) {
+  return function (data, node) {
+    emit('current-change', data, node);
+  };
+};
+export var getTitle = function getTitle(props) {
+  return function (label) {
+    return props.showTitle ? label : '';
+  };
+};

package/tree-menu/vue.js

@@ -0,0 +1,60 @@
+import { initData, setMenuKey, filterNode, watchFilterText, nodeDragStart, nodeDragEnter, nodeDragOver, nodeDragEnd, nodeDrop, nodeExpand, nodeCollapse, nodeClick, checkChange, check, currentChange, getTitle } from './index';
+export var api = ['state', 't', 'initData', 'setMenuKey', 'filterNode', 'nodeDragStart', 'nodeDragEnter', 'nodeDragOver', 'nodeDragEnd', 'nodeDrop', 'nodeExpand', 'nodeCollapse', 'nodeClick', 'checkChange', 'check', 'currentChange', 'getTitle'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var watch = _ref.watch,
+    reactive = _ref.reactive,
+    onMounted = _ref.onMounted;
+  var t = _ref2.t,
+    service = _ref2.service,
+    refs = _ref2.refs,
+    emit = _ref2.emit;
+  service = service || {
+    base: {}
+  };
+  service = {
+    getMenuDataSync: props.getMenuDataSync || service.base.getMenuDataSync
+  };
+  var state = reactive({
+    data: [],
+    filterText: ''
+  });
+  Object.assign(api, {
+    t: t,
+    state: state,
+    check: check(emit),
+    filterNode: filterNode(),
+    nodeDrop: nodeDrop(emit),
+    nodeClick: nodeClick(emit),
+    nodeExpand: nodeExpand(emit),
+    nodeDragEnd: nodeDragEnd(emit),
+    checkChange: checkChange(emit),
+    nodeCollapse: nodeCollapse(emit),
+    nodeDragOver: nodeDragOver(emit),
+    nodeDragStart: nodeDragStart(emit),
+    nodeDragEnter: nodeDragEnter(emit),
+    currentChange: currentChange(emit),
+    watchFilterText: watchFilterText(refs),
+    getTitle: getTitle(props),
+    setMenuKey: setMenuKey(api),
+    initData: initData({
+      state: state,
+      props: props,
+      service: service,
+      api: api
+    })
+  });
+  watch(function () {
+    return props.data;
+  }, function (value) {
+    return state.data = value;
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return state.filterText;
+  }, api.watchFilterText, {
+    deep: true
+  });
+  onMounted(api.initData);
+  return api;
+};