2 lines
18 KiB
JavaScript
2 lines
18 KiB
JavaScript
import"../chunks/DsnmJJEf.js";import{p as tr,t as yt,g as x,a as i,b as rr,i as _,w as sr,f as p,l as c,s as t,d as s,j as h,c as v,$ as ar,r as a,n as o,x as or}from"../chunks/krC2xWPP.js";import{s as f}from"../chunks/CddAxf8c.js";import{i as dr}from"../chunks/DjsWWzyL.js";import{h as ir,s as te}from"../chunks/j_DJpx8B.js";import{B as n,s as lr,d as nr,t as u,r as $}from"../chunks/Lvd_r9sp.js";import{b as re,a as Pt}from"../chunks/ciapVzar.js";import{B as m}from"../chunks/CkCDfBZD.js";import{i as g}from"../chunks/Cu5ilWky.js";import{S as cr}from"../chunks/K87jKp17.js";import{C as wt}from"../chunks/DEuEFefA.js";import{X as kt}from"../chunks/CiIMiELt.js";import{T as zt}from"../chunks/zdwqcrP5.js";import{I as Tt}from"../chunks/dWUbZIEy.js";import{L as St}from"../chunks/C_E2vM9U.js";import{P as It}from"../chunks/C1jLV8_5.js";import{T as vr}from"../chunks/CSNyvbvN.js";import{S as ur}from"../chunks/cEkqvs1B.js";import{C as pr}from"../chunks/Cv606Ht4.js";import{S as Nt}from"../chunks/h5AuRbZl.js";var fr=v('<p class="mt-0.5 text-xs text-muted-foreground">Component playground and testing area</p>'),mr=v("<div><div><div><h1>UI Testing</h1> <!></div></div></div>"),xr=v("<!> Success",1),gr=v("<!> Error",1),br=v("<!> Warning",1),_r=v("<!> Info",1),hr=v("<!> Loading → Success",1),$r=v("<!> Add Page",1),yr=v("<!> Delete",1),Pr=v("<!> Edit",1),wr=v("<!> Duplicate",1),kr=v("<!> Settings",1),zr=v("<!> Saving...",1),Tr=v(`<div><!> <div class="space-y-8 px-6 pb-6"><section class="space-y-3"><h2 class="text-sm font-semibold text-foreground">Toast Notifications</h2> <div class="rounded-lg border border-border bg-card p-4"><div class="flex flex-wrap gap-2"><!> <!> <!> <!> <!> <!> <!> <!></div></div></section> <section class="space-y-3"><h2 class="text-sm font-semibold text-foreground">Buttons</h2> <div class="rounded-lg border border-border bg-card p-4 space-y-4"><div><p class="mb-2 text-xs text-muted-foreground">Variants</p> <div class="flex flex-wrap gap-2"><!> <!> <!> <!> <!> <!></div></div> <div><p class="mb-2 text-xs text-muted-foreground">Sizes</p> <div class="flex flex-wrap items-center gap-2"><!> <!> <!> <!></div></div> <div><p class="mb-2 text-xs text-muted-foreground">With Icons</p> <div class="flex flex-wrap gap-2"><!> <!> <!> <!> <!> <!></div></div></div></section> <section class="space-y-3"><h2 class="text-sm font-semibold text-foreground">Badges</h2> <div class="rounded-lg border border-border bg-card p-4"><div class="flex flex-wrap gap-2"><!> <!> <!> <!> <!> <!> <!> <!></div></div></section> <section class="space-y-3"><h2 class="text-sm font-semibold text-foreground">Form Elements</h2> <div class="rounded-lg border border-border bg-card p-4 space-y-4"><div class="grid gap-4 lg:grid-cols-2"><div class="space-y-1.5"><label for="test-text" class="text-[0.8125rem] font-medium text-foreground">Text Input</label> <input id="test-text" type="text" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"/> <p class="text-xs text-muted-foreground">Helper text goes here</p></div> <div class="space-y-1.5"><label for="test-select" class="text-[0.8125rem] font-medium text-foreground">Select</label> <select id="test-select" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"><option>Select an option...</option><option>Default</option><option>Blog</option><option>Item</option></select></div> <div class="space-y-1.5"><label class="text-[0.8125rem] font-medium text-foreground">Disabled Input</label> <input type="text" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" value="Can't edit this" disabled=""/></div> <div class="space-y-1.5"><label class="text-[0.8125rem] font-medium text-foreground">Error State</label> <input type="text" class="flex h-9 w-full rounded-md border border-red-500 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors ring-1 ring-red-500/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-red-500" value="Invalid value"/> <p class="text-xs text-red-500">This field has an error</p></div></div> <div class="space-y-1.5"><label for="test-textarea" class="text-[0.8125rem] font-medium text-foreground">Textarea</label> <textarea id="test-textarea" class="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" style="resize: vertical;"></textarea></div> <div class="grid gap-4 lg:grid-cols-3"><div class="space-y-3"><p class="text-xs font-medium text-muted-foreground">Switches</p> <label class="flex cursor-pointer items-center justify-between"><span class="text-sm text-foreground">Published</span> <input type="checkbox" class="switch"/></label> <label class="flex cursor-pointer items-center justify-between"><span class="text-sm text-foreground">Visible in nav</span> <input type="checkbox" class="switch" checked=""/></label> <label class="flex cursor-pointer items-center justify-between"><span class="text-sm text-muted-foreground">Disabled</span> <input type="checkbox" class="switch" disabled=""/></label></div> <div class="space-y-3"><p class="text-xs font-medium text-muted-foreground">Checkboxes</p> <label class="flex cursor-pointer items-center gap-2"><input type="checkbox" class="checkbox"/> <span class="text-sm text-foreground">Option A</span></label> <label class="flex cursor-pointer items-center gap-2"><input type="checkbox" class="checkbox" checked=""/> <span class="text-sm text-foreground">Option B</span></label> <label class="flex cursor-pointer items-center gap-2"><input type="checkbox" class="checkbox" disabled=""/> <span class="text-sm text-muted-foreground">Disabled</span></label></div> <div class="space-y-3"><p class="text-xs font-medium text-muted-foreground">Radio Buttons</p> <label class="flex cursor-pointer items-center gap-2"><input type="radio" class="radio" name="test-radio" value="a" checked=""/> <span class="text-sm text-foreground">Option A</span></label> <label class="flex cursor-pointer items-center gap-2"><input type="radio" class="radio" name="test-radio" value="b"/> <span class="text-sm text-foreground">Option B</span></label> <label class="flex cursor-pointer items-center gap-2"><input type="radio" class="radio" name="test-radio" value="c" disabled=""/> <span class="text-sm text-muted-foreground">Disabled</span></label></div></div> <div class="space-y-1.5"><label class="text-[0.8125rem] font-medium text-foreground"> </label> <input type="range" min="0" max="100" class="w-full accent-[hsl(var(--ring))]"/></div></div></section> <section class="space-y-3"><h2 class="text-sm font-semibold text-foreground">Cards</h2> <div class="grid gap-4 lg:grid-cols-3"><div class="rounded-lg border border-border bg-card p-4"><h3 class="text-sm font-semibold text-foreground">Basic Card</h3> <p class="mt-1 text-[0.8125rem] text-muted-foreground">A simple card with title and description content.</p></div> <div class="rounded-lg border border-border bg-card p-4"><div class="flex items-center justify-between"><h3 class="text-sm font-semibold text-foreground">With Actions</h3> <!></div> <p class="mt-1 text-[0.8125rem] text-muted-foreground">Card with header action button.</p> <div class="mt-3 flex gap-2"><!> <!></div></div> <div class="rounded-lg border border-border bg-card overflow-hidden"><div class="border-b border-border bg-muted/50 px-4 py-2"><h3 class="text-sm font-semibold text-foreground">With Header</h3></div> <div class="p-4"><p class="text-[0.8125rem] text-muted-foreground">Card with a distinct header section.</p></div></div></div></section> <section class="space-y-3"><h2 class="text-sm font-semibold text-foreground">Inline Alerts</h2> <div class="space-y-2"><div class="flex items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-700 dark:border-emerald-800/50 dark:bg-emerald-950/30 dark:text-emerald-300"><!> Page saved successfully</div> <div class="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-800/50 dark:bg-red-950/30 dark:text-red-300"><!> Failed to save page. Please check your connection.</div> <div class="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-300"><!> Your session will expire in 5 minutes</div> <div class="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 p-3 text-sm text-blue-700 dark:border-blue-800/50 dark:bg-blue-950/30 dark:text-blue-300"><!> A new version of Grav is available</div></div></section> <section class="space-y-3"><h2 class="text-sm font-semibold text-foreground">Typography</h2> <div class="rounded-lg border border-border bg-card p-4 space-y-2"><h1 class="text-2xl font-semibold tracking-tight text-foreground">Heading 1</h1> <h2 class="text-xl font-semibold tracking-tight text-foreground">Heading 2</h2> <h3 class="text-lg font-semibold text-foreground">Heading 3</h3> <h4 class="text-sm font-semibold text-foreground">Heading 4</h4> <p class="text-sm text-foreground">Body text — The quick brown fox jumps over the lazy dog.</p> <p class="text-sm text-muted-foreground">Muted text — Secondary information and descriptions.</p> <p class="text-xs text-muted-foreground">Small text — Timestamps, helper text, metadata.</p> <p class="font-mono text-xs text-muted-foreground">/routes/pages/edit/[...route]/+page.svelte</p></div></section> <section class="space-y-3"><h2 class="text-sm font-semibold text-foreground">Translation (i18n)</h2> <div class="rounded-lg border border-border bg-card p-4"><dl class="space-y-1.5 text-[0.8125rem]"><div class="flex justify-between"><dt class="text-muted-foreground">Language</dt> <dd class="font-medium text-foreground"> </dd></div> <div class="flex justify-between"><dt class="text-muted-foreground">Strings loaded</dt> <dd class="font-medium text-foreground"> </dd></div> <div class="flex justify-between"><dt class="text-muted-foreground">t('PLUGIN_ADMIN.TITLE')</dt> <dd class="font-medium text-foreground"> </dd></div> <div class="flex justify-between"><dt class="text-muted-foreground">t('PLUGIN_ADMIN.CONTENT')</dt> <dd class="font-medium text-foreground"> </dd></div> <div class="flex justify-between"><dt class="text-muted-foreground">t('PLUGIN_ADMIN.SAVE')</dt> <dd class="font-medium text-foreground"> </dd></div> <div class="flex justify-between"><dt class="text-muted-foreground">tMaybe('Plain Text')</dt> <dd class="font-medium text-foreground"> </dd></div> <div class="flex justify-between"><dt class="text-muted-foreground">tMaybe('UNKNOWN.KEY')</dt> <dd class="font-medium text-foreground"> </dd></div></dl></div></section></div></div>`);function qr(At,Dt){tr(Dt,!0);let se=_(""),ae=_(""),oe=_(!1),de=_(!1),ie=_(""),y=_(50);var P=Tr();ir("6vfrt7",e=>{sr(()=>{ar.title="Testing — Grav Admin"})});var le=s(P);cr(le,{children:(d,r)=>{let l=()=>r?.().scrolled;var b=mr(),Z=s(b),ht=s(Z),$t=s(ht),Qt=t($t,2);{var Zt=ee=>{var er=fr();i(ee,er)};dr(Qt,ee=>{l()||ee(Zt)})}a(ht),a(Z),a(b),yt(()=>{te(b,1,`px-6 transition-[padding] duration-200 ${l()?"py-2":"pt-6 pb-3"}`),te(Z,1,`flex items-center justify-between ${l()?"min-h-6":"min-h-8"}`),te($t,1,`font-semibold tracking-tight text-foreground transition-[font-size] duration-200 ${l()?"text-sm":"text-xl"}`)}),i(d,b)},$$slots:{default:!0}});var ne=t(le,2),w=s(ne),ce=t(s(w),2),ve=s(ce),ue=s(ve);n(ue,{variant:"outline",size:"sm",onclick:()=>u.success("Changes saved successfully"),children:(e,d)=>{var r=xr(),l=p(r);wt(l,{size:14}),o(),i(e,r)},$$slots:{default:!0}});var pe=t(ue,2);n(pe,{variant:"outline",size:"sm",onclick:()=>u.error("Something went wrong. Please try again."),children:(e,d)=>{var r=gr(),l=p(r);kt(l,{size:14}),o(),i(e,r)},$$slots:{default:!0}});var fe=t(pe,2);n(fe,{variant:"outline",size:"sm",onclick:()=>u.warning("Your session will expire in 5 minutes"),children:(e,d)=>{var r=br(),l=p(r);zt(l,{size:14}),o(),i(e,r)},$$slots:{default:!0}});var me=t(fe,2);n(me,{variant:"outline",size:"sm",onclick:()=>u.info("A new version of Grav is available"),children:(e,d)=>{var r=_r(),l=p(r);Tt(l,{size:14}),o(),i(e,r)},$$slots:{default:!0}});var xe=t(me,2);n(xe,{variant:"outline",size:"sm",onclick:()=>u("Plain message without icon"),children:(e,d)=>{o();var r=c("Default");i(e,r)},$$slots:{default:!0}});var ge=t(xe,2);n(ge,{variant:"outline",size:"sm",onclick:()=>{u.success("First toast"),setTimeout(()=>u.error("Second toast"),200),setTimeout(()=>u.info("Third toast"),400),setTimeout(()=>u.warning("Fourth toast"),600)},children:(e,d)=>{o();var r=c("Stack 4");i(e,r)},$$slots:{default:!0}});var be=t(ge,2);n(be,{variant:"outline",size:"sm",onclick:()=>{u.loading("Saving changes..."),setTimeout(()=>u.success("Changes saved!"),2e3)},children:(e,d)=>{var r=hr(),l=p(r);St(l,{size:14}),o(),i(e,r)},$$slots:{default:!0}});var Ct=t(be,2);n(Ct,{variant:"outline",size:"sm",onclick:()=>{u("Action completed",{description:"The page has been published and is now live.",action:{label:"Undo",onClick:()=>u.info("Undone!")}})},children:(e,d)=>{o();var r=c("With Action");i(e,r)},$$slots:{default:!0}}),a(ve),a(ce),a(w);var k=t(w,2),_e=t(s(k),2),z=s(_e),he=t(s(z),2),$e=s(he);n($e,{children:(e,d)=>{o();var r=c("Default");i(e,r)},$$slots:{default:!0}});var ye=t($e,2);n(ye,{variant:"secondary",children:(e,d)=>{o();var r=c("Secondary");i(e,r)},$$slots:{default:!0}});var Pe=t(ye,2);n(Pe,{variant:"destructive",children:(e,d)=>{o();var r=c("Destructive");i(e,r)},$$slots:{default:!0}});var we=t(Pe,2);n(we,{variant:"outline",children:(e,d)=>{o();var r=c("Outline");i(e,r)},$$slots:{default:!0}});var ke=t(we,2);n(ke,{variant:"ghost",children:(e,d)=>{o();var r=c("Ghost");i(e,r)},$$slots:{default:!0}});var jt=t(ke,2);n(jt,{variant:"link",children:(e,d)=>{o();var r=c("Link");i(e,r)},$$slots:{default:!0}}),a(he),a(z);var T=t(z,2),ze=t(s(T),2),Te=s(ze);n(Te,{size:"lg",children:(e,d)=>{o();var r=c("Large");i(e,r)},$$slots:{default:!0}});var Se=t(Te,2);n(Se,{children:(e,d)=>{o();var r=c("Default");i(e,r)},$$slots:{default:!0}});var Ie=t(Se,2);n(Ie,{size:"sm",children:(e,d)=>{o();var r=c("Small");i(e,r)},$$slots:{default:!0}});var Lt=t(Ie,2);n(Lt,{size:"icon",children:(e,d)=>{It(e,{size:16})},$$slots:{default:!0}}),a(ze),a(T);var Ne=t(T,2),Ae=t(s(Ne),2),De=s(Ae);n(De,{children:(e,d)=>{var r=$r(),l=p(r);It(l,{size:15}),o(),i(e,r)},$$slots:{default:!0}});var Ce=t(De,2);n(Ce,{variant:"destructive",children:(e,d)=>{var r=yr(),l=p(r);vr(l,{size:15}),o(),i(e,r)},$$slots:{default:!0}});var je=t(Ce,2);n(je,{variant:"outline",children:(e,d)=>{var r=Pr(),l=p(r);ur(l,{size:15}),o(),i(e,r)},$$slots:{default:!0}});var Le=t(je,2);n(Le,{variant:"outline",children:(e,d)=>{var r=wr(),l=p(r);pr(l,{size:15}),o(),i(e,r)},$$slots:{default:!0}});var Ee=t(Le,2);n(Ee,{variant:"secondary",children:(e,d)=>{var r=kr(),l=p(r);Nt(l,{size:15}),o(),i(e,r)},$$slots:{default:!0}});var Et=t(Ee,2);n(Et,{disabled:!0,children:(e,d)=>{var r=zr(),l=p(r);St(l,{size:15,class:"animate-spin"}),o(),i(e,r)},$$slots:{default:!0}}),a(Ae),a(Ne),a(_e),a(k);var S=t(k,2),Be=t(s(S),2),Me=s(Be),Ue=s(Me);m(Ue,{children:(e,d)=>{o();var r=c("Default");i(e,r)},$$slots:{default:!0}});var Ge=t(Ue,2);m(Ge,{variant:"secondary",children:(e,d)=>{o();var r=c("Secondary");i(e,r)},$$slots:{default:!0}});var Oe=t(Ge,2);m(Oe,{variant:"success",children:(e,d)=>{o();var r=c("Published");i(e,r)},$$slots:{default:!0}});var Ve=t(Oe,2);m(Ve,{variant:"destructive",children:(e,d)=>{o();var r=c("Error");i(e,r)},$$slots:{default:!0}});var He=t(Ve,2);m(He,{variant:"outline",children:(e,d)=>{o();var r=c("Outline");i(e,r)},$$slots:{default:!0}});var We=t(He,2);m(We,{variant:"outline",children:(e,d)=>{o();var r=c("default");i(e,r)},$$slots:{default:!0}});var Fe=t(We,2);m(Fe,{variant:"outline",children:(e,d)=>{o();var r=c("blog");i(e,r)},$$slots:{default:!0}});var Bt=t(Fe,2);m(Bt,{variant:"outline",children:(e,d)=>{o();var r=c("post");i(e,r)},$$slots:{default:!0}}),a(Me),a(Be),a(S);var I=t(S,2),Ke=t(s(I),2),N=s(Ke),A=s(N),Ye=t(s(A),2);$(Ye),o(2),a(A);var qe=t(A,2),D=t(s(qe),2),C=s(D);C.value=C.__value="";var j=t(C);j.value=j.__value="default";var L=t(j);L.value=L.__value="blog";var Re=t(L);Re.value=Re.__value="item",a(D),a(qe),o(4),a(N);var E=t(N,2),B=t(s(E),2);or(B),lr(B,"rows",3),a(E);var M=t(E,2),U=s(M),Xe=t(s(U),2),Je=t(s(Xe),2);$(Je),a(Xe),o(4),a(U);var Qe=t(U,2),Ze=t(s(Qe),2),et=s(Ze);$(et),o(2),a(Ze),o(4),a(Qe),o(2),a(M);var tt=t(M,2),G=s(tt),Mt=s(G);a(G);var rt=t(G,2);$(rt),a(tt),a(Ke),a(I);var O=t(I,2),st=t(s(O),2),at=t(s(st),2),V=s(at),Ut=t(s(V),2);n(Ut,{variant:"ghost",size:"icon",children:(e,d)=>{Nt(e,{size:14})},$$slots:{default:!0}}),a(V);var ot=t(V,4),dt=s(ot);n(dt,{variant:"outline",size:"sm",children:(e,d)=>{o();var r=c("Cancel");i(e,r)},$$slots:{default:!0}});var Gt=t(dt,2);n(Gt,{size:"sm",children:(e,d)=>{o();var r=c("Save");i(e,r)},$$slots:{default:!0}}),a(ot),a(at),o(2),a(st),a(O);var H=t(O,2),it=t(s(H),2),W=s(it),Ot=s(W);wt(Ot,{size:16}),o(),a(W);var F=t(W,2),Vt=s(F);kt(Vt,{size:16}),o(),a(F);var K=t(F,2),Ht=s(K);zt(Ht,{size:16}),o(),a(K);var lt=t(K,2),Wt=s(lt);Tt(Wt,{size:16}),o(),a(lt),a(it),a(H);var nt=t(H,4),ct=t(s(nt),2),vt=s(ct),Y=s(vt),ut=t(s(Y),2),Ft=s(ut,!0);a(ut),a(Y);var q=t(Y,2),pt=t(s(q),2),Kt=s(pt,!0);a(pt),a(q);var R=t(q,2),ft=t(s(R),2),Yt=s(ft,!0);a(ft),a(R);var X=t(R,2),mt=t(s(X),2),qt=s(mt,!0);a(mt),a(X);var J=t(X,2),xt=t(s(J),2),Rt=s(xt,!0);a(xt),a(J);var Q=t(J,2),gt=t(s(Q),2),Xt=s(gt,!0);a(gt),a(Q);var bt=t(Q,2),_t=t(s(bt),2),Jt=s(_t,!0);a(_t),a(bt),a(vt),a(ct),a(nt),a(ne),a(P),yt((e,d,r,l,b)=>{f(Mt,`Range: ${x(y)??""}%`),f(Ft,g.lang),f(Kt,g.count),f(Yt,e),f(qt,d),f(Rt,r),f(Xt,l),f(Jt,b)},[()=>g.t("PLUGIN_ADMIN.TITLE"),()=>g.t("PLUGIN_ADMIN.CONTENT"),()=>g.t("PLUGIN_ADMIN.SAVE"),()=>g.tMaybe("Plain Text"),()=>g.tMaybe("UNKNOWN.KEY")]),re(Ye,()=>x(se),e=>h(se,e)),nr(D,()=>x(ae),e=>h(ae,e)),re(B,()=>x(ie),e=>h(ie,e)),Pt(Je,()=>x(oe),e=>h(oe,e)),Pt(et,()=>x(de),e=>h(de,e)),re(rt,()=>x(y),e=>h(y,e)),i(At,P),rr()}export{qr as component};
|