eslink-ui-plus
Version:
vue3 component library, css framework
133 lines (132 loc) • 8.07 kB
JavaScript
(function(n,h){typeof exports=="object"&&typeof module!="undefined"?module.exports=h(require("vue")):typeof define=="function"&&define.amd?define(["vue"],h):(n=typeof globalThis!="undefined"?globalThis:n||self,n["es-checkbox-group"]=h(n.Vue))})(this,function(n){"use strict";var h=Object.defineProperty,y=Object.defineProperties,w=Object.getOwnPropertyDescriptors,u=Object.getOwnPropertySymbols,C=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,k=(e,a,t)=>a in e?h(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,P=(e,a)=>{for(var t in a||(a={}))C.call(a,t)&&k(e,t,a[t]);if(u)for(var t of u(a))O.call(a,t)&&k(e,t,a[t]);return e},S=(e,a)=>y(e,w(a)),b=n.defineComponent({props:{modelValue:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},labelText:{type:String,default:""},indeterminate:Boolean},emits:["update:modelValue","change","select"],setup(e,a){const{emit:t}=a,o=n.reactive({checked:e.modelValue,indeterminate:e.indeterminate}),{modelValue:r,disabled:p}=n.toRefs(e),d=c=>{if(p.value)return;const l=!r.value;o.indeterminate?(o.checked=!0,o.indeterminate=!1):(o.checked=!o.checked,o.checked&&(o.indeterminate=!1)),t("select",{e:c,data:l}),t("update:modelValue",l)};return n.watch(r,(c,l)=>{c!==l&&(o.checked=c,t("change",c))}),n.watch(()=>o.indeterminate,()=>{o.indeterminate&&(o.checked=!1)}),S(P({},n.toRefs(o)),{toggleChecked:d})}});n.pushScopeId("data-v-ab10b2fe");const V=["checked"],$={class:"es-checkbox__name"};n.popScopeId();function B(e,a,t,o,r,p){return n.openBlock(),n.createElementBlock("label",{class:n.normalizeClass(["es-checkbox",{"is-disabled":e.disabled}]),onClick:a[0]||(a[0]=n.withModifiers((...d)=>e.toggleChecked&&e.toggleChecked(...d),["prevent"]))},[n.createElementVNode("span",{class:n.normalizeClass(["es-checkbox__label",{"is-checked":e.checked,"is-disabled":e.disabled,"is-indeterminate":e.indeterminate}])},null,2),n.createElementVNode("input",{class:"es-checkbox__value",type:"checkbox",checked:e.checked},null,8,V),n.createElementVNode("span",$,[n.renderSlot(e.$slots,"default",{},()=>[n.createTextVNode(n.toDisplayString(e.labelText),1)])])],2)}function _(e,a){a===void 0&&(a={});var t=a.insertAt;if(!(!e||typeof document=="undefined")){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",t==="top"&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}var E=`.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;
}`;_(E),b.render=B,b.__scopeId="data-v-ab10b2fe",b.__file="components/checkbox/index.vue",b.install=e=>{e.component("es-checkbox",b)};var I=Object.defineProperty,g=Object.getOwnPropertySymbols,K=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable,x=(e,a,t)=>a in e?I(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,v=(e,a)=>{for(var t in a||(a={}))K.call(a,t)&&x(e,t,a[t]);if(g)for(var t of g(a))Y.call(a,t)&&x(e,t,a[t]);return e},f=n.defineComponent({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,a){const t=n.ref(e.modelValue),o=n.computed(()=>l=>t.value.includes(l)),{labelKey:r="label",valueKey:p="value",disabledKey:d="disabled"}=v({},e.keyConfig||{});return n.watch(e.modelValue,(l,m)=>{const s=[...l],i=[...m];s.length!==i.length?(t.value=s,a.emit("change",n.toRaw(t.value))):s.every(T=>i.includes(T))||(t.value=s,a.emit("change",n.toRaw(t.value)))}),{labelKey:r,valueKey:p,disabledKey:d,isSelected:o,checkBoxChangeEvt:(l,m)=>{const s=m[p],i=new Set(t.value);i.has(s)?i.delete(s):i.add(s),t.value=[...i],a.emit("update:modelValue",n.toRaw(t.value)),a.emit("select",{e:(l==null?void 0:l.e)||{},item:v({},m),data:n.toRaw(t.value)})}}}});n.pushScopeId("data-v-40b3b41a");const j={class:"es-checkbox-group"};n.popScopeId();function z(e,a,t,o,r,p){const d=n.resolveComponent("es-checkbox");return n.openBlock(),n.createElementBlock("div",j,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(e.source,c=>(n.openBlock(),n.createBlock(d,{key:c[e.valueKey],"model-value":e.isSelected(c[e.valueKey]),"label-text":c[e.labelKey],disabled:c[e.disabledKey],onSelect:l=>e.checkBoxChangeEvt(l,c)},null,8,["model-value","label-text","disabled","onSelect"]))),128))])}var N=`.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;
}`;return _(N),f.render=z,f.__scopeId="data-v-40b3b41a",f.__file="components/checkbox-group/index.vue",f.install=e=>{e.component("es-checkbox-group",f)},f});