Skip to content

j2only/slide-unlock

Repository files navigation

@j2only/slide-unlock

npm publish npm npm bundle size (scoped) CodeFactor Grade TypeScript contributions welcome

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

Preview

Test coverage

Statements Branches Functions Lines
Statements Branches Functions Lines

Installation

Install this component via package manager:

yarn add @j2only/slide-unlock

or

npm install --save @j2only/slide-unlock

https://nodei.co/npm/@j2only/slide-unlock.png?downloads=true&downloadRank=true&stars=true

Usage

Import the component in your app and pass some settings:

<template>
    <slide-unlock
        ref="vueslideunlock"
        :auto-width="true"
        :circle="true"
        :width="400"
        :height="60"
        text="slide to unlock"
        success-text="success"
        name="slideunlock"
        @completed="complete()"
    />
</template>

<script>
import SlideUnlock from "@j2only/slide-unlock"

export default {
    components: {
        SlideUnlock
    }
}
</script>

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

<template>
    <slide-unlock ... @completed="alert('Unlocked!')" />
</template>

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

<template>
    <slide-unlock ref="vueSlideUnlockRef" />
</template>

And then you need to call the "reset" method

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

const unlockComponent = () => {
    vueSlideUnlockRef.value.complete()
}

Licensing

MIT License

About

🎚️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.

Topics

Resources

License

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •