@douyinfe/semi-foundation 2.19.0-alpha.6 → 2.19.0-alpha.7

package/button/button.scss

@@ -202,6 +202,9 @@ $module: #{$prefix}-button;
     }
 
     &-group {
+        display: flex;
+        flex-wrap: wrap;
+
         & > .#{$module} {
             margin: 0;
             padding-left: 0;
@@ -257,16 +260,50 @@ $module: #{$prefix}-button;
                 border-top-left-radius: $radius-button_group;
                 border-bottom-left-radius: $radius-button_group;
             }
-            &:not(:last-child) {
-                .#{$prefix}-button-content {
-                    border-right: $width-button_group-border $color-button_group-border-default solid;
-                }
-            }
             &:last-child {
                 border-top-right-radius: $radius-button_group;
                 border-bottom-right-radius: $radius-button_group;
             }
         }
+
+        &-line {
+            display: inline-flex;
+            align-items: center;
+            background-color: $color-button_group-border-default;
+
+            &-primary {
+                background-color: $color-button_primary-bg-default;
+            }
+            &-secondary {
+                background-color: $color-button_secondary-bg-default;
+            }
+            &-tertiary {
+                background-color: $color-button_tertiary-bg-default;
+            }
+            &-warning {
+                background-color: $color-button_warning-bg-default;
+            }
+            &-danger {
+                background-color: $color-button_danger-bg-default;
+            }
+            &-disabled {
+                background-color: $color-button_disabled-bg-default;
+            }
+            &-light {
+                background-color: $color-button_light-bg-default;
+            }
+            &-borderless {
+                background-color: transparent;
+            }
+
+            &::before {
+                display: block;
+                content: '';
+                width: $width-button_group-border;
+                height: $height-button_group_line_default;
+                background-color: $color-button_group-border-default;
+            }
+        }
     }
 }
 

package/button/variables.scss

@@ -141,6 +141,7 @@ $font-button-fontWeight: $font-weight-bold; // 按钮文字字重
 $height-button_large: $height-control-large; // 按钮高度 - 大尺寸
 $height-button_small: $height-control-small; // 按钮高度 - 小尺寸
 $height-button_default: $height-control-default; // 按钮高度 - 默认
+$height-button_group_line_default: 20px; // 分割线高度 - 默认
 
 $width-button-border: $border-thickness; // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小

package/lib/cjs/button/button.css

@@ -186,6 +186,10 @@
 .semi-button-block {
   width: 100%;
 }
+.semi-button-group {
+  display: flex;
+  flex-wrap: wrap;
+}
 .semi-button-group > .semi-button {
   margin: 0;
   padding-left: 0;
@@ -224,13 +228,46 @@
   border-top-left-radius: var(--semi-border-radius-small);
   border-bottom-left-radius: var(--semi-border-radius-small);
 }
-.semi-button-group > .semi-button:not(:last-child) .semi-button-content {
-  border-right: 1px var(--semi-color-border) solid;
-}
 .semi-button-group > .semi-button:last-child {
   border-top-right-radius: var(--semi-border-radius-small);
   border-bottom-right-radius: var(--semi-border-radius-small);
 }
+.semi-button-group-line {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--semi-color-border);
+}
+.semi-button-group-line-primary {
+  background-color: var(--semi-color-primary);
+}
+.semi-button-group-line-secondary {
+  background-color: var(--semi-color-secondary);
+}
+.semi-button-group-line-tertiary {
+  background-color: var(--semi-color-tertiary);
+}
+.semi-button-group-line-warning {
+  background-color: var(--semi-color-warning);
+}
+.semi-button-group-line-danger {
+  background-color: var(--semi-color-danger);
+}
+.semi-button-group-line-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-group-line-light {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-button-group-line-borderless {
+  background-color: transparent;
+}
+.semi-button-group-line::before {
+  display: block;
+  content: "";
+  width: 1px;
+  height: 20px;
+  background-color: var(--semi-color-border);
+}
 
 .semi-rtl .semi-button,
 .semi-portal-rtl .semi-button {

package/lib/cjs/button/button.scss

@@ -202,6 +202,9 @@ $module: #{$prefix}-button;
     }
 
     &-group {
+        display: flex;
+        flex-wrap: wrap;
+
         & > .#{$module} {
             margin: 0;
             padding-left: 0;
@@ -257,16 +260,50 @@ $module: #{$prefix}-button;
                 border-top-left-radius: $radius-button_group;
                 border-bottom-left-radius: $radius-button_group;
             }
-            &:not(:last-child) {
-                .#{$prefix}-button-content {
-                    border-right: $width-button_group-border $color-button_group-border-default solid;
-                }
-            }
             &:last-child {
                 border-top-right-radius: $radius-button_group;
                 border-bottom-right-radius: $radius-button_group;
             }
         }
