maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 5.12 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{t as hasSlotContent}from"./hasSlotContent.akaXJLAp.js";import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{computed,createCommentVNode,createElementBlock,createElementVNode,createTextVNode,createVNode,defineComponent,mergeProps,normalizeClass,normalizeStyle,openBlock,ref,renderSlot,toDisplayString,unref}from"vue";import{MazCheck}from"@maz-ui/icons/static/MazCheck";import '../assets/MazCheckbox.DMfUoWZb.css';var _hoisted_1=[`for`,`aria-checked`];var _hoisted_2=[`id`,`checked`,`disabled`,`name`];var _hoisted_3={key:0,class:`m-checkbox__text`};var MazCheckbox_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazCheckbox`,props:{style:{type:[Boolean,null,String,Object,Array],default:void 0},class:{type:[Boolean,null,String,Object,Array],default:void 0},modelValue:{default:void 0},id:{default:void 0},color:{default:`primary`},value:{type:[String,Number,Boolean],default:void 0},name:{default:`m-checkbox`},size:{default:`md`},label:{default:void 0},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:`MazCheckbox`,providedId:props.id});let inputRef=ref();let isFocused=ref(!1);let isChecked=computed(()=>typeof props.value!=`boolean`&&Array.isArray(props.modelValue)?props.modelValue.includes(props.value):typeof props.modelValue==`boolean`?props.modelValue:!1);let checkboxSize=computed(()=>{switch(props.size){case`xl`:return`2rem`;case`lg`:return`1.75rem`;case`sm`:return`1.25rem`;case`xs`:return`1rem`;case`mini`:return`0.75rem`;default:return`1.5rem`}});let checkIconSize=computed(()=>{switch(props.size){case`xl`:return`maz-text-2xl`;case`lg`:return`maz-text-xl`;case`sm`:return`maz-text-base`;case`xs`:return`maz-text-sm`;case`mini`:return`maz-text-xs`;default:return`maz-text-lg`}});let checkIconColor=computed(()=>props.color===`contrast`?`hsl(var(--maz-background))`:`hsl(var(--maz-${props.color}-foreground))`);let checkboxSelectedColor=computed(()=>props.color===`contrast`?`hsl(var(--maz-contrast))`:`hsl(var(--maz-${props.color}))`);let checkboxBoxShadow=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(props.value??!props.modelValue))}function getNewValue(value){return typeof value==`boolean`&&(typeof props.modelValue==`boolean`||props.modelValue===void 0||props.modelValue===null)?!props.modelValue:Array.isArray(props.modelValue)&&typeof value!=`boolean`?props.modelValue.includes(value)?props.modelValue.filter(v=>v!==value):[...props.modelValue,value]:[value]}function emitValue(value){let newValue=getNewValue(value);emits(`update:model-value`,newValue),emits(`change`,newValue)}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-checkbox m-reset-css`,[{"--error":__props.error,"--warning":__props.warning,"--success":__props.success},props.class]]),style:normalizeStyle([__props.style,{"--checkbox-selected-color":checkboxSelectedColor.value,"--checkbox-box-shadow-color":checkboxBoxShadow.value}]),role:`checkbox`,"aria-checked":isChecked.value,tabindex:`0`,onKeydown:keyboardHandler,onBlur,onFocus},[createElementVNode(`input`,mergeProps({id:unref(instanceId),ref_key:`inputRef`,ref:inputRef,checked:isChecked.value},_ctx.$attrs,{tabindex:`-1`,disabled:__props.disabled,name:__props.name,type:`checkbox`,onChange:_cache[0]||=$event=>emitValue(__props.value??$event?.target?.checked)}),null,16,_hoisted_2),createElementVNode(`span`,{style:normalizeStyle({width:checkboxSize.value,height:checkboxSize.value})},[createVNode(unref(MazCheck),{class:normalizeClass([`check-icon`,checkIconSize.value]),style:normalizeStyle({color:checkIconColor.value})},null,8,[`class`,`style`])],4),__props.label||unref(hasSlotContent)(_ctx.$slots.default)||__props.hint?(openBlock(),createElementBlock(`div`,_hoisted_3,[renderSlot(_ctx.$slots,`default`,{value:__props.value},()=>[createTextVNode(toDisplayString(__props.label),1)],!0),__props.hint?(openBlock(),createElementBlock(`span`,{key:0,class:normalizeClass([`m-checkbox__hint`,{"--error":__props.error,"--success":__props.success,"--warning":__props.warning}])},toDisplayString(__props.hint),3)):createCommentVNode(``,!0)])):createCommentVNode(``,!0)],46,_hoisted_1))}}),[[`__scopeId`,`data-v-bc602d30`]]);export{MazCheckbox_default as t};