@builder.io/sdk-vue 0.0.1-68 → 0.0.1-70

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-vue",
   "description": "Builder.io SDK for Vue",
-  "version": "0.0.1-68",
+  "version": "0.0.1-70",
   "dependencies": {
     "node-fetch": "^2.6.1"
   },
@@ -37,6 +37,6 @@
     "vue": ">= 2"
   },
   "devDependencies": {
-    "vue": "^2.6.12"
+    "vue": "^2.7"
   }
 }

package/vue2/src/blocks/button/button.vue

@@ -12,12 +12,38 @@
     {{ text }}
   </button>
 </template>
-<script>
-export default {
-  name: "builder-button",
+<script lang="ts">
 
-  props: ["attributes", "text", "link", "openLinkInNewTab"],
-};
+
+
+
+
+
+
+    export interface ButtonProps {
+attributes?: any;
+text?: string;
+link?: string;
+openLinkInNewTab?: boolean;
+}
+
+    export default {
+      name: 'builder-button',
+
+      props: ["attributes","text","link","openLinkInNewTab"],
+
+
+
+
+
+
+
+
+
+
+
+
+    }
 </script>
 <style scoped>
 .button-16nol0lwi20 {

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

@@ -18,70 +18,83 @@
     </div>
   </div>
 </template>
-<script>
-const RenderBlocks = () => import("../../components/render-blocks.vue");
-
-export default {
-  name: "builder-columns",
-  components: { "render-blocks": RenderBlocks },
-  props: [
-    "space",
-    "columns",
-    "stackColumnsAt",
-    "reverseColumnsWhenStacked",
-    "builderBlock",
-  ],
-
-  computed: {
-    columnsCssVars() {
-      const flexDir =
-        this.stackColumnsAt === "never"
-          ? "inherit"
-          : this.reverseColumnsWhenStacked
-          ? "column-reverse"
-          : "column";
-      return {
-        "--flex-dir": flexDir,
-        "--flex-dir-tablet": this.maybeApplyForTablet(flexDir),
-      };
-    },
-    columnCssVars() {
-      const width = "100%";
-      const marginLeft = "0";
-      return {
-        "--column-width": width,
-        "--column-margin-left": marginLeft,
-        "--column-width-tablet": this.maybeApplyForTablet(width),
-        "--column-margin-left-tablet": this.maybeApplyForTablet(marginLeft),
-      };
-    },
-  },
-
-  methods: {
-    getGutterSize() {
-      return typeof this.space === "number" ? this.space || 0 : 20;
-    },
-    getColumns() {
-      return this.columns || [];
-    },
-    getWidth(index) {
-      const columns = this.getColumns();
-      return columns[index]?.width || 100 / columns.length;
-    },
-    getColumnCssWidth(index) {
-      const columns = this.getColumns();
-      const gutterSize = this.getGutterSize();
-      const subtractWidth =
-        (gutterSize * (columns.length - 1)) / columns.length;
-      return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
-    },
-    maybeApplyForTablet(prop) {
-      const _stackColumnsAt = this.stackColumnsAt || "tablet";
-
-      return _stackColumnsAt === "tablet" ? prop : "inherit";
-    },
-  },
+<script lang="ts">
+
+
+  const RenderBlocks = () => import('../../components/render-blocks.vue')
+
+
+
+
+    type Column = {
+blocks: any; // TODO: Implement this when support for dynamic CSS lands
+
+width?: number;
 };
+type StackColumnsAt = 'tablet' | 'mobile' | 'never';
+export interface ColumnProps {
+columns?: Column[];
+builderBlock: BuilderBlock; // TODO: Implement this when support for dynamic CSS lands
+
+space?: number; // TODO: Implement this when support for dynamic CSS lands
+
+stackColumnsAt?: StackColumnsAt; // TODO: Implement this when support for dynamic CSS lands
+
+reverseColumnsWhenStacked?: boolean;
+}
+
+    export default {
+      name: 'builder-columns',
+      components: { 'render-blocks': RenderBlocks },
+      props: ["space","columns","stackColumnsAt","reverseColumnsWhenStacked","builderBlock"],
+
+
+
+
+
+
+
+
+
+
+
+        computed: {  columnsCssVars() {
+const flexDir = this.stackColumnsAt === 'never' ? 'inherit' : this.reverseColumnsWhenStacked ? 'column-reverse' : 'column';
+return {
+  '--flex-dir': flexDir,
+  '--flex-dir-tablet': this.maybeApplyForTablet(flexDir)
+};
+},  columnCssVars() {
+const width = '100%';
+const marginLeft = '0';
+return {
+  '--column-width': width,
+  '--column-margin-left': marginLeft,
+  '--column-width-tablet': this.maybeApplyForTablet(width),
+  '--column-margin-left-tablet': this.maybeApplyForTablet(marginLeft)
+};
+},},
+
+
+        methods: {  getGutterSize() {
+return typeof this.space === 'number' ? this.space || 0 : 20;
+},  getColumns() {
+return this.columns || [];
+},  getWidth(index) {
+const columns = this.getColumns();
+return columns[index]?.width || 100 / columns.length;
+},  getColumnCssWidth(index) {
+const columns = this.getColumns();
+const gutterSize = this.getGutterSize();
+const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
+return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+},  maybeApplyForTablet(prop) {
+const _stackColumnsAt = this.stackColumnsAt || 'tablet';
+
+return _stackColumnsAt === 'tablet' ? prop : 'inherit';
+},},
+
+    }
 </script>
 <style scoped>
 .div-2fnk003dqad {

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

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 const componentInfo = {
   name: "Columns",
   builtIn: true,
@@ -186,7 +187,7 @@ const componentInfo = {
           ]
         }
       ],
-      onChange(options) {
+      onChange: markSerializable((options) => {
         function clearWidths() {
           columns.forEach((col) => {
             col.delete("width");
@@ -210,7 +211,7 @@ const componentInfo = {
             }
           }
         }
-      }
+      })
     },
     {
       name: "space",

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

@@ -3,76 +3,86 @@
     ref="elem"
     :class="
       _classStringToObject(
-        'builder-custom-code' + (this.replaceNodes ? ' replace-nodes' : '')
+        'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')
       )
     "
     v-html="code"
   ></div>
 </template>
-<script>
-export default {
-  name: "builder-custom-code",
-
-  props: ["replaceNodes", "code"],
-
-  data: () => ({ scriptsInserted: [], scriptsRun: [] }),
-
-  mounted() {
-    this.findAndRunScripts();
-  },
-
-  methods: {
-    findAndRunScripts() {
-      // TODO: Move this function to standalone one in '@builder.io/utils'
-      if (this.$refs.elem && 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);
-            }
-          }
-        }
+<script lang="ts">
+
+
+
+
+
+
+
+    export interface CustomCodeProps {
+code: string;
+replaceNodes?: boolean;
+}
+
+    export default {
+      name: 'builder-custom-code',
+
+      props: ["replaceNodes","code"],
+
+      data: () => ({ scriptsInserted: [], scriptsRun: [],}),
+
+
+
+
+
+      mounted() {
+              this.findAndRunScripts()
+            },
+
+
+
+
+
+
+        methods: {  findAndRunScripts() {
+// TODO: Move this function to standalone one in '@builder.io/utils'
+if (this.$refs.elem && 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;
       }
-    },
-    _classStringToObject(str) {
-      const obj = {};
-      if (typeof str !== "string") {
-        return obj;
+
+      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) {
+      const obj = {};
+      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.js

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 const componentInfo = {
   name: "Embed",
   static: true,
@@ -9,7 +10,7 @@ const componentInfo = {
       required: true,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange(options) {
+      onChange: markSerializable((options) => {
         const url = options.get("url");
         if (url) {
           options.set("content", "Loading...");
@@ -28,7 +29,7 @@ const componentInfo = {
         } else {
           options.delete("content");
         }
-      }
+      })
     },
     {
       name: "content",

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

@@ -1,60 +1,73 @@
 <template>
   <div class="builder-embed" ref="elem" v-html="content"></div>
 </template>
-<script>
-import { isJsScript } from "./helpers";
-
-export default {
-  name: "builder-embed",
-
-  props: ["content"],
-
-  data: () => ({ scriptsInserted: [], scriptsRun: [], ranInitFn: false }),
-
-  watch: {
-    onUpdateHook0() {
-      if (this.$refs.elem && !this.ranInitFn) {
-        this.ranInitFn = true;
-        this.findAndRunScripts();
-      }
-    },
-  },
-
-  computed: {
-    onUpdateHook0() {
-      return {
-        0: this.$refs.elem,
-        1: this.ranInitFn,
-      };
-    },
-  },
-
-  methods: {
-    findAndRunScripts() {
-      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 lang="ts">
+
+
+  import { isJsScript } from './helpers';
+
+
+
+
+    export interface EmbedProps {
+content: string;
+}
+
+    export default {
+      name: 'builder-embed',
+
+      props: ["content"],
+
+      data: () => ({ scriptsInserted: [], scriptsRun: [], ranInitFn: false,}),
+
+
+
+
+
+
+
+      watch: {
+          onUpdateHook0() {
+                if (this.$refs.elem && !this.ranInitFn) {
+this.ranInitFn = true;
+this.findAndRunScripts();
+}
+                }
+
+        },
+
+
+
+        computed: {  onUpdateHook0() {
+return {
+  0: this.$refs.elem,
+  1: this.ranInitFn
 };
+},},
+
+
+        methods: {  findAndRunScripts() {
+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>