@douyinfe/semi-foundation 2.1.1 → 2.1.2

package/lib/cjs/avatar/foundation.js

@@ -0,0 +1,49 @@
+"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 AvatarFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+  }
+
+  init() {} // eslint-disable-line
+
+
+  destroy() {} // eslint-disable-line
+
+
+  handleImgLoadError() {
+    const {
+      onError
+    } = this.getProps();
+    const errorFlag = onError ? onError() : undefined;
+
+    if (errorFlag !== false) {
+      this._adapter.notifyImgState(false);
+    }
+  }
+
+  handleEnter(e) {
+    this._adapter.notifyEnter(e);
+  }
+
+  handleLeave(e) {
+    this._adapter.notifyLeave(e);
+  }
+
+}
+
+exports.default = AvatarFoundation;

package/lib/cjs/avatar/mixin.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/avatar/mixin.scss

@@ -0,0 +1,4 @@
+@mixin avatar-style($color) {
+    background-color: rgba(var(--semi-#{$color}-3), 1);
+    color: white;
+}

package/lib/cjs/avatar/rtl.scss

@@ -0,0 +1,69 @@
+$module: #{$prefix}-avatar;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+        
+        &-content {
+            left: auto;
+            right: 50%;
+            transform: translate(50%, -50%);
+        }
+
+        &-extra-extra-small {
+            .#{$module}-content {
+                transform: scale(.8) translate(62.5%, -62.5%);
+            }
+        }
+
+        &-extra-small {
+            .#{$module}-content {
+                transform: scale(.8) translate(62.5%, -62.5%);
+            }
+        }
+
+        &-hover {
+            left: auto;
+            right: 0;
+        }
+    }
+
+    .#{$module}-group {
+        direction: rtl;
+
+        .#{$module} {
+
+            &:first-child {
+                margin-left: auto;
+                margin-right: 0;
+            }
+        }
+
+        .#{$module}-extra-large {
+            margin-left: auto;
+            margin-right: $spacing-avatar_extra_large-marginLeft;
+        }
+
+        .#{$module}-large {
+            margin-left: auto;
+            margin-right: $spacing-avatar_large-marginLeft;
+        }
+
+        .#{$module}-medium,
+        .#{$module}-small {
+            margin-left: auto;
+            margin-right: $spacing-avatar_small-marginLeft;
+        }
+
+        .#{$module}-extra-small {
+            margin-left: auto;
+            margin-right: $spacing-avatar_extra_small-marginLeft;
+        }
+
+        .#{$module}-extra-extra-small {
+            margin-left: auto;
+            margin-right: $spacing-avatar_extra_extra_small-marginLeft;
+        }
+    }
+}

package/lib/cjs/avatar/variables.scss

@@ -0,0 +1,45 @@
+$z-avatar-default: 100; // 头像 z-index
+// color
+$color-avatar_default-border-default: var(--semi-color-bg-1); // 头像描边颜色
+$color-avatar_more_default-bg-default: rgba(var(--semi-grey-5), 1); // 「更多」描边颜色
+
+
+$width-avatar_extra_extra_small: 20px; // 头像尺寸 - 极小
+$font-avatar_extra_extra_small-size: 10px; // 文本字号 - 极小
+$font-avatar_extra_extra_small-lineHeight: 15px; // 文本行高 - 极小
+
+$width-avatar_extra_small: 24px; // 头像尺寸 - 超小
+$font-avatar_extra_small-size: 10px; // 文本字号 - 超小
+$font-avatar_extra_small-lineHeight: 15px; // 文本行高 - 超小
+
+$width-avatar_small: 32px; // 头像尺寸 - 小
+$width-avatar_default: 40px; // 头像尺寸 - 默认
+$width-avatar_medium: 48px; // 头像尺寸 - 中
+$width-avatar_large: 72px; // 头像尺寸 - 大
+
+$width-avatar_extra_large: 128px; // 头像尺寸 - 超大
+$font-avatar_extra_large-size: 64px; // 文本字号 - 超大
+$font-avatar_extra_large-lineHeight: 77px; // 文本行高 - 超大
+
+$radius-avatar: var(--semi-border-radius-circle); // 头像圆角
+
+$width-avatar_extra_large-border: 3px; // 头像描边尺寸 - 超大
+$spacing-avatar_extra_large-marginLeft: -32px; // 头像左侧外边距 - 超大
+
+$width-avatar_large-border: 3px; // 头像描边尺寸 - 大
+$spacing-avatar_large-marginLeft: -18px; // 头像左侧外边距 - 大
+
+$width-avatar_medium-border: 2px; // 头像描边尺寸 - 中
+$spacing-avatar_medium-marginLeft: -12px; // 头像左侧外边距 - 中
+
+$width-avatar_default-border: 2px; // 头像描边尺寸 - 默认
+$spacing-avatar_default-marginLeft: -12px; // 头像左侧外边距 - 默认
+
+$width-avatar_small-border: 2px; // 头像描边尺寸 - 小
+$spacing-avatar_small-marginLeft: -12px; // 头像左侧外边距 - 小
+
+$width-avatar_extra_small-border: 1px; // 头像描边尺寸 - 超小
+$spacing-avatar_extra_small-marginLeft: -10px; // 头像左侧外边距 - 超小
+
+$width-avatar_extra_extra_small-border: 1px; // 头像描边尺寸 - 极小
+$spacing-avatar_extra_extra_small-marginLeft: -4px; // 头像左侧外边距 - 极小

