43 lines
3.3 KiB
JavaScript
43 lines
3.3 KiB
JavaScript
import{Pt as e,U as t,W as n,ct as r,jt as i,m as a,nt as o,on as s,ot as c,rt as l,xt as u,yn as d}from"./client-Be0b5AZU.js";import{c as f}from"./ui-DePKLhY8.js";import{t as p}from"./use-compitable-gFaTNHlg.js";import{t as m}from"./fade-in.cssr-DaPLfaec.js";import{H as h,V as g,f as _,lt as v}from"./index-DpxjEbFc.js";var y=o([o(`@keyframes spin-rotate`,`
|
|
from {
|
|
transform: rotate(0);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
`),l(`spin-container`,`
|
|
position: relative;
|
|
`,[l(`spin-body`,`
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
`,[m()])]),l(`spin-body`,`
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
`),l(`spin`,`
|
|
display: inline-flex;
|
|
height: var(--n-size);
|
|
width: var(--n-size);
|
|
font-size: var(--n-size);
|
|
color: var(--n-color);
|
|
`,[c(`rotate`,`
|
|
animation: spin-rotate 2s linear infinite;
|
|
`)]),l(`spin-description`,`
|
|
display: inline-block;
|
|
font-size: var(--n-font-size);
|
|
color: var(--n-text-color);
|
|
transition: color .3s var(--n-bezier);
|
|
margin-top: 8px;
|
|
`),l(`spin-content`,`
|
|
opacity: 1;
|
|
transition: opacity .3s var(--n-bezier);
|
|
pointer-events: all;
|
|
`,[c(`spinning`,`
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
pointer-events: none;
|
|
opacity: var(--n-opacity-spinning);
|
|
`)])]),b={small:20,medium:18,large:16},x=i({name:`Spin`,props:Object.assign(Object.assign(Object.assign({},a.props),{contentClass:String,contentStyle:[Object,String],description:String,size:{type:[String,Number],default:`medium`},show:{type:Boolean,default:!0},rotate:{type:Boolean,default:!0},spinning:{type:Boolean,validator:()=>!0,default:void 0},delay:Number}),h),slots:Object,setup(e){let{mergedClsPrefixRef:i,inlineThemeDisabled:o}=n(e),c=a(`Spin`,`-spin`,y,_,e,i),l=u(()=>{let{size:t}=e,{common:{cubicBezierEaseInOut:n},self:i}=c.value,{opacitySpinning:a,color:o,textColor:s}=i;return{"--n-bezier":n,"--n-opacity-spinning":a,"--n-size":typeof t==`number`?f(t):i[r(`size`,t)],"--n-color":o,"--n-text-color":s}}),m=o?t(`spin`,u(()=>{let{size:t}=e;return typeof t==`number`?String(t):t[0]}),l,e):void 0,h=p(e,[`spinning`,`show`]),g=d(!1);return s(t=>{let n;if(h.value){let{delay:r}=e;if(r){n=window.setTimeout(()=>{g.value=!0},r),t(()=>{clearTimeout(n)});return}}g.value=h.value}),{mergedClsPrefix:i,active:g,mergedStrokeWidth:u(()=>{let{strokeWidth:t}=e;if(t!==void 0)return t;let{size:n}=e;return b[typeof n==`number`?`medium`:n]}),cssVars:o?void 0:l,themeClass:m?.themeClass,onRender:m?.onRender}},render(){var t;let{$slots:n,mergedClsPrefix:r,description:i}=this,a=n.icon&&this.rotate,o=(i||n.description)&&e(`div`,{class:`${r}-spin-description`},i||n.description?.call(n)),s=n.icon?e(`div`,{class:[`${r}-spin-body`,this.themeClass]},e(`div`,{class:[`${r}-spin`,a&&`${r}-spin--rotate`],style:n.default?``:this.cssVars},n.icon()),o):e(`div`,{class:[`${r}-spin-body`,this.themeClass]},e(g,{clsPrefix:r,style:n.default?``:this.cssVars,stroke:this.stroke,"stroke-width":this.mergedStrokeWidth,radius:this.radius,scale:this.scale,class:`${r}-spin`}),o);return(t=this.onRender)==null||t.call(this),n.default?e(`div`,{class:[`${r}-spin-container`,this.themeClass],style:this.cssVars},e(`div`,{class:[`${r}-spin-content`,this.active&&`${r}-spin-content--spinning`,this.contentClass],style:this.contentStyle},n),e(v,{name:`fade-in-transition`},{default:()=>this.active?s:null})):s}});export{x as t}; |