feat(verification-code): add verification-code component (#2823)

packages/arco-vue-docs/components/aside-nav/style.less

@@ -16,13 +16,13 @@
     position: absolute;
     top: 186px;
     right: -12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background-color: var(--color-bg-5);
     border: 1px solid var(--color-fill-3);
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
     transition: all 0.15s;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 
     &:hover {
       background-color: var(--color-bg-5);
@@ -141,7 +141,10 @@
       background-color: var(--color-fill-2) !important;
 
       .aside-nav-item-link {
+        overflow: hidden;
         color: rgb(var(--arcoblue-6));
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
     }
 

packages/arco-vue-docs/locale/en-us.js

@@ -93,6 +93,7 @@ export default {
     overflow: 'OverflowList',
     scrollbar: 'Scrollbar',
     watermark: 'Watermark',
+    verificationCode: 'VerificationCode',
   },
   footer: {
     design: 'Design',

packages/arco-vue-docs/locale/zh-cn.js

@@ -93,6 +93,7 @@ export default {
     overflow: '折叠列表 OverflowList',
     scrollbar: '滚动条 Scrollbar',
     watermark: '水印 Watermark',
+    verificationCode: '验证码输入框 VerificationCode',
   },
   footer: {
     design: '设计',

packages/arco-vue-docs/router.ts

@@ -187,6 +187,10 @@ const ScrollbarEn = () =>
 const Watermark = () => import('@web-vue/components/watermark/README.zh-CN.md');
 const WatermarkEn = () =>
   import('@web-vue/components/watermark/README.en-US.md');
+const VerificationCode = () =>
+  import('@web-vue/components/verification-code/README.zh-CN.md');
+const VerificationCodeEn = () =>
+  import('@web-vue/components/verification-code/README.en-US.md');
 
 const docs = [
   {
@@ -475,6 +479,11 @@ const components = [
         component: InputNumber,
         componentEn: InputNumberEn,
       },
+      {
+        name: 'verificationCode',
+        component: VerificationCode,
+        componentEn: VerificationCodeEn,
+      },
       {
         name: 'inputTag',
         component: InputTag,

packages/web-vue/components/arco-vue.ts

@@ -96,6 +96,7 @@ import Typography, {
 } from './typography';
 import Upload from './upload';
 import OverflowList from './overflow-list';
+import VerificationCode from './verification-code';
 import Watermark from './watermark';
 
 import { useFormItem } from './_hooks/use-form-item';
@@ -173,6 +174,7 @@ const components: Record<string, Plugin> = {
   Icon,
   OverflowList,
   Watermark,
+  VerificationCode,
 };
 
 const install = (app: App, options?: ArcoOptions) => {

packages/web-vue/components/components.ts

@@ -128,6 +128,7 @@ declare module '@vue/runtime-core' {
     ATypographyTitle: typeof import('@arco-design/web-vue')['TypographyTitle'];
     ATypographyText: typeof import('@arco-design/web-vue')['TypographyText'];
     AUpload: typeof import('@arco-design/web-vue')['Upload'];
+    AVerificationCode: typeof import('@arco-design/web-vue')['VerificationCode'];
     AWatermark: typeof import('@arco-design/web-vue')['Watermark'];
   }
 

packages/web-vue/components/index.less

@@ -72,3 +72,4 @@
 @import './tree/style/index.less';
 @import './typography/style/index.less';
 @import './upload/style/index.less';
+@import './verification-code/style/index.less';

packages/web-vue/components/index.ts

@@ -332,6 +332,8 @@ export type {
 } from './upload';
 export { default as OverflowList } from './overflow-list';
 export type { OverflowListInstance } from './overflow-list';
+export { default as VerificationCode } from './verification-code';
+export type { VerificationCodeInstance } from './verification-code';
 export { default as Watermark } from './watermark';
 export type { WatermarkInstance } from './watermark';
 // hooks

packages/web-vue/components/verification-code/README.en-US.md

@@ -0,0 +1,43 @@
+```yaml
+meta:
+  type: Component
+  category: Data Entry
+title: VerificationCode
+description: Verification code input component.
+```
+
+*Auto translate by google.*
+
+@import ./__demo__/basic.md
+@import ./__demo__/status.md
+@import ./__demo__/masked.md
+@import ./__demo__/separator.md
+@import ./__demo__/form.md
+@import ./__demo__/formatter.md
+
+## API
+
+
+### `<verification-code>` Props
+
+|Attribute|Description|Type|Default|
+|---|---|---|:---:|
+|model-value **(v-model)**|Value|`string`|`-`|
+|default-value|Default value (uncontrolled state)|`string`|`''`|
+|length|The length of the verification code, rendering the corresponding number of input boxes according to the length.|`number`|`6`|
+|size|Input size|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`|
+|disabled|Whether to disable|`boolean`|`false`|
+|masked|Password mode|`boolean`|`false`|
+|readonly|Readonly|`boolean`|`false`|
+|error|Whether it is an error state|`boolean`|`false`|
+|separator|Separator. Customizable rendering separators after input boxes with different indexes|`(index: number, character: string) => VNode`|`-`|
+|formatter|Formatter function, triggered when the user input value changes|`(inputValue: string, index: number, value: string) => string \| boolean`|`-`|
+### `<verification-code>` Events
+
+|Event Name|Description|Parameters|
+|---|---|---|
+|change|Triggered when the value changes|value: ` string `|
+|finish|Triggered when the filling is complete|value: ` string `|
+|input|Triggered on input|inputValue: ` string `<br>index: ` number `<br>ev: `Event`|
+
+

packages/web-vue/components/verification-code/README.zh-CN.md

@@ -0,0 +1,41 @@
+```yaml
+meta:
+  type: 组件
+  category: 数据输入
+title: 验证码输入 VerificationCode
+description: 验证码输入组件
+```
+
+@import ./__demo__/basic.md
+@import ./__demo__/status.md
+@import ./__demo__/masked.md
+@import ./__demo__/separator.md
+@import ./__demo__/form.md
+@import ./__demo__/formatter.md
+
+## API
+
+
+### `<verification-code>` Props
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|model-value **(v-model)**|绑定值|`string`|`-`|
+|default-value|默认值（非受控状态）|`string`|`''`|
+|length|验证码的长度，根据长度渲染对应个数的输入框|`number`|`6`|
+|size|输入框大小|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`|
+|disabled|是否禁用|`boolean`|`false`|
+|masked|是否密码模式|`boolean`|`false`|
+|readonly|只读|`boolean`|`false`|
+|error|是否为错误状态|`boolean`|`false`|
+|separator|分隔符。可在不同索引的输入框后自定义渲染分隔符|`(index: number, character: string) => VNode`|`-`|
+|formatter|格式化函数，当用户输入值改变时触发|`(inputValue: string, index: number, value: string) => string \| boolean`|`-`|
+### `<verification-code>` Events
+
+|事件名|描述|参数|
+|---|---|---|
+|change|值发生改变时触发|value: ` string `|
+|finish|填充完成时触发|value: ` string `|
+|input|输入时触发|inputValue: ` string `<br>index: ` number `<br>ev: `Event`|
+
+

packages/web-vue/components/verification-code/TEMPLATE.md

@@ -0,0 +1,29 @@
+## zh-CN
+```yaml
+meta:
+  type: 组件
+  category: 数据输入
+title: 验证码输入 VerificationCode
+description: 验证码输入组件
+```
+---
+## en-US
+```yaml
+meta:
+  type: Component
+  category: Data Entry
+title: VerificationCode
+description: Verification code input component.
+```
+---
+
+@import ./__demo__/basic.md
+@import ./__demo__/status.md
+@import ./__demo__/masked.md
+@import ./__demo__/separator.md
+@import ./__demo__/form.md
+@import ./__demo__/formatter.md
+
+## API
+
+%%API(verification-code.tsx)%%

packages/web-vue/components/verification-code/__demo__/basic.md

@@ -0,0 +1,31 @@
+```yaml
+title:
+  zh-CN: 基本使用
+  en-US: Basic Usage
+```
+
+## zh-CN
+
+验证码输入框的基本用法。
+
+---
+
+## en-US
+
+Basic usage
+
+---
+
+```vue
+<template>
+  <a-verification-code v-model="value" style="width: 300px" @finish="onFinish" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { Message} from '@arco-design/web-vue';
+
+const value = ref('654321');
+const onFinish = (value) => Message.info(`Verification code: ${value}`);
+</script>
+```

packages/web-vue/components/verification-code/__demo__/form.md

@@ -0,0 +1,50 @@
+```yaml
+title:
+  zh-CN: 配合表单使用
+  en-US: With Form
+```
+
+## zh-CN
+
+配合表单使用实现校验。
+
+---
+
+## en-US
+
+Use with forms to implement verification.
+
+---
+
+```vue
+<template>
+  <a-form ref="formRef" :model="form" style="width: 300px">
+    <a-form-item
+      field="code"
+      label="code"
+      :rules="[
+        {required:true,message:'Verification code is required'},
+        {minLength:6, message:'Verification code is incomplete'},
+        { match: /^\d+$/, message: 'Must be numeric' },
+      ]"
+    >
+      <a-verification-code v-model="form.code" style="width: 300px" @finish="onFinish" />
+    </a-form-item>
+    <a-form-item>
+      <a-button style="width: 60px" type='primary' size='large' htmlType='submit'>Submit</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { Message} from '@arco-design/web-vue';
+
+const value = ref('654321');
+const formRef = ref(null);
+const form = ref({
+  code: '',
+})
+const onFinish = (value) => Message.info(`Verification code: ${value}`);
+</script>
+```

packages/web-vue/components/verification-code/__demo__/formatter.md

@@ -0,0 +1,34 @@
+```yaml
+title:
+  zh-CN: 格式化输入
+  en-US: Formatter input
+```
+
+## zh-CN
+
+通过 `formatter` 校验输入。此外，可以返回非布尔类型来将用户输入的字符串为特定的格式。
+
+---
+
+## en-US
+
+Validate input using `formatter`. Additionally, it can return non-boolean types to format the user-entered string into a specific format.
+
+---
+
+```vue
+<template>
+  <a-space direction="vertical">
+    <a-verification-code
+      defaultValue='123456'
+      style="width: 300px"
+      :formatter="(inputValue) =>  /^\d*$/.test(inputValue) ? inputValue : false"
+    />
+    <a-verification-code
+      defaultValue='abcdef'
+      style="width: 300px"
+      :formatter="(inputValue) => /^[a-zA-Z]*$/.test(inputValue) ? inputValue.toUpperCase() : ''"
+    />
+  </a-space>
+</template>
+```

packages/web-vue/components/verification-code/__demo__/masked.md

@@ -0,0 +1,29 @@
+```yaml
+title:
+  zh-CN: 密码模式
+  en-US: Masked
+```
+
+## zh-CN
+
+指定 `masked = true`可开启密码模式
+
+---
+
+## en-US
+
+Use `masked = true` to turn on password mode
+
+---
+
+```vue
+<template>
+  <a-verification-code defaultValue="123" style="width: 300px"  masked @finish="onFinish" />
+</template>
+
+<script setup>
+import { Message} from '@arco-design/web-vue';
+
+const onFinish = (value) => Message.info(`Verification code: ${value}`);
+</script>
+```