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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-vue",
   "description": "Builder.io SDK for Vue",
-  "version": "0.0.1-65",
+  "version": "0.0.1-68",
   "dependencies": {
     "node-fetch": "^2.6.1"
   },

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

@@ -8,7 +8,9 @@
   >
     {{ text }}
   </a>
-  <span v-bind="attributes" v-else>{{ text }}</span>
+  <button v-bind="attributes" class="button-16nol0lwi20" v-else>
+    {{ text }}
+  </button>
 </template>
 <script>
 export default {
@@ -17,3 +19,8 @@ export default {
   props: ["attributes", "text", "link", "openLinkInNewTab"],
 };
 </script>
+<style scoped>
+.button-16nol0lwi20 {
+  all: unset;
+}
+</style>

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="builder-columns div-20351ewpue7" :style="columnsCssVars">
+  <div class="builder-columns div-2fnk003dqad" :style="columnsCssVars">
     <div
-      class="builder-column div-20351ewpue7-2"
+      class="builder-column div-2fnk003dqad-2"
       v-for="(column, index) in columns"
       :style="{
         width: getColumnCssWidth(index),
@@ -10,7 +10,11 @@
       }"
       :key="index"
     >
-      <render-blocks :blocks="column.blocks"></render-blocks>
+      <render-blocks
+        :blocks="column.blocks"
+        :path="`component.options.columns.${index}.blocks`"
+        :parent="builderBlock.id"
+      ></render-blocks>
     </div>
   </div>
 </template>
