amis-ui 2.0.0 → 2.0.1

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
@@ -33,8 +33,8 @@
     }
   },
   "dependencies": {
-    "amis-core": "*",
-    "amis-formula": "*",
+    "amis-core": "^2.0.1",
+    "amis-formula": "^2.0.1",
     "classnames": "2.3.1",
     "codemirror": "^5.63.0",
     "downshift": "6.1.7",
@@ -134,5 +134,5 @@
       }
     }
   },
-  "gitHead": "32dc0167ca8637559ac487006c0e78b627573759"
+  "gitHead": "9bbac8183850bcee3231a016d25590f0d09f41cc"
 }

package/scss/_properties.scss

@@ -1731,4 +1731,9 @@
   --default-padding: 4px 12px; // 6px 12px
   --menu-min-width: 150px; // 一级子项最小宽度
   --menu-sub-min-width: 100px; // 二级子项最小宽度
+
+  --SearchBox-height: #{px2rem(30px)};
+  --SearchBox-width: #{px2rem(150px)};
+  --SearchBox-history-dropdown-maxWidth: calc(var(--SearchBox-width) * 2);
+  --SearchBox-history-dropdown-maxHeight: #{px2rem(200px)};
 }

package/scss/components/_calendar.scss

@@ -1,4 +1,3 @@
-
 .#{$ns}ScheduleCalendar {
   &-icon {
     position: absolute;
@@ -30,9 +29,9 @@
   }
 
   &-text-overflow {
-    white-space:nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     position: absolute;
     width: 100%;
   }
@@ -45,7 +44,7 @@
         background: transparent !important;
       }
     }
-    td.rdtActive:hover{
+    td.rdtActive:hover {
       background: var(--Calendar-cell-onHover-bg);
     }
   }
@@ -108,6 +107,11 @@
     border-radius: px2rem(16px) px2rem(16px) 0 0;
     overflow: hidden;
     border-width: 0;
+
+    &--time {
+      height: fit-content;
+      max-height: 90vh;
+    }
   }
 
   &-wrap {
@@ -189,13 +193,15 @@
       border-spacing: 0 px2rem(4px);
     }
 
-    .rdt .rdtPicker td.rdtActive, .rdt .rdtPicker td.rdtActive:hover {
+    .rdt .rdtPicker td.rdtActive,
+    .rdt .rdtPicker td.rdtActive:hover {
       background: transparent;
       color: var(--Calendar-color);
       text-shadow: none;
     }
 
-    .rdt .rdtPicker tr td.rdtDisabled, .rdt .rdtPicker tr td.rdtDisabled:hover {
+    .rdt .rdtPicker tr td.rdtDisabled,
+    .rdt .rdtPicker tr td.rdtDisabled:hover {
       color: #999;
     }
 
@@ -257,7 +263,7 @@
     }
     &-ranges {
       background: #fff;
-      box-shadow: 0 0 2px 2px rgba(0,0,0,0.02);
+      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.02);
       border-radius: 24px;
       overflow-x: auto;
       position: relative;
@@ -281,8 +287,8 @@
   }
 
   & &-calendar-wrap &-calendar .rdtPicker {
-      width: 100%;
-      padding: 0;
+    width: 100%;
+    padding: 0;
     .rdtOld {
       visibility: hidden;
     }
@@ -309,18 +315,30 @@
 
     .rdtRangeHasEnd,
     .rdtRangeHasEnd:hover {
-      background: linear-gradient(to right, transparent 0%, transparent 50%, var(--Calendar-cell-onBetween-bg) 51%, var(--Calendar-cell-onBetween-bg) 100%) !important;
+      background: linear-gradient(
+        to right,
+        transparent 0%,
+        transparent 50%,
+        var(--Calendar-cell-onBetween-bg) 51%,
+        var(--Calendar-cell-onBetween-bg) 100%
+      ) !important;
     }
 
     .rdtRangeEnd,
     .rdtRangeEnd:hover {
-      background: linear-gradient(to right, var(--Calendar-cell-onBetween-bg) 0%, var(--Calendar-cell-onBetween-bg) 50%, transparent 51%, transparent 100%) !important;
+      background: linear-gradient(
+        to right,
+        var(--Calendar-cell-onBetween-bg) 0%,
+        var(--Calendar-cell-onBetween-bg) 50%,
+        transparent 51%,
+        transparent 100%
+      ) !important;
     }
 
     .rdtToday {
       border: none;
       .calendar-wrap {
-        border: 1px solid #2468F2;
+        border: 1px solid #2468f2;
       }
     }
   }
