UNPKG

uikit

Version:

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

2 lines (1 loc) 2.24 kB
/*! UIkit 3.21.6 | https://www.getuikit.com | (c) 2014 - 2024 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({container:s}){return s===!0&&this.$container||s&&t.$(s)}}},r={mixins:[o],functional:!0,args:["message","status"],data:{message:"",status:"",timeout:5e3,group:"",pos:"top-center",clsContainer:"uk-notification",clsClose:"uk-notification-close",clsMsg:"uk-notification-message"},install:c,computed:{marginProp:({pos:s})=>`margin-${s.match(/[a-z]+(?=-)/)[0]}`,startProps(){return{opacity:0,[this.marginProp]:-this.$el.offsetHeight}}},created(){const s=`${this.clsContainer}-${this.pos}`,e=`data-${this.clsContainer}-container`,i=t.$(`.${s}[${e}]`,this.container)||t.append(this.container,`<div class="${this.clsContainer} ${s}" ${e}></div>`);this.$mount(t.append(i,`<div class="${this.clsMsg}${this.status?` ${this.clsMsg}-${this.status}`:""}" role="alert"> <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){s.target.closest('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});