@fifteen/design-system-vue/dist/cjs/components/form/FRadio.js

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

"use strict";const _=require("./FField.js");;/* empty css         */const e=require("vue"),a=require("../../utils/getCssColor.js"),R=require("../../composables/useFieldWithValidation.js"),V=require("../../composables/useInputEventBindings.js"),T=["for"],E={class:"FRadio__wrapper"},q=["id","name","value","checked","disabled"],I={key:0,class:"FRadio__labelText"},M={key:1,class:"FRadio__labelText"},N=e.defineComponent({__name:"FRadio",props:{value:{type:[String,Boolean,Number,null],default:null},outlineColor:{default:"neutral--light-2"},hoverBorderColor:{default:"secondary"},checkedColor:{default:"neutral--light-5"},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,String,Number,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},focusColor:{},borderColor:{default:"neutral--dark-1"}},emits:["update:modelValue","change","focus","blur"],setup(C,{expose:p,emit:h}){const o=C,g=h;p({focus:B});const d=e.useId(),{isValid:s,hint:v,value:n,validate:m}=R.useFieldWithValidation(o,{validateOnMount:o.validateOnMount}),{handleBlur:i,handleFocus:u,handleChange:f}=V.useInputEventBindings(m,o.validationTrigger,g),b=e.computed(()=>({"--fradio--border-color":a.getCssColor(o.borderColor),"--fradio--checked-border-color":a.getCssColor(o.checkedBorderColor),"--fradio--checked-color":a.getCssColor(o.checkedColor),"--fradio--color":a.getCssColor(o.color),"--fradio--error-color":a.getCssColor(o.errorColor),"--fradio--hover-border-color":a.getCssColor(o.hoverBorderColor),"--fradio--outline-color":a.getCssColor(`${o.outlineColor}--rgb`),"--fradio--text-color":a.getCssColor(o.textColor)})),y=e.computed(()=>o.disabled?"neutral--dark-1":s.value?o.hintTextColor:o.errorColor),k=e.computed(()=>({"FRadio--error":!s.value,"FRadio--disabled":o.disabled})),c=e.ref();function B(){c.value?.focus()}return(l,r)=>{const F=_;return e.openBlock(),e.createBlock(F,e.mergeProps({class:["FRadio",e.unref(k)],style:e.unref(b)},{name:l.name,hint:e.unref(v),hideHint:l.hideHint,hintTextColor:e.unref(y),hintIcon:l.hintIcon}),{default:e.withCtx(()=>[e.createElementVNode("label",{class:"FRadio__label",for:e.unref(d)},[e.createElementVNode("div",E,[e.withDirectives(e.createElementVNode("input",{class:"FRadio__radio",id:e.unref(d),ref_key:"radioRef",ref:c,"onUpdate:modelValue":r[0]||(r[0]=t=>e.isRef(n)?n.value=t:null),name:l.name,type:"radio",value:l.value,checked:e.unref(n)===l.value,disabled:l.disabled,onBlur:r[1]||(r[1]=(...t)=>e.unref(i)&&e.unref(i)(...t)),onChange:r[2]||(r[2]=(...t)=>e.unref(f)&&e.unref(f)(...t)),onFocus:r[3]||(r[3]=(...t)=>e.unref(u)&&e.unref(u)(...t)),onKeypress:r[4]||(r[4]=e.withKeys(t=>n.value=l.value,["enter"]))},null,40,q),[[e.vModelRadio,e.unref(n)]])]),l.label?(e.openBlock(),e.createElementBlock("span",I,e.toDisplayString(l.label),1)):(e.openBlock(),e.createElementBlock("span",M,[e.renderSlot(l.$slots,"label")]))],8,T)]),_:3},16,["class","style"])}}});module.exports=N;