amis-ui 2.3.2-beta.1 → 2.4.0

package/scss/components/_code.scss

@@ -0,0 +1,10 @@
+.#{$ns}Code {
+  &--dark {
+    background-color: #1e1e1e;
+    border-radius: var(--borderRadius);
+  }
+
+  &-pre-wrap {
+    padding: var(--sizes-size-5);
+  }
+}

package/scss/components/_collapse.scss

@@ -119,3 +119,20 @@
     font-weight: var(--Collapse-content-fontWeight);
   }
 }
+
+//FieldSet Form + Collapse
+.#{$ns}Form {
+  .#{$ns}Collapse {
+    border: none;
+    &-header {
+      background-color: var(--white);
+      display: inline-flex;
+      justify-content: flex-end;
+      flex-direction: row-reverse;
+      border-radius: 0;
+    }
+    &-content {
+      padding: 0;
+    }
+  }
+}

package/scss/components/_condition-builder.scss

@@ -1,19 +1,53 @@
 .#{$ns}CBGroup {
   font-size: var(--fontSizeSm);
   position: relative;
-  border: 1px solid #e8e9eb;
-  border-radius: 4px;
-  border-left: px2rem(3px) solid #e6f0ff;
-  padding: px2rem(30px) px2rem(27px) px2rem(17px);
-  margin-top: px2rem(30px);
+  // border: 1px solid #e8e9eb;
+  // border-radius: 4px;
+  // border-left: px2rem(3px) solid #e6f0ff;
+  // padding: px2rem(30px) px2rem(27px) px2rem(17px);
+  // margin-top: px2rem(30px);
+  display: flex;
   &-toolbarCondition {
-    text-align: center;
-    margin-top: px2rem(-44px);
-    margin-bottom: px2rem(16px);
+    // text-align: center;
+    // margin-top: px2rem(-44px);
+    // margin-bottom: px2rem(16px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 px2rem(10px) 0 0;
+    flex-direction: column;
+
+    &[draggable='true'] {
+      cursor: grab;
+    }
+
+    &-arrow {
+      position: absolute;
+      top: 0;
+      font-size: 14px;
+      width: px2rem(20px);
+      height: px2rem(20px);
+      border-radius: 50%;
+      background: #d4e5ff;
+      text-align: center;
+      color: #0832a6;
+      cursor: pointer;
+      transition: transform 0.3s ease;
+
+      &.is-collapse {
+        transform: rotate(180deg);
+      }
+
+      &:hover {
+        background: #2468f2;
+        color: $white;
+      }
+    }
+
     .#{$ns}Select {
-      font-size: 12px;
+      font-size: px2rem(12px);
       height: px2rem(28px);
-      width: px2rem(62px);
+      width: px2rem(28px);
       background: #d4e5ff;
       border: none;
       color: #0832a6;
@@ -21,16 +55,81 @@
       padding: 0;
       padding-left: px2rem(8px);
       min-height: px2rem(28px);
+
       &:hover {
-        background: #d4e5ff;
+        color: $white;
+        background: #2468f2;
+      }
+
+      &-arrow {
+        display: none;
+      }
+
+      &-menu {
+        padding: 0;
+
+        > .#{$ns}Select-option {
+          font-size: px2rem(12px);
+          font-weight: 500;
+          line-height: 2rem !important;
+          text-align: center;
+          padding: 0 !important;
+        }
+      }
+    }
+
+    &::before {
+      content: ' ';
+      position: absolute;
+      top: px2rem(5px);
+      bottom: px2rem(5px);
+      width: 2px;
+      background-color: #d4e5ff;
+    }
+  }
+
+  &-body {
+    position: relative;
+    &-wrapper {
+      flex: 1;
+    }
+
+    &-collapse {
+      text-align: center;
+      color: #84868c;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      > span {
+        padding: 0 10px;
+        cursor: pointer;
+      }
+
+      &::before,
+      &::after {
+        content: ' ';
+        height: 1px;
+        background: #e8e9eb;
+        display: block;
+        flex: 1;
       }
     }
   }
 
+  &-body-wrapper {
+    flex: 1;
+  }
+
   &-toolbar {
     display: flex;
     flex-direction: row;
-    margin-top: px2rem(8px);
+    padding-top: px2rem(8px);
+
+    &[draggable='true'] {
+      cursor: grab;
+    }
+
     .#{$ns}Button {
       transition: padding var(--animation-duration);
       min-width: unset;
@@ -47,14 +146,14 @@
       display: flex;
       align-items: center;
       .#{$ns}ButtonGroup {
-        & > .cxd-Button:first-child {
+        & > .cxd-Button:not(:last-child) {
           margin-right: px2rem(24px);
         }
       }
 
-      .#{$ns}CBDelete {
-        margin-left: var(--gap-xs);
-      }
+      // .#{$ns}CBDelete {
+      //   margin-left: var(--gap-xs);
+      // }
     }
   }
   .#{$ns}ResultBox {
