@ntohq/buefy-next
Version:
Lightweight UI components for Vue.js (v3) based on Bulma
3 lines (2 loc) • 10.8 kB
JavaScript
/*! Buefy v0.2.0 | 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 l=(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 o;const a={beforeMount:(e,{value:t=!0})=>{if(t){let t=l(e),a=l(e,!0);t&&t.length>0&&(o=o=>{t=l(e),a=l(e,!0);const n=t[0],i=t[t.length-1];o.target===n&&o.shiftKey&&"Tab"===o.key?(o.preventDefault(),i.focus()):(o.target===i||Array.from(a).indexOf(o.target)>=0)&&!o.shiftKey&&"Tab"===o.key&&(o.preventDefault(),n.focus())},e.addEventListener("keydown",o))}},unmounted:e=>{e.removeEventListener("keydown",o)}};let n={defaultContainerElement:null,defaultIconPack:"mdi",defaultIconComponent:null,defaultIconPrev:"chevron-left",defaultIconNext:"chevron-right",defaultLocale:void 0,defaultDialogConfirmText:null,defaultDialogCancelText:null,defaultSnackbarDuration:3500,defaultSnackbarPosition:null,defaultToastDuration:2e3,defaultToastPosition:null,defaultNotificationDuration:2e3,defaultNotificationPosition:null,defaultTooltipType:"is-primary",defaultTooltipDelay:null,defaultTooltipCloseDelay:null,defaultSidebarDelay:null,defaultInputAutocomplete:"on",defaultDateFormatter:null,defaultDateParser:null,defaultDateCreator:null,defaultTimeCreator:null,defaultDayNames:null,defaultMonthNames:null,defaultFirstDayOfWeek:null,defaultUnselectableDaysOfWeek:null,defaultTimeFormatter:null,defaultTimeParser:null,defaultDatetimeFormatter:null,defaultDatetimeParser:null,defaultDatetimeCreator:null,defaultClockpickerHoursLabel:null,defaultClockpickerMinutesLabel:null,defaultColorFormatter:null,defaultColorParser:null,defaultModalCanCancel:["escape","x","outside","button"],defaultModalScroll:null,defaultDatepickerMobileNative:!0,defaultTimepickerMobileNative:!0,defaultTimepickerMobileModal:!0,defaultNoticeQueue:!0,defaultInputHasCounter:!0,defaultCompatFallthrough:!0,defaultTaginputHasCounter:!0,defaultUseHtml5Validation:!0,defaultDropdownMobileModal:!0,defaultFieldLabelPosition:null,defaultDatepickerYearsRange:[-100,10],defaultDatepickerNearbyMonthDays:!0,defaultDatepickerNearbySelectableMonthDays:!1,defaultDatepickerShowWeekNumber:!1,defaultDatepickerWeekNumberClickable:!1,defaultDatepickerMobileModal:!0,defaultTrapFocus:!0,defaultAutoFocus:!0,defaultButtonRounded:!1,defaultSwitchRounded:!0,defaultCarouselInterval:3500,defaultTabsExpanded:!1,defaultTabsAnimated:!0,defaultTabsType:null,defaultStatusIcon:!0,defaultProgrammaticPromise:!1,defaultLinkTags:["a","button","input","router-link","nuxt-link","n-link","RouterLink","NuxtLink","NLink"],defaultImageWebpFallback:null,defaultImageLazy:!0,defaultImageResponsive:!0,defaultImageRatio:null,defaultImageSrcsetFormatter:null,defaultBreadcrumbTag:"a",defaultBreadcrumbAlign:"is-left",defaultBreadcrumbSeparator:"",defaultBreadcrumbSize:"is-medium",customIconPacks:null};const i=["clip","keep"],r=["dialog","alertdialog"],s=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:()=>n.defaultModalCanCancel},cancelCallback:{type:Function,default:()=>{}},scroll:{type:String,default:()=>"clip",validator:e=>i.indexOf(e)>=0},fullScreen:Boolean,trapFocus:{type:Boolean,default:()=>n.defaultTrapFocus},autoFocus:{type:Boolean,default:()=>n.defaultAutoFocus},customClass:String,customContentClass:[String,Array,Object],ariaRole:{type:String,validator:e=>r.indexOf(e)>=0},ariaModal:Boolean,ariaLabel:{type:String,validator:e=>Boolean(e)},closeButtonAriaLabel:String,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?n.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 c=["role","aria-label","aria-modal"],d=["innerHTML"],u=["aria-label"];var f=((e,t)=>{const l=e.__vccOpts||e;for(const[e,o]of t)l[e]=o;return l})(s,[["render",function(e,l,o,a,n,i){const r=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:l[0]||(l[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}),e.showX?t.withDirectives((t.openBlock(),t.createElementBlock("button",{key:3,type:"button",class:"modal-close is-large","aria-label":e.closeButtonAriaLabel,onClick:l[1]||(l[1]=t=>e.cancel("x"))},null,8,u)),[[t.vShow,!e.animating]]):t.createCommentVNode("v-if",!0)],6)],10,c)),[[t.vShow,e.isActive],[r,e.trapFocus]])])),_:3},8,["name","onAfterEnter","onBeforeLeave","onAfterLeave"])}],["__file","/home/runner/work/buefy-next/buefy-next/packages/buefy-next/src/components/modal/Modal.vue"]]);var m=Object.defineProperty,p=Object.defineProperties,h=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable,C=(e,t,l)=>t in e?m(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l;class k{constructor(e){var t,l;C(this,"symbol"!=typeof(t="app")?t+"":t,l),this.app=e}open(e){let l;"string"==typeof e&&(e={content:e}),Array.isArray(e.content)&&(l=e.content,delete e.content);const o=e,a=document.createElement("div"),n=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(f,(e=((e,t)=>{for(var l in t||(t={}))b.call(t,l)&&C(e,l,t[l]);if(y)for(var l of y(t))v.call(t,l)&&C(e,l,t[l]);return e})({},o),p(e,h({programmatic:!0,onClose:()=>{n.unmount()},onCancel:()=>{},cancelCallback:e=>{null!=o.onCancel&&o.onCancel(e)}}))),l?{default:()=>l}:void 0),this.modalVNode}});return this.app&&function(e,t){const{_context:l}=e,{_context:o}=t;o.config=l.config,o.mixins=l.mixins,o.components=l.components,o.directives=l.directives,o.provides=l.provides,o.optionsCache=l.optionsCache,o.propsCache=l.propsCache,o.emitsCache=l.emitsCache,"__VUE_I18N_SYMBOL__"in e&&(t.__VUE_I18N_SYMBOL__=e.__VUE_I18N_SYMBOL__)}(this.app,n),n.mount(a)}}const g={install(e){((e,t,l)=>{const o=l||t.name;if(null==o)throw new Error("Buefy.registerComponent: missing component name");e.component(o,t)})(e,f),((e,t,l)=>{e.config.globalProperties.$buefy||(e.config.globalProperties.$buefy={}),e.config.globalProperties.$buefy[t]=l})(e,"modal",new k(e))}};e.BModal=f,e.ModalProgrammatic=k,e.default=g,Object.defineProperty(e,"__esModule",{value:!0})}));