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

vue3 component library, css framework

(function(t,o){typeof exports=="object"&&typeof module!="undefined"?module.exports=o(require("vue")):typeof define=="function"&&define.amd?define(["vue"],o):(t=typeof globalThis!="undefined"?globalThis:t||self,t["es-switch"]=o(t.Vue))})(this,function(t){"use strict";var o=Object.defineProperty,l=Object.getOwnPropertySymbols,d=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,c=(e,n,i)=>n in e?o(e,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[n]=i,f=(e,n)=>{for(var i in n||(n={}))d.call(n,i)&&c(e,i,n[i]);if(l)for(var i of l(n))p.call(n,i)&&c(e,i,n[i]);return e},s=t.defineComponent({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:n}){const i=t.ref(!0);return f({checked:i},{onClick(){i.value=!i.value,n("onChange",i.value?e.activeValue:e.inactiveValue)}})}});function h(e,n,i,a,r,y){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["es-switch",[e.checked?"":"is_checked"]]),onClick:n[0]||(n[0]=(...v)=>e.onClick&&e.onClick(...v))},[e.activeText?(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(["es-switch_label es-switch_label--left",[e.checked?"":"is_active"]])},t.toDisplayString(e.inactiveText),3)):t.createCommentVNode("v-if",!0),t.createElementVNode("span",{class:"es-switch_core",ref:"switchCore",style:t.normalizeStyle(`background-color: ${e.checked?e.activeColor:e.inactiveColor}`)},null,4),e.inactiveText?(t.openBlock(),t.createElementBlock("span",{key:1,class:t.normalizeClass(["es-switch_label es-switch_label--right",[e.checked?"is_active":""]])},t.toDisplayString(e.activeText),3)):t.createCommentVNode("v-if",!0)],2)}function u(e,n){n===void 0&&(n={});var i=n.insertAt;if(!(!e||typeof document=="undefined")){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",i==="top"&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}var m=`.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;
}`;return u(m),s.render=h,s.__scopeId="data-v-4cd2e572",s.__file="components/switch/index.vue",s.install=e=>{e.component("es-switch",s)},s});