@builder.io/sdk-vue 0.0.1-48 → 0.0.1-50

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+### 0.0.1-49
+
+- Fix: show the "+ add block" button on empty pages https://github.com/BuilderIO/builder/pull/934
+- Add `getBuilderSearchParams` helper export to easily view current drafts on your production site. https://github.com/BuilderIO/builder/pull/883
+
+### 0.0.1-48
+
+Changes:
+
+- Adds support for Columns https://github.com/BuilderIO/builder/pull/717
+- Add preliminary support for Children within custom components https://github.com/BuilderIO/builder/pull/753
+- Seeds classnames to reduce variation in changes https://github.com/BuilderIO/builder/pull/703
+- Fixes `getAllContent` to traverse all symbols/references https://github.com/BuilderIO/builder/pull/718

package/README.md

@@ -2,12 +2,28 @@
 
 This is the 2.0 Vue SDK. It is currently in beta.
 
-NOTE: If you are looking for the stable 1.0 Vue SDK, you can find it [here](https://github.com/BuilderIO/builder/tree/main/packages/vue)
+NOTE: If you are looking for the stable 1.0 Vue SDK, you can find it [here](/packages/vue)
 
 ## Feature Support
 
 To check the status of the SDK, look at [these tables](../../README.md#feature-implementation).
 
+## Version Support
+
+Legend:
+
+- ✅: implemented
+- 🏗: currently in progress
+- ⚠️: not-yet implemented
+- N/A : does not apply
+
+| Platform | Support |
+| -------- | ------- |
+| Vue 2    | 🏗       |
+| Nuxt 2   | 🏗       |
+| Vue 3    | ⚠️      |
+| Nuxt 3   | ⚠️      |
+
 ## Getting Started
 
 ```
@@ -24,9 +40,9 @@ Add to your `nuxt.config.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)
+Then register built in and custom components as seen [here](/examples/vue/nuxt-2/scripts/register-builder-components.js)
 
 You can see examples of using Builder.io:
 
-- with Nuxt [here](/examples/vue-nuxt)
-- with Vue Storefront [here](/examples/vue/vue-storefront/)
+- with Nuxt [here](/examples/vue/nuxt-2/)
+- with Vue Storefront [here](/examples/vue/vue-storefront-2)

package/nuxt2/src/blocks/button.vue

@@ -11,39 +11,39 @@
   <span v-bind="attributes" v-else="">{{ text }}</span>
 </template>
 <script>
-import { registerComponent } from '../functions/register-component';
+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: '#000000',
-      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-23e8fqt91nf" :style="columnsCssVars">
+  <div class="builder-columns div-21azgz5avex" :style="columnsCssVars">
     <div
-      class="builder-column div-23e8fqt91nf-2"
+      class="builder-column div-21azgz5avex-2"
       v-for="(column, index) in columns"
       :style="{
         width: getColumnCssWidth(index),
@@ -15,44 +15,44 @@
   </div>
 </template>
 <script>
-import RenderBlocks from '../components/render-blocks';
+import RenderBlocks from "../components/render-blocks";
 
-import { registerComponent } from '../functions/register-component';
+import { registerComponent } from "../functions/register-component";
 
 export default registerComponent(
   {
-    name: 'builder-columns',
-    components: { 'render-blocks': async () => RenderBlocks },
-    props: ['space', 'columns', 'stackColumnsAt', 'reverseColumnsWhenStacked'],
+    name: "builder-columns",
+    components: { "render-blocks": async () => RenderBlocks },
+    props: ["space", "columns", "stackColumnsAt", "reverseColumnsWhenStacked"],
 
     computed: {
       columnsCssVars() {
         const flexDir =
-          this.stackColumnsAt === 'never'
-            ? 'inherit'
+          this.stackColumnsAt === "never"
+            ? "inherit"
             : this.reverseColumnsWhenStacked
-            ? 'column-reverse'
-            : 'column';
+            ? "column-reverse"
+            : "column";
         return {
-          '--flex-dir': flexDir,
-          '--flex-dir-tablet': this.maybeApplyForTablet(flexDir),
+          "--flex-dir": flexDir,
+          "--flex-dir-tablet": this.maybeApplyForTablet(flexDir),
         };
       },
       columnCssVars() {
-        const width = '100%';
-        const marginLeft = '0';
+        const width = "100%";
+        const marginLeft = "0";
         return {
-          '--column-width': width,
-          '--column-margin-left': marginLeft,
-          '--column-width-tablet': this.maybeApplyForTablet(width),
-          '--column-margin-left-tablet': this.maybeApplyForTablet(marginLeft),
+          "--column-width": width,
+          "--column-margin-left": marginLeft,
+          "--column-width-tablet": this.maybeApplyForTablet(width),
+          "--column-margin-left-tablet": this.maybeApplyForTablet(marginLeft),
         };
       },
     },
 
     methods: {
       getGutterSize() {
-        return typeof this.space === 'number' ? this.space || 0 : 20;
+        return typeof this.space === "number" ? this.space || 0 : 20;
       },
       getColumns() {
         return this.columns || [];
@@ -69,139 +69,139 @@ export default registerComponent(
         return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
       },
       maybeApplyForTablet(prop) {
-        const stackColumnsAt = this.stackColumnsAt || 'tablet';
-        return stackColumnsAt === 'tablet' ? prop : 'inherit';
+        const stackColumnsAt = this.stackColumnsAt || "tablet";
+        return stackColumnsAt === "tablet" ? prop : "inherit";
       },
     },
   },
   {
-    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>" },
                 },
               },
             ],
@@ -209,52 +209,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>" },
                 },
               },
             ],
@@ -264,27 +264,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,
       },
     ],
@@ -292,32 +292,32 @@ export default registerComponent(
 );
 </script>
 <style scoped>
-.div-23e8fqt91nf {
+.div-21azgz5avex {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
 @media (max-width: 999px) {
-  .div-23e8fqt91nf {
+  .div-21azgz5avex {
     flex-direction: var(--flex-dir-tablet);
   }
 }
 @media (max-width: 639px) {
-  .div-23e8fqt91nf {
+  .div-21azgz5avex {
     flex-direction: var(--flex-dir);
   }
 }
-.div-23e8fqt91nf-2 {
+.div-21azgz5avex-2 {
   flex-grow: 1;
 }
 @media (max-width: 999px) {
-  .div-23e8fqt91nf-2 {
+  .div-21azgz5avex-2 {
     width: var(--column-width-tablet) !important;
     margin-left: var(--column-margin-left-tablet) !important;
   }
 }
 @media (max-width: 639px) {
-  .div-23e8fqt91nf-2 {
+  .div-21azgz5avex-2 {
     width: var(--column-width) !important;
     margin-left: var(--column-margin-left) !important;
   }