feat(captcha): add Captcha component (#295)

* wip: create component

* chore: switch to tsx

* wip: image

* wip: add tolerance

* wip: slide image type

* wip: update

* wip: update

* wip: extra slider component

* chore: update

* chore: adjust props

* wip: improve and docs

* wip: improve and docs

* wip: docs

* wip: update

* wip: update

* wip: update

* feat: add point type

* feat: support use trigger

* docs: complete docs

* feat: switch to lucide

* docs: update

* docs: update

* chore: update

* test: update

* docs: update

* chore: update lock file

* style: lint

* test: update

* test: update

* test: add unit tests

* test: update

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

common/config/src/icons.ts

@@ -1,12 +1,4 @@
-import {
-  computed,
-  defineAsyncComponent,
-  getCurrentScope,
-  inject,
-  markRaw,
-  provide,
-  unref
-} from 'vue'
+import { computed, getCurrentScope, inject, markRaw, provide, unref } from 'vue'
 
 import {
   AlertCircle,

common/config/src/locale/en-US.ts

@@ -32,6 +32,17 @@ export function enUSLocale() {
       week7: 'Su'
     },
 
+    captcha: {
+      slideEnd: 'Please slide to the end',
+      slide: 'Please slide to a suitable position',
+      success: 'Test successful',
+      fail: 'Test failed, please retry',
+      doCaptcha: 'Please complete the captcha below',
+      pointInOrder: 'Please point in order',
+      trigger: 'Click to trigger captcha',
+      completed: 'Captcha completed'
+    },
+
     checkbox: {
       all: 'All'
     },

common/config/src/locale/helper.ts

@@ -30,6 +30,17 @@ export interface LocaleConfig {
     week7: string
   },
 
+  captcha: {
+    slideEnd: string,
+    slide: string,
+    success: string,
+    fail: string,
+    doCaptcha: string,
+    pointInOrder: string,
+    trigger: string,
+    completed: string
+  },
+
   checkbox: {
     all: string
   },

common/config/src/locale/ta-IN.ts

@@ -32,6 +32,13 @@ export function taINLocale() {
       week7: 'ஞாயிறு'
     },
 
+    captcha: {
+      slideEnd: 'இறுதிக்கு ஸ்லைடு',
+      slide: 'சரியான நிலைக்கு ஸ்லைடு செய்யவும்',
+      success: 'சோதனை வெற்றி',
+      fixImage: 'படத்தை சரிசெய்யவும்'
+    },
+
     checkbox: {
       all: 'அனைத்தும்'
     },

common/config/src/locale/zh-CN.ts

@@ -32,6 +32,17 @@ export function zhCNLocale() {
       week7: '日'
     },
 
+    captcha: {
+      slideEnd: '请滑动到最后',
+      slide: '请滑动到适当的位置',
+      success: '验证成功',
+      fail: '验证失败，请重试',
+      doCaptcha: '请完成下面的验证',
+      pointInOrder: '请按顺序点击',
+      trigger: '点击进行验证',
+      completed: '已完成验证'
+    },
+
     checkbox: {
       all: '全选'
     },

common/meta/scripts/components.ts

@@ -63,7 +63,9 @@ async function readDirectives() {
   const componentRE = /import \{ (.+) \} from '@\/components\/.+'/
   const directivesDir = resolve(rootDir, '../../directives')
   const directives = await Promise.all(
-    (await readdir(directivesDir, 'utf-8'))
+    (
+      await readdir(directivesDir, 'utf-8')
+    )
       .filter(f => statSync(resolve(directivesDir, f)).isDirectory())
       .map(async directive => {
         const content = await readFile(resolve(directivesDir, directive, 'index.ts'), 'utf-8')

components/captcha-slider/css.ts

@@ -0,0 +1,2 @@
+import '@/components/preset/css'
+import '@/components/captcha/css'

components/captcha-slider/index.ts

@@ -0,0 +1,8 @@
+import CaptchaSlider from '../captcha/captcha-slider.vue'
+
+export { CaptchaSlider }
+export { captchaSliderProps } from '../captcha/props'
+
+export type CaptchaSliderExposed = InstanceType<typeof CaptchaSlider>
+
+export type { CaptchaSliderProps, CaptchaSliderCProps } from '../captcha/props'

components/captcha-slider/style.ts

@@ -0,0 +1,2 @@
+import '@/components/preset/style'
+import '@/components/captcha/style'