@builder.io/sdk-svelte 0.0.1-0 → 0.0.1-11

package/src/blocks/form/component-info.js

@@ -0,0 +1,262 @@
+const componentInfo = {
+  name: "Form:Form",
+  builtIn: true,
+  defaults: {
+    responsiveStyles: {
+      large: {
+        marginTop: "15px",
+        paddingBottom: "15px"
+      }
+    }
+  },
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5",
+  inputs: [
+    {
+      name: "sendSubmissionsTo",
+      type: "string",
+      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,
+      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"
+    },
+    {
+      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,
+      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",
+      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"
+        }
+      }
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/{form.svelte → form/form.svelte}

@@ -3,10 +3,12 @@
     
     
     
-  import  RenderBlock,  {  }  from '../components/render-block.lite';
+  import  RenderBlock,  {  }  from '../../components/render-block/render-block.svelte';
+import  {  isEditing  }  from '../../functions/is-editing.js';
 
   
 
+    
 
     
     export let formRef;
@@ -28,7 +30,7 @@ export let builderBlock;
 export let errorMessage;
 export let sendingMessage;
 export let successMessage;
-
+    
     function onSubmit(event) {
 const sendWithJs = sendWithJs || sendSubmissionsTo === 'email';
 
@@ -134,7 +136,7 @@ if (sendSubmissionsTo === 'zapier') {
     }
   }
 
-  state = 'sending';
+  formState = 'sending';
   const formUrl = `${builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io'}/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(sendSubmissionsToEmail || '')}&name=${encodeURIComponent(name || '')}`;
   fetch(sendSubmissionsTo === 'email' ? formUrl : action
   /* TODO: throw error if no action URL */
@@ -168,7 +170,7 @@ if (sendSubmissionsTo === 'zapier') {
     }
 
     responseData = body;
-    state = res.ok ? 'success' : 'error';
+    formState = res.ok ? 'success' : 'error';
 
     if (res.ok) {
       const submitSuccessEvent = new CustomEvent('submit:success', {
@@ -227,15 +229,17 @@ if (sendSubmissionsTo === 'zapier') {
     }
 
     responseData = err;
-    state = 'error';
+    formState = 'error';
   });
 }
 }
     $: submissionState = () => {
-return Builder.isEditing && previewState || state;
+return isEditing() && previewState || formState;
 };
 
-    let state = 'unsubmitted';
+    
+    
+    let formState = 'unsubmitted';
 let responseData = null;
 let formErrorMessage = '';
 
@@ -248,31 +252,52 @@ let formErrorMessage = '';
 
   <form {...attributes} validate={validate}  bind:this={formRef}  action={!sendWithJs && action}  method={method}  name={name}  on:submit="{event => onSubmit(event)}" >
     
+
 {#if builderBlock && builderBlock.children }
+
       
-{#each builderBlock?.children as block }<RenderBlock  block={block} ></RenderBlock>{/each}
 
-    {/if}
+{#each builderBlock?.children as block, index }
+<RenderBlock  block={block} ></RenderBlock>
+{/each}
+
+
+    
+
+
+{/if}
 
 
     
+
 {#if submissionState() === 'error' }
+
       
-<BuilderBlocks  dataPath="errorMessage"  blocks={errorMessage} ></BuilderBlocks>
+<svelte:component  dataPath="errorMessage"  blocks={errorMessage}  this={BuilderBlocks} ></svelte:component>
+
+    
 
-    {/if}
+
+{/if}
 
 
     
+
 {#if submissionState() === 'sending' }
+
       
-<BuilderBlocks  dataPath="sendingMessage"  blocks={sendingMessage} ></BuilderBlocks>
+<svelte:component  dataPath="sendingMessage"  blocks={sendingMessage}  this={BuilderBlocks} ></svelte:component>
+
+    
+
 
-    {/if}
+{/if}
 
 
     
+
 {#if submissionState() === 'error' && responseData }
+
       
 <pre  class="builder-form-error-text pre" >
         
@@ -280,15 +305,23 @@ let formErrorMessage = '';
 
       </pre>
 
-    {/if}
+    
+
+
+{/if}
 
 
     
+
 {#if submissionState() === 'success' }
+
       
-<BuilderBlocks  dataPath="successMessage"  blocks={successMessage} ></BuilderBlocks>
+<svelte:component  dataPath="successMessage"  blocks={successMessage}  this={BuilderBlocks} ></svelte:component>
+
+    
+
 
-    {/if}
+{/if}
 
   </form>
 

package/src/blocks/fragment/component-info.js

@@ -0,0 +1,11 @@
+const componentInfo = {
+  name: "Fragment",
+  static: true,
+  hidden: true,
+  builtIn: true,
+  canHaveChildren: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

package/src/blocks/{fragment.svelte → fragment/fragment.svelte}

@@ -6,14 +6,17 @@
 
 
 
-
   
-  export let children;
 
   
   
+  
+  
+  
 
   
+  
+  
 
   
 

package/src/blocks/image/component-info.js

@@ -0,0 +1,104 @@
+const componentInfo = {
+  name: "Image",
+  static: true,
+  builtIn: 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%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+      onChange: "        const DEFAULT_ASPECT_RATIO = 0.7041;        options.delete('srcset');        options.delete('noWebp');        function loadImage(url, timeout) {          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) {          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
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/{image.svelte → image/image.svelte}

@@ -6,23 +6,26 @@
   
   
 
+    
 
     
     export let altText;
 export let backgroundSize;
-export let class;
+export let className;
 export let image;
 export let srcset;
 export let sizes;
 export let aspectRatio;
 export let fitContent;
 export let builderBlock;
-export let children;
 
     
     
+    
 
     
+    
+    
 
     
 
@@ -31,14 +34,14 @@ export let children;
     
   </script>
 
-  <div  class="div" >
+  <div   >
     
 <picture >
       
-<img  loading="lazy"  class="img"  alt={altText}  aria-role={altText ? 'presentation' : undefined}  style={{
+<img  loading="lazy"    alt={altText}  role={altText ? 'presentation' : undefined}  style={{
 objectPosition: backgroundSize || 'center',
 objectFit: backgroundSize || 'cover'
-}}  class={'builder-image' + (class ? ' ' + class : '')}  src={image}  srcset={srcset}  sizes={sizes}  />
+}}  class={'builder-image' + (className ? ' ' + className : '')}  src={image}  srcSet={srcset}  sizes={sizes}  />
 
       
 <source  srcSet={srcset}  />
@@ -46,24 +49,36 @@ objectFit: backgroundSize || 'cover'
     </picture>
 
     
-{#if aspectRatio && !(fitContent && builderBlock?.children?.length) }<div  class="builder-image-sizer div-2"  style={{
+
+{#if aspectRatio && !(fitContent && builderBlock?.children?.length) }
+<div  class="builder-image-sizer div-2"  style={{
 paddingTop: aspectRatio * 100 + '%'
 }} >
           
 {' '}
 
-        </div>{/if}
+        </div>
+
+
+{/if}
 
     
+
 {#if builderBlock?.children?.length && fitContent }
+
       
 <slot></slot>
 
-    {/if}
+    
+
+
+{/if}
 
 
     
+
 {#if !fitContent }
+
       
 <div  class="div-3" >
         
@@ -71,7 +86,10 @@ paddingTop: aspectRatio * 100 + '%'
 
       </div>
 
-    {/if}
+    
+
+
+{/if}
 
   </div>
 

package/src/blocks/img/component-info.js

@@ -0,0 +1,20 @@
+const componentInfo = {
+  name: "Raw:Img",
+  hideFromInsertMenu: true,
+  builtIn: 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"],
+      required: true
+    }
+  ],
+  noWrap: true,
+  static: true
+};
+export {
+  componentInfo
+};

package/src/blocks/{img.svelte → img/img.svelte}

@@ -3,10 +3,11 @@
     
     
     
-  import  {  isEditing  }  from '../functions/is-editing';
+  import  {  isEditing  }  from '../../functions/is-editing.js';
 
   
 
+    
 
     
     export let backgroundSize;
@@ -14,11 +15,13 @@ export let backgroundPosition;
 export let attributes;
 export let imgSrc;
 export let altText;
-
+    
     
     
 
     
+    
+