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

Farris Vue, a Farris Design based Vue3 component library.

(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../locale/index.umd.js"),require("vue-i18n")):typeof define=="function"&&define.amd?define(["exports","vue","../locale/index.umd.js","vue-i18n"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.loading={},o.Vue,o.locale,o.vueI18n))})(this,function(o,e,S,C){"use strict";const w={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}},I={showMessage:!0,message:"正在加载，请稍候...",isActive:!1,width:30,type:0,targetPosition:"",delay:300},N=['<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>'],g=e.defineComponent({name:"FLoading",props:w,emits:["closed","hidden"],setup(t,i){const a=N,l=e.ref(t.showMessage),s=e.ref(t.isActive),m=e.ref(t.message),y=e.ref(t.width),f=e.ref(t.type),c=e.ref(null),p=e.ref(null),r=e.ref(!1);let h="",d;const V=e.computed(()=>f.value&&f.value in[0,1,2]?f.value:0);e.onMounted(()=>{L()});const j=e.computed(()=>{const n={visibility:r.value?"visible":"hidden",transform:"translate(-50%,-50%)"};return t.target===document.body&&(n.position="fixed"),n});function L(){s.value&&!d&&(d=setTimeout(()=>{d=null,O(),r.value=!0},t.delay)),s.value||d&&(clearTimeout(d),d=null)}function z(n){h=n}function F(){return h}function M(n=()=>{}){s.value=!1,r.value=!1,i.emit("closed",{loadingId:h,callback:n})}function O(){const n=D();c.value&&c.value.style&&(c.value.style.zIndex=(n+1).toString()),p.value&&p.value.style&&(p.value.style.zIndex=(n+1).toString())}function D(n=1){const H=["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(H.join(","))).filter(v=>v).map(v=>{const{display:E,zIndex:G}=window.getComputedStyle(v);return E==="none"?0:parseInt(G,10)}).filter(v=>v);let b=Math.max(...q);return b<1040&&(b=1040),b+n}i.expose({close:M,setLoadingId:z,getLoadingId:F}),e.watch(()=>t.isActive,n=>{s.value=n,L(),n||M()});function B(n){n.stopPropagation()}return()=>e.createVNode(e.Fragment,null,[s.value&&e.createVNode("div",{ref:c,onClick:B,class:"farris-loading-backdrop loading-wait"},null),s.value&&e.createVNode("div",{ref:p,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:y.value+"px"},{height:y.value+"px"}],innerHTML:a[V.value]},null),l.value&&e.createVNode("div",{class:"ng-busy-default-text",style:"margin-left:0;",innerHTML:m.value},null)])])])])}});let x=-1;const u={};function P(t){const i=document.createElement("div"),a=t.target||document.body,l=!!t.targetPosition;let s="unset";if(l){const{position:f}=window.getComputedStyle(a);s=f,a.style.position=t.targetPosition}const m=T();x=m;const y=e.createApp({setup(){const{t:f}=C.useI18n(),c=e.ref(t.message);c.value==="正在加载，请稍候..."&&(c.value=f("loading.message"));const p={...t,message:c.value},r=e.ref();e.onUnmounted(()=>{l&&(a.style.position=s),i.remove()}),e.onMounted(()=>{r.value&&r.value.setLoadingId(m)});function h(d){y.unmount(),d.callback&&d.callback(),delete u[d.loadingId]}return u[m]=r,()=>e.createVNode(g,e.mergeProps({ref:r},p,{onClosed:h}),null)}});return a.style=a.style?a.style:{},a.appendChild(i),y.use(S.LocaleService.i18n),y.mount(i),u[m]}function A(){const t=Object.keys(u).map(i=>parseInt(i,10));return t.length?Math.max(...t):0}function T(){return A()+1}class k{static show(i){const l={...{...I,isActive:!0,target:document.body,targetPosition:""},...i};return P(l)}static close(i,a=()=>{}){const s=u[i||x];s&&s.value.close(a)}static clearAll(){const i=Object.keys(u);i.length&&i.forEach(a=>{const l=u[a];l&&l.value.close()})}}g.install=t=>{t.component(g.name,g),t.provide("FLoadingService",k)},o.DefaultLoadingProps=I,o.FLoading=g,o.FLoadingService=k,o.default=g,o.loadingProps=w,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});