amis-ui 3.1.0 → 3.2.0

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

@@ -19,7 +19,7 @@
     display: none;
   }
 
-  &:not(.is-disabled) {
+  &:not(.is-disabled):not(.is-mobile) {
     &:hover {
       background: var(--DatePicker-onHover-bg);
       border-color: var(--DatePicker-onHover-borderColor);
@@ -81,6 +81,7 @@
     font-size: var(--DatePicker-fontSize);
     font-weight: var(--inputDate-default-fontWeight);
     color: var(--inputDate-default-color);
+    text-align: center;
 
     &::placeholder {
       color: var(--colors-neutral-text-6);
@@ -185,10 +186,22 @@
   width: auto;
   // padding-bottom: var(--gap-sm);
   padding: 0;
+
+  &.is-mobile {
+    flex: 1;
+
+    .#{$ns}DateRangePicker-end {
+      margin-top: 0;
+    }
+  }
 }
 
 .#{$ns}DateRangePicker-picker-wrap {
   display: flex;
+
+  &.is-vertical {
+    flex-direction: column;
+  }
 }
 
 .#{$ns}DateRangePicker-start,
@@ -214,6 +227,7 @@
   list-style: none;
   background: #f7f7f9;
   line-height: px2rem(32px);
+  overflow-x: auto;
 }
 
 .#{$ns}DateRangePicker-ranger {
@@ -274,6 +288,10 @@
   border-color: var(--DatePicker-borderColor);
   background: var(--DatePicker-bg);
   border-radius: var(--DatePicker-borderRadius);
+
+  &.is-mobile {
+    display: block;
+  }
 }
 
 // 移动端输入框样式
@@ -281,6 +299,11 @@
   border: 0;
   justify-content: flex-end;
 
+  &.is-focused,
+  &:hover {
+    border: none;
+  }
+
   span,
   a {
     &:focus {
@@ -303,8 +326,4 @@
     flex-grow: unset;
     flex-basis: unset;
   }
-
-  .#{$ns}DateRangePicker-toggler {
-    margin-top: -3px;
-  }
 }

package/scss/components/form/_date.scss

@@ -42,7 +42,7 @@
 
   @include input-border();
 
-  &:not(.is-disabled) {
+  &:not(.is-disabled):not(.is-mobile) {
     cursor: pointer;
 
     &:hover {
@@ -207,15 +207,16 @@
   }
 }
 
-.#{$ns}DatePicker-popup {
-  height: px2rem(300px);
-}
-
 // 移动端输入框样式
 .#{$ns}DatePicker.is-mobile {
   border: 0;
   justify-content: flex-end;
 
+  &.is-focused,
+  &:hover {
+    border: none;
+  }
+
   span,
   a {
     &:focus {
@@ -238,13 +239,10 @@
     flex-grow: unset;
     flex-basis: unset;
   }
-
-  .#{$ns}DatePicker-toggler {
-    margin-top: -3px;
-  }
 }
 
 .#{$ns}DatePicker-popup.#{$ns}DatePicker-mobile {
+  height: px2rem(320px);
   color: red;
   .rdt {
     width: 100%;
@@ -454,7 +452,7 @@
         color: var(--inputTime-active-color);
         background: var(--inputTime-active-bg-color);
       }
-      &:hover {
+      &:not(.is-mobile):hover {
         color: var(--inputTime-hover-color);
         background: var(--inputTime-hover-bg-color);
       }
@@ -464,6 +462,7 @@
 
 .#{$ns}TimeContentWrapper {
   display: flex;
+  justify-content: center;
 }
 
 .#{$ns}TimeRangeHeaderWrapper {
@@ -471,6 +470,7 @@
   padding-top: 10px;
   text-align: center;
   border-bottom: 1px solid var(--Calendar-input-borderColor);
+  margin: 0 px2rem(4px);
 }
 
 .#{$ns}TimeFooterWrapper {

package/scss/components/form/_editor.scss

@@ -109,6 +109,10 @@
       min-height: 500px;
     }
   }
+
+  .monaco-editor .iPadShowKeyboard {
+    display: none;
+  }
 }
 
 .monaco-inputbox > .wrapper {

package/scss/components/form/_fieldset.scss

@@ -25,6 +25,10 @@
     border-left: 0 !important;
   }
 
+  > legend.#{$ns}Collapse-header.is-mobile {
+    position: absolute;
+  }
+
   .collapse {
     position: relative;
   }
@@ -188,4 +192,13 @@ fieldset.#{$ns}Collapse {
       top: calc(var(--fieldSet-size-lg-fontSize) / 2);
     }
   }
+
+  .#{$ns}Collapse-header.is-mobile {
+    padding-left: var(--gap-xs) !important;
+    padding-right: px2rem(18px);
+
+    &:hover {
+      background: var(--white);
+    }
+  }
 }