@@ -20,7 +24,13 @@ const RenderBlocks = () => import("../../components/render-blocks.vue");
 export default {
   name: "builder-columns",
   components: { "render-blocks": RenderBlocks },
-  props: ["space", "columns", "stackColumnsAt", "reverseColumnsWhenStacked"],
+  props: [
+    "space",
+    "columns",
+    "stackColumnsAt",
+    "reverseColumnsWhenStacked",
+    "builderBlock",
+  ],
 
   computed: {
     columnsCssVars() {
@@ -74,32 +84,32 @@ export default {
 };
 </script>
 <style scoped>
-.div-20351ewpue7 {
+.div-2fnk003dqad {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
-@media (max-width: 999px) {
-  .div-20351ewpue7 {
+@media (max-width: 991px) {
+  .div-2fnk003dqad {
     flex-direction: var(--flex-dir-tablet);
   }
 }
 @media (max-width: 639px) {
-  .div-20351ewpue7 {
+  .div-2fnk003dqad {
     flex-direction: var(--flex-dir);
   }
 }
-.div-20351ewpue7-2 {
+.div-2fnk003dqad-2 {
   flex-grow: 1;
 }
-@media (max-width: 999px) {
-  .div-20351ewpue7-2 {
+@media (max-width: 991px) {
+  .div-2fnk003dqad-2 {
     width: var(--column-width-tablet) !important;
     margin-left: var(--column-margin-left-tablet) !important;
   }
 }
 @media (max-width: 639px) {
-  .div-20351ewpue7-2 {
+  .div-2fnk003dqad-2 {
     width: var(--column-width) !important;
     margin-left: var(--column-margin-left) !important;
   }

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

@@ -23,7 +23,7 @@ export default {
   computed: {
     onUpdateHook0() {
       return {
-        0: elem,
+        0: this.$refs.elem,
         1: this.ranInitFn,
       };
     },

package/vue2/src/blocks/form/form.vue

@@ -28,7 +28,7 @@
     ></builder-blocks>
 
     <pre
-      class="builder-form-error-text pre-1ifnufbde19"
+      class="builder-form-error-text pre-2brhoa1k8gd"
       v-if="submissionState === 'error' && responseData"
     >
         {{ JSON.stringify(responseData, null, 2) }}
@@ -301,7 +301,7 @@ export default {
 };
 </script>
 <style scoped>
-.pre-1ifnufbde19 {
+.pre-2brhoa1k8gd {
   padding: 10px;
   color: red;
   text-align: center;

package/vue2/src/blocks/image/image.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="div-cvp1sc2nsao">
+  <div class="div-20351ewpue7">
     <picture>
       <source type="image/webp" v-if="webpSrcSet" :srcset="webpSrcSet" />
 
@@ -15,7 +15,7 @@
           _classStringToObject(
             'builder-image' +
               (this.className ? ' ' + this.className : '') +
-              ' img-cvp1sc2nsao'
+              ' img-20351ewpue7'
           )
         "
         :src="image"
@@ -26,7 +26,7 @@
     </picture>
 
     <div
-      class="builder-image-sizer div-cvp1sc2nsao-2"
+      class="builder-image-sizer div-20351ewpue7-2"
       v-if="aspectRatio && !(fitContent && ((builderBlock && builderBlock.children) && (builderBlock && builderBlock.children).length))"
       :style="{
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -36,7 +36,7 @@
 
     <slot></slot>
 
-    <div class="div-cvp1sc2nsao-3" v-if="!fitContent">
+    <div class="div-20351ewpue7-3" v-if="!fitContent">
       <slot></slot>
     </div>
   </div>
@@ -110,10 +110,10 @@ export default {
 };
 </script>
 <style scoped>
-.div-cvp1sc2nsao {
+.div-20351ewpue7 {
   position: relative;
 }
-.img-cvp1sc2nsao {
+.img-20351ewpue7 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   position: absolute;
@@ -122,12 +122,12 @@ export default {
   top: 0px;
   left: 0px;
 }
-.div-cvp1sc2nsao-2 {
+.div-20351ewpue7-2 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
 }
-.div-cvp1sc2nsao-3 {
+.div-20351ewpue7-3 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/vue2/src/blocks/video/video.vue

@@ -1,7 +1,6 @@
 <template>
   <video
-    v-bind="attributes"
-    preload="none"
+    v-bind="videoProps"
     :style="{
   width: '100%',
   height: '100%',
@@ -14,10 +13,6 @@
 }"
     :src="video || 'no-src'"
     :poster="posterImage"
-    :autoPlay="autoPlay"
-    :muted="muted"
-    :controls="controls"
-    :loop="loop"
   ></video>
 </template>
 <script>
@@ -25,15 +20,48 @@ export default {
   name: "builder-video",
 
   props: [
+    "autoPlay",
+    "muted",
+    "controls",
+    "loop",
+    "playsInline",
     "attributes",
     "fit",
     "position",
     "video",
     "posterImage",
-    "autoPlay",
-    "muted",
-    "controls",
-    "loop",
   ],
+
+  computed: {
+    videoProps() {
+      return {
+        ...(this.autoPlay === true
+          ? {
+              autoPlay: true,
+            }
+          : {}),
+        ...(this.muted === true
+          ? {
+              muted: true,
+            }
+          : {}),
+        ...(this.controls === true
+          ? {
+              controls: true,
+            }
+          : {}),
+        ...(this.loop === true
+          ? {
+              loop: true,
+            }
+          : {}),
+        ...(this.playsInline === true
+          ? {
+              playsInline: true,
+            }
+          : {}),
+      };
+    },
+  },
 };
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="_classStringToObject(this.className + ' div-23e8fqt91nf')"
+    :class="_classStringToObject(this.className + ' div-21azgz5avex')"
     :builder-path="path"
     :builder-parent-id="parent"
     :dataSet="{
@@ -84,7 +84,7 @@ export default {
 };
 </script>
 <style scoped>
-.div-23e8fqt91nf {
+.div-21azgz5avex {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/vue2/src/components/render-content/render-content.vue

@@ -1,11 +1,7 @@
 <template>
   <div
     v-if="useContent"
-    @click="
-      track('click', {
-        contentId: useContent.id,
-      })
-    "
+    @click="onClick($event)"
     :builder-content-id="(useContent && useContent.id)"
   >
     <render-content-styles
@@ -41,9 +37,17 @@ export default {
     "render-content-styles": RenderContentStyles,
     "render-blocks": RenderBlocks,
   },
-  props: ["content", "data", "context", "customComponents", "model", "apiKey"],
+  props: [
+    "content",
+    "data",
+    "context",
+    "customComponents",
+    "model",
+    "canTrack",
+    "apiKey",
+  ],
 
-  data: () => ({ overrideContent: null, update: 0, overrideState: {}, track }),
+  data: () => ({ overrideContent: null, update: 0, overrideState: {} }),
 
   provide() {
     const _this = this;
@@ -84,7 +88,7 @@ export default {
         );
       }
 
-      if (this.useContent) {
+      if (this.useContent && this.canTrack !== false) {
         track("impression", {
           contentId: this.useContent.id,
         });
@@ -244,6 +248,13 @@ export default {
         });
       }
     },
+    onClick(_event) {
+      if (this.useContent && this.canTrack !== false) {
+        track("click", {
+          contentId: this.useContent.id,
+        });
+      }
+    },
     evalExpression(expression) {
       return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
         evaluate({

package/vue3/src/blocks/button/button.vue

@@ -11,7 +11,9 @@
   </template>
 
   <template v-else>
-    <span v-bind="attributes">{{ text }}</span>
+    <button v-bind="attributes" class="button-1hjwvu3r5mj">
+      {{ text }}
+    </button>
   </template>
 </template>
 <script>
@@ -23,3 +25,8 @@ export default {
   props: ["attributes", "text", "link", "openLinkInNewTab"],
 };
 </script>
+<style scoped>
+.button-1hjwvu3r5mj {
+  all: unset;
+}
+</style>

package/vue3/src/blocks/columns/columns.vue

@@ -1,15 +1,19 @@
 <template>
-  <div class="builder-columns div-2btisl9m7v3" :style="columnsCssVars">
+  <div class="builder-columns div-2oa2wtipkzk" :style="columnsCssVars">
     <template :key="index" v-for="(column, index) in columns">
       <div
-        class="builder-column div-2btisl9m7v3-2"
+        class="builder-column div-2oa2wtipkzk-2"
         :style="{
           width: getColumnCssWidth(index),
           marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
           ...columnCssVars,
         }"
       >
-        <render-blocks :blocks="column.blocks"></render-blocks>
+        <render-blocks
+          :blocks="column.blocks"
+          :path="`component.options.columns.${index}.blocks`"
+          :parent="builderBlock.id"
+        ></render-blocks>
       </div>
     </template>
   </div>
@@ -22,7 +26,13 @@ const RenderBlocks = () => import("../../components/render-blocks.vue");
 export default {
   name: "builder-columns",
   components: { "render-blocks": defineAsyncComponent(RenderBlocks) },
-  props: ["space", "columns", "stackColumnsAt", "reverseColumnsWhenStacked"],
+  props: [
+    "space",
+    "columns",
+    "stackColumnsAt",
+    "reverseColumnsWhenStacked",
+    "builderBlock",
+  ],
 
   computed: {
     columnsCssVars() {
@@ -76,32 +86,32 @@ export default {
 };
 </script>
 <style scoped>
-.div-2btisl9m7v3 {
+.div-2oa2wtipkzk {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
-@media (max-width: 999px) {
-  .div-2btisl9m7v3 {
+@media (max-width: 991px) {
+  .div-2oa2wtipkzk {
     flex-direction: var(--flex-dir-tablet);
   }
 }
 @media (max-width: 639px) {
-  .div-2btisl9m7v3 {
+  .div-2oa2wtipkzk {
     flex-direction: var(--flex-dir);
   }
 }
-.div-2btisl9m7v3-2 {
+.div-2oa2wtipkzk-2 {
   flex-grow: 1;
 }
-@media (max-width: 999px) {
-  .div-2btisl9m7v3-2 {
+@media (max-width: 991px) {
+  .div-2oa2wtipkzk-2 {
     width: var(--column-width-tablet) !important;
     margin-left: var(--column-margin-left-tablet) !important;
   }
 }
 @media (max-width: 639px) {
-  .div-2btisl9m7v3-2 {
+  .div-2oa2wtipkzk-2 {
     width: var(--column-width) !important;
     margin-left: var(--column-margin-left) !important;
   }

package/vue3/src/blocks/embed/embed.vue

@@ -25,7 +25,7 @@ export default {
   computed: {
     onUpdateHook0() {
       return {
-        0: elem,
+        0: this.$refs.elem,
         1: this.ranInitFn,
       };
     },

package/vue3/src/blocks/form/form.vue

@@ -29,7 +29,7 @@
     </template>
 
     <template v-if="submissionState === 'error' && responseData">
-      <pre class="builder-form-error-text pre-256wrwn33ry">
+      <pre class="builder-form-error-text pre-4o9pb21oca6">
         {{ JSON.stringify(responseData, null, 2) }}
       </pre>
     </template>
@@ -306,7 +306,7 @@ export default {
 };
 </script>
 <style scoped>
-.pre-256wrwn33ry {
+.pre-4o9pb21oca6 {
   padding: 10px;
   color: red;
   text-align: center;

package/vue3/src/blocks/image/image.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="div-1fogms4bee0">
+  <div class="div-1eih9th5ow6">
     <picture>
       <template v-if="webpSrcSet">
         <source type="image/webp" :srcset="webpSrcSet" />
@@ -17,7 +17,7 @@
           _classStringToObject(
             'builder-image' +
               (this.className ? ' ' + this.className : '') +
-              ' img-1fogms4bee0'
+              ' img-1eih9th5ow6'
           )
         "
         :src="image"
@@ -31,7 +31,7 @@
       v-if="aspectRatio && !(fitContent && ((builderBlock && builderBlock.children) && (builderBlock && builderBlock.children).length))"
     >
       <div
-        class="builder-image-sizer div-1fogms4bee0-2"
+        class="builder-image-sizer div-1eih9th5ow6-2"
         :style="{
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           paddingTop: aspectRatio * 100 + '%',
@@ -44,7 +44,7 @@
     </template>
 
     <template v-if="!fitContent">
-      <div class="div-1fogms4bee0-3">
+      <div class="div-1eih9th5ow6-3">
         <slot></slot>
       </div>
     </template>
@@ -121,10 +121,10 @@ export default {
 };
 </script>
 <style scoped>
-.div-1fogms4bee0 {
+.div-1eih9th5ow6 {
   position: relative;
 }
-.img-1fogms4bee0 {
+.img-1eih9th5ow6 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   position: absolute;
@@ -133,12 +133,12 @@ export default {
   top: 0px;
   left: 0px;
 }
-.div-1fogms4bee0-2 {
+.div-1eih9th5ow6-2 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
 }
-.div-1fogms4bee0-3 {
+.div-1eih9th5ow6-3 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/vue3/src/blocks/video/video.vue

@@ -1,7 +1,6 @@
 <template>
   <video
-    v-bind="attributes"
-    preload="none"
+    v-bind="videoProps"
     :style="{
   width: '100%',
   height: '100%',
@@ -14,10 +13,6 @@
 }"
     :src="video || 'no-src'"
     :poster="posterImage"
-    :autoPlay="autoPlay"
-    :muted="muted"
-    :controls="controls"
-    :loop="loop"
   ></video>
 </template>
 <script>
@@ -27,15 +22,48 @@ export default {
   name: "builder-video",
 
   props: [
+    "autoPlay",
+    "muted",
+    "controls",
+    "loop",
+    "playsInline",
     "attributes",
     "fit",
     "position",
     "video",
     "posterImage",
-    "autoPlay",
-    "muted",
-    "controls",
-    "loop",
   ],
+
+  computed: {
+    videoProps() {
+      return {
+        ...(this.autoPlay === true
+          ? {
+              autoPlay: true,
+            }
+          : {}),
+        ...(this.muted === true
+          ? {
+              muted: true,
+            }
+          : {}),
+        ...(this.controls === true
+          ? {
+              controls: true,
+            }
+          : {}),
+        ...(this.loop === true
+          ? {
+              loop: true,
+            }
+          : {}),
+        ...(this.playsInline === true
+          ? {
+              playsInline: true,
+            }
+          : {}),
+      };
+    },
+  },
 };
 </script>

package/vue3/src/components/render-blocks.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="_classStringToObject(this.className + ' div-3q96myty4lk')"
+    :class="_classStringToObject(this.className + ' div-1yj9n7yt24z')"
     :builder-path="path"
     :builder-parent-id="parent"
     :dataSet="{
@@ -93,7 +93,7 @@ export default {
 };
 </script>
 <style scoped>
-.div-3q96myty4lk {
+.div-1yj9n7yt24z {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/vue3/src/components/render-content/render-content.vue

@@ -1,13 +1,6 @@
 <template>
   <template v-if="useContent">
-    <div
-      @click="
-        track('click', {
-          contentId: useContent.id,
-        })
-      "
-      :builder-content-id="(useContent && useContent.id)"
-    >
+    <div @click="onClick($event)" :builder-content-id="(useContent && useContent.id)">
       <template v-if="shouldRenderContentStyles">
         <render-content-styles
           :cssCode="((useContent && useContent.data) && (useContent && useContent.data).cssCode)"
@@ -45,9 +38,17 @@ export default {
     "render-content-styles": defineAsyncComponent(RenderContentStyles),
     "render-blocks": defineAsyncComponent(RenderBlocks),
   },
-  props: ["content", "data", "context", "customComponents", "model", "apiKey"],
+  props: [
+    "content",
+    "data",
+    "context",
+    "customComponents",
+    "model",
+    "canTrack",
+    "apiKey",
+  ],
 
-  data: () => ({ overrideContent: null, update: 0, overrideState: {}, track }),
+  data: () => ({ overrideContent: null, update: 0, overrideState: {} }),
 
   provide() {
     const _this = this;
@@ -88,7 +89,7 @@ export default {
         );
       }
 
-      if (this.useContent) {
+      if (this.useContent && this.canTrack !== false) {
         track("impression", {
           contentId: this.useContent.id,
         });
@@ -248,6 +249,13 @@ export default {
         });
       }
     },
+    onClick(_event) {
+      if (this.useContent && this.canTrack !== false) {
+        track("click", {
+          contentId: this.useContent.id,
+        });
+      }
+    },
     evalExpression(expression) {
       return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
         evaluate({