@douyinfe/semi-foundation 2.63.0 → 2.64.0-beta.0

package/lib/es/colorPicker/utils/split.d.ts

@@ -0,0 +1,18 @@
+declare const split: (str: string, mode: 'rgba' | 'hsva') => false | {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+    h?: undefined;
+    s?: undefined;
+    v?: undefined;
+} | {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+    r?: undefined;
+    g?: undefined;
+    b?: undefined;
+};
+export default split;

package/lib/es/colorPicker/utils/split.js

@@ -0,0 +1,34 @@
+const split = (str, mode) => {
+  // 12,32,43 => [12,32,43]
+  const reg = /^\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,?\s*([\d.]*)\s*$/;
+  const res = str.match(reg);
+  const result = [];
+  result[0] = Number(res === null || res === void 0 ? void 0 : res[1]);
+  result[1] = Number(res === null || res === void 0 ? void 0 : res[2]);
+  result[2] = Number(res === null || res === void 0 ? void 0 : res[3]);
+  result[3] = Number((res === null || res === void 0 ? void 0 : res[4]) === undefined || (res === null || res === void 0 ? void 0 : res[4]) === '' ? 1 : res === null || res === void 0 ? void 0 : res[4]);
+  const check = (a, max) => {
+    return !(isNaN(a) || a < 0 || a > max);
+  };
+  const ok = check(result[0], mode === 'rgba' ? 255 : 360) && check(result[1], mode === 'rgba' ? 255 : 100) && check(result[2], mode === 'rgba' ? 255 : 100) && check(result[3], 1);
+  if (ok) {
+    if (mode === 'rgba') {
+      return {
+        r: result[0],
+        g: result[1],
+        b: result[2],
+        a: result[3]
+      };
+    } else {
+      return {
+        h: result[0],
+        s: result[1],
+        v: result[2],
+        a: result[3]
+      };
+    }
+  } else {
+    return false;
+  }
+};
+export default split;

package/lib/es/colorPicker/variables.scss

@@ -0,0 +1,28 @@
+$radius-colorPicker-topLeft:8px; // 圆角 - 左上
+$radius-colorPicker-topRight:8px; // 圆角 - 右上
+$radius-colorPicker-bottomLeft:0px; // 圆角 - 左下
+$radius-colorPicker-bottomRight:0px; // 圆角 - 右下
+$radius-colorPicker-handle:var(--semi-border-radius-full); // 圆角 - 拖拽把手
+$radius-colorPicker-alphaSliderInner:4px; // 圆角 - 透明度 Slider
+$radius-colorPicker-demoBlock: 4px; // 圆角 - 颜色手动输入区域左侧当前选中颜色色块
+$radius-colorPicker-defaultTrigger:4px; // 默认 trigger 圆角
+
+
+$width-colorPicker_handle-border: 2px; // 把手宽度
+$width-colorPicker-colorPickerInputNumber:58px; // 数组输入器宽度
+$width-colorPicker-formatSelect:80px; // 格式选择下拉 Select 宽度
+$width-colorPicker-defaultTrigger: 24px; // 默认 trigger 大小
+
+$color-colorPicker_handle-border:var(--semi-color-white); // 把手边框颜色
+
+
+$spacing-colorPicker_inputNumberSuffix-horizontal:4px; // 数字输入框后百分比水平距离
+$spacing-colorPicker_inputGroup-marginLeft:4px; //  颜色手动输入区域 左侧距离色块距离
+$spacing-colorPicker_popover-padding:8px; // 弹层模式时整体内边距
+$spacing-colorPicker_inputNumberSuffix-vertical:4px; // 数字输入框后百分比垂直距离
+$spacing-colorPicker_slider-marginTop:6px; // 滑动选择器上边距
+$spacing-colorPicker_dataPart-marginTop:8px; // 颜色手动输入区域 上边距
+
+
+$font-colorPicker_inputNumberSuffix-fontSize:14px; // 颜色手动输入区域百分比字体大小
+

package/lib/es/datePicker/foundation.js

