vue-amazing-ui/lib/switch/Switch.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),u=require("../utils/index.cjs"),m={class:"switch-inner"},h={class:"inner-checked"},f={class:"inner-unchecked"},p={key:0,class:"circular",viewBox:"0 0 50 50"},k=e.defineComponent({__name:"Switch",props:{checked:{default:void 0},checkedValue:{type:[Boolean,String,Number],default:!0},unchecked:{default:void 0},uncheckedValue:{type:[Boolean,String,Number],default:!1},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{default:"middle"},rippleColor:{default:void 0},circleStyle:{default:()=>({})},modelValue:{type:[Boolean,String,Number],default:!1}},emits:["update:modelValue","change"],setup(s,{emit:d}){const a=s,t=e.ref(!1),{colorPalettes:c}=u.useInject("Switch"),o=d;function i(){a.modelValue===a.checkedValue?(o("update:modelValue",a.uncheckedValue),o("change",a.uncheckedValue)):(o("update:modelValue",a.checkedValue),o("change",a.checkedValue)),t.value?(t.value=!1,e.nextTick(()=>{t.value=!0})):t.value=!0}function r(){t.value=!1}return(l,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-switch",{"switch-loading":l.loading,"switch-small":l.size==="small","switch-large":l.size==="large","switch-checked":l.modelValue===l.checkedValue,"switch-disabled":l.disabled}]),style:e.normalizeStyle(`
      --switch-primary-color: ${e.unref(c)[5]};
      --switch-primary-color-hover: ${e.unref(c)[4]};
      --switch-ripple-color: ${l.rippleColor||e.unref(c)[5]};
    `),onClick:n[0]||(n[0]=v=>l.disabled||l.loading?()=>!1:i())},[e.createElementVNode("div",m,[e.createElementVNode("span",h,[e.renderSlot(l.$slots,"checked",{},()=>[e.createTextVNode(e.toDisplayString(l.checked),1)],!0)]),e.createElementVNode("span",f,[e.renderSlot(l.$slots,"unchecked",{},()=>[e.createTextVNode(e.toDisplayString(l.unchecked),1)],!0)])]),e.createElementVNode("div",{class:"switch-circle",style:e.normalizeStyle(l.circleStyle)},[l.loading?(e.openBlock(),e.createElementBlock("svg",p,n[1]||(n[1]=[e.createElementVNode("circle",{class:"path",cx:"25",cy:"25",r:"20",fill:"none"},null,-1)]))):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"node",{checked:l.modelValue},void 0,!0)],4),l.disabled?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["switch-wave",{"wave-active":t.value}]),onAnimationend:r},null,34))],6))}});exports.default=k;