@webiny/website-builder-vue 6.4.0-beta.4 → 6.4.0-beta.6

package/composables/useBindingsForElement.js

@@ -0,0 +1,24 @@
+import { computed } from "vue";
+import { toJS } from "mobx";
+import { BindingsProcessor } from "@webiny/website-builder-sdk";
+import { useViewport } from "./useViewport.js";
+import { useObservable } from "./useObservable.js";
+import { useDocumentStore } from "../components/DocumentStoreProvider.js";
+const useBindingsForElement = (elementId, breakpoint)=>{
+    const documentStore = useDocumentStore();
+    const viewport = useViewport();
+    const elementBindings = useObservable(()=>{
+        const doc = documentStore.getDocument();
+        if (!doc) return;
+        return toJS(doc.bindings[elementId]);
+    });
+    return computed(()=>{
+        const bindings = elementBindings.value ?? {};
+        const breakpoints = viewport.value?.breakpoints?.map((bp)=>bp.name) ?? [];
+        const processor = new BindingsProcessor(breakpoints);
+        return processor.getBindings(bindings, breakpoint.value);
+    });
+};
+export { useBindingsForElement };
+
+//# sourceMappingURL=useBindingsForElement.js.map

package/composables/useBindingsForElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composables/useBindingsForElement.js","sources":["../../src/composables/useBindingsForElement.ts"],"sourcesContent":["import { computed, type Ref } from \"vue\";\nimport { toJS } from \"mobx\";\nimport { BindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport { useViewport } from \"./useViewport.js\";\nimport { useObservable } from \"./useObservable.js\";\nimport { useDocumentStore } from \"~/components/DocumentStoreProvider.js\";\n\n/**\n * Returns a Vue computed ref containing the merged bindings (inputs + styles)\n * for the given element ID at the current breakpoint.\n *\n * Re-evaluates automatically when:\n *  - the MobX document store changes (via useObservable)\n *  - the breakpoint ref changes\n *  - the viewport breakpoints change\n */\nexport const useBindingsForElement = (elementId: string, breakpoint: Ref<string>) => {\n    const documentStore = useDocumentStore();\n    const viewport = useViewport();\n\n    // Observe this element's bindings directly inside the MobX autorun so that\n    // deep mutations from applyPatch (e.g. adding a child element) trigger a\n    // re-render without needing the top-level document reference to change.\n    // toJS() inside the autorun causes MobX to track all sub-properties.\n    const elementBindings = useObservable(() => {\n        const doc = documentStore.getDocument();\n        if (!doc) {\n            return undefined;\n        }\n        return toJS(doc.bindings[elementId]);\n    });\n\n    return computed(() => {\n        const bindings = elementBindings.value ?? {};\n        const breakpoints =\n            viewport.value?.breakpoints?.map((bp: { name: string }) => bp.name) ?? [];\n        const processor = new BindingsProcessor(breakpoints);\n        return processor.getBindings(bindings, breakpoint.value);\n    });\n};\n"],"names":["useBindingsForElement","elementId","breakpoint","documentStore","useDocumentStore","viewport","useViewport","elementBindings","useObservable","doc","toJS","computed","bindings","breakpoints","bp","processor","BindingsProcessor"],"mappings":";;;;;;AAgBO,MAAMA,wBAAwB,CAACC,WAAmBC;IACrD,MAAMC,gBAAgBC;IACtB,MAAMC,WAAWC;IAMjB,MAAMC,kBAAkBC,cAAc;QAClC,MAAMC,MAAMN,cAAc,WAAW;QACrC,IAAI,CAACM,KACD;QAEJ,OAAOC,KAAKD,IAAI,QAAQ,CAACR,UAAU;IACvC;IAEA,OAAOU,SAAS;QACZ,MAAMC,WAAWL,gBAAgB,KAAK,IAAI,CAAC;QAC3C,MAAMM,cACFR,SAAS,KAAK,EAAE,aAAa,IAAI,CAACS,KAAyBA,GAAG,IAAI,KAAK,EAAE;QAC7E,MAAMC,YAAY,IAAIC,kBAAkBH;QACxC,OAAOE,UAAU,WAAW,CAACH,UAAUV,WAAW,KAAK;IAC3D;AACJ"}

package/composables/useDocumentState.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns a Vue computed ref containing the document's `state` object.
+ * Re-evaluates whenever the MobX document store changes.
+ */
+export declare const useDocumentState: () => import("vue").ComputedRef<import("@webiny/website-builder-sdk/types.js").DocumentState>;

package/composables/useDocumentState.js

@@ -0,0 +1,11 @@
+import { computed } from "vue";
+import { useObservable } from "./useObservable.js";
+import { useDocumentStore } from "../components/DocumentStoreProvider.js";
+const useDocumentState = ()=>{
+    const documentStore = useDocumentStore();
+    const document = useObservable(()=>documentStore.getDocument());
+    return computed(()=>document.value?.state ?? {});
+};
+export { useDocumentState };
+
+//# sourceMappingURL=useDocumentState.js.map

