43 lines
3.3 KiB
JavaScript
43 lines
3.3 KiB
JavaScript
import{H as e,Mt as t,U as n,_n as r,at as i,bt as a,in as o,kt as s,nt as c,p as l,st as u,tt as d}from"./client-CH0l_cyC.js";import{c as f}from"./ui-DfDTPljW.js";import{t as p}from"./use-compitable-BfFGeKBX.js";import{t as m}from"./fade-in.cssr-tv9EkUe1.js";import{B as h,V as g,ct as _,f as v}from"./index-8AmrGIpl.js";var y=d([d(`@keyframes spin-rotate`,`
|
|
from {
|
|
transform: rotate(0);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
`),c(`spin-container`,`
|
|
position: relative;
|
|
`,[c(`spin-body`,`
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
`,[m()])]),c(`spin-body`,`
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
`),c(`spin`,`
|
|
display: inline-flex;
|
|
height: var(--n-size);
|
|
width: var(--n-size);
|
|
font-size: var(--n-size);
|
|
color: var(--n-color);
|
|
`,[i(`rotate`,`
|
|
animation: spin-rotate 2s linear infinite;
|
|
`)]),c(`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;
|
|
`),c(`spin-content`,`
|
|
opacity: 1;
|
|
transition: opacity .3s var(--n-bezier);
|
|
pointer-events: all;
|
|
`,[i(`spinning`,`
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
pointer-events: none;
|
|
opacity: var(--n-opacity-spinning);
|
|
`)])]),b={small:20,medium:18,large:16},x=s({name:`Spin`,props:Object.assign(Object.assign(Object.assign({},l.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}),g),slots:Object,setup(t){let{mergedClsPrefixRef:i,inlineThemeDisabled:s}=n(t),c=l(`Spin`,`-spin`,y,v,t,i),d=a(()=>{let{size:e}=t,{common:{cubicBezierEaseInOut:n},self:r}=c.value,{opacitySpinning:i,color:a,textColor:o}=r;return{"--n-bezier":n,"--n-opacity-spinning":i,"--n-size":typeof e==`number`?f(e):r[u(`size`,e)],"--n-color":a,"--n-text-color":o}}),m=s?e(`spin`,a(()=>{let{size:e}=t;return typeof e==`number`?String(e):e[0]}),d,t):void 0,h=p(t,[`spinning`,`show`]),g=r(!1);return o(e=>{let n;if(h.value){let{delay:r}=t;if(r){n=window.setTimeout(()=>{g.value=!0},r),e(()=>{clearTimeout(n)});return}}g.value=h.value}),{mergedClsPrefix:i,active:g,mergedStrokeWidth:a(()=>{let{strokeWidth:e}=t;if(e!==void 0)return e;let{size:n}=t;return b[typeof n==`number`?`medium`:n]}),cssVars:s?void 0:d,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(h,{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(_,{name:`fade-in-transition`},{default:()=>this.active?s:null})):s}});export{x as t}; |