npm package: @leminnow/vue-lemin-cropped-captcha
Description: Lemin Captcha is uniquely playful, robust, and effective. Through gamification, we are curing the pains of traditional CAPTCHA.
Latest version: 0.2.0

<div>
<br>

<p style="padding: 30px" align="center">
  <a href="https://leminnow.com">
    <img width="200" src="https://assets.website-files.com/60d493b79d3973812262066c/60d6025cca81ce4522c799ed_footer-logo.svg" >
  </a>
</p>
<p align="center">
  <a href="https://www.npmjs.com/package/@leminnow/vue-lemin-cropped-captcha">
    <img src="https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white">
  </a>
  <a>
    <img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white">
  </a>
  <a>
    <img src="https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D">
  </a>
</p>
<p align="center">
<a><img src="https://img.shields.io/npm/v/@leminnow/vue-lemin-cropped-captcha?style=for-the-badge"></a>
<a><img src="https://img.shields.io/npm/dw/@leminnow/vue-lemin-cropped-captcha?style=for-the-badge"></a>
<a><img src="https://img.shields.io/bundlephobia/min/@leminnow/vue-lemin-cropped-captcha?style=for-the-badge"></a>
<a><img src="https://img.shields.io/npms-io/final-score/@leminnow/vue-lemin-cropped-captcha?style=for-the-badge"></a>
<a><img src="https://img.shields.io/npms-io/quality-score/@leminnow/vue-lemin-cropped-captcha?style=for-the-badge"></a>
</p>

<br>

<h1>Vue Lemin Cropped Captcha</h1>
<p style="font-size: 20px">Lemin Captcha is uniquely playful, robust, and effective. Through gamification, we are curing the pains of traditional CAPTCHA.</p>

<br>
<br>
</div>

## Table Of Contents
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Usage](#usage)
- [Documentation](#documentation)
- [API](#api)

<br>

## <div id="getting-started"></div> Getting Started

### How can I get my `captchaId` ?
Select a puzzle captcha from <a href="https://dashboard.leminnow.com/products/captcha-list">your puzzle captchas</a>
<p style="padding: 30px">
<img style="max-width: 500px" src="https://s3.us-west-1.amazonaws.com/lemin.public/images/get_captcha_id.jpg" width="70%" height="auto">
</p>

Copy your `captchaId` from your puzzle's captcha script source

<br>

### How can I get my `containerId` ?

Click on **Advanced Settings** from the puzzle captcha of your choice

<p style="padding: 30px">
<img style="max-width: 500px" src="https://s3.us-west-1.amazonaws.com/lemin.public/images/get_container_id.jpg" width="70%" height="auto">
</p>

Copy your `containerId` from Captcha Div ID

<br>

## <div id="installation"></div> Installation
Installation with npm:

    npm install @leminnow/vue-lemin-cropped-captcha

Installation with yarn:

    yarn add @leminnow/vue-lemin-cropped-captcha
<br>

## <div id="usage"></div> Usage Examples

<br>

#### Using with vue3

```vue
<script setup lang="ts">
import {LeminCroppedCaptcha} from "@leminnow/vue-lemin-cropped-captcha";
import {ref} from "vue";

const captchaRef = ref();

function getCaptchaValue() {
  const values = captchaRef.value.getCaptchaValue();
  console.log(values);
}
</script>

<template>
    <LeminCroppedCaptcha
        ref="captchaRef"
        captcha-id="CROPPED_..."
        container-id="lemin-cropped-captcha"
    >
    </LeminCroppedCaptcha>
    <button @click="getCaptchaValue">Get Captcha Values</button>
</template>
```

<br>

#### Using with vue

```vue
<template>
  <div>
    <form>
      <!-- Your Captcha Id and Captcha Container Id -->
      <LeminCroppedCaptcha
          ref="captchaRef"
          captcha-id="CROPPED_..."
          container-id="...">
      </LeminCroppedCaptcha>
    </form>
    <button @click="getCaptchaValue">Get Captcha Values</button>
  </div>
</template>

<script>
import {LeminCroppedCaptcha} from "@leminnow/vue-lemin-cropped-captcha";

export default {
  name: 'App',
  components: {
    LeminCroppedCaptcha
  },
  methods: {
    getCaptchaValue() {
      const values = this.$refs.captchaRef.getCaptchaValue();
    }
  }
};
</script>
```

<br>

#### Using with `leminCroppedCaptcha` multiple instances

```vue
<template>
  <div>
    <form>
      <!-- Your Captcha Id and Captcha Container Id -->
      <LeminCroppedCaptcha
          ref="captchaRef"
          captcha-id="CROPPED_..."
          container-id="...">
      </LeminCroppedCaptcha>
    </form>
    <button @click="getCaptchaValue">Get Captcha Values</button>
  </div>
</template>

<script>
import {leminCroppedCaptcha, LeminCroppedCaptcha} from "@leminnow/vue-lemin-cropped-captcha";

export default {
  name: 'App',
  components: {
    LeminCroppedCaptcha
  },
  methods: {
    getCaptchaValue() {
      const values = leminCroppedCaptcha.getCaptcha('CROPPED_...').getCaptchaValue()
    }
  }
};
</script>
```

<br>

## <div id="documentation"></div> Documentation

### Click <a href="https://dashboard.leminnow.com/documentation/">here</a> to documentation for Lemin Cropped Captcha
### Click <a href="https://www.leminnow.com/developers">here</a> to developers guide

<br>

## <div id="api"></div> API

### Captcha Plugin Methods

|  Name                      | Return Type               | Parameter      |  Description     |
|----------------------------|---------------------------|----------------|  --------------- |
| `getCaptcha`               |  CaptchaInstance          |(CAPTCHA_KEY: Optional String) => | Returns the given CAPTCHA_KEY's captcha instance. If CAPTCHA_KEY is empty, it will return first captcha instance.|
| `getInstances`             |  CaptchaInstance{}        | (CAPTCHA_KEY: Optional String) => | Returns all the instances of captchas	                  |
| `destroyAll`               |  void                     | () =>                |  Destroys all captchas on the page.                |
| `reloadAll`                |  void                     | () =>               | Reload all captchas on the page.                 |

<br>

### Captcha Component Methods

|  Name                      | Return Type               | Parameter       | Description           |
|----------------------------|---------------------------|------------------|----------------------|
| `getCaptchaValue`          |  {"answer": "answer","challenge_id": "challenge_id"}|   () =>| Returns the captcha value on the page for needed validation |
| `isReady`                  |  boolean                     | () =>	             |  Returns the state of captcha	                    |
| `reloadPuzzle`             |  void                     |  () =>	             | Reloads puzzle, you may use it in fail scenarios.	                     |
| `onLoad`                   |  void                     |  (callbackFunction = function(){}) => | Calls the function when the captcha loaded.	                      |
| `loadPuzzleError`          |  void                     | (callbackFunction = function(){}) =>                 |    Calls the function when the captcha loaded.	                  |
| `destroyCaptcha`           |  void                     | () =>	               |  Destroys the captcha on the page	                    |
| `adjustSize`               |  void                     | () =>                 |                      |
| `execute`         | Promise<{"answer": "answer","challenge_id": "challenge_id"}> | () => |            | It initiates invisible captcha programmatically; it's only applicable for Invisible Captcha!
| `display`                  |  void                     | () =>                 |                      |
| `getToken`                 |  void                     | () =>                 |                      |
| `loadPuzzleImage`          |  void                     | () =>                 |                      |
| `setUserinfo`              |  void                     | () =>                 |                      |
| `stopRefreshing`           |  void                     | () =>                 |                      |