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

package/src/editorComponents/Grid.ts

@@ -0,0 +1,72 @@
+import { h } from "vue";
+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 const GridComponent = (props: GridProps) => {
+    const { inputs, styles, breakpoint } = props;
+    const {
+        gridLayout = "12",
+        columns = [],
+        columnGap,
+        stackAtBreakpoint,
+        reverseWhenStacked
+    } = inputs;
+
+    const rowConfig = gridLayout.split("-").map(s => parseInt(s));
+    const rows: Column[][] = [];
+
+    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);
+};

package/src/editorComponents/GridColumn.manifest.ts

@@ -0,0 +1,23 @@
+"use client";
+import { StyleSettings } from "@webiny/website-builder-sdk";
+import { createComponent } from "~/createComponent.js";
+import { GridColumnComponent } from "./GridColumn.js";
+
+export const GridColumn = createComponent(GridColumnComponent, {
+    name: "Webiny/GridColumn",
+    label: "Column",
+    image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M600-120q-33 0-56.5-23.5T520-200v-560q0-33 23.5-56.5T600-840h160q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H600Zm0-640v560h160v-560H600ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h160q33 0 56.5 23.5T440-760v560q0 33-23.5 56.5T360-120H200Zm0-640v560h160v-560H200Zm560 0H600h160Zm-400 0H200h160Z"/></svg>`,
+    canDrag: false,
+    canDelete: false,
+    acceptsChildren: true,
+    hideFromToolbar: true,
+    hideStyleSettings: [StyleSettings.Visibility],
+    defaults: {
+        styles: {
+            paddingTop: "10px",
+            paddingRight: "10px",
+            paddingBottom: "10px",
+            paddingLeft: "10px"
+        }
+    }
+});

package/src/editorComponents/GridColumn.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithChildren } from "~/types.js";
+
+/** Renders only its children slot (the column content). */
+export const GridColumnComponent = (props: ComponentPropsWithChildren) => {
+    return props.inputs?.children ?? null;
+};

package/src/editorComponents/Image.manifest.ts

