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

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

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

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

@@ -0,0 +1,44 @@
+export const componentInfo = {
+    name: 'Form:TextArea',
+    builtIn: true,
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
+    inputs: [
+        {
+            advanced: true,
+            name: 'value',
+            type: 'string',
+        },
+        {
+            name: 'name',
+            type: 'string',
+            required: true,
+            helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"',
+        },
+        {
+            name: 'defaultValue',
+            type: 'string',
+        },
+        {
+            name: 'placeholder',
+            type: 'string',
+            defaultValue: 'Hello there',
+        },
+        {
+            name: 'required',
+            type: 'boolean',
+            defaultValue: false,
+        },
+    ],
+    defaultStyles: {
+        paddingTop: '10px',
+        paddingBottom: '10px',
+        paddingLeft: '10px',
+        paddingRight: '10px',
+        borderRadius: '3px',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: '#ccc',
+    },
+    static: true,
+    noWrap: true,
+};

package/package/blocks/textarea/textarea.lite.tsx

@@ -0,0 +1,19 @@
+<script context="module" lang="ts">
+  export interface TextareaProps {
+    attributes?: any;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+  }
+</script>
+
+<script lang="ts">
+  export let attributes: TextareaProps["attributes"];
+  export let placeholder: TextareaProps["placeholder"];
+  export let name: TextareaProps["name"];
+  export let value: TextareaProps["value"];
+  export let defaultValue: TextareaProps["defaultValue"];
+</script>
+
+<textarea {...attributes} {placeholder} {name} {value} {defaultValue} />

package/package/blocks/textarea/textarea.svelte

@@ -0,0 +1,10 @@
+<script context="module"></script>
+
+<script>export let attributes;
+export let placeholder;
+export let name;
+export let value;
+export let defaultValue;
+</script>
+
+<textarea {...attributes} {placeholder} {name} {value} {defaultValue} />

