plain-design 1.0.0-beta.161 → 1.0.0-beta.163

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

@@ -1,93 +1,94 @@
-import {computed, designComponent, PropType, useModel} from "@peryl/react-compose";
-import {InputGroup} from "../InputGroup";
-import {InputNumber} from "../InputNumber";
-import {Input} from "../Input";
-import {PlainObject} from "@peryl/utils/event";
-
-export const NumberRange = designComponent({
-  name: 'number-range',
-  props: {
-    start: { type: [String, Number] },
-    end: { type: [String, Number] },
-    startAttrs: { type: Object as PropType<PlainObject> },
-    endAttrs: { type: Object as PropType<PlainObject> },
-    noGroupWrapper: { type: Boolean },
-  },
-  emits: {
-    onUpdateStart: (val?: string | number) => true,
-    onUpdateEnd: (val?: string | number) => true,
-    onBlur: () => true,
-    onEnter: () => true,
-    onClear: () => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const startModel = useModel(() => props.start, emit.onUpdateStart);
-    const endModel = useModel(() => props.end, emit.onUpdateEnd);
-
-    const placeValue = computed(() => {
-      let start = startModel.value == null ? '' : String(startModel.value).trim();
-      let end = endModel.value == null ? '' : String(endModel.value).trim();
-      return start + end;
-    });
-
-    const checkRange = () => {
-      let start = startModel.value;
-      let end = endModel.value;
-      let startNum = Number(start);
-      let endNum = Number(end);
-      if (start == null || end == null || isNaN(startNum) || isNaN(endNum)) {
-        return;
-      }
-      if (startNum > endNum) {
-        [startNum, endNum] = [endNum, startNum];
-        startModel.value = startNum;
-        endModel.value = endNum;
-      }
-    };
-
-    const handler = {
-      onBlur: (): void => {
-        checkRange();
-        emit.onBlur();
-      },
-      onEnter: () => {
-        checkRange();
-        emit.onEnter();
-      },
-      onClear: () => {
-        startModel.value = undefined;
-        endModel.value = undefined;
-        emit.onClear();
-      },
-    };
-
-    return () => {
-      const content = (
-        <Input
-          suffixIcon="pi-original-size"
-          placeValue={placeValue.value}
-          clearHandler={handler.onClear}
-        >
-          <InputNumber v-model={startModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={handler.onEnter} {...{
-            ...props.startAttrs || {},
-            inputAttrs: {
-              ...props.startAttrs?.inputAttrs,
-              bare: true,
-            },
-          }}/>
-          <InputNumber v-model={endModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={handler.onEnter} {...{
-            ...props.endAttrs || {},
-            inputAttrs: {
-              ...props.endAttrs?.inputAttrs,
-              bare: true,
-            },
-          }}/>
-        </Input>
-      );
-      return (props.noGroupWrapper ? content : (<InputGroup>{content}</InputGroup>));
-    };
-  },
-});
-
-export default NumberRange;
+import {computed, designComponent, PropType, useModel} from "@peryl/react-compose";
+import {InputGroup} from "../InputGroup";
+import {InputNumber} from "../InputNumber";
+import {Input} from "../Input";
+import {PlainObject} from "@peryl/utils/event";
+
+export const NumberRange = designComponent({
+  name: 'number-range',
+  props: {
+    start: { type: [String, Number] },
+    end: { type: [String, Number] },
+    startAttrs: { type: Object as PropType<PlainObject> },
+    endAttrs: { type: Object as PropType<PlainObject> },
+    noGroupWrapper: { type: Boolean },
+  },
+  emits: {
+    onUpdateStart: (val?: string | number) => true,
+    onUpdateEnd: (val?: string | number) => true,
+    onBlur: () => true,
+    onClear: () => true,
+    onEnterStart: () => true,
+    onEnterEnd: () => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const startModel = useModel(() => props.start, emit.onUpdateStart);
+    const endModel = useModel(() => props.end, emit.onUpdateEnd);
+
+    const placeValue = computed(() => {
+      let start = startModel.value == null ? '' : String(startModel.value).trim();
+      let end = endModel.value == null ? '' : String(endModel.value).trim();
+      return start + end;
+    });
+
+    const checkRange = () => {
+      let start = startModel.value;
+      let end = endModel.value;
+      let startNum = Number(start);
+      let endNum = Number(end);
+      if (start == null || end == null || isNaN(startNum) || isNaN(endNum)) {
+        return;
+      }
+      if (startNum > endNum) {
+        [startNum, endNum] = [endNum, startNum];
+        startModel.value = startNum;
+        endModel.value = endNum;
+      }
+    };
+
+    const handler = {
+      onBlur: (): void => {
+        checkRange();
+        emit.onBlur();
+      },
+      onEnter: (type: 'start' | 'end') => {
+        checkRange();
+        type === "start" ? emit.onEnterStart() : emit.onEnterEnd();
+      },
+      onClear: () => {
+        startModel.value = undefined;
+        endModel.value = undefined;
+        emit.onClear();
+      },
+    };
+
+    return () => {
+      const content = (
+        <Input
+          suffixIcon="pi-original-size"
+          placeValue={placeValue.value}
+          clearHandler={handler.onClear}
+        >
+          <InputNumber v-model={startModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={() => handler.onEnter('start')} {...{
+            ...props.startAttrs || {},
+            inputAttrs: {
+              ...props.startAttrs?.inputAttrs,
+              bare: true,
+            },
+          }}/>
+          <InputNumber v-model={endModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={() => handler.onEnter('end')} {...{
+            ...props.endAttrs || {},
+            inputAttrs: {
+              ...props.endAttrs?.inputAttrs,
+              bare: true,
+            },
+          }}/>
+        </Input>
+      );
+      return (props.noGroupWrapper ? content : (<InputGroup>{content}</InputGroup>));
+    };
+  },
+});
+
+export default NumberRange;