amis 1.9.0-beta.12 → 1.9.0-beta.15

package/scss/_properties.scss

@@ -241,6 +241,7 @@
   --Button--light-onHover-color: var(--Button--light-color);
   --Button--link-color: var(--primary);
   --Button--link-onDisabled-color: #{$gray600};
+  --Button--link-onDisabled-backgroundColor: transparent;
   --Button--link-onHover-color: var(--primary-onHover);
   --Button--link-onActive-color: var(--primary-onActive);
   --Button--md-fontSize: var(--Button-fontSize);
@@ -1131,7 +1132,10 @@
   --Pagination-onActive-backgroundColor: var(--primary);
   --Pagination-onActive-border: 0;
   --Pagination-onActive-color: var(--white);
+  --Pagination-onDisabled-color: var(--text--muted-color);
+  --Pagination-onDisabled-backgroundColor: #{$gray200};
   --Pagination-padding: 0 #{px2rem(8px)};
+  --Pagination-light-color: #84868c;
 
   --Panel--default-badgeBg: #333;
   --Panel--default-badgeColor: #f5f5f5;
@@ -1305,22 +1309,47 @@
   --Table-searchableForm-borderRadius: #{px2rem(4px)};
 
   --TableCell--edge-paddingX: var(--gap-md);
+  --TableCell--edge-paddingX-default: var(--gap-base);
   --TableCell-filterBtn--onActive-color: var(--primary);
   --TableCell-filterBtn-width: #{px2rem(16px)};
   --TableCell-filterPopOver-dropDownItem-height: #{px2rem(34px)};
   --TableCell-filterPopOver-dropDownItem-padding: 0 #{px2rem(12px)};
+  --TableCell-line-height-large: #{px2rem(40px)};
+  --TableCell-line-height-middle: #{px2rem(30px)};
   --TableCell-height: #{px2rem(40px)};
+  --TableCell-height-default: #{px2rem(41px)};
+  --TableCell-height-large: #{px2rem(61px)};
+  --TableCell-height-small: #{px2rem(33px)};
   --TableCell-paddingX: var(--gap-sm);
+  --TableCell-paddingX-large: var(--gap-base);
+  --TableCell-paddingX-small: var(--gap-xs);
   --TableCell-paddingY: calc(
     (var(--TableCell-height) - var(--Table-fontSize) * var(--Table-lineHeight)) /
       2
   );
+  --TableCell-paddingY-default: calc(
+    (var(--TableCell-height-default) - var(--Table-fontSize) * var(--Table-lineHeight)) /
+      2
+  );
+  --TableCell-paddingY-large: calc(
+    (var(--TableCell-height-large) - var(--Table-fontSize) * var(--Table-lineHeight)) /
+      2
+  );
+  --TableCell-paddingY-small: calc(
+    (var(--TableCell-height-small) - var(--Table-fontSize) * var(--Table-lineHeight)) /
+      2
+  );
   --TableCell-searchBtn--onActive-color: var(--primary);
   --TableCell-searchBtn-width: #{px2rem(16px)};
   --TableCell-sortBtn--default-onActive-opacity: 1;
   --TableCell-sortBtn--default-opacity: 0;
   --TableCell-sortBtn--onActive-color: var(--primary);
   --TableCell-sortBtn-width: #{px2rem(8px)};
+  --TableCell-icon-gap: var(--gap-sm);
+
+  --Table-fixedLeftLast-boxShadow: inset 10px 0 8px -8px #00000026;
+  --Table-fixedRightFirst-boxShadow: inset -10px 0 8px -8px #00000026;
+  --Table-loading-padding: 30px 0px;
 
   --Tabs--card-bg: #f6f8f8;
   --Tabs--card-borderTopColor: var(--borderColor);
@@ -1605,4 +1634,44 @@
   --Timeline--info-bg: var(--info);
   --Timeline--warning-bg: var(--warning);
   --Timeline--danger-bg: var(--danger);
