UNPKG

vue-amazing-ui

Version:

An Amazing Vue3 UI Components Library, Using TypeScript.

6 lines (5 loc) 2.46 kB
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("../utils/index.cjs"),h={class:"switch-inner"},m={class:"inner-checked"},f={class:"inner-unchecked"},k={key:0,class:"circular",viewBox:"0 0 50 50"},v=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(l,{emit:i}){const t=l,a=e.ref(!1),{colorPalettes:o}=r.useInject("Switch"),c=i;function s(){t.modelValue===t.checkedValue?(c("update:modelValue",t.uncheckedValue),c("change",t.uncheckedValue)):(c("update:modelValue",t.checkedValue),c("change",t.checkedValue)),a.value?(a.value=!1,e.nextTick(()=>{a.value=!0})):a.value=!0}function u(){a.value=!1}return(d,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["switch-wrap",{"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(o)[5]}; --switch-primary-color-hover: ${e.unref(o)[4]}; --switch-ripple-color: ${l.rippleColor||e.unref(o)[5]}; `),onClick:n[0]||(n[0]=V=>l.disabled||l.loading?()=>!1:s())},[e.createElementVNode("div",h,[e.createElementVNode("span",m,[e.renderSlot(d.$slots,"checked",{},()=>[e.createTextVNode(e.toDisplayString(l.checked),1)],!0)]),e.createElementVNode("span",f,[e.renderSlot(d.$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",k,[...n[1]||(n[1]=[e.createElementVNode("circle",{class:"path",cx:"25",cy:"25",r:"20",fill:"none"},null,-1)])])):e.createCommentVNode("",!0),e.renderSlot(d.$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":a.value}]),onAnimationend:u},null,34))],6))}});exports.default=v;