package/composables/useDocumentState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composables/useDocumentState.js","sources":["../../src/composables/useDocumentState.ts"],"sourcesContent":["import { computed } from \"vue\";\nimport { useObservable } from \"./useObservable.js\";\nimport { useDocumentStore } from \"~/components/DocumentStoreProvider.js\";\n\n/**\n * Returns a Vue computed ref containing the document's `state` object.\n * Re-evaluates whenever the MobX document store changes.\n */\nexport const useDocumentState = () => {\n    const documentStore = useDocumentStore();\n    const document = useObservable(() => documentStore.getDocument());\n    return computed(() => document.value?.state ?? {});\n};\n"],"names":["useDocumentState","documentStore","useDocumentStore","document","useObservable","computed"],"mappings":";;;AAQO,MAAMA,mBAAmB;IAC5B,MAAMC,gBAAgBC;IACtB,MAAMC,WAAWC,cAAc,IAAMH,cAAc,WAAW;IAC9D,OAAOI,SAAS,IAAMF,SAAS,KAAK,EAAE,SAAS,CAAC;AACpD"}

package/composables/useObservable.d.ts

@@ -0,0 +1,13 @@
+import { type Ref } from "vue";
+/**
+ * Bridges a MobX observable into a Vue shallow ref.
+ *
+ * The supplied `fn` is run inside a MobX `autorun`. Every time a MobX
+ * observable accessed by `fn` changes, the ref is updated and Vue is told
+ * to treat it as "dirty" so that all computed values and templates that
+ * depend on it re-evaluate.
+ *
+ * Must be called inside a component setup() (or equivalent) so that
+ * `onUnmounted` can clean up the MobX reaction automatically.
+ */
+export declare function useObservable<T>(fn: () => T): Ref<T>;

package/composables/useObservable.js

@@ -0,0 +1,14 @@
+import { getCurrentInstance, onUnmounted, shallowRef, triggerRef } from "vue";
+import { autorun } from "mobx";
+function useObservable(fn) {
+    const value = shallowRef(fn());
+    const disposer = autorun(()=>{
+        value.value = fn();
+        triggerRef(value);
+    });
+    if (getCurrentInstance()) onUnmounted(()=>disposer());
+    return value;
+}
+export { useObservable };
+
+//# sourceMappingURL=useObservable.js.map

package/composables/useObservable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composables/useObservable.js","sources":["../../src/composables/useObservable.ts"],"sourcesContent":["import { shallowRef, onUnmounted, triggerRef, getCurrentInstance, type Ref } from \"vue\";\nimport { autorun } from \"mobx\";\n\n/**\n * Bridges a MobX observable into a Vue shallow ref.\n *\n * The supplied `fn` is run inside a MobX `autorun`. Every time a MobX\n * observable accessed by `fn` changes, the ref is updated and Vue is told\n * to treat it as \"dirty\" so that all computed values and templates that\n * depend on it re-evaluate.\n *\n * Must be called inside a component setup() (or equivalent) so that\n * `onUnmounted` can clean up the MobX reaction automatically.\n */\nexport function useObservable<T>(fn: () => T): Ref<T> {\n    const value = shallowRef<T>(fn());\n\n    const disposer = autorun(() => {\n        value.value = fn();\n        // shallowRef won't trigger on the same object reference; triggerRef\n        // forces Vue to re-evaluate all dependents regardless.\n        triggerRef(value);\n    });\n\n    if (getCurrentInstance()) {\n        onUnmounted(() => disposer());\n    }\n\n    return value as Ref<T>;\n}\n"],"names":["useObservable","fn","value","shallowRef","disposer","autorun","triggerRef","getCurrentInstance","onUnmounted"],"mappings":";;AAcO,SAASA,cAAiBC,EAAW;IACxC,MAAMC,QAAQC,WAAcF;IAE5B,MAAMG,WAAWC,QAAQ;QACrBH,MAAM,KAAK,GAAGD;QAGdK,WAAWJ;IACf;IAEA,IAAIK,sBACAC,YAAY,IAAMJ;IAGtB,OAAOF;AACX"}

package/{src/composables/useSelectFromState.ts → composables/useSelectFromState.d.ts}

@@ -1,6 +1,4 @@
-import { computed, type Ref } from "vue";
-import { useObservable } from "./useObservable.js";
-
+import { type Ref } from "vue";
 /**
  * Selects a slice of MobX state and exposes it as a Vue computed ref.
  *
@@ -9,10 +7,4 @@ import { useObservable } from "./useObservable.js";
  * - `selector` is then applied to the latest state value in a Vue computed,
  *   so it also re-runs when any Vue reactive value accessed inside it changes.
  */
