feat(ui/input): add select method

- Add select() method to select all text in input

Closes #1912

docs(input): 移除输入组件文档中的键盘事件相关内容

refactor(input): 移除不必要的输入组件测试用例

refactor(input): 移除键盘事件处理器

refactor(input/example): 移除未使用的Snackbar导入

feat(input/docs): 添加en-US新的输入示例和选择全部功能

docs(input): 移除输入组件文档中的回车键事件示例

Author: xueyuan

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

@@ -368,6 +368,11 @@ export default defineComponent({
       ;(el.value as HTMLInputElement).blur()
     }
 
+    // expose
+    function select() {
+      ;(el.value as HTMLInputElement).select()
+    }
+
     return {
       el,
       id,
@@ -397,6 +402,7 @@ export default defineComponent({
       reset,
       focus,
       blur,
+      select,
     }
   },
 })

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

@@ -25,6 +25,13 @@ const value11 = ref('')
 const value12 = ref('')
 const value13 = ref('')
 const value14 = ref('')
+const value15 = ref('')
+const value16 = ref('')
+const inputRef = ref()
+
+const selectAll = () => {
+  inputRef.value?.select()
+}
 </script>
 
 <template>
@@ -69,6 +76,14 @@ const value14 = ref('')
     <var-input placeholder="Textarea" textarea v-model="value10" />
     <var-input placeholder="Small Size" size="small" v-model="value11" />
     <var-input placeholder="Removes whitespace from both ends of this string" v-model.trim="value12" />
+    <var-space>
+      <var-input 
+        ref="inputRef"
+        placeholder="Enter text and click the button to select all" 
+        v-model="value16"
+      />
+      <var-button type="primary" @click="selectAll">Select All</var-button>
+    </var-space>
   </var-space>
 </template>
 
@@ -104,6 +119,13 @@ const value11 = ref('')
 const value12 = ref('')
 const value13 = ref('')
 const value14 = ref('')
+const value15 = ref('')
+const value16 = ref('')
+const inputRef = ref()
+
+const selectAll = () => {
+  inputRef.value?.select()
+}
 </script>
 
 <template>
@@ -154,6 +176,14 @@ const value14 = ref('')
     <var-input variant="outlined" placeholder="Textarea" textarea v-model="value10" />
     <var-input variant="outlined" placeholder="Small Size" size="small" v-model="value11" />
     <var-input variant="outlined" placeholder="Removes whitespace from both ends of this string" v-model.trim="value12" />
+    <var-space>
+      <var-input 
+        ref="inputRef"
+        placeholder="Enter text and click the button to select all" 
+        v-model="value16"
+      />
+      <var-button type="primary" @click="selectAll">Select All</var-button>
+    </var-space>
   </var-space>
 </template>
 
@@ -203,6 +233,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 | `-` | `-` |
@@ -218,6 +249,7 @@ const value14 = ref('')
 | `input` | Triggered on input | `value: string`, `event: Event` |
 | `change` | Triggered on change | `value: string`, `event: Event` |
 
+
 ### Slots
 
 | Name | Description | SlotProps |

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,14 @@ 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-space>
+      <var-input 
+        ref="inputRef"
+        placeholder="输入文本后点击按钮全选" 
+        v-model="value16"
+      />
+      <var-button type="primary" @click="selectAll">全选</var-button>
+    </var-space>
   </var-space>
 </template>
 
@@ -203,6 +223,7 @@ const value14 = ref('')
 | --- | --- | --- | --- |
 | `focus` | 聚焦 | `-` | `-` |
 | `blur` | 失焦 | `-` | `-` |
+| `select` | 选中输入框中的所有文本 | `-` | `-` |
 | `validate` | 触发校验 | `-` | `valid: Promise<boolean>` |
 | `resetValidation` | 清空校验信息 | `-` | `-` |
 | `reset` | 清空绑定的值和校验信息 | `-` | `-` |
@@ -218,6 +239,7 @@ const value14 = ref('')
 | `input` | 输入时触发 | `value: string`, `event: Event` |
 | `change` | 更新时触发 | `value: string`, `event: Event` |
 
+
 ### 插槽
 
 | 插槽名 | 说明 | 参数 |

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

@@ -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/types/input.d.ts

@@ -68,6 +68,8 @@ export class Input extends VarComponent {
 
   blur(): void
 
+  select(): void
+
   validate(): Promise<boolean>
 
   resetValidation(): void