vue-toggles 2.2.1 → 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/dist/vue-toggles.js +23 -23
- package/dist/vue-toggles.umd.cjs +2 -2
- package/package.json +24 -23
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,65 +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
64
|
"test-id": "toggle",
|
|
65
65
|
onKeyup: [
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
f(g(n, ["prevent"]), ["enter"]),
|
|
67
|
+
f(g(n, ["prevent"]), ["space"])
|
|
68
68
|
],
|
|
69
|
-
onClick:
|
|
69
|
+
onClick: n
|
|
70
70
|
}, [
|
|
71
71
|
w("span", {
|
|
72
72
|
"aria-hidden": "true",
|
|
73
|
-
style:
|
|
73
|
+
style: s(x.value),
|
|
74
74
|
class: "vue-toggles__dot",
|
|
75
75
|
"test-id": "dot"
|
|
76
76
|
}, [
|
|
77
|
-
|
|
77
|
+
o.checkedText || o.uncheckedText ? (r(), h("span", {
|
|
78
78
|
key: 0,
|
|
79
79
|
class: "vue-toggles__text",
|
|
80
|
-
style:
|
|
80
|
+
style: s(m.value),
|
|
81
81
|
"test-id": "text"
|
|
82
|
-
},
|
|
82
|
+
}, b(l.value ? o.checkedText : o.uncheckedText), 5)) : T("", !0)
|
|
83
83
|
], 4)
|
|
84
84
|
], 44, C));
|
|
85
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",
|