vue-amazing-ui/lib/spin/Spin.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("../utils/index.cjs"),u={class:"spin-container"},v={class:"spin-box"},k={key:0,class:"spin-loading-dot"},E={key:3,class:"spin-ring-circle"},g={class:"circle",viewBox:"0 0 100 100"},N=["d"],V={key:4,class:"spin-ring-rail"},f={class:"circle",viewBox:"0 0 100 100"},C=["d","stroke"],y=["d"],B={key:5,class:"spin-dynamic-circle"},$={key:6,class:"spin-magic-ring"},h=e.defineComponent({__name:"Spin",props:{spinning:{type:Boolean,default:!0},size:{default:"middle"},tip:{default:void 0},indicator:{default:"dot"},color:{default:void 0},spinCircleWidth:{default:12},spinCirclePercent:{default:33},ringRailColor:{default:"rgba(0, 0, 0, 0.12)"},magicRingColor:{default:void 0},rotate:{type:Boolean,default:!1},speed:{default:800}},setup(r){const a=r,{colorPalettes:i}=o.useInject("Spin"),c=o.useSlotsExist(["tip"]),n=e.computed(()=>(100-a.spinCircleWidth)*Math.PI),s=e.computed(()=>{const t=100-a.spinCircleWidth;return`M 50,50 m 0,-${t/2}
   a ${t/2},${t/2} 0 1 1 0,${t}
   a ${t/2},${t/2} 0 1 1 0,-${t}`}),d=e.computed(()=>a.color===void 0?i.value[5]:a.color),p=e.computed(()=>a.magicRingColor===void 0?i.value[4]:a.magicRingColor),m=e.computed(()=>c.tip||a.tip);return(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`spin-wrap spin-${t.size}`),style:e.normalizeStyle(`
      --spin-primary-color: ${d.value};
      --spin-ring-rail-color: ${t.ringRailColor};
      --spin-magic-ring-color: ${p.value};
      --spin-circle-width: ${t.spinCircleWidth};
      --spin-speed: ${t.speed}ms;
    `)},[e.withDirectives(e.createElementVNode("div",u,[e.createElementVNode("div",v,[t.indicator==="dot"?(e.openBlock(),e.createElementBlock("div",k,[...l[0]||(l[0]=[e.createElementVNode("span",{class:"dot-item"},null,-1),e.createElementVNode("span",{class:"dot-item"},null,-1),e.createElementVNode("span",{class:"dot-item"},null,-1),e.createElementVNode("span",{class:"dot-item"},null,-1)])])):e.createCommentVNode("",!0),t.indicator==="spin-dot"?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["spin-container-box",{"spin-box-rotate":t.rotate}])},[l[2]||(l[2]=e.createStaticVNode('<div class="spin-dot-items" data-v-9a0a1fc2><span class="dot-item" data-v-9a0a1fc2></span><span class="dot-item" data-v-9a0a1fc2></span><span class="dot-item" data-v-9a0a1fc2></span><span class="dot-item" data-v-9a0a1fc2></span></div>',1)),e.createElementVNode("div",{class:e.normalizeClass(["spin-dot-items spin-rotate",{"has-tip":t.tip}])},[...l[1]||(l[1]=[e.createElementVNode("span",{class:"dot-item"},null,-1),e.createElementVNode("span",{class:"dot-item"},null,-1),e.createElementVNode("span",{class:"dot-item"},null,-1),e.createElementVNode("span",{class:"dot-item"},null,-1)])],2)],2)):e.createCommentVNode("",!0),t.indicator==="spin-line"?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["spin-container-box",{"spin-box-rotate":t.rotate}])},[l[4]||(l[4]=e.createStaticVNode('<div class="spin-line-items" data-v-9a0a1fc2><span class="line-item" data-v-9a0a1fc2></span><span class="line-item" data-v-9a0a1fc2></span><span class="line-item" data-v-9a0a1fc2></span><span class="line-item" data-v-9a0a1fc2></span></div>',1)),e.createElementVNode("div",{class:e.normalizeClass(["spin-line-items spin-rotate",{"has-tip":t.tip}])},[...l[3]||(l[3]=[e.createElementVNode("span",{class:"line-item"},null,-1),e.createElementVNode("span",{class:"line-item"},null,-1),e.createElementVNode("span",{class:"line-item"},null,-1),e.createElementVNode("span",{class:"line-item"},null,-1)])],2)],2)):e.createCommentVNode("",!0),t.indicator==="ring-circle"?(e.openBlock(),e.createElementBlock("div",E,[(e.openBlock(),e.createElementBlock("svg",g,[e.createElementVNode("path",{d:s.value,"stroke-linecap":"round",class:"path",style:e.normalizeStyle(`stroke-dasharray: ${t.spinCirclePercent/100*n.value}px, ${n.value}px;`),"fill-opacity":"0"},null,12,N)]))])):e.createCommentVNode("",!0),t.indicator==="ring-rail"?(e.openBlock(),e.createElementBlock("div",V,[(e.openBlock(),e.createElementBlock("svg",f,[e.createElementVNode("path",{d:s.value,stroke:t.ringRailColor,"stroke-linecap":"round",class:"trail",style:e.normalizeStyle(`stroke-dasharray: ${n.value}px, ${n.value}px;`),"fill-opacity":"0"},null,12,C),e.createElementVNode("path",{d:s.value,"stroke-linecap":"round",class:"path",style:e.normalizeStyle(`stroke-dasharray: ${t.spinCirclePercent/100*n.value}px, ${n.value}px;`),"fill-opacity":"0"},null,12,y)]))])):e.createCommentVNode("",!0),t.indicator==="dynamic-circle"?(e.openBlock(),e.createElementBlock("div",B,[...l[5]||(l[5]=[e.createElementVNode("svg",{class:"circle",viewBox:"0 0 50 50"},[e.createElementVNode("circle",{class:"path",cx:"25",cy:"25",r:"20",fill:"none"})],-1)])])):e.createCommentVNode("",!0),t.indicator==="magic-ring"?(e.openBlock(),e.createElementBlock("div",$,[...l[6]||(l[6]=[e.createElementVNode("div",{class:"outer-ring"},null,-1),e.createElementVNode("div",{class:"inner-ring"},null,-1)])])):e.createCommentVNode("",!0),m.value?(e.openBlock(),e.createElementBlock("div",{key:7,class:e.normalizeClass(["spin-tip",{"dot-tip":["dot","spin-dot"].includes(t.indicator)}])},[e.renderSlot(t.$slots,"tip",{},()=>[e.createTextVNode(e.toDisplayString(t.tip),1)],!0)],2)):e.createCommentVNode("",!0)])],512),[[e.vShow,t.spinning]]),e.createElementVNode("div",{class:e.normalizeClass(["spin-content",{"spin-blur":t.spinning}])},[e.renderSlot(t.$slots,"default",{},void 0,!0)],2)],6))}});exports.default=h;