uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
2 lines (1 loc) • 2.26 kB
JavaScript
/*! UIkit 3.14.1 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */(function(t,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("uikit-util")):typeof define=="function"&&define.amd?define("uikitnotification",["uikit-util"],o):(t=typeof globalThis<"u"?globalThis:t||self,t.UIkitNotification=o(t.UIkit.util))})(this,function(t){"use strict";var o={props:{container:Boolean},data:{container:!0},computed:{container(s){let{container:e}=s;return e===!0&&this.$container||e&&t.$(e)}}},r={mixins:[o],functional:!0,args:["message","status"],data:{message:"",status:"",timeout:5e3,group:null,pos:"top-center",clsContainer:"uk-notification",clsClose:"uk-notification-close",clsMsg:"uk-notification-message"},install:c,computed:{marginProp(s){let{pos:e}=s;return"margin"+(t.startsWith(e,"top")?"Top":"Bottom")},startProps(){return{opacity:0,[this.marginProp]:-this.$el.offsetHeight}}},created(){const s=t.$("."+this.clsContainer+"-"+this.pos,this.container)||t.append(this.container,'<div class="'+this.clsContainer+" "+this.clsContainer+"-"+this.pos+'" style="display: block"></div>');this.$mount(t.append(s,'<div class="'+this.clsMsg+(this.status?" "+this.clsMsg+"-"+this.status:"")+'"> <a href class="'+this.clsClose+'" data-uk-close></a> <div>'+this.message+"</div> </div>"))},async connected(){const s=t.toFloat(t.css(this.$el,this.marginProp));await t.Transition.start(t.css(this.$el,this.startProps),{opacity:1,[this.marginProp]:s}),this.timeout&&(this.timer=setTimeout(this.close,this.timeout))},events:{click(s){t.closest(s.target,'a[href="#"],a[href=""]')&&s.preventDefault(),this.close()},[t.pointerEnter](){this.timer&&clearTimeout(this.timer)},[t.pointerLeave](){this.timeout&&(this.timer=setTimeout(this.close,this.timeout))}},methods:{async close(s){const e=i=>{const n=t.parent(i);t.trigger(i,"close",[this]),t.remove(i),n!=null&&n.hasChildNodes()||t.remove(n)};this.timer&&clearTimeout(this.timer),s||await t.Transition.start(this.$el,this.startProps),e(this.$el)}}};function c(s){s.notification.closeAll=function(e,i){t.apply(document.body,n=>{const a=s.getComponent(n,"notification");a&&(!e||e===a.group)&&a.close(i)})}}return typeof window<"u"&&window.UIkit&&window.UIkit.component("notification",r),r});