@douyinfe/semi-foundation 2.1.1 → 2.1.2

package/lib/cjs/badge/badge.scss

@@ -0,0 +1,168 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-badge;
+
+.#{$module} {
+    position: relative;
+    display: inline-block;
+
+    &-dot {
+        box-sizing: border-box;
+        width: $width-badge_dot;
+        height: $height-badge_dot;
+        border-radius: $radius-badge_dot;
+        background-color: $color-badge_default-bg-default;
+        border: $width-badge-border $color-badge_default-border-default solid;
+        z-index: $z-badge;
+    }
+
+    &-count {
+        box-sizing: border-box;
+        height: $height-badge_count;
+        min-width: $height-badge_count;
+        border-radius: $height-badge_count / 2;
+        padding: $spacing-badge_count-paddingY $spacing-badge_count-paddingX;
+        background-color: $color-badge_default-bg-default;
+        border: $width-badge-border $color-badge_default-border-default solid;
+        z-index: $z-badge;
+        text-align: center;
+        @include font-size-small;
+        font-weight: $font-size-regular;
+        color: $color-badge_default-text-default;
+    }
+
+    &-rightTop {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%, -50%);
+        transform-origin: 100% 0%;
+    }
+
+    &-rightBottom {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        transform: translate(50%, 50%);
+        transform-origin: 100% 0%;
+    }
+
+    &-leftTop {
+        position: absolute;
+        top: 0;
+        left: 0;
+        transform: translate(-50%, -50%);
+        transform-origin: 100% 0%;
+    }
+
+    &-leftBottom {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        transform: translate(-50%, 50%);
+        transform-origin: 100% 0%;
+    }
+
+    &-custom {
+        display: flex;
+    }
+
+    &-block {
+        position: static;
+        display: inline-block;
+    }
+
+    &-light::before {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: $color-badge_default_light-bg-default;
+        z-index: $z-badge_light-bg;
+    }
+
+    &-light::after {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: inherit;
+        z-index: $z-badge_light-bg;
+    }
+
+    &-primary {
+        &.#{$module}-solid {
+            background-color: $color-badge_primary_solid-bg-default;
+        }
+        &.#{$module}-light {
+            background-color: $color-badge_primary_light-bg-default;
+            color: $color-badge_primary_light-text-default;
+        }
+        &.#{$module}-inverted {
+            color: $color-badge_primary_inverted-text-default;
+        }
+    }
+
+    &-secondary {
+        &.#{$module}-solid {
+            background-color: $color-badge_secondary_solid-bg-default;
+        }
+        &.#{$module}-light {
+            background-color: $color-badge_secondary_light-bg-default;
+            color: $color-badge_secondary_light-text-default;
+        }
+        &.#{$module}-inverted {
+            color: $color-badge_secondary_inverted-text-default;
+        }
+    }
+
+    &-tertiary {
+        &.#{$module}-solid {
+            background-color: $color-badge_tertiary_solid-bg-default;
+        }
+        &.#{$module}-light {
+            background-color: $color-badge_tertiary_light-bg-default;
+            color: $color-badge_tertiary_light-text-default;
+        }
+        &.#{$module}-inverted {
+            color: $color-badge_tertiary_inverted-text-default;
+        }
+    }
+
+    &-danger {
+        &.#{$module}-solid {
+            background-color: $color-badge_danger_solid-bg-default;
+        }
+        &.#{$module}-light {
+            background-color: $color-badge_danger_light-bg-default;
+            color: $color-badge_danger_light-text-default;
+        }
+        &.#{$module}-inverted {
+            color: $color-badge_danger_inverted-text-default;
+        }
+    }
+
+    &-warning {
+        &.#{$module}-solid {
+            background-color: $color-badge_warning_solid-bg-default;
+        }
+        &.#{$module}-light {
+            background-color: $color-badge_warning_light-bg-default;
+            color: $color-badge_warning_light-text-default;
+        }
+        &.#{$module}-inverted {
+            color: $color-badge_warning_inverted-text-default;
+        }
+    }
+    
+}
+
+@import "./rtl.scss";

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

