@builder.io/sdk-vue 0.5.9 → 0.6.1-0

package/vue2/src/components/block/components/block-styles.vue

@@ -0,0 +1,110 @@
+<template>
+  <inlined-styles
+    v-if="TARGET !== 'reactNative' && css && canShowBlock"
+    :styles="css"
+  ></inlined-styles>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import {
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints,
+} from "../../../constants/device-sizes.js";
+import { TARGET } from "../../../constants/target.js";
+import type { BuilderContextInterface } from "../../../context/types.js";
+import { getProcessedBlock } from "../../../functions/get-processed-block.js";
+import { createCssClass } from "../../../helpers/css.js";
+import { checkIsDefined } from "../../../helpers/nullable.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+const InlinedStyles = () =>
+  import("../../inlined-styles.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component InlinedStyles at ../../inlined-styles.vue",
+        err
+      );
+      throw err;
+    });
+
+export type BlockStylesProps = {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+};
+
+export default defineComponent({
+  name: "block-styles",
+  components: { "inlined-styles": InlinedStyles },
+  props: ["block", "context"],
+
+  data() {
+    return {
+      processedBlock: getProcessedBlock({
+        block: this.block,
+        localState: this.context.localState,
+        rootState: this.context.rootState,
+        rootSetState: this.context.rootSetState,
+        context: this.context.context,
+        shouldEvaluateBindings: true,
+      }),
+      TARGET,
+    };
+  },
+
+  computed: {
+    canShowBlock() {
+      // only render styles for blocks that are visible
+      if (checkIsDefined(this.processedBlock.hide)) {
+        return !this.processedBlock.hide;
+      }
+      if (checkIsDefined(this.processedBlock.show)) {
+        return this.processedBlock.show;
+      }
+      return true;
+    },
+    css() {
+      const styles = this.processedBlock.responsiveStyles;
+      const content = this.context.content;
+      const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
+        content?.meta?.breakpoints || {}
+      );
+      const largeStyles = styles?.large;
+      const mediumStyles = styles?.medium;
+      const smallStyles = styles?.small;
+      const className = this.processedBlock.id;
+      if (!className) {
+        return "";
+      }
+      const largeStylesClass = largeStyles
+        ? createCssClass({
+            className,
+            styles: largeStyles,
+          })
+        : "";
+      const mediumStylesClass = mediumStyles
+        ? createCssClass({
+            className,
+            styles: mediumStyles,
+            mediaQuery: getMaxWidthQueryForSize(
+              "medium",
+              sizesWithUpdatedBreakpoints
+            ),
+          })
+        : "";
+      const smallStylesClass = smallStyles
+        ? createCssClass({
+            className,
+            styles: smallStyles,
+            mediaQuery: getMaxWidthQueryForSize(
+              "small",
+              sizesWithUpdatedBreakpoints
+            ),
+          })
+        : "";
+      return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+    },
+  },
+});
+</script>

package/vue2/src/components/block/components/block-wrapper.vue

@@ -0,0 +1,83 @@
+<template>
+  <component
+    v-if="hasChildren"
+    :is="Wrapper"
+    v-bind="
+      getBlockProperties({
+        block: block,
+        context: context,
+      })
+    "
+    v-on="
+      getBlockActions({
+        block: block,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        localState: context.localState,
+        context: context.context,
+        stripPrefix: true,
+      })
+    "
+  >
+    <slot />
+  </component>
+  <component
+    v-else
+    :is="Wrapper"
+    v-bind="
+      getBlockProperties({
+        block: block,
+        context: context,
+      })
+    "
+    v-on="
+      getBlockActions({
+        block: block,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        localState: context.localState,
+        context: context.context,
+        stripPrefix: true,
+      })
+    "
+  ></component>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import type { PropsWithChildren } from "../../../types/typescript.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+import type { BuilderContextInterface } from "../../../context/types.js";
+import { getBlockActions } from "../../../functions/get-block-actions.js";
+import { getBlockProperties } from "../../../functions/get-block-properties.js";
+import { setAttrs } from "../../../blocks/helpers.js";
+
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
+type BlockWrapperProps = {
+  Wrapper: string;
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+  hasChildren: boolean;
+};
+
+/**
+ * This component renders a block's wrapper HTML element (from the block's `tagName` property).
+ * It reuses the exact same logic as the `InteractiveElement` component, but we need to have 2 separate components for
+ * Svelte's sake, as it needs to know at compile-time whether to use:
+ *  - `<svelte:element>` (for HTML element) or
+ *  - `<svelte:component>` (for custom components)
+ */
+
+export default defineComponent({
+  name: "block-wrapper",
+
+  props: ["Wrapper", "block", "context", "hasChildren"],
+
+  data() {
+    return { getBlockActions, getBlockProperties };
+  },
+});
+</script>

