@jetlinks-web/components 3.2.8 → 3.3.0

package/es/ProLayout/Basic/BasicLayout.js

@@ -100,7 +100,7 @@ export default defineComponent({
       return props.layout === 'top';
     });
     var hasSide = computed(function () {
-      return props.layout === 'mix' || props.layout === 'side' || false;
+      return props.layout === 'mix' || props.layout === 'side' || props.layout === 'sider' || false;
     });
     var hasSplitMenu = computed(function () {
       return props.layout === 'mix' && props.splitMenus;
@@ -169,7 +169,7 @@ export default defineComponent({
       }
     });
     var headerRender = function headerRender(p, matchMenuKeys) {
-      if (p.headerRender === false || p.pure) {
+      if (p.headerRender === false || p.pure || p.layout === 'sider') {
         return null;
       }
       return h(Header, _objectSpread(_objectSpread({}, p), {}, {
@@ -198,7 +198,6 @@ export default defineComponent({
       flatMenu: hasFlatMenu,
       layoutType: layoutType
     }));
-    console.log(toRefs(props));
     provide(routeContextInjectKey, routeContext);
     return function () {
       var pure = props.pure,
@@ -226,7 +225,7 @@ export default defineComponent({
         return headerRender(_objectSpread(_objectSpread({}, props), {}, {
           menuItemRender: menuItemRender,
           subMenuItemRender: subMenuItemRender,
-          hasSiderMenu: !isTop.value,
+          hasSiderMenu: hasSide.value,
           menuData: props.menuData,
           onCollapse: onCollapse,
           onOpenKeys: onOpenKeys,
@@ -245,9 +244,15 @@ export default defineComponent({
           theme: (props.theme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light'
         }), props.matchMenuKeys);
       });
-      routeContext.hasHeader = !!headerDom.value;
+      var hasHeader = computed(function () {
+        return !!headerDom.value;
+      });
+      var siderHeaderHeight = computed(function () {
+        return hasHeader.value ? props.headerHeight : 0;
+      });
+      routeContext.hasHeader = hasHeader.value;
       var contentClassName = computed(function () {
-        return _defineProperty(_defineProperty(_defineProperty({}, "".concat(baseClassName.value, "-content"), true), "".concat(baseClassName.value, "-has-header"), headerDom), "".concat(baseClassName.value, "-content-disable-margin"), props.disableContentMargin);
+        return _defineProperty(_defineProperty(_defineProperty({}, "".concat(baseClassName.value, "-content"), true), "".concat(baseClassName.value, "-has-header"), hasHeader.value), "".concat(baseClassName.value, "-content-disable-margin"), props.disableContentMargin);
       });
       if (pure) {
         var _slots$default;
@@ -270,6 +275,7 @@ export default defineComponent({
               default: function _default() {
                 return [!isTop.value && _createVNode(SiderMenu, _objectSpread(_objectSpread({}, restProps), {}, {
                   "logo": logoRender || restProps.logo,
+                  "headerHeight": siderHeaderHeight.value,
                   "menuHeaderRender": menuHeaderRender,
                   "menuExtraRender": menuExtraRender,
                   "menuContentRender": menuContentRender,

package/es/ProLayout/SiderMenu/SiderMenu.js

@@ -141,22 +141,26 @@ export var defaultRenderLogoAndTitle = function defaultRenderLogoAndTitle(props)
     return _createVNode("a", null, [_createTextVNode(" "), logoDom]);
   }
   var renderFunction = props[renderKey || ''];
+  var showTitle = props.layout === 'sider' || !props.collapsed;
   if (layout === 'mix' && renderFunction === false) {
     return null;
   }
   var titleDom = _createVNode("h1", null, [title]);
-  if (renderKey === 'menuHeaderRender') {
+  if (renderKey === 'menuHeaderRender' && layout !== 'sider') {
+    return null;
+  }
+  if (renderFunction === false) {
     return null;
   }
   // call menuHeaderRender
   if (typeof renderFunction === 'function') {
     // @ts-ignore
-    return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
+    return renderFunction(logoDom, showTitle ? titleDom : null, props);
   }
   if (Array.isArray(renderFunction)) {
     return _createVNode(_Fragment, null, [renderFunction]);
   }
-  return _createVNode("a", null, [logoDom, props.collapsed ? null : titleDom]);
+  return _createVNode("a", null, [logoDom, showTitle ? titleDom : null]);
 };
 export var defaultRenderCollapsedButton = function defaultRenderCollapsedButton(collapsed) {
   return collapsed ? _createVNode(IconFont, {

package/es/ProLayout/SiderMenu/style.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { Keyframes } from "ant-design-vue";
 export var genSiderMenuStyle = function genSiderMenuStyle(config) {
-  var _$concat8;
+  var _$concat9;
   var token = config.token;
   var proLayoutSiderMenuCls = "".concat(token.antCls, "-pro-sider");
   var proLayoutHeaderHeight = '48px';
@@ -19,13 +19,13 @@ export var genSiderMenuStyle = function genSiderMenuStyle(config) {
       opacity: 1
     }
   });
-  return _defineProperty(_defineProperty(_defineProperty({}, "".concat(proLayoutSiderMenuCls), (_$concat8 = {
+  return _defineProperty(_defineProperty(_defineProperty({}, "".concat(proLayoutSiderMenuCls), (_$concat9 = {
     position: 'relative',
     backgroundColor: '#001529',
     borderRight: 0,
     // FIXME: 临时修正(可能不会做兼容)
     zIndex: 20
-  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat8, "".concat(token.antCls, "-menu"), {
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat9, "".concat(token.antCls, "-menu"), {
     background: 'transparent'
   }), "&".concat(token.antCls, "-layout-sider-light"), _defineProperty(_defineProperty({}, "".concat(token.antCls, "-menu-item a"), {
     color: token.colorTextHeading
@@ -132,7 +132,7 @@ export var genSiderMenuStyle = function genSiderMenuStyle(config) {
     borderRightColor: 'transparent'
   }), "".concat(proLayoutSiderMenuCls, "-collapsed-button"), {
     borderTop: "".concat(token.lineWidth, " solid ").concat(token.colorSplit)
-  })), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat8, "".concat(proLayoutSiderMenuCls, "-icon"), {
+  })), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat9, "".concat(proLayoutSiderMenuCls, "-icon"), {
     width: '14px',
     verticalAlign: 'baseline'
   }), "".concat(proLayoutSiderMenuCls, "-link"), _defineProperty({
@@ -149,7 +149,11 @@ export var genSiderMenuStyle = function genSiderMenuStyle(config) {
     lineHeight: 1
   }), '.drawer .drawer-content', {
     background: "#001529"
-  }))), "".concat(token.antCls, "-pro-menu-item"), _defineProperty({}, ".anticon".concat(token.antCls, "-pro-menu-item-title"), {
+  }), "".concat(token.antCls, "-layout-sider-children"), _defineProperty({}, "".concat(proLayoutSiderMenuCls, "-logo"), {
+    h1: {
+      color: '#333'
+    }
+  })))), "".concat(token.antCls, "-pro-menu-item"), _defineProperty({}, ".anticon".concat(token.antCls, "-pro-menu-item-title"), {
     marginLeft: '10px'
   })), '.sider-app-menus', {
     width: '100px',

package/lib/ProLayout/Basic/BasicLayout.js

@@ -108,7 +108,7 @@ var _default2 = exports.default = (0, _vue.defineComponent)({
       return props.layout === 'top';
     });
     var hasSide = (0, _vue.computed)(function () {
-      return props.layout === 'mix' || props.layout === 'side' || false;
+      return props.layout === 'mix' || props.layout === 'side' || props.layout === 'sider' || false;
     });
     var hasSplitMenu = (0, _vue.computed)(function () {
       return props.layout === 'mix' && props.splitMenus;
@@ -177,7 +177,7 @@ var _default2 = exports.default = (0, _vue.defineComponent)({
       }
     });
     var headerRender = function headerRender(p, matchMenuKeys) {
-      if (p.headerRender === false || p.pure) {
+      if (p.headerRender === false || p.pure || p.layout === 'sider') {
         return null;
       }
       return (0, _vue.h)(_Header.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, p), {}, {
@@ -206,7 +206,6 @@ var _default2 = exports.default = (0, _vue.defineComponent)({
       flatMenu: hasFlatMenu,
       layoutType: layoutType
     }));
-    console.log((0, _vue.toRefs)(props));
     (0, _vue.provide)(_RouteContext.routeContextInjectKey, routeContext);
     return function () {
       var pure = props.pure,
@@ -234,7 +233,7 @@ var _default2 = exports.default = (0, _vue.defineComponent)({
         return headerRender((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
           menuItemRender: menuItemRender,
           subMenuItemRender: subMenuItemRender,
-          hasSiderMenu: !isTop.value,
+          hasSiderMenu: hasSide.value,
           menuData: props.menuData,
           onCollapse: onCollapse,
           onOpenKeys: onOpenKeys,
@@ -253,9 +252,15 @@ var _default2 = exports.default = (0, _vue.defineComponent)({
           theme: (props.theme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light'
         }), props.matchMenuKeys);
       });
-      routeContext.hasHeader = !!headerDom.value;
+      var hasHeader = (0, _vue.computed)(function () {
+        return !!headerDom.value;
+      });
+      var siderHeaderHeight = (0, _vue.computed)(function () {
+        return hasHeader.value ? props.headerHeight : 0;
+      });
+      routeContext.hasHeader = hasHeader.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, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName.value, "-content"), true), "".concat(baseClassName.value, "-has-header"), hasHeader.value), "".concat(baseClassName.value, "-content-disable-margin"), props.disableContentMargin);
       });
       if (pure) {
         var _slots$default;
@@ -278,6 +283,7 @@ var _default2 = exports.default = (0, _vue.defineComponent)({
               default: function _default() {
                 return [!isTop.value && (0, _vue.createVNode)(_SiderMenu.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
                   "logo": logoRender || restProps.logo,
+                  "headerHeight": siderHeaderHeight.value,
                   "menuHeaderRender": menuHeaderRender,
                   "menuExtraRender": menuExtraRender,
                   "menuContentRender": menuContentRender,

package/lib/ProLayout/SiderMenu/SiderMenu.js

@@ -149,22 +149,26 @@ var defaultRenderLogoAndTitle = exports.defaultRenderLogoAndTitle = function def
     return (0, _vue.createVNode)("a", null, [(0, _vue.createTextVNode)(" "), logoDom]);
   }
   var renderFunction = props[renderKey || ''];
+  var showTitle = props.layout === 'sider' || !props.collapsed;
   if (layout === 'mix' && renderFunction === false) {
     return null;
   }
   var titleDom = (0, _vue.createVNode)("h1", null, [title]);
-  if (renderKey === 'menuHeaderRender') {
+  if (renderKey === 'menuHeaderRender' && layout !== 'sider') {
+    return null;
+  }
+  if (renderFunction === false) {
     return null;
   }
   // call menuHeaderRender
   if (typeof renderFunction === 'function') {
     // @ts-ignore
-    return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
+    return renderFunction(logoDom, showTitle ? titleDom : null, props);
   }
   if (Array.isArray(renderFunction)) {
     return (0, _vue.createVNode)(_vue.Fragment, null, [renderFunction]);
   }
-  return (0, _vue.createVNode)("a", null, [logoDom, props.collapsed ? null : titleDom]);
+  return (0, _vue.createVNode)("a", null, [logoDom, showTitle ? titleDom : null]);
 };
 var defaultRenderCollapsedButton = exports.defaultRenderCollapsedButton = function defaultRenderCollapsedButton(collapsed) {
   return collapsed ? (0, _vue.createVNode)(_Icon.default, {

package/lib/ProLayout/SiderMenu/style.js

@@ -8,7 +8,7 @@ exports.genSiderMenuStyle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _antDesignVue = require("ant-design-vue");
 var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(config) {
-  var _$concat8;
+  var _$concat9;
   var token = config.token;
   var proLayoutSiderMenuCls = "".concat(token.antCls, "-pro-sider");
   var proLayoutHeaderHeight = '48px';
@@ -26,13 +26,13 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
       opacity: 1
     }
   });
-  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls), (_$concat8 = {
+  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls), (_$concat9 = {
     position: 'relative',
     backgroundColor: '#001529',
     borderRight: 0,
     // FIXME: 临时修正(可能不会做兼容)
     zIndex: 20
-  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat8, "".concat(token.antCls, "-menu"), {
+  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat9, "".concat(token.antCls, "-menu"), {
     background: 'transparent'
   }), "&".concat(token.antCls, "-layout-sider-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-item a"), {
     color: token.colorTextHeading
@@ -139,7 +139,7 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
     borderRightColor: 'transparent'
   }), "".concat(proLayoutSiderMenuCls, "-collapsed-button"), {
     borderTop: "".concat(token.lineWidth, " solid ").concat(token.colorSplit)
-  })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat8, "".concat(proLayoutSiderMenuCls, "-icon"), {
+  })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat9, "".concat(proLayoutSiderMenuCls, "-icon"), {
     width: '14px',
     verticalAlign: 'baseline'
   }), "".concat(proLayoutSiderMenuCls, "-link"), (0, _defineProperty2.default)({
@@ -156,7 +156,11 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
     lineHeight: 1
   }), '.drawer .drawer-content', {
     background: "#001529"
-  }))), "".concat(token.antCls, "-pro-menu-item"), (0, _defineProperty2.default)({}, ".anticon".concat(token.antCls, "-pro-menu-item-title"), {
+  }), "".concat(token.antCls, "-layout-sider-children"), (0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls, "-logo"), {
+    h1: {
+      color: '#333'
+    }
+  })))), "".concat(token.antCls, "-pro-menu-item"), (0, _defineProperty2.default)({}, ".anticon".concat(token.antCls, "-pro-menu-item-title"), {
     marginLeft: '10px'
   })), '.sider-app-menus', {
     width: '100px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetlinks-web/components",
-  "version": "3.2.8",
+  "version": "3.3.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",