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