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

package/lib/cjs/select/select.scss

@@ -1,422 +0,0 @@
-//@import '../theme/variables.scss';
-@import './variables.scss';
-@import './mixin.scss';
-@import './option.scss';
-
-$module: #{$prefix}-select;
-$single: #{$module}-single;
-$filterable: #{$module}-filterable;
-$multiple: #{$module}-multiple;
-
-.#{$module} {
-    box-sizing: border-box;
-    border-radius: $radius-select;
-    border: $width-select-border solid $color-select-border-default;
-    height: $height-select_default;
-    font-weight: $font-select-fontWeight;
-    background-color: $color-select-bg-default;
-    // display: inline-block;
-    display: inline-flex;
-    vertical-align: middle;
-    position: relative;
-    outline: none;
-    cursor: pointer;
-
-    &:hover {
-        background-color: $color-select-bg-hover;
-    }
-
-    &:active {
-        background-color: $color-select-bg-active;
-    }
-
-    &:focus {
-        border: $border-thickness-control-focus solid $color-select_default-border-focus;
-        outline: 0;
-    }
-
-    &-small {
-        height: $height-select_small;
-        line-height: $height-select_small;
-    }
-
-    &-large {
-        min-height: $height-select_large;
-        line-height: $height-select_large;
-    }
-
-    &-open,
-    &-focus {
-        border: $border-thickness-control-focus solid $color-select_default-border-focus;
-        outline: 0;
-
-        &:hover {
-            background-color: $color-select-bg-default;
-        }
-    }
-    
-    &-warning {
-        background-color: $color-select_warning-bg-default;
-        border-color: $color-select_warning-border-default;
-
-        &:hover {
-            background-color: $color-select_warning-bg-hover;
-            border-color: $color-select_warning-border-hover;
-        }
-
-        &:focus {
-            background-color: $color-select_warning-bg-focus;
-            border-color: $color-select_warning-border-focus;
-        }
-
-        &:active {
-            background-color: $color-select_warning-bg-active;
-            border-color: $color-select_warning-border-active;
-        }
-    }
-
-    &-error {
-        background-color: $color-select_danger-bg-default;
-        border-color: $color-select_danger-border-default;
-
-        &:hover {
-            background-color: $color-select_danger-bg-hover;
-            border-color: $color-select_danger-border-hover;
-        }
-
-        &:focus {
-            background-color: $color-select_danger-bg-focus;
-            border-color: $color-select_danger-border-focus;
-        }
-
-        &:active {
-            background-color: $color-select_danger-bg-active;
-            border-color: $color-select_danger-border-active;
-        }
-    }
-
-    &-disabled {
-        cursor: not-allowed;
-        background-color: $color-select_input_disabled-bg;
-        // border: 1px solid $color-select_input_disabled-border;
-
-        &:hover {
-            background-color: $color-select_input_disabled-bg-hover;
-        }
-
-        &:focus {
-            border: $border-thickness-control-focus solid $color-select_default-border-focus;
-        }
-
-        .#{$module}-selection,
-        .#{$module}-selection-placeholder {
-            color: $color-select_input_disabled-text;
-            cursor: not-allowed;
-        }
-
-        .#{$module}-arrow,
-        .#{$module}-prefix,
-        .#{$module}-suffix {
-            color: $color-select_input_disabled-text;
-        }
-
-        .#{$prefix}-tag {
-            color: $color-select_input_disabled-text;
-            background-color: transparent;
-        }
-    }
-
-    &-selection {
-        @include font-size-regular;
-
-        height: 100%;
-
-        display: flex;
-        align-items: center;
-        flex-grow: 1;
-        overflow: hidden;
-
-        margin-left: $spacing-select_selection-marginLeft;
-        // margin-right: $width-select_icon_right;
-
-        cursor: pointer;
-        color: $color-select_main-text-default;
-
-        &-text {
-            // display: inline-flex;
-            // align-items: center;
-            // height: 100%;
-            width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-
-            &-inactive {
-                display: flex;
-                opacity: $opacity-select_selection_text_inactive;
-            }
-
-            &-hide {
-                display: none;
-            }
-        }
-
-        &-placeholder {
-            color: $color-select_input_placeholder-text;
-        }
-
-        .#{$prefix}-tag {
-
-            &:nth-of-type(1) {
-                margin-left: 0;
-            }
-
-            @include select-tag-margin;
-        }
-
-        .#{$prefix}-tag-group {
-            height: inherit;
-            .#{$prefix}-tag {
-                @include select-tag-margin;
-            }
-        }
-    }
-
-    &-content-wrapper {
-        white-space: nowrap;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        height: 100%;
-    }
-
-    &-multiple {
-        // 这里要设置为 auto，可能存在换行
-        height: auto;
-
-        .#{$module}-selection {
-            margin-left: $spacing-select_multiple_selection-marginLeft;
-            // &-placeholder {
-            //     padding-left: $spacing-base-tight - $spacing-extra-tight;
-            // }
-        }
-
-        .#{$module}-content-wrapper {
-            width: 100%;
-            min-height: $height-select_multiple_content_wrapper-minHeight;
-            flex-wrap: wrap;
-
-            &-empty {
-                margin-left: $spacing-select_multiple_content_wrapper_empty-marginLeft;
-            }
-
-            .#{$prefix}-tag-group {
-                display: flex;
-                align-items: center;
-            }
-
-            &-one-line {
-                flex-wrap: nowrap;
-
-                .#{$prefix}-tag-group {
-                    flex-wrap: nowrap;
-                    justify-content: flex-start;
-                    overflow: hidden;
-                    flex-shrink: 0;
-                }
-            }
-        }
-
-        .#{$module}-inline-label-wrapper {
-            flex-shrink: 0;
-        }
-    }
-
-    &-multiple.#{$module}-large {
-        .#{$module}-content-wrapper {
-            min-height: $height-select_large - 2;
-        }
-    }
-
-    &-multiple.#{$module}-small {
-        .#{$module}-content-wrapper {
-            min-height: $height-select_small - 2;
-        }
-    }
-
-    &-arrow {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: $width-select_arrow;
-        color: $color-select-icon-default;
-        flex-shrink: 0;
-
-        &-empty {
-            // 不显示arrow时，右侧留出12px空白
-            display: flex;
-            width: $width-select_arrow_empty;
-        }
-    }
-
-    &-prefix,
-    &-suffix {
-        @include all-center;
-
-        &-text {
-            margin: $spacing-select_prefix_suffix_text-marginY $spacing-select_prefix_suffix_text-marginX;
-        }
-
-        &-icon {
-            color: $color-select-icon-default;
-            margin: $spacing-select_prefix_suffix_icon-marginY $spacing-select_prefix_suffix_icon-marginX;
-        }
-    }
-
-    &-suffix {
-        @include all-center;
-    }
-
-    &-clear {
-        @include all-center;
-        width: $width-select_clear-icon;
-        color: $color-select_clearBtn-text-default;
-        flex-shrink: 0;
-        &:hover {
-            color: $color-select_clearBtn-text-hover;
-        }
-    }
-
-    &-inset-label-wrapper {
-        display: inline;
-    }
-
-    &-inset-label {
-        margin-right: $spacing-base-tight;
-        font-weight: $font-select_inset_label-fontWeight;
-        @include font-size-regular;
-        color: $color-select_inset_label-text;
-        flex-shrink: 0;
-        white-space: nowrap;
-    }
-
-    &-create-tips {
-        color: $color-select_create_tips-text;
-        margin-right: $spacing-select_create_tips-marginRight;
-    }
-}
-
-.#{$module}-with-prefix {
-    .#{$module}-selection {
-        margin-left: 0;
-    }
-}
-
-// 单选且可输入
-.#{$single}.#{$filterable} {
-    .#{$module}-content-wrapper {
-        flex-grow: 1;
-        height: 100%;
-        overflow: hidden;
-        position: relative;
-    }
-
-    .#{$prefix}-input-wrapper {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        border: none;
-        background-color: transparent;
-    }
-
-    .#{$prefix}-input-wrapper-focus {
-        border: none;
-    }
-
-    .#{$prefix}-input {
-        padding-left: 0;
-        padding-right: 0;
-        height: 100%; // 自定义renderSelectedItem时，Select的整体高度可能不是默认的32px
-    }
-}
-
-// 多选且可输入
-.#{$multiple}.#{$filterable} {
-    .#{$module}-content-wrapper {
-        flex-grow: 1;
-        height: 100%;
-        overflow: hidden;
-        position: relative;
-
-        &-empty {
-            .#{$prefix}-input-wrapper {
-                position: absolute;
-                top: 0;
-                left: 0;
-                height: 100%;
-                width: 100%;
-            }
-        }
-    }
-
-    .#{$prefix}-input-wrapper {
-        // position: absolute;
-        // top: 0;
-        // left: 0;
-        height: 100%;
-        width: 100%;
-        border: none;
-        background-color: transparent;
-    }
-
-    .#{$prefix}-input-wrapper-focus {
-        border: none;
-    }
-
-    .#{$prefix}-input {
-        padding-left: 0;
-        padding-right: 0;
-    }
-}
-
-.#{$module}-option-list {
-    overflow-x: hidden;
-    overflow-y: auto;
-
-    &-chosen {
-        .#{$module}-option-icon {
-            display: flex;
-        }
-    }
-}
-
-.#{$module}-group {
-    color: $color-select_group-text;
-    padding-top: $spacing-select_group-paddingTop;
-    margin-top: $spacing-select_group-marginTop;
-    padding-bottom: $spacing-select_group-paddingBottom;
-    padding-left: $spacing-select_group-paddingLeft;
-    padding-right: $spacing-select_group-paddingRight;
-    @include font-size-small;
-    cursor: default;
-
-    // &:nth-of-type(1) {
-    //     margin-top: $spacing-extra-tight;
-    // }
-
-    &:not(:nth-of-type(1)) {
-        border-top: $width-select_group_top-border solid $color-select_option-border-default;
-    }
-}
-
-
-.#{$module}-loading-wrapper {
-    padding-left: $spacing-select_loading_wrapper-paddingLeft;
-    padding-right: $spacing-select_loading_wrapper-paddingRight;
-    padding-top: $spacing-select_loading_wrapper-paddingTop;
-    padding-bottom: $spacing-select_loading_wrapper-paddingBottom;
-    cursor: not-allowed;
-}
-
-@import './rtl.scss';