package/scss/components/form/_form.scss

@@ -415,6 +415,8 @@
   background-color: rgb(250, 250, 250);
   border-radius: var(--borderRadius);
   position: relative;
+  word-wrap: break-word;
+  word-break: break-all;
 }
 
 // .#{$ns}Form--quickEdit {
@@ -489,177 +491,318 @@
 /* 移动端样式调整 */
 @include media-breakpoint-down(sm) {
   .#{$ns}Form {
+    // &::before {
+    //   position: absolute;
+    //   box-sizing: border-box;
+    //   content: ' ';
+    //   pointer-events: none;
+    //   right: 0;
+    //   top: 0;
+    //   left: 0;
+    //   border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
+    // }
+  }
+
+  .#{$ns}Combo-form {
     &::before {
+      border-bottom: none;
+    }
+  }
+
+  .#{$ns}Form-item {
+    display: flex;
+    // flex-wrap: wrap;
+    margin-bottom: 0;
+    padding: var(--Form-item-mobile-gap) 0;
+    position: relative;
+
+    &::after {
       position: absolute;
       box-sizing: border-box;
       content: ' ';
       pointer-events: none;
       right: 0;
-      top: 0;
+      bottom: 0;
       left: 0;
       border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
     }
 
-    .#{$ns}Form-item {
-      display: flex;
-      flex-wrap: wrap;
+    .#{$ns}InputGroup-addOn,
+    .#{$ns}TextControl-addOn {
+      border: none;
+    }
+
+    .#{$ns}Form-label {
+      flex: 0 0 28%;
+      max-width: 28%;
+      min-height: 1px;
+      text-align: left;
+      padding-right: calc(var(--Form--horizontal-gutterWidth) / 2);
+      overflow-wrap: break-word;
+      margin-right: 0;
       margin-bottom: 0;
-      padding: var(--Form-item-gap) 0;
-      position: relative;
+      font-size: var(--fontSizeLg);
 
-      &::after {
-        position: absolute;
-        box-sizing: border-box;
-        content: ' ';
-        pointer-events: none;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
+      > span {
+        line-height: px2rem(32px);
+        display: inline-block;
       }
+    }
 
-      .#{$ns}InputGroup-addOn,
-      .#{$ns}TextControl-addOn {
-        border: none;
-      }
+    .#{$ns}Form-description {
+      font-size: var(--fontSizeBase);
+    }
 
-      > .#{$ns}Form-label {
-        flex: 0 0 28%;
-        max-width: 28%;
-        min-height: 1px;
-        text-align: left;
-        padding-right: calc(var(--Form--horizontal-gutterWidth) / 2);
-        overflow-wrap: break-word;
-        margin-right: 0;
-        margin-bottom: 0;
-        font-size: var(--fontSizeLg);
-      }
+    .#{$ns}TextControl-input {
+      font-size: var(--fontSizeLg);
 
-      .#{$ns}Form-description {
-        font-size: var(--fontSizeBase);
+      input {
+        height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
       }
+    }
 
-      .#{$ns}TextControl-input {
-        font-size: var(--fontSizeLg);
+    .#{$ns}NumberControl {
+      .#{$ns}Number {
+        flex: 1;
+        border: none;
 
-        input {
-          height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
+        .#{$ns}Number-handler-wrap {
+          display: none;
         }
       }
 
-      .#{$ns}Form-value,
-      .#{$ns}Form-control {
-        flex: 1;
-        flex-wrap: wrap;
-        font-size: var(--fontSizeLg);
+      .#{$ns}Select {
+        flex: none;
+        border: none;
+      }
+    }
+
+    .#{$ns}Number--enhance {
+      float: right;
+      border: none;
+
+      &-left-icon,
+      &-right-icon {
+        width: var(--inputNumber-enhance-mobile-icon-width);
+        height: var(--inputNumber-enhance-mobile-icon-height);
+        border: var(--Form-input-borderWidth) solid var(--borderColor);
+        border-radius: var(--Form-input-borderRadius);
+        user-select: none;
 
-        &.is-disabled > .#{$ns}TextControl-input {
-          background: transparent;
+        svg.icon {
+          top: 0;
         }
       }
-      .#{$ns}SelectControl.#{$ns}Form-control {
-        overflow: hidden;
-      }
 
-      .#{$ns}Form-hint,
-      .#{$ns}Form-remark,
-      .#{$ns}Form-static,
-      .#{$ns}Form-group--hor .#{$ns}Form-item,
-      .#{$ns}SwitchControl,
-      .#{$ns}CheckboxControl,
-      .#{$ns}RadiosControl,
-      .#{$ns}CheckboxesControl {
-        padding-top: 0;
-        padding-bottom: 0;
+      .#{$ns}Number-input {
+        text-align: center;
       }
 
