@builder.io/sdk-vue 0.0.1-43 → 0.0.1-47

package/nuxt2/src/blocks/button.vue

@@ -11,7 +11,7 @@
   <span v-bind="attributes" v-else="">{{ text }}</span>
 </template>
 <script>
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {

package/nuxt2/src/blocks/columns.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="builder-columns div-njzf3onbkj">
+  <div class="builder-columns div-38o6qlysr38">
     <div
-      class="builder-column div-njzf3onbkj-2"
+      class="builder-column div-38o6qlysr38-2"
       v-for="(column, index) in columns"
       :style="{
         width: getColumnCssWidth(index),
@@ -16,7 +16,7 @@
 <script>
 import RenderBlocks from '../components/render-blocks';
 
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {
@@ -262,12 +262,12 @@ export default registerComponent(
 );
 </script>
 <style scoped>
-.div-njzf3onbkj {
+.div-38o6qlysr38 {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
-.div-njzf3onbkj-2 {
+.div-38o6qlysr38-2 {
   flex-grow: 1;
 }
 </style>

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

@@ -10,7 +10,7 @@
   ></div>
 </template>
 <script>
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {

package/nuxt2/src/blocks/embed.vue

@@ -2,7 +2,7 @@
   <div class="builder-embed" ref="elem" v-html="content"></div>
 </template>
 <script>
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {

package/nuxt2/src/blocks/form.vue

@@ -27,7 +27,7 @@
     ></builder-blocks>
 
     <pre
-      class="builder-form-error-text pre-2hxd3dhvji0"
+      class="builder-form-error-text pre-2o44605xnuc"
       v-if="submissionState === 'error' && responseData"
     >
         {{ JSON.stringify(responseData, null, 2) }}
@@ -44,7 +44,7 @@
 <script>
 import RenderBlock from '../components/render-block';
 
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {
@@ -515,7 +515,7 @@ export default registerComponent(
 );
 </script>
 <style scoped>
-.pre-2hxd3dhvji0 {
+.pre-2o44605xnuc {
   padding: 10px;
   color: red;
   text-align: center;

package/nuxt2/src/blocks/fragment.vue

@@ -2,7 +2,7 @@
   <span><slot></slot></span>
 </template>
 <script>
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {

package/nuxt2/src/blocks/image.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="div-1lmobbief0v">
+  <div class="div-13adfbgjm89">
     <picture>
       <img
         loading="lazy"
-        class="img-1lmobbief0v"
+        class="img-13adfbgjm89"
         :alt="altText"
         :aria-role="altText ? 'presentation' : undefined"
         :style="{
@@ -23,7 +23,7 @@
     </picture>
 
     <div
-      class="builder-image-sizer div-1lmobbief0v-2"
+      class="builder-image-sizer div-13adfbgjm89-2"
       v-if="
         aspectRatio &&
         !(
@@ -42,13 +42,13 @@
 
     <slot></slot>
 
-    <div class="div-1lmobbief0v-3" v-if="!fitContent">
+    <div class="div-13adfbgjm89-3" v-if="!fitContent">
       <slot></slot>
     </div>
   </div>
 </template>
 <script>
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {
@@ -167,10 +167,10 @@ export default registerComponent(
 );
 </script>
 <style scoped>
-.div-1lmobbief0v {
+.div-13adfbgjm89 {
   position: relative;
 }
-.img-1lmobbief0v {
+.img-13adfbgjm89 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   position: absolute;
@@ -179,12 +179,12 @@ export default registerComponent(
   top: 0px;
   left: 0px;
 }
-.div-1lmobbief0v-2 {
+.div-13adfbgjm89-2 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
 }
-.div-1lmobbief0v-3 {
+.div-13adfbgjm89-3 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/nuxt2/src/blocks/img.vue

@@ -13,7 +13,7 @@
 <script>
 import { isEditing } from '../functions/is-editing';
 
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {

package/nuxt2/src/blocks/input.vue

@@ -13,7 +13,7 @@
 <script>
 import { isEditing } from '../functions/is-editing';
 
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {

package/nuxt2/src/blocks/raw-text.vue

@@ -10,7 +10,7 @@
   ></span>
 </template>
 <script>
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {

package/nuxt2/src/blocks/section.vue

@@ -13,7 +13,7 @@
   </section>
 </template>
 <script>
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {

package/nuxt2/src/blocks/select.vue

@@ -18,7 +18,7 @@
 <script>
 import { isEditing } from '../functions/is-editing';
 
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {

package/nuxt2/src/blocks/submit-button.vue

@@ -4,7 +4,7 @@
   </button>
 </template>
 <script>
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {

package/nuxt2/src/blocks/text.vue

@@ -2,7 +2,7 @@
   <div class="builder-text" v-html="text"></div>
 </template>
 <script>
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {

package/nuxt2/src/blocks/textarea.vue

@@ -8,7 +8,7 @@
   ></textarea>
 </template>
 <script>
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {

package/nuxt2/src/blocks/video.vue

@@ -21,7 +21,7 @@
   ></video>
 </template>
 <script>
-import { registerComponent } from '@builder.io/sdk-vue';
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {

package/nuxt2/src/components/render-block.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    v-bind="properties"
+    v-bind="propertiesAndActions"
     v-if="!(componentInfo && componentInfo.noWrap)"
     :style="css"
     :is="tagName"
@@ -29,7 +29,7 @@
   <component
     v-bind="componentInfo && componentInfo.options"
     v-else=""
-    :attributes="properties"
+    :attributes="propertiesAndActions"
     :builderBlock="useBlock"
     :style="css"
     :children="useBlock.children"
@@ -98,6 +98,9 @@ export default {
         context: this.builderContext.context,
       });
     },
+    propertiesAndActions() {
+      return { ...this.properties, ...this.actions };
+    },
     actions() {
       return getBlockActions({
         block: this.useBlock,

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="div-6gr0dfe3mlc"
+    class="div-1ez1s0gxybh"
     :builder-path="path"
     :builder-parent-id="parent"
     @click="onClick"
@@ -72,7 +72,7 @@ export default {
 };
 </script>
 <style scoped>
-.div-6gr0dfe3mlc {
+.div-1ez1s0gxybh {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/nuxt2/src/functions/evaluate.js

@@ -67,6 +67,6 @@ function evaluate(options) {
       useCode
     )(builder, builder, options.state, options.context, options.event);
   } catch (e) {
-    console.warn('Builder custom code error', e);
+    console.warn('Builder custom code error: ', e);
   }
 }

package/nuxt2/src/functions/event-handler-name.js

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) =>
+  __defProp(target, '__esModule', { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+__export(exports, {
+  getEventHandlerName: () => getEventHandlerName,
+});
+const getEventHandlerName = (key) => `v-on:${key.toLowerCase()}`;

package/nuxt2/src/functions/get-block-actions.js

@@ -44,15 +44,16 @@ __export(exports, {
   getBlockActions: () => getBlockActions,
 });
 var import_evaluate = __toModule(require('./evaluate'));
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
+var import_event_handler_name = __toModule(require('./event-handler-name'));
 function getBlockActions(options) {
   const obj = {};
   if (options.block.actions) {
     for (const key in options.block.actions) {
+      if (!options.block.actions.hasOwnProperty(key)) {
+        continue;
+      }
       const value = options.block.actions[key];
-      obj['on' + capitalizeFirstLetter(key)] = (event) =>
+      obj[(0, import_event_handler_name.getEventHandlerName)(key)] = (event) =>
         (0, import_evaluate.evaluate)({
           code: value,
           context: options.context,

package/nuxt2/src/functions/get-processed-block.js

@@ -68,8 +68,10 @@ __export(exports, {
 });
 var import_evaluate = __toModule(require('./evaluate'));
 var import_set = __toModule(require('./set'));
+var import_transform_block = __toModule(require('./transform-block'));
 function getProcessedBlock(options) {
-  const { block, state, context } = options;
+  const { state, context } = options;
+  const block = (0, import_transform_block.transformBlock)(options.block);
   if (!block.bindings) {
     return block;
   }

package/nuxt2/src/functions/transform-block.js

@@ -0,0 +1,14 @@
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) =>
+  __defProp(target, '__esModule', { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+__export(exports, {
+  transformBlock: () => transformBlock,
+});
+function transformBlock(block) {
+  return block;
+}

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@builder.io/sdk-vue",
   "description": "Builder.io SDK for Vue",
-  "version": "0.0.1-43",
+  "version": "0.0.1-47",
   "dependencies": {
     "node-fetch": "^2.6.1"
   },
   "main": "./nuxt2/src/index.js",
   "exports": {
-    "vue2": "./vue2/src/index.js",
-    "nuxt2": "./nuxt2/src/index.js",
-    "vue3": "./vue3/src/index.js"
+    "./nuxt": "./nuxt.js",
+    "./vue2": "./vue2/src/index.js",
+    "./nuxt2": "./nuxt2/src/index.js",
+    "./vue3": "./vue3/src/index.js"
   },
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"

package/vue2/src/functions/evaluate.js

@@ -67,6 +67,6 @@ function evaluate(options) {
       useCode
     )(builder, builder, options.state, options.context, options.event);
   } catch (e) {
-    console.warn('Builder custom code error', e);
+    console.warn('Builder custom code error: ', e);
   }
 }

package/vue2/src/functions/event-handler-name.js

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) =>
+  __defProp(target, '__esModule', { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+__export(exports, {
+  getEventHandlerName: () => getEventHandlerName,
+});
+const getEventHandlerName = (key) => `v-on:${key.toLowerCase()}`;

package/vue2/src/functions/get-block-actions.js

@@ -44,15 +44,16 @@ __export(exports, {
   getBlockActions: () => getBlockActions,
 });
 var import_evaluate = __toModule(require('./evaluate'));
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
+var import_event_handler_name = __toModule(require('./event-handler-name'));
 function getBlockActions(options) {
   const obj = {};
   if (options.block.actions) {
     for (const key in options.block.actions) {
+      if (!options.block.actions.hasOwnProperty(key)) {
+        continue;
+      }
       const value = options.block.actions[key];
-      obj['on' + capitalizeFirstLetter(key)] = (event) =>
+      obj[(0, import_event_handler_name.getEventHandlerName)(key)] = (event) =>
         (0, import_evaluate.evaluate)({
           code: value,
           context: options.context,

package/vue2/src/functions/get-processed-block.js

@@ -68,8 +68,10 @@ __export(exports, {
 });
 var import_evaluate = __toModule(require('./evaluate'));
 var import_set = __toModule(require('./set'));
+var import_transform_block = __toModule(require('./transform-block'));
 function getProcessedBlock(options) {
-  const { block, state, context } = options;
+  const { state, context } = options;
+  const block = (0, import_transform_block.transformBlock)(options.block);
   if (!block.bindings) {
     return block;
   }

package/vue2/src/functions/transform-block.js

@@ -0,0 +1,14 @@
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) =>
+  __defProp(target, '__esModule', { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+__export(exports, {
+  transformBlock: () => transformBlock,
+});
+function transformBlock(block) {
+  return block;
+}

package/vue3/src/functions/evaluate.js

@@ -67,6 +67,6 @@ function evaluate(options) {
       useCode
     )(builder, builder, options.state, options.context, options.event);
   } catch (e) {
-    console.warn('Builder custom code error', e);
+    console.warn('Builder custom code error: ', e);
   }
 }

package/vue3/src/functions/event-handler-name.js

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) =>
+  __defProp(target, '__esModule', { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+__export(exports, {
+  getEventHandlerName: () => getEventHandlerName,
+});
+const getEventHandlerName = (key) => `v-on:${key.toLowerCase()}`;

package/vue3/src/functions/get-block-actions.js

@@ -44,15 +44,16 @@ __export(exports, {
   getBlockActions: () => getBlockActions,
 });
 var import_evaluate = __toModule(require('./evaluate'));
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
+var import_event_handler_name = __toModule(require('./event-handler-name'));
 function getBlockActions(options) {
   const obj = {};
   if (options.block.actions) {
     for (const key in options.block.actions) {
+      if (!options.block.actions.hasOwnProperty(key)) {
+        continue;
+      }
       const value = options.block.actions[key];
-      obj['on' + capitalizeFirstLetter(key)] = (event) =>
+      obj[(0, import_event_handler_name.getEventHandlerName)(key)] = (event) =>
         (0, import_evaluate.evaluate)({
           code: value,
           context: options.context,

package/vue3/src/functions/get-processed-block.js

@@ -68,8 +68,10 @@ __export(exports, {
 });
 var import_evaluate = __toModule(require('./evaluate'));
 var import_set = __toModule(require('./set'));
+var import_transform_block = __toModule(require('./transform-block'));
 function getProcessedBlock(options) {
-  const { block, state, context } = options;
+  const { state, context } = options;
+  const block = (0, import_transform_block.transformBlock)(options.block);
   if (!block.bindings) {
     return block;
   }

package/vue3/src/functions/transform-block.js

@@ -0,0 +1,14 @@
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) =>
+  __defProp(target, '__esModule', { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+__export(exports, {
+  transformBlock: () => transformBlock,
+});
+function transformBlock(block) {
+  return block;
+}