uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
2 lines (1 loc) • 2.27 kB
JavaScript
/*! UIkit 3.23.10 | https://www.getuikit.com | (c) 2014 - 2025 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:e}){return e===!0&&this.$container||e&&t.$(e)}}};function c(e){e.target.closest('a[href="#"],a[href=""]')&&e.preventDefault()}var 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:h,computed:{marginProp:({pos:e})=>`margin-${e.match(/[a-z]+(?=-)/)[0]}`,startProps(){return{opacity:0,[this.marginProp]:-this.$el.offsetHeight}}},created(){const e=`${this.clsContainer}-${this.pos}`,s=`data-${this.clsContainer}-container`,i=t.$(`.${e}[${s}]`,this.container)||t.append(this.container,`<div class="${this.clsContainer} ${e}" ${s}></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 e=t.toFloat(t.css(this.$el,this.marginProp));await t.Transition.start(t.css(this.$el,this.startProps),{opacity:1,[this.marginProp]:e}),this.timeout&&(this.timer=setTimeout(this.close,this.timeout))},events:{click(e){c(e),this.close()},[t.pointerEnter](){this.timer&&clearTimeout(this.timer)},[t.pointerLeave](){this.timeout&&(this.timer=setTimeout(this.close,this.timeout))}},methods:{async close(e){const s=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),e||await t.Transition.start(this.$el,this.startProps),s(this.$el)}}};function h(e){e.notification.closeAll=function(s,i){t.apply(document.body,n=>{const a=e.getComponent(n,"notification");a&&(!s||s===a.group)&&a.close(i)})}}return typeof window<"u"&&window.UIkit&&window.UIkit.component("notification",r),r});