@builder.io/sdk-vue 0.5.9 → 0.6.1-0

package/vue3/src/blocks/columns/component-info.ts

@@ -0,0 +1,219 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  // TODO: ways to statically preprocess JSON for references, functions, etc
+  name: 'Columns',
+  isRSC: true,
+  inputs: [{
+    name: 'columns',
+    type: 'array',
+    broadcast: true,
+    subFields: [{
+      name: 'blocks',
+      type: 'array',
+      hideFromUI: true,
+      defaultValue: [{
+        '@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'
+          }
+        },
+        component: {
+          name: 'Image',
+          options: {
+            image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        '@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'
+          }
+        },
+        component: {
+          name: 'Text',
+          options: {
+            text: '<p>Enter some text...</p>'
+          }
+        }
+      }]
+    }, {
+      name: 'width',
+      type: 'number',
+      hideFromUI: true,
+      helperText: 'Width %, e.g. set to 50 to fill half of the space'
+    }, {
+      name: 'link',
+      type: 'url',
+      helperText: 'Optionally set a url that clicking this column will link to'
+    }],
+    defaultValue: [{
+      blocks: [{
+        '@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'
+          }
+        },
+        component: {
+          name: 'Image',
+          options: {
+            image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        '@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'
+          }
+        },
+        component: {
+          name: 'Text',
+          options: {
+            text: '<p>Enter some text...</p>'
+          }
+        }
+      }]
+    }, {
+      blocks: [{
+        '@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'
+          }
+        },
+        component: {
+          name: 'Image',
+          options: {
+            image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        '@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'
+          }
+        },
+        component: {
+          name: 'Text',
+          options: {
+            text: '<p>Enter some text...</p>'
+          }
+        }
+      }]
+    }],
+    onChange: (options: Map<string, any>) => {
+      function clearWidths() {
+        columns.forEach(col => {
+          col.delete('width');
+        });
+      }
+      const columns: Array<Map<string, any>> = options.get('columns');
+      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',
+    defaultValue: 20,
+    helperText: 'Size of gap between columns',
+    advanced: true
+  }, {
+    name: 'stackColumnsAt',
+    type: 'string',
+    defaultValue: 'tablet',
+    helperText: 'Convert horizontal columns to vertical at what device size',
+    enum: ['tablet', 'mobile', 'never'],
+    advanced: true
+  }, {
+    name: 'reverseColumnsWhenStacked',
+    type: 'boolean',
+    defaultValue: false,
+    helperText: 'When stacking columns for mobile devices, reverse the ordering',
+    advanced: true
+  }]
+}

package/vue3/src/blocks/custom-code/component-info.ts

@@ -0,0 +1,24 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Custom Code',
+  static: true,
+  requiredPermissions: ['editCode'],
+  inputs: [{
+    name: 'code',
+    type: 'html',
+    required: true,
+    defaultValue: '<p>Hello there, I am custom HTML code!</p>',
+    code: true
+  }, {
+    name: 'replaceNodes',
+    type: 'boolean',
+    helperText: 'Preserve server rendered dom nodes',
+    advanced: true
+  }, {
+    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',
+    advanced: true
+  }]
+}

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

@@ -0,0 +1,88 @@
+<template>
+  <div
+    ref="elem"
+    :class="
+      _classStringToObject(
+        'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')
+      )
+    "
+    v-html="code"
+  ></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export interface CustomCodeProps {
+  code: string;
+  replaceNodes?: boolean;
+}
+
+export default defineComponent({
+  name: "builder-custom-code",
+
+  props: ["replaceNodes", "code"],
+
+  data() {
+    return { scriptsInserted: [], scriptsRun: [] };
+  },
+
+  mounted() {
+    this.findAndRunScripts();
+  },
+
+  methods: {
+    findAndRunScripts() {
+      // TODO: Move this function to standalone one in '@builder.io/utils'
+      if (
+        this.$refs.elem &&
+        this.$refs.elem.getElementsByTagName &&
+        typeof window !== "undefined"
+      ) {
+        const scripts = this.$refs.elem.getElementsByTagName("script");
+        for (let i = 0; i < scripts.length; i++) {
+          const script = scripts[i];
+          if (script.src) {
+            if (this.scriptsInserted.includes(script.src)) {
+              continue;
+            }
+            this.scriptsInserted.push(script.src);
+            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",
+            ].includes(script.type)
+          ) {
+            if (this.scriptsRun.includes(script.innerText)) {
+              continue;
+            }
+            try {
+              this.scriptsRun.push(script.innerText);
+              new Function(script.innerText)();
+            } catch (error) {
+              console.warn("`CustomCode`: Error running script:", error);
+            }
+          }
+        }
+      }
+    },
+    _classStringToObject(str: string) {
+      const obj: Record<string, boolean> = {};
+      if (typeof str !== "string") {
+        return obj;
+      }
+      const classNames = str.trim().split(/\s+/);
+      for (const name of classNames) {
+        obj[name] = true;
+      }
+      return obj;
+    },
+  },
+});
+</script>

