vue-toggles/dist/vue-toggles.umd.cjs

A highly customizable and accessible toggle component for Vue.js 3

(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,"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))}})});