feat(input): 添加全选功能并完善inputmode文档

Author: xueyuan

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

@@ -167,6 +167,41 @@ const value14 = ref('')
 }
 </style>
 ```
+### inputmode Demo
+
+The `inputmode` attribute is used to control the type of virtual keyboard on mobile devices, providing a better user experience.
+
+```html
+<script setup>
+import { ref } from 'vue'
+import { useTranslation } from '@varlet/ui'
+
+const { t } = useTranslation()
+const inputmodeDecimal = ref('')
+const inputmodeNumeric = ref('')
+const inputmodeEmail = ref('')
+</script>
+
+<template>
+  <app-type style="margin-top: 10vmin">{{ t('inputmodeDemo') }}</app-type>
+  <var-space direction="column" :size="['3vmin', 0]">
+    <var-input v-model="inputmodeDecimal" inputmode="decimal" :placeholder="t('inputmodeDecimal')" />
+    <var-input v-model="inputmodeNumeric" inputmode="numeric" :placeholder="t('inputmodeNumeric')" />
+    <var-input v-model="inputmodeEmail" inputmode="email" :placeholder="t('inputmodeEmail')" />
+  </var-space>
+</template>
+```
+
+#### inputmode Options
+
+- `decimal`: Display a numeric keypad with decimal point
+- `numeric`: Display a pure numeric keypad
+- `email`: Display a keyboard optimized for email input
+- `tel`: Display a telephone number keypad
+- `url`: Display a keyboard optimized for URL input
+- `search`: Display a search-optimized keyboard
+- `text`: Display a standard text keyboard (default)
+
 
 ## API
 
@@ -272,10 +307,4 @@ Here are the CSS variables used by the component. Styles can be customized using
 | `--input-input-font-size` | `16px` |
 | `--input-textarea-height` | `auto` |
 
-### inputmode Demo
 
-```html
-<var-input inputmode="decimal" placeholder="inputmode=decimal" />
-<var-input inputmode="numeric" placeholder="inputmode=numeric" />
-<var-input inputmode="email" placeholder="inputmode=email" />
-```

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

@@ -167,6 +167,41 @@ const value14 = ref('')
 }
 </style>
 ```
+### inputmode 演示
+
+`inputmode` 属性用于控制移动端虚拟键盘的类型，提供更好的用户体验。
+
+```html
+<script setup>
+import { ref } from 'vue'
+import { useTranslation } from '@varlet/ui'
+
+const { t } = useTranslation()
+const inputmodeDecimal = ref('')
+const inputmodeNumeric = ref('')
+const inputmodeEmail = ref('')
+</script>
+
+<template>
+  <app-type style="margin-top: 10vmin">{{ t('inputmodeDemo') }}</app-type>
+  <var-space direction="column" :size="['3vmin', 0]">
+    <var-input v-model="inputmodeDecimal" inputmode="decimal" :placeholder="t('inputmodeDecimal')" />
+    <var-input v-model="inputmodeNumeric" inputmode="numeric" :placeholder="t('inputmodeNumeric')" />
+    <var-input v-model="inputmodeEmail" inputmode="email" :placeholder="t('inputmodeEmail')" />
+  </var-space>
+</template>
+```
+
+#### inputmode 可选值
+
+- `decimal`: 显示包含小数点的数字键盘
+- `numeric`: 显示纯数字键盘
+- `email`: 显示适合输入邮箱地址的键盘
+- `tel`: 显示电话号码键盘
+- `url`: 显示适合输入URL的键盘
+- `search`: 显示搜索优化的键盘
+- `text`: 显示标准文本键盘（默认值）
+
 
 ## API
 
@@ -271,10 +306,3 @@ const value14 = ref('')
 | `--input-input-font-size` | `16px` |
 | `--input-textarea-height` | `auto` |
 
-### inputmode 演示
-
-```html
-<var-input inputmode="decimal" placeholder="inputmode=decimal" />
-<var-input inputmode="numeric" placeholder="inputmode=numeric" />
-<var-input inputmode="email" placeholder="inputmode=email" />
-```

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

@@ -130,11 +130,11 @@ onThemeChange()
     <var-input v-model.trim="outlinedValue12" variant="outlined" :placeholder="t('trim')" />
   </var-space>
 
-  <app-type style="margin-top: 10vmin">inputmode 演示</app-type>
+  <app-type style="margin-top: 10vmin">{{ t('inputmodeDemo') }}</app-type>
   <var-space direction="column" :size="['3vmin', 0]">
-    <var-input v-model="inputmodeDecimal" inputmode="decimal" placeholder="inputmode=decimal" />
-    <var-input v-model="inputmodeNumeric" inputmode="numeric" placeholder="inputmode=numeric" />
-    <var-input v-model="inputmodeEmail" inputmode="email" placeholder="inputmode=email" />
+    <var-input v-model="inputmodeDecimal" inputmode="decimal" :placeholder="t('inputmodeDecimal')" />
+    <var-input v-model="inputmodeNumeric" inputmode="numeric" :placeholder="t('inputmodeNumeric')" />
+    <var-input v-model="inputmodeEmail" inputmode="email" :placeholder="t('inputmodeEmail')" />
   </var-space>
 
   <div style="height: 40px"></div>

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

@@ -18,6 +18,8 @@ export default {
   numberPlaceholder: 'Please enter number',
   maxMessage: 'Text length must be greater than 6',
   clearableText: 'Clearable Text',
+  selectAll: 'Select All',
+  selectAllButton: 'Select All',
   inputmodeDemo: 'inputmode Demo',
   inputmodeDecimal: 'inputmode=decimal (decimal keyboard)',
   inputmodeNumeric: 'inputmode=numeric (numeric keyboard)',

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

@@ -18,6 +18,8 @@ export default {
   numberPlaceholder: '请输入数字',
   maxMessage: '文本长度必须大于6',
   clearableText: '可清除文本',
+  selectAll: '全选',
+  selectAllButton: '全选',
   inputmodeDemo: 'inputmode 演示',
   inputmodeDecimal: 'inputmode=decimal（数字小数键盘）',
   inputmodeNumeric: 'inputmode=numeric（纯数字键盘）',