@builder.io/sdk-vue 0.0.1-41 → 0.0.1-45

package/README.md

@@ -15,3 +15,21 @@ Add to your `nuxt.config.js`:
 ```js
 buildModules: ['@builder.io/sdk-vue/nuxt'];
 ```
+
+Then register built in and custom components as seen [here](/examples/vue-nuxt/scripts/register-builder-components.js)
+
+You can see a full example of using Builder.io + Nuxt [here](/examples/vue-nuxt)
+
+## Status
+
+This SDK is currently in beta
+
+Left to implement:
+
+- SSR (Nuxt currently can't find the custom components on the server, looking into)
+- Stacking columns on breakpoints
+- "View current draft" logic
+- "+ add block" button when starting a page (for now just drag your first block to the "layers" tab)
+- Symbols
+- Server side a/b testing
+- "animations" tab and "data" tab

package/nuxt.js

@@ -8,7 +8,7 @@ export default function () {
     );
   }
 
-  this.nuxt.hook('components:dirs', dirs => {
+  this.nuxt.hook('components:dirs', (dirs) => {
     // Add ./components dir to the list
     dirs.push({
       path: join(__dirname, 'nuxt2/src/components'),

package/nuxt2/src/blocks/button.vue

@@ -1,6 +1,7 @@
 <template>
   <a
     v-bind="attributes"
+    role="button"
     v-if="link"
     :href="link"
     :target="openLinkInNewTab ? '_blank' : undefined"
@@ -10,39 +11,39 @@
   <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(
   {
-    name: "builder-button",
+    name: 'builder-button',
 
-    props: ["attributes", "text", "link", "openLinkInNewTab"],
+    props: ['attributes', 'text', 'link', 'openLinkInNewTab'],
   },
   {
-    name: "Core:Button",
+    name: 'Core:Button',
     builtIn: true,
     image:
-      "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
+      'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
     defaultStyles: {
-      appearance: "none",
-      paddingTop: "15px",
-      paddingBottom: "15px",
-      paddingLeft: "25px",
-      paddingRight: "25px",
-      backgroundColor: "#3898EC",
-      color: "white",
-      borderRadius: "4px",
-      textAlign: "center",
-      cursor: "pointer",
+      appearance: 'none',
+      paddingTop: '15px',
+      paddingBottom: '15px',
+      paddingLeft: '25px',
+      paddingRight: '25px',
+      backgroundColor: '#000000',
+      color: 'white',
+      borderRadius: '4px',
+      textAlign: 'center',
+      cursor: 'pointer',
     },
     inputs: [
-      { name: "text", type: "text", defaultValue: "Click me!", bubble: true },
-      { name: "link", type: "url", bubble: true },
+      { name: 'text', type: 'text', defaultValue: 'Click me!', bubble: true },
+      { name: 'link', type: 'url', bubble: true },
       {
-        name: "openLinkInNewTab",
-        type: "boolean",
+        name: 'openLinkInNewTab',
+        type: 'boolean',
         defaultValue: false,
-        friendlyName: "Open link in new tab",
+        friendlyName: 'Open link in new tab',
       },
     ],
     static: true,

package/nuxt2/src/blocks/columns.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="builder-columns div-1c8a5iyk9bu">
+  <div class="builder-columns div-38o6qlysr38">
     <div
-      class="builder-column div-1c8a5iyk9bu-2"
+      class="builder-column div-38o6qlysr38-2"
       v-for="(column, index) in columns"
       :style="{
         width: getColumnCssWidth(index),
@@ -14,19 +14,19 @@
   </div>
 </template>
 <script>
-import RenderBlocks from "../components/render-blocks";
+import RenderBlocks from '../components/render-blocks';
 
-import { registerComponent } from "@builder.io/sdk-vue";
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {
-    name: "builder-columns",
-    components: { "render-blocks": async () => RenderBlocks },
-    props: ["space", "columns"],
+    name: 'builder-columns',
+    components: { 'render-blocks': async () => RenderBlocks },
+    props: ['space', 'columns'],
 
     methods: {
       getGutterSize() {
-        return typeof this.space === "number" ? this.space || 0 : 20;
+        return typeof this.space === 'number' ? this.space || 0 : 20;
       },
       getColumns() {
         return this.columns || [];
@@ -45,133 +45,133 @@ export default registerComponent(
     },
   },
   {
-    name: "Columns",
+    name: 'Columns',
     builtIn: true,
     inputs: [
       {
-        name: "columns",
-        type: "array",
+        name: 'columns',
+        type: 'array',
         broadcast: true,
         subFields: [
           {
-            name: "blocks",
-            type: "array",
+            name: 'blocks',
+            type: 'array',
             hideFromUI: true,
             defaultValue: [
               {
-                "@type": "@builder.io/sdk:Element",
+                '@type': '@builder.io/sdk:Element',
                 responsiveStyles: {
                   large: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "stretch",
-                    flexShrink: "0",
-                    position: "relative",
-                    marginTop: "30px",
-                    textAlign: "center",
-                    lineHeight: "normal",
-                    height: "auto",
-                    minHeight: "20px",
-                    minWidth: "20px",
-                    overflow: "hidden",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'stretch',
+                    flexShrink: '0',
+                    position: 'relative',
+                    marginTop: '30px',
+                    textAlign: 'center',
+                    lineHeight: 'normal',
+                    height: 'auto',
+                    minHeight: '20px',
+                    minWidth: '20px',
+                    overflow: 'hidden',
                   },
                 },
                 component: {
-                  name: "Image",
+                  name: 'Image',
                   options: {
                     image:
-                      "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                    backgroundPosition: "center",
-                    backgroundSize: "cover",
+                      'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                    backgroundPosition: 'center',
+                    backgroundSize: 'cover',
                     aspectRatio: 0.7004048582995948,
                   },
                 },
               },
               {
-                "@type": "@builder.io/sdk:Element",
+                '@type': '@builder.io/sdk:Element',
                 responsiveStyles: {
                   large: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "stretch",
-                    flexShrink: "0",
-                    position: "relative",
-                    marginTop: "30px",
-                    textAlign: "center",
-                    lineHeight: "normal",
-                    height: "auto",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'stretch',
+                    flexShrink: '0',
+                    position: 'relative',
+                    marginTop: '30px',
+                    textAlign: 'center',
+                    lineHeight: 'normal',
+                    height: 'auto',
                   },
                 },
                 component: {
-                  name: "Text",
-                  options: { text: "<p>Enter some text...</p>" },
+                  name: 'Text',
+                  options: { text: '<p>Enter some text...</p>' },
                 },
               },
             ],
           },
           {
-            name: "width",
-            type: "number",
+            name: 'width',
+            type: 'number',
             hideFromUI: true,
-            helperText: "Width %, e.g. set to 50 to fill half of the space",
+            helperText: 'Width %, e.g. set to 50 to fill half of the space',
           },
           {
-            name: "link",
-            type: "url",
+            name: 'link',
+            type: 'url',
             helperText:
-              "Optionally set a url that clicking this column will link to",
+              'Optionally set a url that clicking this column will link to',
           },
         ],
         defaultValue: [
           {
             blocks: [
               {
-                "@type": "@builder.io/sdk:Element",
+                '@type': '@builder.io/sdk:Element',
                 responsiveStyles: {
                   large: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "stretch",
-                    flexShrink: "0",
-                    position: "relative",
-                    marginTop: "30px",
-                    textAlign: "center",
-                    lineHeight: "normal",
-                    height: "auto",
-                    minHeight: "20px",
-                    minWidth: "20px",
-                    overflow: "hidden",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'stretch',
+                    flexShrink: '0',
+                    position: 'relative',
+                    marginTop: '30px',
+                    textAlign: 'center',
+                    lineHeight: 'normal',
+                    height: 'auto',
+                    minHeight: '20px',
+                    minWidth: '20px',
+                    overflow: 'hidden',
                   },
                 },
                 component: {
-                  name: "Image",
+                  name: 'Image',
                   options: {
                     image:
-                      "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                    backgroundPosition: "center",
-                    backgroundSize: "cover",
+                      'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                    backgroundPosition: 'center',
+                    backgroundSize: 'cover',
                     aspectRatio: 0.7004048582995948,
                   },
                 },
               },
               {
-                "@type": "@builder.io/sdk:Element",
+                '@type': '@builder.io/sdk:Element',
                 responsiveStyles: {
                   large: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "stretch",
-                    flexShrink: "0",
-                    position: "relative",
-                    marginTop: "30px",
-                    textAlign: "center",
-                    lineHeight: "normal",
-                    height: "auto",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'stretch',
+                    flexShrink: '0',
+                    position: 'relative',
+                    marginTop: '30px',
+                    textAlign: 'center',
+                    lineHeight: 'normal',
+                    height: 'auto',
                   },
                 },
                 component: {
-                  name: "Text",
-                  options: { text: "<p>Enter some text...</p>" },
+                  name: 'Text',
+                  options: { text: '<p>Enter some text...</p>' },
                 },
               },
             ],
@@ -179,52 +179,52 @@ export default registerComponent(
           {
             blocks: [
               {
-                "@type": "@builder.io/sdk:Element",
+                '@type': '@builder.io/sdk:Element',
                 responsiveStyles: {
                   large: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "stretch",
-                    flexShrink: "0",
-                    position: "relative",
-                    marginTop: "30px",
-                    textAlign: "center",
-                    lineHeight: "normal",
-                    height: "auto",
-                    minHeight: "20px",
-                    minWidth: "20px",
-                    overflow: "hidden",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'stretch',
+                    flexShrink: '0',
+                    position: 'relative',
+                    marginTop: '30px',
+                    textAlign: 'center',
+                    lineHeight: 'normal',
+                    height: 'auto',
+                    minHeight: '20px',
+                    minWidth: '20px',
+                    overflow: 'hidden',
                   },
                 },
                 component: {
-                  name: "Image",
+                  name: 'Image',
                   options: {
                     image:
-                      "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                    backgroundPosition: "center",
-                    backgroundSize: "cover",
+                      'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                    backgroundPosition: 'center',
+                    backgroundSize: 'cover',
                     aspectRatio: 0.7004048582995948,
                   },
                 },
               },
               {
-                "@type": "@builder.io/sdk:Element",
+                '@type': '@builder.io/sdk:Element',
                 responsiveStyles: {
                   large: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "stretch",
-                    flexShrink: "0",
-                    position: "relative",
-                    marginTop: "30px",
-                    textAlign: "center",
-                    lineHeight: "normal",
-                    height: "auto",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'stretch',
+                    flexShrink: '0',
+                    position: 'relative',
+                    marginTop: '30px',
+                    textAlign: 'center',
+                    lineHeight: 'normal',
+                    height: 'auto',
                   },
                 },
                 component: {
-                  name: "Text",
-                  options: { text: "<p>Enter some text...</p>" },
+                  name: 'Text',
+                  options: { text: '<p>Enter some text...</p>' },
                 },
               },
             ],
@@ -234,27 +234,27 @@ export default registerComponent(
           "        function clearWidths() {          columns.forEach(col => {            col.delete('width');          });        }        const columns = options.get('columns') as Array<map<string, any>>;        if (Array.isArray(columns)) {          const containsColumnWithWidth = !!columns.find(col => col.get('width'));          if (containsColumnWithWidth) {            const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));            if (containsColumnWithoutWidth) {              clearWidths();            } else {              const sumWidths = columns.reduce((memo, col) => {                return memo + col.get('width');              }, 0);              const widthsDontAddUp = sumWidths !== 100;              if (widthsDontAddUp) {                clearWidths();              }            }          }        }      ",
       },
       {
-        name: "space",
-        type: "number",
+        name: 'space',
+        type: 'number',
         defaultValue: 20,
-        helperText: "Size of gap between columns",
+        helperText: 'Size of gap between columns',
         advanced: true,
       },
       {
-        name: "stackColumnsAt",
-        type: "string",
-        defaultValue: "tablet",
+        name: 'stackColumnsAt',
+        type: 'string',
+        defaultValue: 'tablet',
         helperText:
-          "Convert horizontal columns to vertical at what device size",
-        enum: ["tablet", "mobile", "never"],
+          'Convert horizontal columns to vertical at what device size',
+        enum: ['tablet', 'mobile', 'never'],
         advanced: true,
       },
       {
-        name: "reverseColumnsWhenStacked",
-        type: "boolean",
+        name: 'reverseColumnsWhenStacked',
+        type: 'boolean',
         defaultValue: false,
         helperText:
-          "When stacking columns for mobile devices, reverse the ordering",
+          'When stacking columns for mobile devices, reverse the ordering',
         advanced: true,
       },
     ],
@@ -262,12 +262,12 @@ export default registerComponent(
 );
 </script>
 <style scoped>
-.div-1c8a5iyk9bu {
+.div-38o6qlysr38 {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
-.div-1c8a5iyk9bu-2 {
+.div-38o6qlysr38-2 {
   flex-grow: 1;
 }
 </style>

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

@@ -10,13 +10,13 @@
   ></div>
 </template>
 <script>
-import { registerComponent } from "@builder.io/sdk-vue";
+import { registerComponent } from '../functions/register-component';
 
 export default registerComponent(
   {
-    name: "builder-custom-code",
+    name: 'builder-custom-code',
 
-    props: ["replaceNodes", "code"],
+    props: ['replaceNodes', 'code'],
 
     data: () => ({ scriptsInserted: [], scriptsRun: [] }),
 
@@ -27,9 +27,9 @@ export default registerComponent(
     methods: {
       findAndRunScripts() {
         // TODO: Move this function to standalone one in '@builder.io/utils'
-        if (this.$refs.elem && typeof window !== "undefined") {
+        if (this.$refs.elem && typeof window !== 'undefined') {
           /** @type {HTMLScriptElement[]} */
-          const scripts = this.$refs.elem.getElementsByTagName("script");
+          const scripts = this.$refs.elem.getElementsByTagName('script');
 
           for (let i = 0; i < scripts.length; i++) {
             const script = scripts[i];
@@ -40,16 +40,16 @@ export default registerComponent(
               }
 
               this.scriptsInserted.push(script.src);
-              const newScript = document.createElement("script");
+              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",
+                'text/javascript',
+                'application/javascript',
+                'application/ecmascript',
               ].includes(script.type)
             ) {
               if (this.scriptsRun.includes(script.innerText)) {
@@ -60,7 +60,7 @@ export default registerComponent(
                 this.scriptsRun.push(script.innerText);
                 new Function(script.innerText)();
               } catch (error) {
-                console.warn("`CustomCode`: Error running script:", error);
+                console.warn('`CustomCode`: Error running script:', error);
               }
             }
           }
@@ -68,7 +68,7 @@ export default registerComponent(
       },
       _classStringToObject(str) {
         const obj = {};
-        if (typeof str !== "string") {
+        if (typeof str !== 'string') {
           return obj;
         }
         const classNames = str.trim().split(/\s+/);
@@ -80,30 +80,30 @@ export default registerComponent(
     },
   },
   {
-    name: "Custom Code",
+    name: 'Custom Code',
     static: true,
     builtIn: true,
-    requiredPermissions: ["editCode"],
+    requiredPermissions: ['editCode'],
     inputs: [
       {
-        name: "code",
-        type: "html",
+        name: 'code',
+        type: 'html',
         required: true,
-        defaultValue: "<p>Hello there, I am custom HTML code!</p>",
+        defaultValue: '<p>Hello there, I am custom HTML code!</p>',
         code: true,
       },
       {
-        name: "replaceNodes",
-        type: "boolean",
-        helperText: "Preserve server rendered dom nodes",
+        name: 'replaceNodes',
+        type: 'boolean',
+        helperText: 'Preserve server rendered dom nodes',
         advanced: true,
       },
       {
-        name: "scriptsClientOnly",
-        type: "boolean",
+        name: 'scriptsClientOnly',
+        type: 'boolean',
         defaultValue: false,
         helperText:
-          "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
+          'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',
         advanced: true,
       },
     ],