chore: CRUD 调整方便外围覆盖

packages/amis-core/src/RootRenderer.tsx

@@ -234,11 +234,11 @@ export class RootRenderer extends React.Component<RootRendererProps> {
         );
       });
     } else if (action.actionType === 'toast') {
-      action.toast?.items?.forEach((item: any) => {
+      action.toast?.items?.forEach(({level, body, title, ...item}: any) => {
         env.notify(
-          item.level || 'info',
-          item.body
-            ? render('body', item.body, {
+          level || 'info',
+          body
+            ? render('body', body, {
                 ...this.props,
                 data: ctx,
                 context: store.context
@@ -247,8 +247,8 @@ export class RootRenderer extends React.Component<RootRendererProps> {
           {
             ...action.toast,
             ...item,
-            title: item.title
-              ? render('title', item.title, {
+            title: title
+              ? render('title', title, {
                   ...this.props,
                   data: ctx,
                   context: store.context

packages/amis-ui/scss/_mixins.scss

@@ -661,7 +661,8 @@
     line-height: calc(
       var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
     );
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     font-size: var(--Pick-base-value-fontSize);
     color: var(--Pick-base-value-color);
     font-weight: var(--Pick-base-value-fontWeight);
@@ -682,9 +683,6 @@
       var(--Pick-base-top-right-border-radius)
       var(--Pick-base-bottom-right-border-radius)
       var(--Pick-base-bottom-left-border-radius);
-    margin-right: var(--gap-xs);
-    margin-bottom: var(--gap-xs);
-    margin-top: var(--gap-xs);
     max-width: px2rem(150px);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -696,15 +694,18 @@
 
     &.is-disabled {
       pointer-events: none;
-      opacity: var(--Button-onDisabled-opacity);
+
+      .#{$ns}#{$component-prefix}-valueIcon {
+        opacity: var(--Button-onDisabled-opacity);
+      }
     }
   }
 
   .#{$ns}#{$component-prefix}-valueIcon {
     color: var(--Pick-base-value-icon-color);
     cursor: pointer;
     border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
-    padding: 1px 5px;
+    padding: 0 5px;
 
     &:hover {
       background: var(--Pick-base-value-hover-icon-color);

packages/amis-ui/scss/_properties.scss

@@ -179,6 +179,7 @@ $Table-strip-bg: transparent;
   --ButtonGroup-divider-width: #{px2rem(1px)};
   --ButtonGroup-divider-color: #fff;
   --ButtonGroup-borderWidth: var(--borders-width-2);
+  --Button-onDisabled-opacity: 0.3;
 
   --Breadcrumb-item-fontSize: var(--fontSizeMd);
   --Breadcrumb-item-default-color: var(--colors-neutral-text-5);

packages/amis-ui/scss/components/_crud.scss

@@ -9,6 +9,10 @@
 
   &-selection {
     margin-bottom: var(--gap-base);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-xs);
+    line-height: 1;
 
     &-overflow {
       &-wrapper {
@@ -25,6 +29,7 @@
           (var(--Picker-tag-height) + var(--Picker-tag-marginBottom)) * 5
         );
 
+        gap: var(--gap-xs);
         @include tag-item(Crud);
       }
     }

packages/amis-ui/scss/components/form/_picker.scss

@@ -71,7 +71,8 @@
     font-size: var(--Pick-base-placeholder-fontSize);
     font-weight: var(--Pick-base-placeholder-fontWeight);
     user-select: none;
-    position: absolute;
+    flex: 1;
+    min-width: 0;
     // margin-top: 2 * var(--Form-input-borderWidth);
     line-height: var(--Form-input-lineHeight);
     padding: var(--Pick-base-paddingTop) var(--Pick-base-paddingRight)
@@ -95,15 +96,15 @@
       var(--Pick-base-left-border-color);
   }
 
-  .#{$ns}Picker-values {
-    display: inline;
+  // .#{$ns}Picker-values {
+  //   display: inline;
 
-    .#{$ns}OverflowTpl {
-      .#{$ns}Picker-valueLabel {
-        pointer-events: auto;
-      }
-    }
-  }
+  //   .#{$ns}OverflowTpl {
+  //     .#{$ns}Picker-valueLabel {
+  //       pointer-events: auto;
+  //     }
+  //   }
+  // }
 
   &-valueWrap {
     flex-grow: 1;
@@ -117,8 +118,9 @@
   }
 
   .#{$ns}Picker-valueWrap {
-    margin-bottom: calc(var(--gap-xs) * -1);
-    line-height: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-xs);
   }
 
   /* tag 样式 */
@@ -176,6 +178,7 @@
         (var(--Picker-tag-height) + var(--Picker-tag-marginBottom)) * 5
       );
 
+      gap: var(--gap-xs);
       @include tag-item(Picker);
     }
   }

packages/amis/__tests__/renderers/Picker.test.tsx

@@ -296,13 +296,15 @@ describe('5. Renderer:Picker with overflowConfig', () => {
 
     await wait(500);
 
-    const tags = container.querySelector('.cxd-Picker-values');
+    const tags = container.querySelector('.cxd-Picker-valueWrap');
 
     expect(tags).toBeInTheDocument();
     /** tag 元素数量正确 */
-    expect(tags?.childElementCount).toEqual(3);
+    expect(tags?.childElementCount).toEqual(4); // 还有个 input
     /** 收纳标签文案正确 */
-    expect(tags?.lastElementChild).toHaveTextContent('+ 1 ...');
+    expect(tags?.lastElementChild?.previousSibling).toHaveTextContent(
+      '+ 1 ...'
+    );
   });
 
   test('5-2. Renderer:Picker embeded', async () => {

packages/amis/__tests__/renderers/__snapshots__/Picker.test.tsx.snap

@@ -38,16 +38,6 @@ exports[`1. Renderer:Picker base 1`] = `
             >
               picker-placeholder
             </div>
-            <div
-              class="cxd-Picker-valueWrap"
-            >
-              <div
-                class="cxd-Picker-values"
-              />
-              <input
-                value=""
-              />
-            </div>
             <span
               class="cxd-Picker-btn"
             >
@@ -267,22 +257,18 @@ exports[`1. Renderer:Picker base 2`] = `
             class="cxd-Picker-valueWrap"
           >
             <div
-              class="cxd-Picker-values"
+              class="cxd-OverflowTpl cxd-Picker-value"
             >
-              <div
-                class="cxd-OverflowTpl cxd-Picker-value"
+              <span
+                class="cxd-Picker-valueIcon"
               >
-                <span
-                  class="cxd-Picker-valueIcon"
-                >
-                  ×
-                </span>
-                <span
-                  class="cxd-Picker-valueLabel"
-                >
-                  B
-                </span>
-              </div>
+                ×
+              </span>
+              <span
+                class="cxd-Picker-valueLabel"
+              >
+                B
+              </span>
             </div>
             <input
               value=""