package/vue3/src/blocks/embed/component-info.ts

@@ -0,0 +1,38 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Embed',
+  static: true,
+  inputs: [{
+    name: 'url',
+    type: 'url',
+    required: true,
+    defaultValue: '',
+    helperText: 'e.g. enter a youtube url, google map, etc',
+    onChange: (options: Map<string, any>): void | Promise<void> => {
+      const url = options.get('url');
+      if (url) {
+        options.set('content', 'Loading...');
+        // TODO: get this out of here!
+        const apiKey = 'ae0e60e78201a3f2b0de4b';
+        return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
+          if (options.get('url') === url) {
+            if (data.html) {
+              options.set('content', data.html);
+            } else {
+              options.set('content', 'Invalid url, please try another');
+            }
+          }
+        }).catch(_err => {
+          options.set('content', 'There was an error embedding this URL, please try again or another URL');
+        });
+      } else {
+        options.delete('content');
+      }
+    }
+  }, {
+    name: 'content',
+    type: 'html',
+    defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+    hideFromUI: true
+  }]
+}

package/vue3/src/blocks/embed/embed.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="builder-embed" ref="elem" v-html="content"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { isJsScript } from "./helpers.js";
+
+export interface EmbedProps {
+  content: string;
+}
+
+export default defineComponent({
+  name: "builder-embed",
+
+  props: ["content"],
+
+  data() {
+    return { scriptsInserted: [], scriptsRun: [], ranInitFn: false };
+  },
+
+  watch: {
+    onUpdateHook0: {
+      handler() {
+        if (this.$refs.elem && !this.ranInitFn) {
+          this.ranInitFn = true;
+          this.findAndRunScripts();
+        }
+      },
+      immediate: true,
+    },
+  },
+
+  computed: {
+    onUpdateHook0() {
+      return {
+        0: this.$refs.elem,
+        1: this.ranInitFn,
+      };
+    },
+  },
+
+  methods: {
+    findAndRunScripts() {
+      if (!this.$refs.elem || !this.$refs.elem.getElementsByTagName) return;
+      const scripts = this.$refs.elem.getElementsByTagName("script");
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+        if (script.src && !this.scriptsInserted.includes(script.src)) {
+          this.scriptsInserted.push(script.src);
+          const newScript = document.createElement("script");
+          newScript.async = true;
+          newScript.src = script.src;
+          document.head.appendChild(newScript);
+        } else if (
+          isJsScript(script) &&
+          !this.scriptsRun.includes(script.innerText)
+        ) {
+          try {
+            this.scriptsRun.push(script.innerText);
+            new Function(script.innerText)();
+          } catch (error) {
+            console.warn("`Embed`: Error running script:", error);
+          }
+        }
+      }
+    },
+  },
+});
+</script>

package/vue3/src/blocks/embed/helpers.ts

@@ -0,0 +1,2 @@
+const SCRIPT_MIME_TYPES = ['text/javascript', 'application/javascript', 'application/ecmascript'];
+export const isJsScript = (script: HTMLScriptElement) => SCRIPT_MIME_TYPES.includes(script.type)

package/vue3/src/blocks/form/component-info.ts