-export function useSelectFromState<TState, T>(
-    getState: () => TState,
-    selector: (state: TState) => T
-): Ref<T> {
-    const stateRef = useObservable(getState);
-    return computed(() => selector(stateRef.value)) as unknown as Ref<T>;
-}
+export declare function useSelectFromState<TState, T>(getState: () => TState, selector: (state: TState) => T): Ref<T>;

package/composables/useSelectFromState.js

@@ -0,0 +1,9 @@
+import { computed } from "vue";
+import { useObservable } from "./useObservable.js";
+function useSelectFromState(getState, selector) {
+    const stateRef = useObservable(getState);
+    return computed(()=>selector(stateRef.value));
+}
+export { useSelectFromState };
+
+//# sourceMappingURL=useSelectFromState.js.map

package/composables/useSelectFromState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composables/useSelectFromState.js","sources":["../../src/composables/useSelectFromState.ts"],"sourcesContent":["import { computed, type Ref } from \"vue\";\nimport { useObservable } from \"./useObservable.js\";\n\n/**\n * Selects a slice of MobX state and exposes it as a Vue computed ref.\n *\n * - `getState` is tracked by MobX: any observable accessed inside it causes\n *   re-evaluation when it changes.\n * - `selector` is then applied to the latest state value in a Vue computed,\n *   so it also re-runs when any Vue reactive value accessed inside it changes.\n */\nexport function useSelectFromState<TState, T>(\n    getState: () => TState,\n    selector: (state: TState) => T\n): Ref<T> {\n    const stateRef = useObservable(getState);\n    return computed(() => selector(stateRef.value)) as unknown as Ref<T>;\n}\n"],"names":["useSelectFromState","getState","selector","stateRef","useObservable","computed"],"mappings":";;AAWO,SAASA,mBACZC,QAAsB,EACtBC,QAA8B;IAE9B,MAAMC,WAAWC,cAAcH;IAC/B,OAAOI,SAAS,IAAMH,SAASC,SAAS,KAAK;AACjD"}

package/composables/useViewport.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns a reactive ref that contains the current viewport info.
+ *
+ * Starts with the current value (or a sensible default on the server) and
+ * updates whenever the viewport manager fires a change-end event.
+ */
+export declare const useViewport: () => import("vue").ShallowRef<import("@webiny/website-builder-sdk").ViewportInfo, import("@webiny/website-builder-sdk").ViewportInfo>;

package/composables/useViewport.js

@@ -0,0 +1,18 @@
+import { onMounted, onUnmounted, shallowRef, triggerRef } from "vue";
+import { viewportManager } from "@webiny/website-builder-sdk";
+const useViewport = ()=>{
+    const viewport = shallowRef(viewportManager.getViewport());
+    let unsubscribe;
+    onMounted(()=>{
+        viewport.value = viewportManager.getViewport();
+        unsubscribe = viewportManager.onViewportChangeEnd((newViewport)=>{
+            viewport.value = newViewport;
+            triggerRef(viewport);
+        });
+    });
+    onUnmounted(()=>unsubscribe?.());
+    return viewport;
+};
+export { useViewport };
+
+//# sourceMappingURL=useViewport.js.map

package/composables/useViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composables/useViewport.js","sources":["../../src/composables/useViewport.ts"],"sourcesContent":["import { shallowRef, triggerRef, onMounted, onUnmounted } from \"vue\";\nimport { viewportManager } from \"@webiny/website-builder-sdk\";\n\n/**\n * Returns a reactive ref that contains the current viewport info.\n *\n * Starts with the current value (or a sensible default on the server) and\n * updates whenever the viewport manager fires a change-end event.\n */\nexport const useViewport = () => {\n    const viewport = shallowRef(viewportManager.getViewport());\n    let unsubscribe: (() => void) | undefined;\n\n    onMounted(() => {\n        // Sync the latest value after mount (in case a resize already happened).\n        viewport.value = viewportManager.getViewport();\n\n        unsubscribe = viewportManager.onViewportChangeEnd(newViewport => {\n            viewport.value = newViewport;\n            triggerRef(viewport);\n        });\n    });\n\n    onUnmounted(() => unsubscribe?.());\n\n    return viewport;\n};\n"],"names":["useViewport","viewport","shallowRef","viewportManager","unsubscribe","onMounted","newViewport","triggerRef","onUnmounted"],"mappings":";;AASO,MAAMA,cAAc;IACvB,MAAMC,WAAWC,WAAWC,gBAAgB,WAAW;IACvD,IAAIC;IAEJC,UAAU;QAENJ,SAAS,KAAK,GAAGE,gBAAgB,WAAW;QAE5CC,cAAcD,gBAAgB,mBAAmB,CAACG,CAAAA;YAC9CL,SAAS,KAAK,GAAGK;YACjBC,WAAWN;QACf;IACJ;IAEAO,YAAY,IAAMJ;IAElB,OAAOH;AACX"}

