amis 1.5.4 → 1.5.6-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amis",
-  "version": "1.5.4",
+  "version": "1.5.6-beta.5",
   "description": "一种MIS页面生成工具",
   "main": "lib/index.js",
   "scripts": {
@@ -38,7 +38,7 @@
     }
   ],
   "dependencies": {
-    "amis-formula": "^1.2.8",
+    "amis-formula": "^1.3.2",
     "ansi-to-react": "^6.1.6",
     "async": "2.6.0",
     "attr-accept": "2.2.2",
@@ -88,9 +88,11 @@
     "tinymce": "^5.10.2",
     "tslib": "^2.3.1",
     "uncontrollable": "7.2.1",
-    "video-react": "0.14.1"
+    "video-react": "0.14.1",
+    "codemirror": "^5.63.0"
   },
   "devDependencies": {
+    "@types/codemirror": "^5.60.3",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@testing-library/react": "^12.0.0",
     "@types/async": "^2.0.45",

package/scss/_variables.scss

@@ -32,7 +32,7 @@ $colors: (
   primary: #007bff,
   secondary: #6c757d,
   success: #28a745,
-  info: #17a2b8,
+  info: #007bff,
   warning: #fad733,
   danger: #dc3545,
   light: #f8f9fa,

package/scss/components/_formula.scss

@@ -0,0 +1,122 @@
+.#{$ns}FormulaEditor {
+  overflow: visible;
+  max-width: 100%;
+  box-sizing: content-box;
+
+  &-header {
+    width: 100%;
+    height: px2rem(40px);
+    line-height: px2rem(40px);
+    padding-left: px2rem(10px);
+    box-sizing: border-box;
+    background: #f3f8fb;
+  }
+
+  &-editor {
+    min-height: px2rem(238px);
+    max-height: px2rem(320px);
+    height: auto;
+    border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+  }
+
+  &.is-error &-editor {
+    border-color: var(--Form-input-onError-borderColor);
+  }
+
+  &.is-focused &-editor {
+    border-color: var(--Form-input-onFocused-borderColor);
+  }
+
+  &-settings {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: space-between;
+    max-height: px2rem(350px);
+    margin: 0 -5px;
+
+    > div {
+      flex: 1;
+      padding: 0 5px;
+      display: flex;
+      flex-direction: column;
+
+      > h3 {
+        padding: 10px 0;
+        margin: 0;
+        flex-shrink: 0;
+      }
+
+      > div {
+        flex: 1;
+        min-height: 0;
+      }
+    }
+  }
+
+  .cm-field,
+  .cm-func {
+    border-radius: 2px;
+    color: #fff;
+    margin: 0 1px;
+    padding: 0 2px;
+  }
+  .cm-field {
+    background: #007bff;
+  }
+  .cm-func {
+    background: #17a2b8;
+  }
+}
+
+.#{$ns}FormulaFuncList {
+  display: flex;
+  flex-direction: column;
+
+  & > &-searchBox {
+    display: flex;
+    width: auto;
+    flex-shrink: 0;
+    margin-bottom: px2rem(8px);
+  }
+
+  &-columns {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+
+    > div:first-child {
+      min-width: 200px;
+      flex-shrink: 0;
+    }
+  }
+  &-funcItem {
+    padding: 0 10px;
+    cursor: pointer;
+
+    &.is-active {
+      color: var(--primary);
+    }
+  }
+  &-groupTitle {
+    padding: 5px 0;
+    background: transparent;
+  }
+  &-groupBody {
+    > div {
+      padding: 5px 0;
+    }
+  }
+  &-funcDetail {
+    padding: 10px 20px;
+  }
+}
+
+.#{$ns}FormulaPicker {
+  &-icon {
+    margin-left: auto;
+  }
+}

package/scss/components/_popup.scss

@@ -0,0 +1,123 @@
+@keyframes PopUpIn {
+  from {
+    height: 0;
+  }
+}
+
+@keyframes PopUpOut {
+  to {
+    height: 0;
+  }
+}
+
+@keyframes PopUpOpacityIn {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes PopUpOpacityOut {
+  to {
+    opacity: 0;
+  }
+}
+.#{$ns}PopUp {
+  width: 100%;
+  position: fixed;
+  background: var(--PopOver-bg);
+  left: 0;
+  bottom: 0;
+  z-index: $zindex-popover;
+  padding: 0;
+  margin: 0;
+  font-weight: var(--fontWeightNormal);
+  letter-spacing: normal;
+  line-height: var(--lineHeightBase);
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+  font-size: var(--fontSizeBase);
+  box-shadow: var(--boxShadow);
+  border: var(--borderWidth) solid var(--borderColor);
+  border-radius: var(--borderRadius);
+  overflow: hidden;
+  &.in,
+  &.out {
+    animation-duration: var(--animation-duration);
+    animation-fill-mode: both;
+  }
+
+  &.in {
+    animation-name: PopUpIn;
+    .#{$ns}PopUp-overlay{
+      animation-name: PopUpOpacityIn;
+    }
+  }
+
+  &.out {
+    animation-name: PopUpOut;
+    .#{$ns}PopUp-overlay{
+      animation-name: PopUpOpacityOut;
+    }
+  }
+
+  &-inner{
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+    box-sizing: border-box;
+    background: $white;
+    padding-top: px2rem(36px);
+  }
+
+  &-closeWrap{
+    width: 100%;
+    position: absolute !important;
+    left: 0;
+    top: 0;
+  }
+
+  &-close{
+    width: px2rem(34px) !important;
+    height: px2rem(34px) !important;
+    padding: px2rem(12px);
+    cursor: pointer;
+  }
+
+  &-content{
+    overflow-y: auto;
+    height: 100%;
+    display: flex;
+  }
+
+  & > * {
+    position: relative;
+    z-index: 2;
+  }
+
+  &-overlay {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);;
+    opacity: 1;
+    animation-duration: var(--animation-duration);
+    animation-fill-mode: both;
+  }
+
+  &--leftBottomLeftTop {
+    margin-top: px2rem(4px);
+  }
+  &--leftTopLeftBottom {
+    margin-top: px2rem(-4px);
+  }
+}

