@douyinfe/semi-foundation 2.76.1 → 2.77.0-beta.0

package/lib/es/inputNumber/foundation.js

@@ -7,7 +7,15 @@ import keyCode from '../utils/keyCode';
 import { numbers } from './constants';
 import { minus as numberMinus } from '../utils/number';
 class InputNumberFoundation extends BaseFoundation {
+  constructor() {
+    super(...arguments);
+    this._decimalPointSymbol = undefined;
+    this._currencySymbol = '';
+  }
   init() {
+    if (this._isCurrency()) {
+      this._setCurrencySymbol();
+    }
     this._setInitValue();
   }
   destroy() {
@@ -18,6 +26,18 @@ class InputNumberFoundation extends BaseFoundation {
   isControlled() {
     return this._isControlledComponent('value');
   }
+  _isCurrency() {
+    const {
+      currency
+    } = this.getProps();
+    return currency === true || typeof currency === 'string' && currency.trim() !== '';
+  }
+  _getFinalCurrency() {
+    const {
+      currency
+    } = this.getProps();
+    return currency === true ? this.getProp('defaultCurrency') : currency;
+  }
   _doInput() {
     let v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     let event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -79,6 +99,29 @@ class InputNumberFoundation extends BaseFoundation {
       this._timer = null;
     }
   }
+  _setCurrencySymbol() {
+    const {
+      localeCode,
+      currencyDisplay
+    } = this.getProps();
+    const parts = new Intl.NumberFormat(localeCode, {
+      style: 'currency',
+      currency: this._getFinalCurrency() || this.getCurrencyByLocaleCode(),
+      currencyDisplay
+    }).formatToParts(1234.5);
+    for (const part of parts) {
+      if (part.type === 'decimal') {
+        this._decimalPointSymbol = part.value;
+        console.log('this._decimalPointSymbol: ', this._decimalPointSymbol);
+      }
+      // if (part.type === 'group') {
+      //     groupSeparator = part.value;
+      // }
+      if (part.type === 'currency') {
+        this._currencySymbol = part.value;
+      }
+    }
+  }
   handleInputFocus(e) {
     const value = this.getState('value');
     if (value !== '') {
@@ -149,7 +192,7 @@ class InputNumberFoundation extends BaseFoundation {
     if (!this.isControlled() && (num === null || typeof num === 'number' && !isNaN(num))) {
       this._adapter.setNumber(num);
     }
-    this._adapter.setValue(this.isControlled() ? formattedNum : this.doFormat(valueAfterParser, false), () => {
+    this._adapter.setValue(this.isControlled() && !this._isCurrency() ? formattedNum : this.doFormat(valueAfterParser, false), () => {
       this._adapter.restoreCursor();
     });
     this.notifyChange(notifyVal, event);
@@ -182,7 +225,7 @@ class InputNumberFoundation extends BaseFoundation {
         }
         numHasChanged = true;
       }
-      const currentFormattedNum = this.doFormat(currentNumber, true);
+      const currentFormattedNum = this.doFormat(currentNumber, true, true);
       if (currentFormattedNum !== currentValue) {
         willSetVal = currentFormattedNum;
         strHasChanged = true;
@@ -296,12 +339,12 @@ class InputNumberFoundation extends BaseFoundation {
       value
     } = this.getProps();
     const propsValue = this._isControlledComponent('value') ? value : defaultValue;
-    const tmpNumber = this.doParse(_toString(propsValue), false, true, true);
+    const tmpNumber = this.doParse(this._isCurrency() ? propsValue : _toString(propsValue), false, true, true);
     let number = null;
     if (typeof tmpNumber === 'number' && !isNaN(tmpNumber)) {
       number = tmpNumber;
     }
-    const formattedValue = typeof number === 'number' ? this.doFormat(number, true) : '';
+    const formattedValue = typeof number === 'number' ? this.doFormat(number, true, true) : '';
     this._adapter.setNumber(number);
     this._adapter.setValue(formattedValue);
     if (_isString(formattedValue) && formattedValue !== String(propsValue !== null && propsValue !== void 0 ? propsValue : '')) {
@@ -339,7 +382,7 @@ class InputNumberFoundation extends BaseFoundation {
       curNum = max;
     }
     // console.log('scale: ', scale, 'curNum: ', curNum);
-    return this.doFormat(curNum, true);
+    return this.doFormat(curNum, true, true);
   }
   minus(step, event) {
     const pressShift = event && event.shiftKey;
@@ -366,6 +409,29 @@ class InputNumberFoundation extends BaseFoundation {
     }
     return _toString(num);
   }
+  formatCurrency(value) {
+    const {
+      localeCode,
+      minimumFractionDigits,
+      precision,
+      maximumFractionDigits,
+      currencyDisplay,
+      showCurrencySymbol
+    } = this.getProps();
+    let formattedValue = value;
+    if (typeof value === 'string' && Number.isNaN(Number(value))) {
+      formattedValue = this.parseInternationalCurrency(value);
+    }
+    const formatter = new Intl.NumberFormat(localeCode, {
+      style: 'currency',
+      currency: this._getFinalCurrency() || this.getCurrencyByLocaleCode(),
+      currencyDisplay: currencyDisplay,
+      minimumFractionDigits: minimumFractionDigits || precision || undefined,
+      maximumFractionDigits: maximumFractionDigits || precision || undefined
+    });
+    const formatted = formatter.format(Number(formattedValue));
+    return showCurrencySymbol ? formatted : formatted.replace(this._currencySymbol, '').trim();
+  }
   /**
    * format number to string
    * @param {string|number} value
@@ -375,12 +441,18 @@ class InputNumberFoundation extends BaseFoundation {
   doFormat() {
     let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     let needAdjustPrec = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    let needAdjustCurrency = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     // if (typeof value === 'string') {
     //     return value;
     // }
+    const {
+      formatter
+    } = this.getProps();
     let str;
-    const formatter = this.getProp('formatter');
-    if (needAdjustPrec) {
+    // AdjustCurrency conversion is done only in blur situation, otherwise it is just converted to normal string
+    if (this._isCurrency() && needAdjustCurrency) {
+      str = this.formatCurrency(value);
+    } else if (needAdjustPrec) {
       str = this._adjustPrec(value);
     } else {
       str = _toString(value);
@@ -407,6 +479,18 @@ class InputNumberFoundation extends BaseFoundation {
     }
     return current;
   }
+  // 将货币模式的货币转化为纯数字
+  // Convert currency in currency mode to pure numbers
+  // eg：￥123456.78 to 123456.78
+  // eg：123456.78 to 123456.78
+  parseInternationalCurrency(currencyString) {
+    let cleaned = currencyString.replace(this._currencySymbol, '').replace(new RegExp(`[^\\d${this._decimalPointSymbol}\\-]`, 'g'), '');
+    // Convert the localized decimal point to the standard decimal point
+    if (this._decimalPointSymbol && this._decimalPointSymbol !== '.') {
+      cleaned = cleaned.replace(this._decimalPointSymbol, '.');
+    }
+    return parseFloat(cleaned);
+  }
   /**
    * parse to number
    * @param {string|number} value
@@ -419,6 +503,9 @@ class InputNumberFoundation extends BaseFoundation {
     let needCheckPrec = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     let needAdjustPrec = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     let needAdjustMaxMin = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    if (this._isCurrency() && typeof value === 'string') {
+      value = this.parseInternationalCurrency(value);
+    }
     if (typeof value === 'number') {
       if (needAdjustMaxMin) {
         value = this.fetchMinOrMax(value);
@@ -467,7 +554,12 @@ class InputNumberFoundation extends BaseFoundation {
       return value;
     }
     if (typeof value === 'string') {
-      const parser = this.getProp('parser');
+      const {
+        parser
+      } = this.getProps();
+      if (this._isCurrency()) {
+        value = this.parseInternationalCurrency(value);
+      }
       if (typeof parser === 'function') {
         value = parser(value);
       }
@@ -535,5 +627,74 @@ class InputNumberFoundation extends BaseFoundation {
   updateStates(states, callback) {
     this._adapter.updateStates(states, callback);
   }
+  /**
+   * Get currency by locale code
+   * @param {string} localeCode
+   * @returns {string}
+   */
+  getCurrencyByLocaleCode() {
+    const {
+      localeCode
+    } = this.getProps();
+    // Mapping table of region codes to currency codes
+    const localeToCurrency = {
+      // Asia
+      'zh-CN': 'CNY',
+      'zh-HK': 'HKD',
+      'zh-TW': 'TWD',
+      'ja-JP': 'JPY',
+      'ko-KR': 'KRW',
+      'th-TH': 'THB',
+      'vi-VN': 'VND',
+      'ms-MY': 'MYR',
+      'id-ID': 'IDR',
+      'hi-IN': 'INR',
+      'ar-SA': 'SAR',
+      // Europe
+      'en-GB': 'GBP',
+      'de-DE': 'EUR',
+      'fr-FR': 'EUR',
+      'it-IT': 'EUR',
+      'es-ES': 'EUR',
+      'pt-PT': 'EUR',
+      'ru-RU': 'RUB',
+      // North America
+      'en-US': 'USD',
+      'en-CA': 'CAD',
+      'es-MX': 'MXN',
+      // South America
+      'pt-BR': 'BRL',
+      'es-AR': 'ARS',
+      // Oceania
+      'en-AU': 'AUD',
+      'en-NZ': 'NZD',
+      // Africa
+      'en-ZA': 'ZAR',
+      'ar-EG': 'EGP' // Egypt
+    };
+    // Try to match the full region code directly
+    if (localeToCurrency[localeCode]) {
+      return localeToCurrency[localeCode];
+    }
+    // If no direct match, try to match the language part (the first two characters)
+    const languageCode = localeCode.split('-')[0];
+    const fallbackMap = {
+      'en': 'USD',
+      'zh': 'CNY',
+      'es': 'EUR',
+      'fr': 'EUR',
+      'de': 'EUR',
+      'it': 'EUR',
+      'ja': 'JPY',
+      'ko': 'KRW',
+      'ru': 'RUB',
+      'ar': 'SAR' // Arabic defaults to SAR
+    };
+    if (fallbackMap[languageCode]) {
+      return fallbackMap[languageCode];
+    }
+    // If no match, return USD as the default value
+    return 'USD';
+  }
 }
 export default InputNumberFoundation;

package/lib/es/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/es/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/es/userGuide/constants.js

@@ -0,0 +1,16 @@
+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/lib/es/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/es/userGuide/foundation.js

@@ -0,0 +1,74 @@
+import BaseFoundation from '../base/foundation';
+import { numbers } from './constants';
+export default class UserGuideFoundation extends BaseFoundation {
+  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 : numbers.DEFAULT_SPOTLIGHT_PADDING;
+    return padding;
+  }
+}

package/lib/es/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/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
+        }
+    }
+} 
+