@builder.io/sdk-vue 0.0.1-62 → 0.0.1-63

package/package.json

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

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="builder-columns div-2fnk003dqad" :style="columnsCssVars">
+  <div class="builder-columns div-29wpyomtntv" :style="columnsCssVars">
     <div
-      class="builder-column div-2fnk003dqad-2"
+      class="builder-column div-29wpyomtntv-2"
       v-for="(column, index) in columns"
       :style="{
         width: getColumnCssWidth(index),
@@ -74,32 +74,32 @@ export default {
 };
 </script>
 <style scoped>
-.div-2fnk003dqad {
+.div-29wpyomtntv {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
 @media (max-width: 999px) {
-  .div-2fnk003dqad {
+  .div-29wpyomtntv {
     flex-direction: var(--flex-dir-tablet);
   }
 }
 @media (max-width: 639px) {
-  .div-2fnk003dqad {
+  .div-29wpyomtntv {
     flex-direction: var(--flex-dir);
   }
 }
-.div-2fnk003dqad-2 {
+.div-29wpyomtntv-2 {
   flex-grow: 1;
 }
 @media (max-width: 999px) {
-  .div-2fnk003dqad-2 {
+  .div-29wpyomtntv-2 {
     width: var(--column-width-tablet) !important;
     margin-left: var(--column-margin-left-tablet) !important;
   }
 }
 @media (max-width: 639px) {
-  .div-2fnk003dqad-2 {
+  .div-29wpyomtntv-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-4wbls88y960"
+      class="builder-form-error-text pre-178o76acnws"
       v-if="submissionState === 'error' && responseData"
     >
         {{ JSON.stringify(responseData, null, 2) }}
@@ -301,7 +301,7 @@ export default {
 };
 </script>
 <style scoped>
-.pre-4wbls88y960 {
+.pre-178o76acnws {
   padding: 10px;
   color: red;
   text-align: center;

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

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

package/vue2/src/blocks/symbol/symbol.vue

@@ -9,6 +9,7 @@
     <render-content
       :apiKey="builderContext.apiKey"
       :context="builderContext.context"
+      :customComponents="Object.values(builderContext.registeredComponents)"
       :data="{ ...(symbol && symbol.data),
   ...builderContext.state,
   ...(((symbol && symbol.content) && (symbol && symbol.content).data) && ((symbol && symbol.content) && (symbol && symbol.content).data).state)

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

@@ -1,8 +1,8 @@
 <template>
-  <div class="builder-columns div-7fq9d0i380" :style="columnsCssVars">
+  <div class="builder-columns div-20vehov4ay6" :style="columnsCssVars">
     <template :key="index" v-for="(column, index) in columns">
       <div
-        class="builder-column div-7fq9d0i380-2"
+        class="builder-column div-20vehov4ay6-2"
         :style="{
           width: getColumnCssWidth(index),
           marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
@@ -76,32 +76,32 @@ export default {
 };
 </script>
 <style scoped>
-.div-7fq9d0i380 {
+.div-20vehov4ay6 {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
 @media (max-width: 999px) {
-  .div-7fq9d0i380 {
+  .div-20vehov4ay6 {
     flex-direction: var(--flex-dir-tablet);
   }
 }
 @media (max-width: 639px) {
-  .div-7fq9d0i380 {
+  .div-20vehov4ay6 {
     flex-direction: var(--flex-dir);
   }
 }
-.div-7fq9d0i380-2 {
+.div-20vehov4ay6-2 {
   flex-grow: 1;
 }
 @media (max-width: 999px) {
-  .div-7fq9d0i380-2 {
+  .div-20vehov4ay6-2 {
     width: var(--column-width-tablet) !important;
     margin-left: var(--column-margin-left-tablet) !important;
   }
 }
 @media (max-width: 639px) {
-  .div-7fq9d0i380-2 {
+  .div-20vehov4ay6-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-361b1o6wv2k">
+      <pre class="builder-form-error-text pre-1n1bt6e2i9n">
         {{ JSON.stringify(responseData, null, 2) }}
       </pre>
     </template>
@@ -306,7 +306,7 @@ export default {
 };
 </script>
 <style scoped>
-.pre-361b1o6wv2k {
+.pre-1n1bt6e2i9n {
   padding: 10px;
   color: red;
   text-align: center;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="div-20vehov4ay6">
+  <div class="div-256wrwn33ry">
     <picture>
       <template v-if="(srcSetToUse && srcSetToUse.match)(/builder\.io/) && !noWebp">
         <source
@@ -20,7 +20,7 @@
           _classStringToObject(
             'builder-image' +
               (this.className ? ' ' + this.className : '') +
-              ' img-20vehov4ay6'
+              ' img-256wrwn33ry'
           )
         "
         :src="image"
@@ -34,7 +34,7 @@
       v-if="aspectRatio && !(fitContent && ((builderBlock && builderBlock.children) && (builderBlock && builderBlock.children).length))"
     >
       <div
-        class="builder-image-sizer div-20vehov4ay6-2"
+        class="builder-image-sizer div-256wrwn33ry-2"
         :style="{
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           paddingTop: aspectRatio * 100 + '%',
@@ -47,7 +47,7 @@
     </template>
 
     <template v-if="!fitContent">
-      <div class="div-20vehov4ay6-3">
+      <div class="div-256wrwn33ry-3">
         <slot></slot>
       </div>
     </template>
@@ -117,10 +117,10 @@ export default {
 };
 </script>
 <style scoped>
-.div-20vehov4ay6 {
+.div-256wrwn33ry {
   position: relative;
 }
-.img-20vehov4ay6 {
+.img-256wrwn33ry {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   position: absolute;
@@ -129,12 +129,12 @@ export default {
   top: 0px;
   left: 0px;
 }
-.div-20vehov4ay6-2 {
+.div-256wrwn33ry-2 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
 }
-.div-20vehov4ay6-3 {
+.div-256wrwn33ry-3 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/vue3/src/blocks/symbol/symbol.vue

@@ -9,6 +9,7 @@
     <render-content
       :apiKey="builderContext.apiKey"
       :context="builderContext.context"
+      :customComponents="Object.values(builderContext.registeredComponents)"
       :data="{ ...(symbol && symbol.data),
   ...builderContext.state,
   ...(((symbol && symbol.content) && (symbol && symbol.content).data) && ((symbol && symbol.content) && (symbol && symbol.content).data).state)