plain-design 1.0.0-beta.12 → 1.0.0-beta.120

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

@@ -1,28 +1,29 @@
 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 {getKey, KEY} from "../KeyboardService";
-import {delay} from "plain-utils/utils/delay";
+import {iHTMLElement, useClasses, useModel, useRefs} from "@peryl/react-compose";
+import {eKeyboardKeys, getKeyNameByKeyboardEvent} from "@peryl/utils/keyboard";
+import {delay} from "@peryl/utils/delay";
 import {createEffectiveHandler} from "../../utils/createEffectiveHandler";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {ClientZoom} from "../..";
+import {createEffects} from "@peryl/utils/createEffects";
+import {useDragHorizontalScroll} from "../../uses/useDragHorizontalScroll";
 
 /**
  * 渲染多值输入框
  * @author  韦胜健
  * @date    2022.5.22 10:06
  */
-export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, refs, editComputed, emit }: iInputCompositionData) => {
+export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, refs, editComputed, emit, styleComputed }: iInputCompositionData) => {
 
-  const text = useModel(() => props.multipleText as any, emit.onUpdateMultipleText);
   const { effects } = createEffects();
 
-  const { refs: innerRefs, onRef: innerOnRef } = useRefs({ container: iHTMLElement });
+  const text = useModel(() => props.multipleText as any, emit.onUpdateMultipleText, undefined, effects);
+
+  const { refs: innerRefs, onRef: innerOnRef } = useRefs({ container: iHTMLElement }, { effects });
 
   const handler = {
     onRef: (input: typeof AutoWidthInput.use.class | null) => hooks.onRefInput.exec(input?.refs.input || null),
-    onMousedownContainer: () => {delay(23).then(() => refs.input!.focus());},
+    onMousedownContainer: () => {delay(23).then(() => refs.input?.focus());},
     onRemoveTag: async (index: number) => {
       if (!editComputed.value.editable) {return;}
       if (!model.value || !model.value.length) {return; }
@@ -59,11 +60,11 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
       hooks.onInput.exec(val);
     },
     onKeydown: async (e: KeyboardEvent) => {
-      switch (getKey(e)) {
-        case KEY.enter:
+      switch (getKeyNameByKeyboardEvent(e)) {
+        case eKeyboardKeys.enter:
           await handler.onAddTag();
           return;
-        case KEY.backspace:
+        case eKeyboardKeys.backspace:
           !(e as any).target.value && model.value && handler.onRemoveTag((model.value as any[]).length - 1);
           return;
       }
@@ -92,7 +93,7 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
     {
       'input-tag-container-wrap': props.tagsWrap,
     }
-  ]);
+  ], effects);
 
   effects.push(hooks.onRenderDefault.use(() => (
     <span className={classes.value} onMouseDown={handler.onMousedownContainer} ref={innerOnRef.container} data-input-el="container">
@@ -103,17 +104,19 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
           {!!editComputed.value.editable && <Icon icon="pi-close" onClick={() => handler.onRemoveTag(index)}/>}
         </span>
       ))}
-      <AutoWidthInput
-        modelValue={text.value}
-        onChange={handler.onChange}
-        placeholder={editComputed.value.placeholder}
-        disabled={!!editComputed.value.disabled}
-        readonly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
-        {...props.nativeAttrs}
-        ref={handler.onRef as any}
-        key="auto-width-input"
-        minWidth="1px"
-      />
+      {styleComputed.value.inputMode !== 'text' && (
+        <AutoWidthInput
+          modelValue={text.value}
+          onChange={handler.onChange}
+          placeholder={!(model.value as any)?.length ? editComputed.value.placeholder : undefined}
+          disabled={!!editComputed.value.disabled}
+          readonly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
+          {...props.nativeAttrs}
+          ref={handler.onRef as any}
+          key="auto-width-input"
+          minWidth="1px"
+        />
+      )}
     </span>
   )));
 
