UNPKG

buefy

Version:

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

3 lines (2 loc) 18 kB
/*! Buefy v3.0.7 | 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).Notification={},e.Vue)}(this,(function(e,t){"use strict";const i=["is-top-right","is-top","is-top-left","is-bottom-right","is-bottom","is-bottom-left"];let o,n=null,s="mdi",r=null,a=2e3,l=!0;function c(e){void 0!==e.remove?e.remove():void 0!==e.parentNode&&null!==e.parentNode&&e.parentNode.removeChild(e)}const u={sizes:{default:"mdi-24px","is-small":null,"is-medium":"mdi-36px","is-large":"mdi-48px"},iconPrefix:"mdi-"},p=()=>{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"}}},m={checkboxOn:{type:"svg",viewBox:"0 0 1 1",path:"M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z"},checkboxIndeterminate:{type:"svg",viewBox:"0 0 1 1",path:"M 0.15,0.4 L 0.85,0.4 L 0.85,0.6 L 0.15,0.6 Z"},chevronLeft:{type:"svg",path:"M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"},chevronRight:{type:"svg",path:"M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"},chevronDown:{type:"svg",path:"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"},chevronUp:{type:"svg",path:"M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"},menuDown:{type:"svg",path:"M7,10L12,15L17,10H7Z"},menuUp:{type:"svg",path:"M7,14L12,9L17,14H7Z"},check:{type:"svg",path:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"},alertCircle:{type:"svg",path:"M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"},alert:{type:"svg",path:"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"},information:{type:"svg",path:"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"},close:{type:"svg",path:"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"},closeCircle:{type:"svg",path:"M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"},eye:{type:"svg",path:"M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"},eyeOff:{type:"svg",path:"M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.18 16.38,18.6L16.81,19L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"}};function d(e){return m[e]}var h=t.defineComponent({name:"BIcon",props:{type:[String,Object],component:String,pack:String,icon:{type:String,required:!1,default:void 0},alias:String,size:String,customSize:String,customClass:String,both:Boolean},computed:{resolvedAlias(){var e;return this.alias&&null!=(e=d(this.alias))?e:null},isSvgAlias(){var e;return"svg"===(null==(e=this.resolvedAlias)?void 0:e.type)},isComponentAlias(){var e;return"component"===(null==(e=this.resolvedAlias)?void 0:e.type)},resolvedAliasSvg(){return this.resolvedAlias},resolvedAliasComponent(){return this.resolvedAlias},iconConfig(){return{mdi:u,fa:p(),fas:p(),far:p(),fad:p(),fab:p(),fal:p(),"fa-solid":p(),"fa-regular":p(),"fa-light":p(),"fa-thin":p(),"fa-duotone":p(),"fa-brands":p()}[this.newPack]},iconPrefix(){return this.iconConfig&&this.iconConfig.iconPrefix?this.iconConfig.iconPrefix:""},newIcon(){var e;return`${this.iconPrefix}${this.getEquivalentIconOf(null!=(e=this.icon)?e:"")}`},newPack(){return this.pack||s},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||r}},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}}}),f=(e,t)=>{const i=e.__vccOpts||e;for(const[e,o]of t)i[e]=o;return i};const v=["viewBox"],g=["d"];var y=f(h,[["render",function(e,i,o,n,s,r){return t.openBlock(),t.createElementBlock("span",{class:t.normalizeClass(["icon",[e.newType,e.size]])},[e.isSvgAlias?(t.openBlock(),t.createElementBlock("svg",{key:0,viewBox:e.resolvedAliasSvg.viewBox||"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",class:t.normalizeClass(e.customClass),"aria-hidden":"true"},[t.createElementVNode("path",{fill:"currentColor",d:e.resolvedAliasSvg.path},null,8,g)],10,v)):e.isComponentAlias?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.resolvedAliasComponent.component),{key:1,icon:e.resolvedAliasComponent.icon,class:t.normalizeClass(e.customClass)},null,8,["icon","class"])):e.useIconComponent?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.useIconComponent),{key:3,icon:[e.newPack,e.newIcon],size:e.newCustomSize,class:t.normalizeClass([e.customClass])},null,8,["icon","size","class"])):(t.openBlock(),t.createElementBlock("i",{key:2,class:t.normalizeClass([e.newPack,e.newIcon,e.newCustomSize,e.customClass])},null,2))],2)}]]);const C=Symbol("bprogress"),k=t.defineComponent({name:"BProgress",provide(){return{[C]:this}},props:{type:{type:[String,Object],default:"is-darkgrey"},size:{type:String},rounded:{type:Boolean,default:!0},value:{type:Number,default:void 0},max:{type:Number,default:100},showValue:{type:Boolean,default:!1},format:{type:String,default:"raw",validator:e=>["raw","percent"].indexOf(e)>=0},precision:{type:Number,default:2},keepTrailingZeroes:{type:Boolean,default:!1},locale:{type:[String,Array],default:()=>o,validator:e=>Array.isArray(e)?e.every((e=>"string"==typeof e)):"string"==typeof e}},computed:{isIndeterminate(){return void 0===this.value||null===this.value},newType(){return[this.size,this.type,{"is-more-than-half":this.value&&this.value>this.max/2}]},newValue(){return this.calculateValue(this.value)},isNative(){return void 0===this.$slots.bar},wrapperClasses(){return{"is-not-native":!this.isNative,[void 0===this.size?"":this.size]:"string"==typeof this.size&&!this.isNative}}},watch:{isIndeterminate(e){this.$nextTick((()=>{this.$refs.progress&&(e?this.$refs.progress.removeAttribute("value"):this.$refs.progress.setAttribute("value",this.value.toString()))}))}},methods:{calculateValue(e){if(null==e||isNaN(e))return;const t=this.keepTrailingZeroes?this.precision:0,i=this.precision;return"percent"===this.format?new Intl.NumberFormat(this.locale,{style:"percent",minimumFractionDigits:t,maximumFractionDigits:i}).format(e/this.max):new Intl.NumberFormat(this.locale,{minimumFractionDigits:t,maximumFractionDigits:i}).format(e)}}}),L=["max","value"],b={key:2,class:"progress-value"};var w=f(k,[["render",function(e,i,o,n,s,r){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["progress-wrapper",[e.wrapperClasses,{"is-squared":!e.rounded}]])},[e.isNative?(t.openBlock(),t.createElementBlock("progress",{key:0,ref:"progress",class:t.normalizeClass(["progress",[e.newType,{"is-squared":!e.rounded}]]),max:e.max,value:e.value},t.toDisplayString(e.newValue),11,L)):t.renderSlot(e.$slots,"bar",{key:1}),e.isNative&&e.showValue?(t.openBlock(),t.createElementBlock("p",b,[t.renderSlot(e.$slots,"default",{},(()=>[t.createTextVNode(t.toDisplayString(e.newValue),1)]))])):t.createCommentVNode("v-if",!0)],2)}]]),B=t.defineComponent({props:{modelValue:{type:Boolean,default:!0},title:String,closable:{type:Boolean,default:!0},message:String,type:String,hasIcon:Boolean,size:String,icon:String,iconPack:String,iconSize:String,autoClose:{type:Boolean,default:!1},duration:{type:Number,default:2e3},progressBar:{type:Boolean,default:!1}},emits:{click:()=>!0,close:()=>!0,"update:modelValue":e=>!0},data(){return{isActive:this.modelValue,remainingTime:this.duration/1e3,newIconSize:this.iconSize||this.size||"is-large",timer:void 0}},computed:{computedIcon(){if(this.icon)return this.icon;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}}},watch:{modelValue(e){this.isActive=e},isActive(e){e?(this.setAutoClose(),this.setDurationProgress()):this.timer&&clearTimeout(this.timer)}},methods:{close(){this.isActive=!1,this.resetDurationProgress(),this.$emit("close"),this.$emit("update:modelValue",!1)},click(){this.$emit("click")},setAutoClose(){this.autoClose&&(this.timer=setTimeout((()=>{this.isActive&&this.close()}),this.duration))},setDurationProgress(){(this.progressBar||this.autoClose)&&(this.$buefy.globalNoticeInterval=setInterval((()=>{0!==this.remainingTime?this.remainingTime-=1:this.resetDurationProgress()}),1e3))},resetDurationProgress(){setTimeout((()=>{this.remainingTime=this.duration/1e3,clearInterval(this.$buefy.globalNoticeInterval)}),100)}},mounted(){this.setAutoClose()}});const S=t.defineComponent({name:"BNotification",components:{BIcon:y,BProgress:w},mixins:[B],props:{position:String,ariaCloseLabel:String,animation:{type:String,default:"fade"}}}),A=["aria-label"],x={key:1,class:"media"},N={key:0,class:"media-left"},P={class:"media-content"},M=["innerHTML"];var z=f(S,[["render",function(e,i,o,n,s,r){const a=t.resolveComponent("b-icon"),l=t.resolveComponent("b-progress");return t.openBlock(),t.createBlock(t.Transition,{name:e.animation,persisted:""},{default:t.withCtx((()=>[t.withDirectives(t.createElementVNode("article",{class:t.normalizeClass(["notification",[e.type,e.position]]),onClick:i[1]||(i[1]=(...t)=>e.click&&e.click(...t))},[e.closable?(t.openBlock(),t.createElementBlock("button",{key:0,class:"delete",type:"button",onClick:i[0]||(i[0]=(...t)=>e.close&&e.close(...t)),"aria-label":e.ariaCloseLabel},null,8,A)):t.createCommentVNode("v-if",!0),e.$slots.default||e.message?(t.openBlock(),t.createElementBlock("div",x,[e.computedIcon&&e.hasIcon?(t.openBlock(),t.createElementBlock("div",N,[t.createVNode(a,{icon:e.computedIcon,pack:e.iconPack,size:e.newIconSize,both:"","aria-hidden":""},null,8,["icon","pack","size"])])):t.createCommentVNode("v-if",!0),t.createElementVNode("div",P,[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("p",{class:"text",innerHTML:e.message},null,8,M)],64))])])):t.createCommentVNode("v-if",!0),e.progressBar?(t.openBlock(),t.createBlock(l,{key:2,class:"auto-close-progress",value:e.remainingTime-1,max:e.duration/1e3-1,type:e.type,rounded:!1},null,8,["value","max","type"])):t.createCommentVNode("v-if",!0)],2),[[t.vShow,e.isActive]])])),_:3},8,["name"])}]]),I=t.defineComponent({props:{type:{type:String,default:"is-dark"},message:[String,Array],duration:Number,queue:{type:Boolean,default:void 0},indefinite:{type:Boolean,default:!1},pauseOnHover:{type:Boolean,default:!1},position:{type:String,default:"is-top",validator:e=>i.indexOf(e)>-1},container:String},emits:{click:()=>!0,close:()=>!0},data(){return{isActive:!1,isPaused:!1,parentTop:null,parentBottom:null,newContainer:this.container||n,timer:void 0,newDuration:this.duration||0}},computed:{correctParent(){switch(this.position){case"is-top-right":case"is-top":case"is-top-left":return this.parentTop;case"is-bottom-right":case"is-bottom":case"is-bottom-left":return this.parentBottom;default:{const e=this.position;throw new RangeError(`invalid position: ${e}`)}}},transition(){switch(this.position){case"is-top-right":case"is-top":case"is-top-left":return{enter:"fadeInDown",leave:"fadeOut"};case"is-bottom-right":case"is-bottom":case"is-bottom-left":return{enter:"fadeInUp",leave:"fadeOut"};default:{const e=this.position;throw new RangeError(`invalid position: ${e}`)}}}},methods:{pause(){this.pauseOnHover&&!this.indefinite&&(this.isPaused=!0,clearInterval(this.$buefy.globalNoticeInterval))},removePause(){this.pauseOnHover&&!this.indefinite&&(this.isPaused=!1,this.close())},shouldQueue(){return!!(void 0!==this.queue?this.queue:l)&&(this.parentTop.childElementCount>0||this.parentBottom.childElementCount>0)},click(){this.$emit("click")},close(){this.isPaused||(clearTimeout(this.timer),this.isActive=!1,this.$emit("close"),setTimeout((()=>{c(this.$el)}),150))},timeoutCallback(){return this.close()},showNotice(){this.shouldQueue()&&(this.correctParent.innerHTML=""),this.correctParent.insertAdjacentElement("afterbegin",this.$el),this.isActive=!0,this.indefinite||(this.timer=setTimeout((()=>this.timeoutCallback()),this.newDuration))},setupContainer(){if(this.parentTop=document.querySelector((this.newContainer?this.newContainer:"body")+">.notices.is-top"),this.parentBottom=document.querySelector((this.newContainer?this.newContainer:"body")+">.notices.is-bottom"),this.parentTop&&this.parentBottom)return;this.parentTop||(this.parentTop=document.createElement("div"),this.parentTop.className="notices is-top"),this.parentBottom||(this.parentBottom=document.createElement("div"),this.parentBottom.className="notices is-bottom");const e=document.querySelector(this.newContainer)||document.body;e.appendChild(this.parentTop),e.appendChild(this.parentBottom),this.newContainer&&(this.parentTop.classList.add("has-custom-container"),this.parentBottom.classList.add("has-custom-container"))}},beforeMount(){this.setupContainer()},mounted(){this.showNotice()}});var T=f(t.defineComponent({name:"BNotificationNotice",components:{BNotification:z},mixins:[I],data(){return{newDuration:this.duration||a}},emits:{close:()=>!0},methods:{close(){this.isPaused||(clearTimeout(this.timer),this.$refs.notification.isActive=!1,this.$emit("close"),setTimeout((()=>{c(this.$el)}),150))}}}),[["render",function(e,i,o,n,s,r){const a=t.resolveComponent("b-notification");return null!=e.$slots.default?(t.openBlock(),t.createBlock(a,t.mergeProps({key:0,ref:"notification",position:e.position,"model-value":e.isActive,type:e.type,message:e.message,duration:e.duration},e.$attrs,{onClick:e.click,onClose:e.close,onMouseenter:e.pause,onMouseleave:e.removePause}),{default:t.withCtx((()=>[t.renderSlot(e.$slots,"default")])),_:3},16,["position","model-value","type","message","duration","onClick","onClose","onMouseenter","onMouseleave"])):(t.openBlock(),t.createBlock(a,t.mergeProps({key:1,ref:"notification",position:e.position,"model-value":e.isActive,type:e.type,message:e.message,duration:e.duration},e.$attrs,{onClick:e.click,onClose:e.close,onMouseenter:e.pause,onMouseleave:e.removePause}),null,16,["position","model-value","type","message","duration","onClick","onClose","onMouseenter","onMouseleave"]))}]]);var V=Object.defineProperty,$=Object.defineProperties,E=Object.getOwnPropertyDescriptors,O=Object.getOwnPropertySymbols,_=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable,H=(e,t,i)=>t in e?V(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,Z=(e,t)=>{for(var i in t||(t={}))_.call(t,i)&&H(e,i,t[i]);if(O)for(var i of O(t))D.call(t,i)&&H(e,i,t[i]);return e};class j{constructor(e){var t;H(this,"app"+"",t),this.app=e}open(e){let i;"string"==typeof e&&(e={message:e});let o=e,{message:n}=o,s=((e,t)=>{var i={};for(var o in e)_.call(e,o)&&t.indexOf(o)<0&&(i[o]=e[o]);if(null!=e&&O)for(var o of O(e))t.indexOf(o)<0&&D.call(e,o)&&(i[o]=e[o]);return i})(o,["message"]);"string"!=typeof n&&(i=n,n=void 0);const r=Z({position:"is-top-right",message:n},s),a=document.createElement("div"),l=t.createApp({data:()=>({noticeVNode: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.noticeVNode);e&&e.close()}},render(){var e;return this.noticeVNode=t.h(T,(e=Z({},r),$(e,E({onClose:()=>{null!=r.onClose&&r.onClose(),setTimeout((()=>{l.unmount()}),150)}}))),null!=i?{default:()=>i}:void 0),this.noticeVNode}});return this.app?function(e,t){const{_context:i}=e,{_context:o}=t;o.config=i.config,o.mixins=i.mixins,o.components=i.components,o.directives=i.directives,o.provides=i.provides,o.optionsCache=i.optionsCache,o.propsCache=i.propsCache,o.emitsCache=i.emitsCache,"__VUE_I18N_SYMBOL__"in e&&(t.__VUE_I18N_SYMBOL__=e.__VUE_I18N_SYMBOL__)}(this.app,l):l.config.globalProperties.$buefy={},l.mount(a)}}const q=Symbol("Buefy Notification");const F={install(e){((e,t)=>{const i=t.name;if(null==i)throw new Error("Buefy.registerComponent: missing component name");e.component(i,t)})(e,z),((e,t,i,o)=>{e.config.globalProperties.$buefy||(e.config.globalProperties.$buefy={}),e.config.globalProperties.$buefy[t]=i,e.provide(o,i)})(e,"notification",new j(e),q)}};e.BNotification=z,e.NotificationProgrammatic=j,e.default=F,e.useNotification=function(){return t.inject(q)},Object.defineProperty(e,"__esModule",{value:!0})}));