package/scss/components/_steps.scss

@@ -140,3 +140,63 @@
     }
   }
 }
+
+
+.#{$ns}Steps-mobile.#{$ns}Steps--horizontal {
+  .#{$ns}StepsItem {
+
+    &-container {
+      &Wrapper {
+        .#{$ns}StepsItem-body {
+          .#{$ns}StepsItem-title {
+            &::after {
+              display: none !important;
+            }
+          }
+        }
+
+        .#{$ns}StepsItem-body{
+          .#{$ns}StepsItem-title {
+            .#{$ns}StepsItem-subTitle {
+              padding-left: px2rem(5px);
+            }
+          }
+        }
+      }
+
+      &Icon {
+        position: relative;
+        display: block;
+
+        &:after {
+          content: '';
+          position: absolute;
+          right: 0;
+          top: px2rem(15px);
+          height: 1px;
+          left: px2rem(40px);
+          width: 99999px;
+          background-color: var(--Steps-line-bg);
+        }
+      }
+
+      &Icon.is-success {
+        &:after {
+          background-color: var(--Steps-line-success-bg);
+        }
+      }
+    }
+
+    &:last-child {
+      flex: 1;
+
+      .#{$ns}StepsItem-container {
+        &Icon {
+          &:after {
+            display: none !important;
+          }
+        }
+      }
+    }
+  }
+}

package/scss/components/form/_color.scss

@@ -10,6 +10,10 @@
   color: var(--ColorPicker-color);
   border-radius: var(--borderRadius);
 
+  &-popup{
+    height: 80vh;
+  }
+
   &:not(.is-disabled) {
     cursor: pointer;
 

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

@@ -127,6 +127,10 @@
   }
 }
 
+.#{$ns}DateRangePicker-popup {
+   height: 90vh;
+}
+
 @include media-breakpoint-up(sm) {
   .#{$ns}DateRangePicker-wrap {
     white-space: nowrap;

package/scss/components/form/_date.scss

@@ -122,6 +122,9 @@
   }
 }
 
+.#{$ns}DatePicker-popup {
+  height: 80vh;
+}
 // override third-party styles
 .rdt {
   user-select: none;

package/scss/components/form/_tree-select.scss

@@ -15,6 +15,10 @@
     box-shadow: var(--Form-input-boxShadow);
     background: var(--Form-input-onFocused-bg);
   }
+
+  &-popup {
+    height: 80vh;
+  }
 }
 
 .#{$ns}TreeSelect-popover {

package/scss/helper/background/_background-color.scss

@@ -15,7 +15,7 @@ title: 背景色
 | bg-primary | background: #007bff |
 | bg-secondary | background: #6c757d |
 | bg-success | background: #28a745 |
-| bg-info | background: #17a2b8 |
+| bg-info | background: #007bff |
 | bg-warning | background: #28a745 |
 | bg-danger | background: #dc3545 |
 | bg-light | background: #f8f9fa |

package/scss/helper/border/_border-color.scss

@@ -11,7 +11,7 @@ title: 边框颜色
 | border-primary | border-color: #007bff |
 | border-secondary | border-color: #6c757d |
 | border-success | border-color: #28a745 |
-| border-info | border-color: #17a2b8 |
+| border-info | border-color: #007bff |
 | border-warning | border-color: #28a745 |
 | border-danger | border-color: #dc3545 |
 | border-light | border-color: #f8f9fa |

package/scss/helper/typography/_text-color.scss

@@ -13,7 +13,7 @@ title: Text Color
 | text-primary | color: #007bff |
 | text-secondary | color: #6c757d |
 | text-success | color: #28a745 |
-| text-info | color: #17a2b8 |
+| text-info | color: #007bff |
 | text-warning | color: #fad733 |
 | text-danger | color: #dc3545 |
 | text-light | color: #f8f9fa |

package/scss/themes/_common.scss

@@ -18,6 +18,7 @@
 @import '../components/tooltip';
 @import '../components/tpl';
 @import '../components/popover';
+@import '../components/popup';
 @import '../components/picker-columns';
 @import '../components/toast';
 @import '../components/alert';
@@ -117,5 +118,6 @@
 @import '../components/markdown';
 @import '../components/link';
 @import '../components/mapping';
+@import '../components/formula';
 
 @import '../utilities';