maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 2.91 kB
JavaScript
import{t as hasSlotContent}from"./hasSlotContent.akaXJLAp.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/MazSwitch.BsABVQx2.css';var _hoisted_1=[`for`,`aria-checked`];var _hoisted_2=[`id`,`name`,`checked`,`aria-label`,`disabled`];var _hoisted_3={key:0,class:`m-switch__text`};var MazSwitch_default=defineComponent({inheritAttrs:!1,__name:`MazSwitch`,props:{style:{type:[Boolean,null,String,Object,Array],default:void 0},class:{type:[Boolean,null,String,Object,Array],default:void 0},modelValue:{type:Boolean,default:!1},id:{default:void 0},disabled:{type:Boolean,default:!1},name:{default:void 0},label:{},color:{default:`primary`},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:`MazSwitch`,providedId:props.id});let bgColorClassVar=computed(()=>`hsl(var(--maz-${props.color}))`);function emit(){emits(`update:model-value`,!props.modelValue),emits(`change`,!props.modelValue)}let inputRef=ref();function keyboardHandler(event){[`Space`].includes(event.code)&&(event.preventDefault(),emit())}function onBlur(event){inputRef.value?.dispatchEvent(new Event(`blur`)),emits(`blur`,event)}function onFocus(event){inputRef.value?.dispatchEvent(new Event(`focus`)),emits(`focus`,event)}return(_ctx,_cache)=>(openBlock(),createElementBlock(`label`,{for:unref(instanceId),class:normalizeClass([`m-switch m-reset-css`,[{"--is-disabled":__props.disabled},props.class]]),role:`switch`,style:normalizeStyle([__props.style,{"--switch-color":bgColorClassVar.value}]),"aria-checked":__props.modelValue,tabindex:`0`,onBlur,onFocus,onKeydown:keyboardHandler},[createElementVNode(`input`,mergeProps({id:unref(instanceId)},_ctx.$attrs,{ref_key:`inputRef`,ref:inputRef,type:`checkbox`,name:__props.name,tabindex:`-1`,checked:__props.modelValue,"aria-label":__props.label,disabled:__props.disabled,class:`m-switch__input`,onChange:emit}),null,16,_hoisted_2),_cache[0]||=createElementVNode(`span`,{class:`m-switch__toggle`},null,-1),unref(hasSlotContent)(_ctx.$slots.default)||__props.label||__props.hint?(openBlock(),createElementBlock(`span`,_hoisted_3,[renderSlot(_ctx.$slots,`default`,{value:__props.modelValue},()=>[createTextVNode(toDisplayString(__props.label),1)]),__props.hint?(openBlock(),createElementBlock(`span`,{key:0,class:normalizeClass([`m-switch__hint`,{"--error":__props.error,"--success":__props.success,"--warning":__props.warning}])},toDisplayString(__props.hint),3)):createCommentVNode(``,!0)])):createCommentVNode(``,!0)],46,_hoisted_1))}});export{MazSwitch_default as t};