@builder.io/sdk-svelte 0.0.1-9 → 0.0.2

package/package/blocks/image/image.lite.tsx

@@ -0,0 +1,148 @@
+<script context="module" lang="ts">
+  import type { BuilderBlock } from "../../types/builder-block.js";
+
+  export interface ImageProps {
+    className?: string;
+    image: string;
+    sizes?: string;
+    lazy?: boolean;
+    height?: number;
+    width?: number;
+    altText?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    srcset?: string;
+    aspectRatio?: number;
+    children?: JSX.Element;
+    fitContent?: boolean;
+    builderBlock?: BuilderBlock;
+    noWebp?: boolean;
+    src?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { getSrcSet } from "./image.helpers.js";
+
+  export let image: ImageProps["image"];
+  export let src: ImageProps["src"];
+  export let srcset: ImageProps["srcset"];
+  export let noWebp: ImageProps["noWebp"];
+  export let altText: ImageProps["altText"];
+  export let backgroundSize: ImageProps["backgroundSize"];
+  export let className: ImageProps["className"];
+  export let sizes: ImageProps["sizes"];
+  export let aspectRatio: ImageProps["aspectRatio"];
+  export let fitContent: ImageProps["fitContent"];
+  export let builderBlock: ImageProps["builderBlock"];
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
+
+  $: srcSetToUse = () => {
+    const imageToUse = image || 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 srcset;
+    }
+
+    if (srcset && image?.includes("builder.io/api/v1/image")) {
+      if (!srcset.includes(image.split("?")[0])) {
+        console.debug("Removed given srcset");
+        return getSrcSet(url);
+      }
+    } else if (image && !srcset) {
+      return getSrcSet(url);
+    }
+
+    return getSrcSet(url);
+  };
+
+  $: webpSrcSet = () => {
+    if (srcSetToUse?.()?.match(/builder\.io/) && !noWebp) {
+      return srcSetToUse().replace(/\?/g, "?format=webp&");
+    } else {
+      return "";
+    }
+  };
+</script>
+
+<div class="div">
+  <picture>
+    {#if webpSrcSet()}
+      <source type="image/webp" srcset={webpSrcSet()} />
+    {/if}
+    <img
+      use:mitosis_styling={{
+        objectPosition: backgroundSize || "center",
+        objectFit: backgroundSize || "cover",
+      }}
+      loading="lazy"
+      alt={altText}
+      role={altText ? "presentation" : undefined}
+      class={"builder-image" + (className ? " " + className : "") + " img"}
+      src={image}
+      srcset={srcSetToUse()}
+      {sizes}
+    />
+    <source srcset={srcSetToUse()} />
+  </picture>
+
+  {#if aspectRatio && !(fitContent && builderBlock?.children?.length)}
+    <div
+      use:mitosis_styling={{
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        paddingTop: aspectRatio * 100 + "%",
+      }}
+      class="builder-image-sizer div-2"
+    />
+  {/if}
+
+  {#if builderBlock?.children?.length && fitContent}
+    <slot />
+  {/if}
+
+  {#if !fitContent}
+    <div class="div-3">
+      <slot />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .div {
+    position: relative;
+  }
+  .img {
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0px;
+    left: 0px;
+  }
+  .div-2 {
+    width: 100%;
+    pointer-events: none;
+    font-size: 0;
+  }
+  .div-3 {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/package/blocks/image/image.svelte

@@ -0,0 +1,119 @@
+<script context="module"></script>
+
+<script>import { getSrcSet } from "./image.helpers.js";
+export let image;
+export let src;
+export let srcset;
+export let noWebp;
+export let altText;
+export let backgroundSize;
+export let className;
+export let sizes;
+export let aspectRatio;
+export let fitContent;
+export let builderBlock;
+function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+        node.style[p] = v;
+    });
+}
+$: srcSetToUse = () => {
+    const imageToUse = image || 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 srcset;
+    }
+    if (srcset && image?.includes("builder.io/api/v1/image")) {
+        if (!srcset.includes(image.split("?")[0])) {
+            console.debug("Removed given srcset");
+            return getSrcSet(url);
+        }
+    }
+    else if (image && !srcset) {
+        return getSrcSet(url);
+    }
+    return getSrcSet(url);
+};
+$: webpSrcSet = () => {
+    if (srcSetToUse?.()?.match(/builder\.io/) && !noWebp) {
+        return srcSetToUse().replace(/\?/g, "?format=webp&");
+    }
+    else {
+        return "";
+    }
+};
+</script>
+
+<div class="div">
+  <picture>
+    {#if webpSrcSet()}
+      <source type="image/webp" srcset={webpSrcSet()} />
+    {/if}
+    <img
+      use:mitosis_styling={{
+        objectPosition: backgroundSize || "center",
+        objectFit: backgroundSize || "cover",
+      }}
+      loading="lazy"
+      alt={altText}
+      role={altText ? "presentation" : undefined}
+      class={"builder-image" + (className ? " " + className : "") + " img"}
+      src={image}
+      srcset={srcSetToUse()}
+      {sizes}
+    />
+    <source srcset={srcSetToUse()} />
+  </picture>
+
+  {#if aspectRatio && !(fitContent && builderBlock?.children?.length)}
+    <div
+      use:mitosis_styling={{
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        paddingTop: aspectRatio * 100 + "%",
+      }}
+      class="builder-image-sizer div-2"
+    />
+  {/if}
+
+  {#if builderBlock?.children?.length && fitContent}
+    <slot />
+  {/if}
+
+  {#if !fitContent}
+    <div class="div-3">
+      <slot />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .div {
+    position: relative;
+  }
+  .img {
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0px;
+    left: 0px;
+  }
+  .div-2 {
+    width: 100%;
+    pointer-events: none;
+    font-size: 0;
+  }
+  .div-3 {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/package/blocks/image/image.svelte.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import { SvelteComponentTyped } from "svelte";
+import type { BuilderBlock } from "../../types/builder-block.js";
+export interface ImageProps {
+    className?: string;
+    image: string;
+    sizes?: string;
+    lazy?: boolean;
+    height?: number;
+    width?: number;
+    altText?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    srcset?: string;
+    aspectRatio?: number;
+    children?: JSX.Element;
+    fitContent?: boolean;
+    builderBlock?: BuilderBlock;
+    noWebp?: boolean;
+    src?: string;
+}
+declare const __propDef: {
+    props: {
+        image: ImageProps["image"];
+        src: ImageProps["src"];
+        srcset: ImageProps["srcset"];
+        noWebp: ImageProps["noWebp"];
+        altText: ImageProps["altText"];
+        backgroundSize: ImageProps["backgroundSize"];
+        className: ImageProps["className"];
+        sizes: ImageProps["sizes"];
+        aspectRatio: ImageProps["aspectRatio"];
+        fitContent: ImageProps["fitContent"];
+        builderBlock: ImageProps["builderBlock"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ImageProps = typeof __propDef.props;
+export declare type ImageEvents = typeof __propDef.events;
+export declare type ImageSlots = typeof __propDef.slots;
+export default class Image extends SvelteComponentTyped<ImageProps, ImageEvents, ImageSlots> {
+}
+export {};

package/package/blocks/img/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components';
+export declare const componentInfo: ComponentInfo;

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

@@ -0,0 +1,18 @@
+export const componentInfo = {
+    // friendlyName?
+    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,
+};

package/package/blocks/img/img.lite.tsx

@@ -0,0 +1,48 @@
+<script context="module" lang="ts">
+  export interface ImgProps {
+    attributes?: any;
+    imgSrc?: string; // TODO(misko): I think this is unused
+
+    image?: string;
+    altText?: string;
+    backgroundSize?: "cover" | "contain";
+    backgroundPosition?:
+      | "center"
+      | "top"
+      | "left"
+      | "right"
+      | "bottom"
+      | "top left"
+      | "top right"
+      | "bottom left"
+      | "bottom right";
+  }
+</script>
+
+<script lang="ts">
+  import { isEditing } from "../../functions/is-editing.js";
+
+  export let backgroundSize: ImgProps["backgroundSize"];
+  export let backgroundPosition: ImgProps["backgroundPosition"];
+  export let imgSrc: ImgProps["imgSrc"];
+  export let altText: ImgProps["altText"];
+  export let image: ImgProps["image"];
+  export let attributes: ImgProps["attributes"];
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
+</script>
+
+<img
+  {...attributes}
+  use:mitosis_styling={{
+    objectFit: backgroundSize || "cover",
+    objectPosition: backgroundPosition || "center",
+  }}
+  key={(isEditing() && imgSrc) || "default-key"}
+  alt={altText}
+  src={imgSrc || image}
+/>

package/package/blocks/img/img.svelte

@@ -0,0 +1,26 @@
+<script context="module"></script>
+
+<script>import { isEditing } from "../../functions/is-editing.js";
+export let backgroundSize;
+export let backgroundPosition;
+export let imgSrc;
+export let altText;
+export let image;
+export let attributes;
+function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+        node.style[p] = v;
+    });
+}
+</script>
+
+<img
+  {...attributes}
+  use:mitosis_styling={{
+    objectFit: backgroundSize || "cover",
+    objectPosition: backgroundPosition || "center",
+  }}
+  key={(isEditing() && imgSrc) || "default-key"}
+  alt={altText}
+  src={imgSrc || image}
+/>

package/package/blocks/img/img.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+export interface ImgProps {
+    attributes?: any;
+    imgSrc?: string;
+    image?: string;
+    altText?: string;
+    backgroundSize?: "cover" | "contain";
+    backgroundPosition?: "center" | "top" | "left" | "right" | "bottom" | "top left" | "top right" | "bottom left" | "bottom right";
+}
+declare const __propDef: {
+    props: {
+        backgroundSize: ImgProps["backgroundSize"];
+        backgroundPosition: ImgProps["backgroundPosition"];
+        imgSrc: ImgProps["imgSrc"];
+        altText: ImgProps["altText"];
+        image: ImgProps["image"];
+        attributes: ImgProps["attributes"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ImgProps = typeof __propDef.props;
+export declare type ImgEvents = typeof __propDef.events;
+export declare type ImgSlots = typeof __propDef.slots;
+export default class Img extends SvelteComponentTyped<ImgProps, ImgEvents, ImgSlots> {
+}
+export {};

package/package/blocks/input/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components';
+export declare const componentInfo: ComponentInfo;

package/package/blocks/input/component-info.js

@@ -0,0 +1,72 @@
+export const componentInfo = {
+    name: 'Form:Input',
+    builtIn: true,
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca',
+    inputs: [
+        {
+            name: 'type',
+            type: 'text',
+            enum: [
+                'text',
+                'number',
+                'email',
+                'url',
+                'checkbox',
+                'radio',
+                'range',
+                'date',
+                'datetime-local',
+                'search',
+                'tel',
+                'time',
+                'file',
+                'month',
+                'week',
+                'password',
+                'color',
+                'hidden',
+            ],
+            defaultValue: 'text',
+        },
+        {
+            name: 'name',
+            type: 'string',
+            required: true,
+            helperText: 'Every input in a form needs a unique name describing what it takes, e.g. "email"',
+        },
+        {
+            name: 'placeholder',
+            type: 'string',
+            defaultValue: 'Hello there',
+            helperText: 'Text to display when there is no value',
+        },
+        // TODO: handle value vs default value automatically like ng-model
+        {
+            name: 'defaultValue',
+            type: 'string',
+        },
+        {
+            name: 'value',
+            type: 'string',
+            advanced: true,
+        },
+        {
+            name: 'required',
+            type: 'boolean',
+            helperText: 'Is this input required to be filled out to submit a form',
+            defaultValue: false,
+        },
+    ],
+    noWrap: true,
+    static: true,
+    defaultStyles: {
+        paddingTop: '10px',
+        paddingBottom: '10px',
+        paddingLeft: '10px',
+        paddingRight: '10px',
+        borderRadius: '3px',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: '#ccc',
+    },
+};

package/package/blocks/input/input.lite.tsx

@@ -0,0 +1,34 @@
+<script context="module" lang="ts">
+  export interface FormInputProps {
+    type?: string;
+    attributes?: any;
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    required?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import { isEditing } from "../../functions/is-editing.js";
+
+  export let attributes: FormInputProps["attributes"];
+  export let defaultValue: FormInputProps["defaultValue"];
+  export let placeholder: FormInputProps["placeholder"];
+  export let type: FormInputProps["type"];
+  export let name: FormInputProps["name"];
+  export let value: FormInputProps["value"];
+  export let required: FormInputProps["required"];
+</script>
+
+<input
+  {...attributes}
+  key={isEditing() && defaultValue ? defaultValue : "default-key"}
+  {placeholder}
+  {type}
+  {name}
+  {value}
+  {defaultValue}
+  {required}
+/>

package/package/blocks/input/input.svelte

@@ -0,0 +1,22 @@
+<script context="module"></script>
+
+<script>import { isEditing } from "../../functions/is-editing.js";
+export let attributes;
+export let defaultValue;
+export let placeholder;
+export let type;
+export let name;
+export let value;
+export let required;
+</script>
+
+<input
+  {...attributes}
+  key={isEditing() && defaultValue ? defaultValue : "default-key"}
+  {placeholder}
+  {type}
+  {name}
+  {value}
+  {defaultValue}
+  {required}
+/>

package/package/blocks/input/input.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+export interface FormInputProps {
+    type?: string;
+    attributes?: any;
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    required?: boolean;
+}
+declare const __propDef: {
+    props: {
+        attributes: FormInputProps["attributes"];
+        defaultValue: FormInputProps["defaultValue"];
+        placeholder: FormInputProps["placeholder"];
+        type: FormInputProps["type"];
+        name: FormInputProps["name"];
+        value: FormInputProps["value"];
+        required: FormInputProps["required"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InputProps = typeof __propDef.props;
+export declare type InputEvents = typeof __propDef.events;
+export declare type InputSlots = typeof __propDef.slots;
+export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
+}
+export {};

package/package/blocks/raw-text/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components';
+export declare const componentInfo: ComponentInfo;

package/package/blocks/raw-text/component-info.js

@@ -0,0 +1,13 @@
+export const componentInfo = {
+    name: 'Builder:RawText',
+    hideFromInsertMenu: true,
+    builtIn: true,
+    inputs: [
+        {
+            name: 'text',
+            bubble: true,
+            type: 'longText',
+            required: true,
+        },
+    ],
+};

package/package/blocks/raw-text/raw-text.lite.tsx

@@ -0,0 +1,15 @@
+<script context="module" lang="ts">
+  export interface RawTextProps {
+    attributes?: any;
+    text?: string; // builderBlock?: any;
+  }
+</script>
+
+<script lang="ts">
+  export let attributes: RawTextProps["attributes"];
+  export let text: RawTextProps["text"];
+</script>
+
+<span class={attributes?.class || attributes?.className}
+  >{@html text || ""}</span
+>

package/package/blocks/raw-text/raw-text.svelte

@@ -0,0 +1,9 @@
+<script context="module"></script>
+
+<script>export let attributes;
+export let text;
+</script>
+
+<span class={attributes?.class || attributes?.className}
+  >{@html text || ""}</span
+>

package/package/blocks/raw-text/raw-text.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+export interface RawTextProps {
+    attributes?: any;
+    text?: string;
+}
+declare const __propDef: {
+    props: {
+        attributes: RawTextProps["attributes"];
+        text: RawTextProps["text"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RawTextProps = typeof __propDef.props;
+export declare type RawTextEvents = typeof __propDef.events;
+export declare type RawTextSlots = typeof __propDef.slots;
+export default class RawText extends SvelteComponentTyped<RawTextProps, RawTextEvents, RawTextSlots> {
+}
+export {};

package/package/blocks/section/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components';
+export declare const componentInfo: ComponentInfo;