@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/avatar/avatar.css

@@ -1,426 +0,0 @@
-/* shadow */
-/* sizing */
-/* spacing */
-.semi-avatar {
-  position: relative;
-  display: inline-flex;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  text-align: center;
-  vertical-align: middle;
-}
-.semi-avatar .semi-avatar-label {
-  display: flex;
-  align-items: center;
-  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;
-  font-weight: 600;
-}
-.semi-avatar-content {
-  position: absolute;
-  user-select: none;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  transform-origin: center;
-}
-.semi-avatar-extra-extra-small {
-  width: 20px;
-  height: 20px;
-}
-.semi-avatar-extra-extra-small .semi-avatar-content {
-  transform-origin: center;
-  transform: scale(0.8) translate(-62.5%, -62.5%);
-}
-.semi-avatar-extra-extra-small .semi-avatar-label {
-  font-size: 10px;
-  line-height: 15px;
-}
-.semi-avatar-extra-small {
-  width: 24px;
-  height: 24px;
-}
-.semi-avatar-extra-small .semi-avatar-content {
-  transform-origin: center;
-  transform: scale(0.8) translate(-62.5%, -62.5%);
-}
-.semi-avatar-extra-small .semi-avatar-label {
-  font-size: 10px;
-  line-height: 15px;
-}
-.semi-avatar-small {
-  width: 32px;
-  height: 32px;
-}
-.semi-avatar-small .semi-avatar-label {
-  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;
-}
-.semi-avatar-default {
-  width: 40px;
-  height: 40px;
-}
-.semi-avatar-default .semi-avatar-label {
-  font-size: 18px;
-  line-height: 24px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-.semi-avatar-medium {
-  width: 48px;
-  height: 48px;
-}
-.semi-avatar-medium .semi-avatar-label {
-  font-size: 20px;
-  line-height: 28px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-.semi-avatar-large {
-  width: 72px;
-  height: 72px;
-}
-.semi-avatar-large .semi-avatar-label {
-  font-size: 32px;
-  line-height: 44px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-.semi-avatar-extra-large {
-  width: 128px;
-  height: 128px;
-}
-.semi-avatar-extra-large .semi-avatar-label {
-  font-size: 64px;
-  line-height: 77px;
-}
-.semi-avatar-circle {
-  border-radius: var(--semi-border-radius-circle);
-}
-.semi-avatar-image {
-  background-color: transparent;
-}
-.semi-avatar > img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.semi-avatar-hover {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-.semi-avatar:hover {
-  cursor: pointer;
-}
-
-.semi-avatar-group {
-  display: inline-block;
-}
-.semi-avatar-group .semi-avatar {
-  box-sizing: border-box;
-}
-.semi-avatar-group .semi-avatar:first-child {
-  margin-left: 0;
-}
-.semi-avatar-group .semi-avatar-extra-large {
-  border: 3px var(--semi-color-bg-1) solid;
-  margin-left: -32px;
-}
-.semi-avatar-group .semi-avatar-large {
-  border: 3px var(--semi-color-bg-1) solid;
-  margin-left: -18px;
-}
-.semi-avatar-group .semi-avatar-medium {
-  border: 2px var(--semi-color-bg-1) solid;
-  margin-left: -12px;
-}
-.semi-avatar-group .semi-avatar-default {
-  border: 2px var(--semi-color-bg-1) solid;
-  margin-left: -12px;
-}
-.semi-avatar-group .semi-avatar-small {
-  border: 2px var(--semi-color-bg-1) solid;
-  margin-left: -12px;
-}
-.semi-avatar-group .semi-avatar-extra-small {
-  border: 1px var(--semi-color-bg-1) solid;
-  margin-left: -10px;
-}
-.semi-avatar-group .semi-avatar-extra-extra-small {
-  border: 1px var(--semi-color-bg-1) solid;
-  margin-left: -4px;
-}
-.semi-avatar-group .semi-avatar-item-start-0 {
-  z-index: 100;
-}
-.semi-avatar-group .semi-avatar-item-end-0 {
-  z-index: 80;
-}
-.semi-avatar-group .semi-avatar-item-start-1 {
-  z-index: 99;
-}
-.semi-avatar-group .semi-avatar-item-end-1 {
-  z-index: 81;
-}
-.semi-avatar-group .semi-avatar-item-start-2 {
-  z-index: 98;
-}
-.semi-avatar-group .semi-avatar-item-end-2 {
-  z-index: 82;
-}
-.semi-avatar-group .semi-avatar-item-start-3 {
-  z-index: 97;
-}
-.semi-avatar-group .semi-avatar-item-end-3 {
-  z-index: 83;
-}
-.semi-avatar-group .semi-avatar-item-start-4 {
-  z-index: 96;
-}
-.semi-avatar-group .semi-avatar-item-end-4 {
-  z-index: 84;
-}
-.semi-avatar-group .semi-avatar-item-start-5 {
-  z-index: 95;
-}
-.semi-avatar-group .semi-avatar-item-end-5 {
-  z-index: 85;
-}
-.semi-avatar-group .semi-avatar-item-start-6 {
-  z-index: 94;
-}
-.semi-avatar-group .semi-avatar-item-end-6 {
-  z-index: 86;
-}
-.semi-avatar-group .semi-avatar-item-start-7 {
-  z-index: 93;
-}
-.semi-avatar-group .semi-avatar-item-end-7 {
-  z-index: 87;
-}
-.semi-avatar-group .semi-avatar-item-start-8 {
-  z-index: 92;
-}
-.semi-avatar-group .semi-avatar-item-end-8 {
-  z-index: 88;
-}
-.semi-avatar-group .semi-avatar-item-start-9 {
-  z-index: 91;
-}
-.semi-avatar-group .semi-avatar-item-end-9 {
-  z-index: 89;
-}
-.semi-avatar-group .semi-avatar-item-start-10 {
-  z-index: 90;
-}
-.semi-avatar-group .semi-avatar-item-end-10 {
-  z-index: 90;
-}
-.semi-avatar-group .semi-avatar-item-start-11 {
-  z-index: 89;
-}
-.semi-avatar-group .semi-avatar-item-end-11 {
-  z-index: 91;
-}
-.semi-avatar-group .semi-avatar-item-start-12 {
-  z-index: 88;
-}
-.semi-avatar-group .semi-avatar-item-end-12 {
-  z-index: 92;
-}
-.semi-avatar-group .semi-avatar-item-start-13 {
-  z-index: 87;
-}
-.semi-avatar-group .semi-avatar-item-end-13 {
-  z-index: 93;
-}
-.semi-avatar-group .semi-avatar-item-start-14 {
-  z-index: 86;
-}
-.semi-avatar-group .semi-avatar-item-end-14 {
-  z-index: 94;
-}
-.semi-avatar-group .semi-avatar-item-start-15 {
-  z-index: 85;
-}
-.semi-avatar-group .semi-avatar-item-end-15 {
-  z-index: 95;
-}
-.semi-avatar-group .semi-avatar-item-start-16 {
-  z-index: 84;
-}
-.semi-avatar-group .semi-avatar-item-end-16 {
-  z-index: 96;
-}
-.semi-avatar-group .semi-avatar-item-start-17 {
-  z-index: 83;
-}
-.semi-avatar-group .semi-avatar-item-end-17 {
-  z-index: 97;
-}
-.semi-avatar-group .semi-avatar-item-start-18 {
-  z-index: 82;
-}
-.semi-avatar-group .semi-avatar-item-end-18 {
-  z-index: 98;
-}
-.semi-avatar-group .semi-avatar-item-start-19 {
-  z-index: 81;
-}
-.semi-avatar-group .semi-avatar-item-end-19 {
-  z-index: 99;
-}
-.semi-avatar-group .semi-avatar-item-start-20 {
-  z-index: 80;
-}
-.semi-avatar-group .semi-avatar-item-end-20 {
-  z-index: 100;
-}
-.semi-avatar-group .semi-avatar-item-more {
-  background-color: rgba(var(--semi-grey-5), 1);
-}
-
-.semi-avatar-amber {
-  background-color: rgba(var(--semi-amber-3), 1);
-  color: white;
-}
-
-.semi-avatar-blue {
-  background-color: rgba(var(--semi-blue-3), 1);
-  color: white;
-}
-
-.semi-avatar-cyan {
-  background-color: rgba(var(--semi-cyan-3), 1);
-  color: white;
-}
-
-.semi-avatar-green {
-  background-color: rgba(var(--semi-green-3), 1);
-  color: white;
-}
-
-.semi-avatar-grey {
-  background-color: rgba(var(--semi-grey-3), 1);
-  color: white;
-}
-
-.semi-avatar-indigo {
-  background-color: rgba(var(--semi-indigo-3), 1);
-  color: white;
-}
-
-.semi-avatar-light-blue {
-  background-color: rgba(var(--semi-light-blue-3), 1);
-  color: white;
-}
-
-.semi-avatar-light-green {
-  background-color: rgba(var(--semi-light-green-3), 1);
-  color: white;
-}
-
-.semi-avatar-lime {
-  background-color: rgba(var(--semi-lime-3), 1);
-  color: white;
-}
-
-.semi-avatar-orange {
-  background-color: rgba(var(--semi-orange-3), 1);
-  color: white;
-}
-
-.semi-avatar-pink {
-  background-color: rgba(var(--semi-pink-3), 1);
-  color: white;
-}
-
-.semi-avatar-purple {
-  background-color: rgba(var(--semi-purple-3), 1);
-  color: white;
-}
-
-.semi-avatar-red {
-  background-color: rgba(var(--semi-red-3), 1);
-  color: white;
-}
-
-.semi-avatar-teal {
-  background-color: rgba(var(--semi-teal-3), 1);
-  color: white;
-}
-
-.semi-avatar-violet {
-  background-color: rgba(var(--semi-violet-3), 1);
-  color: white;
-}
-
-.semi-avatar-yellow {
-  background-color: rgba(var(--semi-yellow-3), 1);
-  color: white;
-}
-
-.semi-rtl .semi-avatar,
-.semi-portal-rtl .semi-avatar {
-  direction: rtl;
-}
-.semi-rtl .semi-avatar-content,
-.semi-portal-rtl .semi-avatar-content {
-  left: auto;
-  right: 50%;
-  transform: translate(50%, -50%);
-}
-.semi-rtl .semi-avatar-extra-extra-small .semi-avatar-content,
-.semi-portal-rtl .semi-avatar-extra-extra-small .semi-avatar-content {
-  transform: scale(0.8) translate(62.5%, -62.5%);
-}
-.semi-rtl .semi-avatar-extra-small .semi-avatar-content,
-.semi-portal-rtl .semi-avatar-extra-small .semi-avatar-content {
-  transform: scale(0.8) translate(62.5%, -62.5%);
-}
-.semi-rtl .semi-avatar-hover,
-.semi-portal-rtl .semi-avatar-hover {
-  left: auto;
-  right: 0;
-}
-.semi-rtl .semi-avatar-group,
-.semi-portal-rtl .semi-avatar-group {
-  direction: rtl;
-}
-.semi-rtl .semi-avatar-group .semi-avatar:first-child,
-.semi-portal-rtl .semi-avatar-group .semi-avatar:first-child {
-  margin-left: auto;
-  margin-right: 0;
-}
-.semi-rtl .semi-avatar-group .semi-avatar-extra-large,
-.semi-portal-rtl .semi-avatar-group .semi-avatar-extra-large {
-  margin-left: auto;
-  margin-right: -32px;
-}
-.semi-rtl .semi-avatar-group .semi-avatar-large,
-.semi-portal-rtl .semi-avatar-group .semi-avatar-large {
-  margin-left: auto;
-  margin-right: -18px;
-}
-.semi-rtl .semi-avatar-group .semi-avatar-medium,
-.semi-rtl .semi-avatar-group .semi-avatar-small,
-.semi-portal-rtl .semi-avatar-group .semi-avatar-medium,
-.semi-portal-rtl .semi-avatar-group .semi-avatar-small {
-  margin-left: auto;
-  margin-right: -12px;
-}
-.semi-rtl .semi-avatar-group .semi-avatar-extra-small,
-.semi-portal-rtl .semi-avatar-group .semi-avatar-extra-small {
-  margin-left: auto;
-  margin-right: -10px;
-}
-.semi-rtl .semi-avatar-group .semi-avatar-extra-extra-small,
-.semi-portal-rtl .semi-avatar-group .semi-avatar-extra-extra-small {
-  margin-left: auto;
-  margin-right: -4px;
-}

package/lib/cjs/avatar/avatar.scss

@@ -1,205 +0,0 @@
-@import "./variables.scss";
-@import "./mixin.scss";
-
-$module: #{$prefix}-avatar;
-$colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "light-green", "lime", "orange", "pink",
-    "purple", "red", "teal", "violet", "yellow";
-
-
-.#{$module} {
-    position: relative;
-    display: inline-flex;
-    overflow: hidden;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    text-align: center;
-    vertical-align: middle;
-
-    .#{$module}-label {
-        display: flex;
-        align-items: center;
-        @include font-size-regular;
-        font-weight: 600;
-    }
-
-    &-content {
-        position: absolute;
-        user-select: none;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        transform-origin: center;
-    }
-
-    &-extra-extra-small {
-        width: $width-avatar_extra_extra_small;
-        height: $width-avatar_extra_extra_small;
-
-        .#{$module}-content {
-            transform-origin: center;
-            transform: scale(.8) translate(-62.5%, -62.5%);
-        }
-
-        .#{$module}-label {
-            font-size: $font-avatar_extra_extra_small-size;
-            line-height: $font-avatar_extra_extra_small-lineHeight;
-        }
-    }
-
-    &-extra-small {
-        width: $width-avatar_extra_small;
-        height: $width-avatar_extra_small;
-
-        .#{$module}-content {
-            transform-origin: center;
-            transform: scale(.8) translate(-62.5%, -62.5%);
-        }
-
-        .#{$module}-label {
-            font-size: $font-avatar_extra_small-size;
-            line-height: $font-avatar_extra_small-lineHeight;
-        }
-    }
-
-    &-small {
-        width: $width-avatar_small;
-        height: $width-avatar_small;
-
-        .#{$module}-label {
-            @include font-size-small;
-        }
-    }
-
-    &-default {
-        width: $width-avatar_default;
-        height: $width-avatar_default;
-
-        .#{$module}-label {
-            @include font-size-header-5;
-        }
-    }
-
-    &-medium {
-        width: $width-avatar_medium;
-        height: $width-avatar_medium;
-
-        .#{$module}-label {
-            @include font-size-header-4;
-        }
-    }
-
-    &-large {
-        width: $width-avatar_large;
-        height: $width-avatar_large;
-
-        .#{$module}-label {
-            @include font-size-header-1;
-        }
-    }
-
-    &-extra-large {
-        width: $width-avatar_extra_large;
-        height: $width-avatar_extra_large;
-
-        .#{$module}-label {
-            font-size: $font-avatar_extra_large-size;
-            line-height: $font-avatar_extra_large-lineHeight;
-        }
-    }
-
-    &-circle {
-        border-radius: $radius-avatar;
-    }
-
-    &-image {
-        background-color: transparent;
-    }
-
-    & > img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
-
-    &-hover {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-    }
-
-    &:hover {
-        cursor: pointer;
-    }
-}
-
-.#{$module}-group {
-    display: inline-block;
-
-    .#{$module} {
-        box-sizing: border-box;
-
-        &:first-child {
-            margin-left: 0;
-        }
-    }
-
-    .#{$module}-extra-large {
-        border: $width-avatar_extra_large-border $color-avatar_default-border-default solid;
-        margin-left: $spacing-avatar_extra_large-marginLeft;
-    }
-
-    .#{$module}-large {
-        border: $width-avatar_large-border $color-avatar_default-border-default solid;
-        margin-left: $spacing-avatar_large-marginLeft;
-    }
-
-    .#{$module}-medium {
-        border: $width-avatar_medium-border $color-avatar_default-border-default solid;
-        margin-left: $spacing-avatar_medium-marginLeft;
-    }
-
-    .#{$module}-default {
-        border: $width-avatar_default-border $color-avatar_default-border-default solid;
-        margin-left: $spacing-avatar_default-marginLeft;
-    }
-
-    .#{$module}-small {
-        border: $width-avatar_small-border $color-avatar_default-border-default solid;
-        margin-left: $spacing-avatar_small-marginLeft;
-    }
-
-    .#{$module}-extra-small {
-        border: $width-avatar_extra_small-border $color-avatar_default-border-default solid;
-        margin-left: $spacing-avatar_extra_small-marginLeft;
-    }
-
-    .#{$module}-extra-extra-small {
-        border: $width-avatar_extra_extra_small-border $color-avatar_default-border-default solid;
-        margin-left: $spacing-avatar_extra_extra_small-marginLeft;
-    }
-
-    @for $i from 0 through 20 {
-        .#{$module}-item-start-#{$i} {
-            z-index: $z-avatar-default - $i;
-        }
-        .#{$module}-item-end-#{$i} {
-            z-index: $z-avatar-default - 20 + $i;
-        }
-    }
-
-    .#{$module}-item-more {
-        background-color: $color-avatar_more_default-bg-default;
-    }
-}
-
-@each $c in $colors {
-    .#{$module}-#{$c} {
-        @include avatar-style($c);
-    }
-}
-
-@import "./rtl.scss";

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