@@ -0,0 +1,36 @@
+"use client";
+import { createFileInput, createTextInput } from "@webiny/website-builder-sdk";
+import { createComponent } from "~/createComponent.js";
+import { ImageComponent } from "./Image.js";
+
+// ImageComponent is a defineComponent result (object), not a plain function.
+// createComponent accepts any component type at runtime; cast to satisfy the
+// type constraint which is only used for input-type inference.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Image = createComponent(ImageComponent as unknown as (props: any) => any, {
+    name: "Webiny/Image",
+    label: "Image",
+    group: "basic",
+    image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>`,
+    autoApplyStyles: false,
+    inputs: {
+        image: createFileInput({
+            label: "Image",
+            allowedFileTypes: ["image/*"],
+            onChange: ({ inputs }) => {
+                if (inputs.image) {
+                    inputs.title = inputs.image.name;
+                    inputs.altText = inputs.image.name;
+                }
+            }
+        }),
+        title: createTextInput({ label: "Title", description: "Title of the image" }),
+        altText: createTextInput({
+            label: "Alternate Text",
+            description: "Shown when the user has disabled images"
+        })
+    },
+    defaults: {
+        styles: { width: "100%" }
+    }
+});

package/src/editorComponents/Image.ts

@@ -0,0 +1,144 @@
+import { defineComponent, ref, watch, h, Fragment, type PropType } from "vue";
+import { contentSdk } from "@webiny/website-builder-sdk";
+import type { CssProperties } from "@webiny/website-builder-sdk";
+
+const SUPPORTED_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];
+
+type ImageInputs = {
+    title: string;
+    altText: string;
+    image: {
+        id: string;
+        name: string;
+        size: number;
+        mimeType: string;
+        src: string;
+    };
+};
+
+const getSrcSet = (src: string, widths: number[]) =>
+    widths.map(w => `${src}?width=${w} ${w}w`).join(", ");
+
+const computeSrcSetWidths = (width?: string | number): number[] => {
+    if (width && String(width).endsWith("px")) {
+        const px = parseInt(String(width));
+        const widths: number[] = [];
+        for (const w of SUPPORTED_WIDTHS) {
+            widths.push(w);
+            if (w >= px) {
+                break;
+            }
+        }
+        return widths;
+    }
+    return SUPPORTED_WIDTHS;
+};
+
+const ImagePlaceholder = (props: { style: CssProperties }) =>
+    h(
+        "div",
+        {
+            style: {
+                display: "flex",
+                height: "200px",
+                backgroundColor: "#f4f4f4",
+                justifyContent: "center",
+                alignItems: "center",
+                fill: "#ffffff",
+                ...props.style
+            }
+        },
+        [
+            h(
+                "svg",
+                {
+                    style: {
+                        width: "70px",
+                        height: "70px",
+                        filter: "drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)"
+                    },
+                    xmlns: "http://www.w3.org/2000/svg",
+                    height: "24px",
+                    viewBox: "0 -960 960 960",
+                    width: "24px"
+                },
+                [
+                    h("path", {
+                        d: "M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"
+                    })
+                ]
+            )
+        ]
+    );
+
+export const ImageComponent = defineComponent({
+    name: "WebinyImageComponent",
+    props: {
+        inputs: { type: Object as PropType<ImageInputs>, required: true },
+        styles: { type: Object as PropType<CssProperties>, default: () => ({}) }
+    },
+    setup(props) {
+        // In editing mode start as not-loaded (fade in after load).
+        // In live mode start as loaded (no fade effect needed).
+        const isLoaded = ref(!contentSdk.isEditing());
+
+        watch(
+            () => props.inputs?.image?.src,
+            src => {
+                if (!src) {
+                    isLoaded.value = false;
+                }
+            }
+        );
+
+        function onLoad() {
+            if (contentSdk.isEditing()) {
+                setTimeout(() => {
+                    isLoaded.value = true;
+                }, 100);
+            } else {
+                isLoaded.value = true;
+            }
+        }
+
+        return () => {
+            const { inputs, styles } = props;
+            const { title = "", altText, image } = inputs;
+            const src = image?.src;
+
+            if (!src) {
+                return h(ImagePlaceholder, { style: styles });
+            }
+
+            if (src.endsWith(".svg")) {
+                return h("object", {
+                    style: { maxWidth: "100%", ...styles },
+                    title,
+                    data: src
+                });
+            }
+
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const imageStyles: CssProperties = {
+                maxWidth: "100%",
+                opacity: isLoaded.value ? 1 : 0,
+                transition: "opacity 0.3s ease",
+                ...styles
+            } as any;
+
+            const srcSet = getSrcSet(src, computeSrcSetWidths(styles.width));
+
+            return h(Fragment, null, [
+                !isLoaded.value ? h(ImagePlaceholder, { style: styles }) : null,
+                h("img", {
+                    alt: altText,
+                    title,
+                    src,
+                    srcset: srcSet,
+                    style: imageStyles,
+                    onLoad
+                })
+            ]);
+        };
+    }
+});

package/src/editorComponents/Lexical.manifest.ts

@@ -0,0 +1,24 @@
+"use client";
+import { createLexicalInput } from "@webiny/website-builder-sdk";
+import { createComponent } from "~/createComponent.js";
+import { LexicalComponent, createLexicalValue } from "./Lexical.js";
+
+export const Lexical = createComponent(LexicalComponent, {
+    name: "Webiny/Lexical",
+    label: "Rich Text",
+    group: "basic",
+    image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M280-160v-520H80v-120h520v120H400v520H280Zm360 0v-320H520v-120h360v120H760v320H640Z"/></svg>`,
+    inputs: [
+        createLexicalInput({
+            name: "content",
+            label: "Content"
+        })
+    ],
+    defaults: {
+        inputs: {
+            content: createLexicalValue(
+                "Examine she brother prudent add day ham. Far stairs now coming bed oppose hunted become his. You zealously departure had procuring suspicion. Books whose front would purse if be do decay. Quitting you way formerly disposed perceive ladyship are. Common turned boy direct and yet."
+            )
+        }
+    }
+});

