go-captcha-vue 1.0.3 → 1.0.5-pre

package/README.md

@@ -1,23 +1,38 @@
-# Go Captcha Vue Package
+<div align="center">
+<img width="120" style="padding-top: 50px; margin: 0;" src="http://47.104.180.148/go-captcha/gocaptcha_logo.svg?v=1"/>
+<h1 style="margin: 0; padding: 0">Go Captcha</h1>
+<p>Behavior Captcha For Vue</p>
+
+</div>
+
+<br/>
+
+> English | [中文](README_zh.md)
 
 <br/>
 
+<p> ⭐️ If it helps you, please give a star.</p>
+
+<img src="http://47.104.180.148/go-captcha/go-captcha-v2.jpg" alt="Poster">
+
+
 | Vue Version            | Go Captcha Version |
 |:-----------------------|:------------------:|
 | vue >= 2.7.14 && < 3.0 | go-captcha-vue@^1  |
 | vue >= 3.0             | go-captcha-vue@^2  |
 
 ## Install
+Greater than or equal to vue2.7.14 and less than vue3.0
 ```shell
-# Greater than or equal to vue2.7.14 and less than vue3.0
 yarn add go-captcha-vue@^1
 # or
 npm install go-captcha-vue@^1
 # or
 pnpm install go-captcha-vue@^1
+```
 
-############################################
-# Greater than vue3.0
+Greater than vue3.0
+```shell
 yarn add go-captcha-vue@^2
 # or
 npm install go-captcha-vue@^2
@@ -25,27 +40,44 @@ npm install go-captcha-vue@^2
 pnpm install go-captcha-vue@^2
 ```
 
-Use Go Captcha
+## Use Go Captcha
 ```ts
 import "go-captcha-vue/dist/style.css"
 import GoCaptcha from "go-captcha-vue"
 
 Vue.use(GoCaptcha)
+
+// OR
+import {Click, Rotate, Slide, SlideRegion, Button} from "go-captcha-vue";
+Vue.component('gocaptcha-click', Click)
+Vue.component('gocaptcha-rotate', Rotate)
+Vue.component('gocaptcha-slide', Slide)
+Vue.component('gocaptcha-slide-region', SlideRegion)
+Vue.component('gocaptcha-button', Button)
 ```
 
-## 🖖 Click Mode Captcha
+
+## Click Mode
 ```vue
 <gocaptcha-click
   :config="{}"
   :data="{}"
   :events="{}"
+  ref="domRef"
 />
+
+<script>
+  // call methods
+  const domRef = ref(null)
+  domRef.value.clear()
+  domRef.value.refresh()
+</script>
 ```
 
-### Parameter Reference
+
 ```ts
 // config = {}
-interface ClickConfig {
+interface Config {
   width?: number;
   height?: number;
   thumbWidth?: number;
@@ -60,21 +92,21 @@ interface ClickConfig {
 }
 
 // data = {}
-interface ClickData {
+interface Data {
   image: string;
   thumb: string;
 }
 
 // events = {}
-interface ClickEvents {
+interface Events {
   click?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
   confirm?: (dots: Array<ClickDot>, reset:() => void) => boolean;
 }
 
-// component method
-interface ClickExpose {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
@@ -82,21 +114,24 @@ interface ClickExpose {
 }
 ```
 
-## 🖖 Slide Mode Captcha
+## Slide Mode
 ```vue
 <gocaptcha-slide
   :config="{}"
   :data="{}"
   :events="{}"
+  ref="domRef"
 />
 
-<gocaptcha-slide-region
-  :config="{}"
-  :data="{}"
-  :events="{}"
-/>
+<script>
+// call methods
+const domRef = ref(null)
+domRef.value.clear()
+domRef.value.refresh()
+</script>
 ```
-### Parameter Reference
+
+
 ```ts
 // config = {}
 interface SlideConfig {
@@ -130,14 +165,33 @@ interface SlideEvents {
   confirm?: (point: SlidePoint, reset:() => void) => boolean;
 }
 
-// component method
-interface SlideExpose {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
   close: () => void,
 }
 ```