@@ -121,80 +124,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) => {
-      const { clientX } = ClientZoom.getClientPosition(e);
-      staticState.isDragging = false;
-      staticState.start = {
-        x: 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) => {
-      const { clientX } = ClientZoom.getClientPosition(e);
-      staticState.move.x = 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/useSingleInput.tsx

@@ -1,10 +1,10 @@
 import {iInputCompositionData} from "./input.utils";
 import {createEffectiveHandler} from "../../utils/createEffectiveHandler";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {iKeyboardEvent} from "plain-design-composition";
+import {createEffects} from "@peryl/utils/createEffects";
+import {iKeyboardEvent} from "@peryl/react-compose";
 import {FixInput} from "../../utils/FixInput";
 
-export const useSingleInput = createEffectiveHandler(({ props, hooks, model, editComputed }: iInputCompositionData) => {
+export const useSingleInput = createEffectiveHandler(({ props, hooks, model, editComputed, styleComputed }: iInputCompositionData) => {
   const { effects } = createEffects();
 
   const handler = {
@@ -24,18 +24,20 @@ export const useSingleInput = createEffectiveHandler(({ props, hooks, model, edi
   effects.push(hooks.onRenderDefault.use((prev) => <>
     {prev}
     {!props.multiple && !props.textarea && (
-      <FixInput
-        ref={handler.onRef}
-        className="input-box input-fill"
-        type={props.type || "text"}
-        placeholder={editComputed.value.placeholder!}
-        value={model.value}
-        onInput={handler.onInput}
-        disabled={!!editComputed.value.disabled}
-        readOnly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
-        onKeyDown={handler.onKeydown}
-        {...props.nativeAttrs}
-      />
+      styleComputed.value.inputMode === 'text' ?
+        <span className="input-text">{model.value}</span> :
+        <FixInput
+          ref={handler.onRef}
+          className="input-box input-fill"
+          type={props.type || "text"}
+          placeholder={editComputed.value.placeholder!}
+          value={model.value}
+          onInput={handler.onInput}
+          disabled={!!editComputed.value.disabled}
+          readOnly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
+          onKeyDown={handler.onKeydown}
+          {...props.nativeAttrs}
+        />
     )}
   </>));
 

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

@@ -1,24 +1,23 @@
 import {iInputCompositionData, inputScrollEnd} from "./input.utils";
-import {computed, reactive, useRefs} from "plain-design-composition";
+import {createEffectsOfReaction, iKeyboardEvent, reactive, useRefs} from "@peryl/react-compose";
 import {SelectPanel} from "../Select/SelectPanel";
 import {SelectOption} from "../SelectOption";
 import {Scroll} from "../Scroll";
 import {createSelectHover, iSelectOptionProps} from "../Select/select.utils";
 import {decodeSelectRenderNode} from '../Select/decodeSelectRenderNode';
-import {delay} from 'plain-utils/utils/delay';
-import {handleKeyboard} from "../KeyboardService";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {delay} from '@peryl/utils/delay';
+import {handleKeyboard} from "@peryl/utils/keyboard";
 import {createPopupEditor} from "../usePopupEditor";
 
 export function useSuggestionInput({ props, hooks, editComputed, styleComputed, refs, model, parentPopupId }: iInputCompositionData) {
 
   /*记录副作用函数*/
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
 
   const { refs: innerRefs, onRef: innerOnRef } = useRefs({
     /*需要scroll引用，当有scroll的时候，每次关闭都需要滚动回顶部*/
     scroll: Scroll,
-  });
+  }, { effects });
 
   const state = reactive({
     searchText: null as any,          // 搜索关键字
@@ -30,7 +29,7 @@ export function useSuggestionInput({ props, hooks, editComputed, styleComputed,
   let matchOptionPropsList: iSelectOptionProps[] = [];
 
   /*自动补全的数据*/
-  const suggestion = computed((): string[] | undefined => typeof props.suggestion === "function" ? props.suggestion(state.searchText) : props.suggestion!);
+  const suggestion = effectComputed((): string[] | undefined => typeof props.suggestion === "function" ? props.suggestion(state.searchText) : props.suggestion!);
 
   /*管理select panel的hover状态*/
   const hover = createSelectHover({
@@ -72,7 +71,7 @@ export function useSuggestionInput({ props, hooks, editComputed, styleComputed,
 
     },
     onMousedownPanel: () => {delay().then(() => refs.input?.focus());},
-    onInputKeydown: handleKeyboard({
+    onInputKeydown: handleKeyboard<iKeyboardEvent | KeyboardEvent>({
       up: (e) => {
         e.preventDefault();
         if (!state.isShow) {return;}

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

@@ -1,10 +1,10 @@
 import {iInputCompositionData} from "./input.utils";
-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 {fixInputCursor, iKeyboardEvent, reactive, useClasses, useStyles} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
+import {createEffects} from "@peryl/utils/createEffects";
 import {ClientZoom} from "../ClientZoom";
 
-const _Textarea = fixInputCursor('textarea')
+const _Textarea = fixInputCursor('textarea');
 
 export function useTextareaInput(data: iInputCompositionData) {
 
@@ -37,8 +37,8 @@ export function useTextareaInput(data: iInputCompositionData) {
     'input-box input-fill input-textarea-container',
     {
       'input-textarea-has-height': !!state.height || !!props.height || !!props.maxHeight,
-    }
-  ]);
+    },
+  ], effects);
 
   const takeoverStyles = useStyles(style => {
     if (!!props.height || !!state.height) {
@@ -50,30 +50,33 @@ export function useTextareaInput(data: iInputCompositionData) {
     if (!!props.maxHeight) {
       style.maxHeight = unit(props.maxHeight);
     }
-  });
+  }, effects);
 
   effects.push(useTextareaResize({ ...data, onResize: (val) => state.height = val }));
 
   effects.push(hooks.onRenderDefault.use(() => (
     <span className={classes.value}>
-      <span style={takeoverStyles.value}>
-        {(model.value?.split('\n') as string[] | undefined)?.map((item, index) => (
-          <div key={index}>
-            {item}
-          </div>
-        ))}
-        {!model.value && <>&nbsp;</>}
-      </span>
-      <_Textarea
-        ref={handler.onRef}
-        value={model.value}
-        onInput={handler.onInput}
-        onKeyDown={handler.onKeydown}
-        placeholder={editComputed.value.placeholder!}
-        disabled={!!editComputed.value.disabled}
-        readOnly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
-        {...props.nativeAttrs}
-      />
+      {data.styleComputed.value.inputMode === 'text' ?
+        <span className="input-text">{model.value}</span> : <>
+          <span style={takeoverStyles.value} className="input-textarea-shadow">
+            {(model.value?.split('\n') as string[] | undefined)?.map((item, index) => (
+              <div key={index}>
+                {item}
+              </div>
+            ))}
+            {!model.value && <>&nbsp;</>}
+          </span>
+          <_Textarea
+            ref={handler.onRef}
+            value={model.value}
+            onInput={handler.onInput}
+            onKeyDown={handler.onKeydown}
+            placeholder={editComputed.value.placeholder!}
+            disabled={!!editComputed.value.disabled}
+            readOnly={!!editComputed.value.readonly || !!props.customReadonly || !!editComputed.value.loading}
+            {...props.nativeAttrs}
+          />
+        </>}
     </span>
   )));
 
@@ -100,7 +103,7 @@ function useTextareaResize({ hooks, onResize }: iInputCompositionData & { onResi
     mousedown: (e: MouseEvent) => {
       const { offsetX, offsetY, clientY } = ClientZoom.getClientPosition(e);
       let { offsetWidth, offsetHeight } = e.target as any;
-      const dragSize = 12
+      const dragSize = 12;
       if (!(offsetWidth - offsetX < dragSize && offsetHeight - offsetY < dragSize)) {
         return;
       }

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

@@ -1,8 +1,9 @@
-import {reactive, watch} from "plain-design-composition";
-import {doNothing} from "../../../utils/doNothing";
-import {throttle} from "plain-utils/utils/throttle";
+import {onBeforeUnmount, reactive, watch} from "@peryl/react-compose";
+import {doNothing} from "@peryl/utils/doNothing";
+import {throttle} from "@peryl/utils/throttle";
 import {iInputCompositionData} from "../input.utils";
-import {getKey, KEY} from "../../KeyboardService";
+import {eKeyboardKeys, getKeyNameByKeyboardEvent} from "@peryl/utils/keyboard";
+import {createEffects} from "@peryl/utils/createEffects";
 
 /**
  * 自动监听input ref动作
@@ -51,22 +52,25 @@ export function useInputEnterHandler(
   }, { immediate: true });
 
   const handler = {
-    input: null as null | HTMLInputElement,
     onKeydown: (e: KeyboardEvent) => {
       emit.onKeydown(e);
-      switch (getKey(e)) {
-        case KEY.enter:
+      switch (getKeyNameByKeyboardEvent(e)) {
+        case eKeyboardKeys.enter:
           return enterHandler.value(e);
-        case KEY.esc:
+        case eKeyboardKeys.esc:
           return emit.onEsc(e);
       }
     },
   };
 
+  const { effects } = createEffects();
+
   hooks.onRefInput.use(input => {
-    if (!!input) {input.removeEventListener('keydown', handler.onKeydown);}
-    handler.input = input;
-    if (!handler.input) {return;}
-    handler.input.addEventListener('keydown', handler.onKeydown);
+    effects.clear();
+    if (!input) {return;}
+    input.addEventListener('keydown', handler.onKeydown);
+    effects.push(() => {input.removeEventListener('keydown', handler.onKeydown);});
   });
+
+  onBeforeUnmount(() => effects.clear());
 }

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

@@ -1,20 +1,20 @@
-import {createHooks, createSyncHooks, iKeyboardEvent, RenderNode} from 'plain-design-composition';
+import {createHooks, createSyncHooks, iKeyboardEvent, RenderNode} from '@peryl/react-compose';
 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/Input/uses/useInputMaxLength.tsx

@@ -1,5 +1,5 @@
 import {iInputCompositionData, showInputError} from "../input.utils";
-import {computed, watch} from "plain-design-composition";
+import {computed, watch} from "@peryl/react-compose";
 
 /**
  * 渲染最大文本长度提示suffix

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

@@ -1,10 +1,10 @@
 import {iInputCompositionData} from "../input.utils";
-import {computed, iMouseEvent} from "plain-design-composition";
+import {computed, iMouseEvent} from "@peryl/react-compose";
 import Icon from "../../Icon";
 import Loading from "../../Loading";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 
-export function useInputSuffixIcon({ slots, hooks, props, editComputed, model, emit, methods, isEmpty }: iInputCompositionData) {
+export function useInputSuffixIcon({ slots, hooks, props, editComputed, model, emit, methods, isEmpty, styleComputed }: iInputCompositionData) {
 
   const hasSuffixClear = computed(() => !props.textarea && !props.noClear && (!editComputed.value.disabled && !editComputed.value.readonly));
   const hasSuffixIcon = computed(() => !props.textarea && (slots.suffixIconContent.isExist() || !!props.suffixIcon));
@@ -51,13 +51,17 @@ export function useInputSuffixIcon({ slots, hooks, props, editComputed, model, e
     }
   ]);
 
-  const render = () => (hasSuffixIcon.value || hasSuffixClear.value || editComputed.value.loading) && !props.textarea && (
-    <span className="input-suffix-icon-wrapper" onMouseDown={handler.onMousedownSuffix}>
-      {hasSuffixIcon.value && slots.suffixIconContent(<Icon icon={props.suffixIcon} className="input-suffix-icon"/>)}
-      {hasSuffixClear.value && (<Icon icon="pi-close-circle-fill" className="input-suffix-clear"/>)}
-      {editComputed.value.loading && <Loading/>}
-    </span>
-  );
+  const render = () =>
+    (hasSuffixIcon.value || hasSuffixClear.value || editComputed.value.loading) &&
+    styleComputed.value.inputMode !== 'text' &&
+    !props.textarea &&
+    (
+      <span className="input-suffix-icon-wrapper" onMouseDown={handler.onMousedownSuffix}>
+        {hasSuffixIcon.value && slots.suffixIconContent(<Icon icon={props.suffixIcon} className="input-suffix-icon"/>)}
+        {hasSuffixClear.value && (<Icon icon="pi-close-circle-fill" className="input-suffix-clear"/>)}
+        {editComputed.value.loading && <Loading type={props.loadingType}/>}
+      </span>
+    );
 
   return { render };
 }

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, iHTMLDivElement, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, iHTMLDivElement, useClasses} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import './input-group.scss';

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

@@ -1,8 +1,9 @@
-import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs} from "plain-design-composition";
+import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs} from "@peryl/react-compose";
 import {Icon} from "../Icon";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {addClass} from "plain-utils/dom/addClass";
+import {createEffects} from "@peryl/utils/createEffects";
+import {addClass} from "@peryl/utils/addClass";
 import {ClientZoom} from "../ClientZoom";
+import {roundFixed} from "@peryl/utils/roundFixed";
 
 export const NumberResize = designComponent({
   name: "number-resize",
@@ -10,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,
@@ -78,7 +82,16 @@ export const NumberResize = designComponent({
           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/index.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import './number.scss';
 import {Input} from "../Input";
 import {useInputNumberPublic} from "./useInputNumber.public";
@@ -8,7 +8,7 @@ import {useInputNumberSingle} from "./useInputNumber.single";
 import {useInputNumberMultiple} from "./useInputNumber.multiple";
 
 export const InputNumber = designComponent({
-  name: '-number',
+  name: '-input-number',
   inheritPropsType: Input,
   props: InputNumberPropsOption,
   emits: InputNumberEmitsOption,

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

@@ -1,6 +1,6 @@
 import {StyleProps} from "../../uses/useStyle";
 import {EditProps} from "../../uses/useEdit";
-import {ComponentEvent, createHooks, createRenderHook, createSyncHooks, ExtractPropTypes, iMouseEvent, PropType, tSlotsType} from "plain-design-composition";
+import {ComponentEvent, createHooks, createRenderHook, createSyncHooks, ExtractPropTypes, iMouseEvent, PropType, tSlotsType} from "@peryl/react-compose";
 import {NumberButtonTypes} from "./number.utils";
 import {InputPropsOption} from "../Input/input.utils";
 
@@ -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

@@ -30,10 +30,11 @@
   &.number-button-type-right {
     .number-button-container {
       display: flex;
+      color: plv(text-2);
       flex-direction: column;
       align-items: stretch;
       justify-content: center;
-      padding: 0;
+      padding: 0 !important;
       position: relative;
 
       &:after {
@@ -47,17 +48,34 @@
       }
     }
 
+    .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;
+  }
+
+  &.input-mode-text {
+    .number-prepend-button, .number-append-button, .number-button-container {
+      display: none;
+    }
+  }
 }
 
 @include prefix(number-resize) {
   padding-left: 100%;
   position: relative;
+  color: plv(text-2);
+
   & > div {
     position: absolute;
     @include inset;

package/src/packages/components/InputNumber/number.utils.ts

@@ -1,3 +1,3 @@
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 
 export const NumberButtonTypes = createEnum(['button', 'right', 'resize'] as const);