@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/list/rtl.scss

@@ -1,39 +0,0 @@
-$module: #{$prefix}-list;
-
-.#{$prefix}-rtl,
-.#{$prefix}-portal-rtl {
-    .#{$module} {
-        direction: rtl;
-    
-        &-item {  
-            // 滚动加载无限长列表
-            direction: rtl;  
-
-            &-body {
-
-                &-header {
-                    margin-right: auto;
-                    margin-left: $spacing-list_header-marginLeft;
-                }
-            }
-    
-            &-extra {
-                flex: 0 0 auto;
-                margin-left: $spacing-none;
-                margin-right: $spacing-list_extra-marginRight;
-            }
-        }
-    
-        &.#{$module}-flex {
-            &.#{$module}-split .#{$module}-item {
-                border-bottom: none;
-                border-right: $border-thickness;
-                border-left: $border-thickness-control solid $color-list_default-border-default;
-
-                &:last-child {
-                    border-left: none;
-                }
-            }
-        }
-    }
-}

package/lib/cjs/list/variables.scss

@@ -1,17 +0,0 @@
-$color-list_default-border-default: var(--semi-color-border); // 列表描边颜色
-$color-list_empty-text-default: var(--semi-color-text-2); // 空状态下列表文字颜色
-
-$spacing-list_empty-padding: $spacing-base-tight; // 空状态列表内边距
-$spacing-list_footer-paddingX: $spacing-base-tight; // 列表 footer 水平内边距
-$spacing-list_footer-paddingY: $spacing-loose; // 列表 footer 垂直内边距
-$spacing-list_item-paddingX: $spacing-base-tight; // 列表 item 水平内边距 - 默认尺寸
-$spacing-list_item-paddingY: $spacing-loose; // 列表 item 垂直内边距 - 默认尺寸
-$spacing-list_small-paddingX: $spacing-tight; // 列表 item 水平内边距 - 小尺寸
-$spacing-list_small-paddingY: $spacing-base; // 列表 item 垂直内边距 - 小尺寸
-$spacing-list_large-paddingX: $spacing-base; // 列表 item 水平内边距 - 大尺寸
-$spacing-list_large-paddingY: $spacing-loose; // 列表 item 垂直内边距 - 大尺寸
-
-$spacing-list_header-marginRight: $spacing-base-loose; // 列表 header 右侧外边距
-$spacing-list_header-marginLeft: $spacing-base-loose; // 列表 header 左侧外边距
-$spacing-list_extra-marginLeft: $spacing-super-loose; // 列表 extra 额外内容左侧外边距
-$spacing-list_extra-marginRight: $spacing-super-loose; // 列表 extra 额外内容右侧外边距

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

@@ -1,10 +0,0 @@
-declare const cssClasses: {
-    DIALOG: string;
-};
-declare const strings: {
-    cancelKey: string;
-    confirmKey: string;
-    SIZE: string[];
-    directions: string[];
-};
-export { cssClasses, strings };

package/lib/cjs/modal/constants.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_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")
-};
-exports.cssClasses = cssClasses;
-const strings = {
-  cancelKey: 'cancel',
-  confirmKey: 'confirm',
-  SIZE: ['small', 'medium', 'large', 'full-width'],
-  directions: ['ltr', 'rtl']
-};
-exports.strings = strings;

package/lib/cjs/modal/modal.css

