@lightspeed/crane 1.1.1 → 1.1.2

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 externalContent: Ref<ExternalContentData>;
 }
 declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
 
@@ -60,7 +61,7 @@ declare function useButtonElementContent<CONTENT>(elementName: string, externalC
     link: string | undefined;
     hasTitle: boolean;
     hasLink: boolean;
-    performAction: () => void;
+    performAction: (() => void) | undefined;
 };
 
 interface ImageContent {
@@ -96,6 +97,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>;
@@ -124,7 +161,7 @@ declare function getReactiveRef(card: Card | undefined, editorType: EditorTypes,
     link: string | undefined;
     hasTitle: boolean;
     hasLink: boolean;
-    performAction: () => void;
+    performAction: (() => void) | undefined;
 } | {
     hasContent: boolean;
     lowResolutionMobileImage: string;
@@ -136,6 +173,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 +233,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 +328,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 externalContent: Ref<ExternalContentData>;
 }
 declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
 
@@ -60,7 +61,7 @@ declare function useButtonElementContent<CONTENT>(elementName: string, externalC
     link: string | undefined;
     hasTitle: boolean;
     hasLink: boolean;
-    performAction: () => void;
+    performAction: (() => void) | undefined;
 };
 
 interface ImageContent {
@@ -96,6 +97,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>;
@@ -124,7 +161,7 @@ declare function getReactiveRef(card: Card | undefined, editorType: EditorTypes,
     link: string | undefined;
     hasTitle: boolean;
     hasLink: boolean;
-    performAction: () => void;
+    performAction: (() => void) | undefined;
 } | {
     hasContent: boolean;
     lowResolutionMobileImage: string;
@@ -136,6 +173,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 +233,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 +328,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 z,ref as m,computed as r,reactive as d,createSSRApp as $}from"vue";import{renderToString as D}from"vue/server-renderer";const x=new Map;function s(){const e=(i,l,a,v,f,u)=>{x.set(i._uid,{context:m(l),content:m(a),design:m(v),defaults:m(f),externalContent:m(u)})},n=(i,l,a,v,f)=>{const u=x.get(i._uid);u!==void 0&&(u.content.value=l,u.design.value=a,u.defaults.value=v,u.externalContent.value=f)},t=z()?.appContext.app._uid??-1,o=x.get(t);return{init:e,update:n,context:o?.context,content:o?.content,design:o?.design,defaults:o?.defaults,externalContent:o?.externalContent}}function _(e,n){const t=s(),o=r(()=>n!==void 0?n:t.content.value);return N(o,e)}function N(e,n){const t=r(()=>{const l=e.value[n];if(l!==void 0){if(typeof l=="string")return l;throw new Error(`Element ${n} is not inputbox`)}}),o=r(()=>t.value!==void 0),i=r(()=>t.value);return d({hasContent:o,value:i})}function h(e,n){const t=s(),o=r(()=>n!==void 0?n:t.content.value);return B(o,e)}function B(e,n){const t=r(()=>{const l=e.value[n];if(l!==void 0){if(typeof l=="string")return l;throw new Error(`Element ${n} is not textarea`)}}),o=r(()=>t.value!==void 0),i=r(()=>t.value);return d({hasContent:o,value:i})}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 M(e){if("tileId"in e)return e.tileId;if("tileIdForScroll"in e)return e.tileIdForScroll}function K(e){if("pageId"in e)return e.pageId;if("pageIdForNavigate"in e)return e.pageIdForNavigate}function P(e){if("pageUrl"in e)return e.pageUrl;switch(K(e)){case"products":return"/products";case"cart":return"/cart";case"account":return"/account";case"search":return"/search";case"home":default:return"/"}}const y=(e,n)=>{if(!e||n)return;const{type:t,link:o,email:i,phone:l}=e,a=P(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(i)return()=>window.open(`mailto:${i}`,"_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=M(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 U(e){return"title"in e&&"type"in e}function O(e,n){const t=s(),o=r(()=>!!t.externalContent?.value?.isPreviewMode),i=r(()=>n!==void 0?n:t.content.value!==void 0?t.content.value:{});return X(i,e,o.value)}function X(e,n,t){const o=r(()=>{const u=e.value[n];if(u!==void 0){if(U(u))return u;throw new Error(`Element ${n} is not action link`)}}),i=r(()=>o.value?.title),l=r(()=>o.value?.link),a=r(()=>!!i.value),v=r(()=>!!l.value),f=y(o.value,t);return d({title:i,link:l,hasTitle:a,hasLink:v,performAction:f})}function F(e){return"bucket"in e&&"borderInfo"in e&&"set"in e}function E(e,n){const t=new RegExp(/^https?:\/\//);return e!=null&&t.test(e)?e:`${n}/${e}`}function L(e,n){const t=s(),o=r(()=>n!==void 0?n:t.content.value);return V(o,e)}function V(e,n){const t=r(()=>{const u=e.value[n];if(u!==void 0){if(F(u))return u;throw new Error(`Element ${n} is not image`)}}),o=r(()=>t.value===void 0?"":s().context.value.imageBuckets?.[t.value?.bucket]),i=r(()=>t.value!==void 0),l=r(()=>E(t.value?.set?.["cropped-webp-100x200"]?.url,o.value)),a=r(()=>E(t.value?.set?.["cropped-webp-1000x2000"]?.url,o.value)),v=r(()=>E(t.value?.set?.["webp-200x200"]?.url,o.value)),f=r(()=>E(t.value?.set?.["webp-2000x2000"]?.url,o.value));return d({hasContent:i,lowResolutionMobileImage:l,highResolutionMobileImage:a,lowResolutionDesktopImage:v,highResolutionDesktopImage:f})}function H(e){return"enabled"in e}function k(e,n){const t=s(),o=r(()=>n!==void 0?n:t.content.value);return W(o,e)}function W(e,n){const t=r(()=>{const l=e.value[n];if(l!==void 0){if(H(l))return l;throw new Error(`Element ${n} is not toggle`)}}),o=r(()=>t.value!==void 0),i=r(()=>t.value?.enabled);return d({hasContent:o,value:i})}function R(e,n){const t=s(),o=r(()=>n!==void 0?n:t.content.value);return Y(o,e)}function Y(e,n){const t=r(()=>{const l=e.value[n];if(l!==void 0){if(typeof l=="string")return l;throw new Error(`Element ${n} is not selectbox`)}}),o=r(()=>t.value!==void 0),i=r(()=>t.value);return d({hasContent:o,value:i})}function j(e){return e!==null&&"items"in e}function A(e){const n=s(),t=r(()=>{const a=n.content.value[e];if(a!==void 0){if(j(a))return a;throw new Error(`Element ${e} is not an menu`)}}),o=r(()=>!!n.externalContent?.value?.isPreviewMode),i=r(()=>t.value!==void 0),l=r(()=>t.value?.items?t.value.items.map(a=>({...a,performAction:y(a,o.value)})):[]);return d({hasContent:i,items:l})}const J="menu";function q(){return A(J)}var G=(e=>(e.INPUTBOX="INPUTBOX",e.TEXTAREA="TEXTAREA",e.BUTTON="BUTTON",e.IMAGE="IMAGE",e.TOGGLE="TOGGLE",e.SELECTBOX="SELECTBOX",e))(G||{});function Q(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 Z(e){const n=s(),t=r(()=>{const l=n.content.value[e];if(l!==void 0){if(Q(l))return l;throw new Error(`Element ${e} is not of DECK type`)}}),o=r(()=>t.value!==void 0&&t.value.cards.length>0),i=r(()=>t.value?.cards);return d({hasContent:o,cards:i,getReactiveRef:ee})}function ee(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 h(t,e.settings);case"INPUTBOX":return _(t,e.settings);case"SELECTBOX":return R(t,e.settings);case"IMAGE":return L(t,e.settings);case"TOGGLE":return k(t,e.settings);case"BUTTON":return O(t,e.settings);default:return}}function te(e){return"type"in e&&("text"in e||"image"in e)}function w(e,n){const t=new RegExp(/^https?:\/\//);return e!==void 0&&t.test(e)?e:`${n}/${e}`}function ne(){const e=s(),n=r(()=>{const a=e.content.value.logo;if(a!==void 0){if(te(a))return a;throw new Error("Element logo is not LOGO")}}),t=r(()=>n.value?.type),o=r(()=>n.value?.text),i=r(()=>n.value?.image===void 0?"":e.context.value.imageBuckets?.[n.value.image.bucket]),l=r(()=>({lowResolutionMobileImage:w(n.value?.image?.set?.["cropped-webp-100x200"]?.url,i.value),highResolutionMobileImage:w(n.value?.image?.set?.["cropped-webp-1000x2000"]?.url,i.value),lowResolutionDesktopImage:w(n.value?.image?.set?.["webp-200x200"]?.url,i.value),highResolutionDesktopImage:w(n.value?.image?.set?.["webp-2000x2000"]?.url,i.value)}));return d({type:t,text:o,image:l})}function T(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 I(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 oe(e){const n=s(),t=r(()=>{const u=n.design.value[e],c=n.defaults.value[e],g=n.context.value.globalDesign;return{font:u?.font?.replaceAll("_"," ")??T(g,c?.font),size:u?.size??I(g,c?.size),bold:u?.bold??c?.bold,italic:u?.italic??c?.italic,color:u?.color??p(g,c?.color),visible:u?.visible??c?.visible??!1}}),o=r(()=>t.value?.font),i=r(()=>t.value?.size),l=r(()=>t.value?.bold),a=r(()=>t.value?.italic),v=r(()=>t.value?.color),f=r(()=>t.value?.visible);return d({font:o,size:i,bold:l,italic:a,color:v,visible:f})}function re(e){const n=s(),t=r(()=>{const c=n.design.value[e],g=n.defaults.value[e],C=n.context.value.globalDesign;return{font:c?.font?.replaceAll("_"," ")??T(C,g?.font),size:c?.size??I(C,g?.size),bold:c?.bold??g?.bold,italic:c?.italic??g?.italic,color:c?.color??p(C,g?.color),visible:c?.visible??g?.visible??!1,whiteSpace:"pre-wrap"}}),o=r(()=>t.value?.font),i=r(()=>t.value?.size),l=r(()=>t.value?.bold),a=r(()=>t.value?.italic),v=r(()=>t.value?.color),f=r(()=>t.value?.visible),u=r(()=>t.value?.whiteSpace);return d({font:o,size:i,bold:l,italic:a,color:v,visible:f,whiteSpace:u})}function ie(e){const n=s(),t=r(()=>{const u=n.design.value[e],c=n.defaults.value[e],g=n.context.value.globalDesign;return{appearance:u?.appearance??c?.appearance,font:u?.font??T(g,c?.font),size:u?.size??c?.size,style:u?.style??c?.style,color:u?.color??p(g,c?.color),visible:u?.visible??c?.visible??!1}}),o=r(()=>t.value?.appearance),i=r(()=>t.value?.font),l=r(()=>t.value?.size),a=r(()=>t.value?.style),v=r(()=>t.value?.color),f=r(()=>t.value?.visible);return d({appearance:o,font:i,size:l,style:a,color:v,visible:f})}function le(e){const n=s(),t=r(()=>{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=r(()=>t.value?.overlay),i=r(()=>t.value?.visible);return d({overlay:o,visible:i})}function ae(e){const n=s(),t=r(()=>{const i=n.design.value[e],l=n.defaults.value[e];return{enabled:i?.enabled??l?.enabled}}),o=r(()=>t.value?.enabled);return d({enabled:o})}function ue(e){const n=s(),t=r(()=>{const i=n.design.value[e],l=n.defaults.value[e];return{value:i?.value??l?.value}}),o=r(()=>t.value?.value);return d({value:o})}function se(e){const n=s(),t=r(()=>{const i=n.design.value[e],l=n.defaults.value[e],a=n.context.value.globalDesign;return{background:{type:i?.background?.type??l?.background?.type,solid:{color:i?.background?.solid?.color??p(a,l?.background?.solid?.color)},gradient:{fromColor:i?.background?.gradient?.fromColor??p(a,l?.background?.gradient?.fromColor),toColor:i?.background?.gradient?.toColor??p(a,l?.background?.gradient?.toColor)}}}}),o=r(()=>t.value?.background);return d({background:o})}function ce(){const e=s(),n=r(()=>e.design.value.layout),t=r(()=>n.value);return d({layout:t})}function ve(e,n){return{visible:n?.visible??!1,width:n?.width??1,color:p(e,n?.color)}}function de(){const e=s();return r(()=>{const n=e.design.value.logo,t=e.defaults.value.logo,o=e.context.value.globalDesign;return{font:n?.font?.replaceAll("_"," ")??T(o,t?.font),size:n?.size??I(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??ve(o,t?.frame)}})}function S(e){return{app:$(e)}}function fe(e,n){return{init:()=>{const{app:t}=S(e);return n?.init?.(t),{render:async(o,i)=>(s().init(t,o,i.content,i.design,i.defaults,i.externalContent),n?.render?.(t,o,i),{html:await D(t,{context:o}),state:{context:o,data:i}})}}}}function ge(e,n){return{init:()=>{const{app:t}=S(e);return n?.init?.(t),{mount:(o,i)=>{s().init(t,i.context,i.data.content,i.data.design,i.data.defaults,i.data.externalContent),n?.mount?.(t,o,i),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 pe(){return globalThis.window.instantsite}export{G as EditorTypes,ge as createVueClientApp,fe as createVueServerApp,se as useBackgroundElementDesign,O as useButtonElementContent,ie as useButtonElementDesign,Z as useDeckElementContent,L as useImageElementContent,le as useImageElementDesign,_ as useInputboxElementContent,pe as useInstantsiteJsApi,ce as useLayoutElementDesign,ne as useLogoElementContent,de as useLogoElementDesign,A as useMenuElementContent,q as useNavigationMenuElementContent,R as useSelectboxElementContent,ue as useSelectboxElementDesign,oe as useTextElementDesign,h as useTextareaElementContent,re as useTextareaElementDesign,k as useToggleElementContent,ae as useToggleElementDesign,s as useVueBaseProps};