@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/cjs/inputNumber/inputNumber.css

@@ -75,6 +75,10 @@
   height: 22px;
 }
 
+.semi-input-number:not(:focus-within):not(:hover) .semi-input-borderless + .semi-input-number-suffix-btns {
+  opacity: 0;
+}
+
 .semi-rtl .semi-input-number,
 .semi-portal-rtl .semi-input-number {
   direction: rtl;

package/lib/cjs/inputNumber/inputNumber.scss

@@ -108,4 +108,13 @@ $module: #{$prefix}-input-number;
     }
 }
 
+
+.#{$module}:not(:focus-within):not(:hover){
+    .#{$prefix}-input-borderless{
+        & + .#{$module}-suffix-btns{
+            opacity: 0;
+        }
+    }
+}
+
 @import "./rtl.scss";

package/lib/cjs/layout/constants.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-layout")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-layout`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/list/constants.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-list")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-list`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/modal/constants.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  DIALOG: "".concat(_constants.BASE_CLASS_PREFIX, "-modal")
+  DIALOG: `${_constants.BASE_CLASS_PREFIX}-modal`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/modal/modal.css

@@ -64,9 +64,13 @@
   overflow: hidden;
   box-shadow: var(--semi-shadow-elevated);
 }
+.semi-modal-footerfill {
+  display: flex;
+}
 .semi-modal-content-fullScreen {
   border-radius: 0;
   border: none;
+  top: 0px;
 }
 .semi-modal-header {
   display: flex;
@@ -163,18 +167,22 @@
 
 .semi-modal-content-animate-show {
   animation: 120ms semi-modal-content-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 .semi-modal-content-animate-hide {
   animation: 120ms semi-modal-content-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 .semi-modal-mask-animate-show {
   animation: 90ms semi-modal-mask-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 .semi-modal-mask-animate-hide {
   animation: 90ms semi-modal-mask-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 @keyframes semi-modal-content-keyframe-show {

package/lib/cjs/modal/modal.scss

@@ -70,12 +70,17 @@ $module: #{$prefix}-modal;
         padding: $spacing-modal_content-paddingY $spacing-modal_content-paddingX;
         background-clip: padding-box;
         overflow: hidden;
-        @include shadow-elevated;
+        box-shadow: $shadow-modal_content;
+    }
+
+    &-footerfill{
+        display: flex;
     }
 
     &-content-fullScreen {
         border-radius: $radius-modal_content_fullscreen;
         border: none;
+        top: $spacing-modal_content_fullscreen-top;
     }
 
     // &-close {
@@ -209,18 +214,22 @@ $module: #{$prefix}-modal;
 
 .#{$module}-content-animate-show {
     animation: $animation_duration-modal-show #{$module}-content-keyframe-show $animation_function-modal-show $animation_delay-modal-show forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-content-animate-hide {
     animation: $animation_duration-modal-hide #{$module}-content-keyframe-hide $animation_function-modal-hide $animation_delay-modal-hide forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-mask-animate-show {
     animation: $animation_duration-modal_mask-show #{$module}-mask-keyframe-show $animation_function-modal_mask-show $animation_delay-modal_mask-show forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-mask-animate-hide {
     animation: $animation_duration-modal_mask-hide #{$module}-mask-keyframe-hide $animation_function-modal_mask-hide $animation_delay-modal_mask-hide forwards;
+    animation-fill-mode: forwards;
 }
 
 

package/lib/cjs/modal/modalContentFoundation.js

@@ -4,22 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class ModalContentFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, ModalContentFoundation.defaultAdapter), adapter));
-
     this.handleKeyDown = e => {
       const {
         closeOnEsc
       } = this.getProps();
-
       if (closeOnEsc && e.keyCode === _keyCode.default.ESC) {
         e.stopPropagation();
         this.close(e);
@@ -27,59 +21,45 @@ class ModalContentFoundation extends _foundation.default {
       }
     };
   }
-
   destroy() {
     this.handleKeyDownEventListenerUnmount();
     this.modalDialogBlur();
     this.prevFocusElementReFocus();
   }
-
   handleDialogMouseDown() {
     this._adapter.notifyDialogMouseDown();
   }
-
   handleMaskMouseUp() {
     this._adapter.notifyDialogMouseUp();
   }
-
   handleKeyDownEventListenerMount() {
     this._adapter.addKeyDownEventListener();
   }
-
   handleKeyDownEventListenerUnmount() {
     this._adapter.removeKeyDownEventListener();
   }
-
   getMouseState() {
     this._adapter.getMouseState();
   }
-
   handleMaskClick(e) {
     const {
       dialogMouseDown
     } = this.getStates();
-
     if (e.target === e.currentTarget && !dialogMouseDown) {
       this.close(e);
     }
   }
-
   close(e) {
     this._adapter.notifyClose(e);
   }
-
   modalDialogFocus() {
     this._adapter.modalDialogFocus();
   }
-
   modalDialogBlur() {
     this._adapter.modalDialogBlur();
   }
-
   prevFocusElementReFocus() {
     this._adapter.prevFocusElementReFocus();
   }
-
 }
-
 exports.default = ModalContentFoundation;

package/lib/cjs/modal/modalFoundation.d.ts

@@ -1,11 +1,11 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export declare type OKType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
-export declare type Size = 'small' | 'medium' | 'large' | 'full-width';
+export type OKType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
+export type Size = 'small' | 'medium' | 'large' | 'full-width';
 export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
     disabledBodyScroll: () => void;
     enabledBodyScroll: () => void;
-    notifyCancel: (e: any) => void;
-    notifyOk: (e: any) => void;
+    notifyCancel: (e: any) => void | Promise<any>;
+    notifyOk: (e: any) => void | Promise<any>;
     notifyClose: () => void;
     toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
     notifyFullScreen: (isFullScreen: boolean) => void;
@@ -51,10 +51,13 @@ export interface ModalProps {
     direction?: any;
     fullScreen?: boolean;
     preventScroll?: boolean;
+    footerFill?: boolean;
 }
 export interface ModalState {
     displayNone: boolean;
     isFullScreen: boolean;
+    onOKReturnPromiseStatus?: "pending" | "fulfilled" | "rejected";
+    onCancelReturnPromiseStatus?: "pending" | "fulfilled" | "rejected";
 }
 export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     constructor(adapter: ModalAdapter);
@@ -63,5 +66,6 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     handleOk(e: any): void;
     beforeShow(): void;
     afterHide(): void;
+    enabledBodyScroll(): void;
     toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
 }

package/lib/cjs/modal/modalFoundation.js

@@ -4,44 +4,69 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
+var _isPromise = _interopRequireDefault(require("../utils/isPromise"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class ModalFoundation extends _foundation.default {
   constructor(adapter) {
-    super(Object.assign({}, adapter)); // afterClose() {
+    super(Object.assign({}, adapter));
+    // afterClose() {
     //     this._adapter.notifyClose();
     // }
-
     this.toggleDisplayNone = (displayNone, callback) => {
       this._adapter.toggleDisplayNone(displayNone, callback);
     };
   }
-
   destroy() {
     this.afterHide();
   }
-
   handleCancel(e) {
-    this._adapter.notifyCancel(e);
+    var _a;
+    const result = this._adapter.notifyCancel(e);
+    if ((0, _isPromise.default)(result)) {
+      this._adapter.setState({
+        onCancelReturnPromiseStatus: "pending"
+      });
+      (_a = result === null || result === void 0 ? void 0 : result.then(() => {
+        this._adapter.setState({
+          onCancelReturnPromiseStatus: "fulfilled"
+        });
+      })) === null || _a === void 0 ? void 0 : _a.catch(e => {
+        this._adapter.setState({
+          onCancelReturnPromiseStatus: "rejected"
+        });
+        throw e;
+      });
+    }
   }
-
   handleOk(e) {
-    this._adapter.notifyOk(e);
+    var _a;
+    const result = this._adapter.notifyOk(e);
+    if ((0, _isPromise.default)(result)) {
+      this._adapter.setState({
+        onOKReturnPromiseStatus: "pending"
+      });
+      (_a = result === null || result === void 0 ? void 0 : result.then(() => {
+        this._adapter.setState({
+          onOKReturnPromiseStatus: "fulfilled"
+        });
+      })) === null || _a === void 0 ? void 0 : _a.catch(e => {
+        this._adapter.setState({
+          onOKReturnPromiseStatus: "rejected"
+        });
+        throw e;
+      });
+    }
   }
-
   beforeShow() {
     this._adapter.disabledBodyScroll();
   }
-
   afterHide() {
     this._adapter.enabledBodyScroll();
-
     this._adapter.notifyClose();
   }
-
+  enabledBodyScroll() {
+    this._adapter.enabledBodyScroll();
+  }
 }
-
 exports.default = ModalFoundation;

package/lib/cjs/modal/variables.scss

@@ -34,7 +34,7 @@ $spacing-modal_header-paddingX: 0;
 $spacing-modal_body_wrapper-marginY: 24px;
 $spacing-modal_body_wrapper-marginX: 0;
 $spacing-modal_body-margin: 0; // 模态框 body 外边距
-$spacing-modal_body-padding: 0; // 模态框 footer 垂直外边距
+$spacing-modal_body-padding: 0; // 模态框 内容外Padding
 $spacing-modal_footer-marginY: 24px; // 模态框 footer 垂直外边距
 $spacing-modal_footer-marginX: 0; // 模态框 footer 水平外边距
 $spacing-modal_footer-paddingY:0;
@@ -43,6 +43,7 @@ $spacing-modal_footer_button-marginLeft: $spacing-base-tight; // 模态框 foote
 $spacing-modal_footer_button-marginRight: 0; // 模态框 footer 按钮右侧外边距
 $spacing-modal_confirm_header-marginBottom: 8px; // 命令式调用模态框 header 底部外边距
 $spacing-modal_confirm_icon_wrapper-marginRight: $spacing-base-tight; // 命令式调用模态框图标右侧外边距
+$spacing-modal_content_fullscreen-top: 0px; // 模态框内容全屏顶部位置
 
 // Width/Height
 $width-modal_title: 100%; // 模态框标题宽度
@@ -70,3 +71,7 @@ $color-modal_footer-border:transparent; // 模态框 footer 顶部描边颜色
 $width-modal_footer-border:0; // 模态框 footer 顶部描边宽度
 
 
+//shadow
+$shadow-modal_content: var(--semi-shadow-elevated);
+
+

package/lib/cjs/navigation/NavItem.js

@@ -4,22 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DEFAULT_TOGGLE_ICON = void 0;
-
 var _constants = require("./constants");
-
 const DEFAULT_TOGGLE_ICON = {
   open: 'chevron_up',
   closed: 'chevron_down'
 };
 exports.DEFAULT_TOGGLE_ICON = DEFAULT_TOGGLE_ICON;
-
 class NavItem {
   constructor() {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-    // eslint-disable-next-line eqeqeq
     if (options == null || typeof options !== 'object') {
-      // eslint-disable-next-line no-param-reassign
       options = {
         text: options,
         itemKey: options,
@@ -32,14 +26,11 @@ class NavItem {
         indent: false
       };
     }
-
     for (const key of Object.keys(options)) {
       this[key] = options[key];
     }
-
     if (options.items && Array.isArray(options.items) && options.items.length) {
       this.items = options.items.map(item => new NavItem(item));
-
       if ('toggleIcon' in options) {
         this.toggleIcon = NavItem.isValidToggleIcon(options.toggleIcon) ? Object.assign({}, options.toggleIcon) : Object.assign({}, DEFAULT_TOGGLE_ICON);
       } else {
@@ -49,11 +40,8 @@ class NavItem {
       this.items = null;
     }
   }
-
   static isValidToggleIcon(toggleIcon) {
     return Boolean(toggleIcon && typeof toggleIcon === 'object' && typeof toggleIcon.open === 'string' && toggleIcon.open.length && typeof toggleIcon.closed === 'string' && toggleIcon.closed.length);
   }
-
 }
-
 exports.default = NavItem;

package/lib/cjs/navigation/constants.js

@@ -4,13 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.numbers = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const MODE_HORIZONTAL = 'horizontal';
 const MODE_VERTICAL = 'vertical';
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-navigation")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-navigation`
 };
 exports.cssClasses = cssClasses;
 const strings = {
@@ -30,6 +28,5 @@ const numbers = {
   DEFAULT_TOOLTIP_HIDE_DELAY: 100,
   DEFAULT_SUBNAV_OPEN_DELAY: 0,
   DEFAULT_SUBNAV_CLOSE_DELAY: 100 // ms
-
 };
 exports.numbers = numbers;