@douyinfe/semi-foundation 2.17.1 → 2.18.1-alpha.0

package/.idea/markdown.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MarkdownSettings">
+    <enabledExtensions>
+      <entry key="MermaidLanguageExtension" value="false" />
+      <entry key="PlantUMLLanguageExtension" value="false" />
+    </enabledExtensions>
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/semi-foundation.iml" filepath="$PROJECT_DIR$/.idea/semi-foundation.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/semi-foundation.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
+  </component>
+</project>

package/.idea/workspace.xml

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="8c997fef-d518-46e4-8f6a-6935e6c9f072" name="变更" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/../.." />
+  </component>
+  <component name="MarkdownSettingsMigration">
+    <option name="stateVersion" value="1" />
+  </component>
+  <component name="ProjectId" id="27BzWH653rMIIPvhUzc3ALwSVfS" />
+  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="nodejs_package_manager_path" value="npm" />
+    <property name="ts.external.directory.path" value="$APPLICATION_HOME_DIR$/plugins/JavaScriptLanguage/jsLanguageServicesImpl/external" />
+    <property name="vue.rearranger.settings.migration" value="true" />
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="应用程序级" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="默认任务">
+      <changelist id="8c997fef-d518-46e4-8f6a-6935e6c9f072" name="变更" comment="" />
+      <created>1648808296966</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1648808296966</updated>
+      <workItem from="1648808299184" duration="169000" />
+      <workItem from="1648809475632" duration="92000" />
+      <workItem from="1649316048169" duration="271000" />
+      <workItem from="1649316634321" duration="5726000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+</project>

package/anchor/anchor.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-anchor;
 
@@ -17,6 +18,8 @@ $module: #{$prefix}-anchor;
         left: $spacing-anchor_slide-left;
         top: $spacing-anchor_slide-top;
         height: 100%;