@@ -0,0 +1,233 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Form:Form',
+  // editableTags: ['builder-form-error']
+  defaults: {
+    responsiveStyles: {
+      large: {
+        marginTop: '15px',
+        paddingBottom: '15px'
+      }
+    }
+  },
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',
+  inputs: [{
+    name: 'sendSubmissionsTo',
+    type: 'string',
+    // TODO: save to builder data and user can download as csv
+    // TODO: easy for mode too or computed add/remove fields form mode
+    // so you can edit details and high level mode at same time...
+    // Later - more integrations like mailchimp
+    // /api/v1/form-submit?to=mailchimp
+    enum: [{
+      label: 'Send to email',
+      value: 'email',
+      helperText: 'Send form submissions to the email address of your choosing'
+    }, {
+      label: 'Custom',
+      value: 'custom',
+      helperText: 'Handle where the form requests go manually with a little code, e.g. to your own custom backend'
+    }],
+    defaultValue: 'email'
+  }, {
+    name: 'sendSubmissionsToEmail',
+    type: 'string',
+    required: true,
+    // TODO: required: () => options.get("sendSubmissionsTo") === "email"
+    defaultValue: 'your@email.com',
+    showIf: 'options.get("sendSubmissionsTo") === "email"'
+  }, {
+    name: 'sendWithJs',
+    type: 'boolean',
+    helperText: 'Set to false to use basic html form action',
+    defaultValue: true,
+    showIf: 'options.get("sendSubmissionsTo") === "custom"'
+  }, {
+    name: 'name',
+    type: 'string',
+    defaultValue: 'My form'
+    // advanced: true
+  }, {
+    name: 'action',
+    type: 'string',
+    helperText: 'URL to send the form data to',
+    showIf: 'options.get("sendSubmissionsTo") === "custom"'
+  }, {
+    name: 'contentType',
+    type: 'string',
+    defaultValue: 'application/json',
+    advanced: true,
+    // TODO: do automatically if file input
+    enum: ['application/json', 'multipart/form-data', 'application/x-www-form-urlencoded'],
+    showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
+  }, {
+    name: 'method',
+    type: 'string',
+    showIf: 'options.get("sendSubmissionsTo") === "custom"',
+    defaultValue: 'POST',
+    advanced: true
+  }, {
+    name: 'previewState',
+    type: 'string',
+    // TODO: persist: false flag
+    enum: ['unsubmitted', 'sending', 'success', 'error'],
+    defaultValue: 'unsubmitted',
+    helperText: 'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
+    showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
+  }, {
+    name: 'successUrl',
+    type: 'url',
+    helperText: 'Optional URL to redirect the user to on form submission success',
+    showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
+  }, {
+    name: 'resetFormOnSubmit',
+    type: 'boolean',
+    showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
+    advanced: true
+  }, {
+    name: 'successMessage',
+    type: 'uiBlocks',
+    hideFromUI: true,
+    defaultValue: [{
+      '@type': '@builder.io/sdk:Element',
+      responsiveStyles: {
+        large: {
+          marginTop: '10px'
+        }
+      },
+      component: {
+        name: 'Text',
+        options: {
+          text: '<span>Thanks!</span>'
+        }
+      }
+    }]
+  }, {
+    name: 'validate',
+    type: 'boolean',
+    defaultValue: true,
+    advanced: true
+  }, {
+    name: 'errorMessagePath',
+    type: 'text',
+    advanced: true,
+    helperText: 'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'
+  }, {
+    name: 'errorMessage',
+    type: 'uiBlocks',
+    hideFromUI: true,
+    defaultValue: [{
+      '@type': '@builder.io/sdk:Element',
+      responsiveStyles: {
+        large: {
+          marginTop: '10px'
+        }
+      },
+      bindings: {
+        'component.options.text': 'state.formErrorMessage || block.component.options.text'
+      },
+      component: {
+        name: 'Text',
+        options: {
+          text: '<span>Form submission error :( Please check your answers and try again</span>'
+        }
+      }
+    }]
+  }, {
+    name: 'sendingMessage',
+    type: 'uiBlocks',
+    hideFromUI: true,
+    defaultValue: [{
+      '@type': '@builder.io/sdk:Element',
+      responsiveStyles: {
+        large: {
+          marginTop: '10px'
+        }
+      },
+      component: {
+        name: 'Text',
+        options: {
+          text: '<span>Sending...</span>'
+        }
+      }
+    }]
+  }, {
+    name: 'customHeaders',
+    type: 'map',
+    valueType: {
+      type: 'string'
+    },
+    advanced: true,
+    showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
+  }],
+  noWrap: true,
+  canHaveChildren: true,
+  defaultChildren: [{
+    '@type': '@builder.io/sdk:Element',
+    responsiveStyles: {
+      large: {
+        marginTop: '10px'
+      }
+    },
+    component: {
+      name: 'Text',
+      options: {
+        text: '<span>Enter your name</span>'
+      }
+    }
+  }, {
+    '@type': '@builder.io/sdk:Element',
+    responsiveStyles: {
+      large: {
+        marginTop: '10px'
+      }
+    },
+    component: {
+      name: 'Form:Input',
+      options: {
+        name: 'name',
+        placeholder: 'Jane Doe'
+      }
+    }
+  }, {
+    '@type': '@builder.io/sdk:Element',
+    responsiveStyles: {
+      large: {
+        marginTop: '10px'
+      }
+    },
+    component: {
+      name: 'Text',
+      options: {
+        text: '<span>Enter your email</span>'
+      }
+    }
+  }, {
+    '@type': '@builder.io/sdk:Element',
+    responsiveStyles: {
+      large: {
+        marginTop: '10px'
+      }
+    },
+    component: {
+      name: 'Form:Input',
+      options: {
+        name: 'email',
+        placeholder: 'jane@doe.com'
+      }
+    }
+  }, {
+    '@type': '@builder.io/sdk:Element',
+    responsiveStyles: {
+      large: {
+        marginTop: '10px'
+      }
+    },
+    component: {
+      name: 'Form:SubmitButton',
+      options: {
+        text: 'Submit'
+      }
+    }
+  }]
+}

package/vue3/src/blocks/form/form.vue

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "builder-form-component",
+});
+</script>

package/vue3/src/blocks/fragment/component-info.ts

@@ -0,0 +1,8 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Fragment',
+  static: true,
+  hidden: true,
+  canHaveChildren: true,
+  noWrap: true
+}