Skip to content

Commit

Permalink
Merge branch 'dev'
Browse files Browse the repository at this point in the history
  • Loading branch information
juliandreas committed Jan 2, 2025
2 parents 1989739 + 899867e commit e288edb
Show file tree
Hide file tree
Showing 24 changed files with 5,579 additions and 2,270 deletions.
30 changes: 0 additions & 30 deletions .eslintrc.js

This file was deleted.

48 changes: 40 additions & 8 deletions .github/workflows/ci-cd.yml
Original file line number Diff line number Diff line change
@@ -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/
8 changes: 7 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
5 changes: 5 additions & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"printWidth": 100,
"singleQuote": false
}
1 change: 0 additions & 1 deletion .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
{
"recommendations": [
"Vue.volar",
"Vue.vscode-typescript-vue-plugin",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
Expand Down
47 changes: 26 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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

Expand All @@ -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
Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/App.vue → dev/App.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
4 changes: 2 additions & 2 deletions index.html → dev/index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand All @@ -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>
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes.
66 changes: 66 additions & 0 deletions eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import pluginVue from "eslint-plugin-vue";
import vueTsEslintConfig from "@vue/eslint-config-typescript";
import pluginVitest from "@vitest/eslint-plugin";
import skipFormatting from "@vue/eslint-config-prettier/skip-formatting";

export default [
{
name: "app/files-to-lint",
files: ["**/*.{ts,mts,tsx,vue}"],
},

{
name: "app/files-to-ignore",
ignores: ["**/dist/**", "**/dist-ssr/**", "**/coverage/**"],
},

...pluginVue.configs["flat/recommended"],
...vueTsEslintConfig(),

{
...pluginVitest.configs.recommended,
files: ["src/**/__tests__/*"],
},
skipFormatting,

{
rules: {
"no-console": "warn",
"no-debugger": "warn",
"no-var": "error",
"prefer-const": "error",
"no-new-object": "error",
"object-shorthand": "error",
"no-array-constructor": "error",
"prefer-destructuring": "error",
"prefer-template": "error",
"func-style": "error",
"no-loop-func": "error",
"prefer-rest-params": "error",
"default-param-last": "error",
"no-param-reassign": "error",
"prefer-spread": "error",
"prefer-arrow-callback": "error",
"no-duplicate-imports": "error",
"dot-notation": "error",
"no-unneeded-ternary": "error",
"no-warning-comments": "warn",
"no-unused-vars": "off", // Handled by "@typescript-eslint/no-unused-vars"
},
},
{
rules: {
"@typescript-eslint/ban-ts-comment": "warn",
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-unused-vars": [
"error",
{
args: "all",
argsIgnorePattern: "^_",
caughtErrorsIgnorePattern: "^_",
},
],
},
},
];
Loading

0 comments on commit e288edb

Please sign in to comment.