UNPKG

buefy

Version:

Lightweight UI components for Vue.js (v3) based on Bulma

3 lines (2 loc) 8.6 kB
/*! Buefy v3.0.2 | MIT License | github.com/buefy/buefy */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Modal={},e.Vue)}(this,(function(e,t){"use strict";const o=(e,t=!1)=>e?t?e.querySelectorAll('*[tabindex="-1"]'):e.querySelectorAll('a[href]:not([tabindex="-1"]),\n area[href],\n input:not([disabled]),\n select:not([disabled]),\n textarea:not([disabled]),\n button:not([disabled]),\n iframe,\n object,\n embed,\n *[tabindex]:not([tabindex="-1"]),\n *[contenteditable]'):null;let n;const a={beforeMount:(e,{value:t=!0})=>{if(t){let t=o(e),a=o(e,!0);t&&t.length>0&&(n=n=>{t=o(e),a=o(e,!0);const l=t[0],i=t[t.length-1];n.target===l&&n.shiftKey&&"Tab"===n.key?(n.preventDefault(),i.focus()):(n.target===i||Array.from(a).indexOf(n.target)>=0)&&!n.shiftKey&&"Tab"===n.key&&(n.preventDefault(),l.focus())},e.addEventListener("keydown",n))}},unmounted:e=>{e.removeEventListener("keydown",n)}};let l={defaultModalCanCancel:["escape","x","outside","button"],defaultTrapFocus:!0,defaultAutoFocus:!0};const i=["clip","keep"],s=["dialog","alertdialog"],c=t.defineComponent({name:"BModal",directives:{trapFocus:a},props:{modelValue:Boolean,component:[Object,Function,String],content:{type:[String,Object,Array]},programmatic:Boolean,props:Object,events:{type:Object,default:()=>({})},width:{type:[String,Number],default:960},hasModalCard:Boolean,animation:{type:String,default:"zoom-out"},canCancel:{type:[Array,Boolean],default:()=>l.defaultModalCanCancel},cancelCallback:{type:Function,default:()=>{}},scroll:{type:String,default:()=>"clip",validator:e=>i.indexOf(e)>=0},fullScreen:Boolean,trapFocus:{type:Boolean,default:()=>l.defaultTrapFocus},autoFocus:{type:Boolean,default:()=>l.defaultAutoFocus},customClass:String,customContentClass:[String,Array,Object],ariaRole:{type:String,validator:e=>s.indexOf(e)>=0},ariaModal:Boolean,ariaLabel:{type:String,validator:e=>Boolean(e)},closeButtonAriaLabel:{type:String,default:"close"},destroyOnHide:{type:Boolean,default:!0},renderOnMounted:{type:Boolean,default:!1}},emits:{"after-enter":()=>!0,"after-leave":()=>!0,cancel:e=>!0,close:()=>!0,"update:modelValue":e=>!0},data(){return{isActive:this.modelValue||!1,savedScrollTop:null,newWidth:"number"==typeof this.width?this.width+"px":this.width,animating:!this.modelValue,destroyed:!(this.modelValue||this.renderOnMounted)}},computed:{cancelOptions(){return"boolean"==typeof this.canCancel?this.canCancel?l.defaultModalCanCancel:[]:this.canCancel},showX(){return this.cancelOptions.indexOf("x")>=0},customStyle(){return this.fullScreen?null:{maxWidth:this.newWidth}}},watch:{modelValue(e){this.isActive=e},isActive(e){e&&(this.destroyed=!1),this.handleScroll(),this.$nextTick((()=>{e&&this.$el&&this.$el.focus&&this.autoFocus&&this.$el.focus()}))}},methods:{handleScroll(){"undefined"!=typeof window&&("clip"!==this.scroll?(this.savedScrollTop=this.savedScrollTop?this.savedScrollTop:document.documentElement.scrollTop,this.isActive?document.body.classList.add("is-noscroll"):document.body.classList.remove("is-noscroll"),this.isActive?document.body.style.top=`-${this.savedScrollTop}px`:(document.documentElement.scrollTop=this.savedScrollTop,document.body.style.top="",this.savedScrollTop=null)):this.isActive?document.documentElement.classList.add("is-clipped"):document.documentElement.classList.remove("is-clipped"))},cancel(e){this.cancelOptions.indexOf(e)<0||(this.$emit("cancel",e),this.cancelCallback.apply(null,[e]),this.close())},close(){this.$emit("close"),this.$emit("update:modelValue",!1),this.programmatic&&(this.isActive=!1,setTimeout((()=>{var e;void 0!==(e=this.$el).remove?e.remove():void 0!==e.parentNode&&null!==e.parentNode&&e.parentNode.removeChild(e)}),150))},keyPress({key:e}){!this.isActive||"Escape"!==e&&"Esc"!==e||this.cancel("escape")},afterEnter(){this.animating=!1,this.$emit("after-enter")},beforeLeave(){this.animating=!0},afterLeave(){this.destroyOnHide&&(this.destroyed=!0),this.$emit("after-leave")}},created(){"undefined"!=typeof window&&document.addEventListener("keyup",this.keyPress)},mounted(){this.programmatic?(document.body.appendChild(this.$el),this.isActive=!0):this.isActive&&this.handleScroll()},beforeUnmount(){if("undefined"!=typeof window){document.removeEventListener("keyup",this.keyPress),document.documentElement.classList.remove("is-clipped");const e=this.savedScrollTop?this.savedScrollTop:document.documentElement.scrollTop;document.body.classList.remove("is-noscroll"),document.documentElement.scrollTop=e,document.body.style.top=""}}});const r=["role","aria-label","aria-modal"],d=["innerHTML"],u=["aria-label"];var m=((e,t)=>{const o=e.__vccOpts||e;for(const[e,n]of t)o[e]=n;return o})(c,[["render",function(e,o,n,a,l,i){const s=t.resolveDirective("trap-focus");return t.openBlock(),t.createBlock(t.Transition,{name:e.animation,onAfterEnter:e.afterEnter,onBeforeLeave:e.beforeLeave,onAfterLeave:e.afterLeave},{default:t.withCtx((()=>[e.destroyed?t.createCommentVNode("v-if",!0):t.withDirectives((t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["modal is-active",[{"is-full-screen":e.fullScreen},e.customClass]]),tabindex:"-1",role:e.ariaRole,"aria-label":e.ariaLabel,"aria-modal":e.ariaModal||void 0},[t.createElementVNode("div",{class:"modal-background",onClick:o[0]||(o[0]=t=>e.cancel("outside"))}),t.createElementVNode("div",{class:t.normalizeClass(["animation-content",[{"modal-content":!e.hasModalCard},e.customContentClass]]),style:t.normalizeStyle(e.customStyle)},[e.component?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.component),t.mergeProps({key:0},e.props,t.toHandlers(e.events),{"can-cancel":e.canCancel,onClose:e.close}),null,16,["can-cancel","onClose"])):e.content?(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[t.createCommentVNode(" eslint-disable-next-line vue/no-v-html "),t.createElementVNode("div",{innerHTML:e.content},null,8,d)],64)):t.renderSlot(e.$slots,"default",{key:2,canCancel:e.canCancel,close:e.close})],6),e.showX?t.withDirectives((t.openBlock(),t.createElementBlock("button",{key:0,class:"modal-close is-large","aria-label":e.closeButtonAriaLabel,onClick:o[1]||(o[1]=t=>e.cancel("x"))},null,8,u)),[[t.vShow,!e.animating]]):t.createCommentVNode("v-if",!0)],10,r)),[[t.vShow,e.isActive],[s,e.trapFocus]])])),_:3},8,["name","onAfterEnter","onBeforeLeave","onAfterLeave"])}]]);var p=Object.defineProperty,f=Object.defineProperties,h=Object.getOwnPropertyDescriptors,v=Object.getOwnPropertySymbols,y=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable,C=(e,t,o)=>t in e?p(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o;class g{constructor(e){var t;C(this,"app"+"",t),this.app=e}open(e){let o;"string"==typeof e&&(e={content:e}),Array.isArray(e.content)&&(o=e.content,delete e.content);const n=e,a=document.createElement("div"),l=t.createApp({data:()=>({modalVNode:null}),methods:{close(){const e=function(e){if(!e)return;const{component:t}=e;return t?t.exposed&&t.exposeProxy||t.proxy:void 0}(this.modalVNode);e&&e.close()}},render(){var e;return this.modalVNode=t.h(m,(e=((e,t)=>{for(var o in t||(t={}))y.call(t,o)&&C(e,o,t[o]);if(v)for(var o of v(t))b.call(t,o)&&C(e,o,t[o]);return e})({},n),f(e,h({programmatic:!0,onClose:()=>{l.unmount()},onCancel:()=>{},cancelCallback:e=>{null!=n.onCancel&&n.onCancel(e)}}))),o?{default:()=>o}:void 0),this.modalVNode}});return this.app&&function(e,t){const{_context:o}=e,{_context:n}=t;n.config=o.config,n.mixins=o.mixins,n.components=o.components,n.directives=o.directives,n.provides=o.provides,n.optionsCache=o.optionsCache,n.propsCache=o.propsCache,n.emitsCache=o.emitsCache,"__VUE_I18N_SYMBOL__"in e&&(t.__VUE_I18N_SYMBOL__=e.__VUE_I18N_SYMBOL__)}(this.app,l),l.mount(a)}}const S={install(e){((e,t)=>{const o=t.name;if(null==o)throw new Error("Buefy.registerComponent: missing component name");e.component(o,t)})(e,m),((e,t,o)=>{e.config.globalProperties.$buefy||(e.config.globalProperties.$buefy={}),e.config.globalProperties.$buefy[t]=o})(e,"modal",new g(e))}};e.BModal=m,e.ModalProgrammatic=g,e.default=S,Object.defineProperty(e,"__esModule",{value:!0})}));