@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/descriptions/descriptions.scss

@@ -0,0 +1,150 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-descriptions;
+
+.#{$module} {
+    line-height: $font-descriptions-lineHeight;
+    table,
+    tr,
+    th,
+    td {
+        margin: 0;
+        padding: 0;
+        border: 0;
+    }
+
+    th {
+        padding-right: $spacing-descriptions_th-paddingRight;
+    }
+
+    & &-item {
+        margin: 0;
+        padding-bottom: $spacing-descriptions_item-paddingBottom;
+        text-align: left;
+        vertical-align: top;
+    }
+
+    &-key {
+        font-weight: normal;
+        @include font-size-regular;
+        min-height: $font-size-regular;
+        white-space: nowrap;
+        color: $color-descriptions_key-text-default;
+    }
+
+    &-value {
+        font-weight: normal;
+        @include font-size-regular;
+        color: $color-descriptions_value-text-default;
+    }
+
+    &-center {
+        .#{$module}-item-th {
+            text-align: right;
+        }
+
+        .#{$module}-item-td {
+            text-align: left;
+        }
+    }
+
+    &-left {
+        .#{$module}-item-th,
+        .#{$module}-item-td {
+            text-align: left;
+        }
+    }
+
+    &-justify {
+        .#{$module}-item-th {
+            text-align: left;
+        }
+
+        .#{$module}-item-td {
+            text-align: right;
+        }
+    }
+
+    &-plain {
+        // tag 垂直居中
+        .#{$module}-key,
+        .#{$module}-value {
+            display: inline-block;
+        }
+
+        .#{$module}-value {
+            padding-left: $spacing-descriptions_value_plain-paddingLeft;
+
+            & .#{$prefix}-tag {
+                vertical-align: middle;
+            }
+        }
+    }
+
+    &-double {
+
+        tbody {
+            display: flex;
+            flex-wrap: wrap;
+        }
+
+        tr {
+            display: inline-flex;
+            flex-direction: column;
+        }
+
+        & .#{$module}-item {
+            padding: $spacing-descriptions_item_double-padding;
+            flex: 1;
+        }
+
+        .#{$module}-value {
+            font-weight: $font-descriptions_value-fontWeight;
+        }
+
+        &-small {
+            .#{$module}-item {
+                padding-right: $spacing-descriptions_item_small-paddingRight;
+            }
+
+            .#{$module}-key {
+                @include font-size-small;
+                padding-bottom: 0;
+            }
+
+            .#{$module}-value {
+                @include font-size-header-6;
+            }
+        }
+
+        &-medium {
+            .#{$module}-item {
+                padding-right: $spacing-descriptions_item_medium-paddingRight;
+            }
+
+            & .#{$module}-key {
+                padding-bottom: $spacing-descriptions_key_medium-paddingBottom;
+            }
+
+            & .#{$module}-value {
+                @include font-size-header-4;
+            }
+        }
+
+        &-large {
+            .#{$module}-item {
+                padding-right: $spacing-descriptions_item_large-paddingRight;
+            }
+
+            & .#{$module}-key {
+                padding-bottom: $spacing-descriptions_key_large-paddingBottom;
+            }
+
+            & .#{$module}-value {
+                @include font-size-header-2;
+            }
+        }
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/descriptions/rtl.scss

