@lightspeed/crane 1.1.1 → 1.1.3

package/dist/app.d.mts

@@ -1,3 +1,4 @@
+import * as vue from 'vue';
 import { App, Ref, Component } from 'vue';
 
 interface AppBaseContext {
@@ -12,7 +13,7 @@ interface AppBaseData<C, D> {
     readonly content: C;
     readonly design: D;
     readonly defaults: Record<string, unknown>;
-    readonly externalContent: Record<string, unknown>;
+    readonly externalContent: ExternalContentData;
 }
 interface AppBaseState<C, D> {
     readonly context: AppBaseContext;
@@ -20,13 +21,13 @@ interface AppBaseState<C, D> {
 }
 
 interface VueBaseProps<CONTENT, DESIGN> {
-    init: (app: App<Element>, contextValue: AppBaseContext, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: Record<string, unknown>) => void;
-    update: (app: App<Element>, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: Record<string, unknown>) => void;
+    init: (app: App<Element>, contextValue: AppBaseContext, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: ExternalContentData) => void;
+    update: (app: App<Element>, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: ExternalContentData) => void;
     readonly context: Ref<AppBaseContext>;
     readonly content: Ref<CONTENT>;
     readonly design: Ref<DESIGN>;
     readonly defaults: Ref<Record<string, unknown>>;
-    readonly externalContent: Ref<Record<string, unknown>>;
+    readonly site: Ref<SiteContent>;
 }
 declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
 
@@ -50,17 +51,29 @@ declare function useTextareaElementContent<CONTENT>(elementName: string, externa
 
 interface ButtonContent {
     title: string;
-    link: string;
+    type: ActionLinkType;
+    link?: string;
+    email?: string;
+    phone?: string;
+    tileDivId?: string;
+    pageId?: string;
+    pageUrl?: string;
     hasTitle: boolean;
     hasLink: boolean;
     performAction: () => void;
 }
 declare function useButtonElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     title: string | undefined;
+    type: ActionLinkType | undefined;
     link: string | undefined;
+    email: string | undefined;
+    phone: string | undefined;
+    tileDivId: string | null;
+    pageId: string | undefined;
+    pageUrl: string | undefined;
     hasTitle: boolean;
     hasLink: boolean;
-    performAction: () => void;
+    performAction: (() => void) | undefined;
 };
 
 interface ImageContent {
@@ -96,6 +109,42 @@ declare function useSelectboxElementContent<CONTENT>(elementName: string, extern
     value: string | undefined;
 };
 
+declare function useMenuElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    items: {
+        performAction: (() => void) | undefined;
+        id: string;
+        title?: string | undefined;
+        type?: string | undefined;
+        link?: string | undefined;
+        email?: string | undefined;
+        phone?: string | undefined;
+        tileIdForScroll?: string | undefined;
+        pageIdForNavigate?: string | undefined;
+        showStoreCategories?: boolean | undefined;
+        isSubmenuOpened?: boolean | undefined;
+        categoryId?: number | undefined;
+    }[];
+};
+
+declare function useNavigationMenuElementContent<CONTENT>(): {
+    hasContent: boolean;
+    items: {
+        performAction: (() => void) | undefined;
+        id: string;
+        title?: string | undefined;
+        type?: string | undefined;
+        link?: string | undefined;
+        email?: string | undefined;
+        phone?: string | undefined;
+        tileIdForScroll?: string | undefined;
+        pageIdForNavigate?: string | undefined;
+        showStoreCategories?: boolean | undefined;
+        isSubmenuOpened?: boolean | undefined;
+        categoryId?: number | undefined;
+    }[];
+};
+
 interface Card {
     title: string;
     settings: Record<string, unknown>;
@@ -121,10 +170,16 @@ declare function getReactiveRef(card: Card | undefined, editorType: EditorTypes,
     value: string | undefined;
 } | {
     title: string | undefined;
+    type: ActionLinkType | undefined;
     link: string | undefined;
+    email: string | undefined;
+    phone: string | undefined;
+    tileDivId: string | null;
+    pageId: string | undefined;
+    pageUrl: string | undefined;
     hasTitle: boolean;
     hasLink: boolean;
-    performAction: () => void;
+    performAction: (() => void) | undefined;
 } | {
     hasContent: boolean;
     lowResolutionMobileImage: string;
@@ -136,6 +191,17 @@ declare function getReactiveRef(card: Card | undefined, editorType: EditorTypes,
     value: boolean | undefined;
 } | undefined;
 
+declare function useLogoElementContent<CONTENT>(): {
+    type: LogoType | undefined;
+    text: string | undefined;
+    image: {
+        lowResolutionMobileImage: string;
+        highResolutionMobileImage: string;
+        lowResolutionDesktopImage: string;
+        highResolutionDesktopImage: string;
+    };
+};
+
 declare function useTextElementDesign<DESIGN>(elementName: keyof DESIGN): {
     font: string | undefined;
     size: number | GlobalTextSizeString | undefined;
@@ -185,6 +251,8 @@ declare function useLayoutElementDesign(): {
     layout: string | undefined;
 };
 
+declare function useLogoElementDesign<DESIGN>(): vue.ComputedRef<LogoDesignData>;
+
 interface VueServerAppExtensions {
     init?: (app: App<Element>) => void;
     render?: <C, D>(app: App<Element>, context: AppBaseContext, data: AppBaseData<C, D>) => void;
@@ -278,4 +346,4 @@ interface InstantsiteJSAPI {
 
 declare function useInstantsiteJsApi(): InstantsiteJSAPI | undefined;
 
-export { type ButtonContent, type Card, type Deck, EditorTypes, type ImageContent, type InputBoxContent, type SelectBoxContent, type TextAreaContent, type ToggleContent, createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useDeckElementContent, useImageElementContent, useImageElementDesign, useInputboxElementContent, useInstantsiteJsApi, useLayoutElementDesign, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };
+export { type ButtonContent, type Card, type Deck, EditorTypes, type ImageContent, type InputBoxContent, type SelectBoxContent, type TextAreaContent, type ToggleContent, createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useDeckElementContent, useImageElementContent, useImageElementDesign, useInputboxElementContent, useInstantsiteJsApi, useLayoutElementDesign, useLogoElementContent, useLogoElementDesign, useMenuElementContent, useNavigationMenuElementContent, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };

package/dist/app.d.ts

@@ -1,3 +1,4 @@
+import * as vue from 'vue';
 import { App, Ref, Component } from 'vue';
 
 interface AppBaseContext {
@@ -12,7 +13,7 @@ interface AppBaseData<C, D> {
     readonly content: C;
     readonly design: D;
     readonly defaults: Record<string, unknown>;
-    readonly externalContent: Record<string, unknown>;
+    readonly externalContent: ExternalContentData;
 }
 interface AppBaseState<C, D> {
     readonly context: AppBaseContext;
@@ -20,13 +21,13 @@ interface AppBaseState<C, D> {
 }
 
 interface VueBaseProps<CONTENT, DESIGN> {
-    init: (app: App<Element>, contextValue: AppBaseContext, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: Record<string, unknown>) => void;
-    update: (app: App<Element>, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: Record<string, unknown>) => void;
+    init: (app: App<Element>, contextValue: AppBaseContext, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: ExternalContentData) => void;
+    update: (app: App<Element>, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: ExternalContentData) => void;
     readonly context: Ref<AppBaseContext>;
     readonly content: Ref<CONTENT>;
     readonly design: Ref<DESIGN>;
     readonly defaults: Ref<Record<string, unknown>>;
-    readonly externalContent: Ref<Record<string, unknown>>;
+    readonly site: Ref<SiteContent>;
 }
 declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
 
@@ -50,17 +51,29 @@ declare function useTextareaElementContent<CONTENT>(elementName: string, externa
 
 interface ButtonContent {
     title: string;
-    link: string;
+    type: ActionLinkType;
+    link?: string;
+    email?: string;
+    phone?: string;
+    tileDivId?: string;
+    pageId?: string;
+    pageUrl?: string;
     hasTitle: boolean;
     hasLink: boolean;
     performAction: () => void;
 }
 declare function useButtonElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     title: string | undefined;
+    type: ActionLinkType | undefined;
     link: string | undefined;
+    email: string | undefined;
+    phone: string | undefined;
+    tileDivId: string | null;
+    pageId: string | undefined;
+    pageUrl: string | undefined;
     hasTitle: boolean;
     hasLink: boolean;
-    performAction: () => void;
+    performAction: (() => void) | undefined;
 };
 
 interface ImageContent {
@@ -96,6 +109,42 @@ declare function useSelectboxElementContent<CONTENT>(elementName: string, extern
     value: string | undefined;
 };
 
+declare function useMenuElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    items: {
+        performAction: (() => void) | undefined;
+        id: string;
+        title?: string | undefined;
+        type?: string | undefined;
+        link?: string | undefined;
+        email?: string | undefined;
+        phone?: string | undefined;
+        tileIdForScroll?: string | undefined;
+        pageIdForNavigate?: string | undefined;
+        showStoreCategories?: boolean | undefined;
+        isSubmenuOpened?: boolean | undefined;
+        categoryId?: number | undefined;
+    }[];
+};
+
+declare function useNavigationMenuElementContent<CONTENT>(): {
+    hasContent: boolean;
+    items: {
+        performAction: (() => void) | undefined;
+        id: string;
+        title?: string | undefined;
+        type?: string | undefined;
+        link?: string | undefined;
+        email?: string | undefined;
+        phone?: string | undefined;
+        tileIdForScroll?: string | undefined;
+        pageIdForNavigate?: string | undefined;
+        showStoreCategories?: boolean | undefined;
+        isSubmenuOpened?: boolean | undefined;
+        categoryId?: number | undefined;
+    }[];
+};
+
 interface Card {
     title: string;
     settings: Record<string, unknown>;
@@ -121,10 +170,16 @@ declare function getReactiveRef(card: Card | undefined, editorType: EditorTypes,
     value: string | undefined;
 } | {
     title: string | undefined;
+    type: ActionLinkType | undefined;
     link: string | undefined;
+    email: string | undefined;
+    phone: string | undefined;
+    tileDivId: string | null;
+    pageId: string | undefined;
+    pageUrl: string | undefined;
     hasTitle: boolean;
     hasLink: boolean;
-    performAction: () => void;
+    performAction: (() => void) | undefined;
 } | {
     hasContent: boolean;
     lowResolutionMobileImage: string;
@@ -136,6 +191,17 @@ declare function getReactiveRef(card: Card | undefined, editorType: EditorTypes,
     value: boolean | undefined;
 } | undefined;
 
+declare function useLogoElementContent<CONTENT>(): {
+    type: LogoType | undefined;
+    text: string | undefined;
+    image: {
+        lowResolutionMobileImage: string;
+        highResolutionMobileImage: string;
+        lowResolutionDesktopImage: string;
+        highResolutionDesktopImage: string;
+    };
+};
+
 declare function useTextElementDesign<DESIGN>(elementName: keyof DESIGN): {
     font: string | undefined;
     size: number | GlobalTextSizeString | undefined;
@@ -185,6 +251,8 @@ declare function useLayoutElementDesign(): {
     layout: string | undefined;
 };
 
+declare function useLogoElementDesign<DESIGN>(): vue.ComputedRef<LogoDesignData>;
+
 interface VueServerAppExtensions {
     init?: (app: App<Element>) => void;
     render?: <C, D>(app: App<Element>, context: AppBaseContext, data: AppBaseData<C, D>) => void;
@@ -278,4 +346,4 @@ interface InstantsiteJSAPI {
 
 declare function useInstantsiteJsApi(): InstantsiteJSAPI | undefined;
 
-export { type ButtonContent, type Card, type Deck, EditorTypes, type ImageContent, type InputBoxContent, type SelectBoxContent, type TextAreaContent, type ToggleContent, createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useDeckElementContent, useImageElementContent, useImageElementDesign, useInputboxElementContent, useInstantsiteJsApi, useLayoutElementDesign, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };
+export { type ButtonContent, type Card, type Deck, EditorTypes, type ImageContent, type InputBoxContent, type SelectBoxContent, type TextAreaContent, type ToggleContent, createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useDeckElementContent, useImageElementContent, useImageElementDesign, useInputboxElementContent, useInstantsiteJsApi, useLayoutElementDesign, useLogoElementContent, useLogoElementDesign, useMenuElementContent, useNavigationMenuElementContent, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };

package/dist/app.mjs

@@ -1 +1 @@
-import{getCurrentInstance as z,ref as b,computed as r,reactive as f,createSSRApp as D}from"vue";import{renderToString as L}from"vue/server-renderer";const w=new Map;function v(){const n=(a,l,u,d,s,i)=>{w.set(a._uid,{context:b(l),content:b(u),design:b(d),defaults:b(s),externalContent:b(i)})},t=(a,l,u,d,s)=>{const i=w.get(a._uid);i!==void 0&&(i.content.value=l,i.design.value=u,i.defaults.value=d,i.externalContent.value=s)},e=z()?.appContext.app._uid??-1,o=w.get(e);return{init:n,update:t,context:o?.context,content:o?.content,design:o?.design,defaults:o?.defaults,externalContent:o?.externalContent}}function C(n,t){const e=v(),o=r(()=>t!==void 0?t:e.content.value);return $(o,n)}function $(n,t){const e=r(()=>{const l=n.value[t];if(l!==void 0){if(typeof l=="string")return l;throw new Error(`Element ${t} is not inputbox`)}}),o=r(()=>e.value!==void 0),a=r(()=>e.value);return f({hasContent:o,value:a})}function h(n,t){const e=v(),o=r(()=>t!==void 0?t:e.content.value);return B(o,n)}function B(n,t){const e=r(()=>{const l=n.value[t];if(l!==void 0){if(typeof l=="string")return l;throw new Error(`Element ${t} is not textarea`)}}),o=r(()=>e.value!==void 0),a=r(()=>e.value);return f({hasContent:o,value:a})}function R(n){return"title"in n&&"type"in n}function T(n,t){const e=v(),o=r(()=>t!==void 0?t:e.content.value);return S(o,n)}function S(n,t){const e=r(()=>{const s=n.value[t];if(s!==void 0){if(R(s))return s;throw new Error(`Element ${t} is not action link`)}}),o=r(()=>e.value?.title),a=r(()=>e.value?.link),l=r(()=>!!o.value),u=r(()=>!!a.value),d=s=>{if(s?.pageUrl)return s.pageUrl;switch(s?.pageId){case"products":return"/products";case"cart":return"/cart";case"account":return"/account";case"search":return"/search";case"home":default:return"/"}};return f({title:o,link:a,hasTitle:l,hasLink:u,performAction:()=>{if(e.value!==void 0)switch(e.value.type){case"HYPER_LINK":e.value.link&&window.open(e.value.link,"_blank");break;case"GO_TO_STORE_LINK":window.open("/products");break;case"GO_TO_PAGE":window.open(d(e.value));break;case"MAIL_LINK":e.value.email&&window.open(`mailto:${e.value.email}`,"_self");break;case"TEL_LINK":e.value.phone&&window.open(`tel:${e.value.phone}`,"_self");break;case"SCROLL_TO_TILE":{if(typeof document>"u")return;const s=e.value.tileId;document.getElementById(`tile-${s}`)?.scrollIntoView();break}default:throw new Error(`Unknown ButtonType: ${e.value.type}`)}}})}function G(n){return"bucket"in n&&"borderInfo"in n&&"set"in n}function m(n,t){const e=new RegExp(/^https?:\/\//);return n!=null&&e.test(n)?n:`${t}/${n}`}function x(n,t){const e=v(),o=r(()=>t!==void 0?t:e.content.value);return N(o,n)}function N(n,t){const e=r(()=>{const i=n.value[t];if(i!==void 0){if(G(i))return i;throw new Error(`Element ${t} is not image`)}}),o=r(()=>e.value===void 0?"":v().context.value.imageBuckets?.[e.value?.bucket]),a=r(()=>e.value!==void 0),l=r(()=>m(e.value?.set?.["cropped-webp-100x200"]?.url,o.value)),u=r(()=>m(e.value?.set?.["cropped-webp-1000x2000"]?.url,o.value)),d=r(()=>m(e.value?.set?.["webp-200x200"]?.url,o.value)),s=r(()=>m(e.value?.set?.["webp-2000x2000"]?.url,o.value));return f({hasContent:a,lowResolutionMobileImage:l,highResolutionMobileImage:u,lowResolutionDesktopImage:d,highResolutionDesktopImage:s})}function U(n){return"enabled"in n}function k(n,t){const e=v(),o=r(()=>t!==void 0?t:e.content.value);return X(o,n)}function X(n,t){const e=r(()=>{const l=n.value[t];if(l!==void 0){if(U(l))return l;throw new Error(`Element ${t} is not toggle`)}}),o=r(()=>e.value!==void 0),a=r(()=>e.value?.enabled);return f({hasContent:o,value:a})}function I(n,t){const e=v(),o=r(()=>t!==void 0?t:e.content.value);return M(o,n)}function M(n,t){const e=r(()=>{const l=n.value[t];if(l!==void 0){if(typeof l=="string")return l;throw new Error(`Element ${t} is not selectbox`)}}),o=r(()=>e.value!==void 0),a=r(()=>e.value);return f({hasContent:o,value:a})}var A=(n=>(n.INPUTBOX="INPUTBOX",n.TEXTAREA="TEXTAREA",n.BUTTON="BUTTON",n.IMAGE="IMAGE",n.TOGGLE="TOGGLE",n.SELECTBOX="SELECTBOX",n))(A||{});function P(n){if(typeof n!="object"||n===null)return!1;const t=n;return Array.isArray(t.cards)&&t.cards.every(e=>typeof e.settings=="object"&&e.settings!==null)}function K(n){const t=v(),e=r(()=>{const l=t.content.value[n];if(l!==void 0){if(P(l))return l;throw new Error(`Element ${n} is not of DECK type`)}}),o=r(()=>e.value!==void 0&&e.value.cards.length>0),a=r(()=>e.value?.cards);return f({hasContent:o,cards:a,getReactiveRef:V})}function V(n,t,e){if(n==null)throw Error("Could not get a reactive ref for undefined Card");const o=n.settings[e];if(o===void 0)return o;switch(t){case"TEXTAREA":return h(e,n.settings);case"INPUTBOX":return C(e,n.settings);case"SELECTBOX":return I(e,n.settings);case"IMAGE":return x(e,n.settings);case"TOGGLE":return k(e,n.settings);case"BUTTON":return T(e,n.settings);default:return}}function y(n,t){if(t===void 0)return;if(!t.startsWith("global."))return t;const e=t.split(".").at(2);if(e!==void 0)return n.fontFamily[e]}function O(n,t){if(t===void 0)return;if(typeof t!="string"||!t.startsWith("global."))return t;const e=t.split(".").at(2);if(e!==void 0)return n.textSize[e]}function p(n,t){if(t===void 0)return;if(typeof t!="string"||!t.startsWith("global."))return t;const e=t.split(".").at(2);if(e!==void 0)return n.color[e]}function W(n){const t=v(),e=r(()=>{const i=t.design.value[n],c=t.defaults.value[n],g=t.context.value.globalDesign;return{font:i?.font?.replaceAll("_"," ")??y(g,c?.font),size:i?.size??O(g,c?.size),bold:i?.bold??c?.bold,italic:i?.italic??c?.italic,color:i?.color??p(g,c?.color),visible:i?.visible??c?.visible??!1}}),o=r(()=>e.value?.font),a=r(()=>e.value?.size),l=r(()=>e.value?.bold),u=r(()=>e.value?.italic),d=r(()=>e.value?.color),s=r(()=>e.value?.visible);return f({font:o,size:a,bold:l,italic:u,color:d,visible:s})}function j(n){const t=v(),e=r(()=>{const c=t.design.value[n],g=t.defaults.value[n],E=t.context.value.globalDesign;return{font:c?.font?.replaceAll("_"," ")??y(E,g?.font),size:c?.size??O(E,g?.size),bold:c?.bold??g?.bold,italic:c?.italic??g?.italic,color:c?.color??p(E,g?.color),visible:c?.visible??g?.visible??!1,whiteSpace:"pre-wrap"}}),o=r(()=>e.value?.font),a=r(()=>e.value?.size),l=r(()=>e.value?.bold),u=r(()=>e.value?.italic),d=r(()=>e.value?.color),s=r(()=>e.value?.visible),i=r(()=>e.value?.whiteSpace);return f({font:o,size:a,bold:l,italic:u,color:d,visible:s,whiteSpace:i})}function F(n){const t=v(),e=r(()=>{const i=t.design.value[n],c=t.defaults.value[n],g=t.context.value.globalDesign;return{appearance:i?.appearance??c?.appearance,font:i?.font??y(g,c?.font),size:i?.size??c?.size,style:i?.style??c?.style,color:i?.color??p(g,c?.color),visible:i?.visible??c?.visible??!1}}),o=r(()=>e.value?.appearance),a=r(()=>e.value?.font),l=r(()=>e.value?.size),u=r(()=>e.value?.style),d=r(()=>e.value?.color),s=r(()=>e.value?.visible);return f({appearance:o,font:a,size:l,style:u,color:d,visible:s})}function H(n){const t=v(),e=r(()=>{const l=t.design.value[n],u=t.defaults.value[n],d=t.context.value.globalDesign;return{overlay:{type:l?.overlay?.type??u?.overlay?.type,solid:{color:l?.overlay?.solid?.color??p(d,u?.overlay?.solid?.color)},gradient:{fromColor:l?.overlay?.gradient?.fromColor??p(d,u?.overlay?.gradient?.fromColor),toColor:l?.overlay?.gradient?.toColor??p(d,u?.overlay?.gradient?.toColor)}},visible:l?.visible??u?.visible??!1}}),o=r(()=>e.value?.overlay),a=r(()=>e.value?.visible);return f({overlay:o,visible:a})}function J(n){const t=v(),e=r(()=>{const a=t.design.value[n],l=t.defaults.value[n];return{enabled:a?.enabled??l?.enabled}}),o=r(()=>e.value?.enabled);return f({enabled:o})}function Y(n){const t=v(),e=r(()=>{const a=t.design.value[n],l=t.defaults.value[n];return{value:a?.value??l?.value}}),o=r(()=>e.value?.value);return f({value:o})}function q(n){const t=v(),e=r(()=>{const a=t.design.value[n],l=t.defaults.value[n],u=t.context.value.globalDesign;return{background:{type:a?.background?.type??l?.background?.type,solid:{color:a?.background?.solid?.color??p(u,l?.background?.solid?.color)},gradient:{fromColor:a?.background?.gradient?.fromColor??p(u,l?.background?.gradient?.fromColor),toColor:a?.background?.gradient?.toColor??p(u,l?.background?.gradient?.toColor)}}}}),o=r(()=>e.value?.background);return f({background:o})}function Q(){const n=v(),t=r(()=>n.design.value.layout),e=r(()=>t.value);return f({layout:e})}function _(n){return{app:D(n)}}function Z(n,t){return{init:()=>{const{app:e}=_(n);return t?.init?.(e),{render:async(o,a)=>(v().init(e,o,a.content,a.design,a.defaults,a.externalContent),t?.render?.(e,o,a),{html:await L(e,{context:o}),state:{context:o,data:a}})}}}}function ee(n,t){return{init:()=>{const{app:e}=_(n);return t?.init?.(e),{mount:(o,a)=>{v().init(e,a.context,a.data.content,a.data.design,a.data.defaults,a.data.externalContent),t?.mount?.(e,o,a),e.mount(o)},update:o=>{v().update(e,o.data.content,o.data.design,o.data.defaults,o.data.externalContent),t?.update?.(e,o)},unmount:()=>{t?.unmount?.(e),e.unmount()}}}}}function te(){return globalThis.window.instantsite}export{A as EditorTypes,ee as createVueClientApp,Z as createVueServerApp,q as useBackgroundElementDesign,T as useButtonElementContent,F as useButtonElementDesign,K as useDeckElementContent,x as useImageElementContent,H as useImageElementDesign,C as useInputboxElementContent,te as useInstantsiteJsApi,Q as useLayoutElementDesign,I as useSelectboxElementContent,Y as useSelectboxElementDesign,W as useTextElementDesign,h as useTextareaElementContent,j as useTextareaElementDesign,k as useToggleElementContent,J as useToggleElementDesign,v as useVueBaseProps};
+import{getCurrentInstance as N,ref as E,computed as i,reactive as d,createSSRApp as B}from"vue";import{renderToString as M}from"vue/server-renderer";const y=new Map;function s(){const e=(r,l,a,v,g,u)=>{y.set(r._uid,{context:E(l),content:E(a),design:E(v),defaults:E(g),site:E(u?.site??{})})},n=(r,l,a,v,g)=>{const u=y.get(r._uid);u!==void 0&&(u.content.value=l,u.design.value=a,u.defaults.value=v,u.site.value=g.site??{})},t=N()?.appContext.app._uid??-1,o=y.get(t);return{init:e,update:n,context:o?.context,content:o?.content,design:o?.design,defaults:o?.defaults,site:o?.site}}function O(e,n){const t=s(),o=i(()=>n!==void 0?n:t.content.value);return K(o,e)}function K(e,n){const t=i(()=>{const l=e.value[n];if(l!==void 0){if(typeof l=="string")return l;throw new Error(`Element ${n} is not inputbox`)}}),o=i(()=>t.value!==void 0),r=i(()=>t.value);return d({hasContent:o,value:r})}function C(e,n){const t=s(),o=i(()=>n!==void 0?n:t.content.value);return P(o,e)}function P(e,n){const t=i(()=>{const l=e.value[n];if(l!==void 0){if(typeof l=="string")return l;throw new Error(`Element ${n} is not textarea`)}}),o=i(()=>t.value!==void 0),r=i(()=>t.value);return d({hasContent:o,value:r})}const b={HYPER_LINK:"HYPER_LINK",SCROLL_TO_TILE:"SCROLL_TO_TILE",MAIL_LINK:"MAIL_LINK",TEL_LINK:"TEL_LINK",GO_TO_STORE:"GO_TO_STORE",GO_TO_STORE_LINK:"GO_TO_STORE_LINK",GO_TO_PAGE:"GO_TO_PAGE"};function U(e){if("tileId"in e)return e.tileId;if("tileIdForScroll"in e)return e.tileIdForScroll}function X(e){if("pageId"in e)return e.pageId;if("pageIdForNavigate"in e)return e.pageIdForNavigate}function F(e){if("pageUrl"in e)return e.pageUrl;switch(X(e)){case"products":return"/products";case"cart":return"/cart";case"account":return"/account";case"search":return"/search";case"home":default:return"/"}}const x=(e,n)=>{if(!e||n)return;const{type:t,link:o,email:r,phone:l}=e,a=F(e);switch(t){case b.HYPER_LINK:if(o)return()=>window.open(o,"_blank");break;case b.GO_TO_STORE:case b.GO_TO_STORE_LINK:return()=>window.open("/products","_self");case b.MAIL_LINK:if(r)return()=>window.open(`mailto:${r}`,"_self");break;case b.TEL_LINK:if(l)return()=>window.open(`tel:${l}`,"_self");break;case b.SCROLL_TO_TILE:if(typeof document<"u")return()=>{const v=U(e);document.getElementById(`tile-${v}`)?.scrollIntoView()};break;case b.GO_TO_PAGE:if(a)return()=>window.open(a,"_self");break;default:console.error(`Unknown type of ActionLink: ${t}`)}};function V(e){return"title"in e&&"type"in e}function H(e,n,t){const o=i(()=>{const _=e.value[n];if(_!==void 0){if(V(_))return _;throw new Error(`Element ${n} is not action link`)}}),r=i(()=>o.value?.title),l=i(()=>o.value?.type),a=i(()=>o.value?.link),v=i(()=>o.value?.email),g=i(()=>o.value?.phone),u=i(()=>o.value?.tileId?`tile-${o.value?.tileId}`:null),c=i(()=>o.value?.type==="GO_TO_STORE_LINK"?"products":o.value?.pageId),f=i(()=>o.value?.pageUrl),m=i(()=>!!r.value),$=i(()=>!!a.value),D=x(o.value,t);return d({title:r,type:l,link:a,email:v,phone:g,tileDivId:u,pageId:c,pageUrl:f,hasTitle:m,hasLink:$,performAction:D})}function L(e,n){const t=s(),o=i(()=>!!t.site?.value?.isPreviewMode),r=i(()=>n!==void 0?n:t.content.value!==void 0?t.content.value:{});return H(r,e,o.value)}function W(e){return"bucket"in e&&"borderInfo"in e&&"set"in e}function w(e,n){const t=new RegExp(/^https?:\/\//);return e!=null&&t.test(e)?e:`${n}/${e}`}function k(e,n){const t=s(),o=i(()=>n!==void 0?n:t.content.value);return Y(o,e)}function Y(e,n){const t=i(()=>{const u=e.value[n];if(u!==void 0){if(W(u))return u;throw new Error(`Element ${n} is not image`)}}),o=i(()=>t.value===void 0?"":s().context.value.imageBuckets?.[t.value?.bucket]),r=i(()=>t.value!==void 0),l=i(()=>w(t.value?.set?.["cropped-webp-100x200"]?.url,o.value)),a=i(()=>w(t.value?.set?.["cropped-webp-1000x2000"]?.url,o.value)),v=i(()=>w(t.value?.set?.["webp-200x200"]?.url,o.value)),g=i(()=>w(t.value?.set?.["webp-2000x2000"]?.url,o.value));return d({hasContent:r,lowResolutionMobileImage:l,highResolutionMobileImage:a,lowResolutionDesktopImage:v,highResolutionDesktopImage:g})}function j(e){return"enabled"in e}function R(e,n){const t=s(),o=i(()=>n!==void 0?n:t.content.value);return J(o,e)}function J(e,n){const t=i(()=>{const l=e.value[n];if(l!==void 0){if(j(l))return l;throw new Error(`Element ${n} is not toggle`)}}),o=i(()=>t.value!==void 0),r=i(()=>t.value?.enabled);return d({hasContent:o,value:r})}function A(e,n){const t=s(),o=i(()=>n!==void 0?n:t.content.value);return q(o,e)}function q(e,n){const t=i(()=>{const l=e.value[n];if(l!==void 0){if(typeof l=="string")return l;throw new Error(`Element ${n} is not selectbox`)}}),o=i(()=>t.value!==void 0),r=i(()=>t.value);return d({hasContent:o,value:r})}function Q(e){return e!==null&&"items"in e}function G(e){const n=s(),t=i(()=>{const a=n.content.value[e];if(a!==void 0){if(Q(a))return a;throw new Error(`Element ${e} is not an menu`)}}),o=i(()=>!!n.site?.value?.isPreviewMode),r=i(()=>t.value!==void 0),l=i(()=>t.value?.items?t.value.items.map(a=>({...a,performAction:x(a,o.value)})):[]);return d({hasContent:r,items:l})}const Z="menu";function ee(){return G(Z)}var S=(e=>(e.INPUTBOX="INPUTBOX",e.TEXTAREA="TEXTAREA",e.BUTTON="BUTTON",e.IMAGE="IMAGE",e.TOGGLE="TOGGLE",e.SELECTBOX="SELECTBOX",e))(S||{});function te(e){if(typeof e!="object"||e===null)return!1;const n=e;return Array.isArray(n.cards)&&n.cards.every(t=>typeof t.settings=="object"&&t.settings!==null)}function ne(e){const n=s(),t=i(()=>{const l=n.content.value[e];if(l!==void 0){if(te(l))return l;throw new Error(`Element ${e} is not of DECK type`)}}),o=i(()=>t.value!==void 0&&t.value.cards.length>0),r=i(()=>t.value?.cards);return d({hasContent:o,cards:r,getReactiveRef:oe})}function oe(e,n,t){if(e==null)throw Error("Could not get a reactive ref for undefined Card");const o=e.settings[t];if(o===void 0)return o;switch(n){case"TEXTAREA":return C(t,e.settings);case"INPUTBOX":return O(t,e.settings);case"SELECTBOX":return A(t,e.settings);case"IMAGE":return k(t,e.settings);case"TOGGLE":return R(t,e.settings);case"BUTTON":return L(t,e.settings);default:return}}function ie(e){return"type"in e&&("text"in e||"image"in e)}function T(e,n){const t=new RegExp(/^https?:\/\//);return e!==void 0&&t.test(e)?e:`${n}/${e}`}function re(){const e=s(),n=i(()=>{const a=e.content.value.logo;if(a!==void 0){if(ie(a))return a;throw new Error("Element logo is not LOGO")}}),t=i(()=>n.value?.type),o=i(()=>n.value?.text),r=i(()=>n.value?.image===void 0?"":e.context.value.imageBuckets?.[n.value.image.bucket]),l=i(()=>({lowResolutionMobileImage:T(n.value?.image?.set?.["cropped-webp-100x200"]?.url,r.value),highResolutionMobileImage:T(n.value?.image?.set?.["cropped-webp-1000x2000"]?.url,r.value),lowResolutionDesktopImage:T(n.value?.image?.set?.["webp-200x200"]?.url,r.value),highResolutionDesktopImage:T(n.value?.image?.set?.["webp-2000x2000"]?.url,r.value)}));return d({type:t,text:o,image:l})}function I(e,n){if(n===void 0)return;if(!n.startsWith("global."))return n;const t=n.split(".").at(2);if(t!==void 0)return e.fontFamily[t]}function h(e,n){if(n===void 0)return;if(typeof n!="string"||!n.startsWith("global."))return n;const t=n.split(".").at(2);if(t!==void 0)return e.textSize[t]}function p(e,n){if(n===void 0)return;if(typeof n!="string"||!n.startsWith("global."))return n;const t=n.split(".").at(2);if(t!==void 0)return e.color[t]}function le(e){const n=s(),t=i(()=>{const u=n.design.value[e],c=n.defaults.value[e],f=n.context.value.globalDesign;return{font:u?.font?.replaceAll("_"," ")??I(f,c?.font),size:u?.size??h(f,c?.size),bold:u?.bold??c?.bold,italic:u?.italic??c?.italic,color:u?.color??p(f,c?.color),visible:u?.visible??c?.visible??!1}}),o=i(()=>t.value?.font),r=i(()=>t.value?.size),l=i(()=>t.value?.bold),a=i(()=>t.value?.italic),v=i(()=>t.value?.color),g=i(()=>t.value?.visible);return d({font:o,size:r,bold:l,italic:a,color:v,visible:g})}function ae(e){const n=s(),t=i(()=>{const c=n.design.value[e],f=n.defaults.value[e],m=n.context.value.globalDesign;return{font:c?.font?.replaceAll("_"," ")??I(m,f?.font),size:c?.size??h(m,f?.size),bold:c?.bold??f?.bold,italic:c?.italic??f?.italic,color:c?.color??p(m,f?.color),visible:c?.visible??f?.visible??!1,whiteSpace:"pre-wrap"}}),o=i(()=>t.value?.font),r=i(()=>t.value?.size),l=i(()=>t.value?.bold),a=i(()=>t.value?.italic),v=i(()=>t.value?.color),g=i(()=>t.value?.visible),u=i(()=>t.value?.whiteSpace);return d({font:o,size:r,bold:l,italic:a,color:v,visible:g,whiteSpace:u})}function ue(e){const n=s(),t=i(()=>{const u=n.design.value[e],c=n.defaults.value[e],f=n.context.value.globalDesign;return{appearance:u?.appearance??c?.appearance,font:u?.font??I(f,c?.font),size:u?.size??c?.size,style:u?.style??c?.style,color:u?.color??p(f,c?.color),visible:u?.visible??c?.visible??!1}}),o=i(()=>t.value?.appearance),r=i(()=>t.value?.font),l=i(()=>t.value?.size),a=i(()=>t.value?.style),v=i(()=>t.value?.color),g=i(()=>t.value?.visible);return d({appearance:o,font:r,size:l,style:a,color:v,visible:g})}function se(e){const n=s(),t=i(()=>{const l=n.design.value[e],a=n.defaults.value[e],v=n.context.value.globalDesign;return{overlay:{type:l?.overlay?.type??a?.overlay?.type,solid:{color:l?.overlay?.solid?.color??p(v,a?.overlay?.solid?.color)},gradient:{fromColor:l?.overlay?.gradient?.fromColor??p(v,a?.overlay?.gradient?.fromColor),toColor:l?.overlay?.gradient?.toColor??p(v,a?.overlay?.gradient?.toColor)}},visible:l?.visible??a?.visible??!1}}),o=i(()=>t.value?.overlay),r=i(()=>t.value?.visible);return d({overlay:o,visible:r})}function ce(e){const n=s(),t=i(()=>{const r=n.design.value[e],l=n.defaults.value[e];return{enabled:r?.enabled??l?.enabled}}),o=i(()=>t.value?.enabled);return d({enabled:o})}function ve(e){const n=s(),t=i(()=>{const r=n.design.value[e],l=n.defaults.value[e];return{value:r?.value??l?.value}}),o=i(()=>t.value?.value);return d({value:o})}function de(e){const n=s(),t=i(()=>{const r=n.design.value[e],l=n.defaults.value[e],a=n.context.value.globalDesign;return{background:{type:r?.background?.type??l?.background?.type,solid:{color:r?.background?.solid?.color??p(a,l?.background?.solid?.color)},gradient:{fromColor:r?.background?.gradient?.fromColor??p(a,l?.background?.gradient?.fromColor),toColor:r?.background?.gradient?.toColor??p(a,l?.background?.gradient?.toColor)}}}}),o=i(()=>t.value?.background);return d({background:o})}function fe(){const e=s(),n=i(()=>e.design.value.layout),t=i(()=>n.value);return d({layout:t})}function ge(e,n){return{visible:n?.visible??!1,width:n?.width??1,color:p(e,n?.color)}}function pe(){const e=s();return i(()=>{const n=e.design.value.logo,t=e.defaults.value.logo,o=e.context.value.globalDesign;return{font:n?.font?.replaceAll("_"," ")??I(o,t?.font),size:n?.size??h(o,t?.size),bold:n?.bold??t?.bold,italic:n?.italic??t?.italic,color:n?.color??p(o,t?.color),visible:n?.visible??t?.visible??!1,spacing:n?.spacing??t?.spacing??0,capitalization:n?.capitalization??t?.capitalization??"none",frame:n?.frame??ge(o,t?.frame)}})}function z(e){return{app:B(e)}}function be(e,n){return{init:()=>{const{app:t}=z(e);return n?.init?.(t),{render:async(o,r)=>(s().init(t,o,r.content,r.design,r.defaults,r.externalContent),n?.render?.(t,o,r),{html:await M(t,{context:o}),state:{context:o,data:r}})}}}}function me(e,n){return{init:()=>{const{app:t}=z(e);return n?.init?.(t),{mount:(o,r)=>{s().init(t,r.context,r.data.content,r.data.design,r.data.defaults,r.data.externalContent),n?.mount?.(t,o,r),t.mount(o)},update:o=>{s().update(t,o.data.content,o.data.design,o.data.defaults,o.data.externalContent),n?.update?.(t,o)},unmount:()=>{n?.unmount?.(t),t.unmount()}}}}}function Ee(){return globalThis.window.instantsite}export{S as EditorTypes,me as createVueClientApp,be as createVueServerApp,de as useBackgroundElementDesign,L as useButtonElementContent,ue as useButtonElementDesign,ne as useDeckElementContent,k as useImageElementContent,se as useImageElementDesign,O as useInputboxElementContent,Ee as useInstantsiteJsApi,fe as useLayoutElementDesign,re as useLogoElementContent,pe as useLogoElementDesign,G as useMenuElementContent,ee as useNavigationMenuElementContent,A as useSelectboxElementContent,ve as useSelectboxElementDesign,le as useTextElementDesign,C as useTextareaElementContent,ae as useTextareaElementDesign,R as useToggleElementContent,ce as useToggleElementDesign,s as useVueBaseProps};