@fifteen/design-system-vue
Version:
Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System
2 lines (1 loc) • 4.2 kB
JavaScript
;const T=require("./FField.js");;/* empty css */const E=require("../FIcon.js");;/* empty css */const e=require("vue"),r=require("../../utils/getCssColor.js"),k=require("../../.generated/icons.js"),M=require("../../composables/useIcon.js"),N=require("../../composables/useFieldWithValidation.js"),w=require("../../composables/useInputEventBindings.js"),z=["for"],H={class:"FCheckbox__wrapper"},O=["id","name","disabled"],R={key:0,class:"FCheckbox__labelText"},D={key:1,class:"FCheckbox__labelText"},K=e.defineComponent({__name:"FCheckbox",props:{hoverBorderColor:{default:"secondary"},focusColor:{default:"neutral--light-2"},focusBorderColor:{default:"neutral--dark-2"},checkedColor:{default:"secondary"},checkedBorderColor:{default:"secondary"},fieldset:{type:Boolean},name:{default:""},label:{default:""},labelTextColor:{},hint:{default:""},hintTextColor:{default:"neutral--dark-4"},hideHint:{type:Boolean,default:!1},hintIcon:{default:null},modelValue:{type:[Boolean,null],default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean},color:{default:"neutral--light-4"},textColor:{default:"neutral--dark-3"},errorColor:{default:"danger"},validationTrigger:{default:"change"},rules:{type:[Function,Array],default:()=>[]},errorMessage:{default:""},validateOnMount:{type:Boolean,default:!1},borderColor:{default:"neutral--dark-1"}},emits:["update:modelValue","change","focus","blur"],setup(b,{expose:p,emit:m}){const o=b,x=m;p({focus:V}),M.registerIcons("icons",{checkmark:k.checkmark,checkboxIndeterminate:k.checkboxIndeterminate});const a=e.useId(),u=e.ref(),{isValid:d,hint:_,value:n,validate:i}=N.useFieldWithValidation(o,{validateOnMount:o.validateOnMount}),{handleBlur:h,handleFocus:f}=w.useInputEventBindings(i,o.validationTrigger,x),c=e.computed({get:()=>!!n.value,set:l=>{n.value=n.value===null?!0:l}}),g=e.computed(()=>({"--fcheckbox--border-color":r.getCssColor(o.borderColor),"--fcheckbox--checked-border-color":r.getCssColor(o.checkedBorderColor),"--fcheckbox--checked-color":r.getCssColor(o.checkedColor),"--fcheckbox--color":r.getCssColor(o.color),"--fcheckbox--error-color":r.getCssColor(o.errorColor),"--fcheckbox--focus-border-color":r.getCssColor(o.focusBorderColor),"--fcheckbox--focus-color":r.getCssColor(o.focusColor),"--fcheckbox--hover-border-color":r.getCssColor(o.hoverBorderColor),"--fcheckbox--text-color":r.getCssColor(o.textColor)})),v=e.computed(()=>o.disabled?"neutral--dark-1":d.value?o.hintTextColor:o.errorColor),B=e.computed(()=>({"FCheckbox__checkedIcon--visible":c.value})),y=e.computed(()=>({"FCheckbox--error":!d.value,"FCheckbox--disabled":o.disabled})),F=e.computed(()=>({"FCheckbox__checkbox--indeterminate":n.value===null}));function I(){i(n.value,o.validationTrigger==="change")}function V(){u.value?.focus()}return(l,t)=>{const C=E,q=T;return e.openBlock(),e.createBlock(q,e.mergeProps({class:["FCheckbox",e.unref(y)],style:e.unref(g)},{name:l.name,hint:e.unref(_),hideHint:l.hideHint,hintTextColor:e.unref(v),hintIcon:l.hintIcon}),{default:e.withCtx(()=>[e.createElementVNode("label",{class:"FCheckbox__label",for:e.unref(a)},[e.createElementVNode("div",H,[e.withDirectives(e.createElementVNode("input",{class:e.normalizeClass(["FCheckbox__checkbox",e.unref(F)]),id:e.unref(a),ref_key:"checkboxRef",ref:u,"onUpdate:modelValue":t[0]||(t[0]=s=>e.isRef(c)?c.value=s:null),name:l.name,type:"checkbox",disabled:l.disabled,onBlur:t[1]||(t[1]=(...s)=>e.unref(h)&&e.unref(h)(...s)),onChange:I,onFocus:t[2]||(t[2]=(...s)=>e.unref(f)&&e.unref(f)(...s)),onKeypress:t[3]||(t[3]=e.withKeys(s=>c.value=!e.unref(c),["enter"]))},null,42,O),[[e.vModelCheckbox,e.unref(c)]]),e.createVNode(C,{class:e.normalizeClass(["FCheckbox__checkedIcon",e.unref(B)]),name:"checkmark",color:"neutral--light-5",size:"10"},null,8,["class"]),e.unref(n)===null?(e.openBlock(),e.createBlock(C,{key:0,class:"FCheckbox__indeterminateIcon",name:"checkboxIndeterminate",color:"neutral--light-5",size:"10"})):e.createCommentVNode("",!0)]),l.label?(e.openBlock(),e.createElementBlock("span",R,e.toDisplayString(l.label),1)):(e.openBlock(),e.createElementBlock("span",D,[e.renderSlot(l.$slots,"label")]))],8,z)]),_:3},16,["class","style"])}}});module.exports=K;