vue-toggles 2.2.0 → 2.2.1

package/README.md

@@ -8,7 +8,7 @@ A highly customizable and accessible toggle component for Vue 3.
 </p>
 
 <p align="center">
-<img src="./dev/public/vue-toggles.jpg" alt="Vue Toggles Logo"/>
+<img src="https://raw.githubusercontent.com/juliandreas/vue-toggles/refs/heads/master/dev/public/vue-toggles.jpg" alt="Vue Toggles Logo"/>
 </p>
 
 ## Introduction
@@ -26,7 +26,7 @@ What's left for you, when it comes to accessibility, is labeling the toggle corr
 - A `<label for="example-id">Toggle description</label>` followed by the toggle component `<VueToggles id="example-id" />`
 - Or an `aria-label`, for example `<VueToggles aria-label="Toggle description" />`. Remember, you still need a visual text description of what the toggle does
 
-The `focus`-style is also left up to you — which you shouldn't remove. If you think the default is ugly, style it yourself!
+The focus-style is also left up to you - which you shouldn't remove. If you think the default is ugly, style it yourself!
 
 ## Installation
 
@@ -46,18 +46,22 @@ import { VueToggles } from "vue-toggles";
 import type { VueTogglesProps } from "vue-toggles";
 ```
 
+```javascript
+import VueToggles, { type VueTogglesProps } from "vue-toggles";
+```
+
 ## Usage
 
 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.
 
 ```html
-<VueToggles :value="example" @click="example = !example" />
+<VueToggles :value="isChecked" @click="isChecked = !isChecked" />
 ```
 
 Or if you prefer the `v-model`-syntax:
 
 ```html
-<VueToggles v-model="example" />
+<VueToggles v-model="isChecked" />
 ```
 
 ## Options

package/dist/vue-toggles.js

@@ -61,6 +61,7 @@ const C = ["aria-checked", "aria-readonly", "onKeyup"], B = 8, s = 5, o = 3, V =
       tabindex: "0",
       "aria-checked": l.value,
       "aria-readonly": t.disabled,
+      "test-id": "toggle",
       onKeyup: [
         h(f(i, ["prevent"]), ["enter"]),
         h(f(i, ["prevent"]), ["space"])
@@ -70,12 +71,14 @@ const C = ["aria-checked", "aria-readonly", "onKeyup"], B = 8, s = 5, o = 3, V =
       w("span", {
         "aria-hidden": "true",
         style: n(m.value),
-        class: "vue-toggles__dot"
+        class: "vue-toggles__dot",
+        "test-id": "dot"
       }, [
         t.checkedText || t.uncheckedText ? (c(), r("span", {
           key: 0,
           class: "vue-toggles__text",
-          style: n(x.value)
+          style: n(x.value),
+          "test-id": "text"
         }, T(l.value ? t.checkedText : t.uncheckedText), 5)) : b("", !0)
       ], 4)
     ], 44, C));

package/dist/vue-toggles.umd.cjs

@@ -1,2 +1,2 @@
 (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)}})();
-(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,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"},[o.checkedText||o.uncheckedText?(t.openBlock(),t.createElementBlock("span",{key:0,class:"vue-toggles__text",style:t.normalizeStyle(h.value)},t.toDisplayString(l.value?o.checkedText:o.uncheckedText),5)):t.createCommentVNode("",!0)],4)],44,a))}})});
+(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

@@ -1,6 +1,6 @@
 {
   "name": "vue-toggles",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "A highly customizable and accessible toggle component for Vue.js 3",
   "homepage": "https://github.com/juliandreas/vue-toggles#readme",
   "bugs": {