@flyo/nitro-vue3 2.2.1 → 2.3.0

package/README.md

@@ -182,30 +182,17 @@ Every composable returns the same reactive shape:
 
 ## Live-edit support
 
-When your site is embedded in the Flyo preview iframe, you can enable a full live-editing experience by passing `liveEdit: true` to the plugin options and using the `useFlyoLiveEdit` composable together with the `editable` helper.
+When your site is embedded in the Flyo preview iframe, you can enable a full live-editing experience by passing `liveEdit: true` to the plugin options. `FlyoPage` now initializes `useFlyoLiveEdit()` automatically in component setup, so users no longer need to call it manually in `App.vue` or a root layout.
 
 ### `useFlyoLiveEdit()`
 
-Call this composable **once** in your root layout or `App.vue`. It activates the bridge features from `@flyo/nitro-js-bridge` when `liveEdit` is enabled:
+This composable is automatically called by `FlyoPage` when `liveEdit` is enabled. It activates the bridge features from `@flyo/nitro-js-bridge`:
 
 - **`reload()`** — reloads the page when Flyo sends a `pageRefresh` message.
 - **`scrollTo()`** — scrolls to a specific block when Flyo sends a `scrollTo` message.
 - **`highlightAndClick()`** — adds hover highlight and click-to-edit on every element with a `data-flyo-uid` attribute. A `MutationObserver` automatically wires up elements that are added after the initial render.
 