+
+## Drag-And-Drop Mode
+```vue
+<gocaptcha-slide-region
+  :config="{}"
+  :data="{}"
+  :events="{}"
+  ref="domRef"
+/>
+
+<script>
+// call methods
+const domRef = ref(null)
+domRef.value.clear()
+domRef.value.refresh()
+</script>
+```
+
+
 ```ts
 // config = {}
 interface SlideRegionConfig {
@@ -171,9 +225,8 @@ interface SlideRegionEvents {
   confirm?: (point: SlideRegionPoint, reset:() => void) => boolean;
 }
 
-
-// component method
-interface SlideRegionExpose {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
@@ -181,19 +234,27 @@ interface SlideRegionExpose {
 }
 ```
 
-## 🖖 Rotate Mode Captcha
+## Rotation Mode
 ```vue
 <gocaptcha-rotate
   :config="{}"
   :data="{}"
   :events="{}"
+  ref="domRef"
 />
+
+<script>
+// call methods
+const domRef = ref(null)
+domRef.value.clear()
+domRef.value.refresh()
+</script>
 ```
 
-### Parameter Reference
+
 ```ts
 // config = {}
-interface RotateConfig {
+interface Config {
   width?: number;
   height?: number;
   thumbWidth?: number;
@@ -207,22 +268,22 @@ interface RotateConfig {
 }
 
 // data = {}
-interface RotateData {
+interface Data {
   angle: number;
   image: string;
   thumb: string;
 }
 
 // events = {}
-interface RotateEvents {
+interface Events {
   rotate?: (angle: number) => void;
   refresh?: () => void;
   close?: () => void;
   confirm?: (angle: number, reset:() => void) => boolean;
 }
 
-// component method
-interface RotateExpose {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
@@ -231,12 +292,13 @@ interface RotateExpose {
 ```
 
 
+
 ## Button
 ```vue
 <gocaptcha-button @clickEvent="() => console.log('hello')"/>
 ```
 
-### params
+
 ```ts
 interface $Attr {
   config?: CaptchaConfig;
@@ -249,19 +311,10 @@ interface $Event {
   clickEvent?: ()=>void;     // event -> @clickEvent=""
 }
 
-export interface ButtonConfig {
+export interface CaptchaConfig {
   width?: number;
   height?: number;
   verticalPadding?: number;
   horizontalPadding?: number;
 }
-
 ```
-
-<br/>
-
-## 👍 Sponsor
-<div>
-<a href="http://gocaptcha.wencodes.com/sponsor/" target="_blank">http://gocaptcha.wencodes.com/sponsor/</a>
-</div>
-<br/>

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "go-captcha-vue",
-  "version": "1.0.3",
+  "version": "1.0.5-pre",
   "private": false,
   "type": "module",
   "license": "MIT",
-  "description": "This is the vue package for go-captcha",
+  "description": "GoCaptcha for Vue, which implements click mode, slider mode, drag-drop mode and rotation mode.",
   "keywords": [
     "go-captcha-vue",
     "go-captcha",
@@ -50,9 +50,6 @@
     "preview": "vite preview --port 5050",
     "type-check": "vue-tsc --noEmit -p tsconfig.json"
   },
-  "dependencies": {
-    "vue": "^2.7.14"
-  },
   "peerDependencies": {
     "vue": "<3"
   },
@@ -70,6 +67,7 @@
     "unplugin-vue2-script-setup": "^0.7.1",
     "vite": "^2.6.14",
     "vite-plugin-vue2": "^1.9.0",
+    "vue": "<3",
     "vue-demi": "^0.13.11",
     "vue-template-compiler": "^2.7.14",
     "vue-tsc": "^1.8.27"

package/dist/assets/icons/arrows-icon.vue.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/assets/icons/btn-default-icon.vue.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/assets/icons/btn-error-icon.vue.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/assets/icons/btn-success-icon.vue.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/assets/icons/btn-warn-icon.vue.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/assets/icons/close-icon.vue.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/assets/icons/loading-icon.vue.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/assets/icons/refresh-icon.vue.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/components/button/index.d.ts

