eslink-ui-plus/es/switch/index.js

vue3 component library, css framework

import{defineComponent as h,ref as v,openBlock as s,createElementBlock as o,normalizeClass as l,toDisplayString as c,createCommentVNode as d,createElementVNode as m,normalizeStyle as y}from"vue";var w=Object.defineProperty,p=Object.getOwnPropertySymbols,g=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable,f=(e,t,n)=>t in e?w(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,C=(e,t)=>{for(var n in t||(t={}))g.call(t,n)&&f(e,n,t[n]);if(p)for(var n of p(t))_.call(t,n)&&f(e,n,t[n]);return e},r=h({name:"EsSwitch",props:{activeText:{type:String,default:""},inactiveText:{type:String,default:""},activeColor:{type:String,default:"#409eff"},activeValue:{type:Boolean||String||Number,default:!0},inactiveValue:{type:Boolean||String||Number,default:!1},inactiveColor:{type:String,default:"rgb(255, 73, 73)"}},setup(e,{emit:t}){const n=v(!0);return C({checked:n},{onClick(){n.value=!n.value,t("onChange",n.value?e.activeValue:e.inactiveValue)}})}});function b(e,t,n,a,i,x){return s(),o("div",{class:l(["es-switch",[e.checked?"":"is_checked"]]),onClick:t[0]||(t[0]=(...u)=>e.onClick&&e.onClick(...u))},[e.activeText?(s(),o("span",{key:0,class:l(["es-switch_label es-switch_label--left",[e.checked?"":"is_active"]])},c(e.inactiveText),3)):d("v-if",!0),m("span",{class:"es-switch_core",ref:"switchCore",style:y(`background-color: ${e.checked?e.activeColor:e.inactiveColor}`)},null,4),e.inactiveText?(s(),o("span",{key:1,class:l(["es-switch_label es-switch_label--right",[e.checked?"is_active":""]])},c(e.activeText),3)):d("v-if",!0)],2)}function k(e,t){t===void 0&&(t={});var n=t.insertAt;if(!(!e||typeof document=="undefined")){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css",n==="top"&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}var S=`.es-switch[data-v-4cd2e572] {
  display: flex;
  align-items: center;
}
.es-switch .es-switch_label[data-v-4cd2e572] {
  cursor: pointer;
  transition: 0.3s;
}
.es-switch .es-switch_core[data-v-4cd2e572] {
  display: inline-block;
  width: 40px;
  border-radius: 10px;
  background-color: #409eff;
  transition: all 0.3s;
  position: relative;
  height: 20px;
  margin: 0 2px;
  cursor: pointer;
}
.es-switch .es-switch_core[data-v-4cd2e572]:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 100%;
  border-radius: 100%;
  transition: all 0.3s;
  margin-left: -18px;
  width: 16px;
  height: 16px;
  background-color: #fff;
}
.es-switch .is_active[data-v-4cd2e572] {
  color: #409eff;
}
.is_checked .es-switch_core[data-v-4cd2e572]:after {
  left: 1px;
  margin-left: 0;
}`;k(S),r.render=b,r.__scopeId="data-v-4cd2e572",r.__file="components/switch/index.vue",r.install=e=>{e.component("es-switch",r)};export{r as default};