maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 4.33 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{t as getColor}from"./types.CpBj759L.js";import{Fragment,Transition,createCommentVNode,createElementBlock,createElementVNode,createTextVNode,createVNode,defineComponent,normalizeClass,normalizeStyle,openBlock,ref,renderList,renderSlot,toDisplayString,unref,vShow,withCtx,withDirectives}from"vue";import{MazCheck}from"@maz-ui/icons/lazy/MazCheck";import '../assets/MazRadioButtons.BSCUQjD5.css';var _hoisted_1={class:`m-radio-buttons m-reset-css`};var _hoisted_2=[`for`,`aria-checked`,`onKeydown`,`onBlur`,`onFocus`];var _hoisted_3=[`id`,`name`,`value`,`onChange`];var _hoisted_4={key:0,class:`m-radio-buttons__items__checkbox`};var MazRadioButtons_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazRadioButtons`,props:{modelValue:{default:void 0},options:{},name:{default:`MazButtonsRadio`},color:{default:`primary`},elevation:{type:Boolean,default:!1},orientation:{default:`row`},wrap:{type:Boolean,default:!0},equalSize:{type:Boolean,default:!1},selector:{type:Boolean,default:!1},block:{type:Boolean,default:!1},error:{type:Boolean},success:{type:Boolean},warning:{type:Boolean},hint:{},size:{default:`md`}},emits:[`update:model-value`,`change`,`blur`,`focus`],setup(__props,{emit:__emit}){let props=__props;let emits=__emit;function selectOption(option){emits(`update:model-value`,option.value),emits(`change`,option.value)}function isSelected(value){return props.modelValue===value}function keyboardHandler(event,option){[`Space`].includes(event.code)&&(event.preventDefault(),selectOption(option))}function getOptionId(option,i){return`option-${i}-${option.value.toString()}-${props.name}`}let inputRef=ref();function onBlur(index,event){inputRef.value?.[index]?.dispatchEvent(new Event(`blur`)),emits(`blur`,event)}function onFocus(index,event){inputRef.value?.[index]?.dispatchEvent(new Event(`focus`)),emits(`focus`,event)}return(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,_hoisted_1,[createElementVNode(`div`,{class:normalizeClass([`m-radio-buttons__wrapper`,[`--${__props.orientation}`,{"--wrap":__props.wrap,"--block":__props.block}]])},[(openBlock(!0),createElementBlock(Fragment,null,renderList(__props.options,(option,i)=>(openBlock(),createElementBlock(`label`,{key:getOptionId(option,i),for:getOptionId(option,i),class:normalizeClass([`m-radio-buttons__items maz-group`,[`--size-${__props.size}`,{"--is-selected":isSelected(option.value),"--elevation":__props.elevation,"--equal-size":__props.equalSize},option.classes]]),tabindex:`0`,style:normalizeStyle([isSelected(option.value)?{color:`hsl(var(--maz-${unref(getColor)(__props.color)}-foreground))`,backgroundColor:`hsl(var(--maz-${unref(getColor)(__props.color)}))`,borderColor:`hsl(var(--maz-${unref(getColor)(__props.color)}))`}:{},option.style]),role:`radio`,"aria-checked":isSelected(option.value),onKeydown:$event=>keyboardHandler($event,option),onBlur:$event=>onBlur(i,$event),onFocus:$event=>onFocus(i,$event)},[createElementVNode(`input`,{id:getOptionId(option,i),ref_for:!0,ref_key:`inputRef`,ref:inputRef,type:`radio`,tabindex:`-1`,name:__props.name,value:option.value,class:`maz-hidden`,onChange:$event=>selectOption(option)},null,40,_hoisted_3),__props.selector?(openBlock(),createElementBlock(`div`,_hoisted_4,[createElementVNode(`span`,{class:normalizeClass({"--is-selected":isSelected(option.value)}),style:normalizeStyle([isSelected(option.value)?{backgroundColor:`hsl(var(--maz-${unref(getColor)(props.color)}-600))`,color:`hsl(var(--maz-${unref(getColor)(props.color)}-foreground))`}:{}])},[createVNode(Transition,{name:`maz-radio-buttons-scale`},{default:withCtx(()=>[withDirectives(createVNode(unref(MazCheck),{class:`maz-size-full`},null,512),[[vShow,isSelected(option.value)]])]),_:2},1024)],6)])):createCommentVNode(``,!0),renderSlot(_ctx.$slots,`default`,{option,selected:isSelected(option.value)},()=>[createTextVNode(toDisplayString(option.label),1)],!0)],46,_hoisted_2))),128))],2),__props.hint?(openBlock(),createElementBlock(`span`,{key:0,class:normalizeClass([`m-radio-buttons__hint`,{"--error":__props.error,"--success":__props.success,"--warning":__props.warning}])},toDisplayString(__props.hint),3)):createCommentVNode(``,!0)]))}}),[[`__scopeId`,`data-v-735b3c49`]]);export{MazRadioButtons_default as t};