+
+        &-line {
+            display: inline-flex;
+            align-items: center;
+            background-color: $color-button_group-border-default;
+
+            &-primary {
+                background-color: $color-button_primary-bg-default;
+            }
+            &-secondary {
+                background-color: $color-button_secondary-bg-default;
+            }
+            &-tertiary {
+                background-color: $color-button_tertiary-bg-default;
+            }
+            &-warning {
+                background-color: $color-button_warning-bg-default;
+            }
+            &-danger {
+                background-color: $color-button_danger-bg-default;
+            }
+            &-disabled {
+                background-color: $color-button_disabled-bg-default;
+            }
+            &-light {
+                background-color: $color-button_light-bg-default;
+            }
+            &-borderless {
+                background-color: transparent;
+            }
+
+            &::before {
+                display: block;
+                content: '';
+                width: $width-button_group-border;
+                height: $height-button_group_line_default;
+                background-color: $color-button_group-border-default;
+            }
+        }
     }
 }
 

package/lib/cjs/button/variables.scss

@@ -141,6 +141,7 @@ $font-button-fontWeight: $font-weight-bold; // 按钮文字字重
 $height-button_large: $height-control-large; // 按钮高度 - 大尺寸
 $height-button_small: $height-control-small; // 按钮高度 - 小尺寸
 $height-button_default: $height-control-default; // 按钮高度 - 默认
+$height-button_group_line_default: 20px; // 分割线高度 - 默认
 
 $width-button-border: $border-thickness; // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小

package/lib/cjs/popconfirm/popconfirmFoundation.d.ts

@@ -1,8 +1,10 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     setVisible: (visible: boolean) => void;
-    notifyConfirm: (e: any) => void;
-    notifyCancel: (e: any) => void;
+    updateConfirmLoading: (loading: boolean) => void;
+    updateCancelLoading: (loading: boolean) => void;
+    notifyConfirm: (e: any) => Promise<any> | void;
+    notifyCancel: (e: any) => Promise<any> | void;
     notifyVisibleChange: (visible: boolean) => void;
     notifyClickOutSide: (e: any) => void;
 }

package/lib/cjs/popconfirm/popconfirmFoundation.js

