https://github.com/j2only/slide-unlock
🎚️Vue.js slide to unlock component. Protect users from accidental clicks. Written entirely on Vue 3 Composition API with Typescript and Vite. Coated with tests using Cypress.
https://github.com/j2only/slide-unlock
slide-to-unlock tests typescript vite vue vue3-composition-api
Last synced: about 2 months ago
JSON representation
🎚️Vue.js slide to unlock component. Protect users from accidental clicks. Written entirely on Vue 3 Composition API with Typescript and Vite. Coated with tests using Cypress.
- Host: GitHub
- URL: https://github.com/j2only/slide-unlock
- Owner: j2only
- License: mit
- Created: 2021-04-25T17:20:16.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2025-02-17T08:31:31.000Z (over 1 year ago)
- Last Synced: 2025-10-26T16:46:25.447Z (8 months ago)
- Topics: slide-to-unlock, tests, typescript, vite, vue, vue3-composition-api
- Language: Vue
- Homepage: https://j2only.github.io/slide-unlock/
- Size: 13.3 MB
- Stars: 35
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @j2only/slide-unlock
 [](https://www.npmjs.com/package/@j2only/slide-unlock)   [](https://www.typescriptlang.org/) [](https://github.com/j2only/slide-unlock/issues)
Vue.js slide to unlock component. Protect users from accidental clicks or protect your web app from bot attack.
Written entirely on Vue 3 Composition API with Typescript and Vite. Coated with tests using Cypress. Compatible only with Vue.js 3.x.
You can check a [DEMO HERE](https://j2only.github.io/slide-unlock/)
## Test coverage
| Statements | Branches | Functions | Lines |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
|  |  |  |  |
## Installation
Install this component via package manager:
```bash
yarn add @j2only/slide-unlock
```
or
```shell
npm install --save @j2only/slide-unlock
```
[](https://www.npmjs.com/package/@j2only/slide-unlock)
## Usage
Import the component in your app and pass some settings:
```javascript
import SlideUnlock from "@j2only/slide-unlock"
export default {
components: {
SlideUnlock
}
}
```
As you can see, the component accepts some props:
| Prop | Type | Default | Description |
| ----------- | ------- | ----------------- | --------------------------------------------------------------------- |
| autoWidth | Boolean | true | Auto width for component |
| circle | Boolean | true | All parts of component will be with border-radius and rounded handler |
| disabled | Boolean | false | Disable interaction with component |
| noanimate | Boolean | false | Disable css animations (but not css transitions) |
| width | Number | 400 | Width of element (ignored if autoWidth is true) |
| height | Number | 60 | Height of element |
| position | Number | 0 | Progress percent (to emulate sliding) |
| text | String | "slide to unlock" | Text on element |
| successText | String | "success" | Text on element when slide is completed |
| name | String | "slideunlock" | Unique ID, in case of using several components on one page |
Also, you can customize some styles via CSS Variables:
| Variable | Default | Description |
| ------------------------------- | ------- | ------------------------------------------------ |
| --su-size-text | 24px | Font size of text on element |
| --su-size-padding | 6px | Padding on element from progressbar |
| --su-color-bg | #ebebeb | Background color of element. |
| --su-color-progress-normal-bg | #cacaca | Color of progressbar |
| --su-color-progress-complete-bg | #42b983 | Color of progressbar when slide is completed |
| --su-color-text-normal | #4F4F4F | Color of text on element |
| --su-color-text-complete | #FEFEFE | Color of text on element when slide is completed |
| --su-color-handler-bg | #FFFFFF | Color of handler |
| --su-icon-handler | base64 | Icon of handler |
## Events
```javascript
```
Emitted when pass verify, the handler swiped to the right side.
## Reset state
If you want to reset the state of a component, you need to assign a ref to the component
```javascript
```
And then you need to call the "reset" method
```javascript
const vueSlideUnlockRef = ref()
const resetComponent = () => {
vueSlideUnlockRef.value.reset()
}
```
## Completed state
If you want to get the сompleted state of a component, you need to call the "complete" method
```javascript
const unlockComponent = () => {
vueSlideUnlockRef.value.complete()
}
```
## Licensing
MIT License