@@ -0,0 +1,10 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    TYPE_SET: string[];
+    THEME_SET: string[];
+    POS_SET: string[];
+};
+declare const numbers: {};
+export { cssClasses, strings, numbers };

package/lib/cjs/badge/constants.js

@@ -0,0 +1,24 @@
+"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("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-badge")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  TYPE_SET: ['primary', 'secondary', 'tertiary', 'warning', 'danger'],
+  THEME_SET: ['solid', 'light', 'inverted'],
+  POS_SET: ['leftTop', 'leftBottom', 'rightTop', 'rightBottom']
+};
+exports.strings = strings;
+const numbers = {};
+exports.numbers = numbers;

package/lib/cjs/badge/rtl.scss

@@ -0,0 +1,8 @@
+$module: #{$prefix}-badge;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+    }
+}

package/lib/cjs/badge/variables.scss

@@ -0,0 +1,43 @@
+$color-badge_default-border-default: var(--semi-color-bg-1); // 描边颜色 - 默认
+$color-badge_default-bg-default: var(--semi-color-bg-1); // 背景颜色 - 默认
+$color-badge_default_light-bg-default: var(--semi-color-bg-2); // 背景颜色 - 浅版
+
+$color-badge_default-text-default: var(--semi-color-bg-2); // 文字颜色 - 默认
+
+$color-badge_primary_solid-bg-default: var(--semi-color-primary); // 背景颜色 - 主色
+$color-badge_primary_light-bg-default: var(--semi-color-primary-light-default); // 背景颜色 - 浅版主色
+$color-badge_primary_light-text-default: var(--semi-color-primary); // 文字颜色 - 浅版主色
+$color-badge_primary_inverted-text-default: var(--semi-color-primary); // 文字颜色 - 白底
+
+$color-badge_secondary_solid-bg-default: var(--semi-color-secondary); // 背景颜色 - 次要
+$color-badge_secondary_light-bg-default: var(--semi-color-secondary-light-default); // 背景颜色 - 浅版次要
+$color-badge_secondary_light-text-default: var(--semi-color-secondary); // 文字颜色 - 浅版次要
+$color-badge_secondary_inverted-text-default: var(--semi-color-secondary); // 文字颜色 - 白底
+
+$color-badge_tertiary_solid-bg-default: var(--semi-color-tertiary); // 背景颜色 - 第三
+$color-badge_tertiary_light-bg-default: var(--semi-color-tertiary-light-default); // 背景颜色 - 第三
+$color-badge_tertiary_light-text-default: var(--semi-color-tertiary); // 文字颜色 - 浅版第三
+$color-badge_tertiary_inverted-text-default: var(--semi-color-tertiary); // 文字颜色 - 白底
+
+$color-badge_danger_solid-bg-default: var(--semi-color-danger); // 背景颜色 - 危险
+$color-badge_danger_light-bg-default: var(--semi-color-danger-light-default); // 背景颜色 - 浅版危险
+$color-badge_danger_light-text-default: var(--semi-color-danger); // 文字颜色 - 浅版危险
+$color-badge_danger_inverted-text-default: var(--semi-color-danger); // 文字颜色 - 白底
+
+$color-badge_warning_solid-bg-default: var(--semi-color-warning); // 背景颜色 - 警告
+$color-badge_warning_light-bg-default: var(--semi-color-warning-light-default); // 背景颜色 - 浅版警告
+$color-badge_warning_light-text-default: var(--semi-color-warning); // 文字颜色 - 浅版危险
+$color-badge_warning_inverted-text-default: var(--semi-color-warning); // 文字颜色 - 白底
+
+
+$width-badge_dot: 8px; // 点状徽标宽度
+$height-badge_dot: 8px; // 点状徽标高度
+$radius-badge_dot: var(--semi-border-radius-circle); // 点状徽标圆角
+
+$height-badge_count: 18px; // 数字徽标宽度
+$spacing-badge_count-paddingY: 0px; // 数字徽标上下内边距
+$spacing-badge_count-paddingX: 4px; // 数字徽标左右内边距
+
+$width-badge-border: 1px; // 描边宽度
+$z-badge: 1; // 徽标 z-index
+$z-badge_light-bg: -1; // 徽标浅色背景 z-index

