@jetlinks-web/components 2.0.2-2 → 2.0.2-4

package/lib/ProLayout/Basic/BasicLayout.js

@@ -0,0 +1,264 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.basicLayoutProps = void 0;
+var _vue = require("vue");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _SiderMenu = _interopRequireWildcard(require("../SiderMenu/SiderMenu"));
+var _defaultSettings = require("../defaultSettings");
+var _TopHeader = require("../TopHeader");
+var _Header = _interopRequireWildcard(require("./Header"));
+var _useConfigInject2 = _interopRequireDefault(require("ant-design-vue/es/_util/hooks/useConfigInject"));
+var _lodashEs = require("lodash");
+var _RouteContext = require("../RouteContext");
+var _util = require("../util");
+var _antDesignVue = require("ant-design-vue");
+var _excluded = ["pure", "onCollapse", "onOpenKeys", "onSelect", "onMenuClick"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var basicLayoutProps = exports.basicLayoutProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettingProps), _SiderMenu.siderMenuProps), _TopHeader.baseHeaderProps), _Header.headerViewProps), {}, {
+  pure: Boolean,
+  loading: Boolean,
+  locale: {
+    type: [Function, Boolean],
+    default: function _default() {
+      return function (s) {
+        return s;
+      };
+    }
+  },
+  /**
+   * 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
+   */
+  disableMobile: {
+    type: Boolean,
+    required: false
+  },
+  isChildrenLayout: {
+    type: Boolean,
+    required: false
+  },
+  /**
+   * 兼用 content 的 margin
+   */
+  disableContentMargin: {
+    type: Boolean,
+    required: false
+  },
+  colSize: {
+    type: Number,
+    required: false
+  },
+  contentStyle: {
+    type: [String, Object],
+    default: function _default() {
+      return null;
+    }
+  },
+  breadcrumb: {
+    type: [Object, Function],
+    default: function _default() {
+      return null;
+    }
+  },
+  collapsedButtonRender: {
+    type: [Function, Object, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  breadcrumbRender: {
+    type: [Object, Function, Boolean],
+    default: function _default() {
+      return null;
+    }
+  },
+  headerContentRender: {
+    type: [Function, Object, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  headerRender: {
+    type: [Object, Function, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  }
+});
+var _default2 = exports.default = (0, _vue.defineComponent)({
+  name: 'JProLayout',
+  inheritAttrs: false,
+  props: basicLayoutProps,
+  emits: ['update:collapsed', 'update:open-keys', 'update:selected-keys', 'collapse', 'openKeys', 'select', 'menuHeaderClick', 'menuClick', 'backClick'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit,
+      attrs = _ref.attrs,
+      slots = _ref.slots;
+    var _useConfigInject = (0, _useConfigInject2.default)('layout', {}),
+      prefixCls = _useConfigInject.prefixCls;
+    var isTop = (0, _vue.computed)(function () {
+      return props.layout === 'top';
+    });
+    var hasSide = (0, _vue.computed)(function () {
+      return props.layout === 'mix' || props.layout === 'side' || false;
+    });
+    var hasSplitMenu = (0, _vue.computed)(function () {
+      return props.layout === 'mix' && props.splitMenus;
+    });
+    var hasFlatMenu = (0, _vue.computed)(function () {
+      return hasSide.value && hasSplitMenu.value;
+    });
+    var siderWidth = (0, _vue.computed)(function () {
+      return props.collapsed ? props.collapsedWidth : props.siderWidth;
+    });
+    var onCollapse = function onCollapse(collapsed) {
+      emit('update:collapsed', collapsed);
+      emit('collapse', collapsed);
+    };
+    var onOpenKeys = function onOpenKeys(openKeys) {
+      emit('update:open-keys', openKeys);
+      emit('openKeys', openKeys);
+    };
+    var onSelect = function onSelect(selectedKeys) {
+      emit('update:selected-keys', selectedKeys);
+      emit('select', selectedKeys);
+    };
+    var onMenuHeaderClick = function onMenuHeaderClick(e) {
+      emit('menuHeaderClick', e);
+    };
+    var onMenuClick = function onMenuClick(args) {
+      emit('menuClick', args);
+    };
+    var onBack = function onBack(args) {
+      emit('backClick', args);
+    };
+    var baseClassName = (0, _vue.computed)(function () {
+      return "".concat(props.prefixCls, "-basicLayout");
+    });
+    var className = (0, _vue.computed)(function () {
+      return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, baseClassName.value, true), "".concat(baseClassName.value, "-top-menu"), isTop.value), "".concat(baseClassName.value, "-is-children"), props.isChildrenLayout), "".concat(baseClassName.value, "-fix-siderbar"), props.fixSiderbar), "".concat(baseClassName.value, "-").concat(props.layout), props.layout);
+    });
+    var genLayoutStyle = (0, _vue.reactive)({
+      position: 'relative'
+    });
+    (0, _vue.watchEffect)(function () {
+      if (props.isChildrenLayout || props.contentStyle && props.contentStyle.minHeight) {
+        genLayoutStyle.minHeight = 0;
+      }
+    });
+    var headerRender = function headerRender(p, matchMenuKeys) {
+      if (p.headerRender === false || p.pure) {
+        return null;
+      }
+      return (0, _vue.h)(_Header.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, p), {}, {
+        matchMenuKeys: matchMenuKeys || []
+      }));
+      // <Header {...p} matchMenuKeys={matchMenuKeys || []} />;
+    };
+    var breadcrumb = (0, _vue.computed)(function () {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props.breadcrumb), {}, {
+        itemRender: (0, _util.getSlot)(slots, props, 'breadcrumbRender')
+      });
+    });
+    var flatMenuData = (0, _vue.computed)(function () {
+      return hasFlatMenu.value && props.selectedKeys && (0, _util.getMenuFirstChildren)(props.menuData, props.selectedKeys[0]) || [];
+    });
+    var routeContext = (0, _vue.reactive)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _RouteContext.defaultRouteContext), (0, _lodashEs.pick)((0, _vue.toRefs)(props), ['pure', 'locale', 'menuData', 'openKeys', 'selectedKeys', 'contentWidth', 'disableMobile', 'fixSiderbar', 'fixedHeader', 'headerHeight'])), {}, {
+      siderWidth: siderWidth,
+      breadcrumb: breadcrumb,
+      flatMenuData: flatMenuData,
+      hasSide: hasSide,
+      back: onBack,
+      hasHeader: true,
+      flatMenu: hasFlatMenu
+    }));
+    (0, _vue.provide)(_RouteContext.routeContextInjectKey, routeContext);
+    return function () {
+      var _slots$default, _slots$default2;
+      var pure = props.pure,
+        propsOnCollapse = props.onCollapse,
+        propsOnOpenKeys = props.onOpenKeys,
+        propsOnSelect = props.onSelect,
+        propsOnMenuClick = props.onMenuClick,
+        restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+      var collapsedButtonRender = (0, _util.getSlot)(slots, props, 'collapsedButtonRender');
+      var headerContentRender = (0, _util.getSlot)(slots, props, 'headerContentRender');
+      var rightContentRender = (0, _util.getSlot)(slots, props, 'rightContentRender');
+      var customHeaderRender = (0, _util.getSlot)(slots, props, 'headerRender');
+      // menu
+      var menuHeaderRender = (0, _util.getSlot)(slots, props, 'menuHeaderRender');
+      var menuExtraRender = (0, _util.getSlot)(slots, props, 'menuExtraRender');
+      var menuContentRender = (0, _util.getSlot)(slots, props, 'menuContentRender');
+      var menuItemRender = (0, _util.getSlot)(slots, props, 'menuItemRender');
+      var subMenuItemRender = (0, _util.getSlot)(slots, props, 'subMenuItemRender');
+      var headerDom = (0, _vue.computed)(function () {
+        return headerRender((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+          menuItemRender: menuItemRender,
+          subMenuItemRender: subMenuItemRender,
+          hasSiderMenu: !isTop.value,
+          menuData: props.menuData,
+          onCollapse: onCollapse,
+          onOpenKeys: onOpenKeys,
+          onSelect: onSelect,
+          onMenuHeaderClick: onMenuHeaderClick,
+          rightContentRender: rightContentRender,
+          collapsedButtonRender: collapsedButtonRender,
+          headerTitleRender: menuHeaderRender,
+          menuExtraRender: menuExtraRender,
+          menuContentRender: menuContentRender,
+          headerContentRender: headerContentRender,
+          headerRender: customHeaderRender,
+          theme: (props.theme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light'
+        }), props.matchMenuKeys);
+      });
+      routeContext.hasHeader = !!headerDom.value;
+      var contentClassName = (0, _vue.computed)(function () {
+        return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName.value, "-content"), true), "".concat(baseClassName.value, "-has-header"), headerDom), "".concat(baseClassName.value, "-content-disable-margin"), props.disableContentMargin);
+      });
+      return (0, _vue.createVNode)(_vue.Fragment, null, [pure ? (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots) : (0, _vue.createVNode)("div", {
+        "class": className.value
+      }, [(0, _vue.createVNode)(_antDesignVue.Layout, {
+        "style": (0, _objectSpread2.default)({
+          minHeight: '100vh'
+        }, attrs.style || {})
+      }, {
+        default: function _default() {
+          return [headerDom.value, (0, _vue.createVNode)(_antDesignVue.Layout, {
+            "style": genLayoutStyle,
+            "class": prefixCls.value
+          }, {
+            default: function _default() {
+              return [!isTop.value && (0, _vue.createVNode)(_SiderMenu.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
+                "menuHeaderRender": menuHeaderRender,
+                "menuExtraRender": menuExtraRender,
+                "menuContentRender": menuContentRender,
+                "menuItemRender": menuItemRender,
+                "subMenuItemRender": subMenuItemRender,
+                "collapsedButtonRender": collapsedButtonRender,
+                "onCollapse": onCollapse,
+                "onSelect": onSelect,
+                "onOpenKeys": onOpenKeys,
+                "onMenuClick": onMenuClick
+              }), null), (0, _vue.createVNode)(_antDesignVue.Layout, null, {
+                default: function _default() {
+                  return [(0, _vue.createVNode)(_antDesignVue.LayoutContent, null, {
+                    default: function _default() {
+                      return [(_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)];
+                    }
+                  })];
+                }
+              })];
+            }
+          })];
+        }
+      })])]);
+    };
+  }
+});

