@douyinfe/semi-foundation 2.76.1 → 2.78.0-alpha.2

package/lib/es/userGuide/userGuide.scss

@@ -0,0 +1,143 @@
+@import './variables.scss';
+@import './animation.scss';
+
+$module: #{$prefix}-userGuide;
+
+
+.#{$module} {
+
+    &-spotlight {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        pointer-events: none;
+
+        &-rect {
+            transition: all $transition_duration-userGuide_spotLight $transition_function-userGuide_spotLight;
+        }
+    }
+
+    &-popover {
+        max-width: fit-content;
+        width: $width-userGuide_popover-default;
+    }
+
+    &-popup-content {
+        color: $color-userGuide_popup-text-default;
+
+        &-primary {
+            color: $color-userGuide_popup-text-primary;
+        }
+
+        &-cover {
+            img {
+                display: block;
+                height: $height-userGuide_popup_content_cover-default;
+                width: 100%;
+                border-radius: $radius-userGuide_popup_content_cover;
+            }
+        }
+
+        &-body {
+            padding: $spacing-userGuide_popup_content_body-padding;
+        }
+    
+        &-title {
+            font-size: $font-userGuide_popup_content_title-fontSize;
+            font-weight: $font-userGuide_popup_content_title-fontWeight;
+            line-height: $font-userGuide_popup_content_title-lineHeight;
+            margin-bottom: $spacing-userGuide_popup_content_title-marginBottom;
+        }
+
+        &-description {
+            font-size: $font-userGuide_popup_content_description-fontSize;
+            line-height: $font-userGuide_popup_content_description-lineHeight;
+            margin-bottom: $spacing-userGuide_popup_content_description-marginBottom;
+        }
+
+        &-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+    
+        &-buttons {
+            display: flex;
+            gap: $spacing-userGuide_popup_content_button-gap;
+            margin-left: $spacing-userGuide_popup_content_button-marginLeft;
+        }
+
+        &-indicator {
+            font-size: $font-size-regular; 
+            line-height: $font-userGuide_popup_content_indicator-lineHeight;
+        }
+    }
+
+    &-modal {
+
+        .#{$prefix}-modal-small {
+            width: fit-content;
+        }
+
+        // Override the modal's original padding
+        .#{$prefix}-modal-content {
+            padding: 0;
+            width: $width-userGuide_modal_content_cover-default;
+            max-width: fit-content;
+        }
+
+        &-cover {
+            height: $height-userGuide_modal_content_cover-default;
+        }
+
+        &-indicator {
+            height: $height-userGuide_modal_content_indicator-default;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            column-gap: $spacing-userGuide_popup_content_indicator-gap;
+
+            &-item {
+                width: $width-userGuide_modal_content_indicator_item-default;
+                height: $height-userGuide_modal_content_indicator_item-default;
+                border-radius: $radius-userGuide_modal_content_indicator;
+                background-color: $color-userGuide_modal_content_indicator-bg;
+
+                &-active {
+                    background: $color-userGuide_modal_content_indicator-bg-active
+                }
+            }
+        }
+
+        &-body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            padding: $spacing-userGuide_modal_content_body-padding;
+
+            &-title {
+                font-size: $font-userGuide_modal_content_title-fontSize;
+                font-weight: $font-userGuide_modal_content_title-fontWeight;
+                line-height:$font-userGuide_modal_content_title-lineHeight;
+                margin-bottom: $spacing-userGuide_modal_content_title-marginBottom;
+            }
+
+            &-description {
+                font-size: $font-userGuide_modal_content_description-fontSize;
+                line-height: $font-userGuide_modal_content_description-lineHeight;
+            }
+        }
+
+        &-footer {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: $spacing-userGuide_modal_content_footer-padding;
+            column-gap: $spacing-userGuide_modal_content_button-gap
+        }
+    }
+} 
+

package/lib/es/userGuide/variables.scss

