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

vue3 component library, css framework

import{defineComponent as _,reactive as B,toRefs as g,watch as m,pushScopeId as x,popScopeId as y,openBlock as u,createElementBlock as v,normalizeClass as w,withModifiers as K,createElementVNode as k,renderSlot as Y,createTextVNode as I,toDisplayString as j,ref as z,computed as N,toRaw as h,resolveComponent as T,Fragment as A,renderList as D,createBlock as F}from"vue";var R=Object.defineProperty,L=Object.defineProperties,q=Object.getOwnPropertyDescriptors,O=Object.getOwnPropertySymbols,G=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable,P=(e,n,a)=>n in e?R(e,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[n]=a,J=(e,n)=>{for(var a in n||(n={}))G.call(n,a)&&P(e,a,n[a]);if(O)for(var a of O(n))H.call(n,a)&&P(e,a,n[a]);return e},Q=(e,n)=>L(e,q(n)),b=_({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:a}=n,t=B({checked:e.modelValue,indeterminate:e.indeterminate}),{modelValue:o,disabled:i}=g(e),c=l=>{if(i.value)return;const r=!o.value;t.indeterminate?(t.checked=!0,t.indeterminate=!1):(t.checked=!t.checked,t.checked&&(t.indeterminate=!1)),a("select",{e:l,data:r}),a("update:modelValue",r)};return m(o,(l,r)=>{l!==r&&(t.checked=l,a("change",l))}),m(()=>t.indeterminate,()=>{t.indeterminate&&(t.checked=!1)}),Q(J({},g(t)),{toggleChecked:c})}});x("data-v-ab10b2fe");const U=["checked"],W={class:"es-checkbox__name"};y();function X(e,n,a,t,o,i){return u(),v("label",{class:w(["es-checkbox",{"is-disabled":e.disabled}]),onClick:n[0]||(n[0]=K((...c)=>e.toggleChecked&&e.toggleChecked(...c),["prevent"]))},[k("span",{class:w(["es-checkbox__label",{"is-checked":e.checked,"is-disabled":e.disabled,"is-indeterminate":e.indeterminate}])},null,2),k("input",{class:"es-checkbox__value",type:"checkbox",checked:e.checked},null,8,U),k("span",W,[Y(e.$slots,"default",{},()=>[I(j(e.labelText),1)])])],2)}function C(e,n){n===void 0&&(n={});var a=n.insertAt;if(!(!e||typeof document=="undefined")){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",a==="top"&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var Z=`.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;
}`;C(Z),b.render=X,b.__scopeId="data-v-ab10b2fe",b.__file="components/checkbox/index.vue",b.install=e=>{e.component("es-checkbox",b)};var M=Object.defineProperty,$=Object.getOwnPropertySymbols,ee=Object.prototype.hasOwnProperty,ne=Object.prototype.propertyIsEnumerable,S=(e,n,a)=>n in e?M(e,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[n]=a,V=(e,n)=>{for(var a in n||(n={}))ee.call(n,a)&&S(e,a,n[a]);if($)for(var a of $(n))ne.call(n,a)&&S(e,a,n[a]);return e},f=_({components:{EsCheckbox:b},props:{source:{type:Array,default:()=>[]},modelValue:{type:Array,default:()=>[]},keyConfig:{type:Object,default:()=>({labelKey:"label",valueKey:"value",disabledKey:"disabled"})}},emits:["update:modelValue","select","change"],setup(e,n){const a=z(e.modelValue),t=N(()=>r=>a.value.includes(r)),{labelKey:o="label",valueKey:i="value",disabledKey:c="disabled"}=V({},e.keyConfig||{});return m(e.modelValue,(r,p)=>{const s=[...r],d=[...p];s.length!==d.length?(a.value=s,n.emit("change",h(a.value))):s.every(E=>d.includes(E))||(a.value=s,n.emit("change",h(a.value)))}),{labelKey:o,valueKey:i,disabledKey:c,isSelected:t,checkBoxChangeEvt:(r,p)=>{const s=p[i],d=new Set(a.value);d.has(s)?d.delete(s):d.add(s),a.value=[...d],n.emit("update:modelValue",h(a.value)),n.emit("select",{e:(r==null?void 0:r.e)||{},item:V({},p),data:h(a.value)})}}}});x("data-v-40b3b41a");const ae={class:"es-checkbox-group"};y();function te(e,n,a,t,o,i){const c=T("es-checkbox");return u(),v("div",ae,[(u(!0),v(A,null,D(e.source,l=>(u(),F(c,{key:l[e.valueKey],"model-value":e.isSelected(l[e.valueKey]),"label-text":l[e.labelKey],disabled:l[e.disabledKey],onSelect:r=>e.checkBoxChangeEvt(r,l)},null,8,["model-value","label-text","disabled","onSelect"]))),128))])}var oe=`.es-checkbox-group[data-v-40b3b41a] {
  display: inline-block;
}
.es-checkbox-group .es-checkbox[data-v-40b3b41a] {
  margin-right: 32px;
}
.es-checkbox-group .es-checkbox[data-v-40b3b41a]:nth-last-child(1) {
  margin-right: 0;
}`;C(oe),f.render=te,f.__scopeId="data-v-40b3b41a",f.__file="components/checkbox-group/index.vue",f.install=e=>{e.component("es-checkbox-group",f)};export{f as default};