@lightspeed/crane 1.1.0 → 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,6 +13,7 @@ interface AppBaseData<C, D> {
     readonly content: C;
     readonly design: D;
     readonly defaults: Record<string, unknown>;
+    readonly externalContent: ExternalContentData;
 }
 interface AppBaseState<C, D> {
     readonly context: AppBaseContext;
@@ -19,34 +21,57 @@ interface AppBaseState<C, D> {
 }
 
 interface VueBaseProps<CONTENT, DESIGN> {
-    init: (app: App<Element>, contextValue: AppBaseContext, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>) => void;
-    update: (app: App<Element>, contentValue: CONTENT, designValue: DESIGN, defaultsValue: 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<ExternalContentData>;
 }
 declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
 
-declare function useInputboxElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface InputBoxContent {
+    hasContent: boolean;
+    value: string;
+}
+declare function useInputboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     value: string | undefined;
 };
 
-declare function useTextareaElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface TextAreaContent {
+    hasContent: boolean;
+    value: string;
+}
+declare function useTextareaElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     value: string | undefined;
 };
 
-declare function useButtonElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface ButtonContent {
+    title: string;
+    link: string;
+    hasTitle: boolean;
+    hasLink: boolean;
+    performAction: () => void;
+}
+declare function useButtonElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     title: string | undefined;
     link: string | undefined;
     hasTitle: boolean;
     hasLink: boolean;
-    performAction: () => void;
+    performAction: (() => void) | undefined;
 };
 
-declare function useImageElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface ImageContent {
+    hasContent: boolean;
+    lowResolutionMobileImage: string;
+    highResolutionMobileImage: string;
+    lowResolutionDesktopImage: string;
+    highResolutionDesktopImage: string;
+}
+declare function useImageElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     lowResolutionMobileImage: string;
     highResolutionMobileImage: string;
@@ -54,14 +79,109 @@ declare function useImageElementContent<CONTENT>(elementName: keyof CONTENT): {
     highResolutionDesktopImage: string;
 };
 
-declare function useToggleElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface ToggleContent {
+    hasContent: boolean;
+    value: boolean;
+}
+declare function useToggleElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     value: boolean | undefined;
 };
 
-declare function useSelectboxElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface SelectBoxContent {
     hasContent: boolean;
-    value: undefined;
+    value: string;
+}
+declare function useSelectboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
+    hasContent: boolean;
+    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>;
+}
+interface Deck {
+    cards: Card[];
+}
+declare enum EditorTypes {
+    INPUTBOX = "INPUTBOX",
+    TEXTAREA = "TEXTAREA",
+    BUTTON = "BUTTON",
+    IMAGE = "IMAGE",
+    TOGGLE = "TOGGLE",
+    SELECTBOX = "SELECTBOX"
+}
+declare function useDeckElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    cards: Card[] | undefined;
+    getReactiveRef: typeof getReactiveRef;
+};
+declare function getReactiveRef(card: Card | undefined, editorType: EditorTypes, contentElementName: string): {
+    hasContent: boolean;
+    value: string | undefined;
+} | {
+    title: string | undefined;
+    link: string | undefined;
+    hasTitle: boolean;
+    hasLink: boolean;
+    performAction: (() => void) | undefined;
+} | {
+    hasContent: boolean;
+    lowResolutionMobileImage: string;
+    highResolutionMobileImage: string;
+    lowResolutionDesktopImage: string;
+    highResolutionDesktopImage: string;
+} | {
+    hasContent: boolean;
+    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): {
@@ -113,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;
@@ -141,4 +263,69 @@ declare function createVueClientApp<C, D>(appComponent: Component, extensions?:
     };
 };
 
