Feat/input select and keyboard events

packages/varlet-ui/src/input/Input.vue

@@ -74,6 +74,8 @@
         @blur="handleBlur"
         @input="handleInput"
         @change="handleChange"
+        @keydown="handleKeydown"
+        @keyup="handleKeyup"
         @compositionstart="handleCompositionStart"
         @compositionend="handleCompositionEnd"
       />
@@ -108,6 +110,8 @@
         @blur="handleBlur"
         @input="handleInput"
         @change="handleChange"
+        @keydown="handleKeydown"
+        @keyup="handleKeyup"
         @compositionstart="handleCompositionStart"
         @compositionend="handleCompositionEnd"
       />
@@ -368,6 +372,25 @@ export default defineComponent({
       ;(el.value as HTMLInputElement).blur()
     }
 
+    // expose
+    function select() {
+      ;(el.value as HTMLInputElement).select()
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+      call(props.onKeydown, e)
+
+      // 处理回车键事件
+      if (e.key === 'Enter' && !isComposing.value) {
+        const value = props.modelValue || ''
+        call(props.onEnter, value, e)
+      }
+    }
+
+    function handleKeyup(e: KeyboardEvent) {
+      call(props.onKeyup, e)
+    }
+
     return {
       el,
       id,
@@ -392,11 +415,14 @@ export default defineComponent({
       handleCompositionStart,
       handleCompositionEnd,
       handleMousedown,
+      handleKeydown,
+      handleKeyup,
       validate,
       resetValidation,
       reset,
       focus,
       blur,
+      select,
     }
   },
 })

packages/varlet-ui/src/input/__tests__/index.spec.js

@@ -465,3 +465,115 @@ test('input aria-label', async () => {
   expect(wrapper.html()).toMatchSnapshot()
   wrapper.unmount()
 })
+
+test('input select method', () => {
+  const wrapper = mount(VarInput, {
+    props: {
+      modelValue: 'hello world',
+    },
+  })
+
+  const input = wrapper.find('.var-input__input').element
+  const selectSpy = vi.spyOn(input, 'select')
+
+  wrapper.vm.select()
+  expect(selectSpy).toHaveBeenCalled()
+
+  wrapper.unmount()
+})
+
+test('input keyboard events', async () => {
+  const onKeydown = vi.fn()
+  const onKeyup = vi.fn()
+  const onEnter = vi.fn()
+
+  const wrapper = mount(VarInput, {
+    props: {
+      modelValue: 'test',
+      onKeydown,
+      onKeyup,
+      onEnter,
+    },
+  })
+
+  const input = wrapper.find('.var-input__input')
+
+  // Test keydown event
+  await input.trigger('keydown', { key: 'a' })
+  expect(onKeydown).toHaveBeenCalledTimes(1)
+  expect(onKeydown).toHaveBeenCalledWith(expect.objectContaining({ key: 'a' }))
+
+  // Test keyup event
+  await input.trigger('keyup', { key: 'a' })
+  expect(onKeyup).toHaveBeenCalledTimes(1)
+  expect(onKeyup).toHaveBeenCalledWith(expect.objectContaining({ key: 'a' }))
+
+  // Test enter key event
+  await input.trigger('keydown', { key: 'Enter' })
+  expect(onEnter).toHaveBeenCalledTimes(1)
+  expect(onEnter).toHaveBeenCalledWith('test', expect.objectContaining({ key: 'Enter' }))
+
+  wrapper.unmount()
+})
+
+test('input textarea keyboard events', async () => {
+  const onKeydown = vi.fn()
+  const onKeyup = vi.fn()
+  const onEnter = vi.fn()
+
+  const wrapper = mount(VarInput, {
+    props: {
+      modelValue: 'test',
+      textarea: true,
+      onKeydown,
+      onKeyup,
+      onEnter,
+    },
+  })
+
+  const textarea = wrapper.find('.var-input__input')
+
+  // Test keydown event
+  await textarea.trigger('keydown', { key: 'a' })
+  expect(onKeydown).toHaveBeenCalledTimes(1)
+
+  // Test keyup event
+  await textarea.trigger('keyup', { key: 'a' })
+  expect(onKeyup).toHaveBeenCalledTimes(1)
+
+  // Test enter key event
+  await textarea.trigger('keydown', { key: 'Enter' })
+  expect(onEnter).toHaveBeenCalledTimes(1)
+  expect(onEnter).toHaveBeenCalledWith('test', expect.objectContaining({ key: 'Enter' }))
+
+  wrapper.unmount()
+})
+
+test('input enter key not triggered during composition', async () => {
+  const onEnter = vi.fn()
+
+  const wrapper = mount(VarInput, {
+    props: {
+      modelValue: 'test',
+      onEnter,
+    },
+  })
+
+  const input = wrapper.find('.var-input__input')
+
+  // Start composition
+  await input.trigger('compositionstart')
+
+  // Trigger enter during composition
+  await input.trigger('keydown', { key: 'Enter' })
+  expect(onEnter).toHaveBeenCalledTimes(0)
+
+  // End composition
+  await input.trigger('compositionend')
+
+  // Trigger enter after composition
+  await input.trigger('keydown', { key: 'Enter' })
+  expect(onEnter).toHaveBeenCalledTimes(1)
+
+  wrapper.unmount()
+})

