t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
2 lines (1 loc) • 1.69 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),n=require("./index3.js"),m=require("../../svg-icon/index.js"),p=e.defineComponent({name:"FSwitch"}),f=e.defineComponent({...p,props:n.Props,emits:n.Emits,setup(r,{emit:i}){const l=r,c=()=>{l.disabled||(i("update:modelValue",!l.modelValue),l.change&&l.change(!l.modelValue))},a=e.computed(()=>{const{modelValue:o,closeColor:t,openColor:s,size:d}=l;return{right:o?"0px":{large:"24px",middle:"20px",small:"16px"}[d],borderColor:o?s:t}}),u=e.computed(()=>{const{size:o,modelValue:t,square:s}=l;return["f-switch__input",{[`f-switch__${o}`]:o,"f-switch__close":!t,"f-switch__square":s}]});return(o,t)=>(e.openBlock(),e.createElementBlock("div",{role:"switch",class:e.normalizeClass(["f-switch",{"f-switch__disabled":o.disabled}])},[o.closeText?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["f-switch__right-text",{"f-switch__text-active":!o.modelValue}])},e.toDisplayString(o.closeText),3)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(u)),style:e.normalizeStyle({background:o.modelValue?o.openColor:o.closeColor}),onClick:c},[e.createElementVNode("span",{class:"f-switch__roll",style:e.normalizeStyle(e.unref(a))},[o.icon?(e.openBlock(),e.createBlock(e.unref(m.FSvgIcon),{key:0,icon:o.icon,size:14},null,8,["icon"])):e.createCommentVNode("",!0)],4)],6),o.openText?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(["f-switch__left-text",{"f-switch__text-active":o.modelValue}])},e.toDisplayString(o.openText),3)):e.createCommentVNode("",!0)],2))}});exports.default=f;