vue-toggles 2.1.0 → 2.2.0-beta.1
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 +110 -105
- package/dist/index.d.ts +6 -2
- package/dist/types/index.d.ts +18 -0
- package/dist/vue-toggles.js +40 -38
- package/dist/vue-toggles.umd.cjs +2 -2
- package/package.json +78 -66
- package/dist/components/VueToggles.vue.d.ts +0 -140
package/README.md
CHANGED
|
@@ -1,105 +1,110 @@
|
|
|
1
|
-
<h1 align="center">Vue Toggles</h1>
|
|
2
|
-
<p align="center">
|
|
3
|
-
A highly customizable and accessible toggle component for Vue 3.
|
|
4
|
-
</p>
|
|
5
|
-
|
|
6
|
-
<p align="center">
|
|
7
|
-
<a href="https://www.npmjs.com/package/vue-toggles"><img src="https://img.shields.io/npm/v/vue-toggles.svg?style=flat-square"/> <img src="https://img.shields.io/npm/dt/vue-toggles.svg?style=flat-square"/></a> <a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-3.x-brightgreen.svg?style=flat-square"/></a>
|
|
8
|
-
</p>
|
|
9
|
-
|
|
10
|
-
<p align="center">
|
|
11
|
-
<img src="
|
|
12
|
-
</p>
|
|
13
|
-
|
|
14
|
-
## Introduction
|
|
15
|
-
|
|
16
|
-
Vue Toggles comes out of the box with accessibility support for:
|
|
17
|
-
|
|
18
|
-
- `aria-checked` depending on state
|
|
19
|
-
- `aria-readonly` if the toggle is disabled
|
|
20
|
-
- `prefers-reduced-motion` if the user has requested any type of motion reduction [[prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)]
|
|
21
|
-
|
|
22
|
-
### Accessibility
|
|
23
|
-
|
|
24
|
-
What's left for you, when it comes to accessibility, is labeling the toggle correctly. This is either done by:
|
|
25
|
-
|
|
26
|
-
- A `<label for="example-id">Toggle description</label>` followed by the toggle component `<VueToggles id="example-id" />`
|
|
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
|
-
|
|
29
|
-
The `focus`-style is also left up to you
|
|
30
|
-
|
|
31
|
-
## Installation
|
|
32
|
-
|
|
33
|
-
```
|
|
34
|
-
npm i vue-toggles
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
### Import component
|
|
38
|
-
|
|
39
|
-
```javascript
|
|
40
|
-
import { VueToggles } from "vue-toggles";
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
### Import types
|
|
44
|
-
|
|
45
|
-
```javascript
|
|
46
|
-
import {
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
|
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
1
|
+
<h1 align="center">Vue Toggles</h1>
|
|
2
|
+
<p align="center">
|
|
3
|
+
A highly customizable and accessible toggle component for Vue 3.
|
|
4
|
+
</p>
|
|
5
|
+
|
|
6
|
+
<p align="center">
|
|
7
|
+
<a href="https://www.npmjs.com/package/vue-toggles"><img src="https://img.shields.io/npm/v/vue-toggles.svg?style=flat-square"/> <img src="https://img.shields.io/npm/dt/vue-toggles.svg?style=flat-square"/></a> <a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-3.x-brightgreen.svg?style=flat-square"/></a>
|
|
8
|
+
</p>
|
|
9
|
+
|
|
10
|
+
<p align="center">
|
|
11
|
+
<img src="https://raw.githubusercontent.com/juliandreas/vue-toggles/refs/heads/master/dev/public/vue-toggles.jpg" alt="Vue Toggles Logo"/>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
## Introduction
|
|
15
|
+
|
|
16
|
+
Vue Toggles comes out of the box with accessibility support for:
|
|
17
|
+
|
|
18
|
+
- `aria-checked` depending on state
|
|
19
|
+
- `aria-readonly` if the toggle is disabled
|
|
20
|
+
- `prefers-reduced-motion` if the user has requested any type of motion reduction [[prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)]
|
|
21
|
+
|
|
22
|
+
### Accessibility
|
|
23
|
+
|
|
24
|
+
What's left for you, when it comes to accessibility, is labeling the toggle correctly. This is either done by:
|
|
25
|
+
|
|
26
|
+
- A `<label for="example-id">Toggle description</label>` followed by the toggle component `<VueToggles id="example-id" />`
|
|
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
|
+
|
|
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
|
+
|
|
31
|
+
## Installation
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
npm i vue-toggles
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Import component
|
|
38
|
+
|
|
39
|
+
```javascript
|
|
40
|
+
import { VueToggles } from "vue-toggles";
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Import types
|
|
44
|
+
|
|
45
|
+
```javascript
|
|
46
|
+
import type { VueTogglesProps } from "vue-toggles";
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
```javascript
|
|
50
|
+
import VueToggles, { type VueTogglesProps } from "vue-toggles";
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Usage
|
|
54
|
+
|
|
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.
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<VueToggles :value="isChecked" @click="isChecked = !isChecked" />
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Or if you prefer the `v-model`-syntax:
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<VueToggles v-model="isChecked" />
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Options
|
|
68
|
+
|
|
69
|
+
You can also add more props to customize things like color and width/height.
|
|
70
|
+
|
|
71
|
+
```html
|
|
72
|
+
<VueToggles
|
|
73
|
+
:value="value"
|
|
74
|
+
:height="30"
|
|
75
|
+
:width="90"
|
|
76
|
+
checkedText="On"
|
|
77
|
+
uncheckedText="Off"
|
|
78
|
+
checkedBg="#b4d455"
|
|
79
|
+
uncheckedBg="lightgrey"
|
|
80
|
+
@click="value = !value"
|
|
81
|
+
/>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## Properties
|
|
85
|
+
|
|
86
|
+
| Name | Type | Default | Description |
|
|
87
|
+
| ------------------ | ------- | --------- | ------------------------------------------------- |
|
|
88
|
+
| value | Boolean | `false` | Initial state of the toggle button |
|
|
89
|
+
| disabled | Boolean | `false` | Toggle does not react on mouse or keyboard events |
|
|
90
|
+
| reverse | Boolean | `false` | Reverse toggle to Right to Left |
|
|
91
|
+
| width | Number | `75` | Width of the toggle in `px` |
|
|
92
|
+
| height | Number | `25` | Height of the toggle in `px` |
|
|
93
|
+
| dotColor | String | `#ffffff` | Color of the toggle dot |
|
|
94
|
+
| dotSize | Number | `0` | Dot size in `px` |
|
|
95
|
+
| checkedBg | String | `#5850ec` | Background color when the toggle is checked |
|
|
96
|
+
| uncheckedBg | String | `#939393` | Background color when the toggle is unchecked |
|
|
97
|
+
| checkedTextColor | String | `#ffffff` | Text color when the toggle is checked |
|
|
98
|
+
| uncheckedTextColor | String | `#ffffff` | Text color when the toggle is unchecked |
|
|
99
|
+
| uncheckedText | String | `""` | Optional text when the toggle is unchecked |
|
|
100
|
+
| checkedText | String | `""` | Optional text when the toggle is checked |
|
|
101
|
+
| fontSize | Number | `12` | Font size in `px` |
|
|
102
|
+
| fontWeight | String | `normal` | Font weight |
|
|
103
|
+
|
|
104
|
+
## Vue 2 support
|
|
105
|
+
|
|
106
|
+
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).
|
|
107
|
+
|
|
108
|
+
## License
|
|
109
|
+
|
|
110
|
+
[MIT](http://opensource.org/licenses/MIT)
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { DefineComponent } from 'vue';
|
|
2
|
+
import { VueTogglesProps } from './types';
|
|
3
|
+
declare const VueToggles: DefineComponent<VueTogglesProps>;
|
|
4
|
+
export type { VueTogglesProps };
|
|
5
|
+
declare const _default: typeof VueToggles;
|
|
6
|
+
export default _default;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export interface VueTogglesProps {
|
|
2
|
+
modelValue?: boolean;
|
|
3
|
+
value?: boolean;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
reverse?: boolean;
|
|
6
|
+
width?: number;
|
|
7
|
+
height?: number;
|
|
8
|
+
dotColor?: string;
|
|
9
|
+
dotSize?: number;
|
|
10
|
+
uncheckedBg?: string;
|
|
11
|
+
checkedBg?: string;
|
|
12
|
+
uncheckedTextColor?: string;
|
|
13
|
+
checkedTextColor?: string;
|
|
14
|
+
uncheckedText?: string;
|
|
15
|
+
checkedText?: string;
|
|
16
|
+
fontSize?: number;
|
|
17
|
+
fontWeight?: string;
|
|
18
|
+
}
|
package/dist/vue-toggles.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var
|
|
2
|
-
import { defineComponent as
|
|
3
|
-
const
|
|
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 d, watchEffect as $, openBlock as c, createElementBlock as r, normalizeStyle as n, withKeys as h, withModifiers as f, createElementVNode as w, toDisplayString as T, createCommentVNode as b } from "vue";
|
|
3
|
+
const C = ["aria-checked", "aria-readonly", "onKeyup"], B = 8, s = 5, o = 3, V = /* @__PURE__ */ k({
|
|
4
4
|
__name: "VueToggles",
|
|
5
5
|
props: {
|
|
6
6
|
modelValue: { type: Boolean, default: void 0 },
|
|
@@ -10,6 +10,7 @@ const $ = ["aria-checked", "aria-readonly", "onKeyup"], b = /* @__PURE__ */ p({
|
|
|
10
10
|
width: { default: 75 },
|
|
11
11
|
height: { default: 25 },
|
|
12
12
|
dotColor: { default: "#ffffff" },
|
|
13
|
+
dotSize: { default: 0 },
|
|
13
14
|
uncheckedBg: { default: "#939393" },
|
|
14
15
|
checkedBg: { default: "#5850ec" },
|
|
15
16
|
uncheckedTextColor: { default: "#ffffff" },
|
|
@@ -20,68 +21,69 @@ const $ = ["aria-checked", "aria-readonly", "onKeyup"], b = /* @__PURE__ */ p({
|
|
|
20
21
|
fontWeight: { default: "normal" }
|
|
21
22
|
},
|
|
22
23
|
emits: ["update:modelValue", "click"],
|
|
23
|
-
setup(
|
|
24
|
-
const e =
|
|
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
|
+
setup(p, { emit: g }) {
|
|
25
|
+
const e = p, u = g, l = y(e.value || e.modelValue), v = d(() => ({
|
|
31
26
|
width: `${e.width}px`,
|
|
32
27
|
height: `${e.height}px`,
|
|
33
28
|
background: l.value ? e.checkedBg : e.uncheckedBg,
|
|
34
29
|
opacity: e.disabled ? "0.5" : "1",
|
|
35
30
|
cursor: e.disabled ? "not-allowed" : "pointer"
|
|
36
|
-
})),
|
|
37
|
-
const t = {
|
|
31
|
+
})), m = d(() => {
|
|
32
|
+
const t = e.dotSize || e.height - B, a = {
|
|
38
33
|
background: e.dotColor,
|
|
39
|
-
width: `${
|
|
40
|
-
height: `${
|
|
41
|
-
"min-width": `${
|
|
42
|
-
"min-height": `${
|
|
43
|
-
"margin-left": l.value ? `${e.width -
|
|
34
|
+
width: `${t}px`,
|
|
35
|
+
height: `${t}px`,
|
|
36
|
+
"min-width": `${t}px`,
|
|
37
|
+
"min-height": `${t}px`,
|
|
38
|
+
"margin-left": l.value ? `${e.width - t - o}px` : `${s}px`
|
|
44
39
|
};
|
|
45
|
-
return l.value ? e.reverse ?
|
|
46
|
-
}),
|
|
40
|
+
return l.value ? e.reverse ? a["margin-left"] = `${s}px` : a["margin-left"] = `${e.width - t - o}px` : e.reverse ? a["margin-left"] = `${e.width - t - o}px` : a["margin-left"] = `${s}px`, a;
|
|
41
|
+
}), x = d(() => {
|
|
47
42
|
const t = {
|
|
48
43
|
"font-weight": e.fontWeight,
|
|
49
44
|
"font-size": `${e.fontSize}px`,
|
|
50
45
|
color: l.value && !e.disabled ? e.checkedTextColor : e.uncheckedTextColor,
|
|
51
|
-
right: l.value ? `${e.height -
|
|
52
|
-
left: l.value ? "auto" : `${e.height -
|
|
46
|
+
right: l.value ? `${e.height - o}px` : "auto",
|
|
47
|
+
left: l.value ? "auto" : `${e.height - o}px`
|
|
53
48
|
};
|
|
54
|
-
return l.value ? e.reverse ? (t.left = `${e.height -
|
|
55
|
-
}),
|
|
56
|
-
e.disabled || (l.value = !l.value,
|
|
49
|
+
return l.value ? e.reverse ? (t.left = `${e.height - o}px`, t.right = "auto") : (t.right = `${e.height - o}px`, t.left = "auto") : e.reverse ? (t.right = `${e.height - o}px`, t.left = "auto") : (t.left = `${e.height - o}px`, t.right = "auto"), t;
|
|
50
|
+
}), i = () => {
|
|
51
|
+
e.disabled || (l.value = !l.value, u("update:modelValue", l.value), u("click"));
|
|
57
52
|
};
|
|
58
|
-
return (
|
|
53
|
+
return $(() => {
|
|
54
|
+
e.value !== void 0 && e.modelValue !== void 0 && console.warn(
|
|
55
|
+
'Avoid using both "v-model" and ":value" at the same time. Choose one for better predictability.'
|
|
56
|
+
), l.value = e.value || e.modelValue;
|
|
57
|
+
}), (t, a) => (c(), r("span", {
|
|
59
58
|
class: "vue-toggles",
|
|
60
|
-
style:
|
|
59
|
+
style: n(v.value),
|
|
61
60
|
role: "switch",
|
|
62
61
|
tabindex: "0",
|
|
63
62
|
"aria-checked": l.value,
|
|
64
63
|
"aria-readonly": t.disabled,
|
|
64
|
+
"test-id": "toggle",
|
|
65
65
|
onKeyup: [
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
h(f(i, ["prevent"]), ["enter"]),
|
|
67
|
+
h(f(i, ["prevent"]), ["space"])
|
|
68
68
|
],
|
|
69
|
-
onClick:
|
|
69
|
+
onClick: i
|
|
70
70
|
}, [
|
|
71
|
-
|
|
71
|
+
w("span", {
|
|
72
72
|
"aria-hidden": "true",
|
|
73
|
-
style:
|
|
74
|
-
class: "vue-toggles__dot"
|
|
73
|
+
style: n(m.value),
|
|
74
|
+
class: "vue-toggles__dot",
|
|
75
|
+
"test-id": "dot"
|
|
75
76
|
}, [
|
|
76
|
-
t.checkedText || t.uncheckedText ? (
|
|
77
|
+
t.checkedText || t.uncheckedText ? (c(), r("span", {
|
|
77
78
|
key: 0,
|
|
78
79
|
class: "vue-toggles__text",
|
|
79
|
-
style:
|
|
80
|
-
|
|
80
|
+
style: n(x.value),
|
|
81
|
+
"test-id": "text"
|
|
82
|
+
}, T(l.value ? t.checkedText : t.uncheckedText), 5)) : b("", !0)
|
|
81
83
|
], 4)
|
|
82
|
-
], 44,
|
|
84
|
+
], 44, C));
|
|
83
85
|
}
|
|
84
86
|
});
|
|
85
87
|
export {
|
|
86
|
-
|
|
88
|
+
V as default
|
|
87
89
|
};
|
package/dist/vue-toggles.umd.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var
|
|
2
|
-
(function(
|
|
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,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue")):typeof define=="function"&&define.amd?define(["vue"],a):(t=typeof globalThis<"u"?globalThis:t||self,t.VueToggles=a(t.Vue))})(this,function(t){"use strict";const a=["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(s,{emit:c}){const e=s,n=c,l=t.ref(e.value||e.modelValue),r=t.computed(()=>({width:`${e.width}px`,height:`${e.height}px`,background:l.value?e.checkedBg:e.uncheckedBg,opacity:e.disabled?"0.5":"1",cursor:e.disabled?"not-allowed":"pointer"})),f=t.computed(()=>{const o=e.dotSize||e.height-8,i={background:e.dotColor,width:`${o}px`,height:`${o}px`,"min-width":`${o}px`,"min-height":`${o}px`,"margin-left":l.value?`${e.width-o-3}px`:"5px"};return l.value?e.reverse?i["margin-left"]="5px":i["margin-left"]=`${e.width-o-3}px`:e.reverse?i["margin-left"]=`${e.width-o-3}px`:i["margin-left"]="5px",i}),h=t.computed(()=>{const o={"font-weight":e.fontWeight,"font-size":`${e.fontSize}px`,color:l.value&&!e.disabled?e.checkedTextColor:e.uncheckedTextColor,right:l.value?`${e.height-3}px`:"auto",left:l.value?"auto":`${e.height-3}px`};return l.value?e.reverse?(o.left=`${e.height-3}px`,o.right="auto"):(o.right=`${e.height-3}px`,o.left="auto"):e.reverse?(o.right=`${e.height-3}px`,o.left="auto"):(o.left=`${e.height-3}px`,o.right="auto"),o}),d=()=>{e.disabled||(l.value=!l.value,n("update:modelValue",l.value),n("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.'),l.value=e.value||e.modelValue}),(o,i)=>(t.openBlock(),t.createElementBlock("span",{class:"vue-toggles",style:t.normalizeStyle(r.value),role:"switch",tabindex:"0","aria-checked":l.value,"aria-readonly":o.disabled,"test-id":"toggle",onKeyup:[t.withKeys(t.withModifiers(d,["prevent"]),["enter"]),t.withKeys(t.withModifiers(d,["prevent"]),["space"])],onClick:d},[t.createElementVNode("span",{"aria-hidden":"true",style:t.normalizeStyle(f.value),class:"vue-toggles__dot","test-id":"dot"},[o.checkedText||o.uncheckedText?(t.openBlock(),t.createElementBlock("span",{key:0,class:"vue-toggles__text",style:t.normalizeStyle(h.value),"test-id":"text"},t.toDisplayString(l.value?o.checkedText:o.uncheckedText),5)):t.createCommentVNode("",!0)],4)],44,a))}})});
|
package/package.json
CHANGED
|
@@ -1,66 +1,78 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "vue-toggles",
|
|
3
|
-
"version": "2.
|
|
4
|
-
"description": "A highly customizable and accessible toggle component for Vue.js 3",
|
|
5
|
-
"homepage": "https://github.com/juliandreas/vue-toggles#readme",
|
|
6
|
-
"bugs": {
|
|
7
|
-
"url": "https://github.com/juliandreas/vue-toggles/issues"
|
|
8
|
-
},
|
|
9
|
-
"private": false,
|
|
10
|
-
"license": "MIT",
|
|
11
|
-
"repository": {
|
|
12
|
-
"type": "git",
|
|
13
|
-
"url": "git+https://github.com/juliandreas/vue-toggles.git"
|
|
14
|
-
},
|
|
15
|
-
"type": "module",
|
|
16
|
-
"files": [
|
|
17
|
-
"dist"
|
|
18
|
-
],
|
|
19
|
-
"main": "./dist/vue-toggles.umd.cjs",
|
|
20
|
-
"module": "./dist/vue-toggles.js",
|
|
21
|
-
"types": "./dist/index.d.ts",
|
|
22
|
-
"exports": {
|
|
23
|
-
".": {
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"test
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
"
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"vue-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "vue-toggles",
|
|
3
|
+
"version": "2.2.0-beta.1",
|
|
4
|
+
"description": "A highly customizable and accessible toggle component for Vue.js 3",
|
|
5
|
+
"homepage": "https://github.com/juliandreas/vue-toggles#readme",
|
|
6
|
+
"bugs": {
|
|
7
|
+
"url": "https://github.com/juliandreas/vue-toggles/issues"
|
|
8
|
+
},
|
|
9
|
+
"private": false,
|
|
10
|
+
"license": "MIT",
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "git+https://github.com/juliandreas/vue-toggles.git"
|
|
14
|
+
},
|
|
15
|
+
"type": "module",
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"main": "./dist/vue-toggles.umd.cjs",
|
|
20
|
+
"module": "./dist/vue-toggles.js",
|
|
21
|
+
"types": "./dist/index.d.ts",
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"types": "./dist/index.d.ts",
|
|
25
|
+
"import": "./dist/vue-toggles.js",
|
|
26
|
+
"require": "./dist/vue-toggles.umd.cjs"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
"scripts": {
|
|
30
|
+
"dev": "vite",
|
|
31
|
+
"build": "vite build",
|
|
32
|
+
"preview": "vite preview",
|
|
33
|
+
"test": "vitest",
|
|
34
|
+
"test:ci": "vitest run",
|
|
35
|
+
"typecheck": "vue-tsc --noEmit",
|
|
36
|
+
"lint": "eslint . --fix",
|
|
37
|
+
"format": "prettier --write src/",
|
|
38
|
+
"deploy": "npm run test:ci && npm run build && npm publish",
|
|
39
|
+
"deploy:beta": "npm run test:ci && npm run build && npm publish --tag beta"
|
|
40
|
+
},
|
|
41
|
+
"peerDependencies": {
|
|
42
|
+
"vue": "^3.5.13"
|
|
43
|
+
},
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"@tsconfig/node22": "^22.0.0",
|
|
46
|
+
"@types/jsdom": "^21.1.7",
|
|
47
|
+
"@types/node": "^22.10.2",
|
|
48
|
+
"@vitejs/plugin-vue": "^5.2.1",
|
|
49
|
+
"@vitest/eslint-plugin": "^1.1.23",
|
|
50
|
+
"@vue/eslint-config-prettier": "^10.1.0",
|
|
51
|
+
"@vue/eslint-config-typescript": "^14.1.3",
|
|
52
|
+
"@vue/test-utils": "^2.4.6",
|
|
53
|
+
"@vue/tsconfig": "^0.7.0",
|
|
54
|
+
"eslint": "^9.14.0",
|
|
55
|
+
"eslint-plugin-vue": "^9.30.0",
|
|
56
|
+
"jsdom": "^25.0.1",
|
|
57
|
+
"prettier": "^3.3.3",
|
|
58
|
+
"typescript": "^5.7.2",
|
|
59
|
+
"vite": "^6.0.5",
|
|
60
|
+
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
61
|
+
"vite-plugin-dts": "^4.4.0",
|
|
62
|
+
"vitest": "^2.1.8",
|
|
63
|
+
"vue-tsc": "^2.1.10"
|
|
64
|
+
},
|
|
65
|
+
"keywords": [
|
|
66
|
+
"vue",
|
|
67
|
+
"vuejs",
|
|
68
|
+
"vue.js",
|
|
69
|
+
"vue3",
|
|
70
|
+
"toggle",
|
|
71
|
+
"checkbox",
|
|
72
|
+
"switch",
|
|
73
|
+
"library",
|
|
74
|
+
"component library",
|
|
75
|
+
"accessibility",
|
|
76
|
+
"a11y"
|
|
77
|
+
]
|
|
78
|
+
}
|
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
declare const _default: import("vue").DefineComponent<{
|
|
2
|
-
modelValue: {
|
|
3
|
-
type: import("vue").PropType<boolean>;
|
|
4
|
-
default: undefined;
|
|
5
|
-
};
|
|
6
|
-
value: {
|
|
7
|
-
type: import("vue").PropType<boolean>;
|
|
8
|
-
default: undefined;
|
|
9
|
-
};
|
|
10
|
-
disabled: {
|
|
11
|
-
type: import("vue").PropType<boolean>;
|
|
12
|
-
};
|
|
13
|
-
reverse: {
|
|
14
|
-
type: import("vue").PropType<boolean>;
|
|
15
|
-
};
|
|
16
|
-
width: {
|
|
17
|
-
type: import("vue").PropType<number>;
|
|
18
|
-
default: number;
|
|
19
|
-
};
|
|
20
|
-
height: {
|
|
21
|
-
type: import("vue").PropType<number>;
|
|
22
|
-
default: number;
|
|
23
|
-
};
|
|
24
|
-
dotColor: {
|
|
25
|
-
type: import("vue").PropType<string>;
|
|
26
|
-
default: string;
|
|
27
|
-
};
|
|
28
|
-
uncheckedBg: {
|
|
29
|
-
type: import("vue").PropType<string>;
|
|
30
|
-
default: string;
|
|
31
|
-
};
|
|
32
|
-
checkedBg: {
|
|
33
|
-
type: import("vue").PropType<string>;
|
|
34
|
-
default: string;
|
|
35
|
-
};
|
|
36
|
-
uncheckedTextColor: {
|
|
37
|
-
type: import("vue").PropType<string>;
|
|
38
|
-
default: string;
|
|
39
|
-
};
|
|
40
|
-
checkedTextColor: {
|
|
41
|
-
type: import("vue").PropType<string>;
|
|
42
|
-
default: string;
|
|
43
|
-
};
|
|
44
|
-
uncheckedText: {
|
|
45
|
-
type: import("vue").PropType<string>;
|
|
46
|
-
default: string;
|
|
47
|
-
};
|
|
48
|
-
checkedText: {
|
|
49
|
-
type: import("vue").PropType<string>;
|
|
50
|
-
default: string;
|
|
51
|
-
};
|
|
52
|
-
fontSize: {
|
|
53
|
-
type: import("vue").PropType<number>;
|
|
54
|
-
default: number;
|
|
55
|
-
};
|
|
56
|
-
fontWeight: {
|
|
57
|
-
type: import("vue").PropType<string>;
|
|
58
|
-
default: string;
|
|
59
|
-
};
|
|
60
|
-
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
61
|
-
"update:modelValue": (args_0: boolean) => void;
|
|
62
|
-
click: (args_0: void) => void;
|
|
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
|
-
};
|
|
68
|
-
value: {
|
|
69
|
-
type: import("vue").PropType<boolean>;
|
|
70
|
-
default: undefined;
|
|
71
|
-
};
|
|
72
|
-
disabled: {
|
|
73
|
-
type: import("vue").PropType<boolean>;
|
|
74
|
-
};
|
|
75
|
-
reverse: {
|
|
76
|
-
type: import("vue").PropType<boolean>;
|
|
77
|
-
};
|
|
78
|
-
width: {
|
|
79
|
-
type: import("vue").PropType<number>;
|
|
80
|
-
default: number;
|
|
81
|
-
};
|
|
82
|
-
height: {
|
|
83
|
-
type: import("vue").PropType<number>;
|
|
84
|
-
default: number;
|
|
85
|
-
};
|
|
86
|
-
dotColor: {
|
|
87
|
-
type: import("vue").PropType<string>;
|
|
88
|
-
default: string;
|
|
89
|
-
};
|
|
90
|
-
uncheckedBg: {
|
|
91
|
-
type: import("vue").PropType<string>;
|
|
92
|
-
default: string;
|
|
93
|
-
};
|
|
94
|
-
checkedBg: {
|
|
95
|
-
type: import("vue").PropType<string>;
|
|
96
|
-
default: string;
|
|
97
|
-
};
|
|
98
|
-
uncheckedTextColor: {
|
|
99
|
-
type: import("vue").PropType<string>;
|
|
100
|
-
default: string;
|
|
101
|
-
};
|
|
102
|
-
checkedTextColor: {
|
|
103
|
-
type: import("vue").PropType<string>;
|
|
104
|
-
default: string;
|
|
105
|
-
};
|
|
106
|
-
uncheckedText: {
|
|
107
|
-
type: import("vue").PropType<string>;
|
|
108
|
-
default: string;
|
|
109
|
-
};
|
|
110
|
-
checkedText: {
|
|
111
|
-
type: import("vue").PropType<string>;
|
|
112
|
-
default: string;
|
|
113
|
-
};
|
|
114
|
-
fontSize: {
|
|
115
|
-
type: import("vue").PropType<number>;
|
|
116
|
-
default: number;
|
|
117
|
-
};
|
|
118
|
-
fontWeight: {
|
|
119
|
-
type: import("vue").PropType<string>;
|
|
120
|
-
default: string;
|
|
121
|
-
};
|
|
122
|
-
}>> & {
|
|
123
|
-
"onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
|
|
124
|
-
onClick?: ((args_0?: void | undefined) => any) | undefined;
|
|
125
|
-
}, {
|
|
126
|
-
modelValue: boolean;
|
|
127
|
-
value: boolean;
|
|
128
|
-
width: number;
|
|
129
|
-
height: number;
|
|
130
|
-
dotColor: string;
|
|
131
|
-
uncheckedBg: string;
|
|
132
|
-
checkedBg: string;
|
|
133
|
-
uncheckedTextColor: string;
|
|
134
|
-
checkedTextColor: string;
|
|
135
|
-
uncheckedText: string;
|
|
136
|
-
checkedText: string;
|
|
137
|
-
fontSize: number;
|
|
138
|
-
fontWeight: string;
|
|
139
|
-
}, {}>;
|
|
140
|
-
export default _default;
|