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

package/package.json

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

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="builder-columns div-1pl23ac79ld" :style="columnsCssVars">
+  <div class="builder-columns div-20351ewpue7" :style="columnsCssVars">
     <div
-      class="builder-column div-1pl23ac79ld-2"
+      class="builder-column div-20351ewpue7-2"
       v-for="(column, index) in columns"
       :style="{
         width: getColumnCssWidth(index),
@@ -74,32 +74,32 @@ export default {
 };
 </script>
 <style scoped>
-.div-1pl23ac79ld {
+.div-20351ewpue7 {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
 @media (max-width: 999px) {
-  .div-1pl23ac79ld {
+  .div-20351ewpue7 {
     flex-direction: var(--flex-dir-tablet);
   }
 }
 @media (max-width: 639px) {
-  .div-1pl23ac79ld {
+  .div-20351ewpue7 {
     flex-direction: var(--flex-dir);
   }
 }
-.div-1pl23ac79ld-2 {
+.div-20351ewpue7-2 {
   flex-grow: 1;
 }
 @media (max-width: 999px) {
-  .div-1pl23ac79ld-2 {
+  .div-20351ewpue7-2 {
     width: var(--column-width-tablet) !important;
     margin-left: var(--column-margin-left-tablet) !important;
   }
 }
 @media (max-width: 639px) {
-  .div-1pl23ac79ld-2 {
+  .div-20351ewpue7-2 {
     width: var(--column-width) !important;
     margin-left: var(--column-margin-left) !important;
   }

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="div-2lx2rpb0jxo">
+  <div class="div-cvp1sc2nsao">
     <picture>
       <source type="image/webp" v-if="webpSrcSet" :srcset="webpSrcSet" />
 
@@ -15,7 +15,7 @@
           _classStringToObject(
             'builder-image' +
               (this.className ? ' ' + this.className : '') +
-              ' img-2lx2rpb0jxo'
+              ' img-cvp1sc2nsao'
           )
         "
         :src="image"
@@ -26,7 +26,7 @@
     </picture>
 
     <div
-      class="builder-image-sizer div-2lx2rpb0jxo-2"
+      class="builder-image-sizer div-cvp1sc2nsao-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-2lx2rpb0jxo-3" v-if="!fitContent">
+    <div class="div-cvp1sc2nsao-3" v-if="!fitContent">
       <slot></slot>
     </div>
   </div>
@@ -110,10 +110,10 @@ export default {
 };
 </script>
 <style scoped>
-.div-2lx2rpb0jxo {
+.div-cvp1sc2nsao {
   position: relative;
 }
-.img-2lx2rpb0jxo {
+.img-cvp1sc2nsao {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   position: absolute;
@@ -122,12 +122,12 @@ export default {
   top: 0px;
   left: 0px;
 }
-.div-2lx2rpb0jxo-2 {
+.div-cvp1sc2nsao-2 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
 }
-.div-2lx2rpb0jxo-3 {
+.div-cvp1sc2nsao-3 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

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

@@ -6,7 +6,7 @@
         contentId: useContent.id,
       })
     "
-    :data-builder-content-id="(useContent && useContent.id)"
+    :builder-content-id="(useContent && useContent.id)"
   >
     <render-content-styles
       v-if="shouldRenderContentStyles"

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

@@ -1,8 +1,8 @@
 <template>
-  <div class="builder-columns div-20vehov4ay6" :style="columnsCssVars">
+  <div class="builder-columns div-2btisl9m7v3" :style="columnsCssVars">
     <template :key="index" v-for="(column, index) in columns">
       <div
-        class="builder-column div-20vehov4ay6-2"
+        class="builder-column div-2btisl9m7v3-2"
         :style="{
           width: getColumnCssWidth(index),
           marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
@@ -76,32 +76,32 @@ export default {
 };
 </script>
 <style scoped>
-.div-20vehov4ay6 {
+.div-2btisl9m7v3 {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
 @media (max-width: 999px) {
-  .div-20vehov4ay6 {
+  .div-2btisl9m7v3 {
     flex-direction: var(--flex-dir-tablet);
   }
 }
 @media (max-width: 639px) {
-  .div-20vehov4ay6 {
+  .div-2btisl9m7v3 {
     flex-direction: var(--flex-dir);
   }
 }
-.div-20vehov4ay6-2 {
+.div-2btisl9m7v3-2 {
   flex-grow: 1;
 }
 @media (max-width: 999px) {
-  .div-20vehov4ay6-2 {
+  .div-2btisl9m7v3-2 {
     width: var(--column-width-tablet) !important;
     margin-left: var(--column-margin-left-tablet) !important;
   }
 }
 @media (max-width: 639px) {
-  .div-20vehov4ay6-2 {
+  .div-2btisl9m7v3-2 {
     width: var(--column-width) !important;
     margin-left: var(--column-margin-left) !important;
   }

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-b9953mjwo3c">
+      <pre class="builder-form-error-text pre-256wrwn33ry">
         {{ JSON.stringify(responseData, null, 2) }}
       </pre>
     </template>
@@ -306,7 +306,7 @@ export default {
 };
 </script>
 <style scoped>
-.pre-b9953mjwo3c {
+.pre-256wrwn33ry {
   padding: 10px;
   color: red;
   text-align: center;

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

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

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

@@ -6,7 +6,7 @@
           contentId: useContent.id,
         })
       "
-      :data-builder-content-id="(useContent && useContent.id)"
+      :builder-content-id="(useContent && useContent.id)"
     >
       <template v-if="shouldRenderContentStyles">
         <render-content-styles