maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 5.77 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{Teleport,Transition,createBlock,createCommentVNode,createElementBlock,createElementVNode,createVNode,defineComponent,mergeProps,nextTick,normalizeClass,onMounted,openBlock,ref,renderSlot,watch,withCtx,withModifiers}from"vue";import '../assets/MazBackdrop.BsjxcAe9.css';var _hoisted_1=[`aria-labelledby`,`aria-describedby`];var _hoisted_2={role:`dialog`,class:`m-backdrop-container`,"aria-modal":`true`};var _hoisted_3={class:`m-backdrop-wrapper`};var MODAL_OPENED_CLASS=`--backdrop-present`;var MazBackdrop_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazBackdrop`,props:{modelValue:{type:Boolean,default:!1},teleportSelector:{default:`body`},beforeClose:{type:Function},persistent:{type:Boolean,default:!1},closeOnEscape:{type:Boolean,default:!0},transitionName:{default:`backdrop-anim`},backdropClass:{type:[Boolean,null,String,Object,Array]},backdropContentClass:{type:[Boolean,null,String,Object,Array]},contentPadding:{type:Boolean,default:!1},justify:{default:`none`},align:{default:`none`},variant:{},ariaLabelledby:{},ariaDescribedby:{}},emits:[`open`,`close`,`update:model-value`,`before-close`],setup(__props,{expose:__expose,emit:__emit}){let emits=__emit;function getScrollbarWidth(){return window.innerWidth-document.documentElement.clientWidth}function addClassToDocument(){let scrollbarWidth=getScrollbarWidth();scrollbarWidth>0&&(document.documentElement.style.setProperty(`--scrollbar-width`,`${scrollbarWidth}px`),document.documentElement.classList.add(`--has-scrollbar`)),document.documentElement.classList.add(MODAL_OPENED_CLASS)}function removeClassFromDocument(){document.querySelector(`.m-backdrop.--present`)||(document.documentElement.classList.remove(MODAL_OPENED_CLASS),document.documentElement.classList.remove(`--has-scrollbar`),document.documentElement.style.removeProperty(`--scrollbar-width`))}let present=ref(__props.modelValue);function close(){__props.persistent||toggleModal(!1)}async function toggleModal(value){let newValue=value??!present.value;newValue||(emits(`before-close`),await __props.beforeClose?.()),present.value=newValue}function onBackdropAnimationEnter(){emits(`open`)}function onBackdropAnimationLeave(){emits(`update:model-value`,!1),emits(`close`),removeClassAndEventToDocument()}function onKeyPress(event){__props.closeOnEscape&&event.key===`Escape`&&close()}function addClassAndEventToDocument(){addClassToDocument(),document.addEventListener(`keyup`,onKeyPress,!1),document.addEventListener(`keydown`,trapFocus,!1)}function removeClassAndEventToDocument(){try{document.removeEventListener(`keyup`,onKeyPress),document.removeEventListener(`keydown`,trapFocus)}catch(error){console.warn(`Error removing event listeners:`,error)}removeClassFromDocument()}onMounted(()=>{__props.modelValue?addClassAndEventToDocument():removeClassAndEventToDocument()});let initialFocusableElement=null;function getAllFocusableElements(selector){let modal=document.querySelector(selector);return(modal&&[...modal.querySelectorAll(`a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="time"], select, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]`)])?.filter(el=>{let style=globalThis.getComputedStyle(el);let isDisabled=`disabled`in el?el.disabled:!1;return style.display!==`none`&&style.visibility!==`hidden`&&!isDisabled&&el.tabIndex!==-1})||[]}function findFirstFocusableElement(selector){let focusableElements=getAllFocusableElements(selector);return focusableElements.length>0?focusableElements[0]:null}function trapFocus(event){if(event.key!==`Tab`)return;let focusableElements=getAllFocusableElements(`.m-backdrop-content`);if(focusableElements.length===0)return;let firstFocusable=focusableElements[0];let lastFocusable=focusableElements.at(-1);event.shiftKey?document.activeElement===firstFocusable&&(event.preventDefault(),lastFocusable?.focus()):document.activeElement===lastFocusable&&(event.preventDefault(),firstFocusable?.focus())}return watch(()=>__props.modelValue,async value=>{present.value=value,value?(addClassAndEventToDocument(),initialFocusableElement=document.activeElement,await nextTick(),findFirstFocusableElement(`.m-backdrop-content`)?.focus()):(removeClassAndEventToDocument(),await nextTick(),initialFocusableElement?.focus())}),__expose({onBackdropAnimationLeave,close,present,toggleModal,onKeyPress}),(_ctx,_cache)=>(openBlock(),createBlock(Teleport,{to:__props.teleportSelector,disabled:!present.value},[createVNode(Transition,{appear:``,name:__props.transitionName,onAfterEnter:onBackdropAnimationEnter,onAfterLeave:onBackdropAnimationLeave},{default:withCtx(()=>[present.value?(openBlock(),createElementBlock(`div`,mergeProps({key:0,class:`m-backdrop --present m-reset-css`},_ctx.$attrs,{class:[__props.backdropClass,__props.variant&&`--variant-${__props.variant}`,{"--persistent":__props.persistent}],"aria-labelledby":__props.ariaLabelledby,"aria-describedby":__props.ariaDescribedby}),[createElementVNode(`div`,_hoisted_2,[createElementVNode(`div`,_hoisted_3,[createElementVNode(`div`,{class:normalizeClass([`m-backdrop-content`,[__props.backdropContentClass,`--justify-${__props.justify}`,`--align-${__props.align}`,{"--padding":__props.contentPadding}]]),role:`button`,tabindex:`-1`,onPointerdown:withModifiers(close,[`self`])},[renderSlot(_ctx.$slots,`default`,{close},void 0,!0)],34)])])],16,_hoisted_1)):createCommentVNode(``,!0)]),_:3},8,[`name`])],8,[`to`,`disabled`]))}}),[[`__scopeId`,`data-v-0e128b75`]]);export{MazBackdrop_default as t};