-The composable is a no-op when `liveEdit` is `false`, so it is safe to include unconditionally.
-
-```vue
-<!-- App.vue or your root layout component -->
-<script setup>
-import { useFlyoLiveEdit } from '@flyo/nitro-vue3'
-
-useFlyoLiveEdit()
-</script>
-
-<template>
-  <router-view />
-</template>
-```
+The composable remains exported for advanced use-cases, and it is a no-op when `liveEdit` is `false`.
 
 ### `editable(block)`
 

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("@flyo/nitro-typescript"),o=require("vue");let ee=null;const de=({apiToken:t,apiBasePath:n,defaultHeaders:s})=>{ee=new x.Configuration({apiKey:t,...n&&{basePath:n},headers:s||{}})},M=()=>ee,ce={name:"FlyoBlock"},q=Object.assign(ce,{props:{item:{type:Object,default:()=>{}}},setup(t){return(n,s)=>(o.openBlock(),o.createBlock(o.resolveDynamicComponent(t.item.component),{block:t.item,config:t.item.config,content:t.item.content,items:t.item.items,slots:t.item.slots},null,8,["block","config","content","items","slots"]))}}),fe={name:"FlyoPage"},H=Object.assign(fe,{props:{page:{type:[Object,Boolean],default:!1}},setup(t){return(n,s)=>{const r=o.resolveComponent("FlyoBlock");return o.openBlock(),o.createElementBlock("div",null,[t.page?o.renderSlot(n.$slots,"default",o.normalizeProps(o.mergeProps({key:0},t.page)),()=>[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(t.page.json,e=>(o.openBlock(),o.createBlock(r,{key:e.uid,item:e},null,8,["item"]))),128))]):o.createCommentVNode("",!0)])}}}),d=o.reactive({isLoading:null,response:null,error:null}),ye=()=>{const t=async()=>{try{d.error=null,d.isLoading=!0,d.response=JSON.parse(JSON.stringify(await new x.ConfigApi(M()).config())),d.isLoading=!1}catch(n){d.isLoading=!1,d.response=null,d.error=JSON.parse(JSON.stringify(n))}return{response:d.response,error:d.error}};return{...o.toRefs(d),fetch:t}},pe=t=>{const n=o.ref(!1),s=o.ref(null),r=o.ref(null);return{isLoading:n,response:s,error:r,fetch:async()=>{try{r.value=null,n.value=!0,s.value=JSON.parse(JSON.stringify(await new x.EntitiesApi(M()).entityByUniqueid({uniqueid:t}))),n.value=!1}catch(l){n.value=!1,s.value=null,r.value=JSON.parse(JSON.stringify(l))}return{response:o.unref(s),error:o.unref(r)}}}};function J(){return typeof window>"u"?!1:window!==window.top}function me(){return typeof window>"u"?!1:J()?window.parent:window}function ve(t){var n=me();n&&n.postMessage({action:"openEdit",data:JSON.parse(JSON.stringify({item:{uid:t}}))},"https://flyo.cloud")}function he(){typeof window>"u"||J()&&window.addEventListener("message",t=>{var n;((n=t.data)==null?void 0:n.action)==="pageRefresh"&&window.location.reload()})}function ge(){typeof window>"u"||J()&&window.addEventListener("message",t=>{var n,s,r,e;if(((n=t.data)==null?void 0:n.action)==="scrollTo"){const l=(e=(r=(s=t.data)==null?void 0:s.data)==null?void 0:r.item)==null?void 0:e.uid;if(!l)return;const a=document.querySelector(`[data-flyo-uid="${CSS.escape(l)}"]`);a&&a.scrollIntoView({behavior:"smooth",block:"start"})}})}function we(t,n){const s=()=>ve(t);if(!J()||!n)return s;const r=n,e=document.createElement("button");e.type="button",e.setAttribute("aria-label","Edit block"),e.style.position="fixed",e.style.top="0px",e.style.left="0px",e.style.zIndex="9999",e.style.width="44px",e.style.height="44px",e.style.display="none",e.style.alignItems="center",e.style.justifyContent="center",e.style.border="0px solid #000",e.style.borderRadius="9999px",e.style.boxSizing="border-box",e.style.cursor="pointer",e.style.background="#FFD466",e.innerHTML='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#111"/><path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#111"/></svg>';const l=document.createElement("div");l.style.position="fixed",l.style.top="0px",l.style.left="0px",l.style.zIndex="9998",l.style.display="none",l.style.pointerEvents="none",l.style.background="transparent",l.style.border="none",e.addEventListener("click",s),document.body.appendChild(l),document.body.appendChild(e);const a=44,y=6,S=6,u=6,O=10,ne=180,N=()=>window.innerWidth||document.documentElement.clientWidth,F=()=>window.innerHeight||document.documentElement.clientHeight,oe=i=>!(i.bottom<0||i.right<0||i.top>F()||i.left>N()||i.width===0&&i.height===0),B=(i,f)=>i>=u&&f>=u&&i+a<=N()-u&&f+a<=F()-u,I=(i,f)=>({x:Math.max(u,Math.min(i,N()-a-u)),y:Math.max(u,Math.min(f,F()-a-u))});function A(){const i=r.getBoundingClientRect(),f=i.width<a||i.height<a,w=Math.round(i.left),E=Math.round(i.top)-a-S,j=Math.round(i.left)+y,P=Math.round(i.top)+y;let b,L;if(f&&B(w,E))b=w,L=E;else if(B(j,P))b=j,L=P;else if(B(w,E))b=w,L=E;else{const R=I(w,E),_=I(j,P),ae=Math.abs(R.x-i.left)+Math.abs(R.y-i.top),ue=Math.abs(_.x-i.left)+Math.abs(_.y-i.top);({x:b,y:L}=ae<=ue?R:_)}e.style.left=`${b}px`,e.style.top=`${L}px`;const Y=Math.max(u,Math.round(i.left)-O),Z=Math.max(u,Math.round(i.top)-O),ie=Math.min(N()-u,Math.round(i.right)+O),re=Math.min(F()-u,Math.round(i.bottom)+O);l.style.left=`${Y}px`,l.style.top=`${Z}px`,l.style.width=`${Math.max(0,ie-Y)}px`,l.style.height=`${Math.max(0,re-Z)}px`}let p=!1,m=!1,v=!1,C=!1,h=null;const k=()=>{h!==null&&(clearTimeout(h),h=null)},$=()=>{k();try{const i=r.getBoundingClientRect();if(!oe(i)){g(!0);return}A(),e.style.display="flex",l.style.display="block",le()}catch{g(!0)}},g=(i=!1)=>{if(i){k(),e.style.display="none",l.style.display="none",T();return}k(),h=window.setTimeout(()=>{!p&&!m&&!v&&(e.style.display="none",l.style.display="none",T()),h=null},ne)},z=()=>{e.style.display!=="none"&&A()},D=z;let c=null;const V=window.ResizeObserver,le=()=>{C||(C=!0,window.addEventListener("scroll",z,!0),window.addEventListener("resize",D),typeof V=="function"&&(c=new V(()=>{e.style.display!=="none"&&A()}),c==null||c.observe(r)))},T=()=>{if(C){C=!1,window.removeEventListener("scroll",z,!0),window.removeEventListener("resize",D);try{c==null||c.disconnect()}catch{}c=null}},U=()=>{p=!0,$()},W=()=>{p=!1,!m&&!v&&g()},K=()=>{m=!0,$()},G=()=>{m=!1,!p&&!v&&g()},Q=()=>{v=!0,$()},X=()=>{v=!1,!p&&!m&&g()};r.addEventListener("mouseenter",U),r.addEventListener("mouseleave",W),e.addEventListener("mouseenter",K),e.addEventListener("mouseleave",G),l.addEventListener("mouseenter",Q),l.addEventListener("mouseleave",X),e.addEventListener("click",s);function se(){k(),T(),e.removeEventListener("click",s),r.removeEventListener("mouseenter",U),r.removeEventListener("mouseleave",W),e.removeEventListener("mouseenter",K),e.removeEventListener("mouseleave",G),l.removeEventListener("mouseenter",Q),l.removeEventListener("mouseleave",X),e.parentElement===document.body&&document.body.removeChild(e),l.parentElement===document.body&&document.body.removeChild(l)}return se}const Ee=t=>typeof(t==null?void 0:t.uid)=="string"&&t.uid.trim()!==""?{"data-flyo-uid":t.uid}:{},be=()=>{const{liveEdit:t}=o.inject("flyo");if(!t)return;let n=null;const s=[],r=()=>{s.forEach(e=>e()),s.length=0,document.querySelectorAll("[data-flyo-uid]").forEach(e=>{const l=e.getAttribute("data-flyo-uid");if(l&&e instanceof HTMLElement){const a=we(l,e);typeof a=="function"&&s.push(a)}})};o.onMounted(()=>{he(),ge(),r(),n=new MutationObserver(e=>{e.some(a=>Array.from(a.addedNodes).some(y=>{if(y.nodeType===Node.ELEMENT_NODE){const S=y;return S.hasAttribute("data-flyo-uid")||S.querySelector("[data-flyo-uid]")}return!1}))&&r()}),n.observe(document.body,{childList:!0,subtree:!0})}),o.onUnmounted(()=>{n&&n.disconnect(),s.forEach(e=>e()),s.length=0})},Le=t=>{const n=o.ref(!1),s=o.ref(null),r=o.ref(null);return{isLoading:n,response:s,error:r,fetch:async()=>{try{r.value=null,n.value=!0,s.value=JSON.parse(JSON.stringify(await new x.PagesApi(M()).page({slug:t}))),n.value=!1}catch(l){n.value=!1,s.value=null,r.value=JSON.parse(JSON.stringify(l))}return{response:o.unref(s),error:o.unref(r)}}}},xe=()=>{const t=o.ref(!1),n=o.ref(null),s=o.ref(null);return{isLoading:t,response:n,error:s,fetch:async()=>{try{s.value=null,t.value=!0,n.value=JSON.parse(JSON.stringify(await new x.SitemapApi(M()).sitemap())),t.value=!1}catch(e){t.value=!1,n.value=null,s.value=JSON.parse(JSON.stringify(e))}return{response:o.unref(n),error:o.unref(s)}}}},te={install(t,n){de(n),t.component(q.name,q),t.component(H.name,H),t.provide("flyo",{liveEdit:n.liveEdit,liveEditOrigin:n.liveEditOrigin})}};exports.Block=q;exports.FlyoVue=te;exports.Page=H;exports.default=te;exports.editable=Ee;exports.getFlyoConfig=M;exports.useFlyoConfig=ye;exports.useFlyoEntity=pe;exports.useFlyoLiveEdit=be;exports.useFlyoPage=Le;exports.useFlyoSitemap=xe;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("@flyo/nitro-typescript"),o=require("vue");let le=null;const he=({apiToken:e,apiBasePath:n,defaultHeaders:l})=>{le=new x.Configuration({apiKey:e,...n&&{basePath:n},headers:l||{}})},M=()=>le,ge={name:"FlyoBlock"},I=Object.assign(ge,{props:{item:{type:Object,default:()=>{}}},setup(e){return(n,l)=>(o.openBlock(),o.createBlock(o.resolveDynamicComponent(e.item.component),{block:e.item,config:e.item.config,content:e.item.content,items:e.item.items,slots:e.item.slots},null,8,["block","config","content","items","slots"]))}});function B(){return typeof window>"u"?!1:window!==window.top}function we(){return typeof window>"u"?!1:B()?window.parent:window}function Ee(e){var n=we();n&&n.postMessage({action:"openEdit",data:JSON.parse(JSON.stringify({item:{uid:e}}))},"https://flyo.cloud")}function be(){typeof window>"u"||B()&&window.addEventListener("message",e=>{var n;((n=e.data)==null?void 0:n.action)==="pageRefresh"&&window.location.reload()})}function Le(){typeof window>"u"||B()&&window.addEventListener("message",e=>{var n,l,r,t;if(((n=e.data)==null?void 0:n.action)==="scrollTo"){const s=(t=(r=(l=e.data)==null?void 0:l.data)==null?void 0:r.item)==null?void 0:t.uid;if(!s)return;const u=document.querySelector(`[data-flyo-uid="${CSS.escape(s)}"]`);u&&u.scrollIntoView({behavior:"smooth",block:"start"})}})}function xe(e,n){const l=()=>Ee(e);if(!B()||!n)return l;const r=n,t=document.createElement("button");t.type="button",t.setAttribute("aria-label","Edit block"),t.style.position="fixed",t.style.top="0px",t.style.left="0px",t.style.zIndex="9999",t.style.width="44px",t.style.height="44px",t.style.display="none",t.style.alignItems="center",t.style.justifyContent="center",t.style.border="0px solid #000",t.style.borderRadius="9999px",t.style.boxSizing="border-box",t.style.cursor="pointer",t.style.background="#FFD466",t.innerHTML='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#111"/><path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#111"/></svg>';const s=document.createElement("div");s.style.position="fixed",s.style.top="0px",s.style.left="0px",s.style.zIndex="9998",s.style.display="none",s.style.pointerEvents="none",s.style.background="transparent",s.style.border="none",t.addEventListener("click",l),document.body.appendChild(s),document.body.appendChild(t);const u=44,V=6,ae=6,a=6,S=10,ue=180,O=()=>window.innerWidth||document.documentElement.clientWidth,N=()=>window.innerHeight||document.documentElement.clientHeight,de=i=>!(i.bottom<0||i.right<0||i.top>N()||i.left>O()||i.width===0&&i.height===0),z=(i,f)=>i>=a&&f>=a&&i+u<=O()-a&&f+u<=N()-a,U=(i,f)=>({x:Math.max(a,Math.min(i,O()-u-a)),y:Math.max(a,Math.min(f,N()-u-a))});function A(){const i=r.getBoundingClientRect(),f=i.width<u||i.height<u,g=Math.round(i.left),w=Math.round(i.top)-u-ae,P=Math.round(i.left)+V,R=Math.round(i.top)+V;let E,b;if(f&&z(g,w))E=g,b=w;else if(z(P,R))E=P,b=R;else if(z(g,w))E=g,b=w;else{const _=U(g,w),q=U(P,R),me=Math.abs(_.x-i.left)+Math.abs(_.y-i.top),ve=Math.abs(q.x-i.left)+Math.abs(q.y-i.top);({x:E,y:b}=me<=ve?_:q)}t.style.left=`${E}px`,t.style.top=`${b}px`;const te=Math.max(a,Math.round(i.left)-S),ne=Math.max(a,Math.round(i.top)-S),ye=Math.min(O()-a,Math.round(i.right)+S),pe=Math.min(N()-a,Math.round(i.bottom)+S);s.style.left=`${te}px`,s.style.top=`${ne}px`,s.style.width=`${Math.max(0,ye-te)}px`,s.style.height=`${Math.max(0,pe-ne)}px`}let y=!1,p=!1,m=!1,F=!1,v=null;const C=()=>{v!==null&&(clearTimeout(v),v=null)},$=()=>{C();try{const i=r.getBoundingClientRect();if(!de(i)){h(!0);return}A(),t.style.display="flex",s.style.display="block",ce()}catch{h(!0)}},h=(i=!1)=>{if(i){C(),t.style.display="none",s.style.display="none",j();return}C(),v=window.setTimeout(()=>{!y&&!p&&!m&&(t.style.display="none",s.style.display="none",j()),v=null},ue)},T=()=>{t.style.display!=="none"&&A()},W=T;let c=null;const K=window.ResizeObserver,ce=()=>{F||(F=!0,window.addEventListener("scroll",T,!0),window.addEventListener("resize",W),typeof K=="function"&&(c=new K(()=>{t.style.display!=="none"&&A()}),c==null||c.observe(r)))},j=()=>{if(F){F=!1,window.removeEventListener("scroll",T,!0),window.removeEventListener("resize",W);try{c==null||c.disconnect()}catch{}c=null}},G=()=>{y=!0,$()},Q=()=>{y=!1,!p&&!m&&h()},X=()=>{p=!0,$()},Y=()=>{p=!1,!y&&!m&&h()},Z=()=>{m=!0,$()},ee=()=>{m=!1,!y&&!p&&h()};r.addEventListener("mouseenter",G),r.addEventListener("mouseleave",Q),t.addEventListener("mouseenter",X),t.addEventListener("mouseleave",Y),s.addEventListener("mouseenter",Z),s.addEventListener("mouseleave",ee),t.addEventListener("click",l);function fe(){C(),j(),t.removeEventListener("click",l),r.removeEventListener("mouseenter",G),r.removeEventListener("mouseleave",Q),t.removeEventListener("mouseenter",X),t.removeEventListener("mouseleave",Y),s.removeEventListener("mouseenter",Z),s.removeEventListener("mouseleave",ee),t.parentElement===document.body&&document.body.removeChild(t),s.parentElement===document.body&&document.body.removeChild(s)}return fe}let L=null,k=0,J=!1;const H=[],ie=()=>{H.forEach(e=>e()),H.length=0},oe=()=>{ie(),document.querySelectorAll("[data-flyo-uid]").forEach(e=>{const n=e.getAttribute("data-flyo-uid");if(n&&e instanceof HTMLElement){const l=xe(n,e);typeof l=="function"&&H.push(l)}})},Me=()=>{J||(be(),Le(),oe(),L=new MutationObserver(e=>{e.some(l=>Array.from(l.addedNodes).some(r=>{if(r.nodeType!==Node.ELEMENT_NODE)return!1;const t=r;return t.hasAttribute("data-flyo-uid")||t.querySelector("[data-flyo-uid]")}))&&oe()}),L.observe(document.body,{childList:!0,subtree:!0}),J=!0)},Se=()=>{J&&(L&&(L.disconnect(),L=null),ie(),J=!1)},Oe=e=>typeof(e==null?void 0:e.uid)=="string"&&e.uid.trim()!==""?{"data-flyo-uid":e.uid}:{},se=()=>{const e=o.inject("flyo");e!=null&&e.liveEdit&&(o.onMounted(()=>{k+=1,Me()}),o.onUnmounted(()=>{k=Math.max(0,k-1),k===0&&Se()}))},Ne={name:"FlyoPage"},D=Object.assign(Ne,{props:{page:{type:[Object,Boolean],default:!1}},setup(e){return se(),(n,l)=>{const r=o.resolveComponent("FlyoBlock");return o.openBlock(),o.createElementBlock("div",null,[e.page?o.renderSlot(n.$slots,"default",o.normalizeProps(o.mergeProps({key:0},e.page)),()=>[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.page.json,t=>(o.openBlock(),o.createBlock(r,{key:t.uid,item:t},null,8,["item"]))),128))]):o.createCommentVNode("",!0)])}}}),d=o.reactive({isLoading:null,response:null,error:null}),Fe=()=>{const e=async()=>{try{d.error=null,d.isLoading=!0,d.response=JSON.parse(JSON.stringify(await new x.ConfigApi(M()).config())),d.isLoading=!1}catch(n){d.isLoading=!1,d.response=null,d.error=JSON.parse(JSON.stringify(n))}return{response:d.response,error:d.error}};return{...o.toRefs(d),fetch:e}},Ce=e=>{const n=o.ref(!1),l=o.ref(null),r=o.ref(null);return{isLoading:n,response:l,error:r,fetch:async()=>{try{r.value=null,n.value=!0,l.value=JSON.parse(JSON.stringify(await new x.EntitiesApi(M()).entityByUniqueid({uniqueid:e}))),n.value=!1}catch(s){n.value=!1,l.value=null,r.value=JSON.parse(JSON.stringify(s))}return{response:o.unref(l),error:o.unref(r)}}}},ke=e=>{const n=o.ref(!1),l=o.ref(null),r=o.ref(null);return{isLoading:n,response:l,error:r,fetch:async()=>{try{r.value=null,n.value=!0,l.value=JSON.parse(JSON.stringify(await new x.PagesApi(M()).page({slug:e}))),n.value=!1}catch(s){n.value=!1,l.value=null,r.value=JSON.parse(JSON.stringify(s))}return{response:o.unref(l),error:o.unref(r)}}}},Je=()=>{const e=o.ref(!1),n=o.ref(null),l=o.ref(null);return{isLoading:e,response:n,error:l,fetch:async()=>{try{l.value=null,e.value=!0,n.value=JSON.parse(JSON.stringify(await new x.SitemapApi(M()).sitemap())),e.value=!1}catch(t){e.value=!1,n.value=null,l.value=JSON.parse(JSON.stringify(t))}return{response:o.unref(n),error:o.unref(l)}}}},re={install(e,n){he(n),e.component(I.name,I),e.component(D.name,D),e.provide("flyo",{liveEdit:n.liveEdit,liveEditOrigin:n.liveEditOrigin})}};exports.Block=I;exports.FlyoVue=re;exports.Page=D;exports.default=re;exports.editable=Oe;exports.getFlyoConfig=M;exports.useFlyoConfig=Fe;exports.useFlyoEntity=Ce;exports.useFlyoLiveEdit=se;exports.useFlyoPage=ke;exports.useFlyoSitemap=Je;

