@jetlinks-web/components 2.0.2 → 2.0.3

package/es/ProLayout/SiderMenu/SiderMenu.js

@@ -0,0 +1,278 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createVNode as _createVNode, isVNode as _isVNode, Fragment as _Fragment } from "vue";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { LayoutSider as Sider, Menu } from 'ant-design-vue';
+import BaseMenu, { baseMenuProps } from './BaseMenu';
+import { defaultSettingProps } from '../defaultSettings';
+import PropTypes from 'ant-design-vue/es/_util/vue-types';
+import IconFont from '../../Icon';
+import { useRouteContext } from '../RouteContext';
+import { computed, unref } from 'vue';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export var siderMenuProps = _objectSpread(_objectSpread(_objectSpread({}, defaultSettingProps), baseMenuProps), {}, {
+  logo: {
+    type: [Object, String, Function],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  logoStyle: {
+    type: Object,
+    default: function _default() {
+      return undefined;
+    }
+  },
+  siderWidth: PropTypes.number.def(208),
+  headerHeight: PropTypes.number.def(48),
+  collapsedWidth: PropTypes.number.def(48),
+  menuHeaderRender: {
+    type: [Function, Object, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  menuContentRender: {
+    type: [Function, Object, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  menuExtraRender: {
+    type: [Function, Object, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  collapsedButtonRender: {
+    type: [Function, Object, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  breakpoint: {
+    type: [Object, Boolean],
+    default: function _default() {
+      return false;
+    }
+  },
+  splitMenus: PropTypes.looseBool,
+  fixed: PropTypes.looseBool,
+  hide: PropTypes.looseBool,
+  matchMenuKeys: {
+    type: Array,
+    default: function _default() {
+      return [];
+    }
+  },
+  // events
+  onMenuHeaderClick: PropTypes.func,
+  onMenuClick: PropTypes.func,
+  onCollapse: {
+    type: Function
+  },
+  onOpenKeys: {
+    type: Function
+  },
+  onSelect: {
+    type: Function
+  }
+});
+export var defaultRenderLogo = function defaultRenderLogo(logo, logoStyle) {
+  if (!logo) {
+    return null;
+  }
+  if (typeof logo === 'string') {
+    return _createVNode("img", {
+      "src": logo,
+      "alt": "logo",
+      "style": logoStyle
+    }, null);
+  }
+  if (typeof logo === 'function') {
+    // @ts-ignore
+    return logo();
+  }
+  return logo;
+};
+export var defaultRenderLogoAndTitle = function defaultRenderLogoAndTitle(props) {
+  var renderKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'menuHeaderRender';
+  var _props$logo = props.logo,
+    logo = _props$logo === void 0 ? 'http://demo.jetlinks.cn/static/logo.760eb65c.png' : _props$logo,
+    logoStyle = props.logoStyle,
+    title = props.title,
+    layout = props.layout;
+  var renderFunction = props[renderKey || ''];
+  if (layout === 'mix' && renderFunction === false) {
+    return null;
+  }
+  var logoDom = defaultRenderLogo(logo, logoStyle);
+  var titleDom = _createVNode("h1", null, _isSlot(title) ? title : {
+    default: function _default() {
+      return [title];
+    }
+  });
+  if (renderKey === 'menuHeaderRender') {
+    return null;
+  }
+  // call menuHeaderRender
+  if (typeof renderFunction === 'function') {
+    // @ts-ignore
+    return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
+  }
+  if (Array.isArray(renderFunction)) {
+    return _createVNode(_Fragment, null, _isSlot(renderFunction) ? renderFunction : {
+      default: function _default() {
+        return [renderFunction];
+      }
+    });
+  }
+  return _createVNode("a", null, [logoDom, props.collapsed ? null : titleDom]);
+};
+export var defaultRenderCollapsedButton = function defaultRenderCollapsedButton(collapsed) {
+  return collapsed ? _createVNode(IconFont, {
+    "type": 'MenuUnfoldOutlined'
+  }, null) : _createVNode(IconFont, {
+    "type": 'MenuFoldOutlined'
+  }, null);
+};
+var SiderMenu = function SiderMenu(props) {
+  var _slot;
+  var collapsed = props.collapsed,
+    siderWidth = props.siderWidth,
+    breakpoint = props.breakpoint,
+    _props$collapsedWidth = props.collapsedWidth,
+    collapsedWidth = _props$collapsedWidth === void 0 ? 48 : _props$collapsedWidth,
+    _props$menuExtraRende = props.menuExtraRender,
+    menuExtraRender = _props$menuExtraRende === void 0 ? false : _props$menuExtraRende,
+    _props$menuContentRen = props.menuContentRender,
+    menuContentRender = _props$menuContentRen === void 0 ? false : _props$menuContentRen,
+    _props$collapsedButto = props.collapsedButtonRender,
+    collapsedButtonRender = _props$collapsedButto === void 0 ? defaultRenderCollapsedButton : _props$collapsedButto,
+    theme = props.theme;
+  var context = useRouteContext();
+  var getPrefixCls = context.getPrefixCls;
+  var baseClassName = getPrefixCls('sider');
+  var hasSplitMenu = computed(function () {
+    return props.layout === 'mix' && props.splitMenus;
+  });
+  var sSideWidth = computed(function () {
+    return props.collapsed ? props.collapsedWidth : props.siderWidth;
+  });
+  var classNames = computed(function () {
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, baseClassName, true), "".concat(baseClassName, "-fixed"), context.fixSiderbar), "".concat(baseClassName, "-").concat(theme), true), "".concat(baseClassName, "-layout-").concat(props.layout), props.layout);
+  });
+  var handleSelect = function handleSelect($event) {
+    if (props.onSelect) {
+      if (unref(hasSplitMenu)) {
+        props.onSelect([context.selectedKeys[0]].concat(_toConsumableArray($event)));
+        return;
+      }
+      props.onSelect($event);
+    }
+  };
+  var headerDom = defaultRenderLogoAndTitle(props);
+  var extraDom = menuExtraRender && menuExtraRender(props);
+  if (hasSplitMenu.value && unref(context.flatMenuData).length === 0) {
+    return null;
+  }
+  var defaultMenuDom = _createVNode(BaseMenu, {
+    "prefixCls": getPrefixCls(),
+    "locale": props.locale || context.locale,
+    "theme": theme,
+    "mode": "inline",
+    "menuData": hasSplitMenu.value ? context.flatMenuData : context.menuData,
+    "collapsed": props.collapsed,
+    "openKeys": context.openKeys,
+    "selectedKeys": context.selectedKeys,
+    "menuItemRender": props.menuItemRender,
+    "subMenuItemRender": props.subMenuItemRender,
+    "iconfontUrl": props.iconfontUrl,
+    "onClick": props.onMenuClick,
+    "style": {
+      width: '100%'
+    },
+    "class": "".concat(baseClassName, "-menu"),
+    'onUpdate:openKeys': function onUpdateOpenKeys($event) {
+      return props.onOpenKeys && props.onOpenKeys($event);
+    },
+    'onUpdate:selectedKeys': handleSelect
+  }, null);
+  return _createVNode(_Fragment, null, [context.fixSiderbar && _createVNode("div", {
+    "style": {
+      width: "".concat(sSideWidth.value, "px"),
+      overflow: 'hidden',
+      flex: "0 0 ".concat(sSideWidth.value, "px"),
+      maxWidth: "".concat(sSideWidth.value, "px"),
+      minWidth: "".concat(sSideWidth.value, "px"),
+      transition: "background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
+    }
+  }, null), _createVNode(Sider, {
+    "collapsible": true,
+    "trigger": null,
+    "collapsed": collapsed,
+    "breakpoint": breakpoint || undefined,
+    "onCollapse": function onCollapse(collapse) {
+      var _props$onCollapse;
+      (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 ? void 0 : _props$onCollapse.call(props, collapse);
+    },
+    "collapsedWidth": collapsedWidth,
+    "style": {
+      overflow: 'hidden',
+      paddingTop: "".concat(props.headerHeight, "px")
+    },
+    "width": siderWidth,
+    "theme": theme,
+    "class": classNames.value
+  }, {
+    default: function _default() {
+      return [headerDom && _createVNode("div", {
+        "class": "".concat(baseClassName, "-logo"),
+        "onClick": props.layout !== 'mix' ? props.onMenuHeaderClick : undefined,
+        "id": "logo",
+        "style": props === null || props === void 0 ? void 0 : props.logoStyle
+      }, _isSlot(headerDom) ? headerDom : {
+        default: function _default() {
+          return [headerDom];
+        }
+      }), extraDom && !props.collapsed && _createVNode("div", {
+        "class": _defineProperty(_defineProperty({}, "".concat(baseClassName, "-extra"), true), "".concat(baseClassName, "-extra-no-logo"), !headerDom)
+      }, _isSlot(extraDom) ? extraDom : {
+        default: function _default() {
+          return [extraDom];
+        }
+      }), _createVNode("div", {
+        "style": "flex: 1; overflow: hidden auto;"
+      }, [menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom]), _createVNode("div", {
+        "class": "".concat(baseClassName, "-links")
+      }, [collapsedButtonRender !== false ? _createVNode(Menu, {
+        "class": "".concat(baseClassName, "-link-menu"),
+        "inlineIndent": 16,
+        "theme": theme,
+        "selectedKeys": [],
+        "openKeys": [],
+        "mode": "inline",
+        "onClick": function onClick() {
+          if (props.onCollapse) {
+            props.onCollapse(!props.collapsed);
+          }
+        }
+      }, _isSlot(_slot = _createVNode(Menu.Item, {
+        "key": 'collapsed-button',
+        "class": "".concat(baseClassName, "-collapsed-button"),
+        "title": false
+      }, {
+        default: function _default() {
+          return [collapsedButtonRender && typeof collapsedButtonRender === 'function' ? collapsedButtonRender(collapsed) : collapsedButtonRender];
+        }
+      })) ? _slot : {
+        default: function _default() {
+          return [_slot];
+        }
+      }) : null])];
+    }
+  })]);
+};
+export default SiderMenu;

package/es/ProLayout/SiderMenu/index.js

@@ -0,0 +1,2 @@
+export { default as BaseMenu } from './BaseMenu';
+export { default as SiderMenu } from './SiderMenu';

package/es/ProLayout/SiderMenu/typings.js

@@ -0,0 +1 @@
+export {};

package/es/ProLayout/TopHeader/index.js

@@ -0,0 +1,163 @@
+import { isVNode as _isVNode } from "vue";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createVNode as _createVNode } from "vue";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+var _excluded = ["rightContentRender"];
+import { computed, ref } from 'vue';
+import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';
+import { defaultRenderLogoAndTitle, siderMenuProps } from '../SiderMenu/SiderMenu';
+import PropTypes from 'ant-design-vue/es/_util/vue-types';
+import { defaultSettingProps } from '../defaultSettings';
+import { defaultPrefixCls, useRouteContext } from '../RouteContext';
+import BaseMenu from '../SiderMenu/BaseMenu';
+import { clearMenuItem } from '../util';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export var baseHeaderProps = _objectSpread(_objectSpread({}, defaultSettingProps), {}, {
+  prefixCls: PropTypes.string.def('ant-pro'),
+  collapsed: PropTypes.looseBool,
+  logo: siderMenuProps.logo,
+  logoStyle: siderMenuProps.logoStyle,
+  headerTheme: {
+    type: String,
+    default: 'dark'
+  },
+  menuData: {
+    type: Array,
+    default: function _default() {
+      return [];
+    }
+  },
+  splitMenus: siderMenuProps.splitMenus,
+  menuRender: {
+    type: [Object, Function],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  menuHeaderRender: siderMenuProps.menuHeaderRender,
+  menuItemRender: siderMenuProps.menuItemRender,
+  subMenuItemRender: siderMenuProps.subMenuItemRender,
+  rightContentRender: {
+    type: [Object, Function],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  collapsedButtonRender: siderMenuProps.collapsedButtonRender,
+  matchMenuKeys: siderMenuProps.matchMenuKeys,
+  // events
+  onMenuHeaderClick: PropTypes.func,
+  onCollapse: siderMenuProps.onCollapse,
+  onOpenKeys: siderMenuProps.onOpenKeys,
+  onSelect: siderMenuProps.onSelect
+});
+export var topNavHeaderProps = _objectSpread(_objectSpread({}, siderMenuProps), baseHeaderProps);
+var RightContent = function RightContent(_ref) {
+  var rightContentRender = _ref.rightContentRender,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var rightSize = ref('auto');
+  return _createVNode("div", {
+    "style": {
+      minWidth: rightSize.value
+    }
+  }, [_createVNode("div", {
+    "style": {
+      paddingRight: 8
+    }
+  }, [_createVNode(ResizeObserver, {
+    "onResize": function onResize(_ref2) {
+      var width = _ref2.width;
+      rightSize.value = width;
+    }
+  }, {
+    default: function _default() {
+      return [rightContentRender && typeof rightContentRender === 'function' ? _createVNode("div", null, [rightContentRender(_objectSpread({}, props))]) : rightContentRender];
+    }
+  })])]);
+};
+export var TopNavHeader = function TopNavHeader(props) {
+  var headerRef = ref();
+  var propPrefixCls = props.prefixCls,
+    onMenuHeaderClick = props.onMenuHeaderClick,
+    onOpenKeys = props.onOpenKeys,
+    onSelect = props.onSelect,
+    contentWidth = props.contentWidth,
+    rightContentRender = props.rightContentRender,
+    layout = props.layout,
+    menuData = props.menuData,
+    mode = props.mode;
+  var context = useRouteContext();
+  var prefixCls = "".concat(propPrefixCls || defaultPrefixCls, "-top-nav-header");
+  var headerDom = defaultRenderLogoAndTitle(_objectSpread(_objectSpread({}, props), {}, {
+    collapsed: false
+  }),
+  // REMARK:: Any time render header title
+  // layout === 'mix' ? 'headerTitleRender' : undefined,
+  // layout !== 'side' ? 'headerTitleRender' : undefined,
+  'headerTitleRender');
+  //
+  var MenusData = props.layout === 'side' ? [] : menuData;
+  if (props.layout === 'mix' && props.splitMenus) {
+    var noChildrenMenuData = (menuData || []).map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        children: undefined,
+        component: undefined
+      });
+    });
+    MenusData = clearMenuItem(noChildrenMenuData);
+  }
+  var _mode = computed(function () {
+    return props.layout === 'mix' && props.splitMenus ? 'horizontal' : mode;
+  });
+  var className = computed(function () {
+    return _defineProperty(_defineProperty(_defineProperty({}, prefixCls, true), "light", props.theme === 'light'), "dark", props.theme === 'dark');
+  });
+  return _createVNode("div", {
+    "class": className.value
+  }, [_createVNode("div", {
+    "ref": headerRef,
+    "class": "".concat(prefixCls, "-main ").concat(contentWidth === 'Fixed' ? 'wide' : '')
+  }, [headerDom && _createVNode("div", {
+    "class": "".concat(prefixCls, "-main-left"),
+    "onClick": onMenuHeaderClick
+  }, [_createVNode("div", {
+    "class": "".concat(prefixCls, "-logo"),
+    "key": "logo",
+    "id": "logo"
+  }, _isSlot(headerDom) ? headerDom : {
+    default: function _default() {
+      return [headerDom];
+    }
+  })]), _createVNode("div", {
+    "style": {
+      flex: 1
+    },
+    "class": "".concat(prefixCls, "-menu")
+  }, [_createVNode(BaseMenu, {
+    "prefixCls": propPrefixCls,
+    "locale": props.locale || context.locale,
+    "theme": props.theme,
+    "mode": _mode.value,
+    "collapsed": props.collapsed,
+    "iconfontUrl": props.iconfontUrl,
+    "menuData": MenusData,
+    "menuItemRender": props.menuItemRender,
+    "subMenuItemRender": props.subMenuItemRender,
+    "openKeys": context.openKeys,
+    "selectedKeys": context.selectedKeys,
+    "class": {
+      'top-nav-menu': props.mode === 'horizontal'
+    },
+    'onUpdate:openKeys': function onUpdateOpenKeys($event) {
+      return onOpenKeys && onOpenKeys($event);
+    },
+    'onUpdate:selectedKeys': function onUpdateSelectedKeys($event) {
+      return onSelect && onSelect($event);
+    }
+  }, null)]), rightContentRender && _createVNode(RightContent, _objectSpread({
+    "rightContentRender": rightContentRender
+  }, props), null)])]);
+};

package/es/ProLayout/defaultSettings.js

@@ -0,0 +1,66 @@
+export var defaultSettings = {
+  theme: 'light',
+  layout: 'mix',
+  contentWidth: 'Fluid',
+  fixedHeader: true,
+  fixSiderbar: true,
+  menu: {
+    locale: true
+  },
+  headerHeight: 48,
+  title: 'Jetlink UI Components',
+  iconfontUrl: '',
+  primaryColor: '#315EFB'
+};
+export var defaultSettingProps = {
+  theme: {
+    type: String,
+    default: defaultSettings.theme
+  },
+  layout: {
+    type: String,
+    default: defaultSettings.layout
+  },
+  contentWidth: {
+    type: String,
+    default: defaultSettings.contentWidth
+  },
+  fixedHeader: {
+    type: Boolean,
+    default: defaultSettings.fixedHeader
+  },
+  fixSiderbar: {
+    type: Boolean,
+    default: defaultSettings.fixSiderbar
+  },
+  menu: {
+    type: Object,
+    default: function _default() {
+      return {
+        locale: true
+      };
+    }
+  },
+  headerHeight: {
+    type: Number,
+    default: defaultSettings.headerHeight
+  },
+  title: {
+    type: String,
+    default: function _default() {
+      return defaultSettings.title;
+    }
+  },
+  iconfontUrl: {
+    type: String,
+    default: function _default() {
+      return defaultSettings.iconfontUrl;
+    }
+  },
+  primaryColor: {
+    type: String,
+    default: function _default() {
+      return defaultSettings.primaryColor;
+    }
+  }
+};

package/{src/ProLayout/index.ts → es/ProLayout/index.js}

@@ -1,6 +1,4 @@
-import ProLayout from './Basic/BasicLayout';
-import PageContainer from './PageContainer';
-
-export { PageContainer };
-export default ProLayout;
-
+import ProLayout from './Basic/BasicLayout';
+import PageContainer from './PageContainer';
+export { PageContainer };
+export default ProLayout;

package/{src → es}/ProLayout/style/default.less

@@ -1,4 +1,4 @@
-@import '../../style/variable.less';
-
-@basicLayout-prefix-cls: ~'@{ant-prefix}-pro-basicLayout';
-@pro-layout-header-height: 48px;
+@import 'ant-design-vue/es/style/themes/index.less';
+
+@basicLayout-prefix-cls: ~'@{ant-prefix}-pro-basicLayout';
+@pro-layout-header-height: 48px;

package/es/ProLayout/style/index.js

@@ -0,0 +1 @@
+import './style.less';

package/es/ProLayout/typings.js

@@ -0,0 +1 @@
+export {};

package/es/ProLayout/util.js

@@ -0,0 +1,61 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+export function clearMenuItem(menusData) {
+  return menusData.map(function (item) {
+    var _finalItem$meta;
+    var finalItem = _objectSpread({}, item);
+    if ((_finalItem$meta = finalItem.meta) === null || _finalItem$meta === void 0 ? void 0 : _finalItem$meta.hideInMenu) {
+      return null;
+    }
+    if (finalItem && (finalItem === null || finalItem === void 0 ? void 0 : finalItem.children)) {
+      var _finalItem$meta2;
+      if (!((_finalItem$meta2 = finalItem.meta) === null || _finalItem$meta2 === void 0 ? void 0 : _finalItem$meta2.hideChildInMenu) && finalItem.children.some(function (child) {
+        var _child$meta;
+        return child && child.name && !((_child$meta = child.meta) === null || _child$meta === void 0 ? void 0 : _child$meta.hideInMenu);
+      })) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          children: clearMenuItem(finalItem.children)
+        });
+      }
+      delete finalItem.children;
+    }
+    return finalItem;
+  }).filter(function (item) {
+    return item;
+  });
+}
+export function flatMap(menusData) {
+  return menusData.map(function (item) {
+    var _finalItem$meta3;
+    var finalItem = _objectSpread({}, item);
+    if (!finalItem.name || ((_finalItem$meta3 = finalItem.meta) === null || _finalItem$meta3 === void 0 ? void 0 : _finalItem$meta3.hideInMenu)) {
+      return null;
+    }
+    if (finalItem.children) {
+      delete finalItem.children;
+    }
+    return finalItem;
+  }).filter(function (item) {
+    return item;
+  });
+}
+export function getMenuFirstChildren(menus, key) {
+  return key === undefined ? [] : (menus[menus.findIndex(function (menu) {
+    return menu.path === key;
+  })] || {}).children || [];
+}
+export function getSlot(slots, props) {
+  var prop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'default';
+  if (props[prop] === false) {
+    // force not render
+    return false;
+  }
+  return props[prop] || slots[prop];
+}
+export function getSlotVNode(slots, props) {
+  var _slots$prop;
+  var prop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'default';
+  if (props[prop] === false) {
+    return false;
+  }
+  return props[prop] || ((_slots$prop = slots[prop]) === null || _slots$prop === void 0 ? void 0 : _slots$prop.call(slots));
+}