amis-ui 6.11.0 → 6.12.0-beta.0

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "6.11.0",
+  "version": "6.12.0-beta.0",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && cross-env NODE_ENV=production rollup -c ",
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@rc-component/mini-decimal": "^1.0.1",
-    "amis-core": "^6.11.0",
-    "amis-formula": "^6.11.0",
+    "amis-core": "^6.12.0-beta.0",
+    "amis-formula": "^6.12.0-beta.0",
     "animate.css": "4.1.1",
     "classnames": "2.3.2",
     "codemirror": "^5.63.0",

package/scss/_components.scss

@@ -3785,15 +3785,19 @@
 
   // timeline
   --Timeline-time-color: var(--colors-neutral-text-5);
-  --Timeline-time-fontSize: var(--fonts-size-7);
-  --Timeline-time-fontWeight: var(--fonts-weight-6);
+  --Timeline-time-fontSize: var(--fonts-size-4);
+  --Timeline-time-fontWeight: var(--fonts-weight-3);
   --Timeline-title-color: var(--colors-neutral-text-2);
-  --Timeline-title-fontSize: var(--fonts-size-7);
+  --Timeline-title-fontSize: var(--fonts-size-6);
   --Timeline-title-fontWeight: var(--fonts-weight-6);
   --Timeline-type-info-color: var(--colors-info-5);
   --Timeline-type-success-color: var(--colors-success-5);
   --Timeline-type-warning-color: var(--colors-warning-5);
   --Timeline-type-danger-color: var(--colors-error-5);
+  --Timeline-dot-info-bg-color: var(--colors-info-5);
+  --Timeline-dot-success-bg-color: var(--colors-success-5);
+  --Timeline-dot-warning-bg-color: var(--colors-warning-5);
+  --Timeline-dot-danger-bg-color: var(--colors-error-5);
   --Timeline-detail-label-color: var(--colors-brand-5);
   --Timeline-detail-label-fontSize: var(--fonts-size-7);
   --Timeline-detail-label-fontWeight: var(--fonts-weight-6);
@@ -3811,13 +3815,17 @@
   --Timeline-visible-top-left-border-radius: var(--borders-radius-3);
   --Timeline-visible-bottom-right-border-radius: var(--borders-radius-3);
   --Timeline-visible-bottom-left-border-radius: var(--borders-radius-3);
-  --Timeline-left-size: var(--sizes-size-2);
+  --Timeline-left-size: var(--sizes-size-4);
   --Timeline-horizontal-top-size: var(--sizes-size-0);
   --Timeline-line-bg: #e6e6e8;
   --Timeline-round-bg: #dadbdd;
 
+  --TimelineItem-round-width-xl: #{px2rem(8px)};
+  --TimelineItem-round-width-lg: #{px2rem(6px)};
+  --TimelineItem-round-width-md: #{px2rem(4px)};
+  --TimelineItem-round-width-sm: #{px2rem(2px)};
   --TimelineItem--axle-flex: 0 0 #{px2rem(24px)};
-  --TimelineItem--left-line-width: #{px2rem(2px)};
+  --TimelineItem--left-line-width: #{px2rem(1px)};
   --TimelineItem--left-line-left: #{px2rem(13px)};
   --TimelineItem--left-line-top: #{px2rem(20px)};
   --TimelineItem--horizontal-left-line-top: #{px2rem(18px)};
@@ -3828,7 +3836,7 @@
   --TimelineItem--round-top: #{px2rem(8px)};
   --TimelineItem--icon-width: #{px2rem(16px)};
   --TimelineItem--icon-height: #{px2rem(16px)};
-  --TimelineItem--icon-left: #{px2rem(6px)};
+  --TimelineItem--icon-left: #{px2rem(12px)};
   --TimelineItem--content-padding-bottom: var(--gap-md);
   --TimelineItem--content-margin-left: var(--Timeline-left-size);
   --TimelineItem--content-time-margin-bottom: var(--gap-xs);
@@ -3860,10 +3868,14 @@
   --TimelineItem-custem-button-margin-left: var(--fontSizeSm);
   --TimelineItem-custem-time-padding-right: var(--fontSizeSm);
   --TimelineItem-round-bg: var(--Timeline-round-bg);
-  --Timeline--success-bg: var(--Timeline-type-success-color);
-  --Timeline--info-bg: var(--Timeline-type-info-color);
-  --Timeline--warning-bg: var(--Timeline-type-warning-color);
-  --Timeline--danger-bg: var(--Timeline-type-danger-color);
+  --Timeline--success-dot-color: var(--Timeline-type-success-color);
+  --Timeline--success-dot-bg-color: var(--Timeline-dot-success-bg-color);
+  --Timeline--info-dot-color: var(--Timeline-type-info-color);
+  --Timeline--info-dot-bg-color: var(--Timeline-dot-info-bg-color);
+  --Timeline--warning-dot-color: var(--Timeline-type-warning-color);
+  --Timeline--warning-dot-bg-color: var(--Timeline-dot-warning-bg-color);
+  --Timeline--danger-dot-color: var(--Timeline-type-danger-color);
+  --Timeline--danger-dot-bg-color: var(--Timeline-dot-danger-bg-color);
 
   --inputTag-option-height: var(--sizes-base-16);
   --inputTag-option-color: var(--colors-neutral-text-2);

package/scss/_properties.scss

@@ -828,9 +828,12 @@ $Table-strip-bg: transparent;
   // ContextMenu
   --menu-background: #fff;
   --menu-box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
-  --menu-border-radius: 4px;
+  --menu-border-radius: 6px;
+  --menu-padding: 4px;
   --menu-font-color: #151b26;
   --menu-font-family: PingFangSC-Regular;