@@ -1,7 +0,0 @@
-/**
- * @Author Awen
- * @Date 2024/06/01
- * @Email wengaolng@gmail.com
- **/
-import capt from './index.vue';
-export default capt;

package/dist/components/button/index.vue.d.ts

@@ -1,47 +0,0 @@
-import { ButtonConfig } from "./meta/config";
-import { ButtonType } from "@/components/button/meta/types";
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    [x: string]: any;
-    config?: ButtonConfig | undefined;
-    clickEvent?: (() => void) | undefined;
-    disabled?: boolean | undefined;
-    type?: ButtonType | undefined;
-    title?: string | undefined;
-}>, {
-    config: () => ButtonConfig;
-    disabled: boolean;
-    type: string;
-    title: string;
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "click-event": (...args: any[]) => void;
-}, string, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    [x: string]: any;
-    config?: ButtonConfig | undefined;
-    clickEvent?: (() => void) | undefined;
-    disabled?: boolean | undefined;
-    type?: ButtonType | undefined;
-    title?: string | undefined;
-}>, {
-    config: () => ButtonConfig;
-    disabled: boolean;
-    type: string;
-    title: string;
-}>>>, {}>;
-export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/components/button/meta/config.d.ts

@@ -1,12 +0,0 @@
-/**
- * @Author Awen
- * @Date 2024/06/01
- * @Email wengaolng@gmail.com
- **/
-export interface ButtonConfig {
-    width?: number;
-    height?: number;
-    verticalPadding?: number;
-    horizontalPadding?: number;
-}
-export declare const defaultConfig: () => ButtonConfig;

package/dist/components/click/hooks/handler.d.ts

@@ -1,20 +0,0 @@
-import { ClickData } from "../meta/data";
-import { ClickEvent } from "../meta/event";
-export declare function useHandler(_: ClickData, event: ClickEvent, clearCbs: () => void): {
-    dots: {
-        list: {
-            key: number;
-            index: number;
-            x: number;
-            y: number;
-        }[];
-    };
-    clickEvent: (e: Event | any) => boolean;
-    confirmEvent: (e: Event | any) => boolean;
-    closeEvent: (e: Event | any) => boolean;
-    refreshEvent: (e: Event | any) => boolean;
-    resetData: () => void;
-    clearData: () => void;
-    refresh: () => void;
-    close: () => void;
-};

package/dist/components/click/index.d.ts

@@ -1,2 +0,0 @@
-import capt from './index.vue';
-export default capt;

package/dist/components/click/index.vue.d.ts

@@ -1,45 +0,0 @@
-import { ClickConfig } from "./meta/config";
-import { ClickData } from "./meta/data";
-import { ClickEvent } from "./meta/event";
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    [x: string]: any;
-    config?: ClickConfig | undefined;
-    events?: ClickEvent | undefined;
-    data: ClickData;
-}>, {
-    config: () => ClickConfig;
-    events: () => ClickEvent;
-    data: () => ClickData;
-}>, {
-    reset: () => void;
-    clear: () => void;
-    refresh: () => void;
-    close: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    [x: string]: any;
-    config?: ClickConfig | undefined;
-    events?: ClickEvent | undefined;
-    data: ClickData;
-}>, {
-    config: () => ClickConfig;
-    events: () => ClickEvent;
-    data: () => ClickData;
-}>>>, {}>;
-export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/components/click/meta/config.d.ts

@@ -1,19 +0,0 @@
-/**
- * @Author Awen
- * @Date 2024/06/01
- * @Email wengaolng@gmail.com
- **/
-export interface ClickConfig {
-    width?: number;
-    height?: number;
-    thumbWidth?: number;
-    thumbHeight?: number;
-    verticalPadding?: number;
-    horizontalPadding?: number;
-    showTheme?: boolean;
-    title?: string;
-    buttonText?: string;
-    iconSize?: number;
-    dotSize?: number;
-}
-export declare const defaultConfig: () => ClickConfig;