+
+  // tag
+  --Tag-content-fontSize: var(--fontSizeSm);
+  --Tag-height: #{px2rem(24px)};
+  --Tag-borderRadius: #{px2rem(2px)};
+  --Tag-fontColor: #151a26;
+
+  --Tag-default-color: #f2f2f4;
+  --Tag-inactive-color: #b4b6ba;
+  --Tag-active-color: #2468f2;
+  --Tag-processing-color: #1ac5ff;
+  --Tag-success-color: #0bc286;
+  --Tag-error-color: #e8684a;
+  --Tag-warning-color: #ffb200;
+
+  --Tag-checkable-bgColor: #f2f2f4;
+  --Tag-checkable-bgColor-onDisable: #e6e6e8;
+  --Tag-checkable-bgColor-onHover: #e6e6e8;
+  --Tag-checkable-bgColor-onActive: #e6e6e8;
+
+  --Tag-checkable-bgColor-onHover-onChecked: #4f86f4;
+  --Tag-checkable-bgColor-onActive-onChecked: #1c53c1;
+  --Tag-checkable-bgColor-onChecked: #2468f2;
+
+  --Tag-checkable-fontColor-onDisable: #b4b6ba;
+
+  // ContextMenu
+  --menu-background: #fff;
+  --menu-box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
+  --menu-border-radius: 4px;
+  --menu-font-color: #151b26;
+  --menu-font-family: PingFangSC-Regular;
+  --menu-border-color: #e8e9eb; // 默认的边框色
+  --menu-active-color: #2468f2;
+  --menu-hover-bg-color: #e6f0ff;
+  --menu-disabled-color: #b8babf; // 禁用文字颜色
+  --default-icon-color: #84868c; // 默认的icon颜色
+  --default-padding: 4px 12px; // 6px 12px
+  --menu-min-width: 150px; // 一级子项最小宽度
+  --menu-sub-min-width: 100px; // 二级子项最小宽度
 }

package/scss/components/_button.scss

@@ -48,7 +48,6 @@
     box-shadow: none;
     cursor: not-allowed;
     color: var(--text--muted-color);
-    pointer-events: auto;
     border: var(--Button-borderWidth) solid var(--Button-onDisabled-borderColor);
     background: var(--Button-onDisabled-bg);
 
@@ -62,9 +61,44 @@
     cursor: pointer;
   }
 
-  &.cxd-Button--link.is-disabled {
-    background: transparent;
+  &--link {
+    width: auto;
+    min-width: auto;
+    font-weight: var(--fontWeightNormal);
+    color: var(--Button--link-color);
+    text-decoration: var(--link-decoration);
     border: none;
+    height: auto;
+
+    @include hover-focus {
+      color: var(--Button--link-onHover-color);
+      box-shadow: none;
+    }
+
+    @include hover-active {
+      color: var(--Button--link-onActive-color);
+      box-shadow: none;
+    }
+
+    &:disabled,
+    &.is-disabled {
+      color: var(--text--muted-color);
+      border: none;
+      background: var(--Button--link-onDisabled-backgroundColor);
+
+      @include hover-active {
+        color: var(--text--muted-color);
+      }
+    }
+  }
+
+  &--block {
+    display: block;
+    width: 100%;
+
+    + .#{$ns}Button--block {
+      margin-top: var(--gap-base);
+    }
   }
 
   > .pull-left,
@@ -317,42 +351,6 @@ fieldset:disabled a.#{$ns}Button {
   @include button-loading-icon();
 }
 