package/dist/index.mjs

@@ -1,15 +1,15 @@
-import { Configuration as fe, ConfigApi as ye, EntitiesApi as me, PagesApi as pe, SitemapApi as ve } from "@flyo/nitro-typescript";
-import { openBlock as F, createBlock as ne, resolveDynamicComponent as he, resolveComponent as ge, createElementBlock as Z, renderSlot as we, normalizeProps as Ee, mergeProps as be, Fragment as Le, renderList as xe, createCommentVNode as Me, reactive as Se, toRefs as Oe, ref as d, unref as y, inject as Ne, onMounted as Ce, onUnmounted as Je } from "vue";
-let oe = null;
-const Fe = ({ apiToken: t, apiBasePath: n, defaultHeaders: l }) => {
-  oe = new fe({
-    apiKey: t,
+import { Configuration as ge, ConfigApi as we, EntitiesApi as Ee, PagesApi as be, SitemapApi as Le } from "@flyo/nitro-typescript";
+import { openBlock as F, createBlock as ie, resolveDynamicComponent as xe, inject as Me, onMounted as Se, onUnmounted as Oe, resolveComponent as Ne, createElementBlock as ne, renderSlot as Ce, normalizeProps as Je, mergeProps as Fe, Fragment as ke, renderList as Be, createCommentVNode as ze, reactive as Ae, toRefs as $e, ref as d, unref as y } from "vue";
+let re = null;
+const Re = ({ apiToken: e, apiBasePath: n, defaultHeaders: o }) => {
+  re = new ge({
+    apiKey: e,
     ...n && { basePath: n },
-    headers: l || {}
+    headers: o || {}
   });
-}, k = () => oe, ke = {
+}, B = () => re, je = {
   name: "FlyoBlock"
-}, ee = /* @__PURE__ */ Object.assign(ke, {
+}, oe = /* @__PURE__ */ Object.assign(je, {
   props: {
     item: {
       type: Object,
@@ -17,281 +17,283 @@ const Fe = ({ apiToken: t, apiBasePath: n, defaultHeaders: l }) => {
       }
     }
   },
-  setup(t) {
-    return (n, l) => (F(), ne(he(t.item.component), {
-      block: t.item,
-      config: t.item.config,
-      content: t.item.content,
-      items: t.item.items,
-      slots: t.item.slots
+  setup(e) {
+    return (n, o) => (F(), ie(xe(e.item.component), {
+      block: e.item,
+      config: e.item.config,
+      content: e.item.content,
+      items: e.item.items,
+      slots: e.item.slots
     }, null, 8, ["block", "config", "content", "items", "slots"]));
   }
-}), Ae = {
-  name: "FlyoPage"
-}, te = /* @__PURE__ */ Object.assign(Ae, {
-  props: {
-    page: {
-      type: [Object, Boolean],
-      default: !1
-    }
-  },
-  setup(t) {
-    return (n, l) => {
-      const i = ge("FlyoBlock");
-      return F(), Z("div", null, [
-        t.page ? we(n.$slots, "default", Ee(be({ key: 0 }, t.page)), () => [
-          (F(!0), Z(Le, null, xe(t.page.json, (e) => (F(), ne(i, {
-            key: e.uid,
-            item: e
-          }, null, 8, ["item"]))), 128))
-        ]) : Me("", !0)
-      ]);
-    };
-  }
-}), u = Se({
-  isLoading: null,
-  response: null,
-  error: null
-}), _e = () => {
-  const t = async () => {
-    try {
-      u.error = null, u.isLoading = !0, u.response = JSON.parse(JSON.stringify(await new ye(k()).config())), u.isLoading = !1;
-    } catch (n) {
-      u.isLoading = !1, u.response = null, u.error = JSON.parse(JSON.stringify(n));
-    }
-    return {
-      response: u.response,
-      error: u.error
-    };
-  };
-  return {
-    ...Oe(u),
-    fetch: t
-  };
-}, qe = (t) => {
-  const n = d(!1), l = d(null), i = d(null);
-  return {
-    isLoading: n,
-    response: l,
-    error: i,
-    fetch: async () => {
-      try {
-        i.value = null, n.value = !0, l.value = JSON.parse(JSON.stringify(await new me(k()).entityByUniqueid({ uniqueid: t }))), n.value = !1;
-      } catch (o) {
-        n.value = !1, l.value = null, i.value = JSON.parse(JSON.stringify(o));
-      }
-      return {
-        response: y(l),
-        error: y(i)
-      };
-    }
-  };
-};
-function A() {
+});
+function z() {
   return typeof window > "u" ? !1 : window !== window.top;
 }
-function Be() {
-  return typeof window > "u" ? !1 : A() ? window.parent : window;
+function Te() {
+  return typeof window > "u" ? !1 : z() ? window.parent : window;
 }
-function $e(t) {
-  var n = Be();
+function Ie(e) {
+  var n = Te();
   n && n.postMessage({
     action: "openEdit",
-    data: JSON.parse(JSON.stringify({ item: { uid: t } }))
+    data: JSON.parse(JSON.stringify({ item: { uid: e } }))
   }, "https://flyo.cloud");
 }
-function ze() {
-  typeof window > "u" || A() && window.addEventListener("message", (t) => {
+function Pe() {
+  typeof window > "u" || z() && window.addEventListener("message", (e) => {
     var n;
-    ((n = t.data) == null ? void 0 : n.action) === "pageRefresh" && window.location.reload();
+    ((n = e.data) == null ? void 0 : n.action) === "pageRefresh" && window.location.reload();
   });
 }
-function Re() {
-  typeof window > "u" || A() && window.addEventListener("message", (t) => {
-    var n, l, i, e;
-    if (((n = t.data) == null ? void 0 : n.action) === "scrollTo") {
-      const o = (e = (i = (l = t.data) == null ? void 0 : l.data) == null ? void 0 : i.item) == null ? void 0 : e.uid;
-      if (!o)
+function _e() {
+  typeof window > "u" || z() && window.addEventListener("message", (e) => {
+    var n, o, i, t;
+    if (((n = e.data) == null ? void 0 : n.action) === "scrollTo") {
+      const s = (t = (i = (o = e.data) == null ? void 0 : o.data) == null ? void 0 : i.item) == null ? void 0 : t.uid;
+      if (!s)
         return;
-      const r = document.querySelector(`[data-flyo-uid="${CSS.escape(o)}"]`);
-      r && r.scrollIntoView({ behavior: "smooth", block: "start" });
+      const a = document.querySelector(`[data-flyo-uid="${CSS.escape(s)}"]`);
+      a && a.scrollIntoView({ behavior: "smooth", block: "start" });
     }
   });
 }
-function je(t, n) {
-  const l = () => $e(t);
-  if (!A() || !n)
-    return l;
-  const i = n, e = document.createElement("button");
-  e.type = "button", e.setAttribute("aria-label", "Edit block"), e.style.position = "fixed", e.style.top = "0px", e.style.left = "0px", e.style.zIndex = "9999", e.style.width = "44px", e.style.height = "44px", e.style.display = "none", e.style.alignItems = "center", e.style.justifyContent = "center", e.style.border = "0px solid #000", e.style.borderRadius = "9999px", e.style.boxSizing = "border-box", e.style.cursor = "pointer", e.style.background = "#FFD466", e.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#111"/><path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#111"/></svg>';
-  const o = document.createElement("div");
-  o.style.position = "fixed", o.style.top = "0px", o.style.left = "0px", o.style.zIndex = "9998", o.style.display = "none", o.style.pointerEvents = "none", o.style.background = "transparent", o.style.border = "none", e.addEventListener("click", l), document.body.appendChild(o), document.body.appendChild(e);
-  const r = 44, m = 6, M = 6, a = 6, S = 10, le = 180, O = () => window.innerWidth || document.documentElement.clientWidth, N = () => window.innerHeight || document.documentElement.clientHeight, se = (s) => !(s.bottom < 0 || s.right < 0 || s.top > N() || s.left > O() || s.width === 0 && s.height === 0), B = (s, f) => s >= a && f >= a && s + r <= O() - a && f + r <= N() - a, H = (s, f) => ({
-    x: Math.max(a, Math.min(s, O() - r - a)),
-    y: Math.max(a, Math.min(f, N() - r - a))
+function qe(e, n) {
+  const o = () => Ie(e);
+  if (!z() || !n)
+    return o;
+  const i = n, t = document.createElement("button");
+  t.type = "button", t.setAttribute("aria-label", "Edit block"), t.style.position = "fixed", t.style.top = "0px", t.style.left = "0px", t.style.zIndex = "9999", t.style.width = "44px", t.style.height = "44px", t.style.display = "none", t.style.alignItems = "center", t.style.justifyContent = "center", t.style.border = "0px solid #000", t.style.borderRadius = "9999px", t.style.boxSizing = "border-box", t.style.cursor = "pointer", t.style.background = "#FFD466", t.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#111"/><path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#111"/></svg>';
+  const s = document.createElement("div");
+  s.style.position = "fixed", s.style.top = "0px", s.style.left = "0px", s.style.zIndex = "9998", s.style.display = "none", s.style.pointerEvents = "none", s.style.background = "transparent", s.style.border = "none", t.addEventListener("click", o), document.body.appendChild(s), document.body.appendChild(t);
+  const a = 44, D = 6, ue = 6, r = 6, M = 10, de = 180, S = () => window.innerWidth || document.documentElement.clientWidth, O = () => window.innerHeight || document.documentElement.clientHeight, ce = (l) => !(l.bottom < 0 || l.right < 0 || l.top > O() || l.left > S() || l.width === 0 && l.height === 0), A = (l, f) => l >= r && f >= r && l + a <= S() - r && f + a <= O() - r, U = (l, f) => ({
+    x: Math.max(r, Math.min(l, S() - a - r)),
+    y: Math.max(r, Math.min(f, O() - a - r))
   });
   function $() {
-    const s = i.getBoundingClientRect(), f = s.width < r || s.height < r, E = Math.round(s.left), b = Math.round(s.top) - r - M, T = Math.round(s.left) + m, P = Math.round(s.top) + m;
-    let L, x;
-    if (f && B(E, b))
-      L = E, x = b;
-    else if (B(T, P))
-      L = T, x = P;
-    else if (B(E, b))
-      L = E, x = b;
+    const l = i.getBoundingClientRect(), f = l.width < a || l.height < a, w = Math.round(l.left), E = Math.round(l.top) - a - ue, I = Math.round(l.left) + D, P = Math.round(l.top) + D;
+    let b, L;
+    if (f && A(w, E))
+      b = w, L = E;
+    else if (A(I, P))
+      b = I, L = P;
+    else if (A(w, E))
+      b = w, L = E;
     else {
-      const _ = H(E, b), q = H(T, P), de = Math.abs(_.x - s.left) + Math.abs(_.y - s.top), ce = Math.abs(q.x - s.left) + Math.abs(q.y - s.top);
-      ({ x: L, y: x } = de <= ce ? _ : q);
+      const _ = U(w, E), q = U(I, P), ve = Math.abs(_.x - l.left) + Math.abs(_.y - l.top), he = Math.abs(q.x - l.left) + Math.abs(q.y - l.top);
+      ({ x: b, y: L } = ve <= he ? _ : q);
     }
-    e.style.left = `${L}px`, e.style.top = `${x}px`;
-    const X = Math.max(a, Math.round(s.left) - S), Y = Math.max(a, Math.round(s.top) - S), ae = Math.min(O() - a, Math.round(s.right) + S), ue = Math.min(N() - a, Math.round(s.bottom) + S);
-    o.style.left = `${X}px`, o.style.top = `${Y}px`, o.style.width = `${Math.max(0, ae - X)}px`, o.style.height = `${Math.max(0, ue - Y)}px`;
+    t.style.left = `${b}px`, t.style.top = `${L}px`;
+    const ee = Math.max(r, Math.round(l.left) - M), te = Math.max(r, Math.round(l.top) - M), me = Math.min(S() - r, Math.round(l.right) + M), pe = Math.min(O() - r, Math.round(l.bottom) + M);
+    s.style.left = `${ee}px`, s.style.top = `${te}px`, s.style.width = `${Math.max(0, me - ee)}px`, s.style.height = `${Math.max(0, pe - te)}px`;
   }
-  let p = !1, v = !1, h = !1, C = !1, g = null;
-  const J = () => {
-    g !== null && (clearTimeout(g), g = null);
-  }, z = () => {
-    J();
+  let m = !1, p = !1, v = !1, N = !1, h = null;
+  const C = () => {
+    h !== null && (clearTimeout(h), h = null);
+  }, R = () => {
+    C();
     try {
-      const s = i.getBoundingClientRect();
-      if (!se(s)) {
-        w(!0);
+      const l = i.getBoundingClientRect();
+      if (!ce(l)) {
+        g(!0);
         return;
       }
-      $(), e.style.display = "flex", o.style.display = "block", ie();
+      $(), t.style.display = "flex", s.style.display = "block", fe();
     } catch {
-      w(!0);
+      g(!0);
     }
-  }, w = (s = !1) => {
-    if (s) {
-      J(), e.style.display = "none", o.style.display = "none", j();
+  }, g = (l = !1) => {
+    if (l) {
+      C(), t.style.display = "none", s.style.display = "none", T();
       return;
     }
-    J(), g = window.setTimeout(() => {
-      !p && !v && !h && (e.style.display = "none", o.style.display = "none", j()), g = null;
-    }, le);
-  }, R = () => {
-    e.style.display !== "none" && $();
-  }, I = R;
+    C(), h = window.setTimeout(() => {
+      !m && !p && !v && (t.style.display = "none", s.style.display = "none", T()), h = null;
+    }, de);
+  }, j = () => {
+    t.style.display !== "none" && $();
+  }, V = j;
   let c = null;
-  const D = window.ResizeObserver, ie = () => {
-    C || (C = !0, window.addEventListener("scroll", R, !0), window.addEventListener("resize", I), typeof D == "function" && (c = new D(() => {
-      e.style.display !== "none" && $();
+  const W = window.ResizeObserver, fe = () => {
+    N || (N = !0, window.addEventListener("scroll", j, !0), window.addEventListener("resize", V), typeof W == "function" && (c = new W(() => {
+      t.style.display !== "none" && $();
     }), c == null || c.observe(i)));
-  }, j = () => {
-    if (C) {
-      C = !1, window.removeEventListener("scroll", R, !0), window.removeEventListener("resize", I);
+  }, T = () => {
+    if (N) {
+      N = !1, window.removeEventListener("scroll", j, !0), window.removeEventListener("resize", V);
       try {
         c == null || c.disconnect();
       } catch {
       }
       c = null;
     }
-  }, U = () => {
-    p = !0, z();
-  }, V = () => {
-    p = !1, !v && !h && w();
-  }, W = () => {
-    v = !0, z();
   }, K = () => {
-    v = !1, !p && !h && w();
+    m = !0, R();
   }, G = () => {
-    h = !0, z();
+    m = !1, !p && !v && g();
   }, Q = () => {
-    h = !1, !p && !v && w();
+    p = !0, R();
+  }, X = () => {
+    p = !1, !m && !v && g();
+  }, Y = () => {
+    v = !0, R();
+  }, Z = () => {
+    v = !1, !m && !p && g();
   };
-  i.addEventListener("mouseenter", U), i.addEventListener("mouseleave", V), e.addEventListener("mouseenter", W), e.addEventListener("mouseleave", K), o.addEventListener("mouseenter", G), o.addEventListener("mouseleave", Q), e.addEventListener("click", l);
-  function re() {
-    J(), j(), e.removeEventListener("click", l), i.removeEventListener("mouseenter", U), i.removeEventListener("mouseleave", V), e.removeEventListener("mouseenter", W), e.removeEventListener("mouseleave", K), o.removeEventListener("mouseenter", G), o.removeEventListener("mouseleave", Q), e.parentElement === document.body && document.body.removeChild(e), o.parentElement === document.body && document.body.removeChild(o);
+  i.addEventListener("mouseenter", K), i.addEventListener("mouseleave", G), t.addEventListener("mouseenter", Q), t.addEventListener("mouseleave", X), s.addEventListener("mouseenter", Y), s.addEventListener("mouseleave", Z), t.addEventListener("click", o);
+  function ye() {
+    C(), T(), t.removeEventListener("click", o), i.removeEventListener("mouseenter", K), i.removeEventListener("mouseleave", G), t.removeEventListener("mouseenter", Q), t.removeEventListener("mouseleave", X), s.removeEventListener("mouseenter", Y), s.removeEventListener("mouseleave", Z), t.parentElement === document.body && document.body.removeChild(t), s.parentElement === document.body && document.body.removeChild(s);
   }
-  return re;
+  return ye;
 }
-const He = (t) => typeof (t == null ? void 0 : t.uid) == "string" && t.uid.trim() !== "" ? { "data-flyo-uid": t.uid } : {}, Ie = () => {
-  const { liveEdit: t } = Ne("flyo");
-  if (!t)
-    return;
-  let n = null;
-  const l = [], i = () => {
-    l.forEach((e) => e()), l.length = 0, document.querySelectorAll("[data-flyo-uid]").forEach((e) => {
-      const o = e.getAttribute("data-flyo-uid");
-      if (o && e instanceof HTMLElement) {
-        const r = je(o, e);
-        typeof r == "function" && l.push(r);
+let x = null, J = 0, k = !1;
+const H = [], ae = () => {
+  H.forEach((e) => e()), H.length = 0;
+}, le = () => {
+  ae(), document.querySelectorAll("[data-flyo-uid]").forEach((e) => {
+    const n = e.getAttribute("data-flyo-uid");
+    if (n && e instanceof HTMLElement) {
+      const o = qe(n, e);
+      typeof o == "function" && H.push(o);
+    }
+  });
+}, He = () => {
+  k || (Pe(), _e(), le(), x = new MutationObserver((e) => {
+    e.some(
+      (o) => Array.from(o.addedNodes).some((i) => {
+        if (i.nodeType !== Node.ELEMENT_NODE)
+          return !1;
+        const t = i;
+        return t.hasAttribute("data-flyo-uid") || t.querySelector("[data-flyo-uid]");
+      })
+    ) && le();
+  }), x.observe(document.body, {
+    childList: !0,
+    subtree: !0
+  }), k = !0);
+}, De = () => {
+  k && (x && (x.disconnect(), x = null), ae(), k = !1);
+}, Ge = (e) => typeof (e == null ? void 0 : e.uid) == "string" && e.uid.trim() !== "" ? { "data-flyo-uid": e.uid } : {}, Ue = () => {
+  const e = Me("flyo");
+  e != null && e.liveEdit && (Se(() => {
+    J += 1, He();
+  }), Oe(() => {
+    J = Math.max(0, J - 1), J === 0 && De();
+  }));
+}, Ve = {
+  name: "FlyoPage"
+}, se = /* @__PURE__ */ Object.assign(Ve, {
+  props: {
+    page: {
+      type: [Object, Boolean],
+      default: !1
+    }
+  },
+  setup(e) {
+    return Ue(), (n, o) => {
+      const i = Ne("FlyoBlock");
+      return F(), ne("div", null, [
+        e.page ? Ce(n.$slots, "default", Je(Fe({ key: 0 }, e.page)), () => [
+          (F(!0), ne(ke, null, Be(e.page.json, (t) => (F(), ie(i, {
+            key: t.uid,
+            item: t
+          }, null, 8, ["item"]))), 128))
+        ]) : ze("", !0)
+      ]);
+    };
+  }
+}), u = Ae({
+  isLoading: null,
+  response: null,
+  error: null
+}), Qe = () => {
+  const e = async () => {
+    try {
+      u.error = null, u.isLoading = !0, u.response = JSON.parse(JSON.stringify(await new we(B()).config())), u.isLoading = !1;
+    } catch (n) {
+      u.isLoading = !1, u.response = null, u.error = JSON.parse(JSON.stringify(n));
+    }
+    return {
+      response: u.response,
+      error: u.error
+    };
+  };
+  return {
+    ...$e(u),
+    fetch: e
+  };
+}, Xe = (e) => {
+  const n = d(!1), o = d(null), i = d(null);
+  return {
+    isLoading: n,
+    response: o,
+    error: i,
+    fetch: async () => {
+      try {
+        i.value = null, n.value = !0, o.value = JSON.parse(JSON.stringify(await new Ee(B()).entityByUniqueid({ uniqueid: e }))), n.value = !1;
+      } catch (s) {
+        n.value = !1, o.value = null, i.value = JSON.parse(JSON.stringify(s));
       }
-    });
+      return {
+        response: y(o),
+        error: y(i)
+      };
+    }
   };
-  Ce(() => {
-    ze(), Re(), i(), n = new MutationObserver((e) => {
-      e.some(
-        (r) => Array.from(r.addedNodes).some((m) => {
-          if (m.nodeType === Node.ELEMENT_NODE) {
-            const M = m;
-            return M.hasAttribute("data-flyo-uid") || M.querySelector("[data-flyo-uid]");
-          }
-          return !1;
-        })
-      ) && i();
-    }), n.observe(document.body, {
-      childList: !0,
-      subtree: !0
-    });
-  }), Je(() => {
-    n && n.disconnect(), l.forEach((e) => e()), l.length = 0;
-  });
-}, De = (t) => {
-  const n = d(!1), l = d(null), i = d(null);
+}, Ye = (e) => {
+  const n = d(!1), o = d(null), i = d(null);
   return {
     isLoading: n,
-    response: l,
+    response: o,
     error: i,
     fetch: async () => {
       try {
-        i.value = null, n.value = !0, l.value = JSON.parse(JSON.stringify(await new pe(k()).page({ slug: t }))), n.value = !1;
-      } catch (o) {
-        n.value = !1, l.value = null, i.value = JSON.parse(JSON.stringify(o));
+        i.value = null, n.value = !0, o.value = JSON.parse(JSON.stringify(await new be(B()).page({ slug: e }))), n.value = !1;
+      } catch (s) {
+        n.value = !1, o.value = null, i.value = JSON.parse(JSON.stringify(s));
       }
       return {
-        response: y(l),
+        response: y(o),
         error: y(i)
       };
     }
   };
-}, Ue = () => {
-  const t = d(!1), n = d(null), l = d(null);
+}, Ze = () => {
+  const e = d(!1), n = d(null), o = d(null);
   return {
-    isLoading: t,
+    isLoading: e,
     response: n,
-    error: l,
+    error: o,
     fetch: async () => {
       try {
-        l.value = null, t.value = !0, n.value = JSON.parse(JSON.stringify(await new ve(k()).sitemap())), t.value = !1;
-      } catch (e) {
-        t.value = !1, n.value = null, l.value = JSON.parse(JSON.stringify(e));
+        o.value = null, e.value = !0, n.value = JSON.parse(JSON.stringify(await new Le(B()).sitemap())), e.value = !1;
+      } catch (t) {
+        e.value = !1, n.value = null, o.value = JSON.parse(JSON.stringify(t));
       }
       return {
         response: y(n),
-        error: y(l)
+        error: y(o)
       };
     }
   };
-}, Ve = {
-  install(t, n) {
-    Fe(n), t.component(ee.name, ee), t.component(te.name, te), t.provide("flyo", {
+}, et = {
+  install(e, n) {
+    Re(n), e.component(oe.name, oe), e.component(se.name, se), e.provide("flyo", {
       liveEdit: n.liveEdit,
       liveEditOrigin: n.liveEditOrigin
     });
   }
 };
 export {
-  ee as Block,
-  Ve as FlyoVue,
-  te as Page,
-  Ve as default,
-  He as editable,
-  k as getFlyoConfig,
-  _e as useFlyoConfig,
-  qe as useFlyoEntity,
-  Ie as useFlyoLiveEdit,
-  De as useFlyoPage,
-  Ue as useFlyoSitemap
+  oe as Block,
+  et as FlyoVue,
+  se as Page,
+  et as default,
+  Ge as editable,
+  B as getFlyoConfig,
+  Qe as useFlyoConfig,
+  Xe as useFlyoEntity,
+  Ue as useFlyoLiveEdit,
+  Ye as useFlyoPage,
+  Ze as useFlyoSitemap
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyo/nitro-vue3",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Vue3 Components for Flyo Nitro",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",