16 lines
4.7 KiB
JavaScript
16 lines
4.7 KiB
JavaScript
import{S as P,i as $,s as W,q as y,f as k,g as o,h as _,j as S,n as D,k as w,l as T,c as f,o as x,m as c,t as u,a as g,d as h}from"./index-C9aKRT5A.js";import{g as V,a as C}from"./spread-CgU5AtxT.js";import{p as L,M as q,T as A,S as H,w as O}from"./collect-stories-ceFdpR5E.js";const E=`Simple loading spinner. Use it to help hide long loading times for components that may be loading expensive media files or crunching through lots of data.
|
|
|
|
\`\`\`svelte
|
|
<script>
|
|
import { Spinner } from '@reuters-graphics/graphics-components';
|
|
|
|
let somethingsLoading = true;
|
|
<\/script>
|
|
|
|
{#if somethingsLoading}
|
|
<Spinner />
|
|
{:else}
|
|
<p>The real deal is here.</p>
|
|
{/if}
|
|
\`\`\`
|
|
`;function I(a){let e,t,r;return{c(){e=y("div"),t=y("div"),r=y("div"),r.innerHTML='<div class="spinner absolute svelte-18gm7af"></div>',k(r,"class","spinner-container relative svelte-18gm7af"),o(t,"--spinner-colour",a[0]),o(t,"--spinner-ring-width",a[2]+"px"),o(t,"--spinner-ring-offset","-"+a[2]+"px"),o(t,"--spinner-speed",a[3]+"s"),o(t,"width",a[1]+"px"),o(t,"height",a[1]+"px"),o(t,"margin","0 auto"),k(e,"class","component-container flex items-center justify-center"),o(e,"width","100%"),o(e,"height",`${a[1]+a[4]*2}px`)},m(i,n){_(i,e,n),S(e,t),S(t,r)},p(i,[n]){n&1&&o(t,"--spinner-colour",i[0]),n&4&&o(t,"--spinner-ring-width",i[2]+"px"),n&4&&o(t,"--spinner-ring-offset","-"+i[2]+"px"),n&8&&o(t,"--spinner-speed",i[3]+"s"),n&2&&o(t,"width",i[1]+"px"),n&2&&o(t,"height",i[1]+"px"),n&18&&o(e,"height",`${i[1]+i[4]*2}px`)},i:D,o:D,d(i){i&&w(e)}}}function U(a,e,t){let{colour:r="#666"}=e,{width:i=40}=e,{ringWidth:n=6}=e,{speed:p=.8}=e,{containerPadding:d=10}=e;return a.$$set=l=>{"colour"in l&&t(0,r=l.colour),"width"in l&&t(1,i=l.width),"ringWidth"in l&&t(2,n=l.ringWidth),"speed"in l&&t(3,p=l.speed),"containerPadding"in l&&t(4,d=l.containerPadding)},[r,i,n,p,d]}class b extends P{constructor(e){super(),$(this,e,U,I,W,{colour:0,width:1,ringWidth:2,speed:3,containerPadding:4})}}b.__docgen={version:3,name:"Spinner.svelte",data:[{keywords:[],visibility:"public",description:"Primary colour of the spinner.",name:"colour",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"#666"},{keywords:[],visibility:"public",description:"Outer width of the spinner",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:40},{keywords:[],visibility:"public",description:"Width of the spinner ring",name:"ringWidth",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:6},{keywords:[],visibility:"public",description:"How fast the spinner spins in seconds",name:"speed",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:.8},{keywords:[],visibility:"public",description:"Vertical padding for the spinner's container",name:"containerPadding",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:10}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function z(a){let e,t;const r=[a[1]];let i={};for(let n=0;n<r.length;n+=1)i=T(i,r[n]);return e=new b({props:i}),{c(){f(e.$$.fragment)},m(n,p){c(e,n,p),t=!0},p(n,p){const d=p&2?V(r,[C(n[1])]):{};e.$set(d)},i(n){t||(u(e.$$.fragment,n),t=!0)},o(n){g(e.$$.fragment,n),t=!1},d(n){h(e,n)}}}function B(a){let e,t,r,i,n,p;const d=[{title:"Components/Spinner"},{component:b},a[0]];let l={};for(let s=0;s<d.length;s+=1)l=T(l,d[s]);return e=new q({props:l}),r=new A({props:{$$slots:{default:[z,({args:s})=>({1:s}),({args:s})=>s?2:0]},$$scope:{ctx:a}}}),n=new H({props:{name:"Default"}}),{c(){f(e.$$.fragment),t=x(),f(r.$$.fragment),i=x(),f(n.$$.fragment)},m(s,m){c(e,s,m),_(s,t,m),c(r,s,m),_(s,i,m),c(n,s,m),p=!0},p(s,[m]){const j=m&1?V(d,[d[0],d[1],C(s[0])]):{};e.$set(j);const v={};m&6&&(v.$$scope={dirty:m,ctx:s}),r.$set(v)},i(s){p||(u(e.$$.fragment,s),u(r.$$.fragment,s),u(n.$$.fragment,s),p=!0)},o(s){g(e.$$.fragment,s),g(r.$$.fragment,s),g(n.$$.fragment,s),p=!1},d(s){s&&(w(t),w(i)),h(e,s),h(r,s),h(n,s)}}}function F(a){return[{...O(E),argTypes:{colour:{control:"color"},ringWidth:{control:{type:"range",min:2,max:20,step:1}},width:{control:{type:"range",min:5,max:100,step:5}},speed:{control:{type:"range",min:.2,max:1,step:.1}},containerPadding:{control:{type:"range",min:5,max:100,step:5}}}}]}class G extends P{constructor(e){super(),$(this,e,F,B,W,{})}}const M=L(G,{meta:{title:"Components/Spinner"},stories:{"tpl:default":{name:"default",template:!0,source:"<Spinner {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","Spinner","withComponentDocs"]}),Q=M.meta,R=["Default"],X=M.stories.Default;export{X as Default,R as __namedExportsOrder,Q as default};
|