From c75cf51e7d3f989596f10bcf64ddf36f70bdff82 Mon Sep 17 00:00:00 2001
From: liusuY <851209312@qq.com>
Date: Fri, 8 Oct 2021 18:09:49 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dissues/I4COCW?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/input-number/src/input-number.scss | 108 +++++++++++++++++------
 devui/input-number/src/input-number.tsx  |  25 ++++--
 2 files changed, 101 insertions(+), 32 deletions(-)

diff --git a/devui/input-number/src/input-number.scss b/devui/input-number/src/input-number.scss
index ce20f121..287e4fb5 100644
--- a/devui/input-number/src/input-number.scss
+++ b/devui/input-number/src/input-number.scss
@@ -6,9 +6,33 @@
 
 .devui-input-number {
   position: relative;
-  display: block;
-  width: 180px;
+  display: inline-block;
+  width: 80px;
   line-height: 38px;
+  margin-right: 12px;
+
+  &:hover:not(.devui-input-disabled) {
+    .devui-input-box {
+      border-color: var(--devui-form-control-line-hover);
+    }
+
+    .devui-control-buttons:not(.disabled) {
+      display: flex;
+      border-color: var(--devui-form-control-line-hover);
+    }
+  }
+
+  &:focus-within {
+    .devui-control-buttons {
+      display: flex;
+    }
+  }
+
+  .active {
+    border: 1px solid var(--devui-form-control-line-active) !important;
+    display: flex !important;
+  }
+
 
   &.devui-input-disabled {
     .devui-subtract,
@@ -20,8 +44,9 @@
     }
 
     .devui-input-style {
-      background-color: #f5f7fa;
-      color: #c0c4cc;
+      border-color: var(--devui-disabled-line) !important;
+      color: var(--devui-disabled-text) !important;
+      background-color: var(--devui-disabled-bg) !important;
     }
   }
 
@@ -34,7 +59,6 @@
     }
 
     .devui-input-style {
-      width: 70px;
       height: 34px;
       line-height: 34px;
     }
@@ -45,17 +69,10 @@
     .devui-add {
       width: 60px;
     }
-
-    .devui-input-style {
-      width: 90px;
-    }
   }
 
   .devui-input-item {
-    display: flex;
-    display: -webkit-box;
-    width: 200px;
-    line-height: 38px;
+    line-height: 100%;
   }
 
   .devui-input-style::-webkit-outer-spin-button,
@@ -96,24 +113,65 @@
   }
 
   .devui-input-style {
-    flex-grow: 1;
     outline: none;
-    background-color: #ffffff;
-    border: 1px solid #dcdfe6;
-    border-radius: 2px;
-    padding: 5px 10px;
-    line-height: 38px;
-    font-size: 12px;
-    color: #252b3a;
-    width: 80px;
+    background-color: var(--devui-base-bg);
+    border: 1px solid var(--devui-form-control-line);
+    border-radius: var(--devui-border-radius);
+    padding: 4px 8px;
+    line-height: 18px;
+    font-size: var(--devui-font-size);
+    color: var(--devui-text);
+    width: 100%;
     display: block;
     cursor: text;
-    height: 38px;
-    text-align: center;
-    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    height: 28px;
+    transition: border-color 0.3s var(--devui-animation-ease-in-out-smooth);
+  }
+
+  .devui-input-box {
+    box-sizing: border-box;
+    padding: 4px 8px;
+    font-size: var(--devui-font-size);
+    vertical-align: middle;
+    border-radius: var(--devui-border-radius);
+    outline: none;
+    width: 100%;
+    line-height: 20px;
+    height: 28px;
+    border-width: 1px;
+    border-style: solid;
+
+    &:not(.disabled) {
+      background-color: var(--devui-base-bg);
+      border-color: var(--devui-line);
+      color: var(--devui-text);
+    }
   }
 
   .disabled {
     cursor: not-allowed;
   }
+
+  .devui-control-buttons {
+    display: none;
+    position: absolute;
+    right: 0;
+    width: 22px;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-left: 1px solid var(--devui-line);
+    box-sizing: border-box;
+    line-height: 100%;
+    border-radius: 0 var(--devui-border-radius) var(--devui-border-radius) 0;
+
+    &:not(.disabled) {
+      cursor: pointer;
+    }
+
+    & > span {
+      display: flex;
+    }
+  }
 }
diff --git a/devui/input-number/src/input-number.tsx b/devui/input-number/src/input-number.tsx
index 01ec9a86..87c0f832 100644
--- a/devui/input-number/src/input-number.tsx
+++ b/devui/input-number/src/input-number.tsx
@@ -1,6 +1,7 @@
 import { defineComponent, ref, computed } from 'vue';
 import { inputNumberProps, InputNumberProps } from './input-number-types';
 import './input-number.scss';
