maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 3.72 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{computed,createCommentVNode,createElementBlock,createElementVNode,createTextVNode,defineComponent,mergeProps,normalizeClass,normalizeStyle,openBlock,ref,renderSlot,toDisplayString,unref}from"vue";import '../assets/MazRadio.BwJxf7ZC.css';var _hoisted_1=[`for`,`aria-checked`];var _hoisted_2=[`id`,`value`,`disabled`,`name`,`checked`];var _hoisted_3={class:`m-radio__text`};var MazRadio_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazRadio`,props:{style:{type:[Boolean,null,String,Object,Array],default:void 0},class:{type:[Boolean,null,String,Object,Array],default:void 0},id:{default:void 0},modelValue:{default:void 0},value:{},name:{},label:{default:void 0},color:{default:`primary`},size:{default:`md`},disabled:{type:Boolean,default:!1},error:{type:Boolean},success:{type:Boolean},warning:{type:Boolean},hint:{}},emits:[`update:model-value`,`change`,`blur`,`focus`],setup(__props,{emit:__emit}){let props=__props;let emits=__emit;let instanceId=useInstanceUniqId({componentName:`MazRadio`,providedId:props.id});let inputRef=ref();let isFocused=ref(!1);let isSelected=computed(()=>props.modelValue===props.value);let radioSize=computed(()=>{switch(props.size){case`xl`:return`2.25rem`;case`lg`:return`2rem`;case`sm`:return`1.425rem`;case`xs`:return`1.325rem`;case`mini`:return`1.2rem`;default:return`1.625rem`}});let radioSelectedColor=computed(()=>`hsl(var(--maz-${props.color}))`);let radioBoxShadow=computed(()=>props.error&&!isFocused.value?`hsl(var(--maz-destructive))`:props.warning&&!isFocused.value?`hsl(var(--maz-warning))`:props.success&&!isFocused.value?`hsl(var(--maz-success))`:[`transparent`,`contrast`].includes(props.color)?`hsl(var(--maz-muted))`:`hsl(var(--maz-${props.color}) / 60%)`);function keyboardHandler(event){[`Space`].includes(event.code)&&(event.preventDefault(),emitValue())}function emitValue(){emits(`update:model-value`,props.value),emits(`change`,props.value)}function onBlur(event){isFocused.value=!1,inputRef.value?.dispatchEvent(new Event(`blur`)),emits(`blur`,event)}function onFocus(event){isFocused.value=!0,inputRef.value?.dispatchEvent(new Event(`focus`)),emits(`focus`,event)}return(_ctx,_cache)=>(openBlock(),createElementBlock(`label`,{for:unref(instanceId),class:normalizeClass([`m-radio m-reset-css`,[{"--selected":isSelected.value,"--error":__props.error,"--warning":__props.warning,"--success":__props.success},props.class]]),tabindex:`0`,role:`radio`,style:normalizeStyle([__props.style,{"--radio-size":radioSize.value,"--radio-selected-color":radioSelectedColor.value,"--radio-box-shadow":radioBoxShadow.value}]),"aria-checked":isSelected.value,onBlur,onFocus,onKeydown:keyboardHandler},[createElementVNode(`input`,mergeProps({id:unref(instanceId),ref_key:`inputRef`,ref:inputRef,value:__props.value},_ctx.$attrs,{tabindex:`-1`,disabled:__props.disabled,name:__props.name,type:`radio`,checked:isSelected.value,onChange:_cache[0]||=$event=>emitValue()}),null,16,_hoisted_2),_cache[1]||=createElementVNode(`span`,null,[createElementVNode(`span`,{class:`round`})],-1),createElementVNode(`div`,_hoisted_3,[renderSlot(_ctx.$slots,`default`,{isSelected:isSelected.value,value:__props.value},()=>[createTextVNode(toDisplayString(__props.label),1)],!0),__props.hint?(openBlock(),createElementBlock(`span`,{key:0,class:normalizeClass([`m-radio__hint`,{"--error":__props.error,"--success":__props.success,"--warning":__props.warning}])},toDisplayString(__props.hint),3)):createCommentVNode(``,!0)])],46,_hoisted_1))}}),[[`__scopeId`,`data-v-e9c69959`]]);export{MazRadio_default as t};