@@ -258,7 +258,7 @@ export default class DatePickerFoundation extends BaseFoundation {
     const {
       value
     } = this._adapter.getStates();
-    const needResetCachedSelectedValue = !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
+    const needResetCachedSelectedValue = isNullOrUndefined(willUpdateDates) || !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
     if (needResetCachedSelectedValue) {
       this.resetCachedSelectedValue(value);
     }

package/lib/es/image/image.css

@@ -90,6 +90,7 @@
   align-items: center;
   padding: 0 24px;
   z-index: 1;
+  pointer-events: none;
 }
 .semi-image-preview-header-title {
   flex: 1;
@@ -102,6 +103,7 @@
   width: 30px;
   height: 30px;
   border-radius: 50%;
+  pointer-events: auto;
 }
 .semi-image-preview-header-close:hover {
   background-color: rgba(0, 0, 0, 0.75);
@@ -166,11 +168,13 @@
 .semi-image-preview-image {
   position: relative;
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .semi-image-preview-image-img {
   position: absolute;
   transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
-  transition: transform 300ms 0s;
   z-index: 0;
   user-select: none;
 }

package/lib/es/image/image.scss

@@ -100,6 +100,7 @@ $module: #{$prefix}-image;
         align-items: center;
         padding: $spacing-image_preview_header-paddingY $spacing-image_preview_header-paddingX;
         z-index: $z-image_preview_header;
+        pointer-events: none;
 
         &-title {
             flex: 1;
@@ -113,6 +114,7 @@ $module: #{$prefix}-image;
             width: $width-image_preview_header_close;
             height: $height-image_preview_header_close;
             border-radius: 50%;
+            pointer-events: auto;
 
             &:hover {
                 background-color: $color-image_header_close-bg;
@@ -192,11 +194,14 @@ $module: #{$prefix}-image;
     &-image {
         position: relative;
         height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
         &-img {
             position: absolute;
             transform: scale3d($transform_scale3d-image_preview_image_img) $transform_rotate-image_preview_image_img;
-            transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
+            // transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
             z-index: 0;
             user-select: none;
         }

package/lib/es/image/previewImageFoundation.d.ts

@@ -9,36 +9,69 @@ export interface DragDirection {
     canDragVertical: boolean;
     canDragHorizontal: boolean;
 }
-export interface ExtremeBounds {
-    left: number;
-    top: number;
+export interface ExtremeTranslate {
+    x: number;
+    y: number;
 }
-export interface ImageOffset {
+export interface Offset {
     x: number;
     y: number;
 }
+export interface Translate {
+    x: number;
+    y: number;
+}
+interface CalcBoundingRectMouseOffset {
+    offset: Offset;
+    width: number;
+    height: number;
+    rotation?: number;
+}
+export interface BoundingRectSize {
+    width: number;
+    height: number;
+}
 export default class PreviewImageFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewImageAdapter<P, S>, P, S> {
     constructor(adapter: PreviewImageAdapter<P, S>);
-    startMouseOffset: {
+    startMouseClientPosition: {
         x: number;
         y: number;
     };
     originImageWidth: any;
     originImageHeight: any;
+    containerWidth: number;
+    containerHeight: number;
+    init(): void;
     _isImageVertical: () => boolean;
-    _getImageBounds: () => DOMRect;
-    _getContainerBounds: () => DOMRect;
-    _getOffset: (e: any) => ImageOffset;
+    _getContainerBoundingRectSize: () => void;
+    _getAdaptationZoom: () => number;
+    _getInitialZoom: () => number;
     setLoading: (loading: boolean) => void;
     handleWindowResize: () => void;
     handleLoad: (e: any) => void;
     handleError: (e: any) => void;
-    handleResizeImage: (notify?: boolean) => void;
     handleRatioChange: () => void;
+    initializeImageZoom: (notify?: boolean) => void;
+    initializeTranslate: () => void;
+    initializeImage: (notify?: boolean) => void;
     handleRightClickImage: (e: any) => boolean;
-    calcCanDragDirection: () => DragDirection;
-    calculatePreviewImage: (newZoom: number, e: any) => void;
-    calcExtremeBounds: () => ExtremeBounds;
-    handleMoveImage: (e: any) => void;
+    calcBoundingRectSize(width?: number, height?: number, rotation?: number): {
+        width: number;
+        height: number;
+    };
+    getCanDragDirection: (width: number, height: number) => DragDirection;
+    changeZoom: (newZoom: number, e?: WheelEvent) => void;
+    getExtremeTranslate: (width: number, height: number) => ExtremeTranslate;
+    getSafeTranslate: (width: number, height: number, translateX: number, translateY: number) => {
+        x: number;
+        y: number;
+    };
+    handleImageMove: (e: MouseEvent) => void;
+    moveImage: (e: MouseEvent) => void;
     handleImageMouseDown: (e: any) => void;
+    calcBoundingRectMouseOffset: (calcBoundingRectMouseOffset: CalcBoundingRectMouseOffset) => {
+        x: number;
+        y: number;
+    };
 }
+export {};