dm-vue3-ui/lib/switch/index.vue.js

This Components Library will help get you started developing in Vue 3.

"use strict";const e=require("vue"),l=require("@vueuse/core"),o={class:"label"},t=e.defineComponent({name:"dm-switch",__name:"index",props:{modelValue:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},size:{default:"medium"},checkedText:{default:""},unCheckedText:{default:""},colorOn:{default:"#7857fc"},colorOff:{default:"#00000040"},sliderColor:{default:"#fff"},loadingParams:{default:()=>({type:"solid",style:"2px",styleColor:"#ccc",borderTopColor:"#4caf50"})}},emits:["update:modelValue"],setup(t,{emit:a}){const d=t,r=a,s=l.useVModel(d,"modelValue",r),c=e.computed((()=>`switch-${d.size}`)),n=e.computed((()=>({backgroundColor:s.value?d.colorOn:d.colorOff}))),u=e.computed((()=>({backgroundColor:d.sliderColor}))),i=e.computed((()=>({border:`${d.loadingParams.style} ${d.loadingParams.type} ${d.loadingParams.styleColor}`,borderTopColor:`${d.loadingParams.borderTopColor}`}))),m=()=>{d.disabled||d.loading||(s.value=!s.value)};return(l,t)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["dm-switch",c.value,{"switch-on":e.unref(s)},{"switch-off":!e.unref(s)},{"switch-disabled":l.disabled}]),style:e.normalizeStyle(n.value),onClick:m},[e.createElementVNode("div",{class:"slider",style:e.normalizeStyle(u.value)},null,4),e.createElementVNode("span",o,[e.unref(s)&&(l.checkedText||l.$slots.checkedText)?e.renderSlot(l.$slots,"checkedText",{key:0},(()=>[e.createTextVNode(e.toDisplayString(l.checkedText),1)])):e.createCommentVNode("",!0),e.unref(s)||!l.unCheckedText&&!l.$slots.unCheckedText?e.createCommentVNode("",!0):e.renderSlot(l.$slots,"unCheckedText",{key:1},(()=>[e.createTextVNode(e.toDisplayString(l.unCheckedText),1)])),e.renderSlot(l.$slots,"default")]),l.loading?(e.openBlock(),e.createElementBlock("div",{key:0,class:"loading",style:e.normalizeStyle(i.value)},null,4)):e.createCommentVNode("",!0)],6))}});module.exports=t;