@@ -0,0 +1,48 @@
+// Color
+$color-userGuide_popup-text-default: var(--semi-color-text-0); // 气泡卡片文字颜色 - 默认
+$color-userGuide_popup-text-primary: var(--semi-color-tertiary-light-default); // 气泡卡片文字颜色 - primary
+$color-userGuide_modal_content_indicator-bg: var(--semi-color-primary-light-active); // 弹窗指示器背景颜色
+$color-userGuide_modal_content_indicator-bg-active: var(--semi-color-primary);  // 弹窗指示器背景颜色 - 选中态
+
+// Width/Height
+$width-userGuide_popover-default: 400px; // 默认气泡卡片宽度
+$height-userGuide_popup_content_cover-default: 200px; // 默认气泡卡片封面高度
+$width-userGuide_modal_content_cover-default: 600px; // 默认弹窗式卡片封面宽度
+$height-userGuide_modal_content_cover-default: 300px; // 默认弹窗式卡片封面高度
+$height-userGuide_modal_content_indicator-default: 30px; // 默认弹窗式卡片指示器整体高度
+$width-userGuide_modal_content_indicator_item-default: 6px; // 默认弹窗式卡片单个指示器宽度
+$height-userGuide_modal_content_indicator_item-default: 6px; // 默认弹窗式卡片单个指示器高度
+$font-userGuide_popup_content_title-lineHeight: 24px; // 气泡卡片标题行高
+$font-userGuide_popup_content_description-lineHeight: 20px; // 气泡卡片详情行高
+$font-userGuide_popup_content_indicator-lineHeight: 20px; // 气泡卡片指示器行高
+$font-userGuide_modal_content_title-lineHeight: 24px; // 弹窗式卡片标题行高
+$font-userGuide_modal_content_description-lineHeight: 20px; // 弹窗式卡片详情行高
+
+// Spacing
+$spacing-userGuide_popup_content_body-padding: 24px; // 气泡卡片内边距
+$spacing-userGuide_popup_content_title-marginBottom: 8px; // 气泡卡片标题底部外边距
+$spacing-userGuide_popup_content_description-marginBottom: 48px; // 气泡卡片详情底部外边距
+$spacing-userGuide_popup_content_button-gap: 12px; // 气泡卡片底部按钮间距
+$spacing-userGuide_popup_content_button-marginLeft: 120px; // 气泡卡片按钮组左边距
+$spacing-userGuide_modal_content_title-marginBottom: 8px; // 弹窗式卡片标题底部外边距
+$spacing-userGuide_modal_content_body-padding: 24px 48px; // 弹窗式卡片body内边距
+$spacing-userGuide_modal_content_footer-padding: 24px; // 弹窗式卡片footer内边距
+$spacing-userGuide_popup_content_indicator-gap: 8px; // 弹窗式片指示器间距
+$spacing-userGuide_modal_content_button-gap: 12px; // 弹窗式卡片底部按钮间距
+
+
+// Radius
+$radius-userGuide_popup_content_cover: var(--semi-border-radius-medium) var(--semi-border-radius-medium) 0 0; // 气泡卡片封面圆角
+$radius-userGuide_modal_content_indicator: var(--semi-border-radius-large); // 气泡卡片指示器圆角
+
+
+// font
+$font-userGuide_popup_content_title-fontSize: $font-size-header-5; // 气泡卡片标题字体大小
+$font-userGuide_popup_content_description-fontSize: $font-size-regular; // 气泡卡片详情字体大小
+$font-userGuide_popup_content_indicator-fontSize: $font-size-regular; // 气泡卡片指示器字体大小
+$font-userGuide_popup_content_title-fontWeight: $font-weight-bold; // 气泡卡片标题字重
+$font-userGuide_modal_content_title-fontSize: $font-size-header-5; // 弹窗式卡片标题字体大小
+$font-userGuide_modal_content_description-fontSize: $font-size-regular; // 弹窗式卡详情字体大小
+$font-userGuide_modal_content_title-fontWeight: $font-weight-bold; // 弹窗式卡片标题字重
+
+

package/markdownRender/foundation.ts

@@ -2,7 +2,8 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { CompileOptions, evaluate, compile, EvaluateOptions, evaluateSync, RunOptions } from '@mdx-js/mdx';
 import { MDXProps } from 'mdx/types';
 import remarkGfm from 'remark-gfm';
-import { type PluggableList } from "@mdx-js/mdx/lib/core";
+import type { PluggableList } from 'unified';
+
 export interface MarkdownRenderAdapter <P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getRuntime: () => any
 

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.76.1",
+    "version": "2.78.0-alpha.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.76.1",
-        "@douyinfe/semi-json-viewer-core": "2.76.1",
+        "@douyinfe/semi-animation": "2.78.0-alpha.2",
+        "@douyinfe/semi-json-viewer-core": "2.78.0-alpha.2",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -29,7 +29,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "3feea3f0ba53bd6710ad2fc9aca2ec892a2a21df",
+    "gitHead": "8f2966f2472daa5369f886b2c246ceccf59ed94e",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/tooltip/foundation.ts

@@ -4,6 +4,7 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { ArrayElement } from '../utils/type';
 import { strings } from './constants';
 import { handlePrevent } from '../utils/a11y';