package/package/blocks/textarea/textarea.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+export interface TextareaProps {
+    attributes?: any;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+}
+declare const __propDef: {
+    props: {
+        attributes: TextareaProps["attributes"];
+        placeholder: TextareaProps["placeholder"];
+        name: TextareaProps["name"];
+        value: TextareaProps["value"];
+        defaultValue: TextareaProps["defaultValue"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TextareaProps = typeof __propDef.props;
+export declare type TextareaEvents = typeof __propDef.events;
+export declare type TextareaSlots = typeof __propDef.slots;
+export default class Textarea extends SvelteComponentTyped<TextareaProps, TextareaEvents, TextareaSlots> {
+}
+export {};

package/package/blocks/util.d.ts

@@ -0,0 +1 @@
+export declare function markSerializable<FN extends (...args: any[]) => any>(fn: FN): FN;

package/package/blocks/util.js

@@ -0,0 +1,4 @@
+export function markSerializable(fn) {
+    fn.__qwik_serializable__ = true;
+    return fn;
+}

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

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

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

@@ -0,0 +1,103 @@
+export const componentInfo = {
+    name: 'Video',
+    canHaveChildren: true,
+    builtIn: true,
+    defaultStyles: {
+        minHeight: '20px',
+        minWidth: '20px',
+    },
+    image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb',
+    inputs: [
+        {
+            name: 'video',
+            type: 'file',
+            allowedFileTypes: ['mp4'],
+            bubble: true,
+            defaultValue: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',
+            required: true,
+        },
+        {
+            name: 'posterImage',
+            type: 'file',
+            allowedFileTypes: ['jpeg', 'png'],
+            helperText: 'Image to show before the video plays',
+        },
+        {
+            name: 'autoPlay',
+            type: 'boolean',
+            defaultValue: true,
+        },
+        {
+            name: 'controls',
+            type: 'boolean',
+            defaultValue: false,
+        },
+        {
+            name: 'muted',
+            type: 'boolean',
+            defaultValue: true,
+        },
+        {
+            name: 'loop',
+            type: 'boolean',
+            defaultValue: true,
+        },
+        {
+            name: 'playsInline',
+            type: 'boolean',
+            defaultValue: true,
+        },
+        {
+            name: 'fit',
+            type: 'text',
+            defaultValue: 'cover',
+            enum: ['contain', 'cover', 'fill', 'auto'],
+        },
+        {
+            name: 'fitContent',
+            type: 'boolean',
+            helperText: 'When child blocks are provided, fit to them instead of using the aspect ratio',
+            defaultValue: true,
+            advanced: true,
+        },
+        {
+            name: 'position',
+            type: 'text',
+            defaultValue: 'center',
+            enum: [
+                'center',
+                'top',
+                'left',
+                'right',
+                'bottom',
+                'top left',
+                'top right',
+                'bottom left',
+                'bottom right',
+            ],
+        },
+        {
+            name: 'height',
+            type: 'number',
+            advanced: true,
+        },
+        {
+            name: 'width',
+            type: 'number',
+            advanced: true,
+        },
+        {
+            name: 'aspectRatio',
+            type: 'number',
+            advanced: true,
+            defaultValue: 0.7004048582995948,
+        },
+        {
+            name: 'lazyLoad',
+            type: 'boolean',
+            helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+            defaultValue: true,
+            advanced: true,
+        },
+    ],
+};

package/package/blocks/video/video.lite.tsx

@@ -0,0 +1,92 @@
+<script context="module" lang="ts">
+  export interface VideoProps {
+    attributes?: any;
+    video?: string;
+    autoPlay?: boolean;
+    controls?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsInline?: boolean;
+    aspectRatio?: number;
+    width?: number;
+    height?: number;
+    fit?: "contain" | "cover" | "fill";
+    position?:
+      | "center"
+      | "top"
+      | "left"
+      | "right"
+      | "bottom"
+      | "top left"
+      | "top right"
+      | "bottom left"
+      | "bottom right";
+    posterImage?: string;
+    lazyLoad?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  export let autoPlay: VideoProps["autoPlay"];
+  export let muted: VideoProps["muted"];
+  export let controls: VideoProps["controls"];
+  export let loop: VideoProps["loop"];
+  export let playsInline: VideoProps["playsInline"];
+  export let attributes: VideoProps["attributes"];
+  export let fit: VideoProps["fit"];
+  export let position: VideoProps["position"];
+  export let video: VideoProps["video"];
+  export let posterImage: VideoProps["posterImage"];
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
+
+  $: videoProps = () => {
+    return {
+      ...(autoPlay === true
+        ? {
+            autoPlay: true,
+          }
+        : {}),
+      ...(muted === true
+        ? {
+            muted: true,
+          }
+        : {}),
+      ...(controls === true
+        ? {
+            controls: true,
+          }
+        : {}),
+      ...(loop === true
+        ? {
+            loop: true,
+          }
+        : {}),
+      ...(playsInline === true
+        ? {
+            playsInline: true,
+          }
+        : {}),
+    };
+  };
+</script>
+
+<video
+  {...videoProps()}
+  use:mitosis_styling={{
+    width: "100%",
+    height: "100%",
+    ...attributes?.style,
+    objectFit: fit,
+    objectPosition: position,
+    // Hack to get object fit to work as expected and
+    // not have the video overflow
+    borderRadius: 1,
+  }}
+  src={video || "no-src"}
+  poster={posterImage}
+/>

package/package/blocks/video/video.svelte

@@ -0,0 +1,63 @@
+<script context="module"></script>
+
+<script>export let autoPlay;
+export let muted;
+export let controls;
+export let loop;
+export let playsInline;
+export let attributes;
+export let fit;
+export let position;
+export let video;
+export let posterImage;
+function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+        node.style[p] = v;
+    });
+}
+$: videoProps = () => {
+    return {
+        ...(autoPlay === true
+            ? {
+                autoPlay: true,
+            }
+            : {}),
+        ...(muted === true
+            ? {
+                muted: true,
+            }
+            : {}),
+        ...(controls === true
+            ? {
+                controls: true,
+            }
+            : {}),
+        ...(loop === true
+            ? {
+                loop: true,
+            }
+            : {}),
+        ...(playsInline === true
+            ? {
+                playsInline: true,
+            }
+            : {}),
+    };
+};
+</script>
+
+<video
+  {...videoProps()}
+  use:mitosis_styling={{
+    width: "100%",
+    height: "100%",
+    ...attributes?.style,
+    objectFit: fit,
+    objectPosition: position,
+    // Hack to get object fit to work as expected and
+    // not have the video overflow
+    borderRadius: 1,
+  }}
+  src={video || "no-src"}
+  poster={posterImage}
+/>

package/package/blocks/video/video.svelte.d.ts

@@ -0,0 +1,41 @@
+import { SvelteComponentTyped } from "svelte";
+export interface VideoProps {
+    attributes?: any;
+    video?: string;
+    autoPlay?: boolean;
+    controls?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsInline?: boolean;
+    aspectRatio?: number;
+    width?: number;
+    height?: number;
+    fit?: "contain" | "cover" | "fill";
+    position?: "center" | "top" | "left" | "right" | "bottom" | "top left" | "top right" | "bottom left" | "bottom right";
+    posterImage?: string;
+    lazyLoad?: boolean;
+}
+declare const __propDef: {
+    props: {
+        autoPlay: VideoProps["autoPlay"];
+        muted: VideoProps["muted"];
+        controls: VideoProps["controls"];
+        loop: VideoProps["loop"];
+        playsInline: VideoProps["playsInline"];
+        attributes: VideoProps["attributes"];
+        fit: VideoProps["fit"];
+        position: VideoProps["position"];
+        video: VideoProps["video"];
+        posterImage: VideoProps["posterImage"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type VideoProps = typeof __propDef.props;
+export declare type VideoEvents = typeof __propDef.events;
+export declare type VideoSlots = typeof __propDef.slots;
+export default class Video extends SvelteComponentTyped<VideoProps, VideoEvents, VideoSlots> {
+}
+export {};

package/package/components/render-block/block-styles.lite.tsx

@@ -0,0 +1,60 @@
+<script context="module" lang="ts">
+  export type BlockStylesProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+  };
+</script>
+
+<script lang="ts">
+  import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+  import { TARGET } from "../../constants/target.js";
+  import { BuilderContextInterface } from "../../context/types.js";
+  import { getProcessedBlock } from "../../functions/get-processed-block.js";
+  import { convertStyleMaptoCSS } from "../../helpers/css.js";
+  import { BuilderBlock } from "../../types/builder-block.js";
+  import RenderInlinedStyles from "../render-inlined-styles.svelte";
+
+  export let block: BlockStylesProps["block"];
+  export let context: BlockStylesProps["context"];
+
+  $: useBlock = () => {
+    return getProcessedBlock({
+      block: block,
+      state: context.state,
+      context: context.context,
+      shouldEvaluateBindings: true,
+    });
+  };
+
+  $: css = () => {
+    const styles = useBlock().responsiveStyles;
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    return `
+      ${
+        largeStyles
+          ? `.${useBlock().id} {${convertStyleMaptoCSS(largeStyles)}}`
+          : ""
+      }
+      ${
+        mediumStyles
+          ? `${getMaxWidthQueryForSize("medium")} {
+            .${useBlock().id} {${convertStyleMaptoCSS(mediumStyles)}}
+          }`
+          : ""
+      }
+      ${
+        smallStyles
+          ? `${getMaxWidthQueryForSize("small")} {
+            .${useBlock().id} {${convertStyleMaptoCSS(smallStyles)}}
+          }`
+          : ""
+      }
+    }`;
+  };
+</script>
+
+{#if TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte"}
+  <RenderInlinedStyles styles={css()} />
+{/if}

package/package/components/render-block/block-styles.svelte

@@ -0,0 +1,45 @@
+<script context="module"></script>
+
+<script>import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+import { TARGET } from "../../constants/target.js";
+import "../../context/types.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import { convertStyleMaptoCSS } from "../../helpers/css.js";
+import "../../types/builder-block.js";
+import RenderInlinedStyles from "../render-inlined-styles.svelte";
+export let block;
+export let context;
+$: useBlock = () => {
+    return getProcessedBlock({
+        block: block,
+        state: context.state,
+        context: context.context,
+        shouldEvaluateBindings: true,
+    });
+};
+$: css = () => {
+    const styles = useBlock().responsiveStyles;
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    return `
+      ${largeStyles
+        ? `.${useBlock().id} {${convertStyleMaptoCSS(largeStyles)}}`
+        : ""}
+      ${mediumStyles
+        ? `${getMaxWidthQueryForSize("medium")} {
+            .${useBlock().id} {${convertStyleMaptoCSS(mediumStyles)}}
+          }`
+        : ""}
+      ${smallStyles
+        ? `${getMaxWidthQueryForSize("small")} {
+            .${useBlock().id} {${convertStyleMaptoCSS(smallStyles)}}
+          }`
+        : ""}
+    }`;
+};
+</script>
+
+{#if TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte"}
+  <RenderInlinedStyles styles={css()} />
+{/if}

package/package/components/render-block/block-styles.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+export declare type BlockStylesProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+};
+import { BuilderContextInterface } from "../../context/types.js";
+import { BuilderBlock } from "../../types/builder-block.js";
+declare const __propDef: {
+    props: {
+        block: BlockStylesProps["block"];
+        context: BlockStylesProps["context"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type BlockStylesProps = typeof __propDef.props;
+export declare type BlockStylesEvents = typeof __propDef.events;
+export declare type BlockStylesSlots = typeof __propDef.slots;
+export default class BlockStyles extends SvelteComponentTyped<BlockStylesProps, BlockStylesEvents, BlockStylesSlots> {
+}
+export {};

package/package/components/render-block/render-block.helpers.d.ts

@@ -0,0 +1 @@
+export declare const isEmptyHtmlElement: (tagName: unknown) => boolean;

package/package/components/render-block/render-block.helpers.js

@@ -0,0 +1,24 @@
+/**
+ * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+ */
+const EMPTY_HTML_ELEMENTS = [
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'keygen',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr',
+];
+export const isEmptyHtmlElement = (tagName) => {
+    return (typeof tagName === 'string' &&
+        EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase()));
+};