@aloudata/aloudata-design 2.1.0 → 2.2.0

package/dist/Menu/style/index.less

@@ -1,104 +1,147 @@
+/* stylelint-disable selector-class-pattern */
+
 @import '../../style/index.less';
+// @import '~@szhsin/react-menu/dist/index.css';
+// @import '~@szhsin/react-menu/dist/transitions/slide.css';
+
+@menu-item-horizontal-padding: 12px;
+@menu-width: 168px + 2 * @menu-item-horizontal-padding;
+@max-menu-width: 300px;
 
-//  Menu 和子menu的 ul样式
-.menu-content {
+.menuContainerStyle {
+  display: flex;
+  padding: var(--alias-padding-50minus1, 4px) 0;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: var(--alias-radius-75, 6px);
+  border: 1px solid var(--alias-colors-border-strong, #d1d5db);
   background: var(--alias-colors-bg-skeleton-subtler, #fff);
-  border-radius: 0;
-  box-shadow: none;
-  padding: 0;
+  box-shadow: 0 10px 18px -2px #00000014;
+  min-width: @menu-width;
+  max-width: @max-menu-width;
+  z-index: 999;
+}
+
+.ald-menu {
+  position: relative !important;
 
-  .ant-menu-item-divider,
-  .ant-menu-submenu-title-divider {
-    background-color: var(--alias-colors-border-subtle, #f3f4f6);
+  ul,
+  li {
+    list-style: none;
     margin: 0;
+    box-sizing: border-box;
   }
 
-  .ant-menu-item-selected {
-    background-color: unset;
+  & > .szh-menu {
+    position: relative !important;
+    top: auto !important;
+    left: auto !important;
   }
 
-  // menu项样式
-  .ant-menu-item,
-  .ant-menu-submenu .ant-menu-submenu-title {
+  .szh-menu {
+    .menuContainerStyle();
+  }
+
+  .szh-menu__item {
     display: flex;
+    padding: var(--alias-padding-100minus1, 8px) var(--alias-padding-150, 12px)
+      var(--alias-padding-100, 8px) var(--alias-padding-150, 12px);
     align-items: center;
-    justify-content: space-between;
-    padding: var(--alias-padding-100, 8px) var(--alias-padding-150, 12px);
-    color: var(--alias-colors-text-default, #1f2937);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
+    gap: var(--alias-spacing-75, 6px);
+    align-self: stretch;
+    background: var(--alias-colors-bg-transp, rgba(0, 0, 0, 0));
+    width: 100%;
     line-height: 20px;
-    height: auto;
-    margin: 0;
-    width: auto;
-    gap: var(--alias-spacing-50, 4px);
-    border-radius: 0;
+    max-width: @max-menu-width;
+    cursor: pointer;
+  }
 
-    &:hover {
-      background-color: unset;
-    }
+  .szh-menu__item--hover {
+    background: var(--alias-colors-bg-interaction-hover, rgba(0, 0, 0, 0.05));
+  }
 
-    .ant-dropdown-menu-item-icon {
-      font-size: 20px;
-      margin: 0;
-    }
+  .szh-menu__submenu {
+    width: 100%;
+  }
+
+  .szh-menu__item--disabled {
+    color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
+    cursor: default;
 
-    .ant-menu-title-content.ant-menu-title-content {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      margin-left: 0;
-      flex: 1;
+    .ald-menu-item-label-icon,
+    &.ald-menu-item-selected {
+      color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
     }
+  }
 
-    svg {
-      flex-shrink: 0;
+  .szh-menu__divider {
+    width: 100%;
+    height: 0;
+    position: relative;
+    padding: 4px 0;
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: var(--alias-colors-border-subtle, #f3f4f6);
     }
   }
 
-  .ant-menu-submenu {
-    border-radius: 0;
+  .ald-menu-item-danger {
+    color: #b91c1c;
   }
 
-  .ant-menu-item.ant-menu-item-disabled {
-    cursor: default;
-    color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
+  .ald-menu-item-label {
+    display: flex;
+    width: 100%;
+    gap: var(--alias-spacing-75, 6px);
+    justify-content: space-between;
+  }
 
-    &:hover {
-      background-color: var(--alias-colors-bg-transp, rgba(0, 0, 0, 0));
-    }
+  .ald-menu-item-label-icon {
+    flex: 0 0 auto;
   }
 
-  .ant-menu-item:hover,
-  .ant-menu-submenu:hover,
-  .ant-menu-submenu.ant-menu-submenu-active {
-    background-color: var(
-      --alias-colors-bg-interaction-hover,
-      rgba(0, 0, 0, 0.05)
-    );
+  .ald-menu-item-label-text {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
-}
 
-// 容器样式
-.menu-wrap {
-  border: 1px solid var(--alias-colors-border-strong, #d1d5db);
-  border-radius: var(--alias-radius-75, 6px);
-  box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
-  padding: 2px 0;
-}
+  .ald-menu-item-right {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    color: #9ca3af;
+    gap: var(--alias-spacing-75, 6px);
+  }
 
-// menu菜单
-.ant-menu-root.ant-menu {
-  border: none !important;
-  .menu-content();
-}
+  .ald-menu-item-selected {
+    color: #126fdd;
+  }
+
+  .ald-menu-item-selected-icon {
+    display: flex;
+    align-items: center;
+  }
 
-.ant-menu-submenu.ant-menu-submenu-popup {
-  .menu-wrap();
-  // 二级菜单中的ul
-  .ant-menu-sub {
-    .menu-content();
+  .ald-menu-submenu-popup {
+    transform: translateY(-4px);
+  }
+
+  .szh-menu__header {
+    padding: var(--alias-padding-100, 8px) var(--alias-padding-150, 12px)
+      var(--alias-padding-50, 4px) var(--alias-padding-150, 12px);
+    color: var(--alias-colors-text-subtlest, #9ca3af);
+    line-height: 16px;
+    font-size: 12px;
+    cursor: default;
   }
 }

package/dist/Select/index.js

@@ -369,11 +369,8 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         var classList = target.classList;
         if (classList.contains('ant-select')) {
           if (classList.contains('ant-select-focused')) {
-            console.log(222, JSON.stringify(classList));
             setIsFocus(true);
           } else {
-            console.log(111);
-            console.log(JSON.stringify(classList));
             setIsFocus(false);
           }
         }