@@ -363,7 +381,7 @@
     transform: translate(-50%, -50%);
     width: px2rem(136px);
     height: px2rem(36px);
-    background: rgba(0, 0, 0, .9);
+    background: rgba(0, 0, 0, 0.9);
     border-radius: 4px;
     color: #fff;
     display: flex;

package/scss/components/_log.scss

@@ -26,27 +26,55 @@
       font-style: italic;
       margin-right: 5px;
     }
+    &-highlight {
+      background: #ffffb6;
+      display: inline-block;
+      color: #000;
+    }
   }
 
   &-operation {
-    position: absolute;
-    top: 0;
-    left: -16px;
-    .#{$ns}Button {
-      margin-right: var(--gap-xs);
+    position: relative;
+    background: rgba(28, 28, 28, 0.5);
+    & > a {
+      display: inline-flex;
+      flex-direction: row;
+      line-height: var(--Form-input-lineHeight);
+      font-size: var(--Form-input-fontSize);
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: flex-end;
+      height: 30px;
+      width: 30px;
+      padding-left: 8px;
+      transition: all var(--animation-duration) ease-in-out;
+      border: var(--Form-input-borderWidth) solid transparent;
+      border-radius: var(--Form-input-borderRadius);
+      overflow: hidden;
+      height: 30px;
+      width: 30px;
     }
-    &-hidden {
-      background: #f0f2f5;
-      width: 24px;
-      height: 48px;
-      box-shadow: 0 4px 6px 0 rgb(8 14 26 / 4%), 0 1px 10px 0 rgb(8 14 26 / 5%),
-        0 2px 4px -1px rgb(8 14 26 / 6%);
-      border-radius: 0 2px 2px 0;
-      padding-top: 14px;
-      padding-left: 6px;
-      cursor: pointer;
+    a {
       color: #000;
-      transition: all 0.3s;
+    }
+    & > a:hover {
+      background: var(--Form-input-onHover-bg);
+      color: var(--link-color);
+    }
+
+    & > a > svg {
+      margin-right: 8px;
+    }
+
+    & > a.is-disabled {
+      cursor: not-allowed;
+      color: #6b7280;
+    }
+
+    & > a.is-disabled:hover {
+      cursor: not-allowed;
+      background: transparent;
+      color: #6b7280;
     }
   }
 

package/scss/components/_result-box.scss

@@ -2,7 +2,7 @@
   @include input-input();
   @include input-border();
   flex-wrap: nowrap;
-  padding: 0 px2rem(5px);
+  padding: 0 px2rem(12px);
   min-height: var(--Form-input-height);
   align-items: center;
   border-radius: 3px;
@@ -91,8 +91,6 @@
   &-pc-arrow {
     height: 100%;
     margin: auto 0;
-    position: absolute;
-    right: 10px;
     display: flex;
     align-items: center;
     transition: transform var(--animation-duration) ease;

package/scss/components/_search-box.scss

@@ -24,7 +24,7 @@
   &.is-active {
     background: var(--Form-input-bg);
     border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
-    width: 150px;
+    width: var(--SearchBox-width);
     > input {
       flex-grow: 1;
     }
@@ -39,17 +39,10 @@
   }
 
   &-searchBtn {
-    display: flex;
-    width: var(--SearchBox-height);
-    align-items: center;
-    justify-content: center;
-
-    .icon {
-      top: 0;
-    }
+    display: inline-block;
+    padding: #{px2rem(5px)} #{px2rem(10px)};
   }
 
-
   &-activeBtn,
   &-cancelBtn {
     margin-right: 8px;
@@ -136,3 +129,116 @@
     color: var(--SearchBox-enhonce-disabled-search-color);
   }
 }
+
+.#{$ns}SearchBox-history {
+  & > .is-history {
+    width: 100%;
+  }
+
+  .#{$ns}SearchBox-history-dropdown {
+    position: absolute;
+    left: 0;
+    z-index: 998;
+    padding: var(--gap-sm) 0;
+    width: 100%;
+    max-width: var(--SearchBox-history-dropdown-maxWidth);
+    min-height: #{px2rem(72px)};
+    max-height: var(--SearchBox-history-dropdown-maxHeight);
+    background: var(--white);
+    border: var(--borderWidth) solid var(--borderColor);
+    border-top: none;
+    border-radius: var(--borderRadius);
+    box-shadow: var(--boxShadow);
+    display: none;
+
+    &.is-active {
+      display: block;
+    }
+
+    header {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 var(--gap-md);
+      margin-bottom: #{px2rem(10px)};
+
+      h4 {
+        font-size: var(--fontSizeBase);
+        height: #{px2rem(24px)};
+        line-height: #{px2rem(24px)};
+        font-weight: bold;
+        margin: 0;
+      }
+
+      a {
+        display: inline-block;
+        font-size: var(--fontSizeSm);
+        cursor: pointer;
+        padding: 0;
+      }
+    }
+  }
+
+  .#{$ns}SearchBox-history-content {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0 var(--gap-md);
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: calc(
+      var(--SearchBox-history-dropdown-maxHeight) - 38px - var(--gap-sm) * 2
+    );
+  }
+
+  .#{$ns}SearchBox-history-tag {
+    display: inlin-flex;
+    height: var(--Tag-height);
+    padding: 0 var(--gap-sm);
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    font-size: var(--Tag-content-fontSize);
+    max-width: 160px;
+    border-radius: var(--Tag-borderRadius);
+    background-color: var(--Tag-default-color);
+    color: var(--Tag-fontColor);
+    margin-bottom: var(--gap-sm);
+    margin-right: var(--gap-sm);
+    max-width: 96px;
+    cursor: pointer;
+
+    &-text {
+      display: inline-block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      line-height: 24px;
+    }
+
+    &-close {
+      margin-left: var(--gap-sm);
+      margin-right: var(--gap-xs);
+      cursor: pointer;
+
+      i {
+        font-size: #{px2rem(8px)};
+      }
+
+      .icon {
+        width: #{px2rem(8px)};
+        height: #{px2rem(8px)};
+        position: inherit;
+      }
+
+      &:hover {
+        opacity: 0.7;
+      }
+      &:active {
+        opacity: 0.3;
+      }
+    }
+  }
+}

