@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/treeSelect/rtl.scss

@@ -0,0 +1,62 @@
+$module: #{$prefix}-tree-select;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        .#{$prefix}-tagInput {
+            .#{$prefix}-input {
+                padding-right: 0;
+            }
+        }
+
+        &-multiple-tagInput-notEmpty {
+            .#{$prefix}-tagInput {
+                margin-left: 0;
+                margin-right: $spacing-treeSelect_selection_tagInput_notEmpty-marginLeft;
+            }
+        }
+    
+        &-multiple-tagInput-empty {
+            .#{$prefix}-tagInput {
+                margin-left: 0;
+                margin-right: $spacing-treeSelect_selection_tagInput_empty-marginLeft;
+            }
+        }
+        &-selection{
+            padding-right: $spacing-treeSelect_selection-paddingLeft;
+            padding-left: 0;
+        }
+
+        &-multiple {
+            .#{$module}-selection {
+                padding-left: 0;
+                padding-right: $spacing-treeSelect_selection_multiple-paddingLeft;
+    
+                &-placeholder {
+                    padding-left: 0;
+                    padding-right: $spacing-treeSelect_placeholder_multiple-paddingLeft;
+                }
+            }
+        }
+    
+        &-inset-label {
+            margin-right: 0;
+            margin-left: $spacing-treeSelect_insertLabel-marginRight;
+        }
+    
+        &-prefix,
+        &-suffix {
+            &.#{$module}-with-suffix {
+                .#{$module}-selection {
+                    padding-right: auto;
+                    padding-left: 0;
+                }
+            }
+        }
+    }
+    .#{$module}-popover {
+        direction: rtl;
+    }
+}

package/lib/cjs/treeSelect/treeSelect.css