-export { createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useImageElementContent, useImageElementDesign, useInputboxElementContent, useLayoutElementDesign, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };
+interface InstantsiteTilePromise {
+    add(callback: (id: string) => void): void;
+}
+interface InstantsiteJSAPI {
+    /**
+     * Retrieves the current site ID.
+     *
+     * @returns {number} The site ID.
+     */
+    getSiteId: () => number;
+    /**
+     * Retrieves the public token for a given app.
+     *
+     * @param {string} appId - The ID of the app.
+     * @returns {string | undefined} The app's public token, or `undefined` if not found.
+     */
+    getAppPublicToken: (appId: string) => string | undefined;
+    /**
+     * Retrieves the public configuration for a given app.
+     *
+     * @param {string} appId - The ID of the app.
+     * @returns {string | undefined} The app's public configuration, or `undefined` if not found.
+     */
+    getAppPublicConfig: (appId: string) => string | undefined;
+    /**
+     * An event that triggers when a tile is loaded.
+     *
+     * @type {InstantsiteTilePromise}
+     *
+     * @example
+     * ```ts
+     * const tileLoadedPromise = instantsiteJsApi?.onTileLoaded;
+     *
+     * tileLoadedPromise?.add((tileId) => {
+     *     console.log('Tile loaded:', tileId);
+     * });
+     * ```
+     */
+    onTileLoaded: InstantsiteTilePromise;
+    /**
+     * An event that triggers when a tile is unloaded.
+     *
+     * @type {InstantsiteTilePromise}
+     *
+     * @example
+     * ```ts
+     * const tileUnloadedPromise = instantsiteJsApi?.onTileUnloaded;
+     *
+     * tileUnloadedPromise?.add((tileId) => {
+     *     console.log('Tile unloaded:', tileId);
+     * });
+     * ```
+     */
+    onTileUnloaded: InstantsiteTilePromise;
+    /**
+     * Opens the search page with the specified keyword.
+     *
+     * @param {string | undefined} keyword - The keyword to search for.
+     * @returns {void}
+     */
+    openSearchPage: (keyword: string | undefined) => void;
+}
+
+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, 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,6 +13,7 @@ interface AppBaseData<C, D> {
     readonly content: C;
     readonly design: D;
     readonly defaults: Record<string, unknown>;
+    readonly externalContent: ExternalContentData;
 }
 interface AppBaseState<C, D> {
     readonly context: AppBaseContext;
@@ -19,34 +21,57 @@ interface AppBaseState<C, D> {
 }
 
 interface VueBaseProps<CONTENT, DESIGN> {
-    init: (app: App<Element>, contextValue: AppBaseContext, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>) => void;
-    update: (app: App<Element>, contentValue: CONTENT, designValue: DESIGN, defaultsValue: 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<ExternalContentData>;
 }
 declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
 
-declare function useInputboxElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface InputBoxContent {
+    hasContent: boolean;
+    value: string;
+}
+declare function useInputboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     value: string | undefined;
 };
 
-declare function useTextareaElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface TextAreaContent {
+    hasContent: boolean;
+    value: string;
+}
+declare function useTextareaElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     value: string | undefined;
 };
 
-declare function useButtonElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface ButtonContent {
+    title: string;
+    link: string;
+    hasTitle: boolean;
+    hasLink: boolean;
+    performAction: () => void;
+}
+declare function useButtonElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     title: string | undefined;
     link: string | undefined;
     hasTitle: boolean;
     hasLink: boolean;
-    performAction: () => void;
+    performAction: (() => void) | undefined;
 };
 
-declare function useImageElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface ImageContent {
+    hasContent: boolean;
+    lowResolutionMobileImage: string;
+    highResolutionMobileImage: string;
+    lowResolutionDesktopImage: string;
+    highResolutionDesktopImage: string;
+}
+declare function useImageElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     lowResolutionMobileImage: string;
     highResolutionMobileImage: string;
@@ -54,14 +79,109 @@ declare function useImageElementContent<CONTENT>(elementName: keyof CONTENT): {
     highResolutionDesktopImage: string;
 };
 
-declare function useToggleElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface ToggleContent {
+    hasContent: boolean;
+    value: boolean;
+}
+declare function useToggleElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     value: boolean | undefined;
 };
 