package/lib/ProLayout/Basic/BasicLayout.less

@@ -0,0 +1,66 @@
+@import '../style/default.less';
+
+.@{basicLayout-prefix-cls} {
+  // BFC
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100%;
+
+  .@{ant-prefix}-layout-header {
+    &.@{ant-prefix}-pro-fixed-header {
+      position: fixed;
+      top: 0;
+    }
+  }
+
+  &-content {
+    position: relative;
+    margin: 24px;
+
+    .@{ant-prefix}-pro-page-container {
+      margin: -24px -24px 0;
+    }
+
+    &-disable-margin {
+      margin: 0;
+
+      .@{ant-prefix}-pro-page-container {
+        margin: 0;
+      }
+    }
+
+    > .@{ant-prefix}-layout {
+      max-height: 100%;
+    }
+  }
+
+  // children should support fixed
+  .@{basicLayout-prefix-cls}-is-children.@{basicLayout-prefix-cls}-fix-siderbar {
+    height: 100vh;
+    overflow: hidden;
+    transform: rotate(0);
+  }
+
+  .@{basicLayout-prefix-cls}-has-header {
+    // tech-page-container
+    .tech-page-container {
+      height: calc(100vh - @pro-layout-header-height);
+    }
+
+    .@{basicLayout-prefix-cls}-is-children.@{basicLayout-prefix-cls}-has-header {
+      .tech-page-container {
+        height: calc(100vh - @pro-layout-header-height -
+        @pro-layout-header-height);
+      }
+
+      .@{basicLayout-prefix-cls}-is-children {
+        min-height: calc(100vh - @pro-layout-header-height);
+
+        &.@{basicLayout-prefix-cls}-fix-siderbar {
+          height: calc(100vh - @pro-layout-header-height);
+        }
+      }
+    }
+  }
+}