package/lib/cjs/banner/banner.css

@@ -0,0 +1,92 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-banner {
+  padding: 12px 12px;
+}
+.semi-banner-content-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+.semi-banner-description {
+  margin: 0;
+}
+.semi-banner .semi-banner-content-wrapper .semi-banner-content {
+  display: flex;
+  flex: 1;
+  align-items: top;
+}
+.semi-banner-in-container {
+  border-radius: var(--semi-border-radius-small);
+}
+.semi-banner-in-container .semi-banner-content-wrapper .semi-banner-content-body {
+  flex: 1;
+}
+.semi-banner-in-container .semi-banner-content-wrapper .semi-banner-content-body .semi-banner-title + .semi-banner-description {
+  margin-top: 2px;
+}
+.semi-banner-full .semi-banner-content-wrapper .semi-banner-content {
+  justify-content: center;
+}
+.semi-banner-full .semi-banner-content-wrapper .semi-banner-icon,
+.semi-banner-full .semi-banner-content-wrapper .semi-banner-content-body {
+  display: flex;
+  align-items: center;
+}
+.semi-banner-close {
+  margin-left: 12px;
+  height: 24px;
+  width: 24px;
+}
+.semi-banner-extra {
+  margin-top: 8px;
+}
+.semi-banner-icon {
+  display: flex;
+  margin-right: 12px;
+}
+.semi-banner-info {
+  background-color: var(--semi-color-info-light-default);
+  color: var(--semi-color-info);
+}
+.semi-banner-info.semi-banner-bordered {
+  border: 1px solid var(--semi-color-info);
+}
+.semi-banner-warning {
+  background-color: var(--semi-color-warning-light-default);
+  color: var(--semi-color-warning);
+}
+.semi-banner-warning.semi-banner-bordered {
+  border: 1px solid var(--semi-color-warning);
+}
+.semi-banner-success {
+  background-color: var(--semi-color-success-light-default);
+  color: var(--semi-color-success);
+}
+.semi-banner-success.semi-banner-bordered {
+  border: 1px solid var(--semi-color-success);
+}
+.semi-banner-danger {
+  background-color: var(--semi-color-danger-light-default);
+  color: var(--semi-color-danger);
+}
+.semi-banner-danger.semi-banner-bordered {
+  border: 1px solid var(--semi-color-danger);
+}
+
+.semi-rtl .semi-banner,
+.semi-portal-rtl .semi-banner {
+  direction: rtl;
+}
+.semi-rtl .semi-banner-close,
+.semi-portal-rtl .semi-banner-close {
+  margin-left: 0;
+  margin-right: 12px;
+  height: 24px;
+  width: 24px;
+}
+.semi-rtl .semi-banner-icon,
+.semi-portal-rtl .semi-banner-icon {
+  margin-right: 0;
+  margin-left: 12px;
+}

package/lib/cjs/banner/banner.scss