@@ -104,21 +203,30 @@
 }
 
 .#{$ns}CBDelete {
-  cursor: pointer;
-  margin-left: auto;
+  margin-left: 5px;
+  font-size: 16px;
+  color: #84868c;
+  // cursor: pointer;
+  // margin-left: auto;
 }
 
-.#{$ns}CBGroupOrItem-body-group--hover {
-  & > .#{$ns}CBGroupOrItem-dragbar {
-    opacity: 1 !important;
-  }
-  & > .#{$ns}CBGroup {
-    border-left-color: #2468f1;
-  }
-}
+// .#{$ns}CBGroupOrItem-body-group.is-hover {
+//   & > .#{$ns}CBGroupOrItem-dragbar {
+//     opacity: 1 !important;
+//   }
+//   & > .#{$ns}CBGroup {
+//     border-left-color: #2468f1;
+//   }
+// }
 
 .#{$ns}CBGroupOrItem {
   position: relative;
+  transition: box-shadow 0.3s ease;
+
+  &.is-hover {
+    box-shadow: #e8ebee 0 2px 10px 0;
+    // cursor: grab;
+  }
 
   & + & {
     margin-top: px2rem(10px);
@@ -144,9 +252,22 @@
       flex-direction: row;
       display: flex;
       align-items: center;
-      margin-top: px2rem(16px);
+      transition: all 0.2s ease;
+      padding-left: 10px;
+
+      // margin-top: px2rem(16px);
+
+      &.is-hover {
+        cursor: grab;
+        box-shadow: 0px 2px 14px 0px rgb(0 0 0 / 16%);
+        border-radius: 8px;
+        padding: 10px;
+        margin: -10px 0px;
+        background: $white;
+        z-index: 1;
+      }
       > .#{$ns}CBGroupOrItem-dragbar {
-        left: px2rem(-16px);
+        left: px2rem(-5px);
         position: absolute;
       }
       > .#{$ns}CBGroup {
@@ -189,11 +310,13 @@
   }
 
   & > &-body > &-body-group > &-dragbar,
-  & > &-body > &-body-item > &-dragbar {
+  & > &-body > &-body-item > &-dragbar,
+  & > &-body > &-body-item > .#{$ns}CBDelete {
     opacity: 0;
   }
 
-  &:hover > &-body > &-body-item > &-dragbar {
+  &:hover > &-body > &-body-item > &-dragbar,
+  &:hover > &-body > &-body-item > .#{$ns}CBDelete {
     opacity: 1;
   }
 

package/scss/components/_drawer.scss

@@ -51,6 +51,7 @@
 
   &-title {
     font-size: var(--Drawer-title-fontSize);
+    font-weight: 500;
     color: var(--Drawer-title-fontColor);
   }
 
@@ -279,10 +280,10 @@
   }
 
   .#{$ns}Drawer-footer {
-    justify-content: flex-start;
+    justify-content: flex-end;
 
     .#{$ns}Button {
-      margin-left: 0;
+      margin-left: var(--Drawer-footer-margin);
       margin-right: var(--gap-xs);
     }
 
@@ -364,4 +365,8 @@
     width: px2rem(12px);
     height: px2rem(24px);
   }
+
+  .#{$ns}Button {
+    margin-left: var(--Drawer-footer-margin);
+  }
 }

package/scss/components/_formula.scss

@@ -392,6 +392,10 @@
     &.is-filled {
       fill: var(--InputFormula-icon-color-onActive);
       color: var(--InputFormula-icon-color-onActive);
+
+      &.icon-function.icon {
+        font-size: var(--InputFormula-icon-size) !important;
+      }
     }
   }
 

package/scss/components/_list.scss

@@ -142,7 +142,7 @@
   @include clearfix();
 
   & + & {
-    border-top: var(--ListItem-borderWidth) solid var(--ListItem-borderColor);
+    border-top: var(--ListItem-borderWidth) solid var(--List-borderColor);
   }
 
   position: relative;

package/scss/components/_modal.scss

@@ -45,6 +45,7 @@
     margin-right: auto;
     margin-top: var(--Modal-content-startMarginTop);
     margin-bottom: var(--gap-md);
+    padding: var(--Modal-body-paddingY) var(--Modal-body-paddingX);
     border: var(--Modal-content-borderWidth) solid
       var(--Modal-content-borderColor);
     border-radius: var(--Modal-content-borderRadius);

package/scss/components/_multiline-text.scss