package/scss/components/_table.scss

@@ -15,6 +15,14 @@
     z-index: var(--Table-fixed-zIndex);
     top: auto;
     box-shadow: none;
+
+    &--autoFillHeight {
+      & > table thead {
+        position: sticky; // 简单实现表头吸顶效果，不考虑 IE 11 不然太麻烦
+        top: 0;
+        z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
+      }
+    }
   }
 
   &-fixedLeft {
@@ -606,7 +614,7 @@
     display: inline-block;
     vertical-align: top;
     padding-left: var(--gap-sm);
-    
+
     &:hover {
       color: var(--TableCell-searchBtn--onActive-color);
     }

package/scss/components/_tag.scss

@@ -2,17 +2,24 @@
   display: inline-flex;
   height: var(--Tag-height);
   padding: 0 var(--gap-sm);
+  flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
   font-size: var(--Tag-content-fontSize);
   max-width: 160px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
   transition: all 0.3;
   border-radius: var(--Tag-borderRadius);
   background-color: var(--Tag-default-color);
   color: var(--Tag-fontColor);
+
+  &-text {
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    line-height: var(--Tag-height);
+  }
+
   &:not(:last-child) {
     margin-right: var(--gap-sm);
   }
@@ -47,6 +54,8 @@
     border-radius: calc((var(--Tag-height) + 2px) / 2);
     border: 1px solid var(--Tag-default-color);
     color: var(--Tag-default-color);
+    line-height: 22px;
+
     &--inactive {
       border-color: var(--Tag-inactive-color);
       color: var(--Tag-inactive-color);

package/scss/components/form/_form.scss

@@ -387,6 +387,11 @@
   }
 }
 
+.#{$ns}Form--debug {
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
 .#{$ns}Form--quickEdit {
   min-width: var(--Form-control-widthSm);
 }