UNPKG

@unocss/inspector

Version:

The inspector UI for UnoCSS

3 lines 1.48 kB
import{A as e,C as t,D as n,E as r,I as i,L as a,M as o,N as s,O as c,P as l,a as u,b as d,d as f,f as p,j as m,k as h,l as g,m as _,p as v,w as y,x as b,y as x}from"./index-DuJyx2-I.js";var S={"h-full":``,grid:`~ rows-[max-content_1fr]`,"of-hidden":``},C={"h-full":``,"of-hidden":``,grid:``,"grid-cols-2":``},w=h({__name:`ReplPlayground`,setup(h){let v=l(null),y=u(v,`repl-scrolls`),w=x(`unocss:inspector:repl`,`<div class="text-sm hover:text-red"> Hello World </div>`),T=d(`unocss-inspector-safelist`,!1),{data:E}=g(w,T);return(l,u)=>{let d=p,h=f,g=_;return e(),r(`div`,S,[t(`div`,{ref_key:`status`,ref:v},[c(d,null,{default:m(()=>[...u[2]||=[t(`div`,null,` REPL Playground `,-1),t(`div`,{op60:``},` Edit your code below to test and play UnoCSS's matching and generating. `,-1)]]),_:1}),c(h,{border:`b gray-400/20`,title:``},{default:m(()=>[t(`label`,null,[o(t(`input`,{"onUpdate:modelValue":u[0]||=e=>s(T)?T.value=e:null,type:`checkbox`},null,512),[[b,i(T)]]),u[3]||=n(` Include safelist `,-1)])]),_:1})],512),t(`div`,C,[c(g,{modelValue:i(w),"onUpdate:modelValue":u[1]||=e=>s(w)?w.value=e:null,mode:`html`,matched:i(E)?.matched||[],class:`scrolls repl-scrolls`,style:a(i(y))},null,8,[`modelValue`,`matched`,`style`]),c(g,{border:`l main`,"model-value":i(E)?.css||`/* empty */`,"read-only":!0,mode:`css`,class:`scrolls repl-scrolls`,style:a(i(y))},null,8,[`model-value`,`style`])])])}}}),T={};function E(t,n){let r=w;return e(),y(r)}var D=v(T,[[`render`,E]]);export{D as default};