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