package/dist/components/click/meta/data.d.ts

@@ -1,15 +0,0 @@
-/**
- * @Author Awen
- * @Date 2024/06/01
- * @Email wengaolng@gmail.com
- **/
-export interface ClickData {
-    image: string;
-    thumb: string;
-}
-export interface ClickDot {
-    key: number;
-    index: number;
-    x: number;
-    y: number;
-}

package/dist/components/click/meta/event.d.ts

@@ -1,12 +0,0 @@
-/**
- * @Author Awen
- * @Date 2024/06/01
- * @Email wengaolng@gmail.com
- **/
-import type { ClickDot } from "./data";
-export interface ClickEvent {
-    click?: (x: number, y: number) => void;
-    refresh?: () => void;
-    close?: () => void;
-    confirm?: (dots: Array<ClickDot>, reset: () => void) => void;
-}

package/dist/components/click/meta/expose.d.ts

@@ -1,11 +0,0 @@
-/**
- * @Author Awen
- * @Date 2024/011/16
- * @Email wengaolng@gmail.com
- **/
-export interface ClickExpose {
-    reset: () => void;
-    clear: () => void;
-    refresh: () => void;
-    close: () => void;
-}

package/dist/components/rotate/hooks/handler.d.ts

@@ -1,18 +0,0 @@
-import { RotateData } from "../meta/data";
-import { RotateEvent } from "../meta/event";
-import { Ref } from "vue";
-import { SlideConfig } from "@/components/slide/meta/config";
-export declare function useHandler(data: RotateData, event: RotateEvent, config: SlideConfig, rootRef: Ref, dragBlockRef: Ref, dragBarRef: Ref, clearCbs: () => void): {
-    state: {
-        dragLeft: number;
-        thumbAngle: number;
-        isFreeze: boolean;
-    };
-    dragEvent: (e: Event | any) => void;
-    closeEvent: (e: Event | any) => boolean;
-    refreshEvent: (e: Event | any) => boolean;
-    resetData: () => void;
-    clearData: () => void;
-    refresh: () => void;
-    close: () => void;
-};

package/dist/components/rotate/index.d.ts

@@ -1,2 +0,0 @@
-import capt from './index.vue';
-export default capt;

package/dist/components/rotate/index.vue.d.ts

@@ -1,45 +0,0 @@
-import { RotateConfig } from "./meta/config";
-import { RotateData } from "./meta/data";
-import { RotateEvent } from "./meta/event";
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    [x: string]: any;
-    config?: RotateConfig | undefined;
-    events?: RotateEvent | undefined;
-    data: RotateData;
-}>, {
-    config: () => RotateConfig;
-    events: () => RotateEvent;
-    data: () => RotateData;
-}>, {
-    reset: () => void;
-    clear: () => void;
-    refresh: () => void;
-    close: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    [x: string]: any;
-    config?: RotateConfig | undefined;
-    events?: RotateEvent | undefined;
-    data: RotateData;
-}>, {
-    config: () => RotateConfig;
-    events: () => RotateEvent;
-    data: () => RotateData;
-}>>>, {}>;
-export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/components/rotate/meta/config.d.ts

@@ -1,17 +0,0 @@
-/**
- * @Author Awen
- * @Date 2024/06/01
- * @Email wengaolng@gmail.com
- **/
-export interface RotateConfig {
-    width?: number;
-    height?: number;
-    size?: number;
-    verticalPadding?: number;
-    horizontalPadding?: number;
-    showTheme?: boolean;
-    title?: string;
-    iconSize?: number;
-    scope?: boolean;
-}
-export declare const defaultConfig: () => RotateConfig;

package/dist/components/rotate/meta/data.d.ts

@@ -1,11 +0,0 @@
-/**
- * @Author Awen
- * @Date 2024/06/01
- * @Email wengaolng@gmail.com
- **/
-export interface RotateData {
-    angle: number;
-    image: string;
-    thumb: string;
-}
-export declare const defaultRotateData: () => RotateData;