package/lib/cjs/backtop/backtop.css

@@ -0,0 +1,20 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-backtop {
+  position: fixed;
+  box-sizing: border-box;
+  right: 100px;
+  bottom: 50px;
+  z-index: 10;
+  cursor: pointer;
+  text-align: center;
+  overflow: hidden;
+}
+
+.semi-rtl .semi-backtop,
+.semi-portal-rtl .semi-backtop {
+  direction: rtl;
+  right: auto;
+  left: 100px;
+}

package/lib/cjs/backtop/backtop.scss

@@ -0,0 +1,17 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-backtop;
+
+.#{$module} {
+    position: fixed;
+    box-sizing: border-box;
+    right: $spacing-backtop-right;
+    bottom: $spacing-backtop-bottom;
+    z-index: $z-backtop;
+    cursor: pointer;
+
+    text-align: center;
+    overflow: hidden;
+}
+
+@import "./rtl.scss";

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

@@ -0,0 +1,5 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {};
+export { cssClasses, strings };

package/lib/cjs/backtop/constants.js

@@ -0,0 +1,18 @@
+"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, "-backtop")
+};
+exports.cssClasses = cssClasses;
+const strings = {};
+exports.strings = strings;

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

@@ -0,0 +1,21 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export declare type BackTopClickEvent = any;
+export declare type Target = any;
+export interface BackTopAdapter extends DefaultAdapter {
+    updateVisible: (visible: boolean) => void;
+    notifyClick: (e: BackTopClickEvent) => void;
+    targetIsWindow: (target: any) => boolean;
+    isWindowUndefined: () => boolean;
+    targetScrollToTop: (targetNode: any, scrollTop: number) => void;
+}
+export default class BackTopFoundation extends BaseFoundation<BackTopAdapter> {
+    animation: any;
+    constructor(adapter: BackTopAdapter);
+    init(): void;
+    destroy(): void;
+    getScroll(target: Target): any;
+    scrollTo: (targetNode: Target, from: number, to: number) => void;
+    setScrollTop(to: number): void;
+    handleScroll: () => void;
+    onClick(e: BackTopClickEvent): void;
+}

package/lib/cjs/backtop/foundation.js

@@ -0,0 +1,114 @@
+"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"));
+
+var _semiAnimation = require("@douyinfe/semi-animation");
+
+class BackTopFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+
+    this.scrollTo = (targetNode, from, to) => {
+      const {
+        duration
+      } = this.getProps();
+      this.animation = new _semiAnimation.Animation({
+        from: {
+          scrollTop: from
+        },
+        to: {
+          scrollTop: to
+        }
+      }, {
+        duration,
+        easing: 'easeInOutCubic'
+      });
+      this.animation.on('frame', _ref => {
+        let {
+          scrollTop
+        } = _ref;
+
+        this._adapter.targetScrollToTop(targetNode, scrollTop);
+      });
+      this.animation.start();
+    };
+
+    this.handleScroll = () => {
+      const {
+        target,
+        visibilityHeight
+      } = this.getProps();
+      const targetNode = target();
+
+      const update = () => {
+        const scrollTop = this.getScroll(targetNode);
+
+        this._adapter.updateVisible(scrollTop > visibilityHeight);
+      };
+
+      requestAnimationFrame(update);
+    };
+  }
+
+  init() {
+    const {
+      target
+    } = this.getProps();
+    const targetNode = target();
+    targetNode.addEventListener('scroll', this.handleScroll);
+    this.handleScroll();
+  }
+
+  destroy() {
+    const {
+      target
+    } = this.getProps();
+    const targetNode = target();
+    targetNode && targetNode.removeEventListener('scroll', this.handleScroll);
+    this.animation && this.animation.destroy();
+  }
+
+  getScroll(target) {
+    if (this._adapter.isWindowUndefined()) {
+      return 0;
+    }
+
+    const prop = 'pageYOffset';
+    const method = 'scrollTop';
+
+    const isWindow = this._adapter.targetIsWindow(target);
+
+    const scroll = isWindow ? target[prop] : target[method];
+    return scroll;
+  }
+
+  setScrollTop(to) {
+    const {
+      target
+    } = this.getProps();
+    const targetNode = target();
+    const from = this.getScroll(targetNode);
+    this.scrollTo(targetNode, from, to);
+  }
+
+  onClick(e) {
+    this.setScrollTop(0);
+
+    this._adapter.notifyClick(e);
+  }
+
+}
+
+exports.default = BackTopFoundation;