+import { getUuidShort } from "../utils/uuid";
 
 const REGS = {
     TOP: /top/i,
@@ -81,7 +82,7 @@ export interface PopupContainerDOMRect extends DOMRectLikeType {
 export default class Tooltip<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TooltipAdapter<P, S>, P, S> {
     _timer: ReturnType<typeof setTimeout>;
     _mounted: boolean;
-
+    anchorName = `--native-semi-anchor-${getUuidShort()}`
     constructor(adapter: TooltipAdapter<P, S>) {
         super({ ...adapter });
         this._timer = null;
@@ -135,7 +136,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     unBindResizeEvent() {
         this._adapter.unregisterResizeHandler(this.onResize);
     }
-  
+
     removePortal = () => {
         this._adapter.removePortal();
     }
@@ -199,6 +200,29 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         }
     }
 
+    getNativeAnchorStyle = () => {
+        const style = {
+            positionAnchor: this.anchorName,
+            position: "fixed",
+        };
+        const position = this._adapter.getProp("position");
+        const spacing = this._adapter.getProp("spacing");
+        if (position === "top") {
+            style['bottom'] = `anchor(top)`;
+            style['justifySelf'] = "anchor-center";
+            style["transform"] = `translateY(-${spacing}px)`;
+           
+        } else if (position === "bottom") {
+            style['top'] = `anchor(bottom)`;
+            style['justifySelf'] = "anchor-center";
+            style["transform"] = `translateY(${spacing}px)`;
+
+        } else {
+            throw new Error(`Currently, not support position ${position} when enable native anchor ability, only 'top' 'bottom'.`);
+        }
+        return style;
+    }
+
     _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>) {
         const eventNames = this._adapter.getEventName();
         const triggerEventSet = {

package/userGuide/animation.scss

@@ -0,0 +1,2 @@
+$transition_duration-userGuide_spotLight: 200ms; // spotLight 动画持续时间
+$transition_function-userGuide_spotLight: cubic-bezier(0.4, 0, 0.2, 1); // spotLight 过渡曲线

package/userGuide/constants.ts

@@ -0,0 +1,35 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+
+const cssClasses = {
+    PREFIX: `${BASE_CLASS_PREFIX}-userGuide`,
+    PREFIX_MODAL: `${BASE_CLASS_PREFIX}-userGuide-modal`,
+};
+
+const strings = {
+    MODE: ['popup', 'modal'],
+    POSITION_SET: [
+        'top',
+        'topLeft',
+        'topRight',
+        'left',
+        'leftTop',
+        'leftBottom',
+        'right',
+        'rightTop',
+        'rightBottom',
+        'bottom',
+        'bottomLeft',
+        'bottomRight',
+        'leftTopOver',
+        'rightTopOver',
+    ],
+    THEME: ['default', 'primary'],
+};
+
+const numbers = {
+    DEFAULT_CURRENT: 0,
+    DEFAULT_SPOTLIGHT_PADDING: 5,
+    DEFAULT_Z_INDEX: 1030,
+};
+
+export { cssClasses, strings, numbers }; 

package/userGuide/foundation.ts

@@ -0,0 +1,87 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { numbers } from './constants';
+
+export interface UserGuideAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S>{
+    notifyChange: (current: number) => void;
+    notifyPrev: (current: number) => void;
+    notifyNext: (current: number) => void;
+    notifySkip: () => void;
+    notifyFinish: () => void;
+    setCurrent: (current: number) => void;
+    disabledBodyScroll: () => void;
+    enabledBodyScroll: () => void
+}
+
+
+export default class UserGuideFoundation <P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<UserGuideAdapter<P, S>, P, S> {
+    constructor(adapter: UserGuideAdapter<P, S>) {
+        super({ ...adapter });
+    }
+
+    init() {
+    }
+
+    destroy() {
+        this._adapter.enabledBodyScroll();
+    }
+
+    _notifyChange(current: number): void {
+        const { current: stateCurrent } = this.getStates();
+        if (stateCurrent !== current) {
+            this._adapter.notifyChange(current);
+        }
+    }
+
+    getIsControlledComponent(): boolean {
+        return this._isInProps('current');
+    }
+
+    beforeShow() {
+        this._adapter.disabledBodyScroll();
+    }
+
+    afterHide() {
+        this._adapter.enabledBodyScroll();
+    }
+
+    getFinalPaading() {
+        const { spotlightPadding, steps } = this.getProps();
+        const { current } = this.getStates();
+        const stepPadding = steps[current]?.spotlightPadding;
+        const padding = typeof stepPadding === 'number' ? stepPadding : 
+            typeof spotlightPadding === 'number' ? spotlightPadding : 
+                numbers.DEFAULT_SPOTLIGHT_PADDING;
+        return padding;
+    }
+
+    handlePrev = () => {
+        const { current } = this.getStates();
+        const newCurrent = current - 1;
+        if (!this.getIsControlledComponent()) {
+            this._adapter.setCurrent(newCurrent);
+        } 
+        this._notifyChange(newCurrent);
+        this._adapter.notifyPrev(newCurrent);
+    };
+
+    handleNext = () => {
+        const { steps } = this.getProps();
+        const { current } = this.getStates();
+        const isLastStep = current === steps.length - 1;
+        const newCurrent = isLastStep ? current : current + 1;
+        if (isLastStep) {
+            this._adapter.notifyFinish();
+        } else {
+            this._notifyChange(newCurrent);
+            this._adapter.notifyNext(newCurrent);
+            if (!this.getIsControlledComponent()) {
+                this._adapter.setCurrent(newCurrent);
+            }
+        }
+    };
+
+    handleSkip = () => {
+        this._adapter.notifySkip();
+    };
+
+} 

package/userGuide/userGuide.scss

@@ -0,0 +1,143 @@
+@import './variables.scss';
+@import './animation.scss';
+
+$module: #{$prefix}-userGuide;
+
+
+.#{$module} {
+
+    &-spotlight {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        pointer-events: none;
+
+        &-rect {
+            transition: all $transition_duration-userGuide_spotLight $transition_function-userGuide_spotLight;
+        }
+    }
+
+    &-popover {
+        max-width: fit-content;
+        width: $width-userGuide_popover-default;
+    }
+
+    &-popup-content {
+        color: $color-userGuide_popup-text-default;
+
+        &-primary {
+            color: $color-userGuide_popup-text-primary;
+        }
+
+        &-cover {
+            img {
+                display: block;
+                height: $height-userGuide_popup_content_cover-default;
+                width: 100%;
+                border-radius: $radius-userGuide_popup_content_cover;
+            }
+        }
+
+        &-body {
+            padding: $spacing-userGuide_popup_content_body-padding;
+        }
+    
+        &-title {
+            font-size: $font-userGuide_popup_content_title-fontSize;
+            font-weight: $font-userGuide_popup_content_title-fontWeight;
+            line-height: $font-userGuide_popup_content_title-lineHeight;
+            margin-bottom: $spacing-userGuide_popup_content_title-marginBottom;
+        }
+
+        &-description {
+            font-size: $font-userGuide_popup_content_description-fontSize;
+            line-height: $font-userGuide_popup_content_description-lineHeight;
+            margin-bottom: $spacing-userGuide_popup_content_description-marginBottom;
+        }
+
+        &-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+    
+        &-buttons {
+            display: flex;
+            gap: $spacing-userGuide_popup_content_button-gap;
+            margin-left: $spacing-userGuide_popup_content_button-marginLeft;
+        }
+
+        &-indicator {
+            font-size: $font-size-regular; 
+            line-height: $font-userGuide_popup_content_indicator-lineHeight;
+        }
+    }
+
+    &-modal {
+
+        .#{$prefix}-modal-small {
+            width: fit-content;
+        }
+
+        // Override the modal's original padding
+        .#{$prefix}-modal-content {
+            padding: 0;
+            width: $width-userGuide_modal_content_cover-default;
+            max-width: fit-content;
+        }
+
+        &-cover {
+            height: $height-userGuide_modal_content_cover-default;
+        }
+
+        &-indicator {
+            height: $height-userGuide_modal_content_indicator-default;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            column-gap: $spacing-userGuide_popup_content_indicator-gap;
+
+            &-item {
+                width: $width-userGuide_modal_content_indicator_item-default;
+                height: $height-userGuide_modal_content_indicator_item-default;
+                border-radius: $radius-userGuide_modal_content_indicator;
+                background-color: $color-userGuide_modal_content_indicator-bg;
+
+                &-active {
+                    background: $color-userGuide_modal_content_indicator-bg-active
+                }
+            }
+        }
+
+        &-body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            padding: $spacing-userGuide_modal_content_body-padding;
+
+            &-title {
+                font-size: $font-userGuide_modal_content_title-fontSize;
+                font-weight: $font-userGuide_modal_content_title-fontWeight;
+                line-height:$font-userGuide_modal_content_title-lineHeight;
+                margin-bottom: $spacing-userGuide_modal_content_title-marginBottom;
+            }
+
+            &-description {
+                font-size: $font-userGuide_modal_content_description-fontSize;
+                line-height: $font-userGuide_modal_content_description-lineHeight;
+            }
+        }
+
+        &-footer {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: $spacing-userGuide_modal_content_footer-padding;
+            column-gap: $spacing-userGuide_modal_content_button-gap
+        }
+    }
+} 
+