@@ -0,0 +1,91 @@
+$module: #{$prefix}-descriptions;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        th {
+            direction: rtl;
+
+            padding-right: 0;
+            padding-left: $spacing-descriptions_th-paddingRight;
+        }
+
+        & .#{$module}-item {
+            text-align: right;
+        }
+
+        &-center {
+            .#{$module}-item-th {
+                text-align: left;
+            }
+
+            .#{$module}-item-td {
+                text-align: right;
+            }
+        }
+
+        &-left {
+            .#{$module}-item-th,
+            .#{$module}-item-td {
+                text-align: left;
+            }
+        }
+
+        &-justify {
+            .#{$module}-item-th {
+                text-align: right;
+            }
+
+            .#{$module}-item-td {
+                text-align: left;
+            }
+        }
+
+        &-plain {
+            .#{$module}-key,
+            .#{$module}-value {
+                display: inline-block;
+            } 
+
+            .#{$module}-value {
+                padding-left: 0;
+                padding-right: $spacing-descriptions_value_plain-paddingLeft;
+
+                & .#{$prefix}-tag {
+                    vertical-align: middle;
+                }
+            }
+        }
+
+        &-double {
+            direction: rtl;
+
+            & .#{$module}-item {
+                text-align: right;
+            }
+
+            &-small {
+                .#{$module}-item {
+                    padding-right: 0;
+                    padding-left: $spacing-descriptions_item_small-paddingRight;
+                }
+            }
+
+            &-medium {
+                .#{$module}-item {
+                    padding-right: 0;
+                    padding-left: $spacing-descriptions_item_medium-paddingRight;
+                }
+            }
+
+            &-large {
+                .#{$module}-item {
+                    padding-right: 0;
+                    padding-left: $spacing-descriptions_item_large-paddingRight;
+                }
+            }
+        }
+    }
+}

package/lib/cjs/descriptions/variables.scss

@@ -0,0 +1,15 @@
+$font-descriptions-lineHeight: 20px; // 文字行高
+$font-descriptions_value-fontWeight: $font-weight-bold; // 双行显示 value 文字字重
+$spacing-descriptions_th-paddingRight: $spacing-loose; // 普通显示 key 右侧内边距
+$spacing-descriptions_item-paddingBottom: $spacing-base-tight; // 普通显示 item 底部内边距
+$spacing-descriptions_item_small-paddingRight: 48px; // 双行显示 item 右侧内边距 - 小尺寸
+$spacing-descriptions_item_medium-paddingRight: 60px; // 双行显示 item 右侧内边距 - 中尺寸
+$spacing-descriptions_item_large-paddingRight: 80px; // 双行显示 item 右侧内边距 - 大尺寸
+$spacing-descriptions_key_medium-paddingBottom: $spacing-extra-tight; // 双行显示 key 底部内边距 - 中尺寸
+$spacing-descriptions_key_large-paddingBottom: $spacing-extra-tight; // 双行显示 key 底部内边距 - 大尺寸
+
+$color-descriptions_key-text-default: var(--semi-color-text-2); // key 文字颜色
+$color-descriptions_value-text-default: var(--semi-color-text-0); // value 文字颜色
+
+$spacing-descriptions_value_plain-paddingLeft: 8px; // 普通显示 plain 模式下 value 左侧内边距
+$spacing-descriptions_item_double-padding: 0; // 双行显示右侧 item 内边距

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

@@ -0,0 +1,16 @@
+declare const cssClasses: {
+    PREFIX: string;
+    SELECTED: string;
+    DISABLED: string;
+};
+declare const strings: {
+    POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
+    TRIGGER_SET: string[];
+    DEFAULT_LEAVE_DELAY: number;
+    ITEM_TYPE: string[];
+};
+declare const numbers: {
+    SPACING: number;
+    NESTED_SPACING: number;
+};
+export { cssClasses, strings, numbers };

package/lib/cjs/dropdown/constants.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.numbers = exports.cssClasses = void 0;
+
+var _constants = require("../tooltip/constants");
+
+var _constants2 = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants2.BASE_CLASS_PREFIX, "-dropdown"),
+  SELECTED: "".concat(_constants2.BASE_CLASS_PREFIX, "-dropdown-item-selected"),
+  DISABLED: "".concat(_constants2.BASE_CLASS_PREFIX, "-dropdown-item-disabled")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  POSITION_SET: _constants.strings.POSITION_SET,
+  TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
+  DEFAULT_LEAVE_DELAY: 100,
+  ITEM_TYPE: ['primary', 'secondary', 'tertiary', 'warning', 'danger']
+};
+exports.strings = strings;
+const numbers = {
+  SPACING: 4,
+  NESTED_SPACING: 2
+};
+exports.numbers = numbers;

package/lib/cjs/dropdown/dropdown.css

