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

package/vue2/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/vue2/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/vue2/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
+}

package/vue2/src/blocks/fragment/fragment.vue

@@ -0,0 +1,19 @@
+<template>
+  <span><slot /></span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export interface FragmentProps {
+  maxWidth?: number;
+  attributes?: any;
+  children?: any;
+}
+
+export default defineComponent({
+  name: "builder-fragment-component",
+
+  props: [],
+});
+</script>

package/vue2/src/blocks/helpers.ts

@@ -0,0 +1,43 @@
+export function filterAttrs(attrs: {
+  [index: string]: any;
+} = {}, prefix: string, isEvent: boolean) {
+  const result: typeof attrs = {};
+  for (const attr in attrs) {
+    if (!attrs[attr]) continue;
+    if (isEvent && !attr.startsWith(prefix)) continue;
+    const eventName = isEvent ? attr.replace(prefix, '') : attr;
+    result[eventName] = attrs[attr];
+  }
+  return result;
+}
+
+/**
+ * Svelte SDK: workaround to dynamically provide event handlers to components/elements.
+ * https://svelte.dev/repl/1246699e266f41218a8eeb45b9b58b54?version=3.24.1
+ */
+export function setAttrs(node: HTMLElement, attrs: Record<string, (event: Event) => void> = {}) {
+  const attrKeys = Object.keys(attrs);
+
+  /**
+   *
+   * @param {string} attr
+   */
+  const setup = (attr: string) => node.addEventListener(attr, attrs[attr]);
+
+  /**
+   *
+   * @param {string} attr
+   */
+  const teardown = (attr: string) => node.removeEventListener(attr, attrs[attr]);
+  attrKeys.forEach(setup);
+  return {
+    update(attrs = {}) {
+      const attrKeys = Object.keys(attrs);
+      attrKeys.forEach(teardown);
+      attrKeys.forEach(setup);
+    },
+    destroy() {
+      attrKeys.forEach(teardown);
+    }
+  };
+}

package/vue2/src/blocks/image/component-info.ts

@@ -0,0 +1,124 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Image',
+  static: true,
+  image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
+  defaultStyles: {
+    position: 'relative',
+    minHeight: '20px',
+    minWidth: '20px',
+    overflow: 'hidden'
+  },
+  canHaveChildren: true,
+  inputs: [{
+    name: 'image',
+    type: 'file',
+    bubble: true,
+    allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
+    required: true,
+    defaultValue: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',
+    onChange: (options: Map<string, any>): void | Promise<void> => {
+      const DEFAULT_ASPECT_RATIO = 0.7041;
+      options.delete('srcset');
+      options.delete('noWebp');
+      function loadImage(url: string, timeout = 60000): Promise<HTMLImageElement> {
+        return new Promise((resolve, reject) => {
+          const img = document.createElement('img');
+          let loaded = false;
+          img.onload = () => {
+            loaded = true;
+            resolve(img);
+          };
+          img.addEventListener('error', event => {
+            console.warn('Image load failed', event.error);
+            reject(event.error);
+          });
+          img.src = url;
+          setTimeout(() => {
+            if (!loaded) {
+              reject(new Error('Image load timed out'));
+            }
+          }, timeout);
+        });
+      }
+      function round(num: number) {
+        return Math.round(num * 1000) / 1000;
+      }
+      const value = options.get('image');
+      const aspectRatio = options.get('aspectRatio');
+
+      // For SVG images - don't render as webp, keep them as SVG
+      fetch(value).then(res => res.blob()).then(blob => {
+        if (blob.type.includes('svg')) {
+          options.set('noWebp', true);
+        }
+      });
+      if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {
+        return loadImage(value).then(img => {
+          const possiblyUpdatedAspectRatio = options.get('aspectRatio');
+          if (options.get('image') === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
+            if (img.width && img.height) {
+              options.set('aspectRatio', round(img.height / img.width));
+              options.set('height', img.height);
+              options.set('width', img.width);
+            }
+          }
+        });
+      }
+    }
+  }, {
+    name: 'backgroundSize',
+    type: 'text',
+    defaultValue: 'cover',
+    enum: [{
+      label: 'contain',
+      value: 'contain',
+      helperText: 'The image should never get cropped'
+    }, {
+      label: 'cover',
+      value: 'cover',
+      helperText: "The image should fill it's box, cropping when needed"
+    }]
+  }, {
+    name: 'backgroundPosition',
+    type: 'text',
+    defaultValue: 'center',
+    enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
+  }, {
+    name: 'altText',
+    type: 'string',
+    helperText: 'Text to display when the user has images off'
+  }, {
+    name: 'height',
+    type: 'number',
+    hideFromUI: true
+  }, {
+    name: 'width',
+    type: 'number',
+    hideFromUI: true
+  }, {
+    name: 'sizes',
+    type: 'string',
+    hideFromUI: true
+  }, {
+    name: 'srcset',
+    type: 'string',
+    hideFromUI: true
+  }, {
+    name: 'lazy',
+    type: 'boolean',
+    defaultValue: true,
+    hideFromUI: true
+  }, {
+    name: 'fitContent',
+    type: 'boolean',
+    helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
+    defaultValue: true
+  }, {
+    name: 'aspectRatio',
+    type: 'number',
+    helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+    advanced: true,
+    defaultValue: 0.7041
+  }]
+}