package/lib/ProLayout/Basic/Header.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.headerViewProps = exports.default = void 0;
+var _vue = require("vue");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _TopHeader = require("../TopHeader");
+var _vueTypes = _interopRequireDefault(require("ant-design-vue/es/_util/vue-types"));
+var _RouteContext = require("../RouteContext");
+var _antDesignVue = require("ant-design-vue");
+var headerViewProps = exports.headerViewProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _TopHeader.baseHeaderProps), {}, {
+  headerRender: {
+    type: [Object, Function, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  headerTitleRender: {
+    type: [Object, Function, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  headerContentRender: {
+    type: [Object, Function, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  hasSiderMenu: _vueTypes.default.looseBool,
+  siderWidth: _vueTypes.default.number.def(208)
+});
+var _default2 = exports.default = (0, _vue.defineComponent)({
+  name: 'HeaderView',
+  inheritAttrs: false,
+  props: headerViewProps,
+  setup: function setup(props) {
+    var _toRefs = (0, _vue.toRefs)(props),
+      prefixCls = _toRefs.prefixCls,
+      fixedHeader = _toRefs.fixedHeader,
+      headerHeight = _toRefs.headerHeight,
+      layout = _toRefs.layout,
+      theme = _toRefs.theme,
+      onCollapse = _toRefs.onCollapse;
+    var context = (0, _RouteContext.useRouteContext)();
+    var needFixedHeader = (0, _vue.computed)(function () {
+      return fixedHeader.value || context.fixedHeader;
+    });
+    var isTop = (0, _vue.computed)(function () {
+      return layout.value === 'top';
+    });
+    var className = (0, _vue.computed)(function () {
+      return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls.value, "-fixed-header"), needFixedHeader.value), "".concat(prefixCls.value, "-top-menu"), isTop.value);
+    });
+    var renderContent = function renderContent() {
+      var defaultDom = (0, _vue.createVNode)(_TopHeader.TopNavHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        "theme": theme.value,
+        "mode": "horizontal"
+      }, props), {}, {
+        "onCollapse": onCollapse.value,
+        "menuData": context.menuData
+      }), null);
+      if (props.headerRender) {
+        return props.headerRender(props, defaultDom);
+      }
+      return defaultDom;
+    };
+    var right = (0, _vue.computed)(function () {
+      return needFixedHeader.value ? 0 : undefined;
+    });
+    return function () {
+      return (0, _vue.createVNode)(_vue.Fragment, null, [needFixedHeader.value && (0, _vue.createVNode)(_antDesignVue.Layout.Header, {
+        "style": {
+          height: "".concat(headerHeight.value, "px"),
+          lineHeight: "".concat(headerHeight.value, "px"),
+          background: 'transparent'
+        }
+      }, null), (0, _vue.createVNode)(_antDesignVue.Layout.Header, {
+        "style": {
+          padding: 0,
+          height: "".concat(headerHeight.value, "px"),
+          lineHeight: "".concat(headerHeight.value, "px"),
+          width: '100%',
+          zIndex: 100,
+          right: right.value
+        },
+        "class": className.value
+      }, {
+        default: function _default() {
+          return [renderContent()];
+        }
+      })]);
+    };
+  }
+});

package/lib/ProLayout/Basic/Header.less

@@ -0,0 +1,8 @@
+@import '../style/default.less';
+
+@pro-layout-fixed-header-prefix-cls: ~'@{ant-prefix}-pro-fixed-header';
+
+.@{pro-layout-fixed-header-prefix-cls} {
+    z-index: 9;
+    width: 100%;
+}