-declare function useSelectboxElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface SelectBoxContent {
     hasContent: boolean;
-    value: undefined;
+    value: string;
+}
+declare function useSelectboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
+    hasContent: boolean;
+    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>;
+}
+interface Deck {
+    cards: Card[];
+}
+declare enum EditorTypes {
+    INPUTBOX = "INPUTBOX",
+    TEXTAREA = "TEXTAREA",
+    BUTTON = "BUTTON",
+    IMAGE = "IMAGE",
+    TOGGLE = "TOGGLE",
+    SELECTBOX = "SELECTBOX"
+}
+declare function useDeckElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    cards: Card[] | undefined;
+    getReactiveRef: typeof getReactiveRef;
+};
+declare function getReactiveRef(card: Card | undefined, editorType: EditorTypes, contentElementName: string): {
+    hasContent: boolean;
+    value: string | undefined;
+} | {
+    title: string | undefined;
+    link: string | undefined;
+    hasTitle: boolean;
+    hasLink: boolean;
+    performAction: (() => void) | undefined;
+} | {
+    hasContent: boolean;
+    lowResolutionMobileImage: string;
+    highResolutionMobileImage: string;
+    lowResolutionDesktopImage: string;
+    highResolutionDesktopImage: string;
+} | {
+    hasContent: boolean;
+    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): {
@@ -113,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;
@@ -141,4 +263,69 @@ declare function createVueClientApp<C, D>(appComponent: Component, extensions?:
     };
 };
 
-export { createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useImageElementContent, useImageElementDesign, useInputboxElementContent, useLayoutElementDesign, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };
+interface InstantsiteTilePromise {
+    add(callback: (id: string) => void): void;
+}
+interface InstantsiteJSAPI {
+    /**
+     * Retrieves the current site ID.
+     *
+     * @returns {number} The site ID.
+     */
+    getSiteId: () => number;
+    /**
+     * Retrieves the public token for a given app.
+     *
+     * @param {string} appId - The ID of the app.
+     * @returns {string | undefined} The app's public token, or `undefined` if not found.
+     */
+    getAppPublicToken: (appId: string) => string | undefined;
+    /**
+     * Retrieves the public configuration for a given app.
+     *
+     * @param {string} appId - The ID of the app.
+     * @returns {string | undefined} The app's public configuration, or `undefined` if not found.
+     */
+    getAppPublicConfig: (appId: string) => string | undefined;
+    /**
+     * An event that triggers when a tile is loaded.
+     *
+     * @type {InstantsiteTilePromise}
+     *
+     * @example
+     * ```ts
+     * const tileLoadedPromise = instantsiteJsApi?.onTileLoaded;
+     *
+     * tileLoadedPromise?.add((tileId) => {
+     *     console.log('Tile loaded:', tileId);
+     * });
+     * ```
+     */
+    onTileLoaded: InstantsiteTilePromise;
+    /**
+     * An event that triggers when a tile is unloaded.
+     *
+     * @type {InstantsiteTilePromise}
+     *
+     * @example
+     * ```ts
+     * const tileUnloadedPromise = instantsiteJsApi?.onTileUnloaded;
+     *
+     * tileUnloadedPromise?.add((tileId) => {
+     *     console.log('Tile unloaded:', tileId);
+     * });
+     * ```
+     */
+    onTileUnloaded: InstantsiteTilePromise;
+    /**
+     * Opens the search page with the specified keyword.
+     *
+     * @param {string | undefined} keyword - The keyword to search for.
+     * @returns {void}
+     */
+    openSearchPage: (keyword: string | undefined) => void;
+}
+
+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, useLogoElementContent, useLogoElementDesign, useMenuElementContent, useNavigationMenuElementContent, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };

package/dist/app.mjs

