@lemon-fe/components 0.0.3 → 0.0.7

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 () {
@@ -128,17 +128,7 @@ export default function Menu(props) {
     }
   };
 
-  var handleMouseEnter = useDebounce(openMenu, 200);
-
-  var toggleMenu = function toggleMenu() {
-    setCollapsed(function (prev) {
-      return !prev;
-    });
-  };
-
   var closeMenu = function closeMenu() {
-    handleMouseEnter.cancel();
-
     if (popup.current) {
       popup.current.classList.remove('animated');
 
@@ -153,6 +143,18 @@ export default function Menu(props) {
     }
   };
 
+  var toggle = useDebounce(function (handler) {
+    if (handler) {
+      handler();
+    }
+  }, 200);
+
+  var toggleCollapse = function toggleCollapse() {
+    setCollapsed(function (prev) {
+      return !prev;
+    });
+  };
+
   useEffect(function () {
     if (!visible) {
       return;
@@ -282,18 +284,21 @@ export default function Menu(props) {
     className: classNames("".concat(prefixCls, "-menu"), _defineProperty({}, "".concat(prefixCls, "-menu-collapsed"), collapsed))
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-bar"),
-    onMouseLeave: closeMenu
-  }, popover !== null && popover.children !== undefined && /*#__PURE__*/React.createElement("div", {
+    onMouseLeave: function onMouseLeave() {
+      return toggle(closeMenu);
+    }
+  }, popover !== null && /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-popup"),
     style: {
       top: top
     },
     ref: popup,
     onMouseEnter: function onMouseEnter() {
-      return handleMouseEnter.cancel();
+      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"),
@@ -301,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: toggleMenu
+    onClick: toggleCollapse,
+    onMouseEnter: function onMouseEnter() {
+      return toggle(closeMenu);
+    }
   }, /*#__PURE__*/React.createElement("svg", {
     width: "20",
     height: "20",
@@ -339,12 +350,17 @@ export default function Menu(props) {
         return handleClick(item);
       },
       onMouseEnter: function onMouseEnter(e) {
-        return handleMouseEnter(item, e.currentTarget);
+        var target = e.currentTarget;
+        toggle(function () {
+          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;
@@ -255,7 +270,7 @@
     height: 100vh;
     background-color: #fff;
     box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
-      0px 6px 16px -8px rgba(0, 0, 0, 0.08);
+      0 6px 16px -8px rgba(0, 0, 0, 0.08);
     transform: translate3d(60px, 0, 0);
     opacity: 0;
     transition: all 0.2s;
@@ -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/components/TabBar/index.js

@@ -34,28 +34,22 @@ export default function TabBar(props) {
         return handleClose(e, index);
       }
     }, /*#__PURE__*/React.createElement("svg", {
-      width: "10",
-      height: "10",
-      viewBox: "0 0 9 9",
+      width: "14",
+      height: "14",
       xmlns: "http://www.w3.org/2000/svg"
     }, /*#__PURE__*/React.createElement("g", {
-      fill: "#000",
-      fillRule: "evenodd",
-      fillOpacity: ".25"
-    }, /*#__PURE__*/React.createElement("rect", {
-      transform: "rotate(45 4.559 4.559)",
-      x: "3.976",
-      y: ".059",
-      width: "1",
-      height: "9",
-      rx: ".5"
-    }), /*#__PURE__*/React.createElement("rect", {
-      transform: "rotate(-45 4.559 4.441)",
-      x: "3.976",
-      y: "-.059",
-      width: "1",
-      height: "9",
-      rx: ".5"
-    }))))));
+      fill: "none",
+      fillRule: "evenodd"
+    }, /*#__PURE__*/React.createElement("g", {
+      fill: "currentColor"
+    }, /*#__PURE__*/React.createElement("g", {
+      fillRule: "nonzero"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M7.74992318,2.75006802 L7.74992318,11.250068 C7.74992318,11.6642816 7.41413675,12.000068 6.99992318,12.000068 C6.58570962,12.000068 6.24992318,11.6642816 6.24992318,11.250068 L6.24992318,2.75006802 C6.24992318,2.33585446 6.58570962,2.00006802 6.99992318,2.00006802 C7.41413675,2.00006802 7.74992318,2.33585446 7.74992318,2.75006802 Z",
+      transform: "translate(-367.000000, -21.000000) translate(367.000000, 21.000000) translate(6.999923, 7.000068) rotate(45.000000) translate(-6.999923, -7.000068)"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M7.74994595,2.75007682 L7.74994595,11.2500768 C7.74994595,11.6642904 7.41415952,12.0000768 6.99994595,12.0000768 C6.58573239,12.0000768 6.24994595,11.6642904 6.24994595,11.2500768 L6.24994595,2.75007682 C6.24994595,2.33586325 6.58573239,2.00007682 6.99994595,2.00007682 C7.41415952,2.00007682 7.74994595,2.33586325 7.74994595,2.75007682 Z",
+      transform: "translate(-367.000000, -21.000000) translate(367.000000, 21.000000) translate(6.999946, 7.000077) rotate(-45.000000) translate(-6.999946, -7.000077)"
+    }))))))));
   }));
 }

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

@@ -38,7 +38,7 @@
   box-sizing: content-box;
   min-width: 14px;
   max-width: 120px;
-  height: 49px;
+  height: 43px;
   cursor: pointer;
 
   &::before {
@@ -72,7 +72,7 @@
     z-index: 4;
     display: flex;
     align-items: center;
-    padding: 10px 10px 17px;
+    padding: 7px 12px 14px;
     background-color: #fff;
     border-radius: 10px;
     transition: background-color 0.2s;
@@ -128,12 +128,14 @@
   &-close {
     width: 14px;
     height: 14px;
+    color: #c4c4c4;
     line-height: 14px;
     text-align: center;
     border-radius: 50%;
 
     &:hover {
-      background-color: rgba(0, 0, 0, 0.15);
+      color: #f2f2f2;
+      background-color: #c1c1c1;
     }
   }
 }

package/es/MainFramework/index.less

@@ -17,7 +17,7 @@
   align-items: center;
   box-sizing: border-box;
   width: 100vw;
-  height: 56px;
+  height: 50px;
   padding: 0 16px;
   background: #ffff;
 

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.3",
+  "version": "0.0.7",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -12,8 +12,11 @@
   "scripts": {
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
   "dependencies": {
-    "@lemon-fe/hooks": "^0.0.3",
+    "@lemon-fe/hooks": "^0.0.7",
     "antd": "^4.17.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
@@ -36,5 +39,5 @@
     "@types/lodash": "^4.14.179",
     "@types/react-resizable": "^1.7.4"
   },
-  "gitHead": "4793be25184347a233655cd67038427b79767c46"
+  "gitHead": "e09da7cb5fdd4e183429f5e0b23444790386f861"
 }