@webiny/website-builder-vue 6.4.0-beta.5 → 6.4.0-beta.7

package/src/editorComponents/Image.ts

@@ -1,144 +0,0 @@
-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

@@ -1,24 +0,0 @@
-"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

@@ -1,23 +0,0 @@
-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

@@ -1,10 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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/index.ts

@@ -1,52 +0,0 @@
-// 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";

package/tsconfig.build.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.build.json",
-  "include": ["src"],
-  "references": [{ "path": "../website-builder-sdk/tsconfig.build.json" }],
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "paths": {
-      "~/*": ["./src/*"],
-      "~tests/*": ["./__tests__/*"],
-      "@webiny/website-builder-sdk/*": ["../website-builder-sdk/src/*"],
-      "@webiny/website-builder-sdk": ["../website-builder-sdk/src"]
-    }
-  }
-}

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["src", "__tests__"],
-  "references": [{ "path": "../website-builder-sdk" }],
-  "compilerOptions": {
-    "rootDirs": ["./src", "./__tests__"],
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "paths": {
-      "~/*": ["./src/*"],
-      "~tests/*": ["./__tests__/*"],
-      "@webiny/website-builder-sdk/*": ["../website-builder-sdk/src/*"],
-      "@webiny/website-builder-sdk": ["../website-builder-sdk/src"]
-    }
-  }
-}

package/webiny.config.js

@@ -1,8 +0,0 @@
-import { createWatchPackage, createBuildPackage } from "@webiny/build-tools";
-
-export default {
-    commands: {
-        build: createBuildPackage({ cwd: import.meta.dirname }),
-        watch: createWatchPackage({ cwd: import.meta.dirname })
-    }
-};