package/src/editorComponents/Lexical.ts

@@ -0,0 +1,23 @@
+import { h } from "vue";
+import type { ComponentProps } from "~/types.js";
+
+export const createLexicalValue = (value: string) => ({
+    state: `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"${value}","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"wby-paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`,
+    html: `<p class="wb-paragraph-1">${value}</p>`
+});
+
+type LexicalProps = ComponentProps<{
+    content: { html?: string };
+}>;
+
+/**
+ * Renders Lexical rich-text content as raw HTML.
+ * The HTML is produced by the editor and stored in `inputs.content.html`.
+ */
+export const LexicalComponent = (props: LexicalProps) => {
+    const html = props.inputs?.content?.html;
+    if (!html) {
+        return null;
+    }
+    return h("div", { innerHTML: html });
+};

package/src/editorComponents/Root.manifest.ts

@@ -0,0 +1,10 @@
+"use client";
+import { createComponent } from "~/createComponent.js";
+import { RootComponent } from "./Root.js";
+
+export const Root = createComponent(RootComponent, {
+    name: "Webiny/Root",
+    label: "Main Content",
+    acceptsChildren: true,
+    hideFromToolbar: true
+});

package/src/editorComponents/Root.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithChildren } from "~/types.js";
+
+/**
+ * The invisible root container — renders only its children slot.
+ */
+export const RootComponent = (props: ComponentPropsWithChildren) => {
+    return props.inputs?.children ?? null;
+};

package/src/editorComponents/index.ts

@@ -0,0 +1,12 @@
+import { Box } from "./Box.manifest.js";
+import { Fragment } from "./Fragment.manifest.js";
+import { Grid } from "./Grid.manifest.js";
+import { GridColumn } from "./GridColumn.manifest.js";
+import { Image } from "./Image.manifest.js";
+import { Lexical } from "./Lexical.manifest.js";
+import { Root } from "./Root.manifest.js";
+
+export const editorComponents = [Root, Box, Grid, GridColumn, Image, Lexical, Fragment];
+
+export { Box, Fragment, Grid, GridColumn, Image, Lexical, Root };
+export { createLexicalValue } from "./Lexical.js";

package/src/index.ts

@@ -0,0 +1,52 @@
+// Re-export the full framework-agnostic SDK surface (types, inputs, SDK instance, etc.)
+export {
+    createTextInput,
+    createLongTextInput,
+    createNumberInput,
+    createBooleanInput,
+    createColorInput,
+    createFileInput,
+    createDateInput,
+    createLexicalInput,
+    createSelectInput,
+    createRadioInput,
+    createObjectInput,
+    createTagsInput,
+    createSlotInput,
+    createInput,
+    createElement,
+    createTheme,
+    contentSdk,
+    environment,
+    setHeadersProvider,
+    getHeadersProvider,
+    registerComponentGroup,
+    type CssProperties,
+    type Document,
+    type DocumentElement,
+    type Breakpoint,
+    type CreateElementParams,
+    type ContentSDKConfig,
+    type ComponentManifest,
+    type ComponentInput,
+    type ComponentConstraint,
+    type WebsiteBuilderThemeInput,
+    StyleSettings
+} from "@webiny/website-builder-sdk";
+
+// Vue-specific exports
+export { createComponent } from "./createComponent.js";
+export * from "./components/index.js";
+export * from "./editorComponents/index.js";
+export * from "./composables/useViewport.js";
+export * from "./composables/useSelectFromState.js";
+export * from "./composables/useObservable.js";
+export * from "./composables/useBindingsForElement.js";
+export * from "./composables/useDocumentState.js";
+export type {
+    ComponentProps,
+    ComponentPropsWithChildren,
+    InferManifest,
+    InferComponentChange,
+    InferDescendantChange
+} from "./types.js";