https://quasar.dev/a/useElementSize.r.js

1import{t as e}from"./rolldown-runtime.js";import{H as t,T as n,Y as r,_ as i,ft as a,ht as o,st as s,v as c,x as l}from"./v.js";import{Fi as u,Rn as d,Si as f,Tt as p}from"./q.js";import{n as m}from"./AppFullscreen.r.js";var h={class:`q-pa-md`},g={class:`q-gutter-sm row items-center`},_=m({__name:`Basic`,setup(e){let m=r(`boxRef`),_=s(200),v=s(120),y=s(0),b=i(()=>({width:_.value+`px`,height:v.value+`px`})),{elementSize:x}=u({target:m,onResize(){y.value++}});function S(){v.value=Math.floor(80+Math.random()*120)}return(e,r)=>(t(),l(`div`,h,[n(f,{color:`primary`,push:``,label:`Random height`,onClick:S}),n(p,{color:`teal`,modelValue:_.value,"onUpdate:modelValue":r[0]||=e=>_.value=e,min:100,max:300,label:``},null,8,[`modelValue`]),c(`div`,{ref_key:`boxRef`,ref:m,style:o(b.value),class:`container bg-amber rounded-borders glossy q-my-md`},null,4),c(`div`,g,[r[1]||=c(`div`,null,`Measured:`,-1),n(d,{label:`width: ${a(x).width}`},null,8,[`label`]),n(d,{label:`height: ${a(x).height}`},null,8,[`label`]),n(d,{color:`secondary`,label:`reports: ${y.value}`},null,8,[`label`])])]))}},[[`__scopeId`,`data-v-36b3ae3c`]]),v=e({Basic:()=>_});export{v as t};