@opentiny/vue-renderless 3.1.0-alpha.0

package/nav-menu/index.js

@@ -0,0 +1,457 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import { isEmptyObject, isObject } from '@opentiny/vue-renderless/common/type';
+import PopupManager from '@opentiny/vue-renderless/common/deps/popup-manager';
+import { mapTree } from '@opentiny/vue-renderless/grid/static';
+import { transformTreeData } from '@opentiny/vue-renderless/common/array';
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+import { xss } from '@opentiny/vue-renderless/common/xss.js';
+var nextZIndex = PopupManager.nextZIndex;
+export var computedIsShowMore = function computedIsShowMore(_ref) {
+  var props = _ref.props,
+    state = _ref.state;
+  return function () {
+    return !/^(retract|fixed|hidden)$/.test(props.overflow) && state.more && state.more.length;
+  };
+};
+export var computedPopClass = function computedPopClass(state) {
+  return function () {
+    return !state.showMore && state.subMenus && state.subMenus.length === 1 ? 'single' : '';
+  };
+};
+export var computedSubMenus = function computedSubMenus(state) {
+  return function () {
+    var arr = state.subMenu;
+    if (state.subMenu && !isEmptyObject(state.subMenu)) {
+      if (!state.subMenu.map(function (item) {
+        return item.children && !isEmptyObject(item.children);
+      }).reduce(function (pre, cur) {
+        return pre || cur;
+      })) {
+        arr = [{
+          children: state.subMenu
+        }];
+      }
+    }
+    return arr;
+  };
+};
+export var computedMenuStyle = function computedMenuStyle(_ref2) {
+  var props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    var result = {
+      maxWidth: "".concat(state.width, "px")
+    };
+    if (props.overflow === 'retract') {
+      result.width = '0px';
+    }
+    return result;
+  };
+};
+export var computedPopStyle = function computedPopStyle(state) {
+  return function () {
+    return {
+      top: "".concat(state.popMenuTop, "px")
+    };
+  };
+};
+export var watchWidth = function watchWidth(_ref3) {
+  var api = _ref3.api,
+    nextTick = _ref3.nextTick;
+  return function () {
+    return nextTick(function () {
+      return api.classify();
+    });
+  };
+};
+var CloneObject = function () {
+  function CloneObject(json, props) {
+    _classCallCheck(this, CloneObject);
+    this.props = props;
+    if (json) {
+      this.data = this.getType(json);
+      this.traverse(json, this.data);
+    }
+  }
+  _createClass(CloneObject, [{
+    key: "traverse",
+    value: function traverse(node, newObject) {
+      if (/^(string|undefined)$/.test(_typeof(node)) || node === null) {
+        newObject = node;
+      } else if (Array.isArray(node)) {
+        this.traverseArray(node, newObject);
+      } else if (_typeof(node) === 'object') {
+        this.traverseObject(node, newObject);
+      }
+      return this;
+    }
+  }, {
+    key: "traverseArray",
+    value: function traverseArray(node, newObject) {
+      for (var i = 0; i < node.length; i++) {
+        newObject.push(this.getType(node[i]));
+        if (node[i] && _typeof(node[i]) === 'object') {
+          this.traverse(node[i], newObject[i]);
+        }
+      }
+    }
+  }, {
+    key: "traverseObject",
+    value: function traverseObject(node, newObject) {
+      var _this = this;
+      Object.keys(node).forEach(function (key) {
+        if (/^(name|url|route|title|name|children)$/.test(key)) {
+          var alias = key;
+          if (key === 'url') {
+            if (!(_this.props.prevent || _this.props.allowFullUrl)) {
+              alias = 'route';
+            }
+          }
+          if (key === 'name') {
+            alias = 'title';
+          }
+          newObject[alias] = _this.getType(node[key]);
+          if (newObject[alias] && _typeof(newObject[alias]) === 'object') {
+            _this.traverse(node[key], newObject[alias]);
+          }
+        }
+      });
+    }
+  }, {
+    key: "getType",
+    value: function getType(object) {
+      var result;
+      if (/^(string|undefined)$/.test(_typeof(object)) || object === null) {
+        result = object;
+      } else if (Array.isArray(object)) {
+        result = [];
+      } else if (_typeof(object) === 'object') {
+        result = {};
+      }
+      return result;
+    }
+  }]);
+  return CloneObject;
+}();
+export var initData = function initData(_ref4) {
+  var fetchMenuData = _ref4.fetchMenuData,
+    fields = _ref4.fields,
+    props = _ref4.props,
+    state = _ref4.state;
+  return function () {
+    var _ref5 = fields || {},
+      _ref5$textField = _ref5.textField,
+      textField = _ref5$textField === void 0 ? 'title' : _ref5$textField,
+      _ref5$urlField = _ref5.urlField,
+      urlField = _ref5$urlField === void 0 ? 'url' : _ref5$urlField,
+      _ref5$key = _ref5.key,
+      key = _ref5$key === void 0 ? 'id' : _ref5$key;
+    var parentKey = props.parentKey,
+      data = props.data;
+    var isFullUrl = function isFullUrl(url) {
+      return /^(https?:\/\/|\/\/)[\s\S]+$/.test(url);
+    };
+    var buildData = function buildData(item) {
+      var router = item[urlField] || item['route'];
+      return {
+        title: item[textField],
+        route: router ? router.replace(/^#\/?/, '') : null,
+        url: item.url,
+        id: item.id,
+        pid: item.pid,
+        isFullUrl: props.allowFullUrl && isFullUrl(router),
+        target: item.target
+      };
+    };
+    if (data) {
+      state.data = mapTree(parentKey ? transformTreeData(data, key, parentKey) : data, buildData);
+      return;
+    }
+    var menuData = props.fetchMenuData && fetchMenuData();
+    if (isObject(menuData) && menuData.then) {
+      menuData.then(function (data) {
+        state.data = mapTree(props.parentKey ? transformTreeData(data, key, props.parentKey) : data, buildData);
+      });
+      return;
+    }
+    if (!menuData) {
+      state.data = [];
+      return;
+    }
+    var arr = [];
+    if (menuData && menuData.length) {
+      var getMenuData = new CloneObject(menuData, props).data;
+      arr = _typeof(getMenuData) === 'object' && Array.isArray(getMenuData) ? getMenuData : [getMenuData];
+    }
+    state.data = mapTree(parentKey ? transformTreeData(arr, key, parentKey) : arr, buildData);
+  };
+};
+export var mounted = function mounted(_ref6) {
+  var api = _ref6.api,
+    props = _ref6.props,
+    router = _ref6.router,
+    route = _ref6.route,
+    state = _ref6.state;
+  return function () {
+    api.calcWidth();
+    on(window, 'resize', api.calcWidth);
+    if (router) {
+      state.afterEach = function () {
+        api.setActiveMenu(api.getSelectedIndex(route.path));
+      };
+      router.afterEach(state.afterEach);
+    }
+    props.data && props.data.length && route && api.setActiveMenu(api.getSelectedIndex(route.path));
+  };
+};
+export var unMounted = function unMounted(_ref7) {
+  var api = _ref7.api,
+    state = _ref7.state,
+    router = _ref7.router;
+  return function () {
+    if (router && router.afterHooks) {
+      var index = router.afterHooks.indexOf(state.afterEach);
+      router.afterHooks.splice(index, 1);
+    }
+    state.afterEach = null;
+    off(window, 'resize', api.calcWidth);
+  };
+};
+export var getSelectedIndex = function getSelectedIndex(state) {
+  return function (path) {
+    var length = state.data.length;
+    var index = -1;
+    if (path !== '/') {
+      path = path.replace(/^#?\//, '');
+      var exp = new RegExp('("url":"#/?' + path + '"|"url":"/?' + path + '"|"route":"/?' + path + '")', 'i');
+      for (var i = 0; i < length; i++) {
+        if (exp.test(JSON.stringify(state.data[i]))) {
+          index = i;
+          break;
+        }
+      }
+    }
+    return index;
+  };
+};
+export var showSetting = function showSetting(_ref8) {
+  var parent = _ref8.parent,
+    state = _ref8.state;
+  return function () {
+    state.isShowSetting = true;
+    var setting = parent.$el.querySelector('.more-setting');
+    setting.style.zIndex = nextZIndex();
+  };
+};
+export var willHideSetting = function willHideSetting(state) {
+  return function () {
+    return state.isShowSetting = false;
+  };
+};
+export var showSubMenu = function showSubMenu(_ref9) {
+  var api = _ref9.api,
+    nextTick = _ref9.nextTick,
+    parent = _ref9.parent,
+    state = _ref9.state;
+  return function (list, _ref10, event) {
+    var more = _ref10.more,
+      index = _ref10.index;
+    if (list || more) {
+      state.subMenu !== list ? api.hideSubMenu() : api.stopHideSubMenu();
+      state.showMore = !!more;
+      state.subMenu = list;
+      state.showPopmenu = true;
+      nextTick(function () {
+        var popmenu = parent.$el.querySelector('.popmenu');
+        if (popmenu) {
+          popmenu.style.zIndex = nextZIndex();
+          if (popmenu.classList.contains('single') && event) {
+            popmenu.style.left = "".concat(event.target.offsetLeft, "px");
+          } else {
+            popmenu.style.left = 0;
+          }
+          popmenu.style.height = 'auto';
+          popmenu.style.display = 'block';
+        }
+      });
+      if (index !== undefined) {
+        state.activeIndex = index;
+      }
+      if (more && list && list.length && state.subActiveIndex === -1) {
+        state.subActiveIndex = 0;
+      }
+    } else {
+      api.hideSubMenu();
+    }
+  };
+};
+export var hideSubMenu = function hideSubMenu(_ref11) {
+  var api = _ref11.api,
+    parent = _ref11.parent,
+    state = _ref11.state;
+  return function () {
+    api.stopHideSubMenu();
+    state.showMore = false;
+    state.showPopmenu = false;
+    state.activeIndex = -1;
+    state.subActiveIndex = -1;
+    var popmenu = parent.$el.querySelector('.popmenu');
+    popmenu.style.height = 'auto';
+    popmenu.style.display = 'none';
+  };
+};
+export var willHideSubMenu = function willHideSubMenu(_ref12) {
+  var api = _ref12.api,
+    state = _ref12.state;
+  return function () {
+    api.stopHideSubMenu();
+    state.timer = setTimeout(function () {
+      api.hideSubMenu();
+    }, 20);
+  };
+};
+export var stopHideSubMenu = function stopHideSubMenu(state) {
+  return function () {
+    clearTimeout(state.timer);
+  };
+};
+export var setSubMenu = function setSubMenu(state) {
+  return function (value, index) {
+    state.subActiveIndex = index;
+    state.subMenu = value;
+  };
+};
+export var isHide = function isHide(_ref13) {
+  var parent = _ref13.parent,
+    state = _ref13.state;
+  return function (event) {
+    return !state.width || event.offsetTop >= parent.$el.offsetHeight;
+  };
+};
+export var hidePopmenu = function hidePopmenu(api) {
+  return function (item) {
+    if (item.url || item.route) {
+      api.setActiveMenu(api.getSelectedIndex(item.url || item.route));
+      api.hideSubMenu();
+    }
+  };
+};
+export var clickMenu = function clickMenu(_ref14) {
+  var api = _ref14.api,
+    props = _ref14.props;
+  return function (item, index) {
+    if (item.url || item.route) {
+      if (props.beforeSkip) {
+        props.beforeSkip(item) && api.skip(item, true);
+      } else {
+        api.skip(item);
+      }
+    }
+    index !== undefined && api.setActiveMenu(index);
+    api.hidePopmenu(item);
+  };
+};
+export var skip = function skip(_ref15) {
+  var api = _ref15.api,
+    router = _ref15.router,
+    fields = _ref15.fields;
+  return function (item) {
+    var flag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (item.isFullUrl) {
+      var _ref16 = fields || {},
+        _ref16$urlField = _ref16.urlField,
+        urlField = _ref16$urlField === void 0 ? 'url' : _ref16$urlField;
+      var _router = item[urlField] || item['route'];
+      return window.open(xss.filterUrl(_router)).opener = null;
+    }
+    var address = !item.route || !flag ? api.getUrl(item).replace(/^#/, '') : item.route.replace(/^\/+/, '/').replace('#/', '');
+    if (address) {
+      return router.push(address);
+    } else {
+      return '';
+    }
+  };
+};
+export var getPoint = function getPoint(_ref17) {
+  var api = _ref17.api,
+    parent = _ref17.parent;
+  return function () {
+    var items = parent.$el.querySelectorAll('.menu>li');
+    var index = 0;
+    if (items) {
+      index = items.length;
+      for (var i = 0; i < items.length; i++) {
+        if (api.isHide(items[i])) {
+          index = index - (items.length - i);
+          break;
+        }
+      }
+    }
+    return index;
+  };
+};
+export var classify = function classify(_ref18) {
+  var api = _ref18.api,
+    props = _ref18.props,
+    state = _ref18.state;
+  return function () {
+    var isRetractOrFixed = /^(retract|fixed)$/.test(props.overflow);
+    var menuCount = isRetractOrFixed ? 0 : props.overflow === 'hidden' ? props.data.length : api.getPoint();
+    state.more = state.data.slice(menuCount);
+  };
+};
+export var calcWidth = function calcWidth(_ref19) {
+  var parent = _ref19.parent,
+    props = _ref19.props,
+    state = _ref19.state;
+  return function () {
+    var el = parent.$el;
+    var logoWidth = parent.$slots.logo ? el.querySelector('.slot-logo').offsetWidth : 0;
+    var toolbarWidth = parent.$slots.toolbar ? el.querySelector('.slot-toolbar').offsetWidth : 0;
+    var menuWidth = el.offsetWidth;
+    var width = props.overflow === 'retract' ? 0 : menuWidth - toolbarWidth - logoWidth;
+    width = width - 120 - (toolbarWidth ? 50 : 10) - (logoWidth ? 100 : 0);
+    state.width = width < 200 ? 0 : width;
+    state.popMenuTop = el.offsetHeight;
+  };
+};
+export var getTag = function getTag(props) {
+  return function (item) {
+    return item.url && 'a' || item.route && (!props.beforeSkip ? 'router-link' : 'a') || 'span';
+  };
+};
+export var getUrl = function getUrl() {
+  return function (item) {
+    return item.url || '';
+  };
+};
+export var getRoute = function getRoute(props) {
+  return function (item) {
+    return !props.beforeSkip ? "/".concat(item.route || '').replace(/^\/+/, '/').replace('#/', '') : '';
+  };
+};
+export var setActiveMenu = function setActiveMenu(state) {
+  return function (index) {
+    return state.selectedIndex = typeof index !== 'undefined' ? index : -1;
+  };
+};
+export var initService = function initService(_ref20) {
+  var props = _ref20.props,
+    service = _ref20.service;
+  var fetchMenuData = function fetchMenuData() {
+    return Promise.reject(new Error('[TINY Error][NavMenu] Prop fetchMenuData is not configured'));
+  };
+  var _ref21 = service || {},
+    _ref21$base = _ref21.base,
+    base = _ref21$base === void 0 ? {} : _ref21$base,
+    _ref21$setting = _ref21.setting,
+    setting = _ref21$setting === void 0 ? {} : _ref21$setting;
+  var _setting$options = setting.options,
+    options = _setting$options === void 0 ? {} : _setting$options;
+  return {
+    fetchMenuData: props.fetchMenuData || base.getMenuDataSync || fetchMenuData,
+    fields: props.fields || options.NavMenu
+  };
+};

package/nav-menu/vue.js

@@ -0,0 +1,187 @@
+import { computedIsShowMore, computedPopClass, computedSubMenus, computedMenuStyle, computedPopStyle, watchWidth, initData, mounted, unMounted, getSelectedIndex, showSetting, willHideSetting, showSubMenu, hideSubMenu, willHideSubMenu, stopHideSubMenu, setSubMenu, isHide, hidePopmenu, clickMenu, skip, getPoint, classify, calcWidth, getTag, getUrl, getRoute, setActiveMenu, initService } from './index';
+export var api = ['state', 'getSelectedIndex', 'showSetting', 'willHideSetting', 'showSubMenu', 'hideSubMenu', 'willHideSubMenu', 'stopHideSubMenu', 'setSubMenu', 'isHide', 'hidePopmenu', 'clickMenu', 'skip', 'getPoint', 'classify', 'calcWidth', 'getTag', 'getUrl', 'getRoute', 'setActiveMenu'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    api = _ref.api,
+    computed = _ref.computed;
+  return reactive({
+    data: [],
+    more: [],
+    width: -1,
+    popMenuTop: 0,
+    subMenu: [],
+    showMore: false,
+    showPopmenu: false,
+    timer: null,
+    activeIndex: -1,
+    subActiveIndex: -1,
+    selectedIndex: -1,
+    isShowSetting: false,
+    marginLeft: 0,
+    isShowMore: computed(function () {
+      return api.computedIsShowMore();
+    }),
+    popClass: computed(function () {
+      return api.computedPopClass();
+    }),
+    subMenus: computed(function () {
+      return api.computedSubMenus();
+    }),
+    menuStyle: computed(function () {
+      return api.computedMenuStyle();
+    }),
+    popStyle: computed(function () {
+      return api.computedPopStyle();
+    })
+  });
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    props = _ref2.props,
+    parent = _ref2.parent,
+    fetchMenuData = _ref2.fetchMenuData,
+    fields = _ref2.fields,
+    router = _ref2.router,
+    route = _ref2.route,
+    nextTick = _ref2.nextTick;
+  Object.assign(api, {
+    state: state,
+    getUrl: getUrl(),
+    getTag: getTag(props),
+    getRoute: getRoute(props),
+    setSubMenu: setSubMenu(state),
+    isHide: isHide({
+      parent: parent,
+      state: state
+    }),
+    setActiveMenu: setActiveMenu(state),
+    willHideSetting: willHideSetting(state),
+    stopHideSubMenu: stopHideSubMenu(state),
+    calcWidth: calcWidth({
+      parent: parent,
+      props: props,
+      state: state
+    }),
+    getSelectedIndex: getSelectedIndex(state),
+    showSetting: showSetting({
+      parent: parent,
+      state: state
+    }),
+    initData: initData({
+      fetchMenuData: fetchMenuData,
+      fields: fields,
+      props: props,
+      state: state
+    }),
+    computedIsShowMore: computedIsShowMore({
+      props: props,
+      state: state
+    }),
+    computedPopClass: computedPopClass(state),
+    computedSubMenus: computedSubMenus(state),
+    computedMenuStyle: computedMenuStyle({
+      props: props,
+      state: state
+    }),
+    computedPopStyle: computedPopStyle(state),
+    skip: skip({
+      api: api,
+      router: router,
+      fields: fields
+    }),
+    hidePopmenu: hidePopmenu(api),
+    getPoint: getPoint({
+      api: api,
+      parent: parent
+    }),
+    clickMenu: clickMenu({
+      api: api,
+      props: props
+    }),
+    unMounted: unMounted({
+      api: api,
+      state: state,
+      router: router
+    }),
+    mounted: mounted({
+      api: api,
+      props: props,
+      router: router,
+      route: route,
+      state: state
+    }),
+    classify: classify({
+      api: api,
+      props: props,
+      state: state
+    }),
+    watchWidth: watchWidth({
+      api: api,
+      nextTick: nextTick
+    }),
+    willHideSubMenu: willHideSubMenu({
+      api: api,
+      state: state
+    }),
+    hideSubMenu: hideSubMenu({
+      api: api,
+      parent: parent,
+      state: state
+    }),
+    showSubMenu: showSubMenu({
+      api: api,
+      nextTick: nextTick,
+      parent: parent,
+      state: state
+    })
+  });
+};
+export var renderless = function renderless(props, _ref3, _ref4) {
+  var computed = _ref3.computed,
+    onMounted = _ref3.onMounted,
+    onUnmounted = _ref3.onUnmounted,
+    reactive = _ref3.reactive,
+    watch = _ref3.watch;
+  var parent = _ref4.parent,
+    nextTick = _ref4.nextTick,
+    service = _ref4.service,
+    router = _ref4.router,
+    route = _ref4.route;
+  var api = {};
+  var _initService = initService({
+      props: props,
+      service: service
+    }),
+    fetchMenuData = _initService.fetchMenuData,
+    fields = _initService.fields;
+  var state = initState({
+    reactive: reactive,
+    api: api,
+    computed: computed
+  });
+  initApi({
+    api: api,
+    state: state,
+    props: props,
+    parent: parent,
+    fetchMenuData: fetchMenuData,
+    fields: fields,
+    router: router,
+    route: route,
+    nextTick: nextTick
+  });
+  api.initData();
+  watch(function () {
+    return state.width;
+  }, api.watchWidth, {
+    deep: true,
+    immediate: true
+  });
+  watch(function () {
+    return state.data;
+  }, api.watchWidth);
+  onMounted(api.mounted);
+  onUnmounted(api.unMounted);
+  return api;
+};