amis-ui 2.0.2 → 2.2.0

package/scss/components/form/_tree.scss

@@ -85,6 +85,7 @@
 
   &-itemLabel {
     display: flex;
+    flex-direction: row;
     align-items: center;
     position: relative;
     user-select: none;
@@ -98,16 +99,38 @@
       display: inline-flex;
       align-self: center;
     }
-  
+    &-item {
+      padding-left: var(--Tree-item-arrow-padding-left);
+      display: inline-flex;
+      width: 100%;
+      align-items: center;
+      overflow: hidden;
+      height: px2rem(32px);
+    }
+
     &:hover {
-      background: var(--Tree-item-onHover-bg-pure);
+      .#{$ns}Tree {
+        &-itemLabel-item {
+          background-color: var(--Tree-item-onHover-bg-pure);
+        }
+        &-item-icons {
+          visibility: visible;
+        }
+      }
     }
   }
 
   &-item {
     .is-checked {
-      background: var(--Tree-item-onChekced-bg);
       border-radius: var(--Tree-item-onChekced-bg-borderRadius);
+      .#{$ns}Tree {
+        &-itemLabel-item {
+          background-color: var(--Tree-item-onChekced-bg);
+        }
+        &-item-icons {
+          visibility: visible;
+        }
+      }
     }
     .is-disabled {
       color: var(--text--muted-color);
@@ -136,7 +159,6 @@
       vertical-align: middle;
       margin-left: var(--Tree-icon-gap);
       cursor: pointer;
-
       > svg {
         $svgSize: px2rem(12px);
         width: $svgSize;
@@ -235,6 +257,7 @@
       display: block;
       transition: transform var(--animation-duration);
       top: 0;
+      color: var(--Tree-item-arrow-color);
     }
 
     &.is-folded > svg {
@@ -258,7 +281,7 @@
 
   &-itemIcon {
     display: inline-flex;
-    margin-right: var(--Tree-icon-gap);
+    margin-right: var(--Tree-icon-margin-right);
   }
 
   &-rootIcon,
@@ -270,13 +293,16 @@
       height: px2rem(14px);
     }
   }
-    
 
   &-itemText {
     cursor: pointer;
     flex: 1 auto;
+    display: inline-block;
     color: var(--Form-input-color);
-    line-height: var(--lineHeightBase);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   .is-disabled &-itemText {
     color: var(--text--muted-color);

package/scss/components/react-datetime.scss

@@ -16,6 +16,11 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   border: 1px solid #f9f9f9;
 }
+
+.rdtPickerNotDays {
+  width: 192px;
+}
+
 .rdtOpen .rdtPicker {
   display: block;
 }
@@ -57,7 +62,7 @@
   > span {
     display: inline-block;
     border-radius: 2px;
-    height: 100%;
+    height: 24px;
     width: 24px;
   }
 }

package/scss/themes/_common.scss

@@ -50,7 +50,7 @@
 @import '../components/crud';
 @import '../components/crud2';
 @import '../components/table';
-@import '../components/table-v2';
+@import '../components/table2';
 @import '../components/column-toggler';
 @import '../components/list';
 @import '../components/cards';

package/scss/themes/_cxd-variables.scss

@@ -86,7 +86,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --borderColor: #{$G8};
   --borderRadius: #{$R3};
   --body-bg: #ffffff;
-  --text-color: #151a26;
+  --text-color: #151b26;
 
   --text--muted-color: #{$G6};
   --text--loud-color: #333;
@@ -144,7 +144,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Form-input-onDisabled-borderColor: #{$G8};
   --Form-input-onDisabled-color: #{$G5};
   --Form-input-iconColor: #{$G5};
-  --Form-input-paddingX: #{px2rem(10px)};
+  --Form-input-paddingX: var(--gap-base);
   --Form-description-color: #999;
   --Form--horizontal-label-whiteSpace: normal;
   --Form--horizontal-label-widthXs: #{px2rem(50px)};
@@ -558,7 +558,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --TransferSelect-heading-borderBottom: 0;
 
   // Alert
-  --Alert-fontColor: #{$G4};
+  --Alert-fontColor: #{$G2};
   --Alert-title-fontColor: #{$G2};
 
   --Alert-height: #{px2rem(40px)};
