UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

2 lines (1 loc) 8.87 kB
(function(r,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("../locale/index.umd.js"),require("bignumber.js"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","vue","../locale/index.umd.js","bignumber.js","lodash-es"],t):(r=typeof globalThis<"u"?globalThis:r||self,t(r.notify={},r.Vue,r.locale))})(this,function(r,t,m){"use strict";var k=Object.defineProperty;var A=(r,t,m)=>t in r?k(r,t,{enumerable:!0,configurable:!0,writable:!0,value:m}):r[t]=m;var I=(r,t,m)=>A(r,typeof t!="symbol"?t+"":t,m);const O={showCloseButton:{type:Boolean,default:!0},position:{type:String,default:"top-center"},timeout:{type:Number,default:3e3},theme:{type:String,default:"bootstrap"},left:{type:Number},right:{type:Number},top:{type:Number},bottom:{type:Number},id:{type:String},animate:{type:String,default:"fadeIn"},options:{type:Object},safeHtml:{type:Boolean,default:!0}},P={showCloseButton:{type:Boolean,default:!0},animate:{type:String,default:"fadeIn"},options:{type:Object}},T=t.defineComponent({name:"Toast",props:P,emits:["close","click"],setup:(s,e)=>{const o=t.ref(s.animate),c="fadeOut",n=t.computed(()=>s.options),l=t.ref(!1),i=t.computed(()=>n.value.title&&n.value.message),u=t.computed(()=>!n.value.title&&n.value.message),y=t.computed(()=>{const a={animated:l.value,toast:!0,"toast--only-content":!i.value};return a[s.animate]=!1,a[c]=l.value,a["toasty-type-"+n.value.type]=!0,n.value.theme&&(a[n.value.theme]=!0),a}),d=t.computed(()=>{const x=`f-icon-${n.value&&n.value.type?n.value.type.replace("toasty-type-",""):"default"}`,F={"f-icon":!0};return F[x]=!0,F}),f=t.computed(()=>n.value.title||n.value.message),h=t.computed(()=>s.showCloseButton),w=t.computed(()=>!!n.value.buttons||!!e.slots.default),g=t.computed(()=>m.LocaleService.getLocale()==="en"?{wordBreak:"keep-all",overflowWrap:"break-word"}:{});function C(a){a.stopPropagation(),a.preventDefault(),l.value=!1,setTimeout(()=>{e.emit("close",n.value)},200)}function S(a,v){}function p(a){return`f-preten-link ${a.customClass?a.customClass:""}`}t.watch(o,()=>{o.value});const b=()=>{var a;return t.createVNode(t.Fragment,null,[t.createVNode("div",{class:"after-toast-msg text-right"},[!e.slots.default&&((a=n.value.buttons)==null?void 0:a.map(v=>t.createVNode("span",{class:p(v),onClick:x=>void 0},[v.text]))),e.slots.default&&e.slots.default()])])};return()=>t.createVNode("div",{class:y.value,style:"min-height:44px"},[h.value&&t.createVNode("button",{title:m.LocaleService.getLocaleValue("messageBox.close"),class:"toast-close f-btn-icon f-bare",onClick:C},[t.createVNode("span",{class:"f-icon modal_close"},null)]),f.value&&t.createVNode("section",{class:"modal-tips"},[!i.value&&t.createVNode("div",{class:"float-left modal-tips-iconwrap"},[t.createVNode("span",{class:d.value},null)]),t.createVNode("div",{class:"modal-tips-content"},[i.value&&t.createVNode(t.Fragment,null,[t.createVNode("h5",{class:"toast-title modal-tips-title",innerHTML:n.value.title},null),t.createVNode("p",{class:"toast-msg",innerHTML:n.value.message,style:g.value},null),w.value&&b()]),u.value&&(n.value.buttons?t.createVNode("div",{class:"toast-title-btns-wrapper d-flex"},[t.createVNode("h5",{class:"toast-title modal-tips-title only-toast-msg",style:g.value,innerHTML:n.value.message},null),t.createVNode("div",{class:"after-toast-title text-right ml-auto"},[b()])]):t.createVNode("h5",{class:"toast-title modal-tips-title only-toast-msg",style:g.value,innerHTML:n.value.message},null))])])])}}),R=["moz","ms","webkit"];function M(){let s=0;return e=>{const o=new Date().getTime(),c=Math.max(0,16-(o-s)),n=setTimeout(()=>{e(o+c)},c);return s=o+c,n}}function E(){if(typeof window>"u")return()=>0;if(window.requestAnimationFrame)return window.requestAnimationFrame.bind(window);const s=R.filter(e=>`${e}RequestAnimationFrame`in window)[0];return s?window[`${s}RequestAnimationFrame`]:M()}E(),t.ref("");function H(){const s=navigator.userAgent||navigator.vendor||window.opera,e=[/iPhone/i,/iPod/i,/Android.*Mobile/i,/webOS/i,/BlackBerry/i,/IEMobile/i,/Opera Mini/i,/Harmony/i],o=[/iPad/i,/Android(?!.*Mobile)/i,/Tablet/i,/PlayBook/i,/Kindle/i,/Silk/i];for(const u of o)if(u.test(s))return!1;for(const u of e)if(u.test(s))return!0;const c="ontouchstart"in window||navigator.maxTouchPoints>0,n=screen.width,l=screen.height,i=Math.min(n,l);return!!(c&&i<=768)}const N=t.defineComponent({name:"Notify",props:O,emits:["close","empty"],setup(s,e){var S;const o=H(),n=`farris-notify-${(S=s.options)!=null&&S.type?s.options.type:"info"}}`,l=t.computed(()=>({"farris-notify":!0,[n]:o})),i={left:12,right:12,top:20,bottom:12},u=t.ref(),y=t.ref(s.options),d=t.ref(s.showCloseButton),f=t.computed(()=>s.position||"bottom-right"),h=t.computed(()=>s.timeout!=null?s.timeout:3e3),w=t.computed(()=>{const p=s.bottom?s.bottom:i.bottom,b=s.top?s.top:i.top,a={transition:"all 0.2s ease",left:f.value.indexOf("left")>-1?`${s.left?s.left:i.left}px`:"",right:f.value.indexOf("right")>-1?`${s.right?s.right:i.right}px`:"",top:f.value.indexOf("top")>-1?`${b}px`:"",bottom:f.value.indexOf("bottom")>-1?`${p}px`:""};return f.value.indexOf("center")>-1&&(a.left="50%",a.marginLeft="calc(-24rem / 2)",f.value==="center-center"&&(a.top="50%",a.transform="translate(-50%, -50%)")),a});function g(p){e.emit("close")}h.value&&setTimeout(()=>{g()},h.value),e.expose({closeToast:g,container:u,notifyPosition:f});function C(p,b){g()}return()=>{var p;return o?t.createVNode("div",{class:l.value,ref:u},[(p=s.options)==null?void 0:p.message]):t.createVNode("div",{class:l.value,style:w.value,ref:u},[t.createVNode(T,{options:y.value,showCloseButton:d.value,animate:s.animate,onClose:b=>C(b,y.value)},null)])}}});class V{constructor(){I(this,"notifyRefs",[]);I(this,"globalConfig",t.reactive({}))}escapeAllHtml(e){if(typeof e!="string"||!e)return"";const o=document.createElement("div");return o.textContent=e||"",o.innerHTML.replace(/\\n/g,"<br>").replace(/\\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;").replace(/\\r/g,"")}createNotifyInstance(e){const o=this,n=Object.assign({timeout:3e3,position:"bottom-right",showCloseButton:!0,safeHtml:!0},this.globalConfig,{...e}),l=document.createElement("div");l.style.display="contents";const i=t.createApp({setup(){var d;const u=t.ref();function y(){u.value.container.style.transform="scale(0)",setTimeout(()=>{o.updateNotifyPositionForClose(n,u),i.unmount()},220)}if(n.position.indexOf("top")>-1){const f=o.getNotifyInstances(n.position),h=f[f.length-1];if(h){const w=h.value.container.getBoundingClientRect();n.top=w.bottom}}return n.safeHtml&&((d=n.options)!=null&&d.message)&&(n.options.message=o.escapeAllHtml(n.options.message)),t.onUnmounted(()=>{document.body.removeChild(l)}),t.onMounted(()=>{o.updateNotifyPositionForCreate(n,u)}),()=>t.createVNode(t.Transition,{mode:"out-in",name:"fade",appear:!0},{default:()=>[t.createVNode(N,t.mergeProps({ref:u},n,{onClose:y}),null)]})}});return i.provide("NotifyService",this),document.body.appendChild(l),i.use(m.LocaleService.i18n),i.mount(l),i}getNotifyInstances(e){return this.notifyRefs.filter(o=>o.value.notifyPosition===e)}updateNotifyPositionForCreate(e,o){if(this.notifyRefs&&this.notifyRefs.length){const c=window.innerHeight;e.position.indexOf("bottom")>-1&&this.getNotifyInstances(e.position).forEach(n=>{const l=n.value.container.getBoundingClientRect();n.value.container.style.bottom=l.height+c-l.bottom+"px"})}this.notifyRefs=[...this.notifyRefs,o]}updateNotifyPositionForClose(e,o){const c=this.notifyRefs.indexOf(o);if(e.position.indexOf("top")>-1){const n=this.getNotifyInstances(e.position),l=n.indexOf(o);n.slice(l+1).forEach(i=>{i.value.container.style.top=i.value.container.offsetTop-i.value.container.offsetHeight+"px"})}c>-1&&this.notifyRefs.splice(c,1)}show(e){return this.createNotifyInstance(e)}buildNotifyProps(e,o){let c="",n="",l,i,u;typeof o=="string"?c=o:o&&(c=o.message||"",n=o.title||"",i=o.position||null,u=o.showCloseButton!=null?o.showCloseButton:null,l=o.timeout!=null?o.timeout:null);const d={options:{type:e,message:c,title:n}};return i!=null&&(d.position=i),u!=null&&(d.showCloseButton=u),l!=null&&(d.timeout=l),d}info(e){const o=this.buildNotifyProps("info",e);return this.show(o)}success(e){const o=this.buildNotifyProps("success",e);return this.show(o)}warning(e){const o=this.buildNotifyProps("warning",e);return this.show(o)}error(e){const o=this.buildNotifyProps("error",e);return this.show(o)}close(e){e&&e.unmount()}closeAll(){this.notifyRefs.forEach(e=>{e==null||e.value.closeToast()}),this.notifyRefs.length=0}}const B=Symbol("NOTIFY_SERVICE_TOKEN");N.install=s=>{s.component(N.name,N),s.component(T.name,T);const e=new V;s.provide(B,e),s.provide("FNotifyService",e)},r.FNotify=N,r.FNotifyService=V,r.FToast=T,r.F_NOTIFY_SERVICE_TOKEN=B,r.default=N,r.notifyProps=O,r.toastProps=P,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});