@@ -0,0 +1,308 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-tree-select {
+  box-sizing: border-box;
+  border-radius: var(--semi-border-radius-small);
+  border: 1px solid transparent;
+  min-width: 80px;
+  min-height: 32px;
+  line-height: 32px;
+  font-weight: 400;
+  background-color: var(--semi-color-fill-0);
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+}
+.semi-tree-select:hover {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-tree-select-focus {
+  border: 1px solid var(--semi-color-focus-border);
+  outline: 0;
+}
+.semi-tree-select-warning {
+  background-color: var(--semi-color-warning-light-default);
+  border-color: var(--semi-color-warning-light-default);
+}
+.semi-tree-select-warning:hover {
+  background-color: var(--semi-color-warning-light-hover);
+  border-color: var(--semi-color-warning-light-hover);
+}
+.semi-tree-select-warning.semi-tree-select-focus {
+  background-color: var(--semi-color-warning-light-default);
+  border-color: var(--semi-color-warning);
+}
+.semi-tree-select-warning:active {
+  background-color: var(--semi-color-warning-light-active);
+  border-color: var(--semi-color-warning-light-active);
+}
+.semi-tree-select-error {
+  background-color: var(--semi-color-danger-light-default);
+  border-color: var(--semi-color-danger-light-default);
+}
+.semi-tree-select-error:hover {
+  background-color: var(--semi-color-danger-light-hover);
+  border-color: var(--semi-color-danger-light-hover);
+}
+.semi-tree-select-error.semi-tree-select-focus {
+  background-color: var(--semi-color-danger-light-default);
+  border-color: var(--semi-color-danger);
+}
+.semi-tree-select-error:active {
+  background-color: var(--semi-color-danger-light-active);
+  border-color: var(--semi-color-danger-light-active);
+}
+.semi-tree-select-disabled {
+  cursor: not-allowed;
+  user-select: none;
+  background-color: var(--semi-color-disabled-fill);
+}
+.semi-tree-select-disabled:hover {
+  background-color: var(--semi-color-disabled-fill);
+}
+.semi-tree-select-disabled .semi-tree-select-selection,
+.semi-tree-select-disabled .semi-tree-select-selection-placeholder {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+.semi-tree-select-disabled .semi-tree-select-arrow,
+.semi-tree-select-disabled .semi-tree-select-prefix,
+.semi-tree-select-disabled .semi-tree-select-suffix {
+  color: var(--semi-color-disabled-text);
+}
+.semi-tree-select-disabled .semi-tag {
+  color: var(--semi-color-disabled-text);
+  background-color: transparent;
+}
+.semi-tree-select-selection {
+  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;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-grow: 1;
+  overflow: hidden;
+  padding-left: 12px;
+  padding-right: 0;
+  cursor: pointer;
+  color: var(--semi-color-text-0);
+}
+.semi-tree-select-selection-placeholder {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--semi-color-text-2);
+}
+.semi-tree-select-selection .semi-tag-group {
+  height: inherit;
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.semi-tree-select-selection .semi-tag {
+  margin: 1px 2px;
+}
+.semi-tree-select-selection-TriggerSearchItem {
+  position: absolute;
+}
+.semi-tree-select-selection-TriggerSearchItem-placeholder {
+  opacity: 0.6;
+}
+.semi-tree-select-selection-TriggerSearchItem-disabled {
+  cursor: not-allowed;
+  color: var(--semi-color-disabled-text);
+}
+.semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper {
+  width: 100%;
+}
+.semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-tree-select-inputTrigger .semi-input-wrapper {
+  background: transparent;
+}
+.semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-input-wrapper {
+  height: 100%;
+  width: 100%;
+  border: none;
+  background-color: transparent;
+}
+.semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-input-wrapper-focus {
+  border: none;
+}
+.semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-input {
+  padding-left: 0;
+  padding-right: 0;
+}
+.semi-tree-select-selection .semi-tagInput {
+  border: hidden;
+  background: transparent;
+}
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper {
+  height: 30px;
+}
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper .semi-input {
+  padding-left: 0;
+}
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper-small {
+  height: 22px;
+}
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper-large {
+  height: 38px;
+}
+.semi-tree-select-multiple-tagInput-notEmpty .semi-tagInput {
+  margin-left: -4px;
+}
+.semi-tree-select-multiple-tagInput-empty .semi-tagInput {
+  margin-left: 4px;
+}
+.semi-tree-select-multiple {
+  display: inline-flex;
+}
+.semi-tree-select-multiple .semi-tree-select-selection {
+  padding-left: 4px;
+  padding-right: 0;
+}
+.semi-tree-select-multiple .semi-tree-select-selection-placeholder {
+  padding-left: 8px;
+}
+.semi-tree-select-small {
+  min-height: 24px;
+  line-height: 24px;
+}
+.semi-tree-select-large {
+  min-height: 40px;
+  line-height: 40px;
+}
+.semi-tree-select-arrow {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  justify-content: center;
+  width: 32px;
+  color: var(--semi-color-text-2);
+}
+.semi-tree-select-inset-label {
+  display: inline;
+  margin-right: 12px;
+  font-weight: 600;
+  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;
+  color: var(--semi-color-text-2);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.semi-tree-select.semi-tree-select-with-prefix {
+  display: inline-flex;
+  align-items: center;
+}
+.semi-tree-select-arrow, .semi-tree-select-clearbtn {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  justify-content: center;
+  width: 32px;
+  color: var(--semi-color-text-2);
+}
+.semi-tree-select-clearbtn:hover {
+  color: var(--semi-color-primary-hover);
+}
+.semi-tree-select-clearbtn:active {
+  color: var(--semi-color-primary-active);
+}
+.semi-tree-select-prefix, .semi-tree-select-suffix {
+  display: inline;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.semi-tree-select-prefix-text, .semi-tree-select-suffix-text {
+  margin: 0px 12px;
+}
+.semi-tree-select-prefix-icon, .semi-tree-select-suffix-icon {
+  color: var(--semi-color-text-2);
+  margin: 0px 8px;
+}
+.semi-tree-select-prefix.semi-tree-select-with-suffix .semi-tree-select-selection, .semi-tree-select-suffix.semi-tree-select-with-suffix .semi-tree-select-selection {
+  padding-right: 0px;
+}
+.semi-tree-select-prefix-search-wrapper, .semi-tree-select-suffix-search-wrapper {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--semi-color-fill-0);
+}
+.semi-tree-select-prefix-maxTagCount, .semi-tree-select-suffix-maxTagCount {
+  color: var(--semi-color-text-2);
+  font-size: 14px;
+}
+.semi-tree-select-prefix-popover, .semi-tree-select-suffix-popover {
+  max-height: 300px;
+  overflow: auto;
+}
+
+.semi-tree-select-popover .semi-tree-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.semi-tree-select-popover .semi-tree-wrapper .semi-tree-option-list {
+  flex: 1;
+  min-width: 230px;
+}
+.semi-tree-select-popover .semi-tree-wrapper .semi-tree-search-wrapper {
+  border-bottom: 1px var(--semi-color-fill-0) solid;
+}
+
+.semi-rtl .semi-tree-select,
+.semi-portal-rtl .semi-tree-select {
+  direction: rtl;
+}
+.semi-rtl .semi-tree-select .semi-tagInput .semi-input,
+.semi-portal-rtl .semi-tree-select .semi-tagInput .semi-input {
+  padding-right: 0;
+}
+.semi-rtl .semi-tree-select-multiple-tagInput-notEmpty .semi-tagInput,
+.semi-portal-rtl .semi-tree-select-multiple-tagInput-notEmpty .semi-tagInput {
+  margin-left: 0;
+  margin-right: -4px;
+}
+.semi-rtl .semi-tree-select-multiple-tagInput-empty .semi-tagInput,
+.semi-portal-rtl .semi-tree-select-multiple-tagInput-empty .semi-tagInput {
+  margin-left: 0;
+  margin-right: 4px;
+}
+.semi-rtl .semi-tree-select-selection,
+.semi-portal-rtl .semi-tree-select-selection {
+  padding-right: 12px;
+  padding-left: 0;
+}
+.semi-rtl .semi-tree-select-multiple .semi-tree-select-selection,
+.semi-portal-rtl .semi-tree-select-multiple .semi-tree-select-selection {
+  padding-left: 0;
+  padding-right: 4px;
+}
+.semi-rtl .semi-tree-select-multiple .semi-tree-select-selection-placeholder,
+.semi-portal-rtl .semi-tree-select-multiple .semi-tree-select-selection-placeholder {
+  padding-left: 0;
+  padding-right: 8px;
+}
+.semi-rtl .semi-tree-select-inset-label,
+.semi-portal-rtl .semi-tree-select-inset-label {
+  margin-right: 0;
+  margin-left: 12px;
+}
+.semi-rtl .semi-tree-select-prefix.semi-tree-select-with-suffix .semi-tree-select-selection, .semi-rtl .semi-tree-select-suffix.semi-tree-select-with-suffix .semi-tree-select-selection,
+.semi-portal-rtl .semi-tree-select-prefix.semi-tree-select-with-suffix .semi-tree-select-selection,
+.semi-portal-rtl .semi-tree-select-suffix.semi-tree-select-with-suffix .semi-tree-select-selection {
+  padding-right: auto;
+  padding-left: 0;
+}
+.semi-rtl .semi-tree-select-popover,
+.semi-portal-rtl .semi-tree-select-popover {
+  direction: rtl;
+}

package/lib/cjs/treeSelect/treeSelect.scss

@@ -0,0 +1,332 @@
+@import './variables.scss';
+
+$module: #{$prefix}-tree-select;
+
+.#{$module} {
+    box-sizing: border-box;
+    border-radius: $radius-treeSelect;
+    border: $width-treeSelect-border solid $color-treeSelect_default-border-default;
+    min-width: $width-treeSelect_default;
+    min-height: $height-treeSelect_default;
+    line-height: $font-treeSelect_default-lineHeight;
+    font-weight: $font-treeSelect_default-fontWeight;
+    background-color: $color-treeSelect_default-bg-default;
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+        background-color: $color-treeSelect_default-bg-hover;
+    }
+
+    &-focus {
+        border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+        outline: 0;
+    }
+
+    &-warning {
+        background-color: $color-treeSelect_warning-bg-default;
+        border-color: $color-treeSelect_warning-border-default;
+
+        &:hover {
+            background-color: $color-treeSelect_warning-bg-hover;
+            border-color: $color-treeSelect_warning-border-hover;
+        }
+
+        &.#{$module}-focus {
+            background-color: $color-treeSelect_warning-bg-focus;
+            border-color: $color-treeSelect_warning-border-focus;
+        }
+
+        &:active {
+            background-color: $color-treeSelect_warning-bg-active;
+            border-color: $color-treeSelect_warning-border-active;
+        }
+    }
+
+    &-error {
+        background-color: $color-treeSelect_danger-bg-default;
+        border-color: $color-treeSelect_danger-border-default;
+
+        &:hover {
+            background-color: $color-treeSelect_danger-bg-hover;
+            border-color: $color-treeSelect_danger-border-hover;
+        }
+
+        &.#{$module}-focus {
+            background-color: $color-treeSelect_danger-bg-focus;
+            border-color: $color-treeSelect_danger-border-focus;
+        }
+
+        &:active {
+            background-color: $color-treeSelect_danger-bg-active;
+            border-color: $color-treeSelect_danger-border-active;
+        }
+    }
+
+    &-disabled {
+        cursor: not-allowed;
+        user-select: none;
+
+        background-color: $color-treeSelect_input_disabled-bg-default;
+        // border: 1px solid $color-treeSelect_input_disabled-border-default;
+
+        &:hover {
+            background-color: $color-treeSelect_input_disabled-bg-hover;
+        }
+
+        .#{$module}-selection,
+        .#{$module}-selection-placeholder {
+            color: $color-treeSelect_input_disabled-text-default;
+            cursor: not-allowed;
+        }
+
+        .#{$module}-arrow,
+        .#{$module}-prefix,
+        .#{$module}-suffix {
+            color: $color-treeSelect_input_disabled-text-default;
+        }
+
+        .#{$prefix}-tag {
+            color: $color-treeSelect_input_disabled-text-default;
+            background-color: $color-treeSelect_tag_disabled-bg-default;
+        }
+    }
+
+    &-selection {
+        @include font-size-regular;
+
+        height: 100%;
+        display: inline-flex;
+        align-items: center;
+        flex-wrap: wrap;
+        flex-grow: 1;
+        overflow: hidden;
+        padding-left: $spacing-treeSelect_selection-paddingLeft;
+        padding-right: 0;
+        cursor: pointer;
+        color: $color-treeSelect_selection-text-default;
+
+        &-placeholder {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            color: $color-treeSelect_input_placeholder-text-default;
+        }
+
+        .#{$prefix}-tag-group {
+            height: inherit;
+            display: inline-flex;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .#{$prefix}-tag {
+            margin: $spacing-treeSelect_tag-marginY $spacing-treeSelect_tag-marginX;
+        }
+
+        &-TriggerSearchItem {
+            position: absolute;
+            
+            &-placeholder {
+                opacity: .6;
+            }
+
+            &-disabled {
+                cursor: not-allowed;
+                color: $color-treeSelect_selection_TriggerSearchItem_disabled-text-default;
+            }
+        }
+
+        .#{$module}-triggerSingleSearch-wrapper{
+            width: 100%;
+
+            .#{$module}-inputTrigger {
+                .#{$prefix}-input-wrapper {
+                    background: transparent;
+                }
+            }
+
+            // Same as Cascader, covering part of the style of semi Input component
+            // 这里和 cascader 相同, 覆盖 semi Input 的部分内置样式
+            .#{$prefix}-input-wrapper {
+                height: 100%;
+                width: 100%;
+                border: $color-treeSelect_inputTrigger-border-default;
+                background-color: $color-treeSelect_inputTrigger-bg-default;
+            }
+
+            .#{$prefix}-input-wrapper-focus {
+                border: $color-treeSelect_inputTrigger-border-default;
+            }
+
+            .#{$prefix}-input {
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+
+        .#{$prefix}-tagInput {
+            border: hidden;
+            background: transparent;
+
+            .#{$prefix}-tagInput-wrapper{
+                padding-left: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
+                padding-right: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
+
+                .#{$prefix}-input-wrapper {
+                    height: $height-treeSelect_selection_tagInput_input_default;
+    
+                    .#{$prefix}-input {
+                        padding-left: 0;
+                    }
+                }
+    
+                .#{$prefix}-input-wrapper-small {
+                    height: $height-treeSelect_selection_tagInput_input_small;
+                }
+                .#{$prefix}-input-wrapper-large {
+                    height: $height-treeSelect_selection_tagInput_input_large;
+                }
+            }
+        }
+    }
+    
+    &-multiple-tagInput-notEmpty {
+        .#{$prefix}-tagInput {
+            margin-left: $spacing-treeSelect_selection_tagInput_notEmpty-marginLeft;
+        }
+    }
+
+
+    &-multiple-tagInput-empty {
+        .#{$prefix}-tagInput {
+            margin-left: $spacing-treeSelect_selection_tagInput_empty-marginLeft;
+        }
+    }
+
+    &-multiple {
+        display: inline-flex;
+
+        .#{$module}-selection {
+            padding-left: $spacing-treeSelect_selection_multiple-paddingLeft;
+            padding-right: 0;
+
+            &-placeholder {
+                padding-left: $spacing-treeSelect_placeholder_multiple-paddingLeft;
+            }
+        }
+    }
+
+    &-small {
+        min-height: $height-treeSelect_small;
+        line-height: $font-treeSelect_small-lineHeight;
+    }
+
+    &-large {
+        min-height: $height-treeSelect_large;
+        line-height: $font-treeSelect_large-lineHeight;
+    }
+
+    &-arrow {
+        // position: absolute;
+        // top: 0;
+        // right: 0;
+        display: inline-flex;
+        align-items: center;
+        height: 100%;
+        justify-content: center;
+        width: $width-treeSelect_arrow;
+        color: $color-treeSelect_default-icon-default;
+    }
+
+    &-inset-label {
+        display: inline;
+        margin-right: $spacing-treeSelect_insertLabel-marginRight;
+        font-weight: $font-treeSelect_insertLabel-fontWeight;
+        @include font-size-regular;
+        color: $color-treeSelect_insertLabel-text-default;
+        flex-shrink: 0;
+        white-space: nowrap;
+    }
+
+    &.#{$module}-with-prefix {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    &-arrow,
+    &-clearbtn {
+        display: inline-flex;
+        align-items: center;
+        height: 100%;
+        justify-content: center;
+        width: $width-treeSelect_arrow;
+        color: $color-treeSelect_default-icon-default;
+    }
+
+    &-clearbtn {
+        &:hover {
+            color: $color-treeSelect_default-icon-hover;
+        }
+
+        &:active {
+            color: $color-treeSelect_default-icon-active;
+        }
+    }
+
+    &-prefix,
+    &-suffix {
+        display: inline;
+        @include all-center;
+
+        &-text {
+            margin: $spacing-treeSelect_prefix_text-marginY $spacing-treeSelect_prefix_text-marginX;
+        }
+
+        &-icon {
+            color: $color-treeSelect_default-icon-default;
+            margin: $spacing-treeSelect_prefix_icon-marginY $spacing-treeSelect_prefix_icon-marginX;
+        }
+
+        &.#{$module}-with-suffix {
+            .#{$module}-selection {
+                padding-right: $spacing-treeSelect_selection_withSuffix-paddingRight;
+            }
+        }
+
+        &-search-wrapper {
+            padding: $spacing-treeSelect_search_wrapper-paddingY $spacing-treeSelect_search_wrapper-paddingX;
+            border-bottom: $width-treeSelect_search_wrapper-border solid $color-treeSelect_search-border-default;
+        }
+
+        &-maxTagCount {
+            color: $color-treeSelect_input_placeholder-text-default;
+            font-size: $font-treeSelect_default-fontSize;
+        }
+
+        &-popover {
+            max-height: $height-treeSelect_popover;
+            overflow: auto;
+        }
+    }
+}
+.#{$module}-popover {
+    .#{$prefix}-tree-wrapper {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .#{$prefix}-tree-option-list {
+            flex: 1;
+            min-width: $width-treeSelect_option;
+        }
+
+        .#{$prefix}-tree-search-wrapper {
+            border-bottom: $width-treeSelect_search_wrapper-border $color-treeSelect_search-border-default solid;
+        }
+    }
+}
+
+@import './rtl.scss';