package/userGuide/variables.scss

@@ -0,0 +1,48 @@
+// Color
+$color-userGuide_popup-text-default: var(--semi-color-text-0); // 气泡卡片文字颜色 - 默认
+$color-userGuide_popup-text-primary: var(--semi-color-tertiary-light-default); // 气泡卡片文字颜色 - primary
+$color-userGuide_modal_content_indicator-bg: var(--semi-color-primary-light-active); // 弹窗指示器背景颜色
+$color-userGuide_modal_content_indicator-bg-active: var(--semi-color-primary);  // 弹窗指示器背景颜色 - 选中态
+
+// Width/Height
+$width-userGuide_popover-default: 400px; // 默认气泡卡片宽度
+$height-userGuide_popup_content_cover-default: 200px; // 默认气泡卡片封面高度
+$width-userGuide_modal_content_cover-default: 600px; // 默认弹窗式卡片封面宽度
+$height-userGuide_modal_content_cover-default: 300px; // 默认弹窗式卡片封面高度
+$height-userGuide_modal_content_indicator-default: 30px; // 默认弹窗式卡片指示器整体高度
+$width-userGuide_modal_content_indicator_item-default: 6px; // 默认弹窗式卡片单个指示器宽度
+$height-userGuide_modal_content_indicator_item-default: 6px; // 默认弹窗式卡片单个指示器高度
+$font-userGuide_popup_content_title-lineHeight: 24px; // 气泡卡片标题行高
+$font-userGuide_popup_content_description-lineHeight: 20px; // 气泡卡片详情行高
+$font-userGuide_popup_content_indicator-lineHeight: 20px; // 气泡卡片指示器行高
+$font-userGuide_modal_content_title-lineHeight: 24px; // 弹窗式卡片标题行高
+$font-userGuide_modal_content_description-lineHeight: 20px; // 弹窗式卡片详情行高
+
+// Spacing
+$spacing-userGuide_popup_content_body-padding: 24px; // 气泡卡片内边距
+$spacing-userGuide_popup_content_title-marginBottom: 8px; // 气泡卡片标题底部外边距
+$spacing-userGuide_popup_content_description-marginBottom: 48px; // 气泡卡片详情底部外边距
+$spacing-userGuide_popup_content_button-gap: 12px; // 气泡卡片底部按钮间距
+$spacing-userGuide_popup_content_button-marginLeft: 120px; // 气泡卡片按钮组左边距
+$spacing-userGuide_modal_content_title-marginBottom: 8px; // 弹窗式卡片标题底部外边距
+$spacing-userGuide_modal_content_body-padding: 24px 48px; // 弹窗式卡片body内边距
+$spacing-userGuide_modal_content_footer-padding: 24px; // 弹窗式卡片footer内边距
+$spacing-userGuide_popup_content_indicator-gap: 8px; // 弹窗式片指示器间距
+$spacing-userGuide_modal_content_button-gap: 12px; // 弹窗式卡片底部按钮间距
+
+
+// Radius
+$radius-userGuide_popup_content_cover: var(--semi-border-radius-medium) var(--semi-border-radius-medium) 0 0; // 气泡卡片封面圆角
+$radius-userGuide_modal_content_indicator: var(--semi-border-radius-large); // 气泡卡片指示器圆角
+
+
+// font
+$font-userGuide_popup_content_title-fontSize: $font-size-header-5; // 气泡卡片标题字体大小
+$font-userGuide_popup_content_description-fontSize: $font-size-regular; // 气泡卡片详情字体大小
+$font-userGuide_popup_content_indicator-fontSize: $font-size-regular; // 气泡卡片指示器字体大小
+$font-userGuide_popup_content_title-fontWeight: $font-weight-bold; // 气泡卡片标题字重
+$font-userGuide_modal_content_title-fontSize: $font-size-header-5; // 弹窗式卡片标题字体大小
+$font-userGuide_modal_content_description-fontSize: $font-size-regular; // 弹窗式卡详情字体大小
+$font-userGuide_modal_content_title-fontWeight: $font-weight-bold; // 弹窗式卡片标题字重
+
+