@@ -567,19 +567,19 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Alert-borderRadius: #{$R3};
   --Alert-marginBottom: var(--gap-md);
 
-  --Alert--danger-color: #{$G4};
+  --Alert--danger-color: #{$G2};
   --Alert--danger-bg: #{$danger-bg};
   --Alert--danger-borderColor: transparent;
 
-  --Alert--info-color: #{$G4};
+  --Alert--info-color: #{$G2};
   --Alert--info-bg: #{$info-bg};
   --Alert--info-borderColor: transparent;
 
-  --Alert--success-color: #{$G4};
+  --Alert--success-color: #{$G2};
   --Alert--success-bg: #{$success-bg};
   --Alert--success-borderColor: transparent;
 
-  --Alert--warning-color: #{$G4};
+  --Alert--warning-color: #{$G2};
   --Alert--warning-bg: #{$warning-bg};
   --Alert--warning-borderColor: transparent;
 
@@ -655,7 +655,8 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
 
   --Progress-borderRadius: #{$R7};
 
-  --Rating-inactive-color: #{$G9};
+  --Rating-inactive-color: #{$G8};
+  --Rating-text-color: #{$G2};
 
   // tree
   --Tree-item-onHover-bg-pure: #{$G10};

package/scss/themes/cxd.scss

@@ -52,11 +52,6 @@
         // height: var(--Form-input-height);
         line-height: 1.1;
         padding: px2rem(5px) px2rem(12px);
-
-        &.is-highlight:hover > span {
-          color: var(--menu-active-color);
-        }
-
         svg {
           color: var(--default-icon-color);
         }
@@ -243,12 +238,11 @@
 .#{$ns}Modal {
   box-shadow: var(--boxShadow);
   &-content {
-    padding: #{px2rem(24px)};
+    padding: #{px2rem(24px)} 0;
     border-radius: #{$R4};
   }
 
   &-body {
-    padding: #{px2rem(16px)} 0 #{px2rem(24px)} 0;
     font-size: #{$T2};
     font-weight: #{$W2};
   }
@@ -285,7 +279,7 @@
   .#{$ns}Drawer-footer {
     justify-content: flex-end;
     .#{$ns}Button {
-      margin-left: #{px2rem(16px)};
+      margin-left: #{px2rem(12px)};
     }
   }
 }
@@ -396,6 +390,10 @@
 
 //FieldSet Form + Collapse
 .#{$ns}Form {
+  .icon-position-right .#{$ns}Collapse-header,
+  .#{$ns}Collapse--title-bottom .#{$ns}Collapse-header {
+    display: block;
+  }
   .#{$ns}Collapse {
     border: none;
     &-header {

package/esm/components/BarCode2.js

@@ -1,42 +0,0 @@
-/**
- * amis-ui v2.0.2
- * Copyright 2018-2022 fex
- */
-
-import { __extends } from 'tslib';
-import React__default from 'react';
-import { themeable } from 'amis-core';
-import JsBarcode from 'jsbarcode';
-
-/**
- * @file 基于实现 bar code
- */
-var BarCode = /** @class */ (function (_super) {
-    __extends(BarCode, _super);
-    function BarCode(props) {
-        var _this = _super.call(this, props) || this;
-        _this.dom = React__default.createRef();
-        return _this;
-    }
-    BarCode.prototype.componentDidUpdate = function (prevProps) {
-        if (this.props.value !== prevProps.value ||
-            JSON.stringify(this.props.options) !== JSON.stringify(prevProps.options)) {
-            this.renderBarCode();
-        }
-    };
-    BarCode.prototype.renderBarCode = function () {
-        if (this.dom.current) {
-            JsBarcode(this.dom.current, this.props.value, this.props.options);
-        }
-    };
-    BarCode.prototype.componentDidMount = function () {
-        this.renderBarCode();
-    };
-    BarCode.prototype.render = function () {
-        return React__default.createElement("img", { ref: this.dom });
-    };
-    return BarCode;
-}(React__default.Component));
-var BarCode$1 = themeable(BarCode);
-
-export { BarCode, BarCode$1 as default };