package/createComponent.d.ts

@@ -0,0 +1,21 @@
+import type { Component, ComponentManifestInput } from "@webiny/website-builder-sdk";
+import type { ExtractInputs } from "./types.js";
+/**
+ * Wraps a Vue component with a Webiny Website Builder manifest so it can be
+ * registered with the SDK and rendered inside a DocumentRenderer.
+ *
+ * Usage:
+ * ```ts
+ * import { createComponent, createTextInput } from "@webiny/website-builder-vue";
+ *
+ * const MyBanner = (props: ComponentProps<{ headline: string }>) =>
+ *     h("div", props.inputs.headline);
+ *
+ * export const Banner = createComponent(MyBanner, {
+ *     name: "My/Banner",
+ *     label: "Banner",
+ *     inputs: { headline: createTextInput({ label: "Headline" }) }
+ * });
+ * ```
+ */
+export declare function createComponent<TComponent extends (props: any) => any, TInputs extends ExtractInputs<Parameters<TComponent>[0]>>(component: TComponent, manifest: ComponentManifestInput<TInputs>): Component;

package/createComponent.js

@@ -0,0 +1,31 @@
+import { createSlotInput } from "@webiny/website-builder-sdk";
+function createComponent(component, manifest) {
+    const inputs = [];
+    if (Array.isArray(manifest.inputs)) inputs.push(...manifest.inputs);
+    else {
+        const inputsObject = manifest.inputs ?? {};
+        Object.keys(inputsObject).forEach((name)=>{
+            inputs.push({
+                ...inputsObject[name],
+                name
+            });
+        });
+    }
+    if (manifest.acceptsChildren) {
+        const hasChildren = inputs.some((input)=>"children" === input.name);
+        if (!hasChildren) inputs.push(createSlotInput({
+            name: "children"
+        }));
+    }
+    return {
+        component,
+        manifest: {
+            ...manifest,
+            tags: manifest.tags ?? [],
+            inputs
+        }
+    };
+}
+export { createComponent };
+
+//# sourceMappingURL=createComponent.js.map

package/createComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createComponent.js","sources":["../src/createComponent.ts"],"sourcesContent":["import type {\n    Component,\n    ComponentInput,\n    ComponentManifest,\n    ComponentManifestInput,\n    InputFactory\n} from \"@webiny/website-builder-sdk\";\nimport { createSlotInput } from \"@webiny/website-builder-sdk\";\nimport type { ExtractInputs } from \"~/types.js\";\n\n/**\n * Wraps a Vue component with a Webiny Website Builder manifest so it can be\n * registered with the SDK and rendered inside a DocumentRenderer.\n *\n * Usage:\n * ```ts\n * import { createComponent, createTextInput } from \"@webiny/website-builder-vue\";\n *\n * const MyBanner = (props: ComponentProps<{ headline: string }>) =>\n *     h(\"div\", props.inputs.headline);\n *\n * export const Banner = createComponent(MyBanner, {\n *     name: \"My/Banner\",\n *     label: \"Banner\",\n *     inputs: { headline: createTextInput({ label: \"Headline\" }) }\n * });\n * ```\n */\nexport function createComponent<\n    TComponent extends (props: any) => any,\n    TInputs extends ExtractInputs<Parameters<TComponent>[0]>\n>(component: TComponent, manifest: ComponentManifestInput<TInputs>): Component {\n    const inputs: ComponentInput[] = [];\n\n    if (Array.isArray(manifest.inputs)) {\n        inputs.push(...manifest.inputs);\n    } else {\n        const inputsObject: Record<string, InputFactory<any>> = manifest.inputs ?? {};\n        Object.keys(inputsObject).forEach((name: string) => {\n            inputs.push({ ...inputsObject[name], name });\n        });\n    }\n\n    if (manifest.acceptsChildren) {\n        const hasChildren = inputs.some(input => input.name === \"children\");\n        if (!hasChildren) {\n            inputs.push(createSlotInput({ name: \"children\" }));\n        }\n    }\n\n    return {\n        component,\n        manifest: { ...manifest, tags: manifest.tags ?? [], inputs } as ComponentManifest\n    };\n}\n"],"names":["createComponent","component","manifest","inputs","Array","inputsObject","Object","name","hasChildren","input","createSlotInput"],"mappings":";AA4BO,SAASA,gBAGdC,SAAqB,EAAEC,QAAyC;IAC9D,MAAMC,SAA2B,EAAE;IAEnC,IAAIC,MAAM,OAAO,CAACF,SAAS,MAAM,GAC7BC,OAAO,IAAI,IAAID,SAAS,MAAM;SAC3B;QACH,MAAMG,eAAkDH,SAAS,MAAM,IAAI,CAAC;QAC5EI,OAAO,IAAI,CAACD,cAAc,OAAO,CAAC,CAACE;YAC/BJ,OAAO,IAAI,CAAC;gBAAE,GAAGE,YAAY,CAACE,KAAK;gBAAEA;YAAK;QAC9C;IACJ;IAEA,IAAIL,SAAS,eAAe,EAAE;QAC1B,MAAMM,cAAcL,OAAO,IAAI,CAACM,CAAAA,QAASA,AAAe,eAAfA,MAAM,IAAI;QACnD,IAAI,CAACD,aACDL,OAAO,IAAI,CAACO,gBAAgB;YAAE,MAAM;QAAW;IAEvD;IAEA,OAAO;QACHT;QACA,UAAU;YAAE,GAAGC,QAAQ;YAAE,MAAMA,SAAS,IAAI,IAAI,EAAE;YAAEC;QAAO;IAC/D;AACJ"}