package/vue2/src/components/block/components/component-ref/component-ref.helpers.ts

@@ -0,0 +1,52 @@
+import type { BuilderContextInterface, RegisteredComponents } from '../../../../context/types.js';
+import { getBlockProperties } from '../../../../functions/get-block-properties.js';
+import type { BuilderBlock } from '../../../../types/builder-block.js';
+import type { PropsWithBuilderData } from '../../../../types/builder-props.js';
+import type { InteractiveElementProps } from '../interactive-element.vue';
+type ComponentOptions = PropsWithBuilderData<{
+  [index: string]: any;
+  attributes?: {
+    [index: string]: any;
+  };
+}>;
+export interface ComponentProps {
+  componentRef: any;
+  componentOptions: ComponentOptions;
+  blockChildren: BuilderBlock[];
+  context: BuilderContextInterface;
+  registeredComponents: RegisteredComponents;
+  builderBlock: BuilderBlock;
+  includeBlockProps: boolean;
+  isInteractive: boolean | undefined;
+}
+export const getWrapperProps = ({
+  componentOptions,
+  builderBlock,
+  context,
+  componentRef,
+  includeBlockProps,
+  isInteractive,
+  contextValue
+}: Omit<ComponentProps, 'blockChildren' | 'registeredComponents'> & {
+  contextValue: BuilderContextInterface;
+}) => {
+  const interactiveElementProps: InteractiveElementProps = {
+    Wrapper: componentRef,
+    block: builderBlock,
+    context,
+    wrapperProps: componentOptions
+  };
+  return isInteractive ? interactiveElementProps : {
+    ...componentOptions,
+    /**
+     * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
+     * component itself directly. Otherwise, they are provided to the wrapper element.
+     */
+    ...(includeBlockProps ? {
+      attributes: getBlockProperties({
+        block: builderBlock,
+        context: contextValue
+      })
+    } : {})
+  };
+}

package/vue2/src/components/block/components/component-ref/component-ref.vue

