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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "plain-design",
3
- "version": "1.0.0-beta.30",
3
+ "version": "1.0.0-beta.31",
4
4
  "description": "",
5
5
  "main": "dist/plain-design.min.js",
6
6
  "module": "dist/plain-design.commonjs.min.js",
@@ -3,6 +3,7 @@ import {Icon} from "../Icon";
3
3
  import {createEffects} from "plain-utils/utils/createEffects";
4
4
  import {addClass} from "plain-utils/dom/addClass";
5
5
  import {ClientZoom} from "../ClientZoom";
6
+ import {roundFixed} from "plain-utils/utils/roundFixed";
6
7
 
7
8
  export const NumberResize = designComponent({
8
9
  name: "number-resize",
@@ -10,6 +11,9 @@ export const NumberResize = designComponent({
10
11
  props: {
11
12
  step: { type: Number, default: 1 },
12
13
  value: { type: Number },
14
+ precision: { type: Number },
15
+ max: { type: Number },
16
+ min: { type: Number }
13
17
  },
14
18
  emits: {
15
19
  onChange: (val: number) => true,
@@ -78,7 +82,16 @@ export const NumberResize = designComponent({
78
82
  const durY = (clientY - staticState.startY);
79
83
  const elMoveTop = staticState.startTop + durY;
80
84
  staticState.el.style.transform = `translate3d(${staticState.startLeft}px,${elMoveTop}px,0)`;
81
- const newValue = Math.ceil(staticState.startValue + (durY * -1) / unit) * props.step;
85
+ let newValue = Math.ceil(staticState.startValue + (durY * -1) / unit) * props.step;
86
+ if (props.precision != null) {
87
+ newValue = roundFixed(newValue, props.precision)!;
88
+ }
89
+ if (props.max != null && newValue > props.max) {
90
+ newValue = props.max;
91
+ }
92
+ if (props.min != null && newValue < props.min) {
93
+ newValue = props.min;
94
+ }
82
95
  event.emit.onChange(newValue);
83
96
  // console.log(newValue);
84
97
  },
@@ -12,13 +12,15 @@ export const InputNumberPropsOption = {
12
12
  min: { type: [String, Number] }, // 最小值
13
13
  max: { type: [String, Number] }, // 最大值
14
14
  step: { type: [String, Number], default: 1 }, // 计数器步长
15
- stepStrictly: { type: Boolean }, // 是否只能输入 step 的倍数
15
+ stepStrictly: { type: Boolean }, // 是否只能输入 step 的倍数
16
16
  precision: { type: [Number, String] }, // 数值精度
17
17
  button: { type: [String, Boolean] as PropType<boolean | typeof NumberButtonTypes.TYPE | null>, default: NumberButtonTypes.right },// 按钮模式 false, 'none','button','right'
18
- availableUnits: { type: Array as PropType<string[]> }, // 允许输入的数字单位
19
- defaultUnit: { type: String }, // 默认的数字单位,当没有值的时候点击加减号默认给的单位
20
- addIcon: { type: String }, // add按钮图标
21
- subIcon: { type: String }, // sub按钮图标
18
+ availableUnits: { type: Array as PropType<string[]> }, // 允许输入的数字单位
19
+ defaultUnit: { type: String }, // 默认的数字单位,当没有值的时候点击加减号默认给的单位
20
+ addIcon: { type: String }, // add按钮图标
21
+ subIcon: { type: String }, // sub按钮图标
22
+ requireUnit: { type: Boolean }, // 输入的值必须带单位,否则视为无效输入(不会触发change,并且失焦之后恢复上一次有效值)
23
+ isValueEffective: { type: Function as PropType<(val: string | number, unit?: string | null) => boolean> }, // 判断值是否有效,否则视为无效输入
22
24
 
23
25
  /*---------------------------------------input-------------------------------------------*/
24
26
  inputAttrs: { type: Object }, // input属性配置对象
@@ -41,18 +41,26 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
41
41
  */
42
42
  getValueInfo: (val: any): iInputNumberValueInfo => {
43
43
  if (!props.availableUnits || props.availableUnits.length === 0) {
44
- /*不允许带单位*/
44
+
45
+ /*---------------------------------------不允许带单位-------------------------------------------*/
46
+
45
47
  if (val == null) return { val: undefined };
46
48
  val = String(val).trim();
47
49
  if (val === '') return { val: undefined };
48
50
  val = Number(val);
49
51
  if (isNaN(val)) {
50
52
  return { val: NAN };
51
- } else {
52
- return { val: val };
53
53
  }
54
+ if (!!props.isValueEffective && !props.isValueEffective(val)) {
55
+ return { val: NAN };
56
+ }
57
+
58
+ return { val: val };
59
+
54
60
  } else {
55
- /*允许带单位*/
61
+
62
+ /*---------------------------------------允许带单位-------------------------------------------*/
63
+
56
64
  if (val == null) return { val: undefined, unit: props.defaultUnit };
57
65
  if (typeof val === "string") {
58
66
  val = val.trim();
@@ -69,9 +77,17 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
69
77
 
70
78
  if (isNaN(num)) {
71
79
  return { val: NAN, unit };
72
- } else {
73
- return { val: num, unit: !!unit ? unit : undefined };
74
80
  }
81
+
82
+ if (!!props.requireUnit && !unit) {
83
+ return { val: NAN, unit };
84
+ }
85
+
86
+ if (!!props.isValueEffective && !props.isValueEffective(num, unit)) {
87
+ return { val: NAN, unit };
88
+ }
89
+
90
+ return { val: num, unit: !!unit ? unit : undefined };
75
91
  }
76
92
  }
77
93
  }
@@ -334,6 +350,9 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
334
350
  <NumberResize
335
351
  value={effectiveInputValue.value?.val || 0}
336
352
  step={numberState.step}
353
+ precision={numberState.precision}
354
+ max={numberState.max}
355
+ min={numberState.min}
337
356
  onChange={handler.onResize}
338
357
  onMouseDown={handler.onMousedownResize}
339
358
  />
@@ -191,7 +191,10 @@ export const demo10 = designPage(() => {
191
191
  <p>没有值的时候,点击add或者sub的默认单位为px</p>
192
192
  <InputNumber width="200" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" v-model={state.val[12]} availableUnits={['px', 'em', '%']}/>
193
193
  <InputNumber width="200" v-model={state.val[12]} button="resize" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" availableUnits={['px', 'em', '%']}/>{state.val[12]}
194
- <p>{state.val[12]}</p>
194
+ <p>必须带单位,否则视输入值无效,注意需要设置默认单位</p>
195
+ <InputNumber width="200" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" v-model={state.val[12]} availableUnits={['px', 'em', '%']} requireUnit/>
196
+ <p>手动判断输入的值是否有效,比如以2开头的值就无效</p>
197
+ <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'}/>
195
198
  </DemoRow>
196
199
  );
197
200
  });