@@ -0,0 +1,123 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-dropdown {
+  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;
+}
+.semi-dropdown-wrapper {
+  box-shadow: var(--semi-shadow-elevated);
+  position: relative;
+  z-index: 1050;
+  border-radius: var(--semi-border-radius-medium);
+  background: var(--semi-color-bg-3);
+  visibility: hidden;
+}
+.semi-dropdown-wrapper-show {
+  visibility: visible;
+}
+.semi-dropdown-trigger {
+  display: inline-block;
+}
+.semi-dropdown-menu {
+  list-style: none;
+  padding: 4px 0;
+  margin: 0;
+}
+.semi-dropdown-title {
+  color: var(--semi-color-text-2);
+  padding-top: 8px;
+  padding-bottom: 4px;
+  padding-left: 16px;
+  padding-right: 16px;
+  font-size: 12px;
+  line-height: 16px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  cursor: default;
+}
+.semi-dropdown-title-withTick {
+  padding-left: 31px;
+}
+.semi-dropdown-item {
+  padding: 8px 16px;
+  color: var(--semi-color-text-0);
+  max-width: 280px;
+  display: flex;
+  align-items: center;
+}
+.semi-dropdown-item:not(.semi-dropdown-item-active):hover {
+  background-color: var(--semi-color-fill-0);
+  cursor: pointer;
+}
+.semi-dropdown-item:not(.semi-dropdown-item-active):active {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-dropdown-item-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 8px;
+}
+.semi-dropdown-item-danger {
+  color: var(--semi-color-danger);
+}
+.semi-dropdown-item-secondary {
+  color: var(--semi-color-secondary);
+}
+.semi-dropdown-item-warning {
+  color: var(--semi-color-warning);
+}
+.semi-dropdown-item-tertiary {
+  color: var(--semi-color-tertiary);
+}
+.semi-dropdown-item-primary {
+  color: var(--semi-color-primary);
+}
+.semi-dropdown-item-withTick {
+  padding-left: 12px;
+}
+.semi-dropdown-item > .semi-icon {
+  flex-shrink: 0;
+  margin-right: 9px;
+  font-size: 12px;
+}
+.semi-dropdown-item-active {
+  font-weight: 600;
+}
+.semi-dropdown-item.semi-dropdown-item-disabled {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+.semi-dropdown-item.semi-dropdown-item-disabled:hover, .semi-dropdown-item.semi-dropdown-item-disabled:active {
+  cursor: not-allowed;
+  background-color: transparent;
+}
+.semi-dropdown-divider {
+  display: block;
+  height: 1px;
+  width: 100%;
+  min-width: 100%;
+  clear: both;
+  background: var(--semi-color-border);
+  margin: 4px 0;
+}
+
+.semi-rtl .semi-dropdown-wrapper,
+.semi-portal-rtl .semi-dropdown-wrapper {
+  direction: rtl;
+}
+.semi-rtl .semi-dropdown-title-withTick,
+.semi-portal-rtl .semi-dropdown-title-withTick {
+  padding-left: 0;
+  padding-right: 31px;
+}
+.semi-rtl .semi-dropdown-item-withTick,
+.semi-portal-rtl .semi-dropdown-item-withTick {
+  padding-left: auto;
+  padding-right: 12px;
+}
+.semi-rtl .semi-dropdown-item > .semi-icon,
+.semi-portal-rtl .semi-dropdown-item > .semi-icon {
+  margin-right: 0;
+  margin-left: 9px;
+}

package/lib/cjs/dropdown/dropdown.scss

@@ -0,0 +1,106 @@
+//@import '../theme/variables.scss';
+@import './variables.scss';
+
+$module: #{$prefix}-dropdown;
+
+.#{$module} {
+    @include font-size-regular;
+    &-wrapper {
+        @include shadow-elevated;
+        position: relative;
+        z-index: $z-dropdown;
+        border-radius: $radius-dropdown;
+        background: $color-dropdown-bg-default;
+        visibility: hidden;
+        // min-width: 150px;
+        &-show {
+            visibility: visible;
+        }
+    }
+    &-trigger {
+        display: inline-block;
+    }
+    &-menu {
+        list-style: none;
+        padding: $spacing-dropdown_menu-paddingY $spacing-dropdown_menu-paddingX;
+        margin: 0;
+    }
+    &-title {
+        color: $color-dropdown_title-text-default;
+        padding-top: $spacing-dropdown_title-paddingTop;
+        padding-bottom: $spacing-dropdown_title-paddingBottom;
+        padding-left: $spacing-dropdown_title-paddingLeft;
+        padding-right: $spacing-dropdown_title-paddingRight;
+        &-withTick {
+            padding-left: $spacing-dropdown_title_withTick-paddingLeft;
+        }
+        @include font-size-small;
+        cursor: default;
+    }
+    &-item {
+        padding: $spacing-dropdown_item-paddingY $spacing-dropdown_item-paddingX;
+        color: $color-dropdown_item-text-default;
+        max-width: $width-dropdown;
+        display: flex;
+        align-items: center;
+        &:not(.#{$module}-item-active):hover {
+            background-color: $color-dropdown_item-bg-hover;
+            cursor: pointer;
+        }
+        &:not(.#{$module}-item-active):active {
+            background-color: $color-dropdown_item-bg-active;
+        }
+        &-icon {
+            display: inline-flex;
+            align-items: center;
+            // margin-left: $spacing-tight;
+            margin-right: $spacing-tight;
+        }
+        &-danger {
+            color: $color-dropdown_item_danger-text-default;
+        }
+        &-secondary {
+            color: $color-dropdown_item_secondary-text-default;
+        }
+        &-warning {
+            color: $color-dropdown_item_warning-text-default;
+        }
+        &-tertiary {
+            color: $color-dropdown_item_tertiary-text-default;
+        }
+        &-primary {
+            color: $color-dropdown_item_primary-text-default;
+        }
+        &-withTick {
+            padding-left: $spacing-dropdown_item_withTick-paddingLeft;
+        }
+        & > .#{$prefix}-icon {
+            flex-shrink: 0;
+            margin-right: $spacing-dropdown_icon-marginRight;
+            font-size: $size-dropdown-icon-width;
+        }
+        &-active {
+            font-weight: $font-dropdown_item_active-fontWeight;
+        }
+    }
+    &-item.#{$module}-item-disabled {
+        color: $color-dropdown_item_disabled-text-default;
+        cursor: not-allowed;
+        &:hover,
+        &:active {
+            cursor: not-allowed;
+            background-color: $color-dropdown_item_disabled-bg-default;
+        }
+    }
+    &-divider {
+        display: block;
+        height: $height-dropdown_seperator;
+        width: 100%;
+        min-width: 100%;
+        clear: both;
+        background: $color-dropdown_seperator-bg-default;
+        margin: $spacing-dropdown_seperator-marginY $spacing-dropdown_seperator-marginX;
+    }
+}
+
+@import './rtl.scss';

