plain-design 1.0.0-beta.30 → 1.0.0-beta.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.30",
+  "version": "1.0.0-beta.31",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

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

@@ -3,6 +3,7 @@ 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",
@@ -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/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/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/pages/index/components/normal/DemoNumber.tsx

@@ -191,7 +191,10 @@ export const demo10 = designPage(() => {
       <p>没有值的时候，点击add或者sub的默认单位为px</p>
       <InputNumber width="200" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" v-model={state.val[12]} availableUnits={['px', 'em', '%']}/>
       <InputNumber width="200" v-model={state.val[12]} button="resize" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" availableUnits={['px', 'em', '%']}/>{state.val[12]}
-      <p>{state.val[12]}</p>
+      <p>必须带单位，否则视输入值无效，注意需要设置默认单位</p>
+      <InputNumber width="200" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" v-model={state.val[12]} availableUnits={['px', 'em', '%']} requireUnit/>
+      <p>手动判断输入的值是否有效，比如以2开头的值就无效</p>
+      <InputNumber width="200" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" v-model={state.val[12]} availableUnits={['px', 'em', '%']} requireUnit isValueEffective={(val) => val == null || String(val).charAt(0) !== '2'}/>
     </DemoRow>
   );
 });