Feat/input select and keyboard events new

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,12 @@ const value11 = ref('')
 const value12 = ref('')
 const value13 = ref('')
 const value14 = ref('')
+const value15 = ref('')
+const inputRef = ref()
+
+const selectAll = () => {
+  inputRef.value?.select()
+}
 </script>
 
 <template>
@@ -69,6 +75,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="value15"
+      />
+      <var-button type="primary" @click="selectAll">Select All</var-button>
+    </var-space>
   </var-space>
 </template>
 
@@ -104,6 +118,12 @@ const value11 = ref('')
 const value12 = ref('')
 const value13 = ref('')
 const value14 = ref('')
+const value15 = ref('')
+const inputRef = ref()
+
+const selectAll = () => {
+  inputRef.value?.select()
+}
 </script>
 
 <template>
@@ -154,6 +174,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="value15"
+      />
+      <var-button type="primary" @click="selectAll">Select All</var-button>
+    </var-space>
   </var-space>
 </template>
 
@@ -203,6 +231,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 +247,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,12 @@ const value11 = ref('')
 const value12 = ref('')
 const value13 = ref('')
 const value14 = ref('')
+const value15 = ref('')
+const inputRef = ref()
+
+const selectAll = () => {
+  inputRef.value?.select()
+}
 </script>
 
 <template>
@@ -69,6 +76,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="value15"
+      />
+      <var-button type="primary" @click="selectAll">全选</var-button>
+    </var-space>
   </var-space>
 </template>
 
@@ -203,6 +218,7 @@ const value14 = ref('')
 | --- | --- | --- | --- |
 | `focus` | 聚焦 | `-` | `-` |
 | `blur` | 失焦 | `-` | `-` |
+| `select` | 选中输入框中的所有文本 | `-` | `-` |
 | `validate` | 触发校验 | `-` | `valid: Promise<boolean>` |
 | `resetValidation` | 清空校验信息 | `-` | `-` |
 | `reset` | 清空绑定的值和校验信息 | `-` | `-` |
@@ -218,6 +234,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,7 @@ const standardValue11 = ref('')
 const standardValue12 = ref('')
 const standardValue13 = ref('')
 const standardValue14 = ref('')
+const standardValue15 = ref('')
 
 const outlinedValue = ref('')
 const outlinedValue2 = ref('')
@@ -33,6 +34,18 @@ const outlinedValue11 = ref('')
 const outlinedValue12 = ref('')
 const outlinedValue13 = ref('')
 const outlinedValue14 = ref('')
+const outlinedValue15 = ref('')
+
+const inputRef = ref()
+const outlinedInputRef = ref()
+
+const selectAll = () => {
+  inputRef.value?.select()
+}
+
+const selectAllOutlined = () => {
+  outlinedInputRef.value?.select()
+}
 
 watchLang(use)
 onThemeChange()
@@ -78,6 +91,10 @@ 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-space align="center">
+      <var-input ref="inputRef" v-model="standardValue15" :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>
@@ -124,6 +141,10 @@ onThemeChange()
     <var-input v-model="outlinedValue10" variant="outlined" :placeholder="t('textarea')" textarea />
     <var-input v-model="outlinedValue11" variant="outlined" :placeholder="t('smallSize')" size="small" />
     <var-input v-model.trim="outlinedValue12" variant="outlined" :placeholder="t('trim')" />
+    <var-space align="center">
+      <var-input ref="outlinedInputRef" v-model="outlinedValue15" variant="outlined" :placeholder="t('selectAll')" />
+      <var-button type="primary" @click="selectAllOutlined">{{ t('selectAllButton') }}</var-button>
+    </var-space>
   </var-space>
 
   <div style="height: 40px"></div>

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

@@ -11,11 +11,13 @@ export default {
   clearable: 'Clearable',
   clearIconSlot: 'Use the clear icon slot',
   displayIcon: 'Display Icon',
-  customIconSize: 'Custom Icon Size',
+  customIconSize: 'Custom Clear Icon',
   validate: 'Validate',
   validateWithZod: 'Validate With Zod',
   placeholder: 'Please enter text',
   numberPlaceholder: 'Please enter number',
   maxMessage: 'Text length must be greater than 6',
-  clearableText: 'Clearable Text',
+  clearableText: 'Clearable text',
+  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,6 @@ export default {
   numberPlaceholder: '请输入数字',
   maxMessage: '文本长度必须大于6',
   clearableText: '可清除文本',
+  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