feat(comp:input-number): replace old control (#970)

IDuxFE · Jul 3, 2022 · 8138867 · 8138867
1 parent 05f22f3
commit 8138867
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 62 deletions.
diff --git a/packages/components/input-number/__tests__/__snapshots__/inputNumber.spec.ts.snap b/packages/components/input-number/__tests__/__snapshots__/inputNumber.spec.ts.snap
@@ -1,3 +1,6 @@
 // Vitest Snapshot v1
 
-exports[`InputNumber > render work 1`] = `"<span class=\\"ix-input ix-input-md ix-input-with-addon-after ix-input-with-addon-before ix-input-number\\"><span class=\\"ix-input-addon\\"><span class=\\"ix-input-number-decrease\\" role=\\"button\\"><i class=\\"ix-icon ix-icon-minus\\" role=\\"img\\" aria-label=\\"minus\\"></i></span></span><input class=\\"ix-input-inner\\" type=\\"text\\" autocomplete=\\"off\\" aria-valuemin=\\"-Infinity\\" aria-valuemax=\\"Infinity\\"><span class=\\"ix-input-addon\\"><span class=\\"ix-input-number-increase\\" role=\\"button\\"><i class=\\"ix-icon ix-icon-plus\\" role=\\"img\\" aria-label=\\"plus\\"></i></span></span></span>"`;
+exports[`InputNumber > render work 1`] = `
+"<span class=\\"ix-input ix-input-md ix-input-with-prefix ix-input-with-suffix ix-input-number\\"><span class=\\"ix-input-prefix\\"><span class=\\"ix-input-number-increase\\" role=\\"button\\"><i class=\\"ix-icon ix-icon-up\\" role=\\"img\\" aria-label=\\"up\\"></i></span></span><input class=\\"ix-input-inner\\" type=\\"text\\" autocomplete=\\"off\\" aria-valuemin=\\"-Infinity\\" aria-valuemax=\\"Infinity\\"><span class=\\"ix-input-suffix\\"><span class=\\"ix-input-number-decrease\\" role=\\"button\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" aria-label=\\"down\\"></i></span></span>
+<!----></span>"
+`;
diff --git a/packages/components/input-number/demo/Basic.vue b/packages/components/input-number/demo/Basic.vue
@@ -1,12 +1,27 @@
 <template>
-  <IxInputNumber
-    v-model:value="value"
-    :max="10"
-    :min="1"
-    @change="handleChange"
-    @blur="onBlur"
-    @focus="onFocus"
-  ></IxInputNumber>
+  <IxSpace vertical>
+    <IxInputNumber
+      v-model:value="value"
+      :max="10"
+      :min="1"
+      @change="handleChange"
+      @blur="onBlur"
+      @focus="onFocus"
+    ></IxInputNumber>
+
+    <IxInputNumber
+      v-model:value="value"
+      style="width: 200px"
+      :max="10"
+      :min="1"
+      @change="handleChange"
+      @blur="onBlur"
+      @focus="onFocus"
+    >
+      <template #addonBefore>倒计时</template>
+      <template #addonAfter>天</template>
+    </IxInputNumber>
+  </IxSpace>
 </template>
 
 <script setup lang="ts">

diff --git a/packages/components/input-number/src/InputNumber.tsx b/packages/components/input-number/src/InputNumber.tsx
@@ -20,14 +20,16 @@ import { useInputNumber } from './useInputNumber'
 export default defineComponent({
   name: 'IxInputNumber',
   props: inputNumberProps,
-  setup(props, { expose }) {
+  setup(props, { expose, slots }) {
     const common = useGlobalConfig('common')
     const config = useGlobalConfig('inputNumber')
     const {
       displayValue,
       nowValue,
       isIllegal,
       isDisabled,
+      isDisabledDec,
+      isDisabledInc,
       isFocused,
       handleInput,
       handleFocus,
@@ -55,6 +57,46 @@ export default defineComponent({
       elementRef.value = inputRef.value!.getInputElement()
     })
 
+    const handleFocusAtClick = () => {
+      if (!isDisabled.value) {
+        focus()
+      }
+    }
+
+    const handleIncrease = () => {
+      handleInc()
+      handleFocusAtClick()
+    }
+
+    const handleDecrease = () => {
+      handleDec()
+      handleFocusAtClick()
+    }
+
+    const vSlots = computed(() => {
+      return {
+        ...slots,
+        prefix: () => (
+          <span
+            class={['ix-input-number-increase', isDisabledInc.value ? 'ix-input-number-increase--disabled' : '']}
+            role="button"
+            onClick={handleIncrease}
+          >
+            <IxIcon name="up" />
+          </span>
+        ),
+        suffix: () => (
+          <span
+            class={['ix-input-number-decrease', isDisabledDec.value ? 'ix-input-number-decrease--disabled' : '']}
+            role="button"
+            onClick={handleDecrease}
+          >
+            <IxIcon name="down" />
+          </span>
+        ),
+      }
+    })
+
     return () => {
       return (
         <ɵInput
@@ -73,18 +115,7 @@ export default defineComponent({
           value={displayValue.value}
           onInput={handleInput}
           onKeydown={handleKeyDown}
-          v-slots={{
-            addonBefore: () => (
-              <span class="ix-input-number-decrease" role="button" onClick={handleDec}>
-                <IxIcon name="minus" />
-              </span>
-            ),
-            addonAfter: () => (
-              <span class="ix-input-number-increase" role="button" onClick={handleInc}>
-                <IxIcon name="plus" />
-              </span>
-            ),
-          }}
+          v-slots={vSlots.value}
         />
       )
     }

diff --git a/packages/components/input-number/src/useInputNumber.ts b/packages/components/input-number/src/useInputNumber.ts
@@ -20,6 +20,8 @@ export interface InputNumberBindings {
   isDisabled: ComputedRef<boolean>
   isFocused: Ref<boolean>
   nowValue: ComputedRef<number | undefined>
+  isDisabledDec: Ref<boolean>
+  isDisabledInc: Ref<boolean>
 
   handleKeyDown: (evt: KeyboardEvent) => void
   handleDec: () => void
@@ -37,6 +39,8 @@ export function useInputNumber(props: InputNumberProps, config: InputNumberConfi
   const nowValue = computed(() => accessor.valueRef.value ?? undefined)
   const isKeyboard = computed(() => props.keyboard ?? config.keyboard)
   const isDisabled = computed(() => accessor?.disabled.value)
+  const isDisabledDec = computed(() => props.readonly || (!!nowValue.value && nowValue.value <= props.min))
+  const isDisabledInc = computed(() => props.readonly || (!!nowValue.value && nowValue.value >= props.max))
 
   const precision = computed(() => {
     const stepPrecision = getPrecision(props.step)
@@ -195,6 +199,8 @@ export function useInputNumber(props: InputNumberProps, config: InputNumberConfi
     displayValue,
     isIllegal,
     isDisabled,
+    isDisabledDec,
+    isDisabledInc,
     isFocused,
     nowValue,
     handleKeyDown,

diff --git a/packages/components/input-number/style/index.less b/packages/components/input-number/style/index.less
@@ -1,48 +1,11 @@
 @import '../../style/mixins/reset.less';
 
 .@{input-number-prefix} {
-
-  &-decrease:hover,
-  &-increase:hover {
+  &-decrease:hover:not(&-decrease--disabled),
+  &-increase:hover:not(&-increase--disabled) {
     color: @input-number-button-hover-color;
   }
 
-  & .@{input-prefix}-addon {
-    padding: 0 !important;
-    background-color: @input-number-button-background-color;
-  }
-
-  & .@{input-prefix}-inner {
-    text-align: center;
-  }
-
-  &.@{input-prefix}-sm {
-    width: @input-number-width-sm;
-
-    .@{input-number-prefix}-decrease,
-    .@{input-number-prefix}-increase {
-      width: @input-number-height-sm;
-    }
-  }
-
-  &.@{input-prefix}-md {
-    width: @input-number-width-md;
-
-    .@{input-number-prefix}-decrease,
-    .@{input-number-prefix}-increase {
-      width: @input-number-height-md;
-    }
-  }
-
-  &.@{input-prefix}-lg {
-    width: @input-number-width-lg;
-
-    .@{input-number-prefix}-decrease,
-    .@{input-number-prefix}-increase {
-      width: @input-number-height-lg;
-    }
-  }
-
   &.@{input-prefix}-disabled {
     .@{input-prefix}-addon {
       background-color: @input-number-disabled-background-color;
@@ -62,9 +25,44 @@
 
   &-decrease,
   &-increase {
-    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    height: 50%;
+    width: 24px;
+    user-select: none;
+    background-color: transparent;
+    &--disabled {
+      cursor: not-allowed;
+      color: @input-number-disabled-color;
+    }
   }
+
+  &-increase {
+    top: 1px;
+  }
+
+  &-decrease {
+    top: 50%;
+    bottom: 1px;
+  }
+
+  .@{idux-prefix}-input-inner {
+    padding-right: 18px !important;
+  }
+
+  .@{idux-prefix}-input-suffix {
+    margin-left: 0;
+  }
+
+  .@{idux-prefix}-input-wrapper{
+    .@{idux-prefix}-input-inner {
+      padding-right: 12px !important;
+      min-width: 24px;
+    }
+  }
+
 }