@@ -0,0 +1,20 @@
+.#{$ns}MultilineText {
+  position: relative;
+  &-counter,
+  &-display {
+    white-space: pre-line;
+    overflow: hidden;
+  }
+
+  &-counter {
+    visibility: hidden;
+    position: absolute;
+    width: 100%;
+    z-index: -99;
+  }
+
+  &-button-wrapper {
+    margin-top: --(gap-xs);
+    text-align: right;
+  }
+}

package/scss/components/_search-box.scss

@@ -120,7 +120,7 @@
     background: var(--SearchBox-hover-color);
 
     &:hover {
-      background: var(--Button--primary-onHover-bg);
+      background: var(--button-primary-hover-bg-color);
     }
   }
 

package/scss/components/_steps.scss

@@ -26,6 +26,8 @@
           .icon {
             width: px2rem(9px);
             height: px2rem(9px);
+            position: relative; 
+            top: 0;
           }
         }
       }

package/scss/components/_table.scss

@@ -1021,6 +1021,20 @@
   }
 }
 
+.#{$ns}InputTable {
+  .#{$ns}Field--quickEditable svg {
+    color: var(--primary);
+
+    &:hover {
+      color: var(--primary-onHover);
+    }
+
+    &:active {
+      color: var(--primary-onActive);
+    }
+  }
+}
+
 .#{$ns}InputTable-toolbar {
   display: flex;
   flex-direction: row;

package/scss/components/_tabs.scss

@@ -837,7 +837,7 @@
           height: calc(100% - var(--Tabs--chrome-radius-size) * 2);
           position: absolute;
           right: -2px;
-          background: var(--Tabs--chrome-right-boder-color);
+          background: var(--Tabs--chrome-right-border-color);
           top: var(--Tabs--chrome-radius-size);
         }
 

package/scss/components/form/_checks.scss

@@ -110,7 +110,10 @@
     &.#{$ns}Checkbox {
       &:hover {
         & > input + i {
-          border-color: var(--Button--primary-onHover-bg);
+          border-color: var(--button-primary-hover-top-border-color)
+            var(--button-primary-hover-right-border-color)
+            var(--button-primary-hover-bottom-border-color)
+            var(--button-primary-hover-left-border-color);
         }
       }
 
@@ -129,11 +132,11 @@
 
     &:hover {
       input:checked + i {
-        background: var(--Button--primary-onHover-bg);
+        background: var(--button-primary-hover-bg-color);
         border-color: transparent;
 
         &:before {
-          background: var(--Button--primary-onHover-bg);
+          background: var(--button-primary-hover-bg-color);
         }
       }
 
@@ -263,8 +266,8 @@
     &:hover {
       input:checked + i {
         background: transparent;
-        border-color: var(--Button--primary-onHover-bg) transparent transparent
-          var(--Button--primary-onHover-bg);
+        border-color: var(--button-primary-hover-top-border-color) transparent
+          transparent var(--button-primary-hover-left-border-color);
       }
     }
 
@@ -474,6 +477,18 @@
   }
 }
 
+.#{$ns}Form-static .#{$ns}Checkbox {
+  input {
+    &[disabled]:checked + i {
+      background: var(--Checkbox-onHover-bg);
+      &:before {
+        background: var(--Checkbox-onHover-bg);
+        border-color: var(--Checkbox-onHover-bg);
+      }
+    }
+  }
+}
+
 .#{$ns}CheckboxControl,
 .#{$ns}RadiosControl,
 .#{$ns}CheckboxesControl {

package/scss/components/form/_combo.scss

@@ -27,27 +27,66 @@
       height: var(--Combo-addBtn-fontSize);
     }
 