@@ -0,0 +1,97 @@
+<template>
+  <component
+    v-if="componentRef"
+    :is="Wrapper"
+    v-bind="
+      getWrapperProps({
+        componentOptions: componentOptions,
+        builderBlock: builderBlock,
+        context: context,
+        componentRef: componentRef,
+        includeBlockProps: includeBlockProps,
+        isInteractive: isInteractive,
+        contextValue: context,
+      })
+    "
+  >
+    <block
+      v-for="(child, index) in blockChildren"
+      :block="child"
+      :context="context"
+      :registeredComponents="registeredComponents"
+      :key="'block-' + child.id"
+    ></block>
+    <block-styles
+      v-for="(child, index) in blockChildren"
+      :block="child"
+      :context="context"
+      :key="'block-style-' + child.id"
+    ></block-styles>
+  </component>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+const BlockStyles = () =>
+  import("../block-styles.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component BlockStyles at ../block-styles.vue",
+        err
+      );
+      throw err;
+    });
+const Block = () =>
+  import("../../block.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component Block at ../../block.vue",
+        err
+      );
+      throw err;
+    });
+const InteractiveElement = () =>
+  import("../interactive-element.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component InteractiveElement at ../interactive-element.vue",
+        err
+      );
+      throw err;
+    });
+import type { ComponentProps } from "./component-ref.helpers.js";
+import { getWrapperProps } from "./component-ref.helpers.js";
+import { wrapComponentRef } from "../../../content/wrap-component-ref.js";
+
+export default defineComponent({
+  name: "component-ref",
+  components: {
+    block: Block,
+    "block-styles": BlockStyles,
+    "interactive-element": InteractiveElement,
+  },
+  props: [
+    "isInteractive",
+    "componentRef",
+    "componentOptions",
+    "builderBlock",
+    "context",
+    "includeBlockProps",
+    "blockChildren",
+    "registeredComponents",
+  ],
+
+  data() {
+    return {
+      Wrapper: this.isInteractive
+        ? wrapComponentRef(InteractiveElement)
+        : this.componentRef,
+      getWrapperProps,
+    };
+  },
+});
+</script>

package/vue2/src/components/block/components/interactive-element.vue

@@ -0,0 +1,48 @@
+<template>
+  <component
+    :attributes="{
+      ...getBlockProperties({
+        block: block,
+        context: context,
+      }),
+      ...getBlockActions({
+        block: block,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        localState: context.localState,
+        context: context.context,
+      }),
+    }"
+    :is="Wrapper"
+    v-bind="wrapperProps"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import type { BuilderContextInterface } from "../../../context/types.js";
+import { getBlockActions } from "../../../functions/get-block-actions.js";
+import { getBlockProperties } from "../../../functions/get-block-properties.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+import type { PropsWithChildren } from "../../../types/typescript.js";
+
+export type InteractiveElementProps = {
+  Wrapper: any;
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+  wrapperProps: object;
+};
+
+export default defineComponent({
+  name: "interactive-element",
+
+  props: ["wrapperProps", "block", "context", "Wrapper"],
+
+  data() {
+    return { getBlockActions, getBlockProperties };
+  },
+});
+</script>

package/vue2/src/components/block/components/repeated-block.vue

@@ -0,0 +1,51 @@
+<template>
+  <block
+    :block="block"
+    :context="store"
+    :registeredComponents="registeredComponents"
+  ></block>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import BuilderContext from "../../../context/builder.context.js";
+import type {
+  BuilderContextInterface,
+  RegisteredComponents,
+} from "../../../context/types.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+const Block = () =>
+  import("../block.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component Block at ../block.vue",
+        err
+      );
+      throw err;
+    });
+
+type Props = {
+  block: BuilderBlock;
+  repeatContext: BuilderContextInterface;
+  registeredComponents: RegisteredComponents;
+};
+
+export default defineComponent({
+  name: "repeated-block",
+  components: { block: Block },
+  props: ["repeatContext", "block", "registeredComponents"],
+
+  data() {
+    return { store: this.repeatContext };
+  },
+
+  provide() {
+    const _this = this;
+    return {
+      [BuilderContext.key]: _this.store,
+    };
+  },
+});
+</script>

package/vue2/src/components/block/types.ts

@@ -0,0 +1,6 @@
+import type { BuilderContextInterface } from '../../context/types.js';
+import type { BuilderBlock } from '../../types/builder-block.js';
+export interface RepeatData {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}

package/vue2/src/components/blocks/blocks-wrapper.vue

