vue-toggles 2.2.0 → 2.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -4
- package/dist/vue-toggles.js +27 -24
- package/dist/vue-toggles.umd.cjs +2 -2
- package/package.json +24 -23
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ A highly customizable and accessible toggle component for Vue 3.
|
|
|
8
8
|
</p>
|
|
9
9
|
|
|
10
10
|
<p align="center">
|
|
11
|
-
<img src="
|
|
11
|
+
<img src="https://raw.githubusercontent.com/juliandreas/vue-toggles/refs/heads/master/dev/public/vue-toggles.jpg" alt="Vue Toggles Logo"/>
|
|
12
12
|
</p>
|
|
13
13
|
|
|
14
14
|
## Introduction
|
|
@@ -26,7 +26,7 @@ What's left for you, when it comes to accessibility, is labeling the toggle corr
|
|
|
26
26
|
- A `<label for="example-id">Toggle description</label>` followed by the toggle component `<VueToggles id="example-id" />`
|
|
27
27
|
- Or an `aria-label`, for example `<VueToggles aria-label="Toggle description" />`. Remember, you still need a visual text description of what the toggle does
|
|
28
28
|
|
|
29
|
-
The
|
|
29
|
+
The focus-style is also left up to you - which you shouldn't remove. If you think the default is ugly, style it yourself!
|
|
30
30
|
|
|
31
31
|
## Installation
|
|
32
32
|
|
|
@@ -46,18 +46,22 @@ import { VueToggles } from "vue-toggles";
|
|
|
46
46
|
import type { VueTogglesProps } from "vue-toggles";
|
|
47
47
|
```
|
|
48
48
|
|
|
49
|
+
```javascript
|
|
50
|
+
import VueToggles, { type VueTogglesProps } from "vue-toggles";
|
|
51
|
+
```
|
|
52
|
+
|
|
49
53
|
## Usage
|
|
50
54
|
|
|
51
55
|
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.
|
|
52
56
|
|
|
53
57
|
```html
|
|
54
|
-
<VueToggles :value="
|
|
58
|
+
<VueToggles :value="isChecked" @click="isChecked = !isChecked" />
|
|
55
59
|
```
|
|
56
60
|
|
|
57
61
|
Or if you prefer the `v-model`-syntax:
|
|
58
62
|
|
|
59
63
|
```html
|
|
60
|
-
<VueToggles v-model="
|
|
64
|
+
<VueToggles v-model="isChecked" />
|
|
61
65
|
```
|
|
62
66
|
|
|
63
67
|
## Options
|
package/dist/vue-toggles.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".vue-toggles{--toggle-transition-duration: .2s;--toggle-transition-timing: ease;display:flex;align-items:center;border-radius:9999px;overflow:hidden;transition:background-color var(--toggle-transition-duration) var(--toggle-transition-timing),width var(--toggle-transition-duration) var(--toggle-transition-timing),height var(--toggle-transition-duration) var(--toggle-transition-timing)}.vue-toggles__dot{position:relative;display:flex;align-items:center;border-radius:9999px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;transition:margin ease .2s}.vue-toggles__text{position:absolute;font-family:inherit;-webkit-user-select:none;user-select:none;white-space:nowrap}@media
|
|
2
|
-
import { defineComponent as k, ref as y, computed as
|
|
3
|
-
const C = ["aria-checked", "aria-readonly", "onKeyup"], B = 8,
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".vue-toggles{--toggle-transition-duration: .2s;--toggle-transition-timing: ease;display:flex;align-items:center;border-radius:9999px;overflow:hidden;transition:background-color var(--toggle-transition-duration) var(--toggle-transition-timing),width var(--toggle-transition-duration) var(--toggle-transition-timing),height var(--toggle-transition-duration) var(--toggle-transition-timing)}.vue-toggles__dot{position:relative;display:flex;align-items:center;border-radius:9999px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;transition:margin ease .2s}.vue-toggles__text{position:absolute;font-family:inherit;-webkit-user-select:none;user-select:none;white-space:nowrap}@media(prefers-reduced-motion){.vue-toggles,.vue-toggles *,.vue-toggles *:before,.vue-toggles *:after{animation:none!important;transition:none!important;transition-duration:none!important}}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
import { defineComponent as k, ref as y, computed as c, watchEffect as $, createElementBlock as h, openBlock as r, withKeys as f, normalizeStyle as s, withModifiers as g, createElementVNode as w, createCommentVNode as T, toDisplayString as b } from "vue";
|
|
3
|
+
const C = ["aria-checked", "aria-readonly", "onKeyup"], B = 8, i = 5, d = 3, V = /* @__PURE__ */ k({
|
|
4
4
|
__name: "VueToggles",
|
|
5
5
|
props: {
|
|
6
6
|
modelValue: { type: Boolean, default: void 0 },
|
|
@@ -21,62 +21,65 @@ const C = ["aria-checked", "aria-readonly", "onKeyup"], B = 8, s = 5, o = 3, V =
|
|
|
21
21
|
fontWeight: { default: "normal" }
|
|
22
22
|
},
|
|
23
23
|
emits: ["update:modelValue", "click"],
|
|
24
|
-
setup(
|
|
25
|
-
const e =
|
|
24
|
+
setup(o, { emit: p }) {
|
|
25
|
+
const e = o, u = p, l = y(e.value || e.modelValue), v = c(() => ({
|
|
26
26
|
width: `${e.width}px`,
|
|
27
27
|
height: `${e.height}px`,
|
|
28
28
|
background: l.value ? e.checkedBg : e.uncheckedBg,
|
|
29
29
|
opacity: e.disabled ? "0.5" : "1",
|
|
30
30
|
cursor: e.disabled ? "not-allowed" : "pointer"
|
|
31
|
-
})),
|
|
31
|
+
})), x = c(() => {
|
|
32
32
|
const t = e.dotSize || e.height - B, a = {
|
|
33
33
|
background: e.dotColor,
|
|
34
34
|
width: `${t}px`,
|
|
35
35
|
height: `${t}px`,
|
|
36
36
|
"min-width": `${t}px`,
|
|
37
37
|
"min-height": `${t}px`,
|
|
38
|
-
"margin-left": l.value ? `${e.width - t -
|
|
38
|
+
"margin-left": l.value ? `${e.width - t - i}px` : `${i}px`
|
|
39
39
|
};
|
|
40
|
-
return l.value ? e.reverse ? a["margin-left"] = `${
|
|
41
|
-
}),
|
|
40
|
+
return l.value ? e.reverse ? a["margin-left"] = `${i}px` : a["margin-left"] = `${e.width - t - i}px` : e.reverse ? a["margin-left"] = `${e.width - t - i}px` : a["margin-left"] = `${i}px`, a;
|
|
41
|
+
}), m = c(() => {
|
|
42
42
|
const t = {
|
|
43
43
|
"font-weight": e.fontWeight,
|
|
44
44
|
"font-size": `${e.fontSize}px`,
|
|
45
45
|
color: l.value && !e.disabled ? e.checkedTextColor : e.uncheckedTextColor,
|
|
46
|
-
right: l.value ? `${e.height -
|
|
47
|
-
left: l.value ? "auto" : `${e.height -
|
|
46
|
+
right: l.value ? `${e.height - d}px` : "auto",
|
|
47
|
+
left: l.value ? "auto" : `${e.height - d}px`
|
|
48
48
|
};
|
|
49
|
-
return l.value ? e.reverse ? (t.left = `${e.height -
|
|
50
|
-
}),
|
|
49
|
+
return l.value ? e.reverse ? (t.left = `${e.height - d}px`, t.right = "auto") : (t.right = `${e.height - d}px`, t.left = "auto") : e.reverse ? (t.right = `${e.height - d}px`, t.left = "auto") : (t.left = `${e.height - d}px`, t.right = "auto"), t;
|
|
50
|
+
}), n = () => {
|
|
51
51
|
e.disabled || (l.value = !l.value, u("update:modelValue", l.value), u("click"));
|
|
52
52
|
};
|
|
53
53
|
return $(() => {
|
|
54
54
|
e.value !== void 0 && e.modelValue !== void 0 && console.warn(
|
|
55
55
|
'Avoid using both "v-model" and ":value" at the same time. Choose one for better predictability.'
|
|
56
56
|
), l.value = e.value || e.modelValue;
|
|
57
|
-
}), (t, a) => (
|
|
57
|
+
}), (t, a) => (r(), h("span", {
|
|
58
58
|
class: "vue-toggles",
|
|
59
|
-
style:
|
|
59
|
+
style: s(v.value),
|
|
60
60
|
role: "switch",
|
|
61
61
|
tabindex: "0",
|
|
62
62
|
"aria-checked": l.value,
|
|
63
|
-
"aria-readonly":
|
|
63
|
+
"aria-readonly": o.disabled,
|
|
64
|
+
"test-id": "toggle",
|
|
64
65
|
onKeyup: [
|
|
65
|
-
|
|
66
|
-
|
|
66
|
+
f(g(n, ["prevent"]), ["enter"]),
|
|
67
|
+
f(g(n, ["prevent"]), ["space"])
|
|
67
68
|
],
|
|
68
|
-
onClick:
|
|
69
|
+
onClick: n
|
|
69
70
|
}, [
|
|
70
71
|
w("span", {
|
|
71
72
|
"aria-hidden": "true",
|
|
72
|
-
style:
|
|
73
|
-
class: "vue-toggles__dot"
|
|
73
|
+
style: s(x.value),
|
|
74
|
+
class: "vue-toggles__dot",
|
|
75
|
+
"test-id": "dot"
|
|
74
76
|
}, [
|
|
75
|
-
|
|
77
|
+
o.checkedText || o.uncheckedText ? (r(), h("span", {
|
|
76
78
|
key: 0,
|
|
77
79
|
class: "vue-toggles__text",
|
|
78
|
-
style:
|
|
79
|
-
|
|
80
|
+
style: s(m.value),
|
|
81
|
+
"test-id": "text"
|
|
82
|
+
}, b(l.value ? o.checkedText : o.uncheckedText), 5)) : T("", !0)
|
|
80
83
|
], 4)
|
|
81
84
|
], 44, C));
|
|
82
85
|
}
|
package/dist/vue-toggles.umd.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".vue-toggles{--toggle-transition-duration: .2s;--toggle-transition-timing: ease;display:flex;align-items:center;border-radius:9999px;overflow:hidden;transition:background-color var(--toggle-transition-duration) var(--toggle-transition-timing),width var(--toggle-transition-duration) var(--toggle-transition-timing),height var(--toggle-transition-duration) var(--toggle-transition-timing)}.vue-toggles__dot{position:relative;display:flex;align-items:center;border-radius:9999px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;transition:margin ease .2s}.vue-toggles__text{position:absolute;font-family:inherit;-webkit-user-select:none;user-select:none;white-space:nowrap}@media
|
|
2
|
-
(function(t,
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".vue-toggles{--toggle-transition-duration: .2s;--toggle-transition-timing: ease;display:flex;align-items:center;border-radius:9999px;overflow:hidden;transition:background-color var(--toggle-transition-duration) var(--toggle-transition-timing),width var(--toggle-transition-duration) var(--toggle-transition-timing),height var(--toggle-transition-duration) var(--toggle-transition-timing)}.vue-toggles__dot{position:relative;display:flex;align-items:center;border-radius:9999px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;transition:margin ease .2s}.vue-toggles__text{position:absolute;font-family:inherit;-webkit-user-select:none;user-select:none;white-space:nowrap}@media(prefers-reduced-motion){.vue-toggles,.vue-toggles *,.vue-toggles *:before,.vue-toggles *:after{animation:none!important;transition:none!important;transition-duration:none!important}}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
(function(t,d){typeof exports=="object"&&typeof module<"u"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(t=typeof globalThis<"u"?globalThis:t||self,t.VueToggles=d(t.Vue))})(this,(function(t){"use strict";const d=["aria-checked","aria-readonly","onKeyup"];return t.defineComponent({__name:"VueToggles",props:{modelValue:{type:Boolean,default:void 0},value:{type:Boolean,default:void 0},disabled:{type:Boolean},reverse:{type:Boolean},width:{default:75},height:{default:25},dotColor:{default:"#ffffff"},dotSize:{default:0},uncheckedBg:{default:"#939393"},checkedBg:{default:"#5850ec"},uncheckedTextColor:{default:"#ffffff"},checkedTextColor:{default:"#ffffff"},uncheckedText:{default:""},checkedText:{default:""},fontSize:{default:12},fontWeight:{default:"normal"}},emits:["update:modelValue","click"],setup(i,{emit:s}){const e=i,c=s,o=t.ref(e.value||e.modelValue),f=t.computed(()=>({width:`${e.width}px`,height:`${e.height}px`,background:o.value?e.checkedBg:e.uncheckedBg,opacity:e.disabled?"0.5":"1",cursor:e.disabled?"not-allowed":"pointer"})),r=t.computed(()=>{const l=e.dotSize||e.height-8,a={background:e.dotColor,width:`${l}px`,height:`${l}px`,"min-width":`${l}px`,"min-height":`${l}px`,"margin-left":o.value?`${e.width-l-5}px`:"5px"};return o.value?e.reverse?a["margin-left"]="5px":a["margin-left"]=`${e.width-l-5}px`:e.reverse?a["margin-left"]=`${e.width-l-5}px`:a["margin-left"]="5px",a}),h=t.computed(()=>{const l={"font-weight":e.fontWeight,"font-size":`${e.fontSize}px`,color:o.value&&!e.disabled?e.checkedTextColor:e.uncheckedTextColor,right:o.value?`${e.height-3}px`:"auto",left:o.value?"auto":`${e.height-3}px`};return o.value?e.reverse?(l.left=`${e.height-3}px`,l.right="auto"):(l.right=`${e.height-3}px`,l.left="auto"):e.reverse?(l.right=`${e.height-3}px`,l.left="auto"):(l.left=`${e.height-3}px`,l.right="auto"),l}),n=()=>{e.disabled||(o.value=!o.value,c("update:modelValue",o.value),c("click"))};return t.watchEffect(()=>{e.value!==void 0&&e.modelValue!==void 0&&console.warn('Avoid using both "v-model" and ":value" at the same time. Choose one for better predictability.'),o.value=e.value||e.modelValue}),(l,a)=>(t.openBlock(),t.createElementBlock("span",{class:"vue-toggles",style:t.normalizeStyle(f.value),role:"switch",tabindex:"0","aria-checked":o.value,"aria-readonly":i.disabled,"test-id":"toggle",onKeyup:[t.withKeys(t.withModifiers(n,["prevent"]),["enter"]),t.withKeys(t.withModifiers(n,["prevent"]),["space"])],onClick:n},[t.createElementVNode("span",{"aria-hidden":"true",style:t.normalizeStyle(r.value),class:"vue-toggles__dot","test-id":"dot"},[i.checkedText||i.uncheckedText?(t.openBlock(),t.createElementBlock("span",{key:0,class:"vue-toggles__text",style:t.normalizeStyle(h.value),"test-id":"text"},t.toDisplayString(o.value?i.checkedText:i.uncheckedText),5)):t.createCommentVNode("",!0)],4)],44,d))}})}));
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-toggles",
|
|
3
|
-
"version": "2.2.
|
|
4
|
-
"description": "A highly customizable and accessible toggle component for Vue
|
|
3
|
+
"version": "2.2.2",
|
|
4
|
+
"description": "A highly customizable and accessible toggle component for Vue 3",
|
|
5
5
|
"homepage": "https://github.com/juliandreas/vue-toggles#readme",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/juliandreas/vue-toggles/issues"
|
|
@@ -30,37 +30,38 @@
|
|
|
30
30
|
"dev": "vite",
|
|
31
31
|
"build": "vite build",
|
|
32
32
|
"preview": "vite preview",
|
|
33
|
-
"test": "vitest",
|
|
34
|
-
"test:ci": "vitest run",
|
|
35
33
|
"typecheck": "vue-tsc --noEmit",
|
|
36
|
-
"lint": "eslint .
|
|
34
|
+
"lint": "eslint .",
|
|
35
|
+
"lint:fix": "eslint . --fix",
|
|
37
36
|
"format": "prettier --write src/",
|
|
37
|
+
"format:check": "prettier --check src/",
|
|
38
|
+
"test": "vitest",
|
|
39
|
+
"test:ci": "vitest run",
|
|
38
40
|
"deploy": "npm run test:ci && npm run build && npm publish",
|
|
39
41
|
"deploy:beta": "npm run test:ci && npm run build && npm publish --tag beta"
|
|
40
42
|
},
|
|
41
43
|
"peerDependencies": {
|
|
42
|
-
"vue": "^3.5.
|
|
44
|
+
"vue": "^3.5.26"
|
|
43
45
|
},
|
|
44
46
|
"devDependencies": {
|
|
45
|
-
"@tsconfig/
|
|
46
|
-
"@types/
|
|
47
|
-
"@
|
|
48
|
-
"@
|
|
49
|
-
"@
|
|
50
|
-
"@vue/eslint-config-
|
|
51
|
-
"@vue/eslint-config-typescript": "^14.1.3",
|
|
47
|
+
"@tsconfig/node-lts": "^24.0.0",
|
|
48
|
+
"@types/node": "^24.10.4",
|
|
49
|
+
"@vitejs/plugin-vue": "^6.0.3",
|
|
50
|
+
"@vitest/eslint-plugin": "^1.6.4",
|
|
51
|
+
"@vue/eslint-config-prettier": "^10.2.0",
|
|
52
|
+
"@vue/eslint-config-typescript": "^14.6.0",
|
|
52
53
|
"@vue/test-utils": "^2.4.6",
|
|
53
|
-
"@vue/tsconfig": "^0.
|
|
54
|
-
"eslint": "^9.
|
|
55
|
-
"eslint-plugin-vue": "^
|
|
56
|
-
"
|
|
57
|
-
"prettier": "^3.
|
|
58
|
-
"typescript": "^5.
|
|
59
|
-
"vite": "^
|
|
54
|
+
"@vue/tsconfig": "^0.8.1",
|
|
55
|
+
"eslint": "^9.39.2",
|
|
56
|
+
"eslint-plugin-vue": "^10.6.2",
|
|
57
|
+
"happy-dom": "^20.0.11",
|
|
58
|
+
"prettier": "^3.7.4",
|
|
59
|
+
"typescript": "^5.9.3",
|
|
60
|
+
"vite": "^7.3.0",
|
|
60
61
|
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
61
|
-
"vite-plugin-dts": "^4.4
|
|
62
|
-
"vitest": "^
|
|
63
|
-
"vue-tsc": "^2.1
|
|
62
|
+
"vite-plugin-dts": "^4.5.4",
|
|
63
|
+
"vitest": "^4.0.16",
|
|
64
|
+
"vue-tsc": "^3.2.1"
|
|
64
65
|
},
|
|
65
66
|
"keywords": [
|
|
66
67
|
"vue",
|