package/lib/cjs/dropdown/foundation.d.ts

@@ -0,0 +1,8 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface DropdownAdapter extends Partial<DefaultAdapter> {
+    setPopVisible(visible: boolean): void;
+    notifyVisibleChange(visible: boolean): void;
+}
+export default class DropdownFoundation extends BaseFoundation<DropdownAdapter> {
+    handleVisibleChange(visible: boolean): void;
+}

package/lib/cjs/dropdown/foundation.js

@@ -0,0 +1,24 @@
+"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 _foundation = _interopRequireDefault(require("../base/foundation"));
+
+class DropdownFoundation extends _foundation.default {
+  handleVisibleChange(visible) {
+    this._adapter.setPopVisible(visible);
+
+    this._adapter.notifyVisibleChange(visible);
+  }
+
+}
+
+exports.default = DropdownFoundation;

package/lib/cjs/dropdown/rtl.scss

@@ -0,0 +1,27 @@
+$module: #{$prefix}-dropdown;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        &-wrapper {
+            direction: rtl;
+        }
+
+        &-title {
+            &-withTick {
+                padding-left: 0;
+                padding-right: $spacing-dropdown_title_withTick-paddingLeft;
+            }
+        }
+        &-item {
+            &-withTick {
+                padding-left: auto;
+                padding-right: $spacing-dropdown_item_withTick-paddingLeft;
+            }
+            & > .#{$prefix}-icon {
+                margin-right: 0;
+                margin-left: $spacing-dropdown_icon-marginRight;
+            }
+        }
+    }
+}