packages/varlet-ui/src/input/docs/en-US.md

@@ -203,6 +203,7 @@ const value14 = ref('')
 | --- | --- | --- | --- |
 | `focus` | Focus | `-` | `-` |
 | `blur` | Blur | `-` | `-` |
+| `select` | Select all text in the input | `-` | `-` |
 | `validate` | Trigger validate | `-` | `valid: Promise<boolean>` |
 | `resetValidation` | Clear validate messages | `-` | `-` |
 | `reset` | Clear the value of the binding and validate messages | `-` | `-` |
@@ -217,6 +218,9 @@ const value14 = ref('')
 | `clear` | Triggered on Clearance | `value: string` |
 | `input` | Triggered on input | `value: string`, `event: Event` |
 | `change` | Triggered on change | `value: string`, `event: Event` |
+| `keydown` | Triggered on keydown | `event: KeyboardEvent` |
+| `keyup` | Triggered on keyup | `event: KeyboardEvent` |
+| `enter` | Triggered when Enter key is pressed | `value: string`, `event: KeyboardEvent` |
 
 ### Slots
 

packages/varlet-ui/src/input/docs/zh-CN.md

@@ -10,6 +10,7 @@
 <script setup>
 import { ref } from 'vue'
 import { z } from 'zod'
+import { Snackbar } from '@varlet/ui'
 
 const value = ref('')
 const value2 = ref('')
@@ -25,6 +26,17 @@ const value11 = ref('')
 const value12 = ref('')
 const value13 = ref('')
 const value14 = ref('')
+const value15 = ref('')
+const value16 = ref('')
+const inputRef = ref()
+
+const handleEnter = (value) => {
+  Snackbar.info(`回车键被按下，当前值：${value}`)
+}
+
+const selectAll = () => {
+  inputRef.value?.select()
+}
 </script>
 
 <template>
@@ -69,6 +81,19 @@ const value14 = ref('')
     <var-input placeholder="文本域" textarea v-model="value10" />
     <var-input placeholder="小尺寸" size="small" v-model="value11" />
     <var-input placeholder="移除空白字符" v-model.trim="value12" />
+    <var-input 
+      placeholder="按下回车键试试" 
+      v-model="value15"
+      @enter="handleEnter"
+    />
+    <var-space>
+      <var-input 
+        ref="inputRef"
+        placeholder="输入文本后点击按钮全选" 
+        v-model="value16"
+      />
+      <var-button type="primary" @click="selectAll">全选</var-button>
+    </var-space>
   </var-space>
 </template>
 
@@ -203,6 +228,7 @@ const value14 = ref('')
 | --- | --- | --- | --- |
 | `focus` | 聚焦 | `-` | `-` |
 | `blur` | 失焦 | `-` | `-` |
+| `select` | 选中输入框中的所有文本 | `-` | `-` |
 | `validate` | 触发校验 | `-` | `valid: Promise<boolean>` |
 | `resetValidation` | 清空校验信息 | `-` | `-` |
 | `reset` | 清空绑定的值和校验信息 | `-` | `-` |
@@ -217,6 +243,9 @@ const value14 = ref('')
 | `clear` | 清除时触发 | `value: string` |
 | `input` | 输入时触发 | `value: string`, `event: Event` |
 | `change` | 更新时触发 | `value: string`, `event: Event` |
+| `keydown` | 键盘按下时触发 | `event: KeyboardEvent` |
+| `keyup` | 键盘释放时触发 | `event: KeyboardEvent` |
+| `enter` | 按下回车键时触发 | `value: string`, `event: KeyboardEvent` |
 
 ### 插槽
 

