UNPKG

buefy

Version:

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

buefy.org

buefy/buefy

3 lines (2 loc) • 18.9 kB
1
2
3
/*! 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).Dialog={},e.Vue)}(this,(function(e,t){"use strict";const n=(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 i={beforeMount:(e,{value:t=!0})=>{if(t){let t=n(e),i=n(e,!0);t&&t.length>0&&(o=o=>{t=n(e),i=n(e,!0);const a=t[0],l=t[t.length-1];o.target===a&&o.shiftKey&&"Tab"===o.key?(o.preventDefault(),l.focus()):(o.target===l||Array.from(i).indexOf(o.target)>=0)&&!o.shiftKey&&"Tab"===o.key&&(o.preventDefault(),a.focus())},e.addEventListener("keydown",o))}},unmounted:e=>{e.removeEventListener("keydown",o)}};let a={defaultContainerElement:null,defaultIconPack:"mdi",defaultIconComponent:null,defaultModalCanCancel:["escape","x","outside","button"],defaultTrapFocus:!0,defaultAutoFocus:!0,defaultButtonRounded:!1,defaultLinkTags:["a","button","input","router-link","nuxt-link","n-link","RouterLink","NuxtLink","NLink"]};function l(e){void 0!==e.remove?e.remove():void 0!==e.parentNode&&null!==e.parentNode&&e.parentNode.removeChild(e)}function s(e){if(!e)return;const{component:t}=e;return t?t.exposed&&t.exposeProxy||t.proxy:void 0}const c={sizes:{default:"mdi-24px","is-small":null,"is-medium":"mdi-36px","is-large":"mdi-48px"},iconPrefix:"mdi-"},r=()=>{const e="fa-";return{sizes:{default:null,"is-small":null,"is-medium":e+"lg","is-large":e+"2x"},iconPrefix:e,internalIcons:{information:"info-circle",alert:"exclamation-triangle","alert-circle":"exclamation-circle","chevron-right":"angle-right","chevron-left":"angle-left","chevron-down":"angle-down","eye-off":"eye-slash","menu-down":"caret-down","menu-up":"caret-up","close-circle":"times-circle"}}};var d=(e,t)=>{const n=e.__vccOpts||e;for(const[e,o]of t)n[e]=o;return n};var u=d(t.defineComponent({name:"BIcon",props:{type:[String,Object],component:String,pack:String,icon:{type:String,required:!0},size:String,customSize:String,customClass:String,both:Boolean},computed:{iconConfig(){return{mdi:c,fa:r(),fas:r(),far:r(),fad:r(),fab:r(),fal:r(),"fa-solid":r(),"fa-regular":r(),"fa-light":r(),"fa-thin":r(),"fa-duotone":r(),"fa-brands":r()}[this.newPack]},iconPrefix(){return this.iconConfig&&this.iconConfig.iconPrefix?this.iconConfig.iconPrefix:""},newIcon(){return`${this.iconPrefix}${this.getEquivalentIconOf(this.icon)}`},newPack(){return this.pack||a.defaultIconPack},newType(){if(!this.type)return;let e=[];if("string"==typeof this.type)e=this.type.split("-");else for(const t in this.type)if(this.type[t]){e=t.split("-");break}if(e.length<=1)return;const[,...t]=e;return`has-text-${t.join("-")}`},newCustomSize(){return this.customSize||this.customSizeByPack},customSizeByPack(){if(this.iconConfig&&this.iconConfig.sizes){if(this.size&&void 0!==this.iconConfig.sizes[this.size])return this.iconConfig.sizes[this.size];if(this.iconConfig.sizes.default)return this.iconConfig.sizes.default}return null},useIconComponent(){return this.component||a.defaultIconComponent}},methods:{getEquivalentIconOf(e){if(!this.both)return e;if(null==this.iconConfig)return e;const t=this.iconConfig;return t&&t.internalIcons&&t.internalIcons[e]?t.internalIcons[e]:e}}}),[["render",function(e,n,o,i,a,l){return t.openBlock(),t.createElementBlock("span",{class:t.normalizeClass(["icon",[e.newType,e.size]])},[e.useIconComponent?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.useIconComponent),{key:1,icon:[e.newPack,e.newIcon],size:e.newCustomSize,class:t.normalizeClass([e.customClass])},null,8,["icon","size","class"])):(t.openBlock(),t.createElementBlock("i",{key:0,class:t.normalizeClass([e.newPack,e.newIcon,e.newCustomSize,e.customClass])},null,2))],2)}]]);const m=["clip","keep"],p=["dialog","alertdialog"],f=t.defineComponent({name:"BModal",directives:{trapFocus:i},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:()=>a.defaultModalCanCancel},cancelCallback:{type:Function,default:()=>{}},scroll:{type:String,default:()=>"clip",validator:e=>m.indexOf(e)>=0},fullScreen:Boolean,trapFocus:{type:Boolean,default:()=>a.defaultTrapFocus},autoFocus:{type:Boolean,default:()=>a.defaultAutoFocus},customClass:String,customContentClass:[String,Array,Object],ariaRole:{type:String,validator:e=>p.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?a.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((()=>{l(this.$el)}),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=""}}}),h=["role","aria-label","aria-modal"],g=["innerHTML"],y=["aria-label"];var v=d(f,[["render",function(e,n,o,i,a,l){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:n[0]||(n[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,g)],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:n[1]||(n[1]=t=>e.cancel("x"))},null,8,y)),[[t.vShow,!e.animating]]):t.createCommentVNode("v-if",!0)],10,h)),[[t.vShow,e.isActive],[s,e.trapFocus]])])),_:3},8,["name","onAfterEnter","onBeforeLeave","onAfterLeave"])}]]);const C=["button","submit","reset"];var b=t.defineComponent({name:"BButton",components:{BIcon:u},inheritAttrs:!1,props:{type:[String,Object],size:String,label:String,iconPack:String,iconLeft:String,iconRight:String,rounded:{type:Boolean,default:()=>a.defaultButtonRounded},loading:Boolean,outlined:Boolean,expanded:Boolean,inverted:Boolean,focused:Boolean,active:Boolean,hovered:Boolean,selected:Boolean,nativeType:{type:String,default:"button",validator:e=>C.indexOf(e)>=0},tag:{type:[String,Object],default:"button",validator:e=>"object"==typeof e||a.defaultLinkTags.indexOf(e)>=0}},computed:{computedTag(){return void 0!==this.$attrs.disabled&&!1!==this.$attrs.disabled?"button":this.tag},iconSize(){return this.size&&"is-medium"!==this.size?"is-large"===this.size?"is-medium":this.size:"is-small"}}});const k={key:1},B={key:2};var S=d(b,[["render",function(e,n,o,i,a,l){const s=t.resolveComponent("b-icon");return t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.computedTag),t.mergeProps({class:"button"},e.$attrs,{type:"string"==typeof e.computedTag&&["button","input"].includes(e.computedTag)?e.nativeType:void 0,class:[e.size,e.type,{"is-rounded":e.rounded,"is-loading":e.loading,"is-outlined":e.outlined,"is-fullwidth":e.expanded,"is-inverted":e.inverted,"is-focused":e.focused,"is-active":e.active,"is-hovered":e.hovered,"is-selected":e.selected}]}),{default:t.withCtx((()=>[e.iconLeft?(t.openBlock(),t.createBlock(s,{key:0,pack:e.iconPack,icon:e.iconLeft,size:e.iconSize},null,8,["pack","icon","size"])):t.createCommentVNode("v-if",!0),e.label?(t.openBlock(),t.createElementBlock("span",k,t.toDisplayString(e.label),1)):e.$slots.default?(t.openBlock(),t.createElementBlock("span",B,[t.renderSlot(e.$slots,"default")])):t.createCommentVNode("v-if",!0),e.iconRight?(t.openBlock(),t.createBlock(s,{key:3,pack:e.iconPack,icon:e.iconRight,size:e.iconSize},null,8,["pack","icon","size"])):t.createCommentVNode("v-if",!0)])),_:3},16,["type","class"])}]]),x=Object.defineProperty,w=Object.getOwnPropertySymbols,E=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,V=(e,t,n)=>t in e?x(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;const T=t.defineComponent({name:"BDialog",components:{BIcon:u,BButton:S},directives:{trapFocus:i},extends:v,props:{title:String,message:[String,Array],icon:String,iconPack:String,hasIcon:Boolean,type:{type:String,default:"is-primary"},size:String,confirmText:{type:String,default:()=>"OK"},cancelText:{type:String,default:()=>"Cancel"},hasInput:Boolean,inputAttrs:{type:Object,default:()=>({})},confirmCallback:{type:Function,default:()=>{}},closeOnConfirm:{type:Boolean,default:!0},container:{type:String,default:()=>a.defaultContainerElement},focusOn:{type:String,default:"confirm"}},emits:{confirm:(e,t)=>!0},data(){return{prompt:this.hasInput&&this.inputAttrs.value||"",isActive:!1,validationMessage:"",isCompositing:!1,isLoading:!1}},computed:{safeInputAttrs(){const e=((e,t)=>{for(var n in t||(t={}))E.call(t,n)&&V(e,n,t[n]);if(w)for(var n of w(t))O.call(t,n)&&V(e,n,t[n]);return e})({},this.inputAttrs);return delete e.value,void 0===e.required&&(e.required=!0),e},dialogClass(){return[this.size,{"has-custom-container":null!==this.container}]},iconByType(){switch(this.type){case"is-info":return"information";case"is-success":return"check-circle";case"is-warning":return"alert";case"is-danger":return"alert-circle";default:return null}},showCancel(){return this.cancelOptions.indexOf("button")>=0}},methods:{confirm(){const e=this.$refs.input;if(null!=e){if(this.isCompositing)return;if(!e.checkValidity())return this.validationMessage=e.validationMessage,void this.$nextTick((()=>e.select()))}this.$emit("confirm",this.prompt,this),this.confirmCallback(this.prompt,this),this.closeOnConfirm&&this.close()},close(){this.isActive=!1,this.isLoading=!1,setTimeout((()=>{l(this.$el)}),150)},startLoading(){this.isLoading=!0},cancelLoading(){this.isLoading=!1}},beforeMount(){"undefined"!=typeof window&&this.$nextTick((()=>{(document.querySelector(this.container)||document.body).appendChild(this.$el)}))},mounted(){this.isActive=!0,this.$nextTick((()=>{this.hasInput?this.$refs.input.focus():"cancel"===this.focusOn&&this.showCancel?this.$refs.cancelButton.$el.focus():this.$refs.confirmButton.$el.focus()}))}}),L=["role","aria-modal"],N={class:"modal-card animation-content"},z={key:0,class:"modal-card-head"},A={class:"modal-card-title"},P={class:"media"},$={key:0,class:"media-left"},I={class:"media-content"},_=["innerHTML"],M={key:0,class:"field"},j={class:"control"},D={class:"help is-danger"},F={class:"modal-card-foot"},q={class:"buttons"};var R=d(T,[["render",function(e,n,o,i,a,l){const s=t.resolveComponent("b-icon"),c=t.resolveComponent("b-button"),r=t.resolveDirective("trap-focus");return t.openBlock(),t.createBlock(t.Transition,{name:e.animation},{default:t.withCtx((()=>[e.isActive?t.withDirectives((t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["dialog modal is-active",e.dialogClass]),role:e.ariaRole,"aria-modal":e.ariaModal},[t.createElementVNode("div",{class:"modal-background",onClick:n[0]||(n[0]=t=>e.cancel("outside"))}),t.createElementVNode("div",N,[e.title?(t.openBlock(),t.createElementBlock("header",z,[t.createElementVNode("p",A,t.toDisplayString(e.title),1)])):t.createCommentVNode("v-if",!0),t.createElementVNode("section",{class:t.normalizeClass(["modal-card-body",{"is-titleless":!e.title,"is-flex":e.hasIcon}])},[t.createElementVNode("div",P,[e.hasIcon&&(e.icon||e.iconByType)?(t.openBlock(),t.createElementBlock("div",$,[t.createVNode(s,{icon:e.icon?e.icon:e.iconByType,pack:e.iconPack,type:e.type,both:!e.icon,size:"is-large"},null,8,["icon","pack","type","both"])])):t.createCommentVNode("v-if",!0),t.createElementVNode("div",I,[t.createElementVNode("p",null,[e.$slots.default?t.renderSlot(e.$slots,"default",{key:0}):(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[t.createCommentVNode(" eslint-disable-next-line vue/no-v-html "),t.createElementVNode("div",{innerHTML:e.message},null,8,_)],64))]),e.hasInput?(t.openBlock(),t.createElementBlock("div",M,[t.createElementVNode("div",j,[t.withDirectives(t.createElementVNode("input",t.mergeProps({"onUpdate:modelValue":n[1]||(n[1]=t=>e.prompt=t),class:["input",{"is-danger":e.validationMessage}],ref:"input"},e.safeInputAttrs,{onCompositionstart:n[2]||(n[2]=t=>e.isCompositing=!0),onCompositionend:n[3]||(n[3]=t=>e.isCompositing=!1),onKeydown:n[4]||(n[4]=t.withKeys(((...t)=>e.confirm&&e.confirm(...t)),["enter"]))}),null,16),[[t.vModelDynamic,e.prompt]])]),t.createElementVNode("p",D,t.toDisplayString(e.validationMessage),1)])):t.createCommentVNode("v-if",!0)])])],2),t.createElementVNode("footer",F,[t.createElementVNode("div",q,[e.showCancel?(t.openBlock(),t.createBlock(c,{key:0,ref:"cancelButton",disabled:e.isLoading,onClick:n[5]||(n[5]=t=>e.cancel("button"))},{default:t.withCtx((()=>[t.createTextVNode(t.toDisplayString(e.cancelText),1)])),_:1},8,["disabled"])):t.createCommentVNode("v-if",!0),t.createVNode(c,{type:e.type,ref:"confirmButton",loading:e.isLoading,onClick:e.confirm},{default:t.withCtx((()=>[t.createTextVNode(t.toDisplayString(e.confirmText),1)])),_:1},8,["type","loading","onClick"])])])])],10,L)),[[r,e.trapFocus]]):t.createCommentVNode("v-if",!0)])),_:3},8,["name"])}]]);var H=Object.defineProperty,K=Object.defineProperties,U=Object.getOwnPropertyDescriptors,W=Object.getOwnPropertySymbols,Y=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable,G=(e,t,n)=>t in e?H(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,J=(e,t)=>{for(var n in t||(t={}))Y.call(t,n)&&G(e,n,t[n]);if(W)for(var n of W(t))X.call(t,n)&&G(e,n,t[n]);return e};function Q(e,n){let o;return Array.isArray(e.message)&&(o=e.message,delete e.message),function(){const i=document.createElement("div"),a=t.createApp({data:()=>({dialogVNode:null}),methods:{close(){const e=s(this.dialogVNode);e&&e.close()},startLoading(){const e=s(this.dialogVNode);e&&e.startLoading()},cancelLoading(){const e=s(this.dialogVNode);e&&e.cancelLoading()}},render(){var n;return this.dialogVNode=t.h(R,(n=J({},e),K(n,U({onConfirm:e=>{},onCancel:e=>{a.unmount()},confirmCallback:(t,n)=>{null!=e.onConfirm&&e.onConfirm(t,n)},cancelCallback:t=>{null!=e.onCancel&&e.onCancel(t)}}))),o?{default:()=>o}:void 0),this.dialogVNode}});return n&&function(e,t){const{_context:n}=e,{_context:o}=t;o.config=n.config,o.mixins=n.mixins,o.components=n.components,o.directives=n.directives,o.provides=n.provides,o.optionsCache=n.optionsCache,o.propsCache=n.propsCache,o.emitsCache=n.emitsCache,"__VUE_I18N_SYMBOL__"in e&&(t.__VUE_I18N_SYMBOL__=e.__VUE_I18N_SYMBOL__)}(n,a),a.mount(i)}()}class Z{constructor(e){var t;G(this,"app"+"",t),this.app=e}alert(e){let t;return t="string"==typeof e?{message:e}:e,t=J({canCancel:!1},t),Q(t,this.app)}confirm(e){return Q(e,this.app)}prompt(e){return Q(J({hasInput:!0},e),this.app)}}const ee={install(e){((e,t)=>{const n=t.name;if(null==n)throw new Error("Buefy.registerComponent: missing component name");e.component(n,t)})(e,R),((e,t,n)=>{e.config.globalProperties.$buefy||(e.config.globalProperties.$buefy={}),e.config.globalProperties.$buefy[t]=n})(e,"dialog",new Z(e))}};e.BDialog=R,e.DialogProgrammatic=Z,e.default=ee,Object.defineProperty(e,"__esModule",{value:!0})}));