@fifteen/design-system-vue
Version:
Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System
2 lines (1 loc) • 2.31 kB
JavaScript
;const y=require("./FField.js");;/* empty css */const k=require("./FRadio.js");;/* empty css */const e=require("vue"),R=require("../../composables/useFieldWithValidation.js"),T=require("../../composables/useInputEventBindings.js"),V={class:"FRadioGroup__options"},q=e.defineComponent({__name:"FRadioGroup",props:{options:{},displayMode:{default:"vertical"},fieldset:{type:Boolean},name:{default:""},label:{default:""},labelTextColor:{},hint:{default:""},hintTextColor:{default:"neutral--dark-4"},hideHint:{type:Boolean},hintIcon:{default:null},modelValue:{default:void 0},disabled:{type:Boolean},loading:{type:Boolean},color:{},textColor:{},errorColor:{default:"danger"},validationTrigger:{default:"change"},rules:{type:[Function,Array],default:()=>[]},errorMessage:{default:""},validateOnMount:{type:Boolean},focusColor:{},borderColor:{}},emits:["update:modelValue","select-radio","change","focus","blur"],setup(u,{expose:d,emit:s}){const l=u,t=s;d({focus:g});const{value:n,isValid:c,hint:p,validate:f}=R.useFieldWithValidation(l,{validateOnMount:l.validateOnMount}),{handleChange:h,handleFocus:m,handleBlur:v}=T.useInputEventBindings(f,l.validationTrigger,t);e.watch(n,()=>{t("select-radio",n.value)});const _=e.computed(()=>({"FRadioGroup--horizontal":l.displayMode==="horizontal"})),b=e.computed(()=>l.disabled?"neutral--dark-1":c.value?l.hintTextColor:l.errorColor),r=e.ref();function g(){r.value[0]?.focus()}return(o,i)=>{const C=k,F=y;return e.openBlock(),e.createBlock(F,e.mergeProps({class:["FRadioGroup",e.unref(_)],fieldset:"",disabled:o.disabled},{name:o.name,label:o.label,labelTextColor:o.labelTextColor,hint:e.unref(p),hideHint:o.hideHint,hintTextColor:e.unref(b),hintIcon:o.hintIcon}),{default:e.withCtx(()=>[e.createElementVNode("div",V,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.options,a=>(e.openBlock(),e.createBlock(C,{key:a.name,ref_for:!0,ref_key:"radioRefs",ref:r,modelValue:e.unref(n),"onUpdate:modelValue":i[0]||(i[0]=B=>e.isRef(n)?n.value=B:null),name:a.name,value:a.value,label:a.label,disabled:o.disabled,"hide-hint":"",onBlur:e.unref(v),onChange:e.unref(h),onFocus:e.unref(m)},null,8,["modelValue","name","value","label","disabled","onBlur","onChange","onFocus"]))),128))])]),_:1},16,["class","disabled"])}}});module.exports=q;