Global refactoring

.browserslistrc

@@ -1,4 +1,3 @@
 > 1%
 last 2 versions
 not dead
-not ie 11

.eslintrc.cjs

@@ -39,6 +39,7 @@ module.exports = {
 
         "array-bracket-spacing": ["error", "never"],
         "vue/array-bracket-spacing": ["error", "never"],
+        curly: ["error", "multi-or-nest"],
         "object-curly-spacing": ["error", "always"],
         "vue/object-curly-spacing": ["error", "always"],
         "block-spacing": ["error", "always"],
@@ -133,8 +134,8 @@ module.exports = {
         },
         {
             files: [
-                "./demo/src/App.vue",
-                "./src/SlideUnlock.vue"
+                "./lib/SlideUnlock.vue",
+                "./src/App.vue"
             ],
             rules: {
                 "max-len": 0

.github/workflows/demo.yml

@@ -8,14 +8,28 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Install and Build 🔧
+      - name: Set Node.js 18.x 📐
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+
+      - name: Enable Corepack for Yarn 4
         run: |
-          yarn
-          yarn demo
+          corepack enable
+
+      - name: Install 💻
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: install
+
+      - name: Build 🔧
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: build:demo
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4
         with:
-          folder: demo-dist # The folder the action should deploy.
+          folder: dist # The folder the action should deploy.

.github/workflows/npm.yml

@@ -6,14 +6,28 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
-      - name: Install dependencies and build 🔧
-        run: yarn && yarn build
+
+      - name: Enable Corepack for Yarn 4
+        run: |
+          corepack enable
+
+      - name: Install 💻
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: install
+
+      - name: Build 🔧
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: build
+
       - name: Publish package on NPM 📦
-        run: npm publish
+        run: npm publish --access=public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.nycrc.json

@@ -0,0 +1,16 @@
+{
+    "all": true,
+    "extends": "@istanbuljs/nyc-config-typescript",
+    "check-coverage": true,
+    "include": [
+        "src/*.vue",
+        "lib/*.vue"
+    ],
+    "exclude": [
+        "cypress/**/*.*",
+        "**/*.d.ts",
+        "**/*.cy.tsx",
+        "**/*.cy.ts",
+        "**/*.spec.ts"
+    ]
+}

.stylelintrc

@@ -5,7 +5,8 @@
         "stylelint-config-recommended-vue"
     ],
     "plugins": [
-        "stylelint-scss"
+        "stylelint-scss",
+        "@stylistic/stylelint-plugin"
     ],
     "rules": {
         "rule-empty-line-before": null,
@@ -21,6 +22,12 @@
                 ]
             }
         ],
-        "scss/selector-no-redundant-nesting-selector": true
+        "scss/selector-no-redundant-nesting-selector": true,
+        "@stylistic/indentation": [
+            4,
+            {
+                "baseIndentLevel": 0
+            }
+        ]
     }
 }

.stylelintrc-format

@@ -2,12 +2,12 @@
     "extends": [
         "stylelint-config-standard-scss",
         "stylelint-config-html",
-        "stylelint-config-recommended-vue",
-        "stylelint-config-property-sort-order-smacss"
+        "stylelint-config-recommended-vue"
     ],
     "plugins": [
         "stylelint-scss",
-        "stylelint-order"
+        "stylelint-order",
+        "@stylistic/stylelint-plugin"
     ],
     "overrides": [
         {
@@ -22,6 +22,7 @@
         "at-rule-empty-line-before": "never",
         "at-rule-no-unknown": null,
         "color-no-invalid-hex": true,
+        "color-function-notation": "modern",
         "no-descending-specificity": null,
         "selector-type-no-unknown": [
             true,
@@ -32,6 +33,13 @@
             }
         ],
         "scss/selector-no-redundant-nesting-selector": true,
+        "@stylistic/indentation": [
+            4,
+            {
+                "baseIndentLevel": 0
+            }
+        ],
+        "@stylistic/color-hex-case": "lower",
         "order/order": [
             "declarations",
             {

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

README.md

@@ -1,9 +1,136 @@
-# Package is deprecated
+# vue-slide-unlock
 
-Please, migrate to [@j2only/slide-unlock](https://www.npmjs.com/package/@j2only/slide-unlock)
+ ![npm publish](https://github.com/j2only/vue-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/vue-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/vue-slide-unlock/issues) ![GitHub](https://img.shields.io/github/license/j2only/vue-slide-unlock)
+
+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/vue-slide-unlock/)
+
+![Preview](preview.gif)
+
+## Test coverage
+
+| Statements                                                                               | Branches                                                                             | Functions                                                                              | Lines                                                                          |
+| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
+| ![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) |
+
+## Installation
+
+Install this component via package manager:
 
 ```bash
-yarn add @j2only/slide-unlock
+yarn add @jsonly/slide-unlock
+```
+
+or
+
+```shell
+npm install --save @jsonly/slide-unlock
 ```
 
 [![https://nodei.co/npm/@j2only/slide-unlock.png?downloads=true&downloadRank=true&stars=true](https://nodei.co/npm/@j2only/slide-unlock.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/@j2only/slide-unlock)
+
+## Usage
+
+Import the component in your app and pass some settings:
+
+```javascript
+<template>
+    <slide-unlock
+        ref="vueslideunlock"
+        :auto-width="true"
+        :circle="true"
+        :disabled="false"
+        :noanimate="false"
+        :width="400"
+        :height="60"
+        text="slide to unlock"
+        success-text="success"
+        name="slideunlock"
+        @completed="complete()"
+    />
+</template>
+
+<script>
+import SlideUnlock from "vue-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                                                     |
+| 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                                  |
+
+## Event
+
+```javascript
+this.$emit("completed")
+```
+
+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
+<template>
+    <slide-unlock ref="vueSlideUnlockRef" />
+</template>
+```
+
+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 vueSlideUnlockRef = ref()
+
+const resetComponent = () => {
+    vueSlideUnlockRef.value.complete()
+}
+```
+
+## Licensing
+
+MIT License

cypress.config.ts

@@ -1,9 +1,20 @@
 // cypress.config.ts
-import { defineConfig } from "cypress"
 import coverage from '@cypress/code-coverage/task'
+import { defineConfig } from "cypress"
 
 export default defineConfig({
+    env: {
+        codeCoverage: {
+            excludeSpecPattern: [
+                "*.cy.ts",
+                "*.spec.ts"
+            ]
+        }
+    },
+    projectId: "vue-slide-unlock",
     component: {
+        video: true,
+        experimentalMemoryManagement: true,
         devServer: {
             framework: "vue",
             bundler: "vite"

cypress/plugins/index.ts

@@ -0,0 +1,9 @@
+import '@cypress/code-coverage/support'
+
+module.exports = (on, config) => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require("@cypress/code-coverage/task")(on, config)
+    // IMPORTANT to return the config object
+    // with the any changed environment variables
+    return config
+}

cypress/support/component.ts

@@ -37,4 +37,4 @@ declare global {
 Cypress.Commands.add('mount', mount)
 
 // Example use:
-// cy.mount(MyComponent)
+// mount(MyComponent)