@@ -1 +1 @@
-import{getCurrentInstance as h,ref as b,computed as o,reactive as f,createSSRApp as C}from"vue";import{renderToString as I}from"vue/server-renderer";const y=new Map;function v(){const n=(a,i,r,u,d)=>{y.set(a._uid,{context:b(i),content:b(r),design:b(u),defaults:b(d)})},t=(a,i,r,u)=>{const d=y.get(a._uid);d!==void 0&&(d.content.value=i,d.design.value=r,d.defaults.value=u)},e=h()?.appContext.app._uid??-1,l=y.get(e);return{init:n,update:t,context:l?.context,content:l?.content,design:l?.design,defaults:l?.defaults}}function z(n){const t=v(),e=o(()=>{const i=t.content.value[n];if(i!==void 0){if(typeof i=="string")return i;throw new Error(`Element ${n} is not inputbox`)}}),l=o(()=>e.value!==void 0),a=o(()=>e.value);return f({hasContent:l,value:a})}function _(n){const t=v(),e=o(()=>{const i=t.content.value[n];if(i!==void 0){if(typeof i=="string")return i;throw new Error(`Element ${n} is not textarea`)}}),l=o(()=>e.value!==void 0),a=o(()=>e.value);return f({hasContent:l,value:a})}function D(n){return"title"in n&&"type"in n}function T(n){const t=v(),e=o(()=>{const u=t.content.value[n];if(u!==void 0){if(D(u))return u;throw new Error(`Element ${n} is not action link`)}}),l=o(()=>e.value?.title),a=o(()=>e.value?.link),i=o(()=>!!l.value),r=o(()=>!!a.value);return f({title:l,link:a,hasTitle:i,hasLink:r,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"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 u=e.value.tileId;document.getElementById(`tile-${u}`)?.scrollIntoView();break}default:throw new Error("Unknown ButtonType: ")}}})}function S(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 L(n){const t=v(),e=o(()=>{const c=t.content.value[n];if(c!==void 0){if(S(c))return c;throw new Error(`Element ${n} is not image`)}}),l=o(()=>e.value===void 0?"":t.context.value.imageBuckets?.[e.value?.bucket]),a=o(()=>e.value!==void 0),i=o(()=>m(e.value?.set?.["cropped-webp-100x200"]?.url,l.value)),r=o(()=>m(e.value?.set?.["cropped-webp-1000x2000"]?.url,l.value)),u=o(()=>m(e.value?.set?.["webp-200x200"]?.url,l.value)),d=o(()=>m(e.value?.set?.["webp-2000x2000"]?.url,l.value));return f({hasContent:a,lowResolutionMobileImage:i,highResolutionMobileImage:r,lowResolutionDesktopImage:u,highResolutionDesktopImage:d})}function $(n){return"enabled"in n}function R(n){const t=v(),e=o(()=>{const i=t.content.value[n];if(i!==void 0){if($(i))return i;throw new Error(`Element ${n} is not toggle`)}}),l=o(()=>e.value!==void 0),a=o(()=>e.value?.enabled);return f({hasContent:l,value:a})}function A(n){const t=v(),e=o(()=>{const i=t.content.value[n];if(i!==void 0){if(typeof i=="string")return i;throw new Error(`Element ${n} is not selectbox`)}}),l=o(()=>e.value!==void 0),a=o(()=>e.value);return f({hasContent:l,value:a})}function E(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 k(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 B(n){const t=v(),e=o(()=>{const c=t.design.value[n],s=t.defaults.value[n],g=t.context.value.globalDesign;return{font:c?.font?.replaceAll("_"," ")??E(g,s?.font),size:c?.size??k(g,s?.size),bold:c?.bold??s?.bold,italic:c?.italic??s?.italic,color:c?.color??p(g,s?.color),visible:c?.visible??s?.visible??!1}}),l=o(()=>e.value?.font),a=o(()=>e.value?.size),i=o(()=>e.value?.bold),r=o(()=>e.value?.italic),u=o(()=>e.value?.color),d=o(()=>e.value?.visible);return f({font:l,size:a,bold:i,italic:r,color:u,visible:d})}function O(n){const t=v(),e=o(()=>{const s=t.design.value[n],g=t.defaults.value[n],w=t.context.value.globalDesign;return{font:s?.font?.replaceAll("_"," ")??E(w,g?.font),size:s?.size??k(w,g?.size),bold:s?.bold??g?.bold,italic:s?.italic??g?.italic,color:s?.color??p(w,g?.color),visible:s?.visible??g?.visible??!1,whiteSpace:"pre-wrap"}}),l=o(()=>e.value?.font),a=o(()=>e.value?.size),i=o(()=>e.value?.bold),r=o(()=>e.value?.italic),u=o(()=>e.value?.color),d=o(()=>e.value?.visible),c=o(()=>e.value?.whiteSpace);return f({font:l,size:a,bold:i,italic:r,color:u,visible:d,whiteSpace:c})}function G(n){const t=v(),e=o(()=>{const c=t.design.value[n],s=t.defaults.value[n],g=t.context.value.globalDesign;return{appearance:c?.appearance??s?.appearance,font:c?.font??E(g,s?.font),size:c?.size??s?.size,style:c?.style??s?.style,color:c?.color??p(g,s?.color),visible:c?.visible??s?.visible??!1}}),l=o(()=>e.value?.appearance),a=o(()=>e.value?.font),i=o(()=>e.value?.size),r=o(()=>e.value?.style),u=o(()=>e.value?.color),d=o(()=>e.value?.visible);return f({appearance:l,font:a,size:i,style:r,color:u,visible:d})}function K(n){const t=v(),e=o(()=>{const i=t.design.value[n],r=t.defaults.value[n],u=t.context.value.globalDesign;return{overlay:{type:i?.overlay?.type??r?.overlay?.type,solid:{color:i?.overlay?.solid?.color??p(u,r?.overlay?.solid?.color)},gradient:{fromColor:i?.overlay?.gradient?.fromColor??p(u,r?.overlay?.gradient?.fromColor),toColor:i?.overlay?.gradient?.toColor??p(u,r?.overlay?.gradient?.toColor)}},visible:i?.visible??r?.visible??!1}}),l=o(()=>e.value?.overlay),a=o(()=>e.value?.visible);return f({overlay:l,visible:a})}function M(n){const t=v(),e=o(()=>{const a=t.design.value[n],i=t.defaults.value[n];return{enabled:a?.enabled??i?.enabled}}),l=o(()=>e.value?.enabled);return f({enabled:l})}function N(n){const t=v(),e=o(()=>{const a=t.design.value[n],i=t.defaults.value[n];return{value:a?.value??i?.value}}),l=o(()=>e.value?.value);return f({value:l})}function V(n){const t=v(),e=o(()=>{const a=t.design.value[n],i=t.defaults.value[n],r=t.context.value.globalDesign;return{background:{type:a?.background?.type??i?.background?.type,solid:{color:a?.background?.solid?.color??p(r,i?.background?.solid?.color)},gradient:{fromColor:a?.background?.gradient?.fromColor??p(r,i?.background?.gradient?.fromColor),toColor:a?.background?.gradient?.toColor??p(r,i?.background?.gradient?.toColor)}}}}),l=o(()=>e.value?.background);return f({background:l})}function W(){const n=v(),t=o(()=>n.design.value.layout),e=o(()=>t.value);return f({layout:e})}function x(n){return{app:C(n)}}function F(n,t){return{init:()=>{const{app:e}=x(n);return t?.init?.(e),{render:async(l,a)=>(v().init(e,l,a.content,a.design,a.defaults),t?.render?.(e,l,a),{html:await I(e,{context:l}),state:{context:l,data:a}})}}}}function P(n,t){return{init:()=>{const{app:e}=x(n);return t?.init?.(e),{mount:(l,a)=>{v().init(e,a.context,a.data.content,a.data.design,a.data.defaults),t?.mount?.(e,l,a),e.mount(l)},update:l=>{v().update(e,l.data.content,l.data.design,l.data.defaults),t?.update?.(e,l)},unmount:()=>{t?.unmount?.(e),e.unmount()}}}}}export{P as createVueClientApp,F as createVueServerApp,V as useBackgroundElementDesign,T as useButtonElementContent,G as useButtonElementDesign,L as useImageElementContent,K as useImageElementDesign,z as useInputboxElementContent,W as useLayoutElementDesign,A as useSelectboxElementContent,N as useSelectboxElementDesign,B as useTextElementDesign,_ as useTextareaElementContent,O as useTextareaElementDesign,R as useToggleElementContent,M 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};