package/vue2/src/blocks/image/image.helpers.ts

@@ -0,0 +1,47 @@
+// Taken from (and modified) the shopify theme script repo
+// https://github.com/Shopify/theme-scripts/blob/bcfb471f2a57d439e2f964a1bb65b67708cc90c3/packages/theme-images/images.js#L59
+function removeProtocol(path: string) {
+  return path.replace(/http(s)?:/, '');
+}
+function updateQueryParam(uri = '', key: string, value: string | number | boolean): string {
+  const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
+  const separator = uri.indexOf('?') !== -1 ? '&' : '?';
+  if (uri.match(re)) {
+    return uri.replace(re, '$1' + key + '=' + encodeURIComponent(value) + '$2');
+  }
+  return uri + separator + key + '=' + encodeURIComponent(value);
+}
+function getShopifyImageUrl(src: string, size: string): string | null {
+  if (!src || !src?.match(/cdn\.shopify\.com/) || !size) {
+    return src;
+  }
+  if (size === 'master') {
+    return removeProtocol(src);
+  }
+  const match = src.match(/(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i);
+  if (match) {
+    const prefix = src.split(match[0]);
+    const suffix = match[3];
+    const useSize = size.match('x') ? size : `${size}x`;
+    return removeProtocol(`${prefix[0]}_${useSize}${suffix}`);
+  }
+  return null;
+}
+export function getSrcSet(url: string): string {
+  if (!url) {
+    return url;
+  }
+  const sizes = [100, 200, 400, 800, 1200, 1600, 2000];
+  if (url.match(/builder\.io/)) {
+    let srcUrl = url;
+    const widthInSrc = Number(url.split('?width=')[1]);
+    if (!isNaN(widthInSrc)) {
+      srcUrl = `${srcUrl} ${widthInSrc}w`;
+    }
+    return sizes.filter(size => size !== widthInSrc).map(size => `${updateQueryParam(url, 'width', size)} ${size}w`).concat([srcUrl]).join(', ');
+  }
+  if (url.match(/cdn\.shopify\.com/)) {
+    return sizes.map(size => [getShopifyImageUrl(url, `${size}x${size}`), size]).filter(([sizeUrl]) => !!sizeUrl).map(([sizeUrl, size]) => `${sizeUrl} ${size}w`).concat([url]).join(', ');
+  }
+  return url;
+}

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

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <picture>
+      <template v-if="webpSrcSet">
+        <source type="image/webp" :srcset="webpSrcSet" />
+      </template>
+
+      <img
+        loading="lazy"
+        :alt="altText"
+        :role="altText ? 'presentation' : undefined"
+        :style="{
+          objectPosition: backgroundPosition || 'center',
+          objectFit: backgroundSize || 'cover',
+          ...aspectRatioCss,
+        }"
+        :class="
+          _classStringToObject(
+            'builder-image' +
+              (className ? ' ' + className : '') +
+              ' img-1pl23ac79ld'
+          )
+        "
+        :src="image"
+        :srcset="srcSetToUse"
+        :sizes="sizes"
+      />
+    </picture>
+
+    <template
+      v-if="aspectRatio && !(builderBlock?.children?.length && fitContent)"
+    >
+      <div
+        class="builder-image-sizer div-1pl23ac79ld"
+        :style="{
+          paddingTop: aspectRatio * 100 + '%',
+        }"
+      ></div>
+    </template>
+
+    <template v-if="builderBlock?.children?.length && fitContent">
+      <slot />
+    </template>
+
+    <template v-if="!fitContent && $slots.default">
+      <div class="div-1pl23ac79ld-2">
+        <slot />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import type { BuilderBlock } from "../../types/builder-block.js";
+import { getSrcSet } from "./image.helpers.js";
+
+export interface ImageProps {
+  className?: string;
+  image: string;
+  sizes?: string;
+  lazy?: boolean;
+  height?: number;
+  width?: number;
+  altText?: string;
+  backgroundSize?: "cover" | "contain";
+  backgroundPosition?: string;
+  srcset?: string;
+  aspectRatio?: number;
+  children?: JSX.Element;
+  fitContent?: boolean;
+  builderBlock?: BuilderBlock;
+  noWebp?: boolean;
+  src?: string;
+}
+
+export default defineComponent({
+  name: "builder-image",
+
+  props: [
+    "image",
+    "src",
+    "srcset",
+    "noWebp",
+    "aspectRatio",
+    "altText",
+    "backgroundPosition",
+    "backgroundSize",
+    "className",
+    "sizes",
+    "builderBlock",
+    "fitContent",
+  ],
+
+  computed: {
+    srcSetToUse() {
+      const imageToUse = this.image || this.src;
+      const url = imageToUse;
+      if (
+        !url ||
+        // We can auto add srcset for cdn.builder.io and shopify
+        // images, otherwise you can supply this prop manually
+        !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))
+      ) {
+        return this.srcset;
+      }
+      if (this.srcset && this.image?.includes("builder.io/api/v1/image")) {
+        if (!this.srcset.includes(this.image.split("?")[0])) {
+          console.debug("Removed given srcset");
+          return getSrcSet(url);
+        }
+      } else if (this.image && !this.srcset) {
+        return getSrcSet(url);
+      }
+      return getSrcSet(url);
+    },
+    webpSrcSet() {
+      if (this.srcSetToUse?.match(/builder\.io/) && !this.noWebp) {
+        return this.srcSetToUse.replace(/\?/g, "?format=webp&");
+      } else {
+        return "";
+      }
+    },
+    aspectRatioCss() {
+      const aspectRatioStyles = {
+        position: "absolute",
+        height: "100%",
+        width: "100%",
+        left: "0px",
+        top: "0px",
+      } as const;
+      const out = this.aspectRatio ? aspectRatioStyles : undefined;
+      return out;
+    },
+  },
+
+  methods: {
+    _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>
+
+<style scoped>
+.img-1pl23ac79ld {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+.div-1pl23ac79ld {
+  width: 100%;
+  pointer-events: none;
+  font-size: 0;
+}
+.div-1pl23ac79ld-2 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>

package/vue2/src/blocks/img/component-info.ts

@@ -0,0 +1,16 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  // friendlyName?
+  name: 'Raw:Img',
+  hideFromInsertMenu: true,
+  image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
+  inputs: [{
+    name: 'image',
+    bubble: true,
+    type: 'file',
+    allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'gif', 'webp'],
+    required: true
+  }],
+  noWrap: true,
+  static: true
+}