@@ -1,10 +0,0 @@
-declare const cssClasses: {
-    PREFIX: string;
-};
-declare const strings: {
-    SHAPE: string[];
-    SIZE: string[];
-    COLOR: string[];
-    OVERLAP_FROM: string[];
-};
-export { cssClasses, strings };

package/lib/cjs/avatar/constants.js

@@ -1,24 +0,0 @@
-"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, "-avatar")
-};
-exports.cssClasses = cssClasses;
-const strings = {
-  SHAPE: ['circle', 'square'],
-  SIZE: ['extra-extra-small', 'extra-small', 'small', 'default', 'medium', 'large', 'extra-large'],
-  // eslint-disable-next-line max-len
-  COLOR: ['grey', 'red', 'pink', 'purple', 'violet', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'white'],
-  OVERLAP_FROM: ['start', 'end']
-};
-exports.strings = strings;

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

@@ -1,14 +0,0 @@
-import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export interface AvatarAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    notifyImgState(isImgExist: boolean): void;
-    notifyLeave(event: any): void;
-    notifyEnter(event: any): void;
-}
-export default class AvatarFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AvatarAdapter<P, S>, P, S> {
-    constructor(adapter: AvatarAdapter<P, S>);
-    init(): void;
-    destroy(): void;
-    handleImgLoadError(): void;
-    handleEnter(e: any): void;
-    handleLeave(e: any): void;
-}