@farris/ui-vue/components/loading/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../locale/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../locale/index.umd.js"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.loading={},s.Vue,s.locale))})(this,function(s,e,w){"use strict";function P(){function t(){if(typeof navigator>"u"||typeof window>"u"||typeof screen>"u")return!1;const n=navigator.userAgent||navigator.vendor||window.opera,o=[/iPhone/i,/iPod/i,/Android.*Mobile/i,/webOS/i,/BlackBerry/i,/IEMobile/i,/Opera Mini/i],l=[/iPad/i,/Android(?!.*Mobile)/i,/Tablet/i,/PlayBook/i,/Kindle/i,/Silk/i];for(const r of l)if(r.test(n))return!1;for(const r of o)if(r.test(n))return!0;const a="ontouchstart"in window||navigator.maxTouchPoints>0,u=screen.width,f=screen.height,d=Math.min(u,f);return!!(a&&d<=768)}return{isMobilePhone:t}}const M={showMessage:{type:Boolean,default:!0},message:{type:String,default:"正在加载，请稍候..."},isActive:{type:Boolean,default:!1},width:{type:Number,default:30},type:{type:Number,default:0},target:{type:Object,default:null},targetPosition:{type:String,default:""},delay:{type:Number,default:300}},{isMobilePhone:C}=P(),k={showMessage:!0,message:C()?"正在加载...":"正在加载，请稍候...",isActive:!1,width:30,type:0,targetPosition:"",delay:300},A=['<div class="f-loading-round"></div>',`<div class="f-loading-dot-wrapper">
      <div class="f-loading-dot">
          <div class="dot dot1"></div>
          <div class="dot dot2"></div>
          <div class="dot dot3"></div>
          <div class="dot dot4"></div>
      </div>
  </div>`,'<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-coffee"><defs><linearGradient id="gradient" x1="0%" x2="0%" y1="0%" y2="100%"><stop offset="10%" stop-color="black" stop-opacity="0"></stop><stop offset="100%" stop-color="white" stop-opacity="1"></stop></linearGradient><mask id="mask" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"><rect x="22" y="8" width="56" height="54" fill="url(#gradient)"></rect></mask><path id="steam" d="M0-4c-2.1,2.6-2.1,6.4,0,9l0,0c2.1,2.6,2.1,6.4,0,9l0,0c-2.1,2.6-2.1,6.4,0,9l0,0c2.1,2.6,2.1,6.4,0,9l0,0 c-2.1,2.6-2.1,6.4,0,9l0,0c2.1,2.6,2.1,6.4,0,9c-2.1,2.6-2.1,6.4,0,9l0,0c2.1,2.6,2.1,6.4,0,9l0,0c-2.1,2.6-2.1,6.4,0,9l0,0 c2.1,2.6,2.1,6.4,0,9l0,0c-2.1,2.6-2.1,6.4,0,9l0,0c2.1,2.6,2.1,6.4,0,9c-2.1,2.6-2.1,6.4,0,9l0,0c2.1,2.6,2.1,6.4,0,9l0,0 c-2.1,2.6-2.1,6.4,0,9h0c2.1,2.6,2.1,6.4,0,9h0c-2.1,2.6-2.1,6.4,0,9h0c2.1,2.6,2.1,6.4,0,9" stroke-width="6" stroke-linecap="round" fill="#f00" stroke="#58a8f6"></path></defs><g mask="url(#mask)"><use x="29" y="1.00876" href="#steam"><animate attributeName="y" calcMode="linear" values="4;-14" keyTimes="0;1" dur="0.5" begin="0s" repeatCount="indefinite"></animate></use><use x="47" y="-5.98248" href="#steam"><animate attributeName="y" calcMode="linear" values="0;-18" keyTimes="0;1" dur="0.25" begin="0s" repeatCount="indefinite"></animate></use><use x="64" y="-8.48686" href="#steam"><animate attributeName="y" calcMode="linear" values="-4;-22" keyTimes="0;1" dur="0.3333333333333333" begin="0s" repeatCount="indefinite"></animate></use></g><path d="M81.2,52.5l-5.2,0V49c0-1.6-1.3-3-3-3H20c-1.6,0-3,1.3-3,3v11.6C17,71.3,25.7,80,36.5,80h20.1 c7.1,0,13.3-3.8,16.7-9.5h8.3c5.2,0,9.3-4.4,9-9.6C90.2,56.1,86,52.5,81.2,52.5z M81.5,67.5h-6.8c0.8-2.2,1.3-4.5,1.3-7v-5h5.5 c3.3,0,6,2.7,6,6S84.8,67.5,81.5,67.5z" fill="#58a8f6"></path><path d="M78.8,88H19.2c-1.1,0-2-0.9-2-2s0.9-2,2-2h59.5c1.1,0,2,0.9,2,2S79.9,88,78.8,88z" fill="rgba(80.78431372549018%,94.50980392156862%,72.15686274509802%,0)"></path></svg>'],y=e.defineComponent({name:"FLoading",props:M,emits:["closed","hidden"],setup(t,n){const o=A,l=e.ref(t.showMessage),a=e.ref(t.isActive),u=e.ref(t.message),f=e.ref(t.width),d=e.ref(t.type),r=e.ref(null),c=e.ref(null),h=e.ref(!1);let m="",p;const O=e.computed(()=>d.value&&d.value in[0,1,2]?d.value:0);e.onMounted(()=>{S()});const j=e.computed(()=>{const i={visibility:h.value?"visible":"hidden",transform:"translate(-50%,-50%)"};return t.target===document.body&&(i.position="fixed"),i});function S(){a.value&&!p&&(p=setTimeout(()=>{p=null,D(),h.value=!0},t.delay)),a.value||p&&(clearTimeout(p),p=null)}function z(i){m=i}function B(){return m}function L(i=()=>{}){a.value=!1,h.value=!1,n.emit("closed",{loadingId:m,callback:i})}function D(){const i=F();r.value&&r.value.style&&(r.value.style.zIndex=(i+1).toString()),c.value&&c.value.style&&(c.value.style.zIndex=(i+1).toString())}function F(i=1){const E=["body>.f-datagrid-settings-simple-host","body>div","body>farris-dialog>.farris-modal.show","body>.farris-modal.show","body>farris-filter-panel>.f-filter-panel-wrapper","body .f-sidebar-show>.f-sidebar-main","body>.popover.show","body>filter-row-panel>.f-datagrid-filter-panel","body>.f-section-maximize"],q=Array.from(document.body.querySelectorAll(E.join(","))).filter(v=>v).map(v=>{const{display:G,zIndex:U}=window.getComputedStyle(v);return G==="none"?0:parseInt(U,10)}).filter(v=>v);let b=Math.max(...q);return b<1040&&(b=1040),b+i}n.expose({close:L,setLoadingId:z,getLoadingId:B}),e.watch(()=>t.isActive,i=>{a.value=i,S(),i||L()});function H(i){i.stopPropagation()}return()=>e.createVNode(e.Fragment,null,[a.value&&e.createVNode("div",{ref:r,onClick:H,class:"farris-loading-backdrop loading-wait"},null),a.value&&e.createVNode("div",{ref:c,class:"farris-loading",style:j.value},[e.createVNode("div",{class:"ng-busy-default-wrapper"},[e.createVNode("div",{class:"ng-busy-default-sign"},[e.createVNode("div",{style:[{display:"inline-block"},{margin:"4px"},{width:f.value+"px"},{height:f.value+"px"}],innerHTML:o[O.value]},null),l.value&&e.createVNode("div",{class:"ng-busy-default-text",style:"margin-left:0;",innerHTML:u.value},null)])])])])}});let x=-1;const g={};function N(t){const n=document.createElement("div"),o=t.target||document.body,l=!!t.targetPosition;let a="unset";if(l){const{position:d}=window.getComputedStyle(o);a=d,o.style.position=t.targetPosition}const u=V();x=u;const f=e.createApp({setup(){const d=e.ref(t.message);d.value==="正在加载，请稍候..."&&(d.value=w.LocaleService.getLocaleValue("loading.message"));const r={...t,message:d.value},c=e.ref();e.onUnmounted(()=>{l&&(o.style.position=a),n.remove()}),e.onMounted(()=>{c.value&&c.value.setLoadingId(u)});function h(m){f.unmount(),m.callback&&m.callback(),delete g[m.loadingId]}return g[u]=c,()=>e.createVNode(y,e.mergeProps({ref:c},r,{onClosed:h}),null)}});return o.style=o.style?o.style:{},o.appendChild(n),f.use(w.LocaleService.i18n),f.mount(n),g[u]}function T(){const t=Object.keys(g).map(n=>parseInt(n,10));return t.length?Math.max(...t):0}function V(){return T()+1}class I{static show(n){const l={...{...k,isActive:!0,target:document.body,targetPosition:""},...n};return N(l)}static close(n,o=()=>{}){const a=g[n||x];a&&a.value.close(o)}static clearAll(){const n=Object.keys(g);n.length&&n.forEach(o=>{const l=g[o];l&&l.value.close()})}}y.install=t=>{t.component(y.name,y),t.provide("FLoadingService",I)},s.DefaultLoadingProps=k,s.FLoading=y,s.FLoadingService=I,s.default=y,s.loadingProps=M,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});