+        box-sizing: border-box;
+        padding: $width-anchor-outline 0;
 
         &-muted {
             display: none;
@@ -64,6 +67,11 @@ $module: #{$prefix}-anchor;
     &-link {
         padding-left: $spacing-anchor_link-paddingLeft;
 
+        &-wrapper {
+            padding-right: $width-anchor-outline;
+            margin: $width-anchor-outline 0;
+        }
+
         &-title {
             cursor: pointer;
             color: $color-anchor_title-text-default;
@@ -72,7 +80,9 @@ $module: #{$prefix}-anchor;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-
+            border-radius: $width-anchor-outline_border_radius;
+            transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
+            transform: scale($transform_scale-anchor_title-text);
             &:hover {
                 color: $color-anchor_title-text-hover;
             }
@@ -81,6 +91,10 @@ $module: #{$prefix}-anchor;
                 color: $color-anchor_title-text-active;
             }
 
+            &:focus-visible {
+                outline: $width-anchor-outline solid $color-anchor_title-outline-focus;
+            }
+
             &-disabled {
                 color: $color-anchor_title-text-disabled;
                 cursor: not-allowed;

package/anchor/animation.scss

@@ -0,0 +1,6 @@
+$transition_duration-anchor_title-text: var(--semi-transition_duration-faster);//锚点标题文字-文字-动画持续时间
+$transition_function-anchor_title-text: var(--semi-transition_function-easeIn);//锚点标题文字-文字-过渡曲线
+$transition_delay-anchor_title-text: var(--semi-transition_delay-fastest);//锚点标题文字-文字-延迟时间
+
+//transform token
+$transform_scale-anchor_title-text: var(--semi-transform_scale-none);//锚点-放大

package/anchor/variables.scss

@@ -9,6 +9,8 @@ $color-anchor_title-text-hover: var(--semi-color-tertiary-hover); // 文字颜
 $color-anchor_title-text-active: var(--semi-color-text-0); // 文字颜色 - 选中
 $color-anchor_title-text-disabled: var(--semi-color-disabled-text); // 文字颜色 - 禁用
 
+$color-anchor_title-outline-focus: var(--semi-color-primary-light-active); // 轮廓 - 聚焦
+
 // Spacing
 $spacing-anchor_slide-left: $spacing-none; // 滑轨左侧位置
 $spacing-anchor_slide-top: $spacing-none; // 滑轨顶部位置
@@ -24,4 +26,8 @@ $height-anchor_slide_default: 20px; // 选项高度 - 默认
 $height-anchor_slide_small: 16px; // 选项高度 - 小尺寸
 
 // Radius
-$radius-anchor_slide: 1px; // 滑轨圆角
+$radius-anchor_slide: 1px; // 滑轨圆角
+
+// Witdh
+$width-anchor-outline: 2px; // anchor轮廓宽度
+$width-anchor-outline_border_radius: 3px; // anchor轮廓圆角

package/autoComplete/animation.scss

@@ -0,0 +1,3 @@
+$transition_duration-autoComplete_option-bg: var(--semi-transition_duration-faster);//选择器-选项-动画持续时间
+$transition_function-autoComplete_option-bg: var(--semi-transition_function-easeIn);//选择器-选项-过渡曲线
+$transition_delay-autoComplete_option-bg: var(--semi-transition_delay-fastest);//选择器-选项-延迟时间

package/autoComplete/autoComplete.scss

@@ -1,5 +1,6 @@
 @import "./variables.scss";
-@import "../select/option.scss";
+@import "./animation.scss";
+@import "./option.scss";
 
 $module: #{$prefix}-autocomplete;
 

package/autoComplete/constants.ts

@@ -3,6 +3,9 @@ import { BASE_CLASS_PREFIX, VALIDATE_STATUS } from '../base/constants';
 
 const cssClasses = {
     PREFIX: `${BASE_CLASS_PREFIX}-autocomplete`,
+    PREFIX_OPTION: `${BASE_CLASS_PREFIX}-autoComplete-option`,
+    PREFIX_GROUP: `${BASE_CLASS_PREFIX}-autoComplete-group`,
+    
 };
 
 const strings = {

package/autoComplete/option.scss

@@ -0,0 +1,93 @@
+$module: #{$prefix}-autoComplete;
+$filterable: #{$module}-filterable;
+
+.#{$module}-option {
+    @include font-size-regular;
+    word-break: break-all;
+    padding-left: $spacing-autoComplete_option-paddingLeft;
+    padding-right: $spacing-autoComplete_option-paddingRight;
+    padding-top: $spacing-autoComplete_option-paddingTop;
+    padding-bottom: $spacing-autoComplete_option-paddingBottom;
+    color: $color-autoComplete_option_main-text;
+    border-radius: $radius-autoComplete_option;
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: background-color $transition_duration-autoComplete_option-bg $transition_function-autoComplete_option-bg $transition_delay-autoComplete_option-bg;
+
+    &-icon {
+        width: $width-autoComplete_option_tick;
+        color: $color-autoComplete_option-icon-default;
+        visibility: hidden;
+        margin-right: $spacing-autoComplete_option_tick-marginRight;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+    }
+
+    &-text {
+        display: flex;
+        flex-wrap: wrap;
+        white-space: pre;
+    }
+
+    &-keyword {
+        color: $color-autoComplete_option_keyword-text;
+        background-color: inherit;
+        font-weight: $font-autoComplete_keyword-fontWeight;
+    }
+    // &:hover {
+    //     background-color: $color-autoComplete_option-bg-hover;
+    // }
+
+    &:active {
+        background-color: $color-autoComplete_option-bg-active;
+    }
+
+    &-empty {
+        cursor: not-allowed;
+        color: $color-autoComplete_option_disabled-text;
+        justify-content: center;
+
+        &:hover {
+            background-color: inherit;
+        }
+
+        &:active {
+            background-color: inherit;
+        }
+    }
+
+    &-disabled {
+        color: $color-autoComplete_option_disabled-text;
+        cursor: not-allowed;
+
+        &:hover {
+            background-color: $color-autoComplete_option-bg-hover;
+        }
+    }
+
+    &-selected {
+        font-weight: $font-weight-bold;
+
+        .#{$module}-option-icon {
+            visibility: visible;
+            color: $color-autoComplete_option-icon-active;
+        }
+    }
+
+    &-focused {
+        background-color: $color-autoComplete_option-bg-hover;
+    }
+
+    &:first-of-type {
+        margin-top: $spacing-autoComplete_option_first-marginTop;
+    }
+
+    &:last-of-type {
+        margin-bottom: $spacing-autoComplete_option_last-marginBottom;
+    }
+}

package/autoComplete/optionFoundation.ts

@@ -0,0 +1,41 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+
+
+export interface BasicOptionProps {
+    [x: string]: any;
+    value?: string | number;
+    label?: string | number | unknown;
+    children?: unknown;
+    disabled?: boolean;
+    showTick?: boolean;
+    className?: string;
+    style?: Record<string, any>;
+}
+export interface OptionDefaultAdapter extends Partial<DefaultAdapter> {
+    notifyClick(option: BasicOptionProps): void;
+}
+
+
+export default class OptionFoundation extends BaseFoundation<OptionDefaultAdapter> {
+
+    constructor(adapter: OptionDefaultAdapter) {
+        super({ ...adapter });
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    init() {}
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    destroy() {}
+
+    onOptionClick(option: BasicOptionProps) {
+        const isDisabled = this._isDisabled();
+        if (!isDisabled) {
+            this._adapter.notifyClick(option);
+        }
+    }
+
+    _isDisabled() {
+        return this.getProp('disabled');
+    }
+}

package/autoComplete/variables.scss

@@ -1,3 +1,50 @@
 // Spacing
 $spacing-autoComplete_loading_wrapper-paddingTop: $spacing-tight; //加载搜索结果时的顶部内边距
 $spacing-autoComplete_loading_wrapper-paddingBottom: $spacing-tight; //加载搜索结果时的底部内边距
+
+
+
+
+
+$color-autoComplete_option_keyword-text: var(--semi-color-primary); // 自动完成菜单选项匹配搜索结果文本颜色
+$color-autoComplete_option-bg-default: transparent; // 自动完成菜单选项背景颜色 - 默认态
+$color-autoComplete_option-icon-default: transparent; // 自动完成菜单选项图标颜色 - 默认态
+$color-autoComplete_option-bg-hover: var(--semi-color-fill-0); // 自动完成菜单选项背景颜色 - 悬停态
+$color-autoComplete_option-bg-active: var(--semi-color-fill-1); // 自动完成菜单选项背景颜色 - 按下态
+$color-autoComplete_option_disabled-text: var(--semi-color-disabled-text); // 禁用自动完成菜单选项文字颜色
+$color-autoComplete_option_disabled-bg: transparent; // 禁用自动完成菜单选项背景颜色
+$color-autoComplete_option-icon-active: var(--semi-color-text-2); // 禁用自动完成菜单选项图标颜色 - 选中态
+$color-autoComplete_option-border-default: var(--semi-color-border); // 分组自动完成菜单项描边颜色
+
+$width-autoComplete_option_tick: $width-icon-small; // 自动完成菜单项选中对勾图标大小
+$spacing-autoComplete_option_tick-marginRight: $spacing-tight; // 自动完成菜单选中对勾右侧外边距
+
+$spacing-autoComplete_option-paddingLeft: $spacing-base-tight; // 自动完成菜单项左侧内边距
+$spacing-autoComplete_option-paddingRight: $spacing-base-tight; // 自动完成菜单项右侧内边距
+$spacing-autoComplete_option-paddingTop: $spacing-tight; // 自动完成菜单项顶部内边距
+$spacing-autoComplete_option-paddingBottom: $spacing-tight; // 自动完成菜单项底部内边距
+$spacing-autoComplete_option_first-marginTop: $spacing-extra-tight; // 自动完成第一个菜单项顶部外边距
+$spacing-autoComplete_option_last-marginBottom: $spacing-extra-tight; // 自动完成最后一个菜单项顶部外边距
+
+$spacing-autoComplete_option_list-paddingTop: 0px; // 自动完成内容区顶部内边距
+$spacing-autoComplete_option_list-paddingRight: 0px; // 自动完成内容区右侧内边距
+$spacing-autoComplete_option_list-paddingBottom: 0px; // 自动完成内容区底部内边距
+$spacing-autoComplete_option_list-paddingLeft: 0px; // 自动完成内容区左侧内边距
+
+$radius-autoComplete_option: 0px; // 自动完成待选项圆角
+
+$color-autoComplete_option_main-text: var(--semi-color-text-0); // 自动完成菜单选项文本颜色
+
+$color-autoComplete_option-bg-default: transparent; // 自动完成菜单选项背景颜色 - 默认态
+$color-autoComplete_option-icon-default: transparent; // 自动完成菜单选项图标颜色 - 默认态
+$color-autoComplete_option-bg-hover: var(--semi-color-fill-0); // 自动完成菜单选项背景颜色 - 悬停态
+$color-autoComplete_option-bg-active: var(--semi-color-fill-1); // 自动完成菜单选项背景颜色 - 按下态
+$color-autoComplete_option_disabled-text: var(--semi-color-disabled-text); // 禁用自动完成菜单选项文字颜色
+$color-autoComplete_option_disabled-bg: transparent; // 禁用自动完成菜单选项背景颜色
+$color-autoComplete_option-icon-active: var(--semi-color-text-2); // 禁用自动完成菜单选项图标颜色 - 选中态
+$color-autoComplete_option-border-default: var(--semi-color-border); // 分组自动完成菜单项描边颜色
+
+
+$font-autoComplete-fontWeight: $font-weight-regular; // 自动完成文本字重
+$font-autoComplete_inset_label-fontWeight: 600; // 自动完成内嵌标签文本字重
+$font-autoComplete_keyword-fontWeight: 600; // 自动完成搜索结果命关键词中文本字重

package/avatar/avatar.scss

@@ -1,10 +1,9 @@
-@import "./variables.scss";
-@import "./mixin.scss";
+@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";
-
+$colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'light-green', 'lime', 'orange', 'pink',
+    'purple', 'red', 'teal', 'violet', 'yellow';
 
 .#{$module} {
     position: relative;
@@ -211,4 +210,4 @@ $colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "ligh
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/breadcrumb/animation.scss

@@ -0,0 +1,6 @@
+$transition_duration-breadcrumb_link-text: var(--semi-transition_duration-faster);//面包屑文字-文字-动画持续时间
+$transition_function-breadcrumb_link-text: var(--semi-transition_function-easeIn);//面包屑文字-文字-过渡曲线
+$transition_delay-breadcrumb_link-text: var(--semi-transition_delay-fastest);//面包屑文字-文字-延迟时间
+
+//transform token
+$transform_scale-breadcrumb_link-text: var(--semi-transform_scale-none);//面包屑文字-放大

package/breadcrumb/breadcrumb.scss

@@ -2,6 +2,7 @@
 // @import '../theme/mixin.scss';
 // @import '../theme/_font.scss';
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-breadcrumb;
 
@@ -24,7 +25,7 @@ $module: #{$prefix}-breadcrumb;
     &-item-wrap {
         display: inline-flex;
         align-items: center;
-        margin: $spacing-breadcrumb_item_wrap-marginY 0;
+        margin: $spacing-breadcrumb_item_wrap-marginY 0px;
         margin-right: $spacing-breadcrumb_item_wrap-marginRight;
     }
 
@@ -88,6 +89,8 @@ $module: #{$prefix}-breadcrumb;
         align-items: center;
         column-gap: 4px;
         text-decoration: inherit;
+        transition: color $transition_duration-breadcrumb_link-text $transition-function_breadcrumb_link-text $transition_delay-breadcrumb_link-text;
+        transform: scale($transform_scale-breadcrumb_link-text);
 
         &:hover {
             color: $color-breadcrumb_default-text-hover;

package/button/animation.scss

@@ -0,0 +1,67 @@
+$transition_duration-button_primary-bg: var(--semi-transition_duration-faster);//主要按钮-背景色-动画持续时间
+$transition_function-button_primary-bg: var(--semi-transition_function-easeIn);//主要按钮-背景色-过渡曲线
+$transition_delay-button_primary-bg: var(--semi-transition_delay-fastest);//主要按钮-背景色-延迟时间
+
+
+$transition_duration-button_secondary-bg: var(--semi-transition_duration-faster);//次要按钮-背景色-动画持续时间
+$transition_function-button_secondary-bg: var(--semi-transition_function-easeIn);//次要按钮-背景色-过渡曲线
+$transition_delay-button_secondary-bg: var(--semi-transition_delay-fastest);//次要按钮-背景色-延迟时间
+
+
+$transition_duration-button_tertiary-bg: var(--semi-transition_duration-faster);//三级按钮-背景色-动画持续时间
+$transition_function-button_tertiary-bg: var(--semi-transition_function-easeIn);//三级按钮-背景色-过渡曲线
+$transition_delay-button_tertiary-bg: var(--semi-transition_delay-fastest);//三级按钮-背景色-延迟时间
+
+
+$transition_duration-button_light-bg: var(--semi-transition_duration-faster);//浅色按钮-背景色-动画持续时间
+$transition_function-button_light-bg: var(--semi-transition_function-easeIn);//浅色按钮-背景色-过渡曲线
+$transition_delay-button_light-bg: var(--semi-transition_delay-fastest);//浅色按钮-背景色-延迟时间
+
+
+$transition_duration-button_warning-bg: var(--semi-transition_duration-faster);//警告按钮-背景色-动画持续时间
+$transition_function-button_warning-bg: var(--semi-transition_function-easeIn);//警告按钮-背景色-过渡曲线
+$transition_delay-button_warning-bg: var(--semi-transition_delay-fastest);//警告按钮-背景色-延迟时间
+
+
+$transition_duration-button_danger-bg: var(--semi-transition_duration-faster);//危险按钮-背景色-动画持续时间
+$transition_function-button_danger-bg: var(--semi-transition_function-easeIn);//危险按钮-背景色-过渡曲线
+$transition_delay-button_danger-bg: var(--semi-transition_delay-fastest);//危险按钮-背景色-延迟时间
+
+
+$transition_duration-button_borderless-bg: var(--semi-transition_duration-faster);//无边框按钮-背景色-动画持续时间
+$transition_function-button_borderless-bg: var(--semi-transition_function-easeIn);//无边框按钮-背景色-过渡曲线
+$transition_delay-button_borderless-bg: var(--semi-transition_delay-fastest);//无边框按钮-背景色-延迟时间
+
+$transition_duration-button_primary-border: var(--semi-transition_duration-faster);//主要按钮-边框-动画持续时间
+$transition_function-button_primary-border: var(--semi-transition_function-easeIn);//主要按钮-边框-过渡曲线
+$transition_delay-button_primary-border: var(--semi-transition_delay-fastest);//主要按钮-边框-延迟时间
+
+$transition_duration-button_secondary-border: var(--semi-transition_duration-faster);//次要按钮-边框-动画持续时间
+$transition_function-button_secondary-border: var(--semi-transition_function-easeIn);//次要按钮-边框-过渡曲线
+$transition_delay-button_secondary-border: var(--semi-transition_delay-fastest);//次要按钮-边框-延迟时间
+
+$transition_duration-button_tertiary-border: var(--semi-transition_duration-faster);//三级按钮-边框-动画持续时间
+$transition_function-button_tertiary-border: var(--semi-transition_function-easeIn);//三级按钮-边框-过渡曲线
+$transition_delay-button_tertiary-border: var(--semi-transition_delay-fastest);//三级按钮-边框-延迟时间
+
+$transition_duration-button_light-border: var(--semi-transition_duration-faster);//浅色按钮-边框-动画持续时间
+$transition_function-button_light-border: var(--semi-transition_function-easeIn);//浅色按钮-边框-过渡曲线
+$transition_delay-button_light-border: var(--semi-transition_delay-fastest);//浅色按钮-边框-延迟时间
+
+$transition_duration-button_warning-border: var(--semi-transition_duration-faster);//警告按钮-边框-动画持续时间
+$transition_function-button_warning-border: var(--semi-transition_function-easeIn);//警告按钮-边框-过渡曲线
+$transition_delay-button_warning-border: var(--semi-transition_delay-fastest);//警告按钮-边框-延迟时间
+
+$transition_duration-button_danger-border: var(--semi-transition_duration-faster);//危险按钮-边框-动画持续时间
+$transition_function-button_danger-border: var(--semi-transition_function-easeIn);//危险按钮-边框-过渡曲线
+$transition_delay-button_danger-border: var(--semi-transition_delay-fastest);//危险按钮-边框-延迟时间
+
+//transform token
+
+$transform_scale-button_primary: var(--semi-transform_scale-none);//主要按钮-放大
+$transform_scale-button_secondary: var(--semi-transform_scale-none);//次要按钮-放大
+$transform_scale-button_tertiary: var(--semi-transform_scale-none);//三级按钮-放大
+$transform_scale-button_light: var(--semi-transform_scale-none);//浅色按钮-放大
+$transform_scale-button_warning: var(--semi-transform_scale-none);//警告按钮-放大
+$transform_scale-button_danger: var(--semi-transform_scale-none);//危险按钮-放大
+$transform_scale-button_borderless: var(--semi-transform_scale-none);//无边框按钮-放大

package/button/button.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import './animation.scss';
 @import './splitButtonGroup.scss';
 
 $module: #{$prefix}-button;
@@ -39,6 +40,11 @@ $module: #{$prefix}-button;
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
+      transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
+      border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
+      transform: scale($transform-scale-button_danger);
+
+
         &:hover {
             background-color: $color-button_danger-bg-hover;
         }
@@ -56,6 +62,10 @@ $module: #{$prefix}-button;
     &-warning {
         background-color: $color-button_warning-bg-default;
         color: $color-button_warning-text-default;
+      transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
+      border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
+      transform:scale($transform_scale-button_warning);
+
         &:hover {
             background-color: $color-button_warning-bg-hover;
         }
@@ -73,6 +83,10 @@ $module: #{$prefix}-button;
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;
         color: $color-button_tertiary-text-default;
+      transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
+      border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
+      transform:scale($transform_scale_button_tertiary);
+
         &:hover {
             background-color: $color-button_tertiary-bg-hover;
         }
@@ -87,6 +101,10 @@ $module: #{$prefix}-button;
     &-primary {
         background-color: $color-button_primary-bg-default;
         color: $color-button_primary-text-default;
+        transition: background-color $transition_duration-button_primary-bg $transition_function-button_primary-bg $transition_delay-button_primary-bg,
+        border $transition_duration-button_primary-border $transition_function-button_primary-border $transition_delay-button_primary-border;;
+      transform:scale($transform_scale-button_primary);
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             background-color: $color-button_primary-bg-hover;
         }
@@ -103,6 +121,10 @@ $module: #{$prefix}-button;
         background-color: $color-button_secondary-bg-default;
         outline-color: $color-button_secondary-border-default;
         color: $color-button_secondary-text-default;
+      transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
+      border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
+      transform:scale($transform_scale-button_secondary);
+
         &:hover {
             background-color: $color-button_secondary-bg-hover;
         }
@@ -132,6 +154,9 @@ $module: #{$prefix}-button;
     &-borderless {
         background-color: transparent;
         border: $width-button_borderless-border $color-button_borderless-border-default solid;
+      transition:background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
+      transform:scale($transform_scale-button_borderless);
+
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_borderless-bg-hover;
             border: $width-button_borderless-border $color-button_borderless-border-hover solid;
@@ -145,6 +170,10 @@ $module: #{$prefix}-button;
     &-light {
         background-color: $color-button_light-bg-default;
         border: $width-button_light-border $color-button_light-border-default solid;
+      transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
+      border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
+      transform:scale($transform_scale-button_light);
+
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;
             border: $width-button_light-border $color-button_light-border-hover solid;

package/calendar/eventUtil.ts

@@ -16,7 +16,7 @@ import {
     endOfDay,
     startOfDay,
     toDate,
-    Locale
+    Locale,
 } from 'date-fns';
 import { EventObject, ParsedRangeEvent } from './foundation';
 
@@ -96,6 +96,8 @@ export interface DateObj {
     month: string;
 }
 
+export type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
 export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale) => {
     const today = getCurrDate();
     const arr: Array<DateObj> = [];
@@ -125,8 +127,8 @@ export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode:
  * @returns {object[]} { date: Date, dayString: string, ind: number, isToday: boolean, isWeekend: boolean, weekday: string }
  * create weekly object array
  */
-export const calcWeekData = (value: Date, mode = 'week', locale: Locale) => {
-    const start = startOfWeek(value);
+export const calcWeekData = (value: Date, mode = 'week', locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
+    const start = startOfWeek(value, { weekStartsOn });
     return calcRangeData(value, start, 7, mode, locale);
 };