-    font-size: var(--Combo-addBtn-fontSize);
-
     @include button-size(
-      var(--Combo-addBtn-paddingY),
-      var(--Combo-addBtn-paddingX),
       var(--Combo-addBtn-fontSize),
       var(--Combo-addBtn-lineHeight),
       var(--Combo-addBtn-borderRadius),
-      var(--Combo-addBtn-height)
+      var(--Combo-addBtn-borderRadius),
+      var(--Combo-addBtn-borderRadius),
+      var(--Combo-addBtn-borderRadius),
+      var(--Combo-addBtn-height),
+      var(--Combo-addBtn-paddingY),
+      var(--Combo-addBtn-paddingY),
+      var(--Combo-addBtn-paddingX),
+      var(--Combo-addBtn-paddingX)
     );
 
     @include button-variant(
       var(--Combo-addBtn-bg),
-      var(--Combo-addBtn-border),
       var(--Combo-addBtn-color),
+      var(--Combo-addBtn-border),
+      var(--Combo-addBtn-border),
+      var(--Combo-addBtn-border),
+      var(--Combo-addBtn-border),
+      var(--button-default-default-top-border-width),
+      var(--button-default-default-right-border-width),
+      var(--button-default-default-bottom-border-width),
+      var(--button-default-default-left-border-width),
+      var(--button-default-default-top-border-style),
+      var(--button-default-default-right-border-style),
+      var(--button-default-default-bottom-border-style),
+      var(--button-default-default-left-border-style),
+      var(--button-default-default-shadow),
       var(--Combo-addBtn-onHover-bg),
-      var(--Combo-addBtn-onHover-border),
       var(--Combo-addBtn-onHover-color),
+      var(--Combo-addBtn-onHover-border),
+      var(--Combo-addBtn-onHover-border),
+      var(--Combo-addBtn-onHover-border),
+      var(--Combo-addBtn-onHover-border),
+      var(--button-default-hover-top-border-width),
+      var(--button-default-hover-right-border-width),
+      var(--button-default-hover-bottom-border-width),
+      var(--button-default-hover-left-border-width),
+      var(--button-default-hover-top-border-style),
+      var(--button-default-hover-right-border-style),
+      var(--button-default-hover-bottom-border-style),
+      var(--button-default-hover-left-border-style),
+      var(--button-default-hover-shadow),
       var(--Combo-addBtn-onActive-bg),
+      var(--Combo-addBtn-onActive-color),
+      var(--Combo-addBtn-onActive-border),
+      var(--Combo-addBtn-onActive-border),
+      var(--Combo-addBtn-onActive-border),
       var(--Combo-addBtn-onActive-border),
-      var(--Combo-addBtn-onActive-color)
+      var(--button-default-active-top-border-width),
+      var(--button-default-active-right-border-width),
+      var(--button-default-active-bottom-border-width),
+      var(--button-default-active-left-border-width),
+      var(--button-default-active-top-border-style),
+      var(--button-default-active-right-border-style),
+      var(--button-default-active-bottom-border-style),
+      var(--button-default-active-left-border-style),
+      var(--button-default-active-shadow)
     );
 
     &.is-disabled {

package/scss/components/form/_date-range.scss

@@ -47,7 +47,7 @@
     line-height: px2rem(30px);
 
     &::placeholder {
-      color: #{$G6};
+      color: var(--colors-neutral-text-6);
     }
   }
 

package/scss/components/form/_date.scss

@@ -25,7 +25,7 @@
       box-sizing: none;
     }
     &::placeholder {
-      color: #{$G6};
+      color: var(--colors-neutral-text-6);
     }
   }
 
@@ -217,7 +217,6 @@
       height: #{px2rem(43px)};
       padding-top: #{px2rem(11px)};
       margin-left: #{px2rem(2px)};
-      border-bottom: 1px solid var(--Calendar-input-borderColor);
     }
   }
 
@@ -263,6 +262,9 @@
     }
 
     td.rdtToday {
+      > span {
+        border: 1px solid var(--Calendar-borderColor);
+      }
       &:hover span {
         background: transparent;
       }

package/scss/components/form/_fieldset.scss

@@ -31,7 +31,7 @@
 }
 
 fieldset.#{$ns}Collapse {
-  margin-bottom: var(--Form-item-gap);
+  border: none;
   > legend {
     font-weight: var(--fontWeightNormal);
     padding: var(--gap-xs) 0;
@@ -44,8 +44,9 @@ fieldset.#{$ns}Collapse {
     cursor: pointer;
     border-bottom: none !important;
     background: transparent;
-    display: flex;
-    flex-direction: row;
+    display: inline-flex !important;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
     // width: 100%;
     &:hover {
       background: transparent;

package/scss/components/form/_form.scss

@@ -25,8 +25,10 @@
 
 .#{$ns}Form-static {
   min-height: var(--Form-input-height);
-  padding-top: var(--Form-label-paddingTop);
-  padding-bottom: var(--Form-label-paddingTop);
+  &:not(.is-noPaddingY-static) {
+    padding-top: var(--Form-label-paddingTop);
+    padding-bottom: var(--Form-label-paddingTop);
+  }
   margin-bottom: 0;
   word-break: break-word;
 
@@ -77,6 +79,7 @@
 
 .#{$ns}Form-description {
   display: block;
+  word-break: break-word;
   color: var(--Form-description-color);
   margin: var(--Form-input-marginBottom) 0 0;
   font-size: var(--Form-description-fontSize);
@@ -403,9 +406,9 @@
   position: relative;
 }
 
-.#{$ns}Form--quickEdit {
-  min-width: var(--Form-control-widthSm);
-}
+// .#{$ns}Form--quickEdit {
+//   min-width: var(--Form-control-widthSm);
+// }
 
 .#{$ns}Form--column {
   display: flex;
@@ -527,6 +530,9 @@
           background: transparent;
         }
       }
+      .#{$ns}SelectControl.#{$ns}Form-control {
+        overflow: hidden;
+      }
 
       .#{$ns}Form-hint,
       .#{$ns}Form-remark,