@douyinfe/semi-foundation 2.1.0 → 2.1.4

package/lib/cjs/select/select.scss

@@ -0,0 +1,422 @@
+//@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

@@ -0,0 +1,100 @@
+// 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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,28 @@
+"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

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