@@ -1,233 +0,0 @@
-/* shadow */
-/* sizing */
-/* spacing */
-.semi-modal {
-  font-size: 14px;
-  line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  position: relative;
-  margin: 80px auto;
-}
-.semi-modal-mask {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background-color: var(--semi-overlay-bg);
-  height: 100%;
-  z-index: 1000;
-}
-.semi-modal-mask-hidden {
-  display: none;
-}
-.semi-modal-icon-wrapper {
-  display: inline-flex;
-  margin-right: 12px;
-  width: 24px;
-}
-.semi-modal-wrap {
-  position: fixed;
-  overflow: auto;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1000;
-  -webkit-overflow-scrolling: touch;
-  outline: 0;
-}
-.semi-modal-title {
-  display: inline-flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-  margin: 0;
-}
-.semi-modal-content {
-  position: relative;
-  display: flex;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  flex-direction: column;
-  background-color: var(--semi-color-bg-2);
-  border: 1px solid var(--semi-color-border);
-  border-radius: var(--semi-border-radius-large);
-  padding: 0 24px;
-  background-clip: padding-box;
-  overflow: hidden;
-  box-shadow: var(--semi-shadow-elevated);
-}
-.semi-modal-content-fullScreen {
-  border-radius: 0;
-  border: none;
-}
-.semi-modal-header {
-  display: flex;
-  align-items: flex-start;
-  margin: 24px 0;
-  padding: 0 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--semi-color-text-0);
-  border-bottom: 0 solid transparent;
-}
-.semi-modal-body-wrapper {
-  display: flex;
-  align-items: flex-start;
-  margin: 24px 0;
-}
-.semi-modal-body {
-  flex: 1 1 auto;
-  margin: 0;
-  padding: 0;
-}
-.semi-modal-withIcon {
-  margin-left: 36px;
-}
-.semi-modal-footer {
-  margin: 24px 0;
-  padding: 0 0;
-  text-align: right;
-  border-radius: 0 0 5px 5px;
-  border-top: 0 solid transparent;
-}
-.semi-modal-footer .semi-button {
-  margin-left: 12px;
-  margin-right: 0;
-}
-.semi-modal-confirm .semi-modal-header {
-  margin-bottom: 8px;
-}
-.semi-modal-confirm-icon-wrapper {
-  display: inline-flex;
-  margin-right: 12px;
-  width: 24px;
-}
-.semi-modal-confirm-icon {
-  display: inline-flex;
-  color: var(--semi-color-primary);
-}
-.semi-modal-info-icon {
-  color: var(--semi-color-info);
-}
-.semi-modal-success-icon {
-  color: var(--semi-color-success);
-}
-.semi-modal-error-icon {
-  color: var(--semi-color-danger);
-}
-.semi-modal-warning-icon {
-  color: var(--semi-color-warning);
-}
-.semi-modal-small {
-  width: 448px;
-}
-.semi-modal-medium {
-  width: 684px;
-}
-.semi-modal-large {
-  width: 920px;
-}
-.semi-modal-full-width {
-  width: calc(100vw - 64px);
-}
-
-.semi-modal-centered {
-  margin: 0 auto;
-}
-
-.semi-modal-popup .semi-modal-mask,
-.semi-modal-popup .semi-modal-wrap {
-  position: absolute;
-  overflow: hidden;
-}
-
-.semi-modal-fixed .semi-modal-mask,
-.semi-modal-fixed .semi-modal-wrap {
-  position: fixed;
-  overflow: hidden;
-}
-
-.semi-modal-displayNone {
-  display: none;
-}
-
-.semi-modal-content-animate-hide {
-  animation: 90ms semi-modal-content-keyframe-hide ease forwards;
-}
-
-.semi-modal-content-animate-show {
-  animation: 120ms semi-modal-content-keyframe-show cubic-bezier(0, 0, 0.26, 1.38) forwards;
-}
-
-.semi-modal-mask-animate-hide {
-  animation: 90ms semi-modal-mask-keyframe-hide ease forwards;
-}
-
-.semi-modal-mask-animate-show {
-  animation: 90ms semi-modal-mask-keyframe-show ease forwards;
-}
-
-@keyframes semi-modal-content-keyframe-show {
-  0% {
-    opacity: 0;
-    transform: scale(0.7);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes semi-modal-content-keyframe-hide {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0.7);
-  }
-}
-@keyframes semi-modal-mask-keyframe-show {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes semi-modal-mask-keyframe-hide {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-.semi-modal-rtl {
-  direction: rtl;
-}
-.semi-modal-rtl .semi-modal-icon-wrapper, .semi-modal-confirm-rtl .semi-modal-icon-wrapper {
-  margin-right: 0;
-  margin-left: 12px;
-}
-.semi-modal-rtl .semi-modal-withIcon, .semi-modal-confirm-rtl .semi-modal-withIcon {
-  margin-left: 0;
-  margin-right: 36px;
-}
-.semi-modal-rtl .semi-modal-footer, .semi-modal-confirm-rtl .semi-modal-footer {
-  text-align: left;
-}
-.semi-modal-rtl .semi-modal-footer .semi-button, .semi-modal-confirm-rtl .semi-modal-footer .semi-button {
-  margin-left: 0;
-  margin-right: 12px;
-}
-.semi-modal-confirm-rtl {
-  direction: rtl;
-}
-.semi-modal-confirm .semi-modal-confirm-rtl .semi-button {
-  margin-left: 0;
-  margin-right: 12px;
-}

package/lib/cjs/modal/modal.scss

@@ -1,267 +0,0 @@
-//@import '../theme/variables.scss';
-@import "./variables.scss";
-
-$module: #{$prefix}-modal;
-
-.#{$module} {
-    @include font-size-regular;
-    position: relative;
-    // width: 600px;
-    margin: $spacing-modal-marginY $spacing-modal-marginX;
-    
-    &-mask {
-        position: fixed;
-        top: $spacing-modal_mask-top;
-        right: $spacing-modal_mask-right;
-        left: $spacing-modal_mask-left;
-        bottom: $spacing-modal_mask-bottom;
-        background-color: $color-modal_mask-bg;
-        height: 100%;
-        // filter: alpha(opacity=50);
-        z-index: $z-modal-mask;
-        
-        &-hidden {
-            display: none;
-        }
-    }
-    
-    &-icon-wrapper {
-        display: inline-flex;
-        margin-right: $spacing-modal_icon_wrapper-marginRight;
-        width: $width-icon-extra-large;
-    }
-    
-    &-wrap {
-        position: fixed;
-        overflow: auto;
-        top: $spacing-modal_wrap-top;
-        right: $spacing-modal_wrap-right;
-        bottom: $spacing-modal_wrap-bottom;
-        left: $spacing-modal_wrap-left;
-        z-index: $z-modal;
-        -webkit-overflow-scrolling: touch;
-        outline: 0;
-    }
-    
-    &-title {
-        display: inline-flex;
-        align-items: flex-start;
-        justify-content: flex-start;
-        width: $width-modal_title;
-        margin: $spacing-modal_title-margin;
-    }
-    
-    &-content {
-        position: relative;
-        display: flex;
-        height: $height-modal_content;
-        width: $width-modal_content;
-        box-sizing: border-box;
-        flex-direction: column;
-        background-color: $color-modal-bg;
-        border: $width-modal_content-border solid $color-modal_content-border;
-        border-radius: $radius-modal_content;
-        padding: $spacing-modal_content-paddingY $spacing-modal_content-paddingX;
-        background-clip: padding-box;
-        overflow: hidden;
-        @include shadow-elevated;
-    }
-    
-    &-content-fullScreen {
-        border-radius: $radius-modal_content_fullscreen;
-        border: none;
-    }
-    
-    // &-close {
-    // position: absolute;
-    // right: 15px;
-    // }
-    
-    &-header {
-        display: flex;
-        align-items: flex-start;
-        margin: $spacing-modal_header-marginY $spacing-modal_header-marginX;
-        padding: $spacing-modal_header-paddingY $spacing-modal_header-paddingX;
-        font-size: $font-modal_header-fontSize;
-        font-weight: $font-modal_header-fontWeight;
-        color: $color-modal_main-text;
-        border-bottom: $width-modal_header-border solid $color-modal_header-border;
-    }
-    
-    &-body-wrapper {
-        display: flex;
-        align-items: flex-start;
-        margin: $spacing-modal_body_wrapper-marginY $spacing-modal_body_wrapper-marginX;
-    }
-    
-    &-body {
-        flex: 1 1 auto;
-        // padding: $spacing-loose;
-        margin: $spacing-modal_body-margin;
-        padding: $spacing-modal_body-padding;
-    }
-    
-    &-withIcon {
-        margin-left: $spacing-modal_content_withicon-marginLeft;
-    }
-    
-    &-footer {
-        // padding: $spacing-loose;
-        margin: $spacing-modal_footer-marginY $spacing-modal_footer-marginX;
-        padding: $spacing-modal_footer-paddingY $spacing-modal_footer-paddingX;
-        text-align: right;
-        border-radius: $radius-modal_footer;
-        border-top: $width-modal_footer-border solid $color-modal_footer-border;
-        
-        .#{$prefix}-button {
-            margin-left: $spacing-modal_footer_button-marginLeft;
-            margin-right: 0;
-        }
-    }
-    
-    &-confirm {
-        .#{$module}-header {
-            margin-bottom: $spacing-modal_confirm_header-marginBottom;
-        }
-        
-        // &-content-withIcon {
-        // margin-left: 36px;
-        // }
-        
-        &-icon-wrapper {
-            display: inline-flex;
-            margin-right: $spacing-modal_confirm_icon_wrapper-marginRight;
-            width: $width-icon-extra-large;
-        }
-        
-        &-icon {
-            display: inline-flex;
-            color: $color-modal_primary-icon;
-        }
-    }
-    
-    &-info-icon {
-        color: $color-modal_info-icon;
-    }
-    
-    &-success-icon {
-        color: $color-modal_success-icon;
-    }
-    
-    &-error-icon {
-        color: $color-modal_danger-icon;
-    }
-    
-    &-warning-icon {
-        color: $color-modal_warning-icon;
-    }
-    
-    &-small {
-        width: $width-modal_small;
-    }
-    
-    &-medium {
-        width: $width-modal_medium;
-    }
-    
-    &-large {
-        width: $width-modal_large;
-    }
-    
-    &-full-width {
-        width: $width-modal_full_width;
-    }
-}
-
-.#{$module}-centered {
-    margin: 0 auto;
-}
-
-.#{$module}-popup {
-    .#{$module}-mask,
-    .#{$module}-wrap {
-        position: absolute;
-        overflow: hidden;
-    }
-}
-
-.#{$module}-fixed {
-    .#{$module}-mask,
-    .#{$module}-wrap {
-        position: fixed;
-        overflow: hidden;
-    }
-}
-
-.#{$module}-displayNone {
-    display: none;
-}
-
-.#{$module}-content-animate-hide {
-    animation: 90ms #{$module}-content-keyframe-hide ease forwards;
-}
-
-.#{$module}-content-animate-show {
-    animation: 120ms #{$module}-content-keyframe-show cubic-bezier(0, 0, 0.26, 1.38) forwards;
-}
-
-.#{$module}-mask-animate-hide {
-    animation: 90ms #{$module}-mask-keyframe-hide ease forwards;
-}
-
-.#{$module}-mask-animate-show {
-    animation: 90ms #{$module}-mask-keyframe-show ease forwards;
-}
-
-
-@keyframes #{$module}-content-keyframe-show {
-    
-    0% {
-        opacity: 0;
-        transform: scale(0.7);
-    }
-    
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-@keyframes #{$module}-content-keyframe-hide {
-    
-    0% {
-        opacity: 1;
-        transform: scale(1);
-    }
-    
-    100% {
-        opacity: 0;
-        transform: scale(0.7);
-    }
-}
-
-
-@keyframes #{$module}-mask-keyframe-show {
-    
-    0% {
-        opacity: 0;
-    }
-    
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes #{$module}-mask-keyframe-hide {
-    
-    0% {
-        opacity: 1;
-    }
-    
-    100% {
-        opacity: 0;
-    }
-}
-
-
-@import "./rtl.scss";

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