@@ -0,0 +1,109 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-banner;
+
+.#{$module} {
+    padding: $spacing-banner-paddingY $spacing-banner-paddingX;
+    // align-items: center;
+    // @include font-size-regular;
+
+    &-content-wrapper {
+        display: flex;
+        flex-direction: row;
+    }
+
+    &-description {
+        margin: 0;
+    }
+
+    .#{$module}-content-wrapper {
+        .#{$module}-content {
+            display: flex;
+            flex: 1;
+            align-items: top;
+        }
+    }
+
+    &-in-container {
+        border-radius: $radius-banner;
+
+        .#{$module}-content-wrapper {
+            .#{$module}-content {
+
+                &-body {
+                    flex: 1;
+
+                    .#{$module}-title + .#{$module}-description {
+                        margin-top: $spacing-banner_title_description-marginTop;
+                    }
+                }
+            }
+        }
+    }
+
+    &-full {
+        .#{$module}-content-wrapper {
+            .#{$module}-content {
+                justify-content: center;
+            }
+            .#{$module}-icon,
+            .#{$module}-content-body {
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+
+    &-close {
+        margin-left: $spacing-banner_closeBtn-marginLeft;
+        height: $height-banner_closeBtn;
+        width: $width-banner_closeBtn;
+    }
+
+    &-extra {
+        margin-top: $spacing-banner_extra-marginTop;
+    }
+
+    &-icon {
+        display: flex;
+        margin-right: $spacing-banner_icon-marginRight;
+    }
+
+    &-info {
+        background-color: $color-banner_info-bg-default;
+        color: $color-banner_info-text-default;
+
+        &.#{$module}-bordered {
+            border: $width-banner-border solid $color-banner_info-border-default;
+        }
+    }
+
+    &-warning {
+        background-color: $color-banner_warning-bg-default;
+        color: $color-banner_warning-text-default;
+
+        &.#{$module}-bordered {
+            border: $width-banner-border solid $color-banner_warning-border-default;
+        }
+    }
+
+    &-success {
+        background-color: $color-banner_success-bg-default;
+        color: $color-banner_success-text-default;
+
+        &.#{$module}-bordered {
+            border: $width-banner-border solid $color-banner_success-border-default;
+        }
+    }
+
+    &-danger {
+        background-color: $color-banner_danger-bg-default;
+        color: $color-banner_danger-text-default;
+
+        &.#{$module}-bordered {
+            border: $width-banner-border solid $color-banner_danger-border-default;
+        }
+    }
+}
+
+@import "./rtl.scss";

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

@@ -0,0 +1,7 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    TYPE: string[];
+};
+export { cssClasses, strings };

package/lib/cjs/banner/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, "-banner")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  TYPE: ['info', 'success', 'danger', 'warning']
+};
+exports.strings = strings;

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

@@ -0,0 +1,9 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface BannerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    setVisible: () => void;
+    notifyClose: (e: any) => void;
+}
+export default class BannerFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<BannerAdapter<P, S>, P, S> {
+    constructor(adapter: BannerAdapter<P, S>);
+    removeBanner(e: any): void;
+}

package/lib/cjs/banner/foundation.js

@@ -0,0 +1,30 @@
+"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"));
+
+class BannerFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)((0, _assign.default)({}, BannerFoundation.defaultAdapter), adapter));
+  }
+
+  removeBanner(e) {
+    this._adapter.notifyClose(e);
+
+    this._adapter.setVisible();
+  }
+
+}
+
+exports.default = BannerFoundation;

package/lib/cjs/banner/rtl.scss

@@ -0,0 +1,20 @@
+$module: #{$prefix}-banner;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        &-close {
+            margin-left: 0;
+            margin-right: $spacing-banner_closeBtn-marginLeft;
+            height: $height-banner_closeBtn;
+            width: $width-banner_closeBtn;
+        }
+
+        &-icon {
+            margin-right: 0;
+            margin-left: $spacing-banner_icon-marginRight;
+        }
+    }
+}

package/lib/cjs/banner/variables.scss

