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

vue3 component library, css framework

import{defineComponent as k,reactive as u,toRefs as b,watch as f,pushScopeId as x,popScopeId as _,openBlock as g,createElementBlock as v,normalizeClass as p,withModifiers as y,createElementVNode as l,renderSlot as w,createTextVNode as P,toDisplayString as C}from"vue";var O=Object.defineProperty,S=Object.defineProperties,Y=Object.getOwnPropertyDescriptors,h=Object.getOwnPropertySymbols,B=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable,m=(e,n,t)=>n in e?O(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,E=(e,n)=>{for(var t in n||(n={}))B.call(n,t)&&m(e,t,n[t]);if(h)for(var t of h(n))z.call(n,t)&&m(e,t,n[t]);return e},I=(e,n)=>S(e,Y(n)),r=k({props:{modelValue:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},labelText:{type:String,default:""},indeterminate:Boolean},emits:["update:modelValue","change","select"],setup(e,n){const{emit:t}=n,a=u({checked:e.modelValue,indeterminate:e.indeterminate}),{modelValue:o,disabled:d}=b(e),c=s=>{if(d.value)return;const i=!o.value;a.indeterminate?(a.checked=!0,a.indeterminate=!1):(a.checked=!a.checked,a.checked&&(a.indeterminate=!1)),t("select",{e:s,data:i}),t("update:modelValue",i)};return f(o,(s,i)=>{s!==i&&(a.checked=s,t("change",s))}),f(()=>a.indeterminate,()=>{a.indeterminate&&(a.checked=!1)}),I(E({},b(a)),{toggleChecked:c})}});x("data-v-ab10b2fe");const T=["checked"],V={class:"es-checkbox__name"};_();function j(e,n,t,a,o,d){return g(),v("label",{class:p(["es-checkbox",{"is-disabled":e.disabled}]),onClick:n[0]||(n[0]=y((...c)=>e.toggleChecked&&e.toggleChecked(...c),["prevent"]))},[l("span",{class:p(["es-checkbox__label",{"is-checked":e.checked,"is-disabled":e.disabled,"is-indeterminate":e.indeterminate}])},null,2),l("input",{class:"es-checkbox__value",type:"checkbox",checked:e.checked},null,8,T),l("span",V,[w(e.$slots,"default",{},()=>[P(C(e.labelText),1)])])],2)}function N(e,n){n===void 0&&(n={});var t=n.insertAt;if(!(!e||typeof document=="undefined")){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",t==="top"&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var $=`.es-checkbox[data-v-ab10b2fe] {
  height: 22px;
  line-height: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
      user-select: none;
  cursor: pointer;
  display: inline-block;
}
.es-checkbox.is-disabled[data-v-ab10b2fe] {
  cursor: not-allowed;
}
.es-checkbox:hover .es-checkbox__label[data-v-ab10b2fe] {
  border-color: #1b9dde;
}
.es-checkbox:hover .es-checkbox__label.is-disabled[data-v-ab10b2fe] {
  border-color: #e4e7ec;
}
.es-checkbox__label[data-v-ab10b2fe] {
  width: 16px;
  height: 16px;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  box-sizing: border-box;
  border-radius: 2px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.es-checkbox__label[data-v-ab10b2fe]::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 9px;
  left: 8px;
  top: 3px;
  background: #ffffff;
  border-radius: 1px;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.es-checkbox__label[data-v-ab10b2fe]::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 4px;
  left: 4px;
  top: 7px;
  background: #ffffff;
  border-radius: 1px;
  -webkit-transform: matrix(-0.74, 0.67, 0.67, 0.74, 0, 0) scaleY(0);
          transform: matrix(-0.74, 0.67, 0.67, 0.74, 0, 0) scaleY(0);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.es-checkbox__label.is-checked[data-v-ab10b2fe] {
  background: #148dd2;
  border: 0;
}
.es-checkbox__label.is-checked[data-v-ab10b2fe]::before {
  -webkit-transform: matrix(-0.74, 0.67, 0.67, 0.74, 0, 0) scaleY(1);
          transform: matrix(-0.74, 0.67, 0.67, 0.74, 0, 0) scaleY(1);
}
.es-checkbox__label.is-checked[data-v-ab10b2fe]::after {
  -webkit-transform: rotate(42deg) scaleY(1);
          transform: rotate(42deg) scaleY(1);
}
.es-checkbox__label.is-indeterminate[data-v-ab10b2fe] {
  background-color: #148dd2;
  border-color: #148dd2;
}
.es-checkbox__label.is-indeterminate[data-v-ab10b2fe]::before {
  content: "";
  position: absolute;
  display: block;
  background-color: #fff;
  width: 14px;
  height: 3px;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  left: 0;
  right: 0;
  top: 5px;
}
.es-checkbox__label.is-indeterminate[data-v-ab10b2fe]::after {
  display: none;
}
.es-checkbox__label.is-disabled[data-v-ab10b2fe] {
  background: #f5f7fa;
  border: 1px solid #e4e7ec;
}
.es-checkbox__label.is-disabled ~ span.es-checkbox__name[data-v-ab10b2fe] {
  color: #a3a9b3;
}
.es-checkbox__label.is-checked.is-disabled[data-v-ab10b2fe]::before {
  background: #a3a9b3;
  -webkit-transform: matrix(-0.74, 0.67, 0.67, 0.74, 0, 0) scaleY(1);
          transform: matrix(-0.74, 0.67, 0.67, 0.74, 0, 0) scaleY(1);
}
.es-checkbox__label.is-checked.is-disabled[data-v-ab10b2fe]::after {
  background: #a3a9b3;
  -webkit-transform: rotate(42deg) scaleY(1);
          transform: rotate(42deg) scaleY(1);
}
.es-checkbox__value[data-v-ab10b2fe] {
  opacity: 0;
  outline: none;
  position: absolute;
  margin: 0;
  width: 0;
  height: 0;
  z-index: -1;
}
.es-checkbox__name[data-v-ab10b2fe] {
  height: 22px;
  color: #515c70;
  font-family: PingFangSC;
  font-size: 14px;
  line-height: 22px;
  margin-left: 8px;
  vertical-align: middle;
}`;N($),r.render=j,r.__scopeId="data-v-ab10b2fe",r.__file="components/checkbox/index.vue",r.install=e=>{e.component("es-checkbox",r)};export{r as default};