@@ -1,33 +0,0 @@
-import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { ModalProps } from '../modal/modalFoundation';
-export interface ModalContentProps extends ModalProps {
-    onClose: (e: any) => void;
-    getContainerContext: () => any;
-    isFullScreen?: boolean;
-    contentClassName?: string;
-    maskClassName?: string;
-    onAnimationEnd?: () => void;
-}
-export interface ModalContentState {
-    dialogMouseDown: boolean;
-}
-export interface ModalContentAdapter extends DefaultAdapter<ModalContentProps, ModalContentState> {
-    notifyClose: (e: any) => void;
-    notifyDialogMouseDown: () => void;
-    notifyDialogMouseUp: () => void;
-    addKeyDownEventListener: () => void;
-    removeKeyDownEventListener: () => void;
-    getMouseState: () => boolean;
-}
-export default class ModalContentFoundation extends BaseFoundation<ModalContentAdapter> {
-    constructor(adapter: ModalContentAdapter);
-    destroy(): void;
-    handleDialogMouseDown(): void;
-    handleMaskMouseUp(): void;
-    handleKeyDown(e: any): void;
-    handleKeyDownEventListenerMount(): void;
-    handleKeyDownEventListenerUnmount(): void;
-    getMouseState(): void;
-    handleMaskClick(e: any): void;
-    close(e: any): void;
-}

package/lib/cjs/modal/modalContentFoundation.js

@@ -1,76 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _foundation = _interopRequireDefault(require("../base/foundation"));
-
-var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
-
-class ModalContentFoundation extends _foundation.default {
-  constructor(adapter) {
-    super((0, _assign.default)((0, _assign.default)({}, ModalContentFoundation.defaultAdapter), adapter));
-  }
-
-  destroy() {
-    this.handleKeyDownEventListenerUnmount();
-  }
-
-  handleDialogMouseDown() {
-    this._adapter.notifyDialogMouseDown();
-  }
-
-  handleMaskMouseUp() {
-    this._adapter.notifyDialogMouseUp();
-  }
-
-  handleKeyDown(e) {
-    const {
-      closeOnEsc
-    } = this.getProps();
-
-    if (closeOnEsc && e.keyCode === _keyCode.default.ESC) {
-      e.stopPropagation();
-      this.close(e);
-      return;
-    }
-  }
-
-  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);
-  }
-
-}
-
-exports.default = ModalContentFoundation;