@@ -12,6 +12,8 @@ exports.default = void 0;
 
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
+var _isPromise = _interopRequireDefault(require("../utils/isPromise"));
+
 /* eslint-disable @typescript-eslint/no-empty-function */
 class PopConfirmFoundation extends _foundation.default {
   init() {}
@@ -19,15 +21,39 @@ class PopConfirmFoundation extends _foundation.default {
   destroy() {}
 
   handleCancel(e) {
-    this._adapter.notifyCancel(e);
+    const maybePromise = this._adapter.notifyCancel(e);
+
+    if ((0, _isPromise.default)(maybePromise)) {
+      this._adapter.updateCancelLoading(true);
 
-    this.handleVisibleChange(false);
+      maybePromise.then(result => {
+        this.handleVisibleChange(false);
+
+        this._adapter.updateCancelLoading(false);
+      }, errors => {
+        this._adapter.updateCancelLoading(false);
+      });
+    } else {
+      this.handleVisibleChange(false);
+    }
   }
 
   handleConfirm(e) {
-    this._adapter.notifyConfirm(e);
+    const maybePromise = this._adapter.notifyConfirm(e);
 
-    this.handleVisibleChange(false);
+    if ((0, _isPromise.default)(maybePromise)) {
+      this._adapter.updateConfirmLoading(true);
+
+      maybePromise.then(result => {
+        this._adapter.updateConfirmLoading(false);
+
+        this.handleVisibleChange(false);
+      }, errors => {
+        this._adapter.updateConfirmLoading(false);
+      });
+    } else {
+      this.handleVisibleChange(false);
+    }
   }
 
   handleClickOutSide(e) {

package/lib/es/button/button.css

@@ -186,6 +186,10 @@
 .semi-button-block {
   width: 100%;
 }
+.semi-button-group {
+  display: flex;
+  flex-wrap: wrap;
+}
 .semi-button-group > .semi-button {
   margin: 0;
   padding-left: 0;
@@ -224,13 +228,46 @@
   border-top-left-radius: var(--semi-border-radius-small);
   border-bottom-left-radius: var(--semi-border-radius-small);
 }
-.semi-button-group > .semi-button:not(:last-child) .semi-button-content {
-  border-right: 1px var(--semi-color-border) solid;
-}
 .semi-button-group > .semi-button:last-child {
   border-top-right-radius: var(--semi-border-radius-small);
   border-bottom-right-radius: var(--semi-border-radius-small);
 }
+.semi-button-group-line {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--semi-color-border);
+}
+.semi-button-group-line-primary {
+  background-color: var(--semi-color-primary);
+}
+.semi-button-group-line-secondary {
+  background-color: var(--semi-color-secondary);
+}
+.semi-button-group-line-tertiary {
+  background-color: var(--semi-color-tertiary);
+}
+.semi-button-group-line-warning {
+  background-color: var(--semi-color-warning);
+}
+.semi-button-group-line-danger {
+  background-color: var(--semi-color-danger);
+}
+.semi-button-group-line-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-group-line-light {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-button-group-line-borderless {
+  background-color: transparent;
+}
+.semi-button-group-line::before {
+  display: block;
+  content: "";
+  width: 1px;
+  height: 20px;
+  background-color: var(--semi-color-border);
+}
 
 .semi-rtl .semi-button,
 .semi-portal-rtl .semi-button {

package/lib/es/button/button.scss

@@ -202,6 +202,9 @@ $module: #{$prefix}-button;
     }
 
     &-group {
+        display: flex;
+        flex-wrap: wrap;
+
         & > .#{$module} {
             margin: 0;
             padding-left: 0;
@@ -257,16 +260,50 @@ $module: #{$prefix}-button;
                 border-top-left-radius: $radius-button_group;
                 border-bottom-left-radius: $radius-button_group;
             }
-            &:not(:last-child) {
-                .#{$prefix}-button-content {
-                    border-right: $width-button_group-border $color-button_group-border-default solid;
-                }
-            }
             &:last-child {
                 border-top-right-radius: $radius-button_group;
                 border-bottom-right-radius: $radius-button_group;
             }
         }
+
+        &-line {
+            display: inline-flex;
+            align-items: center;
+            background-color: $color-button_group-border-default;
+
+            &-primary {
+                background-color: $color-button_primary-bg-default;
+            }
+            &-secondary {
+                background-color: $color-button_secondary-bg-default;
+            }
+            &-tertiary {
+                background-color: $color-button_tertiary-bg-default;
+            }
+            &-warning {
+                background-color: $color-button_warning-bg-default;
+            }
+            &-danger {
+                background-color: $color-button_danger-bg-default;
+            }
+            &-disabled {
+                background-color: $color-button_disabled-bg-default;
+            }
+            &-light {
+                background-color: $color-button_light-bg-default;
+            }
+            &-borderless {
+                background-color: transparent;
+            }
+
+            &::before {
+                display: block;
+                content: '';
+                width: $width-button_group-border;
+                height: $height-button_group_line_default;
+                background-color: $color-button_group-border-default;
+            }
+        }
     }
 }
 

package/lib/es/button/variables.scss

@@ -141,6 +141,7 @@ $font-button-fontWeight: $font-weight-bold; // 按钮文字字重
 $height-button_large: $height-control-large; // 按钮高度 - 大尺寸
 $height-button_small: $height-control-small; // 按钮高度 - 小尺寸
 $height-button_default: $height-control-default; // 按钮高度 - 默认
+$height-button_group_line_default: 20px; // 分割线高度 - 默认
 
 $width-button-border: $border-thickness; // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小

package/lib/es/popconfirm/popconfirmFoundation.d.ts

