@lemon-fe/components 0.0.5 → 0.0.8

package/es/Layout/index.less

@@ -1,11 +1,9 @@
-@import '../theme.less';
-
 .@{prefixCls}-layout {
   position: relative;
   display: flex;
   flex-direction: column;
   min-height: 100%;
-  background: #f5f5f5;
+  background: #f2f2f2;
 
   &-header {
     padding: (@space - 3) @space 0;

package/es/MainFramework/components/Menu/index.js

@@ -115,7 +115,7 @@ export default function Menu(props) {
   }, [location.pathname, menus]);
 
   var openMenu = function openMenu(item, elm) {
-    if (item.children && item.children.length > 0) {
+    if (item.children !== undefined && item.children.length > 0 || collapsed) {
       setPopover(item);
       setTop(elm.offsetTop);
       setTimeout(function () {
@@ -287,7 +287,7 @@ export default function Menu(props) {
     onMouseLeave: function onMouseLeave() {
       return toggle(closeMenu);
     }
-  }, popover !== null && popover.children !== undefined && /*#__PURE__*/React.createElement("div", {
+  }, popover !== null && /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-popup"),
     style: {
       top: top
@@ -296,8 +296,9 @@ export default function Menu(props) {
     onMouseEnter: function onMouseEnter() {
       return toggle.cancel();
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-menu-popup-body")
+  }, popover.children !== undefined ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-popup-body"),
+    key: "pop"
   }, popover.children.map(function (item, index) {
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-menu-block"),
@@ -305,9 +306,15 @@ export default function Menu(props) {
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-menu-sub-item")
     }, item.name), item.children !== undefined && item.children.map(renderItem));
-  }))), /*#__PURE__*/React.createElement("div", {
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-popup-tip"),
+    key: "tip"
+  }, popover.name)), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-collapse"),
-    onClick: toggleCollapse
+    onClick: toggleCollapse,
+    onMouseEnter: function onMouseEnter() {
+      return toggle(closeMenu);
+    }
   }, /*#__PURE__*/React.createElement("svg", {
     width: "20",
     height: "20",
@@ -348,10 +355,12 @@ export default function Menu(props) {
           return openMenu(item, target);
         });
       }
-    }, /*#__PURE__*/React.createElement("img", {
+    }, typeof item.icon === 'string' ? /*#__PURE__*/React.createElement("img", {
       className: "".concat(prefixCls, "-menu-icon"),
       src: item.icon
-    }), /*#__PURE__*/React.createElement("div", {
+    }) : /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-menu-icon")
+    }, item.icon), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-menu-title")
     }, item.name));
   })), false && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

package/es/MainFramework/components/Menu/index.less

@@ -6,7 +6,7 @@
   flex: 0 0 200px;
   min-width: 0;
   height: 100%;
-  padding: 16px 0;
+  padding: 8px 0;
   white-space: nowrap;
   transition: flex 0.1s;
 
@@ -45,11 +45,6 @@
     transform: rotate(0);
   }
 
-  &-collapsed &-top-item {
-    margin: 0;
-    padding: 0 16px;
-  }
-
   &-collapsed &-popup {
     left: 52px;
   }
@@ -59,8 +54,7 @@
     align-items: center;
     box-sizing: border-box;
     height: 44px;
-    margin: 0 12px;
-    padding: 0 4px;
+    padding: 0 16px;
     overflow: hidden;
     color: #333;
     font-size: 14px;
@@ -94,12 +88,8 @@
     width: 20px;
     height: 20px;
     margin-right: 8px;
+    color: rgba(108, 108, 108, 1);
     font-size: 16px;
-    opacity: 0.7;
-  }
-
-  &-top-item-active &-icon {
-    opacity: 1;
   }
 
   &-title {
@@ -108,6 +98,15 @@
     text-overflow: ellipsis;
   }
 
+  &-top-item:hover &-icon {
+    color: #333;
+  }
+
+  &-top-item&-top-item-active &-title,
+  &-top-item&-top-item-active &-icon {
+    color: .primary() [];
+  }
+
   &-popup {
     position: absolute;
     top: 0;
@@ -125,12 +124,27 @@
       border-radius: 10px;
       box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
         0 6px 16px -8px rgba(0, 0, 0, 0.08);
-      transform: translate3d(-40px, 0, 0);
+      transform: translate3d(-20px, 0, 0);
+      opacity: 0;
+      transition: all 0.15s;
+    }
+
+    &-tip {
+      height: 36px;
+      margin: 4px 0 0 4px;
+      padding: 0 16px;
+      color: #fff;
+      line-height: 36px;
+      text-align: center;
+      background-color: .primary() [];
+      border-radius: 22px;
+      transform: translate3d(-10px, 0, 0);
       opacity: 0;
-      transition: all 0.2s;
+      transition: all 0.15s;
     }
 
-    &.animated &-body {
+    &.animated &-body,
+    &.animated &-tip {
       transform: translate3d(0, 0, 0);
       opacity: 1;
     }
@@ -161,6 +175,7 @@
     height: 40px;
     padding: 0 16px;
     color: rgba(51, 51, 51, 0.5);
+    font-weight: 500;
     font-size: 14px;
     line-height: 40px;
   }
@@ -227,11 +242,11 @@
     width: 107px;
     height: 36px;
     margin-left: 12px;
-    color: rgba(5, 96, 253, 1);
+    color: .primary() [];
     font-size: 14px;
     text-align: center;
     background-color: #fff;
-    border: 1px solid rgba(5, 96, 253, 1);
+    border: 1px solid .primary() [];
     border-radius: 4px;
     cursor: pointer;
     user-select: none;
@@ -307,7 +322,7 @@
         .transition();
 
         &:hover {
-          color: rgba(5, 96, 253, 1);
+          color: .primary() [];
           background-color: rgba(238, 238, 238, 1);
         }
       }
@@ -326,7 +341,7 @@
       .transition();
 
       &:hover {
-        color: rgba(5, 96, 253, 1);
+        color: .primary() [];
         background-color: rgba(238, 238, 238, 1);
       }
     }
@@ -345,12 +360,12 @@
       cursor: pointer;
 
       &:hover {
-        color: rgba(5, 96, 253, 1);
+        color: .primary() [];
       }
     }
   }
 
   &-active {
-    color: rgba(5, 96, 253, 1);
+    color: .primary() [];
   }
 }

package/es/MainFramework/typings.d.ts

@@ -1,6 +1,8 @@
+import type { ReactElement } from 'react';
+
 export type MenuItem = {
   name: string;
   path?: string;
-  icon?: string;
+  icon?: string | ReactElement;
   children?: MenuItem[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.0.5",
+  "version": "0.0.8",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -16,7 +16,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@lemon-fe/hooks": "^0.0.5",
+    "@lemon-fe/hooks": "^0.0.8",
     "antd": "^4.17.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
@@ -26,7 +26,7 @@
   },
   "peerDependencies": {
     "@ant-design/icons": ">=4.0.0",
-    "antd": ">=4.17.0-alpha.8",
+    "antd": ">=4.17.0",
     "classnames": ">=2.2.6",
     "color-string": ">=1.0.0",
     "lodash": ">=4.17.0",
@@ -39,5 +39,5 @@
     "@types/lodash": "^4.14.179",
     "@types/react-resizable": "^1.7.4"
   },
-  "gitHead": "477ae82a91341a6f769cfd87ff7c8d961c0ec4be"
+  "gitHead": "cd8c8e854c16f5605657b3b92fb2deecd1a116e8"
 }