3 lines
8.0 KiB
JavaScript
3 lines
8.0 KiB
JavaScript
import{c as a,d as s,b as e,D as n,o as r,E as l,p as i,F as t,l as c,A as o,y as m,G as u,j as f,B as d,e as h,g as p,k as v,P as g,f as b,h as E,i as $,m as w,n as A,r as I,x as N,z as k,O as y}from"./chunk.82446879.js";import{L as U}from"./chunk.f5a3f321.js";import"./chunk.e8a2e241.js";import{a as j}from"./chunk.4b4ee497.js";import"./chunk.b01e898f.js";import{a as x}from"./chunk.fb378401.js";function L(a){let s,e,n,r;return{c(){s=h("img"),this.h()},l(a){s=p(a,"IMG",{class:!0,src:!0,alt:!0}),this.h()},h(){v(s,"class","is-rounded"),s.src!==(e=a[0].picture.medium)&&v(s,"src",e),v(s,"alt","Profile picture")},m(a,e){c(a,s,e),r=!0},p(a,n){(!r||1&n&&s.src!==(e=a[0].picture.medium))&&v(s,"src",e)},i(a){r||(y(()=>{n||(n=g(s,U,{},!0)),n.run(1)}),r=!0)},o(a){n||(n=g(s,U,{},!1)),n.run(0),r=!1},d(a){a&&f(s),a&&n&&n.end()}}}function D(a){let s,e,n,l,t,o,m,u,d,v,I,N,k,j,x,L,D=a[1](a[0].name.first)+"",z=a[1](a[0].name.last)+"",P=a[0].login.username+"";return{c(){s=h("p"),e=h("strong"),n=b(D),l=r(),t=b(z),o=r(),m=h("small"),u=b("@"),d=b(P),v=r(),I=h("small"),N=r(),k=h("br"),j=b("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla\n egestas. Nullam condimentum luctus turpis.")},l(a){s=p(a,"P",{});var r=E(s);e=p(r,"STRONG",{});var c=E(e);n=$(c,D),l=i(c),t=$(c,z),c.forEach(f),o=i(r),m=p(r,"SMALL",{});var h=E(m);u=$(h,"@"),d=$(h,P),h.forEach(f),v=i(r),I=p(r,"SMALL",{}),E(I).forEach(f),N=i(r),k=p(r,"BR",{}),j=$(r,"\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla\n egestas. Nullam condimentum luctus turpis."),r.forEach(f)},m(a,r){c(a,s,r),w(s,e),w(e,n),w(e,l),w(e,t),w(s,o),w(s,m),w(m,u),w(m,d),w(s,v),w(s,I),w(s,N),w(s,k),w(s,j),L=!0},p(a,s){(!L||1&s)&&D!==(D=a[1](a[0].name.first)+"")&&A(n,D),(!L||1&s)&&z!==(z=a[1](a[0].name.last)+"")&&A(t,z),(!L||1&s)&&P!==(P=a[0].login.username+"")&&A(d,P)},i(a){L||(y(()=>{x||(x=g(s,U,{},!0)),x.run(1)}),L=!0)},o(a){x||(x=g(s,U,{},!1)),x.run(0),L=!1},d(a){a&&f(s),a&&x&&x.end()}}}function z(a){let s,e,n,l,t,o,m,u,d,b,$,A,I,N,k;return{c(){s=h("nav"),e=h("div"),n=h("a"),l=h("span"),t=h("i"),o=r(),m=h("a"),u=h("span"),d=h("i"),b=r(),$=h("a"),A=h("span"),I=h("i"),this.h()},l(a){s=p(a,"NAV",{class:!0});var r=E(s);e=p(r,"DIV",{class:!0});var c=E(e);n=p(c,"A",{href:!0,class:!0,"aria-label":!0});var h=E(n);l=p(h,"SPAN",{class:!0});var v=E(l);t=p(v,"I",{class:!0,"aria-hidden":!0}),E(t).forEach(f),v.forEach(f),h.forEach(f),o=i(c),m=p(c,"A",{href:!0,class:!0,"aria-label":!0});var g=E(m);u=p(g,"SPAN",{class:!0});var w=E(u);d=p(w,"I",{class:!0,"aria-hidden":!0}),E(d).forEach(f),w.forEach(f),g.forEach(f),b=i(c),$=p(c,"A",{href:!0,class:!0,"aria-label":!0});var N=E($);A=p(N,"SPAN",{class:!0});var k=E(A);I=p(k,"I",{class:!0,"aria-hidden":!0}),E(I).forEach(f),k.forEach(f),N.forEach(f),c.forEach(f),r.forEach(f),this.h()},h(){v(t,"class","fas fa-reply"),v(t,"aria-hidden","true"),v(l,"class","icon is-small"),v(n,"href",""),v(n,"class","level-item"),v(n,"aria-label","reply"),v(d,"class","fas fa-retweet"),v(d,"aria-hidden","true"),v(u,"class","icon is-small"),v(m,"href",""),v(m,"class","level-item"),v(m,"aria-label","retweet"),v(I,"class","fas fa-heart"),v(I,"aria-hidden","true"),v(A,"class","icon is-small"),v($,"href",""),v($,"class","level-item"),v($,"aria-label","like"),v(e,"class","level-left"),v(s,"class","level is-mobile")},m(a,r){c(a,s,r),w(s,e),w(e,n),w(n,l),w(l,t),w(e,o),w(e,m),w(m,u),w(u,d),w(e,b),w(e,$),w($,A),w(A,I),k=!0},i(a){k||(y(()=>{N||(N=g(s,U,{},!0)),N.run(1)}),k=!0)},o(a){N||(N=g(s,U,{},!1)),N.run(0),k=!1},d(a){a&&f(s),a&&N&&N.end()}}}function P(a){let s,e,n,l,t,u,d,g,A,y,U,j,x,P,S,V,R,B,F,M=a[0]&&L(a),G=a[0]&&D(a),T=a[0]&&z();return{c(){s=h("div"),e=h("button"),n=b("Fetch New User"),l=r(),t=h("br"),u=r(),d=h("br"),g=r(),A=h("div"),y=h("article"),U=h("div"),j=h("figure"),M&&M.c(),x=r(),P=h("div"),S=h("div"),G&&G.c(),V=r(),T&&T.c(),this.h()},l(a){s=p(a,"DIV",{slot:!0});var r=E(s);e=p(r,"BUTTON",{class:!0});var c=E(e);n=$(c,"Fetch New User"),c.forEach(f),l=i(r),t=p(r,"BR",{}),u=i(r),d=p(r,"BR",{}),g=i(r),A=p(r,"DIV",{class:!0});var o=E(A);y=p(o,"ARTICLE",{class:!0});var m=E(y);U=p(m,"DIV",{class:!0});var h=E(U);j=p(h,"FIGURE",{class:!0});var v=E(j);M&&M.l(v),v.forEach(f),h.forEach(f),x=i(m),P=p(m,"DIV",{class:!0});var b=E(P);S=p(b,"DIV",{class:!0});var w=E(S);G&&G.l(w),w.forEach(f),V=i(b),T&&T.l(b),b.forEach(f),m.forEach(f),o.forEach(f),r.forEach(f),this.h()},h(){v(e,"class","button is-primary"),v(j,"class","image is-64x64"),v(U,"class","media-left"),v(S,"class","content"),v(P,"class","media-content"),v(y,"class","media"),v(A,"class","box"),v(s,"slot","preview")},m(r,i){c(r,s,i),w(s,e),w(e,n),w(s,l),w(s,t),w(s,u),w(s,d),w(s,g),w(s,A),w(A,y),w(y,U),w(U,j),M&&M.m(j,null),w(y,x),w(y,P),w(P,S),G&&G.m(S,null),w(P,V),T&&T.m(P,null),R=!0,B||(F=I(e,"click",a[2]),B=!0)},p(a,s){a[0]?M?(M.p(a,s),1&s&&o(M,1)):((M=L(a)).c(),o(M,1),M.m(j,null)):M&&(N(),m(M,1,1,()=>{M=null}),k()),a[0]?G?(G.p(a,s),1&s&&o(G,1)):((G=D(a)).c(),o(G,1),G.m(S,null)):G&&(N(),m(G,1,1,()=>{G=null}),k()),a[0]?T?1&s&&o(T,1):((T=z()).c(),o(T,1),T.m(P,null)):T&&(N(),m(T,1,1,()=>{T=null}),k())},i(a){R||(o(M),o(G),o(T),R=!0)},o(a){m(M),m(G),m(T),R=!1},d(a){a&&f(s),M&&M.d(),G&&G.d(),T&&T.d(),B=!1,F()}}}function S(a){let s,e;const d=new j({props:{title:"Media",subtitle:"Social media UI element"}}),h=new x({props:{horizontal:!0,code:'<script>\n import { onDestroy, onMount } from \'svelte\'\n import { fade } from \'svelte/transition\'\n\n let user\n\n const titleize = s => s.replace(/^([a-z])/, (_, r) => r.toUpperCase())\n\n async function updateUser() {\n user = null\n user = (await (await fetch(\'https://randomuser.me/api/\')).json()).results[0]\n }\n<\/script>\n\n<button class="button is-primary" on:click={updateUser}>Fetch New User</button>\n\n<br />\n<br />\n\n<div class="box">\n <article class="media">\n <div class="media-left">\n <figure class="image is-64x64">\n {#if user}\n <img transition:fade class="is-rounded" src={user.picture.medium} alt="Profile picture" />\n {/if}\n </figure>\n </div>\n <div class="media-content">\n <div class="content">\n {#if user}\n <p transition:fade>\n <strong>{titleize(user.name.first)} {titleize(user.name.last)}</strong>\n <small>@{user.login.username}</small>\n <small />\n <br />\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla\n egestas. Nullam condimentum luctus turpis.\n </p>\n {/if}\n </div>\n {#if user}\n <nav class="level is-mobile" transition:fade>\n <div class="level-left">\n <a href class="level-item" aria-label="reply">\n <span class="icon is-small">\n <i class="fas fa-reply" aria-hidden="true" />\n </span>\n </a>\n <a href class="level-item" aria-label="retweet">\n <span class="icon is-small">\n <i class="fas fa-retweet" aria-hidden="true" />\n </span>\n </a>\n <a href class="level-item" aria-label="like">\n <span class="icon is-small">\n <i class="fas fa-heart" aria-hidden="true" />\n </span>\n </a>\n </div>\n </nav>\n {/if}\n </div>\n </article>\n</div>',$$slots:{preview:[P]},$$scope:{ctx:a}}});return{c(){n(d.$$.fragment),s=r(),n(h.$$.fragment)},l(a){l(d.$$.fragment,a),s=i(a),l(h.$$.fragment,a)},m(a,n){t(d,a,n),c(a,s,n),t(h,a,n),e=!0},p(a,[s]){const e={};17&s&&(e.$$scope={dirty:s,ctx:a}),h.$set(e)},i(a){e||(o(d.$$.fragment,a),o(h.$$.fragment,a),e=!0)},o(a){m(d.$$.fragment,a),m(h.$$.fragment,a),e=!1},d(a){u(d,a),a&&f(s),u(h,a)}}}function V(a,s,e){let n;async function r(){e(0,n=null),e(0,n=(await(await fetch("https://randomuser.me/api/")).json()).results[0])}return d(()=>r()),[n,a=>a.replace(/^([a-z])/,(a,s)=>s.toUpperCase()),r]}export default class extends a{constructor(a){super(),s(this,a,V,S,e,{})}}
|
|
//# sourceMappingURL=media.2b2177b8.js.map
|