@builder.io/sdk-vue 0.6.1-1 → 0.6.1

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

@@ -1,233 +0,0 @@
-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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,19 +0,0 @@
-<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

@@ -1,43 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,47 +0,0 @@
-// 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

@@ -1,174 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-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
-}