vue-toggles 1.1.4 → 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.
Files changed (12) hide show
  1. package/README.md +105 -115
  2. package/dist/components/VueToggles.vue.d.ts +140 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/vue-toggles.js +87 -0
  5. package/dist/vue-toggles.umd.cjs +2 -0
  6. package/package.json +66 -70
  7. package/dist/vue-toggles.esm.js +0 -417
  8. package/dist/vue-toggles.ssr.css +0 -40
  9. package/dist/vue-toggles.ssr.js +0 -361
  10. package/src/VueToggles.vue +0 -183
  11. package/src/index.d.ts +0 -1
  12. package/src/wrapper.js +0 -27
package/README.md CHANGED
@@ -1,115 +1,105 @@
1
- <h1 align="center">Vue Toggles</h1>
2
- <p align="center">
3
- A highly customizable and accessible toggle.
4
- Now with SSR support!
5
- </p>
6
-
7
- <p align="center">
8
- <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-2.x-brightgreen.svg?style=flat-square"/></a>
9
- </p>
10
-
11
- <p align="center">
12
- <img src="./vue-toggles.jpg" alt="Vue Toggles Logo"/>
13
- </p>
14
-
15
- ## Demo
16
-
17
- - [Demo](https://vue-toggles.netlify.app/)
18
- - [CodeSandbox](https://codesandbox.io/s/vue-toggles-mkkp4?file=/src/App.vue)
19
-
20
- ## Introduction
21
-
22
- Vue Toggles comes out of the box with accessibility support for:
23
-
24
- - `aria-checked` depending on state
25
- - `aria-readonly` if the toggle is disabled
26
- - `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)]
27
-
28
- ### Accessibility
29
-
30
- What's left for you, when it comes to accessibility, is labeling the toggle correctly. This is either done by:
31
-
32
- - A `<label for="example-id">Toggle description</label>` followed by the toggle component `<VueToggles id="example-id" />`
33
- - An `aria-label`, for example `<VueToggles aria-label="Toggle description" />`. Remember, you still need a visual text description of what the toggle does
34
-
35
- The `focus`-style is also left up to you — which is recommended you don't remove. If you think the default is ugly, style it yourself!
36
-
37
- ## Installation
38
-
39
- ```
40
- npm i vue-toggles
41
- ```
42
-
43
- ### Import
44
-
45
- ```javascript
46
- import Vue from 'vue';
47
- import VueToggles from 'vue-toggles';
48
-
49
- Vue.component('VueToggles', VueToggles);
50
- ```
51
-
52
- ### SSR import (Nuxt for example)
53
-
54
- ```javascript
55
- import Vue from 'vue';
56
- import VueToggles from 'vue-toggles/dist/vue-toggles.ssr';
57
- import 'vue-toggles/dist/vue-toggles.ssr.css';
58
-
59
- Vue.component('VueToggles', VueToggles);
60
- ```
61
-
62
- ## Usage
63
-
64
- 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.
65
-
66
- ```html
67
- <VueToggles :value="value" @click="value = !value" />
68
- ```
69
-
70
- ## Options
71
-
72
- You can also add more props to customize things like color and width/height.
73
-
74
- ```html
75
- <VueToggles
76
- height="30"
77
- width="90"
78
- checkedText="On"
79
- uncheckedText="Off"
80
- checkedBg="#b4d455"
81
- uncheckedBg="lightgrey"
82
- :value="value"
83
- @click="value = !value"
84
- />
85
- ```
86
-
87
- ## Properties
88
-
89
- | Name | Type | Default | Description |
90
- | -------------- | ---------------- | --------- | ------------------------------------------------- |
91
- | value | Boolean | `false` | Initial state of the toggle button |
92
- | disabled | Boolean | `false` | Toggle does not react on mouse or keyboard events |
93
- | reverse | Boolean | `false` | Reverse toggle to Right to Left |
94
- | height | [String, Number] | `25` | Height of the toggle in `px` |
95
- | width | [String, Number] | `75` | Width of the toggle in `px` |
96
- | checkedText | String | `null` | Optional text when the toggle is checked |
97
- | uncheckedText | String | `null` | Optional text when the toggle is unchecked |
98
- | checkedBg | String | `#5850ec` | Background color when the toggle is checked |
99
- | uncheckedBg | String | `#939393` | Background color when the toggle is unchecked |
100
- | checkedColor | String | `#ffffff` | Text color when the toggle is checked |
101
- | uncheckedColor | String | `#ffffff` | Text color when the toggle is unchecked |
102
- | dotColor | String | `#ffffff` | Color of the toggle dot |
103
- | fontSize | [String, Number] | `12` | Font size in `px` |
104
- | fontWeight | [Number, String] | `normal` | Font weight |
105
-
106
- ### Browser compatibility
107
-
108
- - Chrome: 40+
109
- - Firefox: 25+
110
- - Safari: 10+
111
- - IE: 11+
112
-
113
- ### License
114
-
115
- [MIT](http://opensource.org/licenses/MIT)
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="./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
+ ## Usage
50
+
51
+ 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
+
53
+ ```html
54
+ <VueToggles :value="example" @click="example = !example" />
55
+ ```
56
+
57
+ Or if you prefer the `v-model`-syntax:
58
+
59
+ ```html
60
+ <VueToggles v-model="example" />
61
+ ```
62
+
63
+ ## Options
64
+
65
+ You can also add more props to customize things like color and width/height.
66
+
67
+ ```html
68
+ <VueToggles
69
+ :value="value"
70
+ :height="30"
71
+ :width="90"
72
+ checkedText="On"
73
+ uncheckedText="Off"
74
+ checkedBg="#b4d455"
75
+ uncheckedBg="lightgrey"
76
+ @click="value = !value"
77
+ />
78
+ ```
79
+
80
+ ## Properties
81
+
82
+ | Name | Type | Default | Description |
83
+ | ------------------ | ---------------- | --------- | ------------------------------------------------- |
84
+ | value | Boolean | `false` | Initial state of the toggle button |
85
+ | disabled | Boolean | `false` | Toggle does not react on mouse or keyboard events |
86
+ | reverse | Boolean | `false` | Reverse toggle to Right to Left |
87
+ | height | [String, Number] | `25` | Height of the toggle in `px` |
88
+ | width | [String, Number] | `75` | Width of the toggle in `px` |
89
+ | dotColor | String | `#ffffff` | Color of the toggle dot |
90
+ | uncheckedBg | String | `#939393` | Background color when the toggle is unchecked |
91
+ | checkedBg | String | `#5850ec` | Background color when the toggle is checked |
92
+ | uncheckedTextColor | String | `#ffffff` | Text color when the toggle is unchecked |
93
+ | checkedTextColor | String | `#ffffff` | Text color when the toggle is checked |
94
+ | uncheckedText | String | `""` | Optional text when the toggle is unchecked |
95
+ | checkedText | String | `""` | Optional text when the toggle is checked |
96
+ | fontSize | String | `12` | Font size in `px` |
97
+ | fontWeight | String | `normal` | Font weight |
98
+
99
+ ## Vue 2 support
100
+
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).
102
+
103
+ ## License
104
+
105
+ [MIT](http://opensource.org/licenses/MIT)
package/dist/components/VueToggles.vue.d.ts ADDED
@@ -0,0 +1,140 @@
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;
package/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { type VueTogglesProps } from "./types";
2
+ export { default as VueToggles } from "./components/VueToggles.vue";
package/dist/vue-toggles.js ADDED
@@ -0,0 +1,87 @@
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 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
+ __name: "VueToggles",
5
+ props: {
6
+ modelValue: { type: Boolean, default: void 0 },
7
+ value: { type: Boolean, default: void 0 },
8
+ disabled: { type: Boolean },
9
+ reverse: { type: Boolean },
10
+ width: { default: 75 },
11
+ height: { default: 25 },
12
+ dotColor: { default: "#ffffff" },
13
+ uncheckedBg: { default: "#939393" },
14
+ checkedBg: { default: "#5850ec" },
15
+ uncheckedTextColor: { default: "#ffffff" },
16
+ checkedTextColor: { default: "#ffffff" },
17
+ uncheckedText: { default: "" },
18
+ checkedText: { default: "" },
19
+ fontSize: { default: 12 },
20
+ fontWeight: { default: "normal" }
21
+ },
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(() => ({
31
+ width: `${e.width}px`,
32
+ height: `${e.height}px`,
33
+ background: l.value ? e.checkedBg : e.uncheckedBg,
34
+ opacity: e.disabled ? "0.5" : "1",
35
+ cursor: e.disabled ? "not-allowed" : "pointer"
36
+ })), f = a(() => {
37
+ const t = {
38
+ background: e.dotColor,
39
+ width: `${e.height - 8}px`,
40
+ height: `${e.height - 8}px`,
41
+ "min-width": `${e.height - 8}px`,
42
+ "min-height": `${e.height - 8}px`,
43
+ "margin-left": l.value ? `${e.width - (e.height - 3)}px` : "5px"
44
+ };
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(() => {
47
+ const t = {
48
+ "font-weight": e.fontWeight,
49
+ "font-size": `${e.fontSize}px`,
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`
53
+ };
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"));
57
+ };
58
+ return (t, w) => (h(), u("span", {
59
+ class: "vue-toggles",
60
+ style: i(c.value),
61
+ role: "switch",
62
+ tabindex: "0",
63
+ "aria-checked": l.value,
64
+ "aria-readonly": t.disabled,
65
+ onKeyup: [
66
+ n(s(o, ["prevent"]), ["enter"]),
67
+ n(s(o, ["prevent"]), ["space"])
68
+ ],
69
+ onClick: o
70
+ }, [
71
+ m("span", {
72
+ "aria-hidden": "true",
73
+ style: i(f.value),
74
+ class: "vue-toggles__dot"
75
+ }, [
76
+ t.checkedText || t.uncheckedText ? (h(), u("span", {
77
+ key: 0,
78
+ class: "vue-toggles__text",
79
+ style: i(g.value)
80
+ }, y(l.value ? t.checkedText : t.uncheckedText), 5)) : k("", !0)
81
+ ], 4)
82
+ ], 44, $));
83
+ }
84
+ });
85
+ export {
86
+ b as VueToggles
87
+ };
package/dist/vue-toggles.umd.cjs ADDED
@@ -0,0 +1,2 @@
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(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,70 +1,66 @@
1
- {
2
- "name": "vue-toggles",
3
- "version": "1.1.4",
4
- "author": "Julian Lagerberg <juliandreas@fastmail.com>",
5
- "private": false,
6
- "license": "MIT",
7
- "homepage": "https://vue-toggles.netlify.app/",
8
- "bugs": {
9
- "url": "https://github.com/juliandreas/vue-toggles"
10
- },
11
- "repository": {
12
- "type": "git",
13
- "url": "git+https://github.com/juliandreas/vue-toggles.git"
14
- },
15
- "main": "dist/vue-toggles.esm.js",
16
- "style": "dist/vue-toggles.ssr.css",
17
- "types": "src/index.d.ts",
18
- "files": [
19
- "dist",
20
- "src"
21
- ],
22
- "scripts": {
23
- "serve": "vue-cli-service serve",
24
- "lint": "vue-cli-service lint",
25
- "build": "rollup -c",
26
- "demo": "vue-cli-service build",
27
- "deploy": "npm run build & npm publish",
28
- "beta": "npm run build & npm publish --tag beta"
29
- },
30
- "peerDependencies": {
31
- "vue": "^2.6.11"
32
- },
33
- "devDependencies": {
34
- "@rollup/plugin-buble": "^0.21.3",
35
- "@rollup/plugin-commonjs": "^13.0.2",
36
- "@vue/cli-plugin-babel": "^4.5.3",
37
- "@vue/cli-plugin-eslint": "^4.5.3",
38
- "@vue/cli-service": "^4.5.3",
39
- "@vue/eslint-config-prettier": "^6.0.0",
40
- "babel-eslint": "^10.1.0",
41
- "core-js": "^3.6.4",
42
- "eslint": "^7.7.0",
43
- "eslint-plugin-prettier": "^3.1.4",
44
- "eslint-plugin-vue": "^6.2.2",
45
- "node-sass": "^4.12.0",
46
- "prettier": "^2.0.5",
47
- "rollup": "^2.26.3",
48
- "rollup-plugin-css-only": "^2.1.0",
49
- "rollup-plugin-filesize": "^9.0.2",
50
- "rollup-plugin-vue": "^5.1.9",
51
- "sass-loader": "^9.0.3",
52
- "vue": "^2.6.11",
53
- "vue-template-compiler": "^2.6.11"
54
- },
55
- "keywords": [
56
- "vue",
57
- "vuejs",
58
- "vue.js",
59
- "vue2",
60
- "toggle",
61
- "toggles",
62
- "checkbox",
63
- "switch",
64
- "library",
65
- "component library",
66
- "accessibility",
67
- "accessible",
68
- "a11y"
69
- ]
70
- }
1
+ {
2
+ "name": "vue-toggles",
3
+ "version": "2.1.0",
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
+ "import": "./dist/vue-toggles.js",
25
+ "require": "./dist/vue-toggles.umd.js"
26
+ }
27
+ },
28
+ "scripts": {
29
+ "dev": "vite",
30
+ "build": "vite build && vue-tsc --emitDeclarationOnly",
31
+ "preview": "vite preview",
32
+ "test:unit": "vitest",
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"
36
+ },
37
+ "peerDependencies": {
38
+ "vue": "^3.3.4"
39
+ },
40
+ "devDependencies": {
41
+ "@types/node": "^20.5.6",
42
+ "@vitejs/plugin-vue": "^4.3.1",
43
+ "@vue/eslint-config-typescript": "^11.0.3",
44
+ "@vue/test-utils": "^2.4.1",
45
+ "eslint": "^8.46.0",
46
+ "eslint-plugin-vue": "^9.16.1",
47
+ "typescript": "^5.2.2",
48
+ "vite": "^4.4.9",
49
+ "vite-plugin-css-injected-by-js": "^3.3.0",
50
+ "vitest": "^0.34.2",
51
+ "vue-tsc": "^1.8.8"
52
+ },
53
+ "keywords": [
54
+ "vue",
55
+ "vuejs",
56
+ "vue.js",
57
+ "vue3",
58
+ "toggle",
59
+ "checkbox",
60
+ "switch",
61
+ "library",
62
+ "component library",
63
+ "accessibility",
64
+ "a11y"
65
+ ]
66
+ }