@@ -0,0 +1,27 @@
+$color-banner_info-bg-default: var(--semi-color-info-light-default); // 背景色 - info
+$color-banner_info-text-default: var(--semi-color-info); // 文本颜色 - info
+$color-banner_info-border-default: var(--semi-color-info); // 描边颜色 - info
+
+$color-banner_warning-bg-default: var(--semi-color-warning-light-default); // 背景色 - 警告
+$color-banner_warning-text-default: var(--semi-color-warning); // 文本颜色 - 警告
+$color-banner_warning-border-default: var(--semi-color-warning); // 描边颜色 - 警告
+
+$color-banner_success-bg-default: var(--semi-color-success-light-default); // 背景色 - 成功
+$color-banner_success-text-default: var(--semi-color-success); // 文本颜色 - 成功
+$color-banner_success-border-default: var(--semi-color-success); // 描边颜色 - 成功
+
+$color-banner_danger-bg-default: var(--semi-color-danger-light-default); // 背景色 - 危险
+$color-banner_danger-text-default: var(--semi-color-danger); // 文本颜色 - 危险
+$color-banner_danger-border-default: var(--semi-color-danger); // 描边颜色 - 危险
+
+$radius-banner: var(--semi-border-radius-small); // 圆角
+$spacing-banner_closeBtn-marginLeft: $spacing-base-tight; // 关闭按钮左边距
+$spacing-banner_extra-marginTop: $spacing-tight; // 关闭按钮顶边距
+$spacing-banner_icon-marginRight: $spacing-base-tight; // 关闭按钮顶边距
+$spacing-banner-paddingX: $spacing-base-tight; // 整体水平内边距
+$spacing-banner-paddingY: $spacing-base-tight; // 整体垂直内边距
+$spacing-banner_title_description-marginTop: 2px; // 标题与描述信息的间距
+
+$height-banner_closeBtn: 24px; // 关闭按钮高度
+$width-banner_closeBtn: 24px; // 关闭按钮宽度
+$width-banner-border: 1px; // 描边宽度

package/lib/cjs/base/base.css

@@ -0,0 +1,24 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.semi-light-scrollbar::-webkit-scrollbar-track, .semi-light-scrollbar *::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0);
+}
+.semi-light-scrollbar::-webkit-scrollbar-corner, .semi-light-scrollbar *::-webkit-scrollbar-corner {
+  background-color: rgba(0, 0, 0, 0);
+}
+.semi-light-scrollbar::-webkit-scrollbar-thumb, .semi-light-scrollbar *::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  background: transparent;
+  transition: all 1s;
+}
+.semi-light-scrollbar:hover::-webkit-scrollbar-thumb, .semi-light-scrollbar *:hover::-webkit-scrollbar-thumb {
+  background: var(--semi-color-fill-2);
+}
+.semi-light-scrollbar::-webkit-scrollbar-thumb:hover, .semi-light-scrollbar *::-webkit-scrollbar-thumb:hover {
+  background: var(--semi-color-fill-1);
+}

package/lib/cjs/base/base.scss

@@ -0,0 +1,33 @@
+$module: #{$prefix}-base;
+
+.#{$prefix}-light-scrollbar {
+    // light scrollbar
+    &, * {
+        &::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+    
+        &::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0);
+        }
+    
+        &::-webkit-scrollbar-corner {
+            background-color: rgba(0, 0, 0, 0);
+        }
+    
+        &::-webkit-scrollbar-thumb {
+            border-radius: 6px;
+            background: transparent;
+            transition: all 1s;
+        }
+    
+        &:hover::-webkit-scrollbar-thumb {
+            background: var(--semi-color-fill-2);
+        }
+    
+        &::-webkit-scrollbar-thumb:hover {
+            background: var(--semi-color-fill-1);
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+import { BASE_CLASS_PREFIX } from './env';
+declare const VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
+export { BASE_CLASS_PREFIX, VALIDATE_STATUS };

package/lib/cjs/base/constants.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "BASE_CLASS_PREFIX", {
+  enumerable: true,
+  get: function () {
+    return _env.BASE_CLASS_PREFIX;
+  }
+});
+
+exports.VALIDATE_STATUS = void 0;
+
+var _env = require("./env");
+
+const VALIDATE_STATUS = ['default', 'error', 'warning', 'success']; // const VALIDATE_STATUS = ['default', 'error', 'warning', 'success', 'validating'] as const;
+
+exports.VALIDATE_STATUS = VALIDATE_STATUS;

package/lib/cjs/base/env.d.ts

@@ -0,0 +1 @@
+export declare const BASE_CLASS_PREFIX = "semi";

package/lib/cjs/base/env.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.BASE_CLASS_PREFIX = void 0;
+const BASE_CLASS_PREFIX = 'semi';
+exports.BASE_CLASS_PREFIX = BASE_CLASS_PREFIX;