# vue-rotate-captcha

> Refer Project: [react-slide-captcha](https://github.com/Roxyhuang/react-slide-captcha)

Latest version **0.1.0** (published 2023-09-04) · 0 weekly downloads

## Install

```sh
npm install vue-rotate-captcha
pnpm add vue-rotate-captcha
yarn add vue-rotate-captcha
bun add vue-rotate-captcha
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-09-04 |
| First published | 2023-09-04 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | wupanwei |

## Links

- npm: https://www.npmjs.com/package/vue-rotate-captcha
- npm.io page: https://npm.io/package/vue-rotate-captcha

## Dependencies (1)

- [svg-inline-loader](https://npm.io/package/svg-inline-loader.md) ^0.8.2

## Recent versions

- 0.1.0 (latest) — 2023-09-04

## README

# vue-rotate-captcha
Refer Project: [react-slide-captcha](https://github.com/Roxyhuang/react-slide-captcha)

## 0.Screenshot


![exmaple](screenshot/example.png)


## 1.Usage

### (1) Installation

TODO

### (2) requirement

```markdown
1. vue 
```

### (3) simple example

```js
import RotateCaptcha from 'vue-rotate-captcha';
import 'vue-rotate-captcha/dist/styles.css';

<RotateCaptcha
   :imageUrl="state.imageUrl"
   @validate="validateCallback"
/>


```

## 2 Live Demo

TODO


## 3 API （0.1.0）


### RotateCaptcha

| Properties | Descrition | Type | Default|
| ------ | ------ | ------ |----------|
| **isLoading**| loading status（optional） | boolean | false |
| **imageUrl** | URL for puzzle image（required） | string | - |
| **@validate** | requeset callback（required）  | (context: Validation) => void| - |
<!-- | **containerClassName** | container class（optional） | any | -|
| **style**| container style（optional） | object | - |
| **tipsText**| text for tips（optional） | string | - |
| **tipsClassName** | tips class（optional） | any | -|
| **tipsStyle**| tips style（optional） | object | - |
| **robotValidate**| robot validate config（optional） | object: {  offsetY: number, handler: () => any,} | - |
| **reset**| component reset type **auto/manual** （optional） | string | auto |
| **resetButton**| component reset type **none/inline/outline**（optional） | JSX.Element | 'auto' |
| **resetButtonElement**| component reset type（optional） | string | default button svg |
| **onReset**| reset call back（optional） | () => any | - |
| **imagePosition**| bg image position type **top/bottom** （optional） | string | 'bottom' |
| **loadingIcon**| loading icon（optional） | JSX.Element | defalut loading svg |
| **displayType**| display type **hover/static**（optional） | string | 'hover' |
| **hoverPanelStyle**| hover panel style（optional） | object | - |
| **hoverPanelClassName**| hover panel className（optional） | string| - | -->

### ValidationContext

```ts
export type ValidationContext = {
  readonly widthPercentage: number,
  readonly rotationDegree: number,
  readonly success: (callback: () => any) => void,
  readonly fail: (callback: () => any) => void,
  readonly reset: (isReset?: boolean) => void,
}
```

## 4 License
This entire project are built based on MIT license

MIT

---
_Source: https://npm.io/package/vue-rotate-captcha · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._