@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 9.05 kB
JavaScript
(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,p){"use strict";var H=Object.defineProperty;var L=(r,t,p)=>t in r?H(r,t,{enumerable:!0,configurable:!0,writable:!0,value:p}):r[t]=p;var S=(r,t,p)=>L(r,typeof t!="symbol"?t+"":t,p);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}},B={showCloseButton:{type:Boolean,default:!0},animate:{type:String,default:"fadeIn"},options:{type:Object}},T=t.defineComponent({name:"Toast",props:B,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),d=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}),m=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(()=>p.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 I(a,v){}function y(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:y(v),onClick:x=>void 0},[v.text]))),e.slots.default&&e.slots.default()])])};return()=>t.createVNode("div",{class:d.value,style:"min-height:44px"},[h.value&&t.createVNode("button",{title:p.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:m.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 E(){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 _(){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`]:E()}_(),t.ref("");function P(){if(typeof window>"u"||typeof navigator>"u")return!1;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 d of o)if(d.test(s))return!1;for(const d of e)if(d.test(s))return!0;if(typeof screen>"u")return!1;const c="ontouchstart"in window||navigator.maxTouchPoints>0,n=screen.width,l=screen.height,i=Math.min(n,l);return!!(c&&i<=768)}function A(){const s=P();return s&&document.body.classList.add("f-mobile"),s}typeof document<"u"&&A();const N=t.defineComponent({name:"Notify",props:O,emits:["close","empty"],setup(s,e){var I;const o=P(),n=`farris-notify-${(I=s.options)!=null&&I.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(),d=t.ref(s.options),m=t.ref(s.showCloseButton),f=t.computed(()=>s.position||"bottom-right"),h=t.computed(()=>s.timeout!=null?s.timeout:3e3),w=t.computed(()=>{const y=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?`${y}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(y){e.emit("close")}h.value&&setTimeout(()=>{g()},h.value),e.expose({closeToast:g,container:u,notifyPosition:f});function C(y,b){g()}return()=>{var y;return o?t.createVNode("div",{class:l.value,ref:u},[(y=s.options)==null?void 0:y.message]):t.createVNode("div",{class:l.value,style:w.value,ref:u},[t.createVNode(T,{options:d.value,showCloseButton:m.value,animate:s.animate,onClose:b=>C(b,d.value)},null)])}}});class V{constructor(){S(this,"notifyRefs",[]);S(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," ").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 m;const u=t.ref();function d(){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&&((m=n.options)!=null&&m.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:d}),null)]})}});return i.provide("NotifyService",this),document.body.appendChild(l),i.use(p.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 m={options:{type:e,message:c,title:n}};return i!=null&&(m.position=i),u!=null&&(m.showCloseButton=u),l!=null&&(m.timeout=l),m}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 M=Symbol("NOTIFY_SERVICE_TOKEN");N.install=s=>{s.component(N.name,N),s.component(T.name,T);const e=new V;s.provide(M,e),s.provide("FNotifyService",e)},r.FNotify=N,r.FNotifyService=V,r.FToast=T,r.F_NOTIFY_SERVICE_TOKEN=M,r.default=N,r.notifyProps=O,r.toastProps=B,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});