package/editorComponents/Box.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithChildren } from "../types.js";
+/**
+ * A generic container that renders only its children slot.
+ */
+export declare const BoxComponent: (props: ComponentPropsWithChildren) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null;

package/editorComponents/Box.js

@@ -0,0 +1,4 @@
+const BoxComponent = (props)=>props.inputs?.children ?? null;
+export { BoxComponent };
+
+//# sourceMappingURL=Box.js.map

package/editorComponents/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorComponents/Box.js","sources":["../../src/editorComponents/Box.ts"],"sourcesContent":["import type { ComponentPropsWithChildren } from \"~/types.js\";\n\n/**\n * A generic container that renders only its children slot.\n */\nexport const BoxComponent = (props: ComponentPropsWithChildren) => {\n    return props.inputs?.children ?? null;\n};\n"],"names":["BoxComponent","props"],"mappings":"AAKO,MAAMA,eAAe,CAACC,QAClBA,MAAM,MAAM,EAAE,YAAY"}

package/editorComponents/Box.manifest.d.ts

@@ -0,0 +1 @@
+export declare const Box: import("@webiny/website-builder-sdk/types.js").Component;

package/{src/editorComponents/Box.manifest.ts → editorComponents/Box.manifest.js}

@@ -1,12 +1,11 @@
 "use client";
-import { createComponent } from "~/createComponent.js";
+import { createComponent } from "../createComponent.js";
 import { BoxComponent } from "./Box.js";
