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

package/vue2/src/blocks/columns/columns.vue

@@ -0,0 +1,238 @@
+<template>
+  <div
+    :class="
+      _classStringToObject(
+        `builder-columns ${builderBlock.id}-breakpoints` + ' div-t9spj7joih'
+      )
+    "
+    :style="columnsCssVars"
+    v-bind="{}"
+  >
+    <template v-if="TARGET !== 'reactNative'">
+      <inlined-styles :styles="columnsStyles"></inlined-styles>
+    </template>
+
+    <div
+      class="builder-column div-t9spj7joih-2"
+      v-for="(column, index) in columns"
+      :style="columnCssVars(index)"
+      :key="index"
+      v-bind="{}"
+    >
+      <blocks
+        :path="`component.options.columns.${index}.blocks`"
+        :parent="builderBlock.id"
+        :styleProp="{
+          flexGrow: '1',
+        }"
+        :context="builderContext"
+        :registeredComponents="builderComponents"
+        :blocks="column.blocks"
+      ></blocks>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+const Blocks = () =>
+  import("../../components/blocks/blocks.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component Blocks at ../../components/blocks/blocks.vue",
+        err
+      );
+      throw err;
+    });
+import type { BuilderBlock } from "../../types/builder-block.js";
+import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
+import type { SizeName } from "../../constants/device-sizes.js";
+const InlinedStyles = () =>
+  import("../../components/inlined-styles.vue")
+    .then((x) => x.default)
+    .catch((err) => {
+      console.error(
+        "Error while attempting to dynamically import component InlinedStyles at ../../components/inlined-styles.vue",
+        err
+      );
+      throw err;
+    });
+import { TARGET } from "../../constants/target.js";
+import type { Dictionary } from "../../types/typescript.js";
+import type {
+  BuilderComponentsProp,
+  PropsWithBuilderData,
+} from "../../types/builder-props.js";
+import { deoptSignal } from "../../functions/deopt.js";
+
+type Column = {
+  blocks: BuilderBlock[];
+  width?: number;
+};
+type CSSVal = string | number;
+type StackColumnsAt = "tablet" | "mobile" | "never";
+export interface ColumnProps extends BuilderComponentsProp {
+  columns?: Column[];
+  builderBlock: BuilderBlock;
+  space?: number;
+  stackColumnsAt?: StackColumnsAt;
+  reverseColumnsWhenStacked?: boolean;
+}
+
+export default defineComponent({
+  name: "builder-columns",
+  components: { "inlined-styles": InlinedStyles, blocks: Blocks },
+  props: [
+    "js",
+    "space",
+    "columns",
+    "stackColumnsAt",
+    "reverseColumnsWhenStacked",
+    "builderContext",
+    "builderBlock",
+    "builderComponents",
+  ],
+
+  data() {
+    return {
+      gutterSize: typeof this.space === "number" ? this.space || 0 : 20,
+      cols: this.columns || [],
+      stackAt: this.stackColumnsAt || "tablet",
+      flexDir:
+        this.stackColumnsAt === "never"
+          ? "row"
+          : this.reverseColumnsWhenStacked
+          ? "column-reverse"
+          : "column",
+      TARGET,
+    };
+  },
+
+  computed: {
+    columnsCssVars() {
+      return {
+        "--flex-dir": this.flexDir,
+        "--flex-dir-tablet": this.getTabletStyle({
+          stackedStyle: this.flexDir,
+          desktopStyle: "row",
+        }),
+      } as Dictionary<string>;
+    },
+    columnsStyles() {
+      return `
+        @media (max-width: ${this.getWidthForBreakpointSize("medium")}px) {
+          .${this.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
+
+          .${this.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
+        }
+
+        @media (max-width: ${this.getWidthForBreakpointSize("small")}px) {
+          .${this.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
+
+          .${this.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
+    },
+  },
+
+  methods: {
+    getWidth(index: number) {
+      return this.cols[index]?.width || 100 / this.cols.length;
+    },
+    getColumnCssWidth(index: number) {
+      const subtractWidth =
+        (this.gutterSize * (this.cols.length - 1)) / this.cols.length;
+      return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+    },
+    getTabletStyle({
+      stackedStyle,
+      desktopStyle,
+    }: {
+      stackedStyle: CSSVal;
+      desktopStyle: CSSVal;
+    }) {
+      return this.stackAt === "tablet" ? stackedStyle : desktopStyle;
+    },
+    getMobileStyle({
+      stackedStyle,
+      desktopStyle,
+    }: {
+      stackedStyle: CSSVal;
+      desktopStyle: CSSVal;
+    }) {
+      return this.stackAt === "never" ? desktopStyle : stackedStyle;
+    },
+    columnCssVars(index: number) {
+      const gutter = index === 0 ? 0 : this.gutterSize;
+      const width = this.getColumnCssWidth(index);
+      const gutterPixels = `${gutter}px`;
+      const mobileWidth = "100%";
+      const mobileMarginLeft = 0;
+      const marginLeftKey = "margin-left";
+      return {
+        width,
+        [marginLeftKey]: gutterPixels,
+        "--column-width-mobile": this.getMobileStyle({
+          stackedStyle: mobileWidth,
+          desktopStyle: width,
+        }),
+        "--column-margin-left-mobile": this.getMobileStyle({
+          stackedStyle: mobileMarginLeft,
+          desktopStyle: gutterPixels,
+        }),
+        "--column-width-tablet": this.getTabletStyle({
+          stackedStyle: mobileWidth,
+          desktopStyle: width,
+        }),
+        "--column-margin-left-tablet": this.getTabletStyle({
+          stackedStyle: mobileMarginLeft,
+          desktopStyle: gutterPixels,
+        }),
+      } as Dictionary<string>;
+    },
+    getWidthForBreakpointSize(size: SizeName) {
+      const breakpointSizes = getSizesForBreakpoints(
+        this.builderContext.content?.meta?.breakpoints || {}
+      );
+      return breakpointSizes[size].max;
+    },
+    _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-t9spj7joih {
+  display: flex;
+  line-height: normal;
+}
+.div-t9spj7joih-2 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+</style>

package/vue2/src/blocks/columns/component-info.ts

@@ -0,0 +1,219 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  // TODO: ways to statically preprocess JSON for references, functions, etc
+  name: 'Columns',
+  isRSC: true,
+  inputs: [{
+    name: 'columns',
+    type: 'array',
+    broadcast: true,
+    subFields: [{
+      name: 'blocks',
+      type: 'array',
+      hideFromUI: true,
+      defaultValue: [{
+        '@type': '@builder.io/sdk:Element',
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            flexShrink: '0',
+            position: 'relative',
+            marginTop: '30px',
+            textAlign: 'center',
+            lineHeight: 'normal',
+            height: 'auto',
+            minHeight: '20px',
+            minWidth: '20px',
+            overflow: 'hidden'
+          }
+        },
+        component: {
+          name: 'Image',
+          options: {
+            image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        '@type': '@builder.io/sdk:Element',
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            flexShrink: '0',
+            position: 'relative',
+            marginTop: '30px',
+            textAlign: 'center',
+            lineHeight: 'normal',
+            height: 'auto'
+          }
+        },
+        component: {
+          name: 'Text',
+          options: {
+            text: '<p>Enter some text...</p>'
+          }
+        }
+      }]
+    }, {
+      name: 'width',
+      type: 'number',
+      hideFromUI: true,
+      helperText: 'Width %, e.g. set to 50 to fill half of the space'
+    }, {
+      name: 'link',
+      type: 'url',
+      helperText: 'Optionally set a url that clicking this column will link to'
+    }],
+    defaultValue: [{
+      blocks: [{
+        '@type': '@builder.io/sdk:Element',
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            flexShrink: '0',
+            position: 'relative',
+            marginTop: '30px',
+            textAlign: 'center',
+            lineHeight: 'normal',
+            height: 'auto',
+            minHeight: '20px',
+            minWidth: '20px',
+            overflow: 'hidden'
+          }
+        },
+        component: {
+          name: 'Image',
+          options: {
+            image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        '@type': '@builder.io/sdk:Element',
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            flexShrink: '0',
+            position: 'relative',
+            marginTop: '30px',
+            textAlign: 'center',
+            lineHeight: 'normal',
+            height: 'auto'
+          }
+        },
+        component: {
+          name: 'Text',
+          options: {
+            text: '<p>Enter some text...</p>'
+          }
+        }
+      }]
+    }, {
+      blocks: [{
+        '@type': '@builder.io/sdk:Element',
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            flexShrink: '0',
+            position: 'relative',
+            marginTop: '30px',
+            textAlign: 'center',
+            lineHeight: 'normal',
+            height: 'auto',
+            minHeight: '20px',
+            minWidth: '20px',
+            overflow: 'hidden'
+          }
+        },
+        component: {
+          name: 'Image',
+          options: {
+            image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        '@type': '@builder.io/sdk:Element',
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            flexShrink: '0',
+            position: 'relative',
+            marginTop: '30px',
+            textAlign: 'center',
+            lineHeight: 'normal',
+            height: 'auto'
+          }
+        },
+        component: {
+          name: 'Text',
+          options: {
+            text: '<p>Enter some text...</p>'
+          }
+        }
+      }]
+    }],
+    onChange: (options: Map<string, any>) => {
+      function clearWidths() {
+        columns.forEach(col => {
+          col.delete('width');
+        });
+      }
+      const columns: Array<Map<string, any>> = options.get('columns');
+      if (Array.isArray(columns)) {
+        const containsColumnWithWidth = !!columns.find(col => col.get('width'));
+        if (containsColumnWithWidth) {
+          const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));
+          if (containsColumnWithoutWidth) {
+            clearWidths();
+          } else {
+            const sumWidths = columns.reduce((memo, col) => {
+              return memo + col.get('width');
+            }, 0);
+            const widthsDontAddUp = sumWidths !== 100;
+            if (widthsDontAddUp) {
+              clearWidths();
+            }
+          }
+        }
+      }
+    }
+  }, {
+    name: 'space',
+    type: 'number',
+    defaultValue: 20,
+    helperText: 'Size of gap between columns',
+    advanced: true
+  }, {
+    name: 'stackColumnsAt',
+    type: 'string',
+    defaultValue: 'tablet',
+    helperText: 'Convert horizontal columns to vertical at what device size',
+    enum: ['tablet', 'mobile', 'never'],
+    advanced: true
+  }, {
+    name: 'reverseColumnsWhenStacked',
+    type: 'boolean',
+    defaultValue: false,
+    helperText: 'When stacking columns for mobile devices, reverse the ordering',
+    advanced: true
+  }]
+}

package/vue2/src/blocks/custom-code/component-info.ts

@@ -0,0 +1,24 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Custom Code',
+  static: true,
+  requiredPermissions: ['editCode'],
+  inputs: [{
+    name: 'code',
+    type: 'html',
+    required: true,
+    defaultValue: '<p>Hello there, I am custom HTML code!</p>',
+    code: true
+  }, {
+    name: 'replaceNodes',
+    type: 'boolean',
+    helperText: 'Preserve server rendered dom nodes',
+    advanced: true
+  }, {
+    name: 'scriptsClientOnly',
+    type: 'boolean',
+    defaultValue: false,
+    helperText: 'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',
+    advanced: true
+  }]
+}

package/vue2/src/blocks/custom-code/custom-code.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    ref="elem"
+    :class="
+      _classStringToObject(
+        'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')
+      )
+    "
+    v-html="code"
+  ></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export interface CustomCodeProps {
+  code: string;
+  replaceNodes?: boolean;
+}
+
+export default defineComponent({
+  name: "builder-custom-code",
+
+  props: ["replaceNodes", "code"],
+
+  data() {
+    return { scriptsInserted: [], scriptsRun: [] };
+  },
+
+  mounted() {
+    this.findAndRunScripts();
+  },
+
+  methods: {
+    findAndRunScripts() {
+      // TODO: Move this function to standalone one in '@builder.io/utils'
+      if (
+        this.$refs.elem &&
+        this.$refs.elem.getElementsByTagName &&
+        typeof window !== "undefined"
+      ) {
+        const scripts = this.$refs.elem.getElementsByTagName("script");
+        for (let i = 0; i < scripts.length; i++) {
+          const script = scripts[i];
+          if (script.src) {
+            if (this.scriptsInserted.includes(script.src)) {
+              continue;
+            }
+            this.scriptsInserted.push(script.src);
+            const newScript = document.createElement("script");
+            newScript.async = true;
+            newScript.src = script.src;
+            document.head.appendChild(newScript);
+          } else if (
+            !script.type ||
+            [
+              "text/javascript",
+              "application/javascript",
+              "application/ecmascript",
+            ].includes(script.type)
+          ) {
+            if (this.scriptsRun.includes(script.innerText)) {
+              continue;
+            }
+            try {
+              this.scriptsRun.push(script.innerText);
+              new Function(script.innerText)();
+            } catch (error) {
+              console.warn("`CustomCode`: Error running script:", error);
+            }
+          }
+        }
+      }
+    },
+    _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>

package/vue2/src/blocks/embed/component-info.ts

@@ -0,0 +1,38 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Embed',
+  static: true,
+  inputs: [{
+    name: 'url',
+    type: 'url',
+    required: true,
+    defaultValue: '',
+    helperText: 'e.g. enter a youtube url, google map, etc',
+    onChange: (options: Map<string, any>): void | Promise<void> => {
+      const url = options.get('url');
+      if (url) {
+        options.set('content', 'Loading...');
+        // TODO: get this out of here!
+        const apiKey = 'ae0e60e78201a3f2b0de4b';
+        return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
+          if (options.get('url') === url) {
+            if (data.html) {
+              options.set('content', data.html);
+            } else {
+              options.set('content', 'Invalid url, please try another');
+            }
+          }
+        }).catch(_err => {
+          options.set('content', 'There was an error embedding this URL, please try again or another URL');
+        });
+      } else {
+        options.delete('content');
+      }
+    }
+  }, {
+    name: 'content',
+    type: 'html',
+    defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+    hideFromUI: true
+  }]
+}

package/vue2/src/blocks/embed/embed.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="builder-embed" ref="elem" v-html="content"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { isJsScript } from "./helpers.js";
+
+export interface EmbedProps {
+  content: string;
+}
+
+export default defineComponent({
+  name: "builder-embed",
+
+  props: ["content"],
+
+  data() {
+    return { scriptsInserted: [], scriptsRun: [], ranInitFn: false };
+  },
+
+  watch: {
+    onUpdateHook0: {
+      handler() {
+        if (this.$refs.elem && !this.ranInitFn) {
+          this.ranInitFn = true;
+          this.findAndRunScripts();
+        }
+      },
+      immediate: true,
+    },
+  },
+
+  computed: {
+    onUpdateHook0() {
+      return {
+        0: this.$refs.elem,
+        1: this.ranInitFn,
+      };
+    },
+  },
+
+  methods: {
+    findAndRunScripts() {
+      if (!this.$refs.elem || !this.$refs.elem.getElementsByTagName) return;
+      const scripts = this.$refs.elem.getElementsByTagName("script");
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+        if (script.src && !this.scriptsInserted.includes(script.src)) {
+          this.scriptsInserted.push(script.src);
+          const newScript = document.createElement("script");
+          newScript.async = true;
+          newScript.src = script.src;
+          document.head.appendChild(newScript);
+        } else if (
+          isJsScript(script) &&
+          !this.scriptsRun.includes(script.innerText)
+        ) {
+          try {
+            this.scriptsRun.push(script.innerText);
+            new Function(script.innerText)();
+          } catch (error) {
+            console.warn("`Embed`: Error running script:", error);
+          }
+        }
+      }
+    },
+  },
+});
+</script>

package/vue2/src/blocks/embed/helpers.ts

@@ -0,0 +1,2 @@
+const SCRIPT_MIME_TYPES = ['text/javascript', 'application/javascript', 'application/ecmascript'];
+export const isJsScript = (script: HTMLScriptElement) => SCRIPT_MIME_TYPES.includes(script.type)