package/lib/cjs/dropdown/variables.scss

@@ -0,0 +1,38 @@
+$radius-dropdown: var(--semi-border-radius-medium); // 下拉菜单圆角大小
+$color-dropdown-bg-default: var(--semi-color-bg-3); // 下拉菜单背景颜色
+$color-dropdown_title-text-default: var(--semi-color-text-2); // 下拉菜单分组标题文字颜色
+
+$spacing-dropdown_menu-paddingY: $spacing-extra-tight; // 下拉菜单垂直内边距
+$spacing-dropdown_menu-paddingX: 0; // 下拉菜单水平内边距
+$spacing-dropdown_title-paddingTop: $spacing-tight; // 下拉菜单分组标题顶部内边距
+$spacing-dropdown_title-paddingBottom: $spacing-extra-tight; // 下拉菜单分组标题底部内边距
+$spacing-dropdown_title-paddingLeft: $spacing-base; // 下拉菜单分组标题左侧内边距
+$spacing-dropdown_title-paddingRight: $spacing-base; // 下拉菜单分组标题右侧内边距
+$spacing-dropdown_title_withTick-paddingLeft: 31px; // 可选中的下拉菜单，分组标题左侧内边距
+$spacing-dropdown_item_withTick-paddingLeft: $spacing-base-tight; // 可选中弄的下拉菜单项，对勾 icon 左侧内边距
+
+$spacing-dropdown_item-paddingY: $spacing-tight; // 下拉菜单项垂直内边距
+$spacing-dropdown_item-paddingX: $spacing-base; // 下拉菜单项水平内边距
+
+$color-dropdown_item-text-default: var(--semi-color-text-0); // 下拉菜单项文字颜色
+$color-dropdown_item-bg-hover: var(--semi-color-fill-0); // 下拉菜单项背景颜色 - 悬浮
+$color-dropdown_item-bg-active: var(--semi-color-fill-1); // 下拉菜单项背景颜色 - 按下
+$color-dropdown_item_danger-text-default: var(--semi-color-danger); // 下拉菜单项背景颜色 - 悬浮
+$color-dropdown_item_secondary-text-default: var(--semi-color-secondary); // 二级菜单项文字颜色
+$color-dropdown_item_warning-text-default: var(--semi-color-warning); // 警告菜单项文字颜色
+$color-dropdown_item_tertiary-text-default: var(--semi-color-tertiary); // 第三菜单项文字颜色
+$color-dropdown_item_primary-text-default: var(--semi-color-primary); // 主要菜单项文字颜色
+$color-dropdown_item_disabled-text-default: var(--semi-color-disabled-text); // 禁用菜单项文字颜色
+$color-dropdown_item_disabled-bg-default: transparent; // 禁用菜单项背景颜色
+$color-dropdown_seperator-bg-default: var(--semi-color-border); // 菜单项分隔线颜色
+
+$spacing-dropdown_icon-marginRight: 9px; // 菜单项分隔线颜色
+$spacing-dropdown_seperator-marginY: $spacing-extra-tight; // 菜单项分隔线垂直内边距
+$spacing-dropdown_seperator-marginX: 0; // 菜单项分隔线水平内边距
+
+$width-dropdown: 280px; // 菜单最大宽度
+$size-dropdown-icon-width: 12px; // 菜单项图标宽度
+$size-dropdown-icon-height: 12px; // 菜单项图标高度
+$height-dropdown_seperator: 1px; // 菜单项分隔线宽度
+
+$font-dropdown_item_active-fontWeight: 600; // 选中菜单项字重

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

@@ -0,0 +1,7 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi-empty";
+};
+declare const strings: {
+    readonly LAYOUT: readonly ["vertical", "horizontal"];
+};
+export { cssClasses, strings };

package/lib/cjs/empty/constants.js

@@ -0,0 +1,20 @@
+"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, "-empty")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  LAYOUT: ['vertical', 'horizontal']
+};
+exports.strings = strings;