+import Icon from '../../icon/src/icon';
 
 export default defineComponent({
   name: 'DInputNumber',
@@ -9,6 +10,8 @@ export default defineComponent({
   setup(props: InputNumberProps, ctx) {
     const inputVal = ref(props.modelValue);
 
+    const focusVal = ref('');
+
     // 大小
     const isSize = computed(() => {
       return `devui-input-number-${props.size}`;
@@ -19,11 +22,15 @@ export default defineComponent({
       return props.disabled ? 'devui-input-disabled' : '';
     });
 
+    const focusClass = computed(() => {
+      return focusVal;
+    });
     //新增
     const add = () => {
       if (props.disabled) return;
       if (inputVal.value >= props.max) return;
       inputVal.value += props.step != 0 ? props.step : 1;
+      focusVal.value = 'active';
       ctx.emit('change', inputVal.value);
       ctx.emit('update:modelValue', inputVal.value);
     };
@@ -32,6 +39,7 @@ export default defineComponent({
       if (props.disabled) return;
       if (inputVal.value <= props.min) return;
       inputVal.value -= props.step != 0 ? props.step : 1;
+      focusVal.value = 'active';
       ctx.emit('change', inputVal.value);
       ctx.emit('update:modelValue', inputVal.value);
     };
@@ -41,9 +49,11 @@ export default defineComponent({
       ctx.emit('update:modelValue', val.data);
     };
     const onFocus = ($event: Event) => {
+      focusVal.value = 'active';
       ctx.emit('focus', $event);
     };
     const onBlur = ($event: Event) => {
+      focusVal.value = '';
       ctx.emit('blur', $event);
     };
     const onChange = ($event: Event) => {
@@ -54,6 +64,7 @@ export default defineComponent({
     };
     return {
       inputVal,
+      focusClass,
       isDisabled,
       isSize,
       add,
@@ -67,6 +78,7 @@ export default defineComponent({
   },
   render() {
     const {
+      focusClass,
       placeholder,
       add,
       inputVal,
@@ -82,24 +94,23 @@ export default defineComponent({
     const dInputNum = ['devui-input-number', isDisabled, isSize];
     return (
       <div class={dInputNum}>
+        <div  onBlur={onBlur} tabindex="1" class={['devui-control-buttons', focusClass.value]}>
+          <span  onClick={add}><Icon size="12px" name="chevron-up"  ></Icon></span>
+          <span  onClick={subtract}><Icon size="12px" name="chevron-down" ></Icon></span>
+        </div>
         <div class="devui-input-item">
-          <span class="devui-subtract" onClick={subtract}>
-            -
-          </span>
           <input
             type="number"
             value={inputVal}
-            class="devui-input-style"
             placeholder={placeholder}
+            disabled={isDisabled == 'devui-input-disabled'? true: false}
+            class={['devui-input-style devui-input-box', focusClass.value]}
             onInput={onInput}
             onChange={onChange}
             onFocus={onFocus}
             onBlur={onBlur}
             onKeydown={onKeydown}
           />
-          <span class="devui-add" onClick={add}>
-            +
-          </span>
         </div>
       </div>
     );
-- 
Gitee


From cd1cec428cf4c89e112c66ae2a656d1761081b24 Mon Sep 17 00:00:00 2001
From: liusuY <851209312@qq.com>
Date: Sat, 9 Oct 2021 10:49:57 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/input-number/src/input-number.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/devui/input-number/src/input-number.tsx b/devui/input-number/src/input-number.tsx
index 87c0f832..842f0a19 100644
--- a/devui/input-number/src/input-number.tsx
+++ b/devui/input-number/src/input-number.tsx
@@ -19,12 +19,9 @@ export default defineComponent({
 
     // 判断是否禁用
     const isDisabled = computed(() => {
-      return props.disabled ? 'devui-input-disabled' : '';
+      return props.disabled;
     });
 
-    const focusClass = computed(() => {
-      return focusVal;
-    });
     //新增
     const add = () => {
       if (props.disabled) return;
@@ -64,7 +61,7 @@ export default defineComponent({
     };
     return {
       inputVal,
-      focusClass,
+      focusVal,
       isDisabled,
       isSize,
       add,
@@ -78,7 +75,7 @@ export default defineComponent({
   },
   render() {
     const {
-      focusClass,
+      focusVal,
       placeholder,
       add,
       inputVal,
@@ -91,10 +88,10 @@ export default defineComponent({
       onBlur,
       onFocus,
     } = this;
-    const dInputNum = ['devui-input-number', isDisabled, isSize];
+    const dInputNum = ['devui-input-number', isDisabled ? 'devui-input-disabled' : '', isSize];
     return (
       <div class={dInputNum}>
-        <div  onBlur={onBlur} tabindex="1" class={['devui-control-buttons', focusClass.value]}>
+        <div  onBlur={onBlur} tabindex="1" class={['devui-control-buttons', focusVal.value]}>
           <span  onClick={add}><Icon size="12px" name="chevron-up"  ></Icon></span>
           <span  onClick={subtract}><Icon size="12px" name="chevron-down" ></Icon></span>
         </div>
@@ -103,8 +100,8 @@ export default defineComponent({
             type="number"
             value={inputVal}
             placeholder={placeholder}
-            disabled={isDisabled == 'devui-input-disabled'? true: false}
-            class={['devui-input-style devui-input-box', focusClass.value]}
+            disabled={isDisabled}
+            class={['devui-input-style devui-input-box', focusVal.value]}
             onInput={onInput}
             onChange={onChange}
             onFocus={onFocus}
-- 
Gitee