Merge branch 'dev'

Author: juliandreas

.eslintrc.js

@@ -1,25 +1,57 @@
 name: CI/CD Pipeline
 
 on:
+  push:
+    branches:
+      - master
   pull_request:
     branches:
       - master
 
 jobs:
-  build_and_test:
+  test:
     runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type check
+        run: npm run typecheck
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Run tests with coverage
+        run: npm run test:ci
 
+  build:
+    needs: test
+    runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "22"
+          cache: "npm"
 
       - name: Install dependencies
-        run: npm install --also=peer
+        run: npm ci
+
+      - name: Build package
+        run: npm run build
 
-      - name: Run tests
-        run: npm run test:unit:once
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist/

.github/workflows/ci-cd.yml

@@ -8,17 +8,23 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.DS_Store
 dist
 dist-ssr
+coverage
 *.local
 
+/cypress/videos/
+/cypress/screenshots/
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
-.DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo

.gitignore

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "printWidth": 100,
+  "singleQuote": false
+}

.prettierrc.json

@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode"
   ]

.vscode/extensions.json

@@ -8,7 +8,7 @@ A highly customizable and accessible toggle component for Vue 3.
 </p>
 
 <p align="center">
-<img src="./public/vue-toggles.jpg" alt="Vue Toggles Logo"/>
+<img src="https://raw.githubusercontent.com/juliandreas/vue-toggles/master/public/vue-toggles.jpg" alt="Vue Toggles Logo"/>
 </p>
 
 ## Introduction
@@ -26,7 +26,7 @@ What's left for you, when it comes to accessibility, is labeling the toggle corr
 - A `<label for="example-id">Toggle description</label>` followed by the toggle component `<VueToggles id="example-id" />`
 - Or an `aria-label`, for example `<VueToggles aria-label="Toggle description" />`. Remember, you still need a visual text description of what the toggle does
 
-The `focus`-style is also left up to you — which you shouldn't remove. If you think the default is ugly, style it yourself!
+The `focus`-style is also left up to you - which you shouldn't remove. If you think the default is ugly, style it yourself!
 
 ## Installation
 
@@ -43,21 +43,25 @@ import { VueToggles } from "vue-toggles";
 ### Import types
 
 ```javascript
-import { type VueTogglesProps } from "vue-toggles";
+import type { VueTogglesProps } from "vue-toggles";
+```
+
+```javascript
+import VueToggles, { type VueTogglesProps } from "vue-toggles";
 ```
 
 ## Usage
 
 The toggle is very easy to use out of the box. The bare minimum for it to work is a `@click`-function and a `:value`-prop.
 
 ```html
-<VueToggles :value="example" @click="example = !example" />
+<VueToggles :value="isChecked" @click="isChecked = !isChecked" />
 ```
 
 Or if you prefer the `v-model`-syntax:
 
 ```html
-<VueToggles v-model="example" />
+<VueToggles v-model="isChecked" />
 ```
 
 ## Options
@@ -79,22 +83,23 @@ You can also add more props to customize things like color and width/height.
 
 ## Properties
 
-| Name               | Type             | Default   | Description                                       |
-| ------------------ | ---------------- | --------- | ------------------------------------------------- |
-| value              | Boolean          | `false`   | Initial state of the toggle button                |
-| disabled           | Boolean          | `false`   | Toggle does not react on mouse or keyboard events |
-| reverse            | Boolean          | `false`   | Reverse toggle to Right to Left                   |
-| height             | [String, Number] | `25`      | Height of the toggle in `px`                      |
-| width              | [String, Number] | `75`      | Width of the toggle in `px`                       |
-| dotColor           | String           | `#ffffff` | Color of the toggle dot                           |
-| uncheckedBg        | String           | `#939393` | Background color when the toggle is unchecked     |
-| checkedBg          | String           | `#5850ec` | Background color when the toggle is checked       |
-| uncheckedTextColor | String           | `#ffffff` | Text color when the toggle is unchecked           |
-| checkedTextColor   | String           | `#ffffff` | Text color when the toggle is checked             |
-| uncheckedText      | String           | `""`      | Optional text when the toggle is unchecked        |
-| checkedText        | String           | `""`      | Optional text when the toggle is checked          |
-| fontSize           | String           | `12`      | Font size in `px`                                 |
-| fontWeight         | String           | `normal`  | Font weight                                       |
+| Name               | Type    | Default   | Description                                       |
+| ------------------ | ------- | --------- | ------------------------------------------------- |
+| value              | Boolean | `false`   | Initial state of the toggle button                |
+| disabled           | Boolean | `false`   | Toggle does not react on mouse or keyboard events |
+| reverse            | Boolean | `false`   | Reverse toggle to Right to Left                   |
+| width              | Number  | `75`      | Width of the toggle in `px`                       |
+| height             | Number  | `25`      | Height of the toggle in `px`                      |
+| dotColor           | String  | `#ffffff` | Color of the toggle dot                           |
+| dotSize            | Number  | `0`       | Dot size in `px`                                  |
+| checkedBg          | String  | `#5850ec` | Background color when the toggle is checked       |
+| uncheckedBg        | String  | `#939393` | Background color when the toggle is unchecked     |
+| checkedTextColor   | String  | `#ffffff` | Text color when the toggle is checked             |
+| uncheckedTextColor | String  | `#ffffff` | Text color when the toggle is unchecked           |
+| uncheckedText      | String  | `""`      | Optional text when the toggle is unchecked        |
+| checkedText        | String  | `""`      | Optional text when the toggle is checked          |
+| fontSize           | Number  | `12`      | Font size in `px`                                 |
+| fontWeight         | String  | `normal`  | Font weight                                       |
 
 ## Vue 2 support
 

README.md

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import VueToggles from "./components/VueToggles.vue";
+import VueToggles from "../src/components/VueToggles.vue";
 
 const isChecked = ref(false);
 </script>

src/App.vue renamed to dev/App.vue

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="./main.ts"></script>
   </body>
 </html>