@builder.io/sdk-vue 0.6.1-1 → 0.6.1

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

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

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

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

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

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

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

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