package/lib/cjs/select/variables.scss

@@ -1,100 +0,0 @@
-// Color
-$color-select-bg-default: var(--semi-color-fill-0); // 选择器输入框背景色 - 默认态
-$color-select-bg-hover: var(--semi-color-fill-1); // 选择器输入框背景色 - 悬停态
-$color-select-bg-active: var(--semi-color-fill-2); // 选择器输入框背景色 - 按下态
-$color-select-border-default: transparent; // 选择器输入框描边颜色
-$color-select_warning-bg-default: var(--semi-color-warning-light-default); // 警示选择器输入框背景色 - 默认态
-$color-select_warning-border-default: var(--semi-color-warning-light-default); // 警示选择器输入框描边颜色 - 默认态
-$color-select_warning-bg-hover: var(--semi-color-warning-light-hover); // 警示选择器输入框背景色 - 悬停态
-$color-select_warning-border-hover: var(--semi-color-warning-light-hover); // 警示选择器输入框描边颜色 - 悬停态
-$color-select_warning-bg-focus: var(--semi-color-warning-light-default); // 警示选择器输入框背景色 - 选中态
-$color-select_warning-border-focus: var(--semi-color-warning); // 警示选择器输入框描边颜色 - 选中态
-$color-select_warning-bg-active: var(--semi-color-warning-light-active); // 警示选择器输入框背景色 - 按下态
-$color-select_warning-border-active: var(--semi-color-warning-light-active); // 警示选择器输入框描边颜色 - 按下态
-$color-select_danger-bg-default: var(--semi-color-danger-light-default); // 报错选择器输入框背景色 - 默认态
-$color-select_danger-border-default: var(--semi-color-danger-light-default); // 报错选择器输入框描边颜色 - 默认态
-$color-select_danger-bg-hover: var(--semi-color-danger-light-hover); // 报错选择器输入框背景色 - 悬停态
-$color-select_danger-border-hover: var(--semi-color-danger-light-hover); // 报错选择器输入框描边颜色 - 悬停态
-$color-select_danger-bg-focus: var(--semi-color-danger-light-default); // 报错选择器输入框背景色 - 选中态
-$color-select_danger-border-focus: var(--semi-color-danger); // 报错选择器输入框描边颜色 - 选中态
-$color-select_danger-bg-active: var(--semi-color-danger-light-active); // 报错选择器输入框背景色 - 按下态
-$color-select_danger-border-active: var(--semi-color-danger-light-active); // 报错选择器输入框描边颜色 - 按下态
-$color-select_default-border-focus: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 选中态
-$color-select_main-text-default: var(--semi-color-text-0); // 选择器输入框回填内容文本颜色
-$color-select-icon-default: var(--semi-color-text-2); // 选择器输入框图标颜色
-$color-select_clearBtn-text-default: var(--semi-color-text-2); // 选择器输入框清空按钮颜色 - 默认态
-$color-select_clearBtn-text-hover: var(--semi-color-primary); // 选择器输入框清空按钮颜色 - 悬停态
-$color-select_input-bg-default: transparent; // 选择器输入框清空按钮颜色 - 悬停态
-$color-select_input_disabled-bg: var(--semi-color-disabled-fill); // 禁用选择器输入框背景色
-$color-select_input_disabled-border: var(--semi-color-border); // 禁用选择器输入框描边颜色
-$color-select_input_disabled-text: var(--semi-color-disabled-text); // 禁用选择器输入框回填内容文字颜色
-$color-select_input_disabled-bg-hover: var(--semi-color-disabled-fill); // 选择器输入框回填内容文字颜色 - 悬停态
-$color-select_input_placeholder-text: var(--semi-color-text-2); // 选择器输入框占位文本文字颜色
-$color-select_option_main-text: var(--semi-color-text-0); // 选择器菜单选项文本颜色
-$color-select_option_keyword-text: var(--semi-color-primary); // 选择器菜单选项匹配搜索结果文本颜色
-$color-select_option-bg-default: transparent; // 选择器菜单选项背景颜色 - 默认态
-$color-select_option-icon-default: transparent; // 选择器菜单选项图标颜色 - 默认态
-$color-select_option-bg-hover: var(--semi-color-fill-0); // 选择器菜单选项背景颜色 - 悬停态
-$color-select_option-bg-active: var(--semi-color-fill-1); // 选择器菜单选项背景颜色 - 按下态
-$color-select_option_disabled-text: var(--semi-color-disabled-text); // 禁用选择器菜单选项文字颜色
-$color-select_option_disabled-bg: transparent; // 禁用选择器菜单选项背景颜色
-$color-select_option-icon-active: var(--semi-color-text-2); // 禁用选择器菜单选项图标颜色 - 选中态
-$color-select_option-border-default: var(--semi-color-border); // 分组选择器菜单项描边颜色
-$color-select_inset_label-text: var(--semi-color-text-2); // 分组选择器菜单项辅助文本颜色
-$color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
-$color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
-
-// Width/Height
-$width-select_icon_right: ($width-icon-medium + $spacing-tight * 2); // 选择器右侧图标大小
-$height-select_large: $height-control-large; // 选择器输入框高度 - 大尺寸
-$height-select_small: $height-control-small; // 选择器输入框高度 - 小尺寸
-$height-select_default: $height-control-default; // 选择器输入框高度 - 默认尺寸
-$width-select_option_tick: $width-icon-small; // 选择器菜单项选中对勾图标大小
-$width-select-border: 1px; // 选择器输入框描边宽度
-$width-select_arrow: 32px; // 选择器输入框下拉箭头宽度
-$width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（有suffix icon）宽度
-$width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
-$width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
-$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2; // 多项选择器标签组最小宽度
-
-// Spacing
-$spacing-select_option_tick-marginRight: $spacing-tight; // 选择器菜单选中对勾右侧外边距
-$spacing-select_prefix_suffix_text-marginX: $spacing-base-tight; // 选择器输入框前后缀文本水平内边距
-$spacing-select_prefix_suffix_text-marginY: 0; // 选择器输入框前后缀文本垂直内边距
-$spacing-select_prefix_suffix_icon-marginX: $spacing-tight; // 选择器输入框前后缀图标水平内边距
-$spacing-select_prefix_suffix_icon-marginY: 0; // 选择器输入框前后缀图标垂直内边距
-$spacing-select_create_tips-marginRight: $spacing-extra-tight; // 创建新选项右侧外边距
-$spacing-select_group-marginTop: $spacing-extra-tight; // 选择器菜单分组标题顶部外边距
-$spacing-select_group-paddingTop: $spacing-base-tight; // 选择器菜单分组标题顶部内边距
-$spacing-select_group-paddingBottom: $spacing-extra-tight; // 选择器菜单分组标题底部内边距
-$spacing-select_group-paddingLeft: $spacing-base-tight + $width-select_option_tick + $spacing-select_option_tick-marginRight; // 选择器菜单分组标题左侧外边距
-$spacing-select_group-paddingRight: $spacing-base; // 选择器菜单分组标题右侧内边距
-$spacing-select_loading_wrapper-paddingLeft: $spacing-base; // 选择器加载左侧内边距
-$spacing-select_loading_wrapper-paddingRight: $spacing-base; // 选择器加载右侧内边距
-$spacing-select_loading_wrapper-paddingTop: $spacing-tight; // 选择器加载顶部内边距
-$spacing-select_loading_wrapper-paddingBottom: $spacing-tight; // 选择器加载底部内边距
-$spacing-select_multiple_content_wrapper_empty-marginLeft: $spacing-tight; // 多项选择器空回填内容为空时左侧内边距
-$spacing-select_multiple_selection-marginLeft: $spacing-extra-tight; // 多项选择器回填内容左侧内边距
-$spacing-select_option-paddingLeft: $spacing-base-tight; // 选择器菜单项左侧内边距
-$spacing-select_option-paddingRight: $spacing-base-tight; // 选择器菜单项右侧内边距
-$spacing-select_option-paddingTop: $spacing-tight; // 选择器菜单项顶部内边距
-$spacing-select_option-paddingBottom: $spacing-tight; // 选择器菜单项底部内边距
-$spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
-$spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
-$spacing-select_tag-marginTop: $spacing-super-tight - 1; // 多项选择器标签顶部外边距
-$spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签右侧外边距
-$spacing-select_tag-marginBottom: $spacing-super-tight - 1; // 多项选择器标签底部外边距
-$spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
-$spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
-
-// Radius
-$radius-select: var(--semi-border-radius-small); // 选择器输入框圆角
-
-// Font
-$font-select-fontWeight: $font-weight-regular; // 选择器文本字重
-$font-select_inset_label-fontWeight: 600; // 选择器内嵌标签文本字重
-$font-select_keyword-fontWeight: 600; // 选择器搜索结果命关键词中文本字重
-
-// Other
-$opacity-select_selection_text_inactive: .4;
-

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

