plain-design 1.0.0-beta.4 → 1.0.0-beta.41

package/src/packages/components/ImagePreviewer/image-previewer.utils.tsx

@@ -0,0 +1,135 @@
+import {PartialFields} from "../../utils/type";
+import {createCounter, createHooks} from "plain-design-composition";
+import {notNull} from "../../utils/notNull";
+
+export const ImagePreviewerConstants = {
+  /*画廊高度，默认70px*/
+  DEFAULT_GALLERY_HEIGHT: 70,
+  /*画廊与大图之间的距离，默认24px*/
+  DEFAULT_SEPARATOR_HEIGHT: 0,
+};
+
+export interface iImagePreviewerOptionPartialFields {
+  imageElement?: null | HTMLImageElement,                 // 点击的图片原始dom对象，如果有传这个属性对象的话会有一个显示放大动画
+  galleryHeight: number,                                  // 底部画廊的高度
+  separatorHeight: number,                                // 底部画廊距离图片显示区域的距离
+  autoHeight: boolean,                                    // 自动高度，默认是true。这样设置之后图片会撑满宽度，高度自动；关闭的时候会设置高度100%，图片宽度自动
+  mask: boolean,                                          // 显示背部遮罩
+  button?: boolean | {                                    // 顶部按钮栏控制，button为false则禁用所有按钮；为对象则单独禁用某个按钮
+    zoomIn?: boolean,                                     // 放大按钮
+    zoomOut?: boolean,                                    // 缩小按钮
+    clockwise?: boolean,                                  // 顺时针旋转按钮
+    anticlockwise?: boolean,                              // 逆时针旋转按钮
+    reset?: boolean,                                      // 重置按钮
+    close?: boolean,                                      // 关闭按钮
+  },
+  swipeButton?: boolean                                   // 左右切换按钮控制，swipeButton为false则禁用前后按钮
+  gallery?: boolean,                                      // 底部画廊控制，为false则禁用底部画廊
+  globalKeyboardEvent?: boolean                           // 监听全局的键盘事件，默认不监听全局键盘按键事件，而是等鼠标移入的时候才监听
+  maskColor?: string,                                     // 遮罩颜色
+  disableZoomOnWheel?: boolean,                           // 禁用滚轮缩放
+  /*---------------------------------------以下为不可配置属性-------------------------------------------*/
+  id: string,                                             // option唯一标识
+  oldSourceImageOpacity?: string                          // 原始的img对象的opacity属性值
+}
+
+export interface iImagePreviewerOption extends iImagePreviewerOptionPartialFields {
+  current: number;                                        // 当前显示的元素索引
+  urls: { url: string, thumbUrl: string }[];              // 所有展示的图片，url为大图地址，thumbUrl为底部画廊图片预览地址
+}
+
+export type iImagePreviewerParamOption = string | string[] | iImagePreviewerOption['urls'] | Omit<PartialFields<iImagePreviewerOption, keyof iImagePreviewerOptionPartialFields>, 'urls'> & { urls: string[] | iImagePreviewerOption['urls'] }
+
+export const ImagePreviewerHooks = {
+  /*PreviewerComponent挂载完毕事件*/
+  onImagePreviewerReady: createHooks<(data: { option: iImagePreviewerOption }) => void>()
+};
+
+const nextOptionId = createCounter('image_previewer');
+
+export function createImagePreviewerOption(
+  param: iImagePreviewerParamOption,
+  imageElement?: HTMLImageElement,
+  defaultParam?: Partial<iImagePreviewerOption>
+): iImagePreviewerOption {
+  if (typeof param === "string") {
+    return {
+      id: nextOptionId(),
+      current: 0,
+      imageElement,
+      autoHeight: true,
+      mask: false,
+      urls: [{ url: param, thumbUrl: param }],
+      galleryHeight: ImagePreviewerConstants.DEFAULT_GALLERY_HEIGHT,
+      separatorHeight: ImagePreviewerConstants.DEFAULT_SEPARATOR_HEIGHT,
+      ...defaultParam,
+    };
+  }
+  if (Array.isArray(param)) {
+    return {
+      id: nextOptionId(),
+      current: 0,
+      imageElement,
+      autoHeight: true,
+      mask: false,
+      urls: param.map(p => typeof p === "string" ? { url: p, thumbUrl: p } : p),
+      galleryHeight: ImagePreviewerConstants.DEFAULT_GALLERY_HEIGHT,
+      separatorHeight: ImagePreviewerConstants.DEFAULT_SEPARATOR_HEIGHT,
+      ...defaultParam,
+    };
+  }
+  if (!!imageElement) {
+    param.imageElement = imageElement;
+  }
+  return {
+    autoHeight: true,
+    mask: false,
+    galleryHeight: notNull(param.galleryHeight, ImagePreviewerConstants.DEFAULT_GALLERY_HEIGHT),
+    separatorHeight: notNull(param.separatorHeight, ImagePreviewerConstants.DEFAULT_SEPARATOR_HEIGHT),
+    ...defaultParam,
+    ...param,
+    id: nextOptionId(),
+    urls: param.urls.map(p => typeof p === "string" ? { url: p, thumbUrl: p } : p),
+  };
+}
+
+/**
+ * 获取imageElement在containerElement容器中居中铺满的位置信息
+ * @author  韦胜健
+ * @date    2024/1/10 18:50
+ */
+export const getCenterRect = (
+  {
+    imageElement, containerElement
+  }: {
+    imageElement: HTMLDivElement,
+    containerElement: HTMLDivElement | { containerRatio: number, containerHeight: number, containerWidth: number },
+  }
+) => {
+  const imageRatio = Number((imageElement.offsetWidth / imageElement.offsetHeight).toFixed(2));
+  const { containerRatio, containerHeight, containerWidth } = 'tagName' in containerElement ? (() => {
+    const containerRatio = Number((containerElement.offsetWidth / containerElement.offsetHeight).toFixed(2));
+    return {
+      containerRatio,
+      containerHeight: containerElement.offsetHeight,
+      containerWidth: containerElement.offsetWidth,
+    };
+  })() : containerElement;
+
+
+  if (imageRatio > containerRatio) {
+    /*宽度更宽，固定宽度为屏幕宽度缩放*/
+    const left = 0;
+    const width = containerWidth;
+    const height = Number((imageElement.offsetHeight / imageElement.offsetWidth * width).toFixed(0));
+    const top = Number(((containerHeight - height) / 2).toFixed(0));
+    return { top, left, width, height };
+  } else {
+    /*高度更高，固定高度将宽度缩放*/
+    const top = 0;
+    const height = containerHeight;
+    const width = Number((imageElement.offsetWidth / imageElement.offsetHeight * height).toFixed(0));
+    const left = Number(((containerWidth - width) / 2).toFixed(0));
+    return { top, left, width, height };
+  }
+};