@@ -1,8 +1,10 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     setVisible: (visible: boolean) => void;
-    notifyConfirm: (e: any) => void;
-    notifyCancel: (e: any) => void;
+    updateConfirmLoading: (loading: boolean) => void;
+    updateCancelLoading: (loading: boolean) => void;
+    notifyConfirm: (e: any) => Promise<any> | void;
+    notifyCancel: (e: any) => Promise<any> | void;
     notifyVisibleChange: (visible: boolean) => void;
     notifyClickOutSide: (e: any) => void;
 }

package/lib/es/popconfirm/popconfirmFoundation.js

@@ -1,20 +1,45 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import BaseFoundation from '../base/foundation';
+import isPromise from '../utils/isPromise';
 export default class PopConfirmFoundation extends BaseFoundation {
   init() {}
 
   destroy() {}
 
   handleCancel(e) {
-    this._adapter.notifyCancel(e);
+    const maybePromise = this._adapter.notifyCancel(e);
 
-    this.handleVisibleChange(false);
+    if (isPromise(maybePromise)) {
+      this._adapter.updateCancelLoading(true);
+
+      maybePromise.then(result => {
+        this.handleVisibleChange(false);
+
+        this._adapter.updateCancelLoading(false);
+      }, errors => {
+        this._adapter.updateCancelLoading(false);
+      });
+    } else {
+      this.handleVisibleChange(false);
+    }
   }
 
   handleConfirm(e) {
-    this._adapter.notifyConfirm(e);
+    const maybePromise = this._adapter.notifyConfirm(e);
 
-    this.handleVisibleChange(false);
+    if (isPromise(maybePromise)) {
+      this._adapter.updateConfirmLoading(true);
+
+      maybePromise.then(result => {
+        this._adapter.updateConfirmLoading(false);
+
+        this.handleVisibleChange(false);
+      }, errors => {
+        this._adapter.updateConfirmLoading(false);
+      });
+    } else {
+      this.handleVisibleChange(false);
+    }
   }
 
   handleClickOutSide(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.19.0-alpha.6",
+    "version": "2.19.0-alpha.7",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "f131defbb2a909ebb7035eea975bf3466908ac15",
+    "gitHead": "e4926d98b1e98ec52a3bc8b7c29a51bf223b8208",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/popconfirm/popconfirmFoundation.ts

@@ -1,11 +1,14 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import isPromise from '../utils/isPromise';
 
 export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     setVisible: (visible: boolean) => void;
-    notifyConfirm: (e: any) => void;
-    notifyCancel: (e: any) => void;
+    updateConfirmLoading: (loading: boolean) => void;
+    updateCancelLoading: (loading: boolean) => void;
+    notifyConfirm: (e: any) => Promise<any> | void;
+    notifyCancel: (e: any) => Promise<any> | void;
     notifyVisibleChange: (visible: boolean) => void;
     notifyClickOutSide: (e: any) => void;
 }
@@ -17,13 +20,39 @@ export default class PopConfirmFoundation<P = Record<string, any>, S = Record<st
     destroy(): void {}
 
     handleCancel(e: any): void {
-        this._adapter.notifyCancel(e);
-        this.handleVisibleChange(false);
+        const maybePromise = this._adapter.notifyCancel(e) as Promise<any>;
+        if (isPromise(maybePromise)) {
+            this._adapter.updateCancelLoading(true);
+            maybePromise.then(
+                (result: any) => {
+                    this.handleVisibleChange(false);
+                    this._adapter.updateCancelLoading(false);
+                },
+                (errors: any) => {
+                    this._adapter.updateCancelLoading(false);
+                }
+            );
+        } else {
+            this.handleVisibleChange(false);
+        }
     }
 
     handleConfirm(e: any): void {
-        this._adapter.notifyConfirm(e);
-        this.handleVisibleChange(false);
+        const maybePromise = this._adapter.notifyConfirm(e) as Promise<any>;
+        if (isPromise(maybePromise)) {
+            this._adapter.updateConfirmLoading(true);
+            maybePromise.then(
+                (result: any) => {
+                    this._adapter.updateConfirmLoading(false);
+                    this.handleVisibleChange(false);
+                },
+                (errors: any) => {
+                    this._adapter.updateConfirmLoading(false);
+                }
+            );
+        } else {
+            this.handleVisibleChange(false);
+        }
     }
 
     handleClickOutSide(e: any): void {