vuejs-toggle-switch/dist/vuejs-toggle-switch.umd.cjs

A toggle switch component for Vue.js

(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.ToggleSwitch={},n.Vue))})(this,function(n,e){"use strict";const S="",u=(t,i)=>{const l=t.__vccOpts||t;for(const[a,o]of i)l[a]=o;return l},d=t=>t+"rem",c={name:"ToggleSwitch",props:{options:{type:Object,required:!1},modelValue:{type:String,required:!1},name:{type:String,required:!1},group:{type:String,required:!1,default:""},disabled:{type:Boolean,required:!1,default:!1}},emits:["update:modelValue"],created(){this.defaultOptions={layout:{color:"black",backgroundColor:"lightgray",selectedColor:"white",selectedBackgroundColor:"green",borderColor:"gray",fontFamily:"Arial",fontWeight:"normal",fontWeightSelected:"bold",squareCorners:!1,noBorder:!1},size:{fontSize:1.5,height:3.25,padding:.5,width:10},config:{preSelected:"unknown",disabled:!1,items:[{name:"Off",value:"Off",color:"white",backgroundColor:"red"},{name:"On",value:"On",color:"white",backgroundColor:"green"}]}}},mounted(){this.options!==null&&this.options!==void 0&&this.mergeDefaultOptionsWithProp(this.options),this.defaultOptions.config.preSelected!=="unknown"?(this.selectedItem=this.defaultOptions.config.preSelected,this.$emit("update:modelValue",this.selectedItem),this.$emit("input",this.selectedItem)):this.modelValue&&(this.selectedItem=this.modelValue,this.$emit("update:modelValue",this.selectedItem),this.$emit("input",this.selectedItem))},data(){return{selected:!1,selectedItem:"unknown",defaultOptions:Object}},computed:{toggleSwitchStyle(){return{width:d(this.defaultOptions.size.width),height:d(this.defaultOptions.size.height)}},itemStyle(){return{width:d(this.defaultOptions.size.width),height:d(this.defaultOptions.size.height),fontFamily:this.defaultOptions.layout.fontFamily,fontSize:d(this.defaultOptions.size.fontSize),textAlign:"center"}},labelStyle(){return{padding:d(this.defaultOptions.size.padding),borderColor:this.defaultOptions.layout.noBorder?"transparent":this.defaultOptions.layout.borderColor,backgroundColor:this.defaultOptions.layout.backgroundColor,color:this.defaultOptions.layout.color,fontWeight:this.defaultOptions.layout.fontWeight}}},methods:{toggle(t){this.defaultOptions.config.disabled||(this.selected=!0,this.selectedItem=t.target.id.replace(this.group,""),this.$emit("selected",this.selected),this.$emit("update:modelValue",t.target.id.replace(this.group,"")),this.$emit("input",this.selectedItem),this.$emit("change",{value:t.target.id.replace(this.group,""),srcEvent:t}))},labelStyleSelected(t,i){return{padding:d(this.defaultOptions.size.padding),borderColor:this.defaultOptions.layout.noBorder?"transparent":this.defaultOptions.layout.borderColor,fontWeight:this.defaultOptions.layout.fontWeightSelected,backgroundColor:i!==void 0?i:this.defaultOptions.layout.selectedBackgroundColor,color:t!==void 0?t:this.defaultOptions.layout.selectedColor}},mergeDefaultOptionsWithProp(t){var i=this.defaultOptions;for(var l in t)if(t[l]!==null&&typeof t[l]=="object")for(var a in t[l])t[l][a]!==void 0&&t[l][a]!==null&&(i[l][a]=t[l][a]);else i[l]=t[l]}},watch:{modelValue(t){this.selectedItem=t},options(t){t!=null&&this.mergeDefaultOptionsWithProp(t)}}},f=["disabled","id","value","name"],h=["for"],g=["for"];function m(t,i,l,a,o,r){return e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("ul",{class:e.normalizeClass(["toggle-switch",{square:o.defaultOptions.layout.squareCorners}]),style:e.normalizeStyle(r.toggleSwitchStyle)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.defaultOptions.config.items,(s,y)=>(e.openBlock(),e.createElementBlock("li",{style:e.normalizeStyle(r.itemStyle),key:y},[e.createElementVNode("input",{disabled:o.defaultOptions.config.disabled||l.disabled,id:s.value+l.group,value:s.value,name:l.name,class:e.normalizeClass({active:!o.defaultOptions.config.disabled||l.disabled}),type:"radio",onClick:i[0]||(i[0]=(...O)=>r.toggle&&r.toggle(...O))},null,10,f),s.value===o.selectedItem?(e.openBlock(),e.createElementBlock("label",{key:0,style:e.normalizeStyle(r.labelStyleSelected(s.color,s.backgroundColor)),class:e.normalizeClass([{active:!o.defaultOptions.config.disabled||l.disabled},"selected"]),for:s.value+l.group,type:"radio"},e.toDisplayString(s.name),15,h)):(e.openBlock(),e.createElementBlock("label",{key:1,style:e.normalizeStyle(r.labelStyle),class:e.normalizeClass({active:!o.defaultOptions.config.disabled||l.disabled}),for:s.value+l.group,type:"radio"},e.toDisplayString(s.name),15,g))],4))),128))],6)])}const p=u(c,[["render",m]]);n.ToggleSwitch=p,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});