feat(ui/input): add autofocus of input (#595)

* fix(ui/picker): add picker missing style * docs: update readme image * chore: update community qrcode * feat(ui/picker): add deep watch * chore: update community qrcode * chore: update community qrcode * feat(ui/input): add autofocus of input * fix(ui/input): fix focus of input * fix(ui/input): add props in types Co-authored-by: davion <[email protected]>
varletjs · Jun 1, 2022 · fb9e026 · fb9e026
1 parent fec4584
commit fb9e026
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 2 deletions.
diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
@@ -126,7 +126,7 @@
 <script lang="ts">
 import VarFormDetails from '../form-details'
 import VarIcon from '../icon'
-import { defineComponent, getCurrentInstance, ref, computed, nextTick } from 'vue'
+import { defineComponent, getCurrentInstance, ref, computed, nextTick, onMounted } from 'vue'
 import { props } from './props'
 import { isEmpty } from '../utils/shared'
 import { useValidation, createNamespace, call } from '../utils/components'
@@ -253,7 +253,7 @@ export default defineComponent({
 
     // expose
     const focus = () => {
-      ;(el.value as HTMLInputElement).focus()
+      ;(el.value as HTMLInputElement)?.focus()
     }
 
     // expose
@@ -269,6 +269,10 @@ export default defineComponent({
 
     call(bindForm, inputProvider)
 
+    onMounted(() => {
+      if (props.autofocus) focus()
+    })
+
     return {
       el,
       id,

diff --git a/packages/varlet-ui/src/input/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/input/__tests__/__snapshots__/index.spec.js.snap
@@ -1,5 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`test input autofocus 1`] = `
+"<div class=\\"var-input var--box\\">
+  <div class=\\"var-input__controller\\">
+    <div class=\\"var-input__icon\\"></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-84\\" type=\\"text\\"><label class=\\"var--ellipsis var-input__placeholder\\" for=\\"var-input-84\\"></label>
+    </div>
+    <div class=\\"var-input__icon\\">
+      <!--v-if-->
+    </div>
+  </div>
+  <div class=\\"var-input__line\\">
+    <div class=\\"var-input__dot\\"></div>
+  </div>
+  <transition-stub>
+    <!--v-if-->
+  </transition-stub>
+</div>"
+`;
+
 exports[`test input clear 1`] = `
 "<div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">

diff --git a/packages/varlet-ui/src/input/__tests__/index.spec.js b/packages/varlet-ui/src/input/__tests__/index.spec.js
@@ -235,3 +235,28 @@ test('test input trim', async () => {
   expect(onUpdateModelValue).lastCalledWith('123')
   wrapper.unmount()
 })
+
+test('test input autofocus', async () => {
+  const onFocus = jest.fn()
+
+  const template = `
+     <var-input
+      autofocus
+      @focus="onFocus"
+    />
+  `
+
+  const wrapper = mount({
+    components: {
+      [VarInput.name]: VarInput,
+    },
+    methods: {
+      onFocus,
+    },
+    template,
+  })
+
+  expect(wrapper.html()).toMatchSnapshot()
+
+  wrapper.unmount()
+})
diff --git a/packages/varlet-ui/src/input/docs/en-US.md b/packages/varlet-ui/src/input/docs/en-US.md
@@ -170,6 +170,7 @@ const value = ref('')
 | `disabled` | Whether the disabled | _boolean_ | `false` |
 | `clearable` | Whether the clearable | _boolean_ | `false` |
 | `resize` | Whether textarea can be dragged to resize | _boolean_ | `false` |
+| `autofocus` | Whether the autofocus | _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) => any>_ | `-` |
 

diff --git a/packages/varlet-ui/src/input/docs/zh-CN.md b/packages/varlet-ui/src/input/docs/zh-CN.md
@@ -171,6 +171,7 @@ const value = ref('')
 | `disabled` | 是否禁用 | _boolean_ | `false` |
 | `clearable` | 是否可清除 | _boolean_ | `false` |
 | `resize` | 文本域是否可以拖动调整尺寸 | _boolean_ | `false` |
+| `autofocus` | 是否自动聚焦 | _boolean_ | `false` |
 | `validate-trigger` | 触发验证的时机，可选值为 `onFocus` `onBlur` `onChange` `onClick` `onClear` `onInput` | _ValidateTriggers[]_ | `['onInput', 'onClear']` |
 | `rules` | 验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示 | _Array<(v: string) => any>_ | `-` |
 

diff --git a/packages/varlet-ui/src/input/props.ts b/packages/varlet-ui/src/input/props.ts
@@ -66,6 +66,10 @@ export const props = {
     type: Boolean,
     default: false,
   },
+  autofocus: {
+    type: Boolean,
+    default: false,
+  },
   validateTrigger: {
     type: Array as PropType<ValidateTriggers[]>,
     default: () => ['onInput', 'onClear'],

diff --git a/packages/varlet-ui/types/input.d.ts b/packages/varlet-ui/types/input.d.ts
@@ -17,6 +17,7 @@ export interface InputProps {
   readonly?: boolean
   clearable?: boolean
   resize?: boolean
+  autofocus?: boolean
   validateTrigger?: InputValidateTriggers[]
   rules?: Array<(v: string) => any>
   onFocus?: (e: Event) => void