@@ -0,0 +1,91 @@
+<template>
+  <div
+    :class="_classStringToObject(className + ' div-tqyw9m0iue')"
+    :builder-path="path"
+    :builder-parent-id="parent"
+    :style="styleProp"
+    @click="onClick()"
+    @mouseenter="onMouseEnter()"
+    @keypress="onClick()"
+    v-bind="{}"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { isEditing } from "../../functions/is-editing.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { PropsWithChildren } from "../../types/typescript.js";
+
+export type BlocksWrapperProps = {
+  blocks: BuilderBlock[] | undefined;
+  parent: string | undefined;
+  path: string | undefined;
+  styleProp: Record<string, any> | undefined;
+};
+
+export default defineComponent({
+  name: "builder-blocks-wrapper",
+
+  props: ["blocks", "parent", "path", "styleProp"],
+
+  computed: {
+    className() {
+      return "builder-blocks" + (!this.blocks?.length ? " no-blocks" : "");
+    },
+  },
+
+  methods: {
+    onClick() {
+      if (isEditing() && !this.blocks?.length) {
+        window.parent?.postMessage(
+          {
+            type: "builder.clickEmptyBlocks",
+            data: {
+              parentElementId: this.parent,
+              dataPath: this.path,
+            },
+          },
+          "*"
+        );
+      }
+    },
+    onMouseEnter() {
+      if (isEditing() && !this.blocks?.length) {
+        window.parent?.postMessage(
+          {
+            type: "builder.hoverEmptyBlocks",
+            data: {
+              parentElementId: this.parent,
+              dataPath: this.path,
+            },
+          },
+          "*"
+        );
+      }
+    },
+    _classStringToObject(str: string) {
+      const obj: Record<string, boolean> = {};
+      if (typeof str !== "string") {
+        return obj;
+      }
+      const classNames = str.trim().split(/\s+/);
+      for (const name of classNames) {
+        obj[name] = true;
+      }
+      return obj;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.div-tqyw9m0iue {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+</style>

package/vue2/src/components/blocks/blocks.vue

@@ -0,0 +1,99 @@
+<template>
+  <blocks-wrapper
+    :blocks="blocks"
+    :parent="parent"
+    :path="path"
+    :styleProp="styleProp"
+  >
+    <template v-if="blocks">
+      <block
+        v-for="(block, index) in blocks"
+        :block="block"
+        :context="context || builderContext"
+        :registeredComponents="
+          registeredComponents || componentsContext.registeredComponents
+        "
+        :key="'render-block-' + block.id"
+      ></block>
+    </template>
+
+    <template v-if="blocks">
+      <block-styles
+        v-for="(block, index) in blocks"
+        :block="block"
+        :context="context || builderContext"
+        :key="'block-style-' + block.id"
+      ></block-styles>
+    </template>
+  </blocks-wrapper>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+const BlockStyles = () =>
+  import("../block/components/block-styles.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component BlockStyles at ../block/components/block-styles.vue",
+        err
+      );
+      throw err;
+    });
+const Block = () =>
+  import("../block/block.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component Block at ../block/block.vue",
+        err
+      );
+      throw err;
+    });
+import type { BlocksWrapperProps } from "./blocks-wrapper.vue";
+const BlocksWrapper = () =>
+  import("./blocks-wrapper.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component BlocksWrapper at ./blocks-wrapper.vue",
+        err
+      );
+      throw err;
+    });
+import type {
+  BuilderContextInterface,
+  RegisteredComponents,
+} from "../../context/types.js";
+import BuilderContext from "../../context/builder.context.js";
+import ComponentsContext from "../../context/components.context.js";
+
+export type BlocksProps = Partial<BlocksWrapperProps> & {
+  context?: BuilderContextInterface;
+  registeredComponents?: RegisteredComponents;
+};
+
+export default defineComponent({
+  name: "builder-blocks",
+  components: {
+    "blocks-wrapper": BlocksWrapper,
+    block: Block,
+    "block-styles": BlockStyles,
+  },
+  props: [
+    "blocks",
+    "parent",
+    "path",
+    "styleProp",
+    "context",
+    "registeredComponents",
+  ],
+
+  inject: {
+    builderContext: BuilderContext.key,
+
+    componentsContext: ComponentsContext.key,
+  },
+});
+</script>