package/lib/cjs/backtop/rtl.scss

@@ -0,0 +1,10 @@
+$module: #{$prefix}-backtop;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+        right: auto;
+        left: $spacing-backtop-right;
+    }
+}

package/lib/cjs/backtop/variables.scss

@@ -0,0 +1,3 @@
+$z-backtop: 10; // 返回顶部 z-index
+$spacing-backtop-right: 100px; // 返回顶部距离右侧距离
+$spacing-backtop-bottom: 50px; // 返回顶部距离底侧距离

package/lib/cjs/badge/badge.css

@@ -0,0 +1,146 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-badge {
+  position: relative;
+  display: inline-block;
+}
+.semi-badge-dot {
+  box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--semi-border-radius-circle);
+  background-color: var(--semi-color-bg-1);
+  border: 1px var(--semi-color-bg-1) solid;
+  z-index: 1;
+}
+.semi-badge-count {
+  box-sizing: border-box;
+  height: 18px;
+  min-width: 18px;
+  border-radius: 9px;
+  padding: 0px 4px;
+  background-color: var(--semi-color-bg-1);
+  border: 1px var(--semi-color-bg-1) solid;
+  z-index: 1;
+  text-align: center;
+  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;
+  font-weight: 14px;
+  color: var(--semi-color-bg-2);
+}
+.semi-badge-rightTop {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  transform-origin: 100% 0%;
+}
+.semi-badge-rightBottom {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  transform: translate(50%, 50%);
+  transform-origin: 100% 0%;
+}
+.semi-badge-leftTop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+  transform-origin: 100% 0%;
+}
+.semi-badge-leftBottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transform: translate(-50%, 50%);
+  transform-origin: 100% 0%;
+}
+.semi-badge-custom {
+  display: flex;
+}
+.semi-badge-block {
+  position: static;
+  display: inline-block;
+}
+.semi-badge-light::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--semi-color-bg-2);
+  z-index: -1;
+}
+.semi-badge-light::after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: inherit;
+  z-index: -1;
+}
+.semi-badge-primary.semi-badge-solid {
+  background-color: var(--semi-color-primary);
+}
+.semi-badge-primary.semi-badge-light {
+  background-color: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+}
+.semi-badge-primary.semi-badge-inverted {
+  color: var(--semi-color-primary);
+}
+.semi-badge-secondary.semi-badge-solid {
+  background-color: var(--semi-color-secondary);
+}
+.semi-badge-secondary.semi-badge-light {
+  background-color: var(--semi-color-secondary-light-default);
+  color: var(--semi-color-secondary);
+}
+.semi-badge-secondary.semi-badge-inverted {
+  color: var(--semi-color-secondary);
+}
+.semi-badge-tertiary.semi-badge-solid {
+  background-color: var(--semi-color-tertiary);
+}
+.semi-badge-tertiary.semi-badge-light {
+  background-color: var(--semi-color-tertiary-light-default);
+  color: var(--semi-color-tertiary);
+}
+.semi-badge-tertiary.semi-badge-inverted {
+  color: var(--semi-color-tertiary);
+}
+.semi-badge-danger.semi-badge-solid {
+  background-color: var(--semi-color-danger);
+}
+.semi-badge-danger.semi-badge-light {
+  background-color: var(--semi-color-danger-light-default);
+  color: var(--semi-color-danger);
+}
+.semi-badge-danger.semi-badge-inverted {
+  color: var(--semi-color-danger);
+}
+.semi-badge-warning.semi-badge-solid {
+  background-color: var(--semi-color-warning);
+}
+.semi-badge-warning.semi-badge-light {
+  background-color: var(--semi-color-warning-light-default);
+  color: var(--semi-color-warning);
+}
+.semi-badge-warning.semi-badge-inverted {
+  color: var(--semi-color-warning);
+}
+
+.semi-rtl .semi-badge,
+.semi-portal-rtl .semi-badge {
+  direction: rtl;
+}