maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 8.77 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{useMountComponent}from"../composables/useMountComponent.js";import{useTimer}from"../composables/useTimer.js";import{Fragment,Transition,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createVNode,defineAsyncComponent,defineComponent,mergeProps,normalizeClass,normalizeStyle,onMounted,openBlock,ref,renderList,resolveDynamicComponent,toDisplayString,unref,vShow,watch,withCtx,withDirectives,withModifiers}from"vue";import{MazCheckCircle}from"@maz-ui/icons/lazy/MazCheckCircle";import{MazExclamationCircle}from"@maz-ui/icons/lazy/MazExclamationCircle";import{MazExclamationTriangle}from"@maz-ui/icons/lazy/MazExclamationTriangle";import{MazArrowTopRightOnSquare}from"@maz-ui/icons/lazy/MazArrowTopRightOnSquare";import{MazXMark}from"@maz-ui/icons/lazy/MazXMark";import{MazInformationCircle}from"@maz-ui/icons/lazy/MazInformationCircle";import{MazLinkIcon}from"@maz-ui/icons/lazy/MazLinkIcon";import '../assets/toast.Bd4iCAQT.css';var _hoisted_1=[`textContent`,`innerHTML`];var _hoisted_2={key:1,class:`m-toast__progress-bar`};var MazToast_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazToast`,props:{message:{},type:{default:`info`},destroy:{type:Function},html:{type:Boolean,default:!1},maxToasts:{type:[Number,Boolean],default:!1},queue:{type:Boolean},position:{default:`bottom-right`},pauseOnHover:{type:Boolean,default:!0},timeout:{type:[Number,Boolean],default:1e4},persistent:{type:Boolean},icon:{type:[Boolean,Function,Object],default:!0},button:{},buttons:{}},emits:[`close`,`click`,`open`],setup(__props,{expose:__expose,emit:__emit}){let emits=__emit;let MazBtn=defineAsyncComponent(()=>import(`../components/MazBtn.js`));let Toast=ref();let internalButtons=computed(()=>{let buttonArray=[];return __props.button&&buttonArray.push(__props.button),__props.buttons&&buttonArray.push(...__props.buttons),buttonArray});let iconComponent=computed(()=>{if(__props.icon)switch(__props.type){case`destructive`:return MazExclamationTriangle;case`info`:return MazInformationCircle;case`success`:return MazCheckCircle;case`warning`:return MazExclamationCircle;default:return}});let positionY=computed(()=>__props.position.includes(`top`)?`top`:`bottom`);let positionX=computed(()=>__props.position.includes(`left`)?`left`:__props.position.includes(`right`)?`right`:`center`);let transitionName=computed(()=>positionX.value===`center`?positionY.value===`top`?`m-slide-top`:`m-slide-bottom`:positionX.value===`right`?`m-slide-right`:`m-slide-left`);let isActive=ref(!1);let queueTimer=ref();let containerClassName=`m-toast-container m-reset-css --${positionY.value} --${positionX.value}`;let selectorContainerClass=`.${containerClassName.replaceAll(` `,`.`)}`;let timer=useTimer({callback:closeToast,timeout:typeof __props.timeout==`number`?__props.timeout:0,callbackOffsetTime:200});function createParents(){let container=document.querySelector(selectorContainerClass);if(!container&&!container){let body=document.body;let toCreate=document.createElement(`div`);toCreate.className=containerClassName,body.append(toCreate)}}function shouldQueue(){let container=document.querySelector(selectorContainerClass);return!__props.queue&&__props.maxToasts===!1?!1:typeof __props.maxToasts==`number`&&container?__props.maxToasts<=container.childElementCount:container&&container.childElementCount>0}function showNotice(){if(shouldQueue()){queueTimer.value=setTimeout(showNotice,250);return}let container=document.querySelector(selectorContainerClass);Toast.value&&container&&container.prepend(Toast.value),isActive.value=!0,typeof __props.timeout==`number`&&__props.timeout>0&&!__props.persistent&&timer.start()}let progressBarWidth=ref(`100%`);function getProgressBarColor(){switch(__props.type){case`destructive`:return`maz-bg-destructive-800`;case`info`:return`maz-bg-info-800`;case`success`:return`maz-bg-success-800`;case`warning`:return`maz-bg-warning-800`;default:return`maz-bg-contrast-foreground`}}watch(timer.remainingTime,remainingTime=>{typeof __props.timeout==`number`&&(progressBarWidth.value=`${100*remainingTime/__props.timeout}%`)});function click(event,shouldClose=!0){emits(`click`,event),shouldClose&&closeToast()}let isActionLoading=ref(!1);async function onButtonClick(button,event){button.onClick&&(isActionLoading.value=!0,timer.pause(),await button.onClick(),timer.resume(),isActionLoading.value=!1),click(event,button.closeToast??!1)}function toggleTimer(shouldPause){!__props.pauseOnHover||__props.persistent||isActionLoading.value||(shouldPause?timer.pause():timer.resume())}function stopTimer(){timer.stop(),queueTimer.value&&clearTimeout(queueTimer.value)}function closeToast(){stopTimer(),isActive.value=!1}function onAnimationEnter(){emits(`open`)}function onAnimationLeave(){emits(`close`),Toast.value?.remove(),__props.destroy?.();let container=document.querySelector(selectorContainerClass);container&&!container?.hasChildNodes()&&container.remove()}function getButtonRightIcon(button){return!button.to&&!button.href?button.rightIcon:button.target===`_blank`?MazArrowTopRightOnSquare:MazLinkIcon}return __expose({closeToast}),onMounted(()=>{createParents(),showNotice()}),(_ctx,_cache)=>(openBlock(),createBlock(Transition,{name:transitionName.value,appear:``,onAfterLeave:onAnimationLeave,onAfterEnter:onAnimationEnter},{default:withCtx(()=>[withDirectives(createElementVNode(`div`,{ref_key:`Toast`,ref:Toast,class:normalizeClass([`m-toast m-reset-css`,[`--${__props.type}`,`--${positionY.value}`,`--${positionX.value}`,{"--persistent":__props.persistent}]])},[createElementVNode(`button`,{role:`alert`,class:`m-toast__button`,onMouseover:_cache[0]||=$event=>toggleTimer(!0),onMouseleave:_cache[1]||=$event=>toggleTimer(!1),onTouchstartPassive:_cache[2]||=$event=>toggleTimer(!0),onTouchendPassive:_cache[3]||=$event=>toggleTimer(!1),onClick:_cache[4]||=withModifiers($event=>click($event),[`stop`])},[iconComponent.value?(openBlock(),createBlock(resolveDynamicComponent(iconComponent.value),{key:0,class:`maz-text-2xl`})):createCommentVNode(``,!0),createElementVNode(`div`,{class:`m-toast__message`,textContent:toDisplayString(__props.html?void 0:__props.message),innerHTML:__props.html?__props.message:void 0},null,8,_hoisted_1),(openBlock(!0),createElementBlock(Fragment,null,renderList(internalButtons.value,(toastButton,index)=>(openBlock(),createBlock(unref(MazBtn),mergeProps({key:index},{ref_for:!0},{...toastButton,onClick:void 0},{loading:isActionLoading.value||toastButton.loading,"right-icon":getButtonRightIcon(toastButton),onClick:withModifiers($event=>onButtonClick(toastButton,$event),[`stop`])}),null,16,[`loading`,`right-icon`,`onClick`]))),128)),typeof __props.timeout==`number`&&__props.timeout>0&&!__props.persistent?(openBlock(),createElementBlock(`div`,_hoisted_2,[createElementVNode(`div`,{style:normalizeStyle({width:progressBarWidth.value}),class:normalizeClass([`m-toast__progress-bar-inner`,getProgressBarColor()])},null,6)])):createCommentVNode(``,!0)],32),createElementVNode(`button`,{class:`m-toast__close`,onClick:_cache[5]||=withModifiers($event=>click($event),[`stop`])},[createVNode(unref(MazXMark),{class:`m-toast__close-icon`})])],2),[[vShow,isActive.value]])]),_:1},8,[`name`]))}}),[[`__scopeId`,`data-v-a16077a2`]]);var DEFAULT_OPTIONS={position:`bottom-right`,timeout:1e4,persistent:!1};var ToastHandler=class{constructor(app,globalOptions){this.app=app,this.globalOptions=globalOptions}show(message,options){let{destroy,vNode}=useMountComponent(MazToast_default,{props:{...DEFAULT_OPTIONS,...this.globalOptions,...options,message},app:this.app});return{destroy,close:()=>vNode.component?.exposed?.closeToast()}}getLocalOptions(options){let DEFAULT_BUTTON_OPTIONS={size:`xs`,color:options?.type??`contrast`,closeToast:!1};let button=options?.button?{...DEFAULT_BUTTON_OPTIONS,...options.button}:void 0;let buttons=options?.buttons?.map(button=>({...DEFAULT_BUTTON_OPTIONS,...button}));return{type:options?.type??`contrast`,...options,buttons,button}}message(message,options){return this.show(message,this.getLocalOptions(options))}success(message,options){return this.show(message,this.getLocalOptions({...options,type:`success`}))}error(message,options){return this.show(message,this.getLocalOptions({...options,type:`destructive`}))}info(message,options){return this.show(message,this.getLocalOptions({...options,type:`info`}))}warning(message,options){return this.show(message,this.getLocalOptions({...options,type:`warning`}))}};var ToastPlugin={install(app,options){let toastHandler=new ToastHandler(app,options);app.provide(`mazToast`,toastHandler),app.config.globalProperties.$mazToast=toastHandler}};export{ToastHandler as n,ToastPlugin as t};