packages/varlet-ui/src/input/example/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { AppType, onThemeChange, watchLang } from '@varlet/cli/client'
+import { AppType, onThemeChange, Snackbar, watchLang } from '@varlet/cli/client'
 import { z } from 'zod'
 import { t, use } from './locale'
 
@@ -18,6 +18,8 @@ const standardValue11 = ref('')
 const standardValue12 = ref('')
 const standardValue13 = ref('')
 const standardValue14 = ref('')
+const standardValue15 = ref('')
+const standardValue16 = ref('')
 
 const outlinedValue = ref('')
 const outlinedValue2 = ref('')
@@ -34,6 +36,20 @@ const outlinedValue12 = ref('')
 const outlinedValue13 = ref('')
 const outlinedValue14 = ref('')
 
+const inputRef = ref()
+
+const handleEnter = (value, e) => {
+  Snackbar.info(`回车键被按下，当前值：${value}`)
+}
+
+const handleKeydown = (e) => {
+  console.log('keydown:', e.key)
+}
+
+const selectAll = () => {
+  inputRef.value?.select()
+}
+
 watchLang(use)
 onThemeChange()
 </script>
@@ -78,6 +94,11 @@ onThemeChange()
     <var-input v-model="standardValue10" :placeholder="t('textarea')" textarea />
     <var-input v-model="standardValue11" :placeholder="t('smallSize')" size="small" />
     <var-input v-model.trim="standardValue12" :placeholder="t('trim')" />
+    <var-input v-model="standardValue15" :placeholder="t('enterKey')" @enter="handleEnter" @keydown="handleKeydown" />
+    <var-space>
+      <var-input ref="inputRef" v-model="standardValue16" :placeholder="t('selectAll')" />
+      <var-button type="primary" @click="selectAll">{{ t('selectAllButton') }}</var-button>
+    </var-space>
   </var-space>
 
   <app-type style="margin-top: 10vmin">{{ t('outlined') }}</app-type>

packages/varlet-ui/src/input/example/locale/en-US.ts

@@ -1,15 +1,15 @@
 export default {
-  standard: 'Standard Variant',
-  outlined: 'Outlined Variant',
+  standard: 'Standard Appearance',
+  outlined: 'Outlined Appearance',
   smallSize: 'Small Size',
   plainMode: 'Plain Mode',
   textarea: 'Textarea',
   maxlength: 'Maxlength',
   disabled: 'Disabled',
-  trim: 'Removes whitespace from both ends of this string',
+  trim: 'Trim',
   readonly: 'Readonly',
   clearable: 'Clearable',
-  clearIconSlot: 'Use the clear icon slot',
+  clearIconSlot: 'Custom Clear Icon',
   displayIcon: 'Display Icon',
   customIconSize: 'Custom Icon Size',
   validate: 'Validate',
@@ -18,4 +18,7 @@ export default {
   numberPlaceholder: 'Please enter number',
   maxMessage: 'Text length must be greater than 6',
   clearableText: 'Clearable Text',
+  enterKey: 'Try pressing Enter',
+  selectAll: 'Type text and click button to select all',
+  selectAllButton: 'Select All',
 }

packages/varlet-ui/src/input/example/locale/zh-CN.ts

@@ -18,4 +18,7 @@ export default {
   numberPlaceholder: '请输入数字',
   maxMessage: '文本长度必须大于6',
   clearableText: '可清除文本',
+  enterKey: '按下回车键试试',
+  selectAll: '输入文本后点击按钮全选',
+  selectAllButton: '全选',
 }

packages/varlet-ui/src/input/props.ts

@@ -37,6 +37,9 @@ export const props = {
   onInput: defineListenerProp<(value: string, e: Event) => void>(),
   onChange: defineListenerProp<(value: string, e: Event) => void>(),
   onClear: defineListenerProp<(value: string) => void>(),
+  onKeydown: defineListenerProp<(e: KeyboardEvent) => void>(),
+  onKeyup: defineListenerProp<(e: KeyboardEvent) => void>(),
+  onEnter: defineListenerProp<(value: string, e: KeyboardEvent) => void>(),
   'onUpdate:modelValue': defineListenerProp<(value: string) => void>(),
   ...pickProps(fieldDecoratorProps, [
     'size',