fix(ui/input): fix behaviour of the input type

affects: @varlet/ui
varletjs · Oct 27, 2021 · 5643f3c · 5643f3c
1 parent 536d7b1
commit 5643f3c
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 77 deletions.
diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
@@ -98,7 +98,7 @@ import VarFormDetails from '../form-details'
 import VarIcon from '../icon'
 import { defineComponent, getCurrentInstance, ref, computed, nextTick } from 'vue'
 import { props } from './props'
-import { isEmpty, isNumber, toNumber } from '../utils/shared'
+import { isEmpty } from '../utils/shared'
 import { useValidation } from '../utils/components'
 import { useForm } from '../form/provide'
 import type { Ref, ComputedRef } from 'vue'
@@ -116,20 +116,6 @@ export default defineComponent({
     const id: Ref<string> = ref(`var-input-${getCurrentInstance()!.uid}`)
     const el: Ref<HTMLInputElement | null> = ref(null)
     const isFocus: Ref<boolean> = ref(false)
-    const isNumberValue: ComputedRef<boolean> = computed(() => isNumber(props.modelValue))
-    const type: ComputedRef<'number' | 'text' | 'password'> = computed(() => {
-      const { type } = props
-
-      if (type === 'password') {
-        return type
-      }
-
-      if (isNumberValue.value) {
-        return 'number'
-      }
-
-      return 'text'
-    })
     const maxlengthText: ComputedRef<string> = computed(() => {
       const { maxlength, modelValue } = props
 
@@ -170,8 +156,6 @@ export default defineComponent({
       }
     }
 
-    const normalizeValue = (value: string) => (isNumberValue.value ? toNumber(value) : value)
-
     const handleFocus = (e: FocusEvent) => {
       isFocus.value = true
 
@@ -188,17 +172,16 @@ export default defineComponent({
 
     const handleInput = (e: Event) => {
       const { value } = e.target as HTMLInputElement
-      const normalizedValue = normalizeValue(value)
 
-      props['onUpdate:modelValue']?.(normalizedValue)
-      props.onInput?.(normalizedValue, e)
+      props['onUpdate:modelValue']?.(value)
+      props.onInput?.(value, e)
       validateWithTrigger('onInput')
     }
 
     const handleChange = (e: Event) => {
       const { value } = e.target as HTMLInputElement
 
-      props.onChange?.(normalizeValue(value), e)
+      props.onChange?.(value, e)
       validateWithTrigger('onChange')
     }
 
@@ -209,9 +192,8 @@ export default defineComponent({
         return
       }
 
-      const value = isNumberValue.value ? 0 : ''
-      props['onUpdate:modelValue']?.(value)
-      onClear?.(value)
+      props['onUpdate:modelValue']?.('')
+      onClear?.('')
 
       validateWithTrigger('onClear')
     }
@@ -230,7 +212,7 @@ export default defineComponent({
 
     // expose
     const reset = () => {
-      props['onUpdate:modelValue']?.(isNumberValue.value ? 0 : '')
+      props['onUpdate:modelValue']?.('')
       resetValidation()
     }
 
@@ -257,7 +239,6 @@ export default defineComponent({
 
     return {
       el,
-      type,
       id,
       isFocus,
       errorMessage,

diff --git a/packages/varlet-ui/src/input/__tests__/index.spec.js b/packages/varlet-ui/src/input/__tests__/index.spec.js
@@ -217,22 +217,3 @@ test('test input validation', async () => {
 
   wrapper.unmount()
 })
-
-test('test input number value', async () => {
-  const onUpdateModelValue = jest.fn((value) => wrapper.setProps({ modelValue: value }))
-
-  const wrapper = mount(VarInput, {
-    props: {
-      modelValue: 0,
-      'onUpdate:modelValue': onUpdateModelValue,
-    },
-  })
-
-  wrapper.find('.var-input__input').setValue('1')
-  await wrapper.find('.var-input__input').trigger('input')
-
-  expect(onUpdateModelValue).lastCalledWith(1)
-  expect(wrapper.props('modelValue')).toBe(1)
-
-  wrapper.unmount()
-})
diff --git a/packages/varlet-ui/src/input/docs/en-US.md b/packages/varlet-ui/src/input/docs/en-US.md
@@ -11,8 +11,7 @@ createApp().use(Input)
 
 ### Basic Usage
 
-The component automatically analyzes whether the value passed in is a string or a number,
-The same type is returned.
+The behavior of the input box is consistent with the basic content, and the user can always get a string that conforms to the `type rule when inputting
 
 ```js
 import { ref } from 'vue'
@@ -111,9 +110,9 @@ Other values are converted to text as a user prompt.
 
 | Prop | Description | Type | Default | 
 | --- | --- | --- | --- | 
-| `v-model` | The value of the binding | _string \| number_ | `-` |
+| `v-model` | The value of the binding | _string_ | `-` |
 | `placeholder` | placeholder | _string_ | `-` |
-| `type` | Input type, The optional value is `text` `password` | _string_ | `text` |
+| `type` | Input type, The optional value is `text` `password` `number` | _string_ | `text` |
 | `maxlength` | Maxlength | _string \| number_ | `-` |
 | `textarea` | Is it a textarea | _boolean_ | `false` |  
 | `rows` | Number of lines to display in the textarea | _string \| number_ | `8` |  
@@ -127,7 +126,7 @@ Other values are converted to text as a user prompt.
 | `clearable` | Whether the clearable | _boolean_ | `false` |
 | `resize` | Whether textarea can be dragged to resize | _boolean_ | `false` |
 | `validate-trigger` | Timing to trigger validation, The optional value is `onFocus` `onBlur` `onChange` `onClick` `onClear` `onInput` | _ValidateTriggers[]_ | `['onInput', 'onClear']` |
-| `rules` | The validation rules, Returns `true` to indicate that the validation passed,The remaining values are converted to text as user prompts | _Array<(v: string \| number) => any>_ | `-` |
+| `rules` | The validation rules, Returns `true` to indicate that the validation passed,The remaining values are converted to text as user prompts | _Array<(v: string) => any>_ | `-` |
 
 ### Methods
 
@@ -137,7 +136,7 @@ Other values are converted to text as a user prompt.
 | `blur` | Blur | `-` | `-` |
 | `validate` | Trigger validate | `-` | `valid: Promise<boolean>` |
 | `resetValidation` | Clearing validate messages | `-` | `-` |
-| `reset` | Clear the value of the binding(The string type is set to `''`,The number type is set to `0`) and validate messages | `-` | `-` |
+| `reset` | Clear the value of the binding and validate messages | `-` | `-` |
 
 ### Events
 
@@ -146,9 +145,9 @@ Other values are converted to text as a user prompt.
 | `focus` | Trigger while focusing | `event: Event` |
 | `blur` | Triggered when out of focus | `event: Event` |
 | `click` | Triggered on Click | `event: Event` |
-| `clear` | Triggered on Clearance | `value: string | number` |
-| `input` | Trigger on input | `value: string | number` <br> `event: Event` |
-| `change` | Trigger on change | `value: string | number` <br> `event: Event` |
+| `clear` | Triggered on Clearance | `value: string` |
+| `input` | Trigger on input | `value: string`, `event: Event` |
+| `change` | Trigger on change | `value: string`, `event: Event` |
 
 ### Slots
 

diff --git a/packages/varlet-ui/src/input/docs/zh-CN.md b/packages/varlet-ui/src/input/docs/zh-CN.md
@@ -11,7 +11,7 @@ createApp().use(Input)
 
 ### 基本使用
 
-组件会自动分析传入的值是字符串还是数字，会返回相同的类型。
+输入框的行为和基本原生一致，用户输入时始终获得一个符合`type`规则的字符串
 
 ```js
 import { ref } from 'vue'
@@ -110,9 +110,9 @@ createApp().use(Icon)
 
 | 参数 | 说明 | 类型 | 默认值 | 
 | --- | --- | --- | --- | 
-| `v-model` | 绑定的值 | _string \| number_ | `-` |
+| `v-model` | 绑定的值 | _string_ | `-` |
 | `placeholder` | 占位符 | _string_ | `-` |
-| `type` | 输入框类型, 可选值为 `text` `password` | _string_ | `text` |
+| `type` | 输入框类型, 可选值为 `text` `password` `number` | _string_ | `text` |
 | `maxlength` | 最大长度 | _string \| number_ | `-` |
 | `textarea` | 是否是文本域 | _boolean_ | `false` |  
 | `rows` | 文本域的显示行数 | _string \| number_ | `8` |  
@@ -126,7 +126,7 @@ createApp().use(Icon)
 | `clearable` | 是否可清除 | _boolean_ | `false` |
 | `resize` | 文本域是否可以拖动调整尺寸 | _boolean_ | `false` |
 | `validate-trigger` | 触发验证的时机， 可选值为 `onFocus` `onBlur` `onChange` `onClick` `onClear` `onInput` | _ValidateTriggers[]_ | `['onInput', 'onClear']` |
-| `rules` | 验证规则，返回`true`表示验证通过，其余的值则转换为文本作为用户提示 | _Array<(v: string \| number) => any>_ | `-` |
+| `rules` | 验证规则，返回`true`表示验证通过，其余的值则转换为文本作为用户提示 | _Array<(v: string) => any>_ | `-` |
 
 ### 方法
 
@@ -136,7 +136,7 @@ createApp().use(Icon)
 | `blur` | 失焦 | `-` | `-` |
 | `validate` | 触发校验 | `-` | `valid: Promise<boolean>` |
 | `resetValidation` | 清空校验信息 | `-` | `-` |
-| `reset` | 清空绑定的值(字符类型设置为`''`,数字类型设置为`0`)和校验信息 | `-` | `-` |
+| `reset` | 清空绑定的值和校验信息 | `-` | `-` |
 
 ### 事件
 
@@ -145,9 +145,9 @@ createApp().use(Icon)
 | `focus` | 聚焦时触发 | `event: Event` |
 | `blur` | 失焦时触发 | `event: Event` |
 | `click` | 点击时触发 | `event: Event` |
-| `clear` | 清除时触发 | `value: string \| number` |
-| `input` | 输入时触发 | `value: string \| number` <br> `event: Event` |
-| `change` | 更新时触发 | `value: string \| number` <br> `event: Event` |
+| `clear` | 清除时触发 | `value: string` |
+| `input` | 输入时触发 | `value: string`, `event: Event` |
+| `change` | 更新时触发 | `value: string`, `event: Event` |
 
 ### 插槽
 

diff --git a/packages/varlet-ui/src/input/props.ts b/packages/varlet-ui/src/input/props.ts
@@ -1,17 +1,17 @@
 import type { PropType } from 'vue'
 
 export function typeValidator(type: string) {
-  return ['text', 'password'].includes(type)
+  return ['text', 'password', 'number'].includes(type)
 }
 
 export type ValidateTriggers = 'onFocus' | 'onBlur' | 'onChange' | 'onClick' | 'onClear' | 'onInput'
 
 export const props = {
   modelValue: {
-    type: [String, Number],
+    type: String,
   },
   type: {
-    type: String as PropType<'text' | 'password'>,
+    type: String as PropType<'text' | 'password' | 'number'>,
     default: 'text',
     validator: typeValidator,
   },
@@ -67,7 +67,7 @@ export const props = {
     default: () => ['onInput', 'onClear'],
   },
   rules: {
-    type: Array as PropType<Array<(v: string | number) => any>>,
+    type: Array as PropType<Array<(v: string) => any>>,
   },
   onFocus: {
     type: Function as PropType<(e: FocusEvent) => void>,
@@ -79,15 +79,15 @@ export const props = {
     type: Function as PropType<(e: Event) => void>,
   },
   onClear: {
-    type: Function as PropType<(value: string | number) => void>,
+    type: Function as PropType<(value: string) => void>,
   },
   onInput: {
-    type: Function as PropType<(value: string | number, e: Event) => void>,
+    type: Function as PropType<(value: string, e: Event) => void>,
   },
   onChange: {
-    type: Function as PropType<(value: string | number, e: Event) => void>,
+    type: Function as PropType<(value: string, e: Event) => void>,
   },
   'onUpdate:modelValue': {
-    type: Function as PropType<(value: string | number) => void>,
+    type: Function as PropType<(value: string) => void>,
   },
 }
diff --git a/packages/varlet-ui/types/input.d.ts b/packages/varlet-ui/types/input.d.ts
@@ -3,8 +3,8 @@ import { VarComponent } from './varComponent'
 export type InputValidateTriggers = 'onFocus' | 'onBlur' | 'onChange' | 'onClick' | 'onClear' | 'onInput'
 
 export interface InputProps {
-  modelValue?: string | number
-  type?: 'text' | 'password'
+  modelValue?: string
+  type?: 'text' | 'password' | 'number'
   textarea?: boolean
   rows?: string | number
   placeholder?: string
@@ -18,14 +18,14 @@ export interface InputProps {
   clearable?: boolean
   resize?: boolean
   validateTrigger?: InputValidateTriggers[]
-  rules?: Array<(v: string | number) => any>
+  rules?: Array<(v: string) => any>
   onFocus?: (e: Event) => void
   onBlur?: (e: Event) => void
   onClick?: (e: Event) => void
-  onClear?: (value: string | number) => void
-  onInput?: (value: string | number, e: Event) => void
-  onChange?: (value: string | number, e: Event) => void
-  'onUpdate:modelValue'?: (value: string | number) => void
+  onClear?: (value: string) => void
+  onInput?: (value: string, e: Event) => void
+  onChange?: (value: string, e: Event) => void
+  'onUpdate:modelValue'?: (value: string) => void
 }
 
 export class Input extends VarComponent {