1 line
1.7 KiB
JavaScript
1 line
1.7 KiB
JavaScript
import{S as e,T as t,ct as n,m as r,o as i,ot as a,p as o,r as s,s as c,st as l,u,w as d,z as f}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as p}from"./Icon-D1Ud4H_f.js";var m={class:`flex items-center gap-3 mb-4 flex-wrap`},h={role:`tablist`,"aria-label":`Preview viewport`,class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper ml-auto`},g=[`aria-selected`,`onClick`],_={class:`rounded-md border border-line bg-surface p-6 overflow-x-auto`},v=[`src`,`title`],y={class:`mt-2 text-center font-mono text-[11px] text-muted`},b={__name:`DevicePreview`,props:{src:{type:String,required:!0},initial:{type:String,default:`desktop`,validator:e=>[`mobile`,`tablet`,`desktop`].includes(e)},height:{type:Number,default:560}},setup(b){let x=b,S=[{id:`mobile`,label:`Mobile`,width:390},{id:`tablet`,label:`Tablet`,width:820},{id:`desktop`,label:`Desktop`,width:1280}],C=f(x.initial),w=i(()=>S.find(e=>e.id===C.value));return(i,f)=>(e(),u(`div`,null,[c(`div`,m,[t(i.$slots,`controls`),c(`div`,h,[(e(),u(s,null,d(S,e=>c(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":C.value===e.id,class:a([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,C.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>C.value=e.id},[r(p,{name:e.id,size:14},null,8,[`name`]),o(` `+n(e.label),1)],10,g)),64))])]),c(`div`,_,[c(`div`,{class:`mx-auto transition-[width] duration-base ease-out`,style:l({width:w.value.width+`px`})},[c(`iframe`,{src:b.src,title:`${w.value.label} preview`,style:l({height:b.height+`px`}),class:`w-full block rounded-sm border border-line bg-paper`,loading:`lazy`},null,12,v),c(`p`,y,n(w.value.width)+`px `,1)],4)])]))}};export{b as t}; |