-
-export const Box = createComponent(BoxComponent, {
+const Box = createComponent(BoxComponent, {
     name: "Webiny/Box",
     label: "Box",
     group: "basic",
-    image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z"/></svg>`,
+    image: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z"/></svg>',
     acceptsChildren: true,
     defaults: {
         styles: {
@@ -17,3 +16,6 @@ export const Box = createComponent(BoxComponent, {
         }
     }
 });
+export { Box };
+
+//# sourceMappingURL=Box.manifest.js.map

package/editorComponents/Box.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorComponents/Box.manifest.js","sources":["../../src/editorComponents/Box.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { BoxComponent } from \"./Box.js\";\n\nexport const Box = createComponent(BoxComponent, {\n    name: \"Webiny/Box\",\n    label: \"Box\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z\"/></svg>`,\n    acceptsChildren: true,\n    defaults: {\n        styles: {\n            paddingTop: \"5px\",\n            paddingRight: \"5px\",\n            paddingBottom: \"5px\",\n            paddingLeft: \"5px\"\n        }\n    }\n});\n"],"names":["Box","createComponent","BoxComponent"],"mappings":";;;AAIO,MAAMA,MAAMC,gBAAgBC,cAAc;IAC7C,MAAM;IACN,OAAO;IACP,OAAO;IACP,OAAO;IACP,iBAAiB;IACjB,UAAU;QACN,QAAQ;YACJ,YAAY;YACZ,cAAc;YACd,eAAe;YACf,aAAa;QACjB;IACJ;AACJ"}

package/editorComponents/Fragment.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "../types.js";
+type FragmentProps = ComponentProps<{
+    name: string;
+}>;
+/**
+ * Looks up a named fixed fragment provided by the consumer's DocumentRenderer
+ * and renders it in place. Shows a placeholder in editing mode when no
+ * matching fragment is found.
+ */
+export declare const FragmentComponent: (props: FragmentProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null;
+export {};

package/editorComponents/Fragment.js

@@ -0,0 +1,39 @@
+import { h } from "vue";
+import { contentSdk } from "@webiny/website-builder-sdk";
+import { useDocumentFragments } from "../components/FragmentsProvider.js";
+const findFixed = (fragments, name)=>fragments.find((f)=>"fixed" === f.type && f.name === name);
+const FragmentPlaceholder = (props)=>{
+    const label = props.name ? h("strong", null, [
+        ` ${props.name} `
+    ]) : " ";
+    return h("div", {
+        style: {
+            display: "flex",
+            height: "100px",
+            backgroundColor: "#f4f4f4",
+            justifyContent: "center",
+            alignItems: "center",
+            fill: "#ffffff"
+        }
+    }, [
+        "This is a placeholder for",
+        label,
+        "content coming from your frontend app."
+    ]);
+};
+const FragmentComponent = (props)=>{
+    const isEditing = contentSdk.isEditing();
+    const fragments = useDocumentFragments();
+    const fragment = findFixed(fragments, props.inputs?.name);
+    if (!fragment && isEditing) return h(FragmentPlaceholder, {
+        name: props.inputs?.name
+    });
+    if (fragment) {
+        if ("function" == typeof fragment.element) return h("div", null, fragment.element());
+        return fragment.element;
+    }
+    return null;
+};
+export { FragmentComponent };
+
+//# sourceMappingURL=Fragment.js.map

package/editorComponents/Fragment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorComponents/Fragment.js","sources":["../../src/editorComponents/Fragment.ts"],"sourcesContent":["import { h } from \"vue\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport { useDocumentFragments } from \"~/components/FragmentsProvider.js\";\nimport type { ComponentProps } from \"~/types.js\";\nimport type { DocumentFragments } from \"~/components/FragmentsProvider.js\";\nimport type { DocumentFragmentConfig } from \"~/components/FragmentsProvider.js\";\n\ntype FragmentProps = ComponentProps<{ name: string }>;\n\nconst findFixed = (fragments: DocumentFragments, name: string) =>\n    fragments.find(f => f.type === \"fixed\" && f.name === name) as\n        | Extract<DocumentFragmentConfig, { type: \"fixed\" }>\n        | undefined;\n\nconst FragmentPlaceholder = (props: { name: string }) => {\n    const label = props.name ? h(\"strong\", null, [` ${props.name} `]) : \" \";\n\n    return h(\n        \"div\",\n        {\n            style: {\n                display: \"flex\",\n                height: \"100px\",\n                backgroundColor: \"#f4f4f4\",\n                justifyContent: \"center\",\n                alignItems: \"center\",\n                fill: \"#ffffff\"\n            }\n        },\n        [\"This is a placeholder for\", label, \"content coming from your frontend app.\"]\n    );\n};\n\n/**\n * Looks up a named fixed fragment provided by the consumer's DocumentRenderer\n * and renders it in place. Shows a placeholder in editing mode when no\n * matching fragment is found.\n */\nexport const FragmentComponent = (props: FragmentProps) => {\n    const isEditing = contentSdk.isEditing();\n    const fragments = useDocumentFragments();\n    const fragment = findFixed(fragments, props.inputs?.name);\n\n    if (!fragment && isEditing) {\n        return h(FragmentPlaceholder, { name: props.inputs?.name });\n    }\n\n    if (fragment) {\n        // `element` is a Vue slot function (() => VNode[]) or a VNode.\n        if (typeof fragment.element === \"function\") {\n            return h(\"div\", null, fragment.element());\n        }\n        return fragment.element;\n    }\n\n    return null;\n};\n"],"names":["findFixed","fragments","name","f","FragmentPlaceholder","props","label","h","FragmentComponent","isEditing","contentSdk","useDocumentFragments","fragment"],"mappings":";;;AASA,MAAMA,YAAY,CAACC,WAA8BC,OAC7CD,UAAU,IAAI,CAACE,CAAAA,IAAKA,AAAW,YAAXA,EAAE,IAAI,IAAgBA,EAAE,IAAI,KAAKD;AAIzD,MAAME,sBAAsB,CAACC;IACzB,MAAMC,QAAQD,MAAM,IAAI,GAAGE,EAAE,UAAU,MAAM;QAAC,CAAC,CAAC,EAAEF,MAAM,IAAI,CAAC,CAAC,CAAC;KAAC,IAAI;IAEpE,OAAOE,EACH,OACA;QACI,OAAO;YACH,SAAS;YACT,QAAQ;YACR,iBAAiB;YACjB,gBAAgB;YAChB,YAAY;YACZ,MAAM;QACV;IACJ,GACA;QAAC;QAA6BD;QAAO;KAAyC;AAEtF;AAOO,MAAME,oBAAoB,CAACH;IAC9B,MAAMI,YAAYC,WAAW,SAAS;IACtC,MAAMT,YAAYU;IAClB,MAAMC,WAAWZ,UAAUC,WAAWI,MAAM,MAAM,EAAE;IAEpD,IAAI,CAACO,YAAYH,WACb,OAAOF,EAAEH,qBAAqB;QAAE,MAAMC,MAAM,MAAM,EAAE;IAAK;IAG7D,IAAIO,UAAU;QAEV,IAAI,AAA4B,cAA5B,OAAOA,SAAS,OAAO,EACvB,OAAOL,EAAE,OAAO,MAAMK,SAAS,OAAO;QAE1C,OAAOA,SAAS,OAAO;IAC3B;IAEA,OAAO;AACX"}

package/editorComponents/Fragment.manifest.d.ts

@@ -0,0 +1 @@
+export declare const Fragment: import("@webiny/website-builder-sdk").Component;

package/{src/editorComponents/Fragment.manifest.ts → editorComponents/Fragment.manifest.js}

@@ -1,13 +1,12 @@
 "use client";
 import { createTextInput } from "@webiny/website-builder-sdk";
-import { createComponent } from "~/createComponent.js";
+import { createComponent } from "../createComponent.js";
 import { FragmentComponent } from "./Fragment.js";
-
-export const Fragment = createComponent(FragmentComponent, {
+const Fragment = createComponent(FragmentComponent, {
     name: "Webiny/Fragment",
     label: "Fragment",
     group: "basic",
-    image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z"/></svg>`,
+    image: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z"/></svg>',
     inputs: [
         createTextInput({
             name: "name",
@@ -17,3 +16,6 @@ export const Fragment = createComponent(FragmentComponent, {
         })
     ]
 });
+export { Fragment };
+
+//# sourceMappingURL=Fragment.manifest.js.map

package/editorComponents/Fragment.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorComponents/Fragment.manifest.js","sources":["../../src/editorComponents/Fragment.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createTextInput } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { FragmentComponent } from \"./Fragment.js\";\n\nexport const Fragment = createComponent(FragmentComponent, {\n    name: \"Webiny/Fragment\",\n    label: \"Fragment\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z\"/></svg>`,\n    inputs: [\n        createTextInput({\n            name: \"name\",\n            label: \"Fragment\",\n            description: \"Select fragment to display.\",\n            renderer: \"Webiny/FragmentSelector\"\n        })\n    ]\n});\n"],"names":["Fragment","createComponent","FragmentComponent","createTextInput"],"mappings":";;;;AAKO,MAAMA,WAAWC,gBAAgBC,mBAAmB;IACvD,MAAM;IACN,OAAO;IACP,OAAO;IACP,OAAO;IACP,QAAQ;QACJC,gBAAgB;YACZ,MAAM;YACN,OAAO;YACP,aAAa;YACb,UAAU;QACd;KACH;AACL"}

package/editorComponents/Grid.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentProps } from "../types.js";
+import type { VNode } from "vue";
+interface Column {
+    children: VNode | null;
+}
+type GridProps = ComponentProps<{
+    gridLayout: string;
+    rowCount: number;
+    rowGap: number;
+    columnGap: number;
+    columns: Column[];
+    stackAtBreakpoint?: string;
+    reverseWhenStacked?: boolean;
+}>;
+/**
+ * Renders a flexible CSS grid with rows/columns derived from `gridLayout`
+ * (e.g. "6-6" = two equal columns, "4-8" = one-third + two-thirds, etc.).
+ *
+ * The children of each column are VNodes resolved by the SDK (ElementSlot).
+ */
+export declare const GridComponent: (props: GridProps) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;
+export {};

package/editorComponents/Grid.js

@@ -0,0 +1,33 @@
+import { h } from "vue";
+const GridComponent = (props)=>{
+    const { inputs, styles, breakpoint } = props;
+    const { gridLayout = "12", columns = [], columnGap, stackAtBreakpoint, reverseWhenStacked } = inputs;
+    const rowConfig = gridLayout.split("-").map((s)=>parseInt(s));
+    const rows = [];
+    for(let i = 0; i < columns.length; i += rowConfig.length)rows.push(columns.slice(i, i + rowConfig.length));
+    const cellWidthReduction = columnGap ? columnGap - columnGap / rowConfig.length : 0;
+    const stackColumns = breakpoint === stackAtBreakpoint;
+    const gridStyles = {
+        ...styles
+    };
+    if (stackColumns) gridStyles.flexDirection = reverseWhenStacked ? "column-reverse" : "column";
+    const cells = rows.flatMap((rowCols)=>rowCols.map((col, i)=>{
+            const width = stackColumns ? "100%" : `calc(${rowConfig[i] / 12 * 100}% - ${cellWidthReduction}px)`;
+            return h("div", {
+                key: i,
+                style: {
+                    flex: `0 0 ${width}`,
+                    maxWidth: width,
+                    boxSizing: "border-box"
+                }
+            }, [
+                col.children
+            ]);
+        }));
+    return h("div", {
+        style: gridStyles
+    }, cells);
+};
+export { GridComponent };
+
+//# sourceMappingURL=Grid.js.map

package/editorComponents/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorComponents/Grid.js","sources":["../../src/editorComponents/Grid.ts"],"sourcesContent":["import { h } from \"vue\";\nimport type { ComponentProps } from \"~/types.js\";\nimport type { VNode } from \"vue\";\n\ninterface Column {\n    children: VNode | null;\n}\n\ntype GridProps = ComponentProps<{\n    gridLayout: string;\n    rowCount: number;\n    rowGap: number;\n    columnGap: number;\n    columns: Column[];\n    stackAtBreakpoint?: string;\n    reverseWhenStacked?: boolean;\n}>;\n\n/**\n * Renders a flexible CSS grid with rows/columns derived from `gridLayout`\n * (e.g. \"6-6\" = two equal columns, \"4-8\" = one-third + two-thirds, etc.).\n *\n * The children of each column are VNodes resolved by the SDK (ElementSlot).\n */\nexport const GridComponent = (props: GridProps) => {\n    const { inputs, styles, breakpoint } = props;\n    const {\n        gridLayout = \"12\",\n        columns = [],\n        columnGap,\n        stackAtBreakpoint,\n        reverseWhenStacked\n    } = inputs;\n\n    const rowConfig = gridLayout.split(\"-\").map(s => parseInt(s));\n    const rows: Column[][] = [];\n\n    for (let i = 0; i < columns.length; i += rowConfig.length) {\n        rows.push(columns.slice(i, i + rowConfig.length));\n    }\n\n    const cellWidthReduction = columnGap ? columnGap - columnGap / rowConfig.length : 0;\n    const stackColumns = breakpoint === stackAtBreakpoint;\n\n    const gridStyles = { ...styles };\n    if (stackColumns) {\n        gridStyles.flexDirection = reverseWhenStacked ? \"column-reverse\" : \"column\";\n    }\n\n    const cells = rows.flatMap(rowCols =>\n        rowCols.map((col, i) => {\n            const width = stackColumns\n                ? \"100%\"\n                : `calc(${(rowConfig[i] / 12) * 100}% - ${cellWidthReduction}px)`;\n\n            return h(\n                \"div\",\n                {\n                    key: i,\n                    style: {\n                        flex: `0 0 ${width}`,\n                        maxWidth: width,\n                        boxSizing: \"border-box\"\n                    }\n                },\n                [col.children]\n            );\n        })\n    );\n\n    return h(\"div\", { style: gridStyles }, cells);\n};\n"],"names":["GridComponent","props","inputs","styles","breakpoint","gridLayout","columns","columnGap","stackAtBreakpoint","reverseWhenStacked","rowConfig","s","parseInt","rows","i","cellWidthReduction","stackColumns","gridStyles","cells","rowCols","col","width","h"],"mappings":";AAwBO,MAAMA,gBAAgB,CAACC;IAC1B,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAE,GAAGH;IACvC,MAAM,EACFI,aAAa,IAAI,EACjBC,UAAU,EAAE,EACZC,SAAS,EACTC,iBAAiB,EACjBC,kBAAkB,EACrB,GAAGP;IAEJ,MAAMQ,YAAYL,WAAW,KAAK,CAAC,KAAK,GAAG,CAACM,CAAAA,IAAKC,SAASD;IAC1D,MAAME,OAAmB,EAAE;IAE3B,IAAK,IAAIC,IAAI,GAAGA,IAAIR,QAAQ,MAAM,EAAEQ,KAAKJ,UAAU,MAAM,CACrDG,KAAK,IAAI,CAACP,QAAQ,KAAK,CAACQ,GAAGA,IAAIJ,UAAU,MAAM;IAGnD,MAAMK,qBAAqBR,YAAYA,YAAYA,YAAYG,UAAU,MAAM,GAAG;IAClF,MAAMM,eAAeZ,eAAeI;IAEpC,MAAMS,aAAa;QAAE,GAAGd,MAAM;IAAC;IAC/B,IAAIa,cACAC,WAAW,aAAa,GAAGR,qBAAqB,mBAAmB;IAGvE,MAAMS,QAAQL,KAAK,OAAO,CAACM,CAAAA,UACvBA,QAAQ,GAAG,CAAC,CAACC,KAAKN;YACd,MAAMO,QAAQL,eACR,SACA,CAAC,KAAK,EAAGN,SAAS,CAACI,EAAE,GAAG,KAAM,IAAI,IAAI,EAAEC,mBAAmB,GAAG,CAAC;YAErE,OAAOO,EACH,OACA;gBACI,KAAKR;gBACL,OAAO;oBACH,MAAM,CAAC,IAAI,EAAEO,OAAO;oBACpB,UAAUA;oBACV,WAAW;gBACf;YACJ,GACA;gBAACD,IAAI,QAAQ;aAAC;QAEtB;IAGJ,OAAOE,EAAE,OAAO;QAAE,OAAOL;IAAW,GAAGC;AAC3C"}

package/editorComponents/Grid.manifest.d.ts

@@ -0,0 +1 @@
+export declare const Grid: import("@webiny/website-builder-sdk").Component;