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