vue-toggles 2.0.0 → 2.1.0
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 +9 -3
- package/dist/components/VueToggles.vue.d.ts +14 -2
- package/dist/vue-toggles.js +37 -31
- package/dist/vue-toggles.umd.cjs +1 -1
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -54,6 +54,12 @@ The toggle is very easy to use out of the box. The bare minimum for it to work i
|
|
|
54
54
|
<VueToggles :value="example" @click="example = !example" />
|
|
55
55
|
```
|
|
56
56
|
|
|
57
|
+
Or if you prefer the `v-model`-syntax:
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<VueToggles v-model="example" />
|
|
61
|
+
```
|
|
62
|
+
|
|
57
63
|
## Options
|
|
58
64
|
|
|
59
65
|
You can also add more props to customize things like color and width/height.
|
|
@@ -61,8 +67,8 @@ You can also add more props to customize things like color and width/height.
|
|
|
61
67
|
```html
|
|
62
68
|
<VueToggles
|
|
63
69
|
:value="value"
|
|
64
|
-
height="30"
|
|
65
|
-
width="90"
|
|
70
|
+
:height="30"
|
|
71
|
+
:width="90"
|
|
66
72
|
checkedText="On"
|
|
67
73
|
uncheckedText="Off"
|
|
68
74
|
checkedBg="#b4d455"
|
|
@@ -92,7 +98,7 @@ You can also add more props to customize things like color and width/height.
|
|
|
92
98
|
|
|
93
99
|
## Vue 2 support
|
|
94
100
|
|
|
95
|
-
If you're looking for
|
|
101
|
+
If you're looking for Vue 2 support, the `1.1.4`version is available [here](https://www.npmjs.com/package/vue-toggles/v/1.1.4).
|
|
96
102
|
|
|
97
103
|
## License
|
|
98
104
|
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
declare const _default: import("vue").DefineComponent<{
|
|
2
|
+
modelValue: {
|
|
3
|
+
type: import("vue").PropType<boolean>;
|
|
4
|
+
default: undefined;
|
|
5
|
+
};
|
|
2
6
|
value: {
|
|
3
7
|
type: import("vue").PropType<boolean>;
|
|
4
|
-
|
|
8
|
+
default: undefined;
|
|
5
9
|
};
|
|
6
10
|
disabled: {
|
|
7
11
|
type: import("vue").PropType<boolean>;
|
|
@@ -54,11 +58,16 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
54
58
|
default: string;
|
|
55
59
|
};
|
|
56
60
|
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
61
|
+
"update:modelValue": (args_0: boolean) => void;
|
|
57
62
|
click: (args_0: void) => void;
|
|
58
63
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
64
|
+
modelValue: {
|
|
65
|
+
type: import("vue").PropType<boolean>;
|
|
66
|
+
default: undefined;
|
|
67
|
+
};
|
|
59
68
|
value: {
|
|
60
69
|
type: import("vue").PropType<boolean>;
|
|
61
|
-
|
|
70
|
+
default: undefined;
|
|
62
71
|
};
|
|
63
72
|
disabled: {
|
|
64
73
|
type: import("vue").PropType<boolean>;
|
|
@@ -111,8 +120,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
111
120
|
default: string;
|
|
112
121
|
};
|
|
113
122
|
}>> & {
|
|
123
|
+
"onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
|
|
114
124
|
onClick?: ((args_0?: void | undefined) => any) | undefined;
|
|
115
125
|
}, {
|
|
126
|
+
modelValue: boolean;
|
|
127
|
+
value: boolean;
|
|
116
128
|
width: number;
|
|
117
129
|
height: number;
|
|
118
130
|
dotColor: string;
|
package/dist/vue-toggles.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".vue-toggles{display:flex;align-items:center;border-radius:9999px;overflow:hidden;transition:background-color ease .2s,width ease .2s,height ease .2s}.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(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
-
import { defineComponent as
|
|
3
|
-
const
|
|
2
|
+
import { defineComponent as p, ref as v, watchEffect as x, computed as a, openBlock as h, createElementBlock as u, normalizeStyle as i, withKeys as n, withModifiers as s, createElementVNode as m, toDisplayString as y, createCommentVNode as k } from "vue";
|
|
3
|
+
const $ = ["aria-checked", "aria-readonly", "onKeyup"], b = /* @__PURE__ */ p({
|
|
4
4
|
__name: "VueToggles",
|
|
5
5
|
props: {
|
|
6
|
-
|
|
6
|
+
modelValue: { type: Boolean, default: void 0 },
|
|
7
|
+
value: { type: Boolean, default: void 0 },
|
|
7
8
|
disabled: { type: Boolean },
|
|
8
9
|
reverse: { type: Boolean },
|
|
9
10
|
width: { default: 75 },
|
|
@@ -18,64 +19,69 @@ const k = ["aria-checked", "aria-disabled", "aria-readonly", "onKeyup"], $ = /*
|
|
|
18
19
|
fontSize: { default: 12 },
|
|
19
20
|
fontWeight: { default: "normal" }
|
|
20
21
|
},
|
|
21
|
-
emits: ["click"],
|
|
22
|
-
setup(
|
|
23
|
-
const e =
|
|
22
|
+
emits: ["update:modelValue", "click"],
|
|
23
|
+
setup(r, { emit: d }) {
|
|
24
|
+
const e = r, l = v(e.value || e.modelValue);
|
|
25
|
+
x(() => {
|
|
26
|
+
e.value !== void 0 && e.modelValue !== void 0 && console.warn(
|
|
27
|
+
'Avoid using both "v-model" and ":value" at the same time. Choose one for better predictability.'
|
|
28
|
+
), l.value = e.value || e.modelValue;
|
|
29
|
+
});
|
|
30
|
+
const c = a(() => ({
|
|
24
31
|
width: `${e.width}px`,
|
|
25
32
|
height: `${e.height}px`,
|
|
26
|
-
background:
|
|
33
|
+
background: l.value ? e.checkedBg : e.uncheckedBg,
|
|
27
34
|
opacity: e.disabled ? "0.5" : "1",
|
|
28
35
|
cursor: e.disabled ? "not-allowed" : "pointer"
|
|
29
|
-
})),
|
|
36
|
+
})), f = a(() => {
|
|
30
37
|
const t = {
|
|
31
38
|
background: e.dotColor,
|
|
32
39
|
width: `${e.height - 8}px`,
|
|
33
40
|
height: `${e.height - 8}px`,
|
|
34
41
|
"min-width": `${e.height - 8}px`,
|
|
35
42
|
"min-height": `${e.height - 8}px`,
|
|
36
|
-
"margin-left":
|
|
43
|
+
"margin-left": l.value ? `${e.width - (e.height - 3)}px` : "5px"
|
|
37
44
|
};
|
|
38
|
-
return
|
|
39
|
-
}),
|
|
45
|
+
return l.value ? e.reverse ? t["margin-left"] = "5px" : t["margin-left"] = `${e.width - (e.height - 3)}px` : e.reverse ? t["margin-left"] = `${e.width - (e.height - 3)}px` : t["margin-left"] = "5px", t;
|
|
46
|
+
}), g = a(() => {
|
|
40
47
|
const t = {
|
|
41
48
|
"font-weight": e.fontWeight,
|
|
42
49
|
"font-size": `${e.fontSize}px`,
|
|
43
|
-
color:
|
|
44
|
-
right:
|
|
45
|
-
left:
|
|
50
|
+
color: l.value && !e.disabled ? e.checkedTextColor : e.uncheckedTextColor,
|
|
51
|
+
right: l.value ? `${e.height - 3}px` : "auto",
|
|
52
|
+
left: l.value ? "auto" : `${e.height - 3}px`
|
|
46
53
|
};
|
|
47
|
-
return
|
|
48
|
-
}),
|
|
49
|
-
e.disabled ||
|
|
54
|
+
return l.value ? e.reverse ? (t.left = `${e.height - 3}px`, t.right = "auto") : (t.right = `${e.height - 3}px`, t.left = "auto") : e.reverse ? (t.right = `${e.height - 3}px`, t.left = "auto") : (t.left = `${e.height - 3}px`, t.right = "auto"), t;
|
|
55
|
+
}), o = () => {
|
|
56
|
+
e.disabled || (l.value = !l.value, d("update:modelValue", l.value), d("click"));
|
|
50
57
|
};
|
|
51
|
-
return (t,
|
|
58
|
+
return (t, w) => (h(), u("span", {
|
|
52
59
|
class: "vue-toggles",
|
|
53
|
-
style:
|
|
60
|
+
style: i(c.value),
|
|
54
61
|
role: "switch",
|
|
55
62
|
tabindex: "0",
|
|
56
|
-
"aria-checked":
|
|
57
|
-
"aria-disabled": t.disabled,
|
|
63
|
+
"aria-checked": l.value,
|
|
58
64
|
"aria-readonly": t.disabled,
|
|
59
65
|
onKeyup: [
|
|
60
|
-
|
|
61
|
-
|
|
66
|
+
n(s(o, ["prevent"]), ["enter"]),
|
|
67
|
+
n(s(o, ["prevent"]), ["space"])
|
|
62
68
|
],
|
|
63
|
-
onClick:
|
|
69
|
+
onClick: o
|
|
64
70
|
}, [
|
|
65
|
-
|
|
71
|
+
m("span", {
|
|
66
72
|
"aria-hidden": "true",
|
|
67
|
-
style:
|
|
73
|
+
style: i(f.value),
|
|
68
74
|
class: "vue-toggles__dot"
|
|
69
75
|
}, [
|
|
70
|
-
t.checkedText || t.uncheckedText ? (
|
|
76
|
+
t.checkedText || t.uncheckedText ? (h(), u("span", {
|
|
71
77
|
key: 0,
|
|
72
78
|
class: "vue-toggles__text",
|
|
73
|
-
style:
|
|
74
|
-
},
|
|
79
|
+
style: i(g.value)
|
|
80
|
+
}, y(l.value ? t.checkedText : t.uncheckedText), 5)) : k("", !0)
|
|
75
81
|
], 4)
|
|
76
|
-
], 44,
|
|
82
|
+
], 44, $));
|
|
77
83
|
}
|
|
78
84
|
});
|
|
79
85
|
export {
|
|
80
|
-
|
|
86
|
+
b as VueToggles
|
|
81
87
|
};
|
package/dist/vue-toggles.umd.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".vue-toggles{display:flex;align-items:center;border-radius:9999px;overflow:hidden;transition:background-color ease .2s,width ease .2s,height ease .2s}.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(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
-
(function(
|
|
2
|
+
(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.VueToggles={},i.Vue))})(this,function(i,t){"use strict";const n=["aria-checked","aria-readonly","onKeyup"],h=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"},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(s,{emit:d}){const e=s,o=t.ref(e.value||e.modelValue);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});const c=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={background:e.dotColor,width:`${e.height-8}px`,height:`${e.height-8}px`,"min-width":`${e.height-8}px`,"min-height":`${e.height-8}px`,"margin-left":o.value?`${e.width-(e.height-3)}px`:"5px"};return o.value?e.reverse?l["margin-left"]="5px":l["margin-left"]=`${e.width-(e.height-3)}px`:e.reverse?l["margin-left"]=`${e.width-(e.height-3)}px`:l["margin-left"]="5px",l}),f=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}),a=()=>{e.disabled||(o.value=!o.value,d("update:modelValue",o.value),d("click"))};return(l,g)=>(t.openBlock(),t.createElementBlock("span",{class:"vue-toggles",style:t.normalizeStyle(c.value),role:"switch",tabindex:"0","aria-checked":o.value,"aria-readonly":l.disabled,onKeyup:[t.withKeys(t.withModifiers(a,["prevent"]),["enter"]),t.withKeys(t.withModifiers(a,["prevent"]),["space"])],onClick:a},[t.createElementVNode("span",{"aria-hidden":"true",style:t.normalizeStyle(r.value),class:"vue-toggles__dot"},[l.checkedText||l.uncheckedText?(t.openBlock(),t.createElementBlock("span",{key:0,class:"vue-toggles__text",style:t.normalizeStyle(f.value)},t.toDisplayString(o.value?l.checkedText:l.uncheckedText),5)):t.createCommentVNode("",!0)],4)],44,n))}}),u="";i.VueToggles=h,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-toggles",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"description": "A highly customizable and accessible toggle component for Vue.js 3",
|
|
5
5
|
"homepage": "https://github.com/juliandreas/vue-toggles#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -30,8 +30,9 @@
|
|
|
30
30
|
"build": "vite build && vue-tsc --emitDeclarationOnly",
|
|
31
31
|
"preview": "vite preview",
|
|
32
32
|
"test:unit": "vitest",
|
|
33
|
-
"
|
|
34
|
-
"
|
|
33
|
+
"test:unit:once": "vitest run",
|
|
34
|
+
"deploy": "npm run test:unit:once && npm run build && npm publish",
|
|
35
|
+
"beta": "npm run test:unit:once && npm run build && npm publish --tag beta"
|
|
35
36
|
},
|
|
36
37
|
"peerDependencies": {
|
|
37
38
|
"vue": "^3.3.4"
|