-.#{$ns}Button--link {
-  width: auto;
-  min-width: auto;
-  font-weight: var(--fontWeightNormal);
-  color: var(--Button--link-color);
-  text-decoration: var(--link-decoration);
-  border: none;
-  height: auto;
-
-  @include hover-focus {
-    color: var(--Button--link-onHover-color);
-    box-shadow: none;
-  }
-
-  @include hover-active {
-    color: var(--Button--link-onActive-color);
-    box-shadow: none;
-  }
-
-  &:disabled,
-  &.is-disabled {
-    color: var(--text--muted-color);
-    pointer-events: none;
-    background: var(--Button-onDisabled-bg);
-  }
-}
-
-.#{$ns}Button--block {
-  display: block;
-  width: 100%;
-
-  + .#{$ns}Button--block {
-    margin-top: var(--gap-base);
-  }
-}
-
 input[type='submit'],
 input[type='reset'],
 input[type='button'] {

package/scss/components/_context-menu.scss

@@ -57,7 +57,7 @@
     position: absolute;
 
     margin: 0;
-    padding: 0;
+    padding: 4px 0;
 
     background: var(--menu-background);
     box-shadow: var(--menu-box-shadow);
@@ -66,21 +66,6 @@
     font-family: var(--menu-font-family);
     font-size: 12px;
     line-height: 20px;
-
-    // 附加的边框线
-    &::before {
-      display: block;
-      position: absolute;
-      content: '';
-      top: -1px;
-      left: -1px;
-      bottom: -1px;
-      right: -1px;
-
-      border-radius: var(--menu-border-radius);
-      border: 1px solid var(--menu-border-color);
-      z-index: -1;
-    }
   }
 
   &-divider {
@@ -95,7 +80,7 @@
     list-style: none;
     margin: 0;
     padding: 0;
-    min-width: 100px;
+    min-width: var(--menu-min-width);
   }
 
   &-item {
@@ -162,7 +147,7 @@
     position: absolute;
     left: 100%; // calc(100% + 3px);
     top: -3px;
-    min-width: 100px;
+    min-width: var(--menu-sub-min-width);
 
     margin: 0;
     padding: 0;

package/scss/components/_json-schema-editor.scss

@@ -0,0 +1,126 @@
+.#{$ns}SchemaEditor {
+  &Props {
+    width: 100%;
+
+    > button {
+      margin-top: 7px;
+    }
+
+    &-placeholder {
+      color: var(--text--muted-color);
+    }
+  }
+
+  &Props--depth {
+    position: relative;
+    margin-left: px2rem(40px);
+
+    &:before {
+      width: 1px;
+      content: '';
+      display: block;
+      position: absolute;
+      top: -10px;
+      bottom: 10px;
+      left: -35px;
+      border-left: dashed 1px var(--icon-color);
+    }
+
+    & .#{$ns}SchemaEditorItem:before {
+      height: 1px;
+      content: '';
+      display: block;
+      position: absolute;
+      top: 17px;
+      width: 25px;
+      left: -35px;
+      border-top: dashed 1px var(--icon-color);
+    }
+
+    & > button {
+      position: relative;
+
+      &:before {
+        height: 1px;
+        content: '';
+        display: block;
+        position: absolute;
+        top: 10px;
+        width: 25px;
+        left: -35px;
+        border-top: dashed 1px var(--icon-color);
+      }
+    }
+  }
+
+  &ArrayProps:before {
+    bottom: 15px;
+  }
+
+  &Item {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--gap-sm);
+
+    align-items: flex-start;
+    position: relative;
+  }
+
+  &Item + &Item {
+    margin-top: var(--gap-sm);
+  }
+
+  &Object,
+  &Array {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--gap-sm);
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  &-itemsLabel {
+    margin-top: calc((var(--Form-input-height) - var(--Switch-height)) / 2);
+  }
+
+  &-caret {
+    display: inline-block;
+    height: px2rem(24px);
+    text-align: center;
+    line-height: px2rem(24px);
+    vertical-align: middle;
+    cursor: pointer;
+    transform: rotate(0deg);
+    transition: transform var(--animation-duration);
+    color: var(--icon-color);
+    margin-top: calc((var(--Form-input-height) - var(--Switch-height)) / 2);
+
+    > svg {
+      width: 10px;
+      height: 10px;
+      top: 0;
+    }
+  }
+
+  &-caret.is-collapsed {
+    transform: rotate(-90deg);
+  }
+
+  &-required {
+    padding-top: 4px;
+  }
+
+  &-key,
+  &-title,
+  &-description {
+    flex: 1;
+    max-width: 300px;
+    min-width: 80px;
+
+    > input {
+      flex-basis: 0;
+    }
+  }
+}

package/scss/components/_pagination.scss

@@ -5,7 +5,8 @@
   border-radius: px2rem(4px);
 
   > li {
-    display: inline;
+    display: inline-flex;
+    cursor: pointer;
 
     > a,
     > span {
@@ -34,6 +35,14 @@
       color: var(--primary);
     }
   }