+  --menu-font-padding: 5px 8px;
+  --menu-font-size: 14px;
   --menu-border-color: #e8e9eb; // 默认的边框色
   --menu-active-color: var(--colors-brand-5);
   --menu-hover-bg-color: #e6f0ff;
@@ -840,6 +843,12 @@ $Table-strip-bg: transparent;
   --menu-min-width: 150px; // 一级子项最小宽度
   --menu-sub-min-width: 100px; // 二级子项最小宽度
 
+  --Context-menu-border-radius: 6px;
+  --Context-menu-active-color: #2468f2;
+  --Context-menu-hover-color: #151b26;
+  --Context-menu-hover-bg-color: #f2f2f4;
+  --Context-menu-hasChild-active-color: #151b26;
+
   --SearchBox-width: #{px2rem(150px)};
   --SearchBox-history-dropdown-maxWidth: calc(var(--SearchBox-width) * 2);
   --SearchBox-history-dropdown-maxHeight: #{px2rem(200px)};

package/scss/components/_carousel.scss

@@ -215,8 +215,9 @@
         top: 0;
         justify-content: center;
       }
-      
-      &-leftArrow, &-rightArrow {
+
+      &-leftArrow,
+      &-rightArrow {
         height: 10%;
         width: 100%;
         left: 0;
@@ -238,27 +239,27 @@
           transform: translate(-50%, -50%) rotate(90deg);
         }
       }
-  
+
       &-item.slide {
         transform: translateY(100%);
       }
-  
+
       &-item.slide.in {
         transform: translateY(0);
       }
-  
+
       &-item.slide.out {
         transform: translateY(-100%);
       }
-  
+
       &-item.slideRight {
         transform: translateY(-100%);
       }
-  
+
       &-item.slideRight.in {
         transform: translateY(0);
       }
-  
+
       &-item.slideRight.out {
         transform: translateY(100%);
       }

package/scss/components/_context-menu.scss

@@ -57,11 +57,11 @@
     position: absolute;
 
     margin: 0;
-    padding: 4px 0;
+    padding: var(--menu-padding);
 
     background: var(--menu-background);
     box-shadow: var(--menu-box-shadow);
-    border-radius: var(--menu-border-radius);
+    border-radius: var(--Context-menu-border-radius);
 
     color: var(--menu-font-color);
     font-family: var(--menu-font-family);
@@ -90,16 +90,24 @@
     > a {
       white-space: nowrap;
       display: block;
-      padding: var(--default-padding);
-      color: inherit;
+      padding: var(--menu-font-padding);
+      font-size: var(--menu-font-size);
+      color: var(--menu-font-color);
       border-top: none;
       border-bottom: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      > i {
+        font-size: 12px;
+      }
     }
 
     &:not(.is-disabled):hover > a {
       text-decoration: none;
-      color: var(--menu-active-color);
-      background: var(--menu-hover-bg-color);
+      background: var(--Context-menu-hover-bg-color);
+      border-radius: var(--Context-menu-border-radius);
+      color: var(--Context-menu-hover-color);
       cursor: pointer;
       border-top: none;
       border-bottom: none;
@@ -110,23 +118,21 @@
       pointer-events: none;
     }
 
-    &.has-child > a::after {
-      content: '';
-      width: 0;
-      height: 0;
-      border-width: 4px 7px;
-      border-style: solid;
-      border-color: transparent transparent transparent
-        var(--default-icon-color);
-      text-shadow: var(--menu-box-shadow);
-      position: absolute;
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
+    &.is-active > a {
+      color: var(--Context-menu-active-color);
     }
 
-    &.has-child:hover > a::after {
-      border-color: transparent transparent transparent var(--menu-active-color);
+    &.has-child {
+      &::after {
+        position: absolute;
+        content: '';
+        width: 12px;
+        position: absolute;
+        right: -12px;
+        top: 0;
+        bottom: 0;
+        z-index: 1;
+      }
     }
 
     &.is-danger {
@@ -148,25 +154,25 @@
 
   &-item:hover > &-subList {
     display: block;
+    min-width: var(--menu-min-width);
     animation-duration: var(--animation-duration);
     animation-fill-mode: both;
     animation-name: contextMenuIn;
     position: absolute;
-    left: 100%; // calc(100% + 3px);
+    left: calc(100% + 8px);
     top: -3px;
-    min-width: var(--menu-sub-min-width);
-
     margin: 0;
-    padding: 0;
-
+    padding: var(--menu-padding);
     background: var(--menu-background);
     box-shadow: var(--menu-box-shadow);
-    border-radius: var(--menu-border-radius);
+    border-radius: var(--Context-menu-border-radius);
 
-    color: var(--menu-font-color);
+    color: var(--Context-menu-hover-color);
     font-family: var(--menu-font-family);
     font-size: 12px;
     line-height: 20px;
+    max-height: 500px;
+    overflow-y: auto;
 
     &:hover {
       display: block;

package/scss/components/_popoverable.scss

@@ -23,12 +23,13 @@
 
   .#{$ns}Field-popOverWrap {
     &-ellipsis {
-      width: 200px;
-      white-space: nowrap;
+      width: auto;
       overflow: hidden;
-      text-overflow: ellipsis;
-      vertical-align: bottom;
-      display: inline-block;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      line-clamp: 1;
+      -webkit-line-clamp: 1;
+      word-break: break-all;
     }
 
     &-noWrap {

package/scss/components/_table.scss

@@ -305,6 +305,16 @@
       text-align: right;
     }
 
+    & th.align-top,
+    & td.align-top {
+      vertical-align: top !important;
+    }
+
+    & th.align-bottom,
+    & td.align-bottom {
+      vertical-align: bottom !important;
+    }
+
     & td .#{$ns}SwitchControl {
       padding-top: 0;
     }