@@ -1,15 +0,0 @@
-declare const cssClasses: {
-    PREFIX: string;
-    DIALOG: string;
-};
-declare const strings: {
-    PLACEMENT: string[];
-    SIZE: string[];
-    WIDTH: {
-        small: number;
-        medium: number;
-        large: number;
-    };
-    HEIGHT: number;
-};
-export { cssClasses, strings };

package/lib/cjs/sideSheet/constants.js

@@ -1,28 +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 = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-sidesheet"),
-  DIALOG: "".concat(_constants.BASE_CLASS_PREFIX, "-modal")
-};
-exports.cssClasses = cssClasses;
-const strings = {
-  PLACEMENT: ['top', 'right', 'bottom', 'left'],
-  SIZE: ['small', 'medium', 'large'],
-  WIDTH: {
-    small: 448,
-    medium: 684,
-    large: 920
-  },
-  HEIGHT: 448
-};
-exports.strings = strings;

package/lib/cjs/sideSheet/rtl.scss

@@ -1,17 +0,0 @@
-$module: #{$prefix}-sidesheet;
-
-// sideSheet 挂载在 body 下，无法直接使用 .semi-rtl
-.#{$module} {
-
-    &-inner {
-        .#{$module}-rtl & {
-            direction: rtl;
-        }
-    }
-
-    &-title {
-        .#{$module}-rtl & {
-            text-align: right;
-        }
-    }
-}