+  .ellipsis {
+    cursor: unset;
+    > a {
+      cursor: unset;
+      position: relative;
+      top: px2rem(-4px);
+    }
+  }
 
   > li.is-disabled {
     > span,
@@ -64,19 +73,28 @@
       border-radius: var(--borderRadius);
     }
   }
-
+  &-simple {
+    >ul >li {
+      &:hover,
+      &:focus {
+        outline: none;
+      }
+      &.is-active > a {
+        border: none;
+        &:hover,
+        &:focus {
+          border: none;
+        }
+      }
+    }
+  }
   &-prev {
     > span {
       cursor: pointer;
     }
   }
 
-  &-ellipsis {
-    > a > span {
-      position: relative;
-      top: px2rem(-4px);
-    }
-  }
+
 
   &-next {
     > span {
@@ -84,27 +102,90 @@
     }
   }
 
+  &-total {
+    display: inline-block;
+    color: var(--Pagination-light-color);
+  }
+
   &-inputGroup {
     display: inline-flex;
     flex-wrap: nowrap;
     align-items: center;
+    height: var(--Pagination-height);
 
-    input {
-      width: px2rem(56px);
-      height: var(--Pagination-height);
-      border: var(--borderWidth) solid var(--borderColor);
-      border-radius: var(--borderRadius);
-      padding: var(--gap-xs) px2rem(10px);
-      margin: 0 px2rem(10px);
-      text-align: center;
+      &-left {
+        color: var(--Pagination-light-color);
+      }
+      input {
+        min-width: px2rem(50px);
+        width: px2rem(50px);
+        height: var(--Pagination-height);
+        line-height: var(--Pagination-height);
+        // height: var(--Pagination-height);
+        border: none;
+        border: var(--borderWidth) solid var(--borderColor);
+        border-radius: var(--borderRadius) 0 0 var(--borderRadius);
+        padding: var(--Pagination-padding);
+        margin-left: px2rem(10px);
+        text-align: center;
 
-      &:focus {
-        width: auto;
+        &:focus,
+        &:hover {
+          outline: none;
+          // border: var(--borderWidth) solid var(--primary);
+          border-color: var(--primary);
+        }
       }
-      &:focus,
-      &:hover {
-        outline: none;
-        border: var(--borderWidth) solid var(--primary);
+      &-right {
+        display: inline-block;
+        width: px2rem(32px);
+        cursor: pointer;
+        text-align: center;
+        height: var(--Pagination-height);
+        line-height: var(--Pagination-height);
+        border: var(--borderWidth) solid var(--borderColor);
+        border-left: none;
+        border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
+        font-size: var(--fontSizeSm);
+        &:hover {
+          color: var(--primary);
+          border-color: var(--primary);
+          border-left: var(--borderWidth) solid var(--primary);
+        }
+      }
+  }
+}
+
+.#{$ns}Pagination-wrap {
+  line-height: px2rem(30px);
+
+  .#{$ns}Pagination-item {
+    margin-left: px2rem(10px);
+    &:nth-child(1) {
+      margin-left: 0;
+    }
+  }
+  &.disabled {
+    background-color: #fff;
+    .#{$ns}Pagination {
+      > li {
+        > a,
+        > span {
+          color: var(--Pagination-onDisabled-color);
+          cursor: not-allowed;
+        }
+
+        &.is-active {
+          > a,
+          > span,
+          > a:hover,
+          > span:hover,
+          > a:focus,
+          > span:focus {
+            background-color: var(--Pagination-onDisabled-backgroundColor);
+            border-color: var(--Pagination-onDisabled-color);
+          }
+        }
       }
     }
   }
@@ -116,4 +197,4 @@
   }
 
   text-align: right;
-}
+}

package/scss/components/_result-box.scss

@@ -2,7 +2,7 @@
   @include input-input();
   @include input-border();
   flex-wrap: wrap;
-  padding: 0 px2rem(26px) 0 px2rem(3px);
+  padding: 0 px2rem(5px);
   min-height: var(--Form-input-height);
   align-items: center;
   border-radius: 3px;
@@ -172,7 +172,7 @@
       }
     }
   }
-  
+
   &.is-mobile {
     min-height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
     border: none;