package/src/packages/components/ImagePreviewer/index.tsx

@@ -0,0 +1,5 @@
+import {ImagePreviewer} from "./ImagePreviewer";
+
+export default ImagePreviewer;
+
+export {ImagePreviewer};

package/src/packages/components/ImagePreviewer/previewer-loading.scss

@@ -0,0 +1,52 @@
+.previewer-loading {
+
+  $size: 1em;
+
+  height: $size;
+  width: $size;
+
+  .plain-loading-tag {
+    $centerRadius: (0.5*$size)/1.2;
+    $itemWidth: (0.35*$size)/1.2;
+    $itemHeight: (0.1*$size)/1.2;
+    $width: $centerRadius + $itemWidth * 2;
+    $height: $width;
+
+    width: $width;
+    height: $height;
+    position: relative;
+    display: block;
+
+    .plain-loading-inner {
+      background-color: currentColor;
+      display: inline-block;
+      width: $itemWidth;
+      height: $itemHeight;
+      margin-top: $itemHeight / 2 * -1;
+      margin-left: $centerRadius / 2;
+      top: 50%;
+      left: 50%;
+      position: absolute;
+      transform-origin: ($centerRadius / 2 * -1) ($itemHeight / 2);
+      @for $i from 1 through 12 {
+        &:nth-child(#{$i}) {
+          transform: rotate(($i - 1) * 30deg);
+          animation: plain-loading-tag 1s linear infinite #{-1 + $i / 12}s;
+        }
+      }
+      @keyframes plain-loading-tag {
+        0% {
+          opacity: 1;
+        }
+        @for $i from 1 through 11 {
+          #{$i / 12 * 100}% {
+            opacity: 1 - $i / 12;
+          }
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

package/src/packages/components/Input/index.scss

@@ -41,7 +41,7 @@
     border: none;
     background-color: transparent;
     box-sizing: border-box;
-    line-height: 1.5715;
+    line-height: plv(line-height);
     padding-top: 3px;
     padding-bottom: 3px;
     color: plv(text-2);
@@ -352,7 +352,7 @@
         display: inline-block;
         padding: 3px 12px;
         box-sizing: border-box;
-        line-height: 1.5715;
+        line-height: plv(line-height);
         word-break: break-all;
       }
 

package/src/packages/components/Input/useMultipleInput.tsx

@@ -1,11 +1,12 @@
 import {AutoWidthInput} from "../AutoWidthInput";
 import {iInputCompositionData, inputScrollEnd} from "./input.utils";
 import Icon from "../Icon";
-import {iHTMLElement, useClasses, useModel, useRefs, watch} from "plain-design-composition";
+import {iHTMLElement, useClasses, useModel, useRefs} from "plain-design-composition";
 import {getKey, KEY} from "../KeyboardService";
 import {delay} from "plain-utils/utils/delay";
 import {createEffectiveHandler} from "../../utils/createEffectiveHandler";
 import {createEffects} from "plain-utils/utils/createEffects";
+import {useDragHorizontalScroll} from "../../uses/useDragHorizontalScroll";
 
 /**
  * 渲染多值输入框
@@ -120,78 +121,3 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
 
   return effects.clear;
 });
-
-function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefined) {
-
-  const staticState = {
-    isDragging: false,
-    el: null as null | undefined | HTMLElement,
-    start: {
-      x: 0,
-      left: 0,
-      width: 0,
-    },
-    move: {
-      x: 0
-    }
-  };
-
-  const { effects } = createEffects();
-
-  const handler = {
-    mousedown: (e: MouseEvent) => {
-      staticState.isDragging = false;
-      staticState.start = {
-        x: e.clientX,
-        left: staticState.el!.scrollLeft,
-        width: staticState.el!.scrollWidth,
-      };
-      document.documentElement.addEventListener('mousemove', handler.mousemove, true);
-      document.documentElement.addEventListener('mouseup', handler.mouseup, true);
-    },
-    mousemove: (e: MouseEvent) => {
-      staticState.move.x = e.clientX;
-      const durX = staticState.move.x - staticState.start.x;
-      if (!staticState.isDragging) {
-        if (Math.abs(durX) > 5) {
-          staticState.isDragging = true;
-        }
-      }
-      if (!staticState.isDragging) {
-        return;
-      }
-      staticState.el!.scrollLeft = staticState.start.left - durX;
-    },
-    mouseup: () => {
-      document.documentElement.removeEventListener('mousemove', handler.mousemove, true);
-      document.documentElement.removeEventListener('mouseup', handler.mouseup, true);
-    },
-    onWheel: (e: WheelEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      const el = e.currentTarget as HTMLElement;
-      const delta = e.deltaX + e.deltaY;
-      el.scrollLeft += delta;
-    },
-  };
-
-  effects.push(watch(() => getEl(), el => {
-    if (!!staticState.el) {
-      staticState.el.removeEventListener('mousedown', handler.mousedown);
-      staticState.el.removeEventListener('wheel', handler.onWheel);
-    }
-    staticState.el = el;
-    if (!staticState.el) {return;}
-    staticState.el.addEventListener('mousedown', handler.mousedown);
-    staticState.el.addEventListener('wheel', handler.onWheel);
-  }));
-
-  effects.push(() => {
-    if (!!staticState.el) {
-      staticState.el.removeEventListener('mousedown', handler.mousedown);
-      staticState.el.removeEventListener('wheel', handler.onWheel);
-    }
-  });
-
-  return effects.clear;
-}

package/src/packages/components/Input/useTextareaInput.tsx

@@ -1,7 +1,10 @@
 import {iInputCompositionData} from "./input.utils";
-import {iKeyboardEvent, reactive, useClasses, useStyles} from "plain-design-composition";
+import {fixInputCursor, iKeyboardEvent, reactive, useClasses, useStyles} from "plain-design-composition";
 import {unit} from "plain-utils/string/unit";
 import {createEffects} from "plain-utils/utils/createEffects";
+import {ClientZoom} from "../ClientZoom";
+
+const _Textarea = fixInputCursor('textarea')
 
 export function useTextareaInput(data: iInputCompositionData) {
 
@@ -61,7 +64,7 @@ export function useTextareaInput(data: iInputCompositionData) {
         ))}
         {!model.value && <>&nbsp;</>}
       </span>
-      <textarea
+      <_Textarea
         ref={handler.onRef}
         value={model.value}
         onInput={handler.onInput}
@@ -95,8 +98,10 @@ function useTextareaResize({ hooks, onResize }: iInputCompositionData & { onResi
   const handler = {
     textarea: null as null | HTMLInputElement,
     mousedown: (e: MouseEvent) => {
-      const { offsetX, offsetY, clientY, target: { offsetWidth, offsetHeight } } = e as any;
-      if (!(offsetWidth - offsetX < 12 && offsetHeight - offsetY < 12)) {
+      const { offsetX, offsetY, clientY } = ClientZoom.getClientPosition(e);
+      let { offsetWidth, offsetHeight } = e.target as any;
+      const dragSize = 12
+      if (!(offsetWidth - offsetX < dragSize && offsetHeight - offsetY < dragSize)) {
         return;
       }
       staticState.isDragging = false;
@@ -108,7 +113,7 @@ function useTextareaResize({ hooks, onResize }: iInputCompositionData & { onResi
       document.documentElement.addEventListener('mouseup', handler.mouseup);
     },
     mousemove: (e: MouseEvent) => {
-      const { clientY } = e;
+      const { clientY } = ClientZoom.getClientPosition(e);
       staticState.move = { y: clientY };
       const durY = staticState.move.y - staticState.start.y;
       if (!staticState.isDragging) {

package/src/packages/components/Input/uses/useInputHooks.tsx

@@ -3,18 +3,18 @@ import {iSelectOptionProps} from "../../Select/select.utils";
 
 export function useInputHooks() {
   return {
-    onRenderDefault: createSyncHooks<(content: RenderNode) => void>(),              // 渲染默认插槽
-    onRenderSuffix: createSyncHooks<(content: RenderNode) => void>(),               // 渲染suffix插槽
-    onRefInput: createHooks<(el: HTMLInputElement | null) => void>(),               // input dom对象引用
-    onRefWrapper: createHooks<(el: HTMLElement | null) => void>(),                  // 容器节点dom对象引用
-    onInputKeydown: createHooks<(e: iKeyboardEvent) => void>(),                   // input触发按键事件
-    onInput: createHooks<(val: any) => void>(),                                     // input的输入动作
-    onClasses: createSyncHooks<(val: any[]) => void>(),                             // 计算根节点classes
+    onRenderDefault: createSyncHooks<(content: RenderNode) => void>(true),              // 渲染默认插槽
+    onRenderSuffix: createSyncHooks<(content: RenderNode) => void>(true),               // 渲染suffix插槽
+    onRefInput: createHooks<(el: HTMLInputElement | null) => void>(),                   // input dom对象引用
+    onRefWrapper: createHooks<(el: HTMLElement | null) => void>(),                      // 容器节点dom对象引用
+    onInputKeydown: createHooks<(e: iKeyboardEvent) => void>(),                         // input触发按键事件
+    onInput: createHooks<(val: any) => void>(),                                         // input的输入动作
+    onClasses: createSyncHooks<(val: any[]) => void>(true),                             // 计算根节点classes
     onSuggestion: createHooks<(data: { val: string, optionProps: iSelectOptionProps }) => void>(),// 点击了某个推荐选项
-    onTagChange: createHooks<() => void>(),                                         // 多值输入的时候的变化动作
-    onTriggerOpenSuggestion: createHooks<() => void>(),                             // 触发打开suggestion的动作
-    onTriggerCloseSuggestion: createHooks<() => void>(),                            // 触发打开suggestion的动作
-    onGetSuggestionIsShow: createSyncHooks<(flag: boolean) => void>(),              // suggestion 面板是否已经打开
+    onTagChange: createHooks<() => void>(),                                             // 多值输入的时候的变化动作
+    onTriggerOpenSuggestion: createHooks<() => void>(),                                 // 触发打开suggestion的动作
+    onTriggerCloseSuggestion: createHooks<() => void>(),                                // 触发打开suggestion的动作
+    onGetSuggestionIsShow: createSyncHooks<(flag: boolean) => void>(true),              // suggestion 面板是否已经打开
   };
 }
 

package/src/packages/components/InputNumber/NumberResize.tsx

@@ -2,6 +2,8 @@ import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs}
 import {Icon} from "../Icon";
 import {createEffects} from "plain-utils/utils/createEffects";
 import {addClass} from "plain-utils/dom/addClass";
+import {ClientZoom} from "../ClientZoom";
+import {roundFixed} from "plain-utils/utils/roundFixed";
 
 export const NumberResize = designComponent({
   name: "number-resize",
@@ -9,6 +11,9 @@ export const NumberResize = designComponent({
   props: {
     step: { type: Number, default: 1 },
     value: { type: Number },
+    precision: { type: Number },
+    max: { type: Number },
+    min: { type: Number }
   },
   emits: {
     onChange: (val: number) => true,
@@ -35,6 +40,8 @@ export const NumberResize = designComponent({
 
       const handler = {
         onMousedown: (e: iMouseEvent) => {
+          const { clientY } = ClientZoom.getClientPosition(e);
+
           event.emit.onMouseDown(e);
           const el = refs.el!.cloneNode(true) as HTMLDivElement;
           const { top, left, height, width } = refs.el!.getBoundingClientRect();
@@ -50,7 +57,7 @@ export const NumberResize = designComponent({
           addClass(el, 'number-resize-dragging');
 
           staticState = {
-            startY: e.clientY,
+            startY: clientY,
             startValue: props.value == null ? 0 : props.value,
             el,
             startTop: top,
@@ -71,10 +78,20 @@ export const NumberResize = designComponent({
         },
         onMousemove: (e: MouseEvent) => {
           if (!staticState) {return;}
-          const durY = (e.clientY - staticState.startY);
+          const { clientY } = ClientZoom.getClientPosition(e);
+          const durY = (clientY - staticState.startY);
           const elMoveTop = staticState.startTop + durY;
           staticState.el.style.transform = `translate3d(${staticState.startLeft}px,${elMoveTop}px,0)`;
-          const newValue = Math.ceil(staticState.startValue + (durY * -1) / unit) * props.step;
+          let newValue = Math.ceil(staticState.startValue + (durY * -1) / unit) * props.step;
+          if (props.precision != null) {
+            newValue = roundFixed(newValue, props.precision)!;
+          }
+          if (props.max != null && newValue > props.max) {
+            newValue = props.max;
+          }
+          if (props.min != null && newValue < props.min) {
+            newValue = props.min;
+          }
           event.emit.onChange(newValue);
           // console.log(newValue);
         },

package/src/packages/components/InputNumber/input-number.utils.tsx

@@ -12,13 +12,15 @@ export const InputNumberPropsOption = {
   min: { type: [String, Number] },                              // 最小值
   max: { type: [String, Number] },                              // 最大值
   step: { type: [String, Number], default: 1 },                 // 计数器步长
-  stepStrictly: { type: Boolean },                                    // 是否只能输入 step 的倍数
+  stepStrictly: { type: Boolean },                              // 是否只能输入 step 的倍数
   precision: { type: [Number, String] },                        // 数值精度
   button: { type: [String, Boolean] as PropType<boolean | typeof NumberButtonTypes.TYPE | null>, default: NumberButtonTypes.right },// 按钮模式 false, 'none','button','right'
-  availableUnits: { type: Array as PropType<string[]> },              // 允许输入的数字单位
-  defaultUnit: { type: String },                                      // 默认的数字单位，当没有值的时候点击加减号默认给的单位
-  addIcon: { type: String },                                          // add按钮图标
-  subIcon: { type: String },                                          // sub按钮图标
+  availableUnits: { type: Array as PropType<string[]> },        // 允许输入的数字单位
+  defaultUnit: { type: String },                                // 默认的数字单位，当没有值的时候点击加减号默认给的单位
+  addIcon: { type: String },                                    // add按钮图标
+  subIcon: { type: String },                                    // sub按钮图标
+  requireUnit: { type: Boolean },                               // 输入的值必须带单位，否则视为无效输入(不会触发change，并且失焦之后恢复上一次有效值)
+  isValueEffective: { type: Function as PropType<(val: string | number, unit?: string | null) => boolean> }, // 判断值是否有效，否则视为无效输入
 
   /*---------------------------------------input-------------------------------------------*/
   inputAttrs: { type: Object },                                       // input属性配置对象

package/src/packages/components/InputNumber/number.scss

@@ -47,12 +47,21 @@
       }
     }
 
+    .number-prepend-button, .number-append-button {
+      transform: scale(0.9);
+    }
+
     @include sizeMixin(input, ()) {
       .number-button-container {
-        width: $height,
+        width: $height;
+        height: calc(#{$height} - 2px);
       }
     }
   }
+
+  .input-box {
+    align-self: center;
+  }
 }
 
 @include prefix(number-resize) {

package/src/packages/components/InputNumber/useInputNumber.public.tsx

@@ -41,18 +41,26 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
      */
     getValueInfo: (val: any): iInputNumberValueInfo => {
       if (!props.availableUnits || props.availableUnits.length === 0) {
-        /*不允许带单位*/
+
+        /*---------------------------------------不允许带单位-------------------------------------------*/
+
         if (val == null) return { val: undefined };
         val = String(val).trim();
         if (val === '') return { val: undefined };
         val = Number(val);
         if (isNaN(val)) {
           return { val: NAN };
-        } else {
-          return { val: val };
         }
+        if (!!props.isValueEffective && !props.isValueEffective(val)) {
+          return { val: NAN };
+        }
+
+        return { val: val };
+
       } else {
-        /*允许带单位*/
+
+        /*---------------------------------------允许带单位-------------------------------------------*/
+
         if (val == null) return { val: undefined, unit: props.defaultUnit };
         if (typeof val === "string") {
           val = val.trim();
@@ -69,9 +77,17 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
 
             if (isNaN(num)) {
               return { val: NAN, unit };
-            } else {
-              return { val: num, unit: !!unit ? unit : undefined };
             }
+
+            if (!!props.requireUnit && !unit) {
+              return { val: NAN, unit };
+            }
+
+            if (!!props.isValueEffective && !props.isValueEffective(num, unit)) {
+              return { val: NAN, unit };
+            }
+
+            return { val: num, unit: !!unit ? unit : undefined };
           }
         }
       }
@@ -334,6 +350,9 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
         <NumberResize
           value={effectiveInputValue.value?.val || 0}
           step={numberState.step}
+          precision={numberState.precision}
+          max={numberState.max}
+          min={numberState.min}
           onChange={handler.onResize}
           onMouseDown={handler.onMousedownResize}
         />

package/src/packages/components/Layout/index.tsx

@@ -0,0 +1,31 @@
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import './layout.scss';
+
+export const Layout = designComponent({
+  name: 'layout',
+  props: {
+    vertical: { type: Boolean }
+  },
+  provideRefer: true,
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClassCache(() => [
+      getComponentCls('layout'),
+      {
+        'layout-vertical': props.vertical,
+      }
+    ]);
+
+    return {
+      refer: { props },
+      render: () => (
+        <div className={classes.value}>
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});
+
+export default Layout;