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

package/lib/cjs/tooltip/foundation.js

@@ -8,6 +8,7 @@ var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
 var _get2 = _interopRequireDefault(require("lodash/get"));
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 var _a11y = require("../utils/a11y");
+var _uuid = require("../utils/uuid");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const REGS = {
   TOP: /top/i,
@@ -28,6 +29,7 @@ class Tooltip extends _foundation.default {
     var _this;
     super(Object.assign({}, adapter));
     _this = this;
+    this.anchorName = `--native-semi-anchor-${(0, _uuid.getUuidShort)()}`;
     this.removePortal = () => {
       this._adapter.removePortal();
     };
@@ -42,6 +44,26 @@ class Tooltip extends _foundation.default {
         (_b = triggerEventSet[eventNames.mouseEnter]) === null || _b === void 0 ? void 0 : _b.call(triggerEventSet);
       }
     };
+    this.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;
+    };
     this.onResize = () => {
       // this.log('resize');
       // rePosition when window resize

package/lib/cjs/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/lib/cjs/userGuide/constants.d.ts

@@ -0,0 +1,15 @@
+declare const cssClasses: {
+    PREFIX: string;
+    PREFIX_MODAL: string;
+};
+declare const strings: {
+    MODE: string[];
+    POSITION_SET: string[];
+    THEME: string[];
+};
+declare const numbers: {
+    DEFAULT_CURRENT: number;
+    DEFAULT_SPOTLIGHT_PADDING: number;
+    DEFAULT_Z_INDEX: number;
+};
+export { cssClasses, strings, numbers };

package/lib/cjs/userGuide/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.strings = exports.numbers = exports.cssClasses = void 0;
+var _constants = require("../base/constants");
+const cssClasses = exports.cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-userGuide`,
+  PREFIX_MODAL: `${_constants.BASE_CLASS_PREFIX}-userGuide-modal`
+};
+const strings = exports.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 = exports.numbers = {
+  DEFAULT_CURRENT: 0,
+  DEFAULT_SPOTLIGHT_PADDING: 5,
+  DEFAULT_Z_INDEX: 1030
+};

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

@@ -0,0 +1,24 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+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>);
+    init(): void;
+    destroy(): void;
+    _notifyChange(current: number): void;
+    getIsControlledComponent(): boolean;
+    beforeShow(): void;
+    afterHide(): void;
+    getFinalPaading(): number;
+    handlePrev: () => void;
+    handleNext: () => void;
+    handleSkip: () => void;
+}

package/lib/cjs/userGuide/foundation.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class UserGuideFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.handlePrev = () => {
+      const {
+        current
+      } = this.getStates();
+      const newCurrent = current - 1;
+      if (!this.getIsControlledComponent()) {
+        this._adapter.setCurrent(newCurrent);
+      }
+      this._notifyChange(newCurrent);
+      this._adapter.notifyPrev(newCurrent);
+    };
+    this.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);
+        }
+      }
+    };
+    this.handleSkip = () => {
+      this._adapter.notifySkip();
+    };
+  }
+  init() {}
+  destroy() {
+    this._adapter.enabledBodyScroll();
+  }
+  _notifyChange(current) {
+    const {
+      current: stateCurrent
+    } = this.getStates();
+    if (stateCurrent !== current) {
+      this._adapter.notifyChange(current);
+    }
+  }
+  getIsControlledComponent() {
+    return this._isInProps('current');
+  }
+  beforeShow() {
+    this._adapter.disabledBodyScroll();
+  }
+  afterHide() {
+    this._adapter.enabledBodyScroll();
+  }
+  getFinalPaading() {
+    var _a;
+    const {
+      spotlightPadding,
+      steps
+    } = this.getProps();
+    const {
+      current
+    } = this.getStates();
+    const stepPadding = (_a = steps[current]) === null || _a === void 0 ? void 0 : _a.spotlightPadding;
+    const padding = typeof stepPadding === 'number' ? stepPadding : typeof spotlightPadding === 'number' ? spotlightPadding : _constants.numbers.DEFAULT_SPOTLIGHT_PADDING;
+    return padding;
+  }
+}
+exports.default = UserGuideFoundation;

package/lib/cjs/userGuide/userGuide.css

@@ -0,0 +1,109 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-userGuide-spotlight {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+}
+.semi-userGuide-spotlight-rect {
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.semi-userGuide-popover {
+  max-width: fit-content;
+  width: 400px;
+}
+.semi-userGuide-popup-content {
+  color: var(--semi-color-text-0);
+}
+.semi-userGuide-popup-content-primary {
+  color: var(--semi-color-tertiary-light-default);
+}
+.semi-userGuide-popup-content-cover img {
+  display: block;
+  height: 200px;
+  width: 100%;
+  border-radius: var(--semi-border-radius-medium) var(--semi-border-radius-medium) 0 0;
+}
+.semi-userGuide-popup-content-body {
+  padding: 24px;
+}
+.semi-userGuide-popup-content-title {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  margin-bottom: 8px;
+}
+.semi-userGuide-popup-content-description {
+  font-size: 14px;
+  line-height: 20px;
+  margin-bottom: 48px;
+}
+.semi-userGuide-popup-content-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.semi-userGuide-popup-content-buttons {
+  display: flex;
+  gap: 12px;
+  margin-left: 120px;
+}
+.semi-userGuide-popup-content-indicator {
+  font-size: 14px;
+  line-height: 20px;
+}
+.semi-userGuide-modal .semi-modal-small {
+  width: fit-content;
+}
+.semi-userGuide-modal .semi-modal-content {
+  padding: 0;
+  width: 600px;
+  max-width: fit-content;
+}
+.semi-userGuide-modal-cover {
+  height: 300px;
+}
+.semi-userGuide-modal-indicator {
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  column-gap: 8px;
+}
+.semi-userGuide-modal-indicator-item {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--semi-border-radius-large);
+  background-color: var(--semi-color-primary-light-active);
+}
+.semi-userGuide-modal-indicator-item-active {
+  background: var(--semi-color-primary);
+}
+.semi-userGuide-modal-body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 24px 48px;
+}
+.semi-userGuide-modal-body-title {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  margin-bottom: 8px;
+}
+.semi-userGuide-modal-body-description {
+  font-size: 14px;
+  line-height: 20px;
+}
+.semi-userGuide-modal-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  column-gap: 12px;
+}

package/lib/cjs/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/cjs/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/lib/es/inputNumber/foundation.d.ts

@@ -19,6 +19,7 @@ export interface InputNumberAdapter extends DefaultAdapter {
     fixCaret: (start: number, end: number) => void;
     setClickUpOrDown: (clicked: boolean) => void;
     updateStates: (states: BaseInputNumberState, callback?: () => void) => void;
+    getInputCharacter: (index: number) => string;
 }
 export interface BaseInputNumberState {
     value?: number | string;
@@ -31,14 +32,19 @@ declare class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     _interval: any;
     _timerHasRegistered: boolean;
     _timer: any;
+    _decimalPointSymbol: string;
+    _currencySymbol: string;
     init(): void;
     destroy(): void;
     isControlled(): boolean;
+    _isCurrency(): boolean;
+    _getFinalCurrency(): any;
     _doInput(v?: string, event?: any, updateCb?: any): void;
     _registerInterval(cb?: (...args: any) => void): void;
     _unregisterInterval(): void;
     _registerTimer(cb: (...args: any[]) => void): void;
     _unregisterTimer(): void;
+    _setCurrencySymbol(): void;
     handleInputFocus(e: any): void;
     /**
      * Input box content update processing
@@ -73,19 +79,21 @@ declare class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
      */
     _getPrecLen(num: string | number): number;
     _adjustPrec(num: string | number): string;
+    formatCurrency(value: number | string): string;
     /**
      * format number to string
      * @param {string|number} value
      * @param {boolean} needAdjustPrec
      * @returns {string}
      */
-    doFormat(value?: string | number, needAdjustPrec?: boolean): string;
+    doFormat(value?: string | number, needAdjustPrec?: boolean, needAdjustCurrency?: boolean): string;
     /**
      *
      * @param {number} current
      * @returns {number}
      */
     fetchMinOrMax(current: number): any;
+    parseInternationalCurrency(currencyString: string): number;
     /**
      * parse to number
      * @param {string|number} value
@@ -116,5 +124,11 @@ declare class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     notifyChange(value: string, e: any): void;
     notifyNumberChange(value: number, e: any): void;
     updateStates(states: BaseInputNumberState, callback?: () => void): void;
+    /**
+     * Get currency by locale code
+     * @param {string} localeCode
+     * @returns {string}
+     */
+    getCurrencyByLocaleCode(): string;
 }
 export default InputNumberFoundation;