43 lines
3.3 KiB
JavaScript
43 lines
3.3 KiB
JavaScript
import{At as e,Nt as t,U as n,W as r,an as i,ct as a,m as o,nt as s,ot as c,rt as l,vn as u,xt as d}from"./client-DrrW410h.js";import{c as f}from"./ui-BXphkCO3.js";import{t as p}from"./use-compitable-BLe2cDdc.js";import{t as m}from"./fade-in.cssr-DIQ8XvO3.js";import{H as h,V as g,f as _,lt as v}from"./index-CvfVA1ID.js";var y=s([s(`@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=e({name:`Spin`,props:Object.assign(Object.assign(Object.assign({},o.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:t,inlineThemeDisabled:s}=r(e),c=o(`Spin`,`-spin`,y,_,e,t),l=d(()=>{let{size:t}=e,{common:{cubicBezierEaseInOut:n},self:r}=c.value,{opacitySpinning:i,color:o,textColor:s}=r;return{"--n-bezier":n,"--n-opacity-spinning":i,"--n-size":typeof t==`number`?f(t):r[a(`size`,t)],"--n-color":o,"--n-text-color":s}}),m=s?n(`spin`,d(()=>{let{size:t}=e;return typeof t==`number`?String(t):t[0]}),l,e):void 0,h=p(e,[`spinning`,`show`]),g=u(!1);return i(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:t,active:g,mergedStrokeWidth:d(()=>{let{strokeWidth:t}=e;if(t!==void 0)return t;let{size:n}=e;return b[typeof n==`number`?`medium`:n]}),cssVars:s?void 0:l,themeClass:m?.themeClass,onRender:m?.onRender}},render(){var e;let{$slots:n,mergedClsPrefix:r,description:i}=this,a=n.icon&&this.rotate,o=(i||n.description)&&t(`div`,{class:`${r}-spin-description`},i||n.description?.call(n)),s=n.icon?t(`div`,{class:[`${r}-spin-body`,this.themeClass]},t(`div`,{class:[`${r}-spin`,a&&`${r}-spin--rotate`],style:n.default?``:this.cssVars},n.icon()),o):t(`div`,{class:[`${r}-spin-body`,this.themeClass]},t(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(e=this.onRender)==null||e.call(this),n.default?t(`div`,{class:[`${r}-spin-container`,this.themeClass],style:this.cssVars},t(`div`,{class:[`${r}-spin-content`,this.active&&`${r}-spin-content--spinning`,this.contentClass],style:this.contentStyle},n),t(v,{name:`fade-in-transition`},{default:()=>this.active?s:null})):s}});export{x as t}; |