{"id":48892273,"url":"https://github.com/j2only/slide-unlock","last_synced_at":"2026-04-16T09:05:44.102Z","repository":{"id":43344497,"uuid":"361491889","full_name":"j2only/slide-unlock","owner":"j2only","description":"🎚️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.","archived":false,"fork":false,"pushed_at":"2025-02-17T08:31:31.000Z","size":13991,"stargazers_count":35,"open_issues_count":3,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-26T16:46:25.447Z","etag":null,"topics":["slide-to-unlock","tests","typescript","vite","vue","vue3-composition-api"],"latest_commit_sha":null,"homepage":"https://j2only.github.io/slide-unlock/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/j2only.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-04-25T17:20:16.000Z","updated_at":"2025-09-29T11:09:54.000Z","dependencies_parsed_at":"2023-02-19T05:16:07.120Z","dependency_job_id":"2cc6527b-48cb-40b0-8d06-c9ad84e73c2c","html_url":"https://github.com/j2only/slide-unlock","commit_stats":{"total_commits":119,"total_committers":4,"mean_commits":29.75,"dds":"0.17647058823529416","last_synced_commit":"e9db411210f9193b181fac388a06baa970924ff0"},"previous_names":["j2only/vue-slide-unlock","j2only/slide-unlock","joseph2/vue-slide-unlock"],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/j2only/slide-unlock","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j2only%2Fslide-unlock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j2only%2Fslide-unlock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j2only%2Fslide-unlock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j2only%2Fslide-unlock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/j2only","download_url":"https://codeload.github.com/j2only/slide-unlock/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j2only%2Fslide-unlock/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31878856,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T07:36:03.521Z","status":"ssl_error","status_checked_at":"2026-04-16T07:35:53.576Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["slide-to-unlock","tests","typescript","vite","vue","vue3-composition-api"],"created_at":"2026-04-16T09:05:43.331Z","updated_at":"2026-04-16T09:05:44.088Z","avatar_url":"https://github.com/j2only.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @j2only/slide-unlock\n\n ![npm publish](https://github.com/j2only/slide-unlock/actions/workflows/npm.yml/badge.svg) [![npm](https://img.shields.io/npm/v/@j2only/slide-unlock.svg)](https://www.npmjs.com/package/@j2only/slide-unlock) ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/%40j2only/slide-unlock) ![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/j2only/slide-unlock) [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](https://www.typescriptlang.org/) [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/j2only/slide-unlock/issues)\n\nVue.js slide to unlock component. Protect users from accidental clicks or protect your web app from bot attack.\nWritten entirely on Vue 3 Composition API with Typescript and Vite. Coated with tests using Cypress. Compatible only with Vue.js 3.x.\n\nYou can check a [DEMO HERE](https://j2only.github.io/slide-unlock/)\n\n![Preview](preview.gif)\n\n## Test coverage\n\n| Statements                                                                               | Branches                                                                             | Functions                                                                              | Lines                                                                          |\n| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |\n| ![Statements](https://img.shields.io/badge/statements-100%25-brightgreen.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-100%25-brightgreen.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-100%25-brightgreen.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-100%25-brightgreen.svg?style=flat) |\n\n## Installation\n\nInstall this component via package manager:\n\n```bash\nyarn add @j2only/slide-unlock\n```\n\nor\n\n```shell\nnpm install --save @j2only/slide-unlock\n```\n\n[![https://nodei.co/npm/@j2only/slide-unlock.png?downloads=true\u0026downloadRank=true\u0026stars=true](https://nodei.co/npm/@j2only/slide-unlock.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://www.npmjs.com/package/@j2only/slide-unlock)\n\n## Usage\n\nImport the component in your app and pass some settings:\n\n```javascript\n\u003ctemplate\u003e\n    \u003cslide-unlock\n        ref=\"vueslideunlock\"\n        :auto-width=\"true\"\n        :circle=\"true\"\n        :width=\"400\"\n        :height=\"60\"\n        text=\"slide to unlock\"\n        success-text=\"success\"\n        name=\"slideunlock\"\n        @completed=\"complete()\"\n    /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport SlideUnlock from \"@j2only/slide-unlock\"\n\nexport default {\n    components: {\n        SlideUnlock\n    }\n}\n\u003c/script\u003e\n```\n\nAs you can see, the component accepts some props:\n\n| Prop        | Type    | Default           | Description                                                           |\n| ----------- | ------- | ----------------- | --------------------------------------------------------------------- |\n| autoWidth   | Boolean | true              | Auto width for component                                              |\n| circle      | Boolean | true              | All parts of component will be with border-radius and rounded handler |\n| disabled    | Boolean | false             | Disable interaction with component                                    |\n| noanimate   | Boolean | false             | Disable css animations (but not css transitions)                      |\n| width       | Number  | 400               | Width of element (ignored if autoWidth is true)                       |\n| height      | Number  | 60                | Height of element                                                     |\n| position    | Number  | 0                 | Progress percent (to emulate sliding)                                 |\n| text        | String  | \"slide to unlock\" | Text on element                                                       |\n| successText | String  | \"success\"         | Text on element when slide is completed                               |\n| name        | String  | \"slideunlock\"     | Unique ID, in case of using several components on one page            |\n\nAlso, you can customize some styles via CSS Variables:\n\n| Variable                        | Default | Description                                      |\n| ------------------------------- | ------- | ------------------------------------------------ |\n| --su-size-text                  | 24px    | Font size of text on element                     |\n| --su-size-padding               | 6px     | Padding on element from progressbar              |\n| --su-color-bg                   | #ebebeb | Background color of element.                     |\n| --su-color-progress-normal-bg   | #cacaca | Color of progressbar                             |\n| --su-color-progress-complete-bg | #42b983 | Color of progressbar when slide is completed     |\n| --su-color-text-normal          | #4F4F4F | Color of text on element                         |\n| --su-color-text-complete        | #FEFEFE | Color of text on element when slide is completed |\n| --su-color-handler-bg           | #FFFFFF | Color of handler                                 |\n| --su-icon-handler               | base64  | Icon of handler                                  |\n\n## Events\n\n```javascript\n\u003ctemplate\u003e\n    \u003cslide-unlock ... @completed=\"alert('Unlocked!')\" /\u003e\n\u003c/template\u003e\n```\n\nEmitted when pass verify, the handler swiped to the right side.\n\n## Reset state\n\nIf you want to reset the state of a component, you need to assign a ref to the component\n\n```javascript\n\u003ctemplate\u003e\n    \u003cslide-unlock ref=\"vueSlideUnlockRef\" /\u003e\n\u003c/template\u003e\n```\n\nAnd then you need to call the \"reset\" method\n\n```javascript\nconst vueSlideUnlockRef = ref()\n\nconst resetComponent = () =\u003e {\n    vueSlideUnlockRef.value.reset()\n}\n```\n\n## Completed state\n\nIf you want to get the сompleted state of a component, you need to call the \"complete\" method\n\n```javascript\nconst unlockComponent = () =\u003e {\n    vueSlideUnlockRef.value.complete()\n}\n```\n\n## Licensing\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj2only%2Fslide-unlock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fj2only%2Fslide-unlock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj2only%2Fslide-unlock/lists"}