-      .#{$ns}Form-group--horizontal .#{$ns}TextControl-input input {
-        height: var(--Form-input-height);
+      .#{$ns}Number--enhance-input {
+        width: var(--inputNumber-enhance-mobile-input-width);
+        text-align: center;
       }
 
-      .#{$ns}Form-hint {
-        font-size: var(--fontSizeBase);
-        margin-left: 0;
-        color: var(--text--muted-color);
+      .#{$ns}InputNumber-enhance-minus,
+      .#{$ns}InputNumber-enhance-plus {
+        width: var(--inputNumber-enhance-mobile-icon-inner-width);
+        height: var(--inputNumber-enhance-mobile-icon-inner-height);
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      .#{$ns}TextControl-placeholder {
-        top: 0;
+      &:hover {
+        .#{$ns}Number-input {
+          padding-left: var(--inputNumber-enhance-default-paddingLeft);
+          padding-right: var(--inputNumber-enhance-default-paddingRight);
+        }
       }
+    }
 
-      .#{$ns}Form-static {
-        min-height: 0;
-      }
+    .#{$ns}Form-value,
+    .#{$ns}Form-control {
+      flex: 1;
+      flex-wrap: wrap;
+      font-size: var(--fontSizeLg);
 
-      .#{$ns}Form-description,
-      .#{$ns}Form-feedback {
-        font-size: var(--fontSizeBase);
+      .#{$ns}ColorPicker {
+        > input {
+          height: 100%;
+        }
       }
 
-      .#{$ns}InputGroup {
-        .#{$ns}Select,
-        .#{$ns}InputGroup-btn .#{$ns}Button {
-          border: none;
-        }
+      .#{$ns}ResultBox {
+        height: 100%;
 
-        > .#{$ns}TextControl-input input {
-          height: var(--Form-input-height);
+        .#{$ns}ResultBox-value-wrap {
+          justify-content: flex-end;
+          text-align: right;
         }
       }
 
-      .#{$ns}ColorPicker {
-        padding: 0;
-        border: none;
+      &.is-disabled > .#{$ns}TextControl-input {
+        background: transparent;
+      }
+    }
+    .#{$ns}SelectControl.#{$ns}Form-control {
+      overflow: hidden;
+    }
 
-        .#{$ns}ColorPicker-arrow {
-          display: none;
-        }
+    .#{$ns}Form-hint,
+    .#{$ns}Form-remark,
+    // .#{$ns}Form-static,
+    .#{$ns}Form-group--hor .#{$ns}Form-item,
+    .#{$ns}SwitchControl,
+    .#{$ns}CheckboxControl,
+    .#{$ns}RadiosControl,
+    .#{$ns}CheckboxesControl {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .#{$ns}SwitchControl,
+    .#{$ns}TransferControl,
+    .#{$ns}TagControl,
+    .#{$ns}CheckboxControl,
+    .#{$ns}TreeSelectControl,
+    .#{$ns}NestedSelectControl,
+    .#{$ns}TabsTransferControl {
+      padding-top: px2rem(3px);
+    }
+
+    &--inline {
+      margin-right: 0;
+    }
+
+    .#{$ns}Form-item-controlBox {
+      flex: 1;
+    }
+
+    .#{$ns}Form-static {
+      .#{$ns}Progress {
+        margin-top: px2rem(3px);
       }
 
-      .#{$ns}Form-group--hor .#{$ns}Form-item .#{$ns}Button {
-        margin-bottom: var(--gap-xs);
+      .#{$ns}Field-quickEditBtn {
+        vertical-align: baseline;
       }
+    }
+
+    .#{$ns}Form-group--horizontal .#{$ns}TextControl-input input {
+      height: var(--Form-input-height);
+    }
+
+    .#{$ns}Form-hint {
+      font-size: var(--fontSizeBase);
+      margin-left: 0;
+      color: var(--text--muted-color);
+    }
+
+    .#{$ns}TextControl-placeholder {
+      top: 0;
+    }
+
+    .#{$ns}Form-static {
+      min-height: 0;
+    }
+
+    .#{$ns}Form-description,
+    .#{$ns}Form-feedback {
+      font-size: var(--fontSizeBase);
+    }
 
-      .#{$ns}TextareaControl > textarea,
-      .#{$ns}Form-control > .#{$ns}TextControl-input,
-      .#{$ns}TextControl.is-focused > .#{$ns}TextControl-input {
+    .#{$ns}InputGroup {
+      .#{$ns}Select,
+      .#{$ns}InputGroup-btn .#{$ns}Button {
         border: none;
-        padding: 0 var(--Form-input-paddingX) 0 0;
-        box-shadow: none;
-
-        &:hover,
-        &:focus,
-        &.active {
-          border: none;
-          outline: none;
-          outline-style: none;
-        }
       }
 
-      .#{$ns}Form-control > .#{$ns}TextControl-input--multiple {
-        padding: 0;
-        min-height: 0;
+      > .#{$ns}TextControl-input input {
+        height: var(--Form-input-height);
       }
     }
 
-    .#{$ns}Form-groupColumn {
-      margin-bottom: 0;
+    .#{$ns}ColorPicker {
+      padding: 0;
+      border: none;
+
+      .#{$ns}ColorPicker-arrow {
+        display: none;
+      }
     }
 
-    > .#{$ns}Form-item.is-placeholder::after {
-      display: none;
+    .#{$ns}Form-group--hor .#{$ns}Form-item .#{$ns}Button {
+      margin-bottom: var(--gap-xs);
     }
 
-    .#{$ns}Divider {
-      display: none;
+    .#{$ns}TextareaControl > textarea,
+    .#{$ns}Form-control > .#{$ns}TextControl-input,
+    .#{$ns}TextControl.is-focused > .#{$ns}TextControl-input {
+      border: none;
+      padding: 0 var(--Form-input-paddingX) 0 0;
+      box-shadow: none;
+      border-radius: 0;
+
+      &:hover,
+      &:focus,
+      &.active {
+        border: none;
+        outline: none;
+        outline-style: none;
+      }
     }
 
-    .#{$ns}Tabs-pane {
+    .#{$ns}Form-control > .#{$ns}TextControl-input--multiple {
       padding: 0;
+      min-height: 0;
     }
+  }
+
+  .#{$ns}Form-groupColumn {
+    margin-bottom: 0;
+  }
+
+  .#{$ns}Form-item:nth-last-of-type(1) {
+    &::after {
+      display: none;
+    }
+  }
+
+  .#{$ns}Form-item.is-placeholder::after {
+    display: none;
+  }
+
+  // .#{$ns}Divider {
+  //   display: none;
+  // }
+
+  .#{$ns}Tabs-pane {
+    padding: 0;
+  }
+
+  .#{$ns}Form-item .#{$ns}Form-groupColumn > .#{$ns}Form-item {
+    padding-bottom: var(--Form-input-paddingX);
+  }
+
+  .#{$ns}Form-groupColumn {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      box-sizing: border-box;
+      content: ' ';
+      pointer-events: none;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
+    }
+  }
 
-    .#{$ns}Form-item .#{$ns}Form-groupColumn > .#{$ns}Form-item {
-      padding-bottom: var(--Form-input-paddingX);
+  .#{$ns}Form-groupColumn:nth-last-of-type(1) {
+    &::after {
+      display: none;
     }
   }
 }

package/scss/components/form/_input-group.scss

@@ -151,6 +151,12 @@
   .#{$ns}Form-static {
     margin-right: var(--gap-xs);
   }
+
+  &.is-mobile {
+    .#{$ns}Form-control {
+      display: inline-flex;
+    }
+  }
 }
 
 .#{$ns}InputGroup:not(.is-inline) {

package/scss/components/form/_location.scss

@@ -39,6 +39,16 @@
     }
   }
 
+  &.is-mobile {
+    border: none;
+
+    .#{$ns}LocationPicker-toggler {
+      svg {
+        top: 0.125rem;
+      }
+    }
+  }
+
   &-placeholder {
     color: var(--colors-neutral-text-6);
     user-select: none;
@@ -51,6 +61,8 @@
     margin-right: var(--gap-base);
     flex-basis: 0;
     flex-grow: 1;
+    overflow-x: auto;
+    max-width: calc(100% - px2rem(20px));
   }
 
   &-toggler {
@@ -72,6 +84,27 @@
       top: 0;
     }
   }
+
+  &-popup {
+    height: px2rem(460px);
+
+    &-inner {
+      flex: 1;
+      padding: 0 px2rem(16px);
+
+      .#{$ns}MapPicker-search {
+        padding-top: 0;
+        margin-bottom: px2rem(16px);
+
+        .#{$ns}TextControl-input {
+          border-radius: 0;
+          border-top: none;
+          border-right: none;
+          border-left: none;
+        }
+      }
+    }
+  }
 }
 
 .#{$ns}LocationControl {
@@ -81,6 +114,12 @@
     border: none;
     box-shadow: var(--boxShadow);
   }
+
+  &.is-mobile {
+    flex: 1;
+    text-align: right;
+    overflow: hidden;
+  }
 }
 
 .#{$ns}LocationControl:not(.is-inline) > .#{$ns}LocationPicker {

package/scss/components/form/_matrix.scss

@@ -1,4 +1,6 @@
 .#{$ns}MatrixControl {
+  max-width: 100%;
+
   &-error {
     margin-bottom: 0;
   }