@builder.io/sdk-svelte 1.0.27 → 1.0.29

package/src/blocks/accordion/accordion.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+  import Blocks from "../../components/blocks/index";
+  import { camelToKebabCase } from "../../functions/camel-to-kebab-case";
+  import type { Dictionary } from "../../types/typescript";
+  import type { AccordionProps } from "./accordion.types";
+  import { convertOrderNumberToString } from "./helpers";
+
+  export let grid: AccordionProps["grid"] = undefined;
+  export let oneAtATime: AccordionProps["oneAtATime"] = undefined;
+  export let items: AccordionProps["items"];
+  export let gridRowWidth: AccordionProps["gridRowWidth"] = undefined;
+  export let builderBlock: AccordionProps["builderBlock"];
+  export let builderContext: AccordionProps["builderContext"];
+  export let builderComponents: AccordionProps["builderComponents"];
+  export let builderLinkComponent: AccordionProps["builderLinkComponent"] =
+    undefined;
+  function stringifyStyles(stylesObj) {
+    let styles = "";
+    for (let key in stylesObj) {
+      const dashedKey = key.replace(/[A-Z]/g, function (match) {
+        return "-" + match.toLowerCase();
+      });
+      styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+    return styles;
+  }
+
+  function getAccordionTitleClassName(index: number) {
+    return `builder-accordion-title builder-accordion-title-${
+      open.includes(index) ? "open" : "closed"
+    }`;
+  }
+  function getAccordionDetailClassName(index: number) {
+    return `builder-accordion-detail builder-accordion-detail-${
+      open.includes(index) ? "open" : "closed"
+    }`;
+  }
+  function onClick(index: number) {
+    if (open.includes(index)) {
+      open = onlyOneAtATime() ? [] : open.filter((item) => item !== index);
+    } else {
+      open = onlyOneAtATime() ? [index] : open.concat(index);
+    }
+  }
+  $: onlyOneAtATime = () => {
+    return Boolean(grid || oneAtATime);
+  };
+  $: accordionStyles = () => {
+    const styles = {
+      display: "flex" as "flex" | "none",
+      alignItems: "stretch" as
+        | "stretch"
+        | "flex-start"
+        | "flex-end"
+        | "center"
+        | "baseline",
+      flexDirection: "column" as
+        | "column"
+        | "row"
+        | "column-reverse"
+        | "row-reverse",
+      ...(grid && {
+        flexDirection: "row" as
+          | "column"
+          | "row"
+          | "column-reverse"
+          | "row-reverse",
+        alignItems: "flex-start" as
+          | "stretch"
+          | "flex-start"
+          | "flex-end"
+          | "center"
+          | "baseline",
+        flexWrap: "wrap" as "nowrap" | "wrap",
+      }),
+    };
+    return styles;
+  };
+  $: accordionTitleStyles = () => {
+    const shared = {
+      display: "flex",
+      flexDirection: "column",
+    };
+    const styles = {
+      ...shared,
+      alignItems: "stretch",
+      cursor: "pointer",
+    };
+    return Object.fromEntries(
+      Object.entries(styles).filter(([_, value]) => value !== undefined)
+    ) as Dictionary<string>;
+  };
+  $: openGridItemOrder = () => {
+    let itemOrder: number | null = null;
+    const getOpenGridItemPosition = grid && open.length;
+    if (getOpenGridItemPosition && document) {
+      const openItemIndex = open[0];
+      const openItem = document.querySelector(
+        `.builder-accordion-title[data-index="${openItemIndex}"]`
+      );
+      let subjectItem = openItem;
+      itemOrder = openItemIndex;
+      if (subjectItem) {
+        let prevItemRect = subjectItem.getBoundingClientRect();
+        while ((subjectItem = subjectItem && subjectItem.nextElementSibling)) {
+          if (subjectItem) {
+            if (subjectItem.classList.contains("builder-accordion-detail")) {
+              continue;
+            }
+            const subjectItemRect = subjectItem.getBoundingClientRect();
+            if (subjectItemRect.left > prevItemRect.left) {
+              const index = parseInt(
+                subjectItem.getAttribute("data-index") || "",
+                10
+              );
+              if (!isNaN(index)) {
+                prevItemRect = subjectItemRect;
+                itemOrder = index;
+              }
+            } else {
+              break;
+            }
+          }
+        }
+      }
+    }
+    if (typeof itemOrder === "number") {
+      itemOrder = itemOrder + 1;
+    }
+    return itemOrder;
+  };
+  $: accordionDetailStyles = () => {
+    const styles = {
+      ...{
+        order:
+          typeof openGridItemOrder() === "number"
+            ? (openGridItemOrder() as number)
+            : undefined,
+      },
+      ...(grid && {
+        width: "100%",
+      }),
+    };
+    return Object.fromEntries(
+      Object.entries(styles).filter(([_, value]) => value !== undefined)
+    ) as Dictionary<string>;
+  };
+
+  let open = [];
+</script>
+
+<div style={stringifyStyles(accordionStyles())} class="builder-accordion">
+  {#each items as item, index}
+    <div
+      style={stringifyStyles({
+        ...accordionTitleStyles(),
+        width: grid ? gridRowWidth : undefined,
+        ...{
+          order:
+            openGridItemOrder() !== null
+              ? convertOrderNumberToString(index)
+              : convertOrderNumberToString(index + 1),
+        },
+      })}
+      class={getAccordionTitleClassName(index)}
+      data-index={index}
+      on:click={(event) => {
+        onClick(index);
+      }}
+    >
+      <Blocks
+        blocks={item.title}
+        path={`items.${index}.title`}
+        parent={builderBlock.id}
+        context={builderContext}
+        registeredComponents={builderComponents}
+        linkComponent={builderLinkComponent}
+      />
+    </div>
+
+    {#if open.includes(index)}
+      <div
+        style={stringifyStyles(accordionDetailStyles())}
+        class={getAccordionDetailClassName(index)}
+      >
+        <Blocks
+          blocks={item.detail}
+          path={`items.${index}.detail`}
+          parent={builderBlock.id}
+          context={builderContext}
+          registeredComponents={builderComponents}
+          linkComponent={builderLinkComponent}
+        />
+      </div>
+    {/if}
+  {/each}
+</div>

package/src/blocks/accordion/accordion.types.ts

@@ -0,0 +1,12 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
+export interface AccordionProps extends BuilderComponentsProp, BuilderLinkComponentProp, BuilderDataProps {
+  items: {
+    title: BuilderBlock[];
+    detail: BuilderBlock[];
+  }[];
+  oneAtATime?: boolean;
+  grid?: boolean;
+  gridRowWidth?: string;
+  useChildrenForItems?: boolean;
+}

package/src/blocks/accordion/component-info.ts

@@ -0,0 +1,124 @@
+import type { ComponentInfo } from '../../types/components';
+const defaultTitle = {
+  '@type': '@builder.io/sdk:Element',
+  layerName: 'Accordion item title',
+  responsiveStyles: {
+    large: {
+      marginTop: '10px',
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'stretch',
+      flexDirection: 'column',
+      paddingBottom: '10px'
+    }
+  },
+  children: [{
+    '@type': '@builder.io/sdk:Element',
+    responsiveStyles: {
+      large: {
+        textAlign: 'left',
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    },
+    component: {
+      name: 'Text',
+      options: {
+        text: 'I am an accordion title. Click me!'
+      }
+    }
+  }]
+};
+const defaultDetail = {
+  '@type': '@builder.io/sdk:Element',
+  layerName: 'Accordion item detail',
+  responsiveStyles: {
+    large: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'stretch',
+      flexDirection: 'column',
+      marginTop: '10px',
+      paddingBottom: '10px'
+    }
+  },
+  children: [{
+    '@type': '@builder.io/sdk:Element',
+    responsiveStyles: {
+      large: {
+        paddingTop: '50px',
+        textAlign: 'left',
+        display: 'flex',
+        flexDirection: 'column',
+        paddingBottom: '50px'
+      }
+    },
+    component: {
+      name: 'Text',
+      options: {
+        text: 'I am an accordion detail, hello!'
+      }
+    }
+  }]
+};
+export const componentInfo: ComponentInfo = {
+  name: 'Builder:Accordion',
+  canHaveChildren: true,
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35',
+  defaultStyles: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch'
+  },
+  inputs: [{
+    name: 'items',
+    type: 'list',
+    broadcast: true,
+    subFields: [{
+      name: 'title',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [defaultTitle]
+    }, {
+      name: 'detail',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [defaultDetail]
+    }],
+    defaultValue: [{
+      title: [defaultTitle],
+      detail: [defaultDetail]
+    }, {
+      title: [defaultTitle],
+      detail: [defaultDetail]
+    }],
+    showIf: (options: Map<string, any>) => !options.get('useChildrenForItems')
+  }, {
+    name: 'oneAtATime',
+    helperText: 'Only allow opening one at a time (collapse all others when new item openned)',
+    type: 'boolean',
+    defaultValue: false
+  }, {
+    name: 'grid',
+    helperText: 'Display as a grid',
+    type: 'boolean',
+    defaultValue: false
+  }, {
+    name: 'gridRowWidth',
+    helperText: 'Display as a grid',
+    type: 'string',
+    showIf: (options: Map<string, any>) => options.get('grid'),
+    defaultValue: '25%'
+  }, {
+    name: 'useChildrenForItems',
+    type: 'boolean',
+    helperText: 'Use child elements for each slide, instead of the array. Useful for dynamically repeating items',
+    advanced: true,
+    defaultValue: false,
+    onChange: (options: Map<string, any>) => {
+      if (options.get('useChildrenForItems') === true) {
+        options.set('items', []);
+      }
+    }
+  }]
+}

package/src/blocks/accordion/helpers.ts

@@ -0,0 +1,3 @@
+export const convertOrderNumberToString = (order: number) => {
+  return order.toString();
+}

package/src/blocks/accordion/index.ts

@@ -0,0 +1 @@
+export { default } from './accordion.svelte'

package/src/blocks/columns/columns.svelte

@@ -4,6 +4,7 @@
 
 <script lang="ts">
   import Blocks from "../../components/blocks/blocks.svelte";
+  import DynamicDiv from "../../components/dynamic-div.svelte";
   import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer.svelte";
   import InlinedStyles from "../../components/inlined-styles.svelte";
   import type { SizeName } from "../../constants/device-sizes";
@@ -15,7 +16,6 @@
   import type { Dictionary } from "../../types/typescript";
   import type { Column, ColumnProps } from "./columns.types";
   import { getColumnsClass } from "./helpers";
-  import DynamicDiv from "../../components/dynamic-div.svelte";
 
   export let space: ColumnProps["space"] = undefined;
   export let columns: ColumnProps["columns"] = undefined;

package/src/blocks/form/form/form.svelte

@@ -99,7 +99,7 @@
         return;
       }
       event.preventDefault();
-      const el = event.currentTarget;
+      const el = event.currentTarget || event.target;
       const headers = customHeaders || {};
       let body: any;
       const formData = new FormData(el);
@@ -108,9 +108,7 @@
       const formPairs: {
         key: string;
         value: File | boolean | number | string | FileList;
-      }[] = Array.from(
-        event.currentTarget.querySelectorAll("input,select,textarea")
-      )
+      }[] = Array.from(el.querySelectorAll("input,select,textarea"))
         .filter((el) => !!(el as HTMLInputElement).name)
         .map((el) => {
           let value: any;
@@ -303,6 +301,7 @@
   on:submit={(event) => {
     onSubmit(event);
   }}
+  {...{}}
   {...filterAttrs(attributes, "on:", false)}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >

package/src/blocks/symbol/symbol.svelte

@@ -4,12 +4,12 @@
   import ContentVariants from "../../components/content-variants/index";
   import type { BuilderContent } from "../../types/builder-content";
   import { filterAttrs } from "../helpers";
+  import DynamicDiv from "../../components/dynamic-div.svelte";
   import { getClassPropName } from "../../functions/get-class-prop-name";
   import type { Nullable } from "../../types/typescript";
   import { setAttrs } from "../helpers";
   import { fetchSymbolContent } from "./symbol.helpers";
   import type { SymbolProps } from "./symbol.types";
-  import DynamicDiv from "../../components/dynamic-div.svelte";
 
   export let symbol: SymbolProps["symbol"] = undefined;
   export let attributes: SymbolProps["attributes"] = undefined;

package/src/blocks/tabs/tabs.svelte

@@ -5,9 +5,9 @@
 
   export let defaultActiveTab: TabsProps["defaultActiveTab"] = undefined;
   export let tabs: TabsProps["tabs"];
-  export let activeTabStyle: TabsProps["activeTabStyle"] = undefined;
-  export let tabHeaderLayout: TabsProps["tabHeaderLayout"] = undefined;
   export let collapsible: TabsProps["collapsible"] = undefined;
+  export let tabHeaderLayout: TabsProps["tabHeaderLayout"] = undefined;
+  export let activeTabStyle: TabsProps["activeTabStyle"] = undefined;
   export let builderBlock: TabsProps["builderBlock"];
   export let builderContext: TabsProps["builderContext"];
   export let builderComponents: TabsProps["builderComponents"];
@@ -27,8 +27,12 @@
   function activeTabContent(active: number) {
     return tabs && tabs[active].content;
   }
-  function getActiveTabStyle(index: number) {
-    return activeTab === index ? activeTabStyle : {};
+  function onClick(index: number) {
+    if (index === activeTab && collapsible) {
+      activeTab = -1;
+    } else {
+      activeTab = index;
+    }
   }
 
   let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
@@ -46,16 +50,14 @@
   >
     {#each tabs as tab, index (index)}
       <span
-        style={stringifyStyles(getActiveTabStyle(index))}
+        style={stringifyStyles({
+          ...(activeTab === index ? activeTabStyle : {}),
+        })}
         class={`builder-tab-wrap ${
           activeTab === index ? "builder-tab-active" : ""
         }`}
         on:click={(event) => {
-          if (index === activeTab && collapsible) {
-            activeTab = -1;
-          } else {
-            activeTab = index;
-          }
+          onClick(index);
         }}
         ><Blocks
           parent={builderBlock.id}

package/src/components/block/animator.ts

@@ -1,3 +1,4 @@
+import { camelToKebabCase } from '../../functions/camel-to-kebab-case';
 import type { BuilderAnimation } from '../../types/builder-block';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -52,7 +53,6 @@ function assign(target: object, ..._args: any[]) {
   }
   return to;
 }
-export const camelCaseToKebabCase = (str?: string) => str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
 export function bindAnimations(animations: BuilderAnimation[]) {
   for (const animation of animations) {
     switch (animation.trigger) {
@@ -121,7 +121,7 @@ export function triggerAnimation(animation: BuilderAnimation) {
     // TODO: only include properties explicitly set in the animation
     // using Object.keys(styles)
     setTimeout(() => {
-      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      element.style.transition = `all ${animation.duration}s ${camelToKebabCase(animation.easing)}`;
       if (animation.delay) {
         element.style.transitionDelay = animation.delay + 's';
       }
@@ -202,7 +202,7 @@ export function bindScrollInViewAnimation(animation: BuilderAnimation) {
 
     // TODO: queue/batch these timeouts!
     setTimeout(() => {
-      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      element.style.transition = `all ${animation.duration}s ${camelToKebabCase(animation.easing)}`;
       if (animation.delay) {
         element.style.transitionDelay = animation.delay + 's';
       }

package/src/components/block/block.helpers.ts

@@ -99,8 +99,8 @@ export const getInheritedStyles = ({
   return extractTextStyles(style);
 };
 export const shouldPassLinkComponent = (block: RegisteredComponent | null | undefined) => {
-  return block && (block.isRSC || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(block.name));
+  return block && (block.isRSC || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
 };
 export const shouldPassRegisteredComponents = (block: RegisteredComponent | null | undefined) => {
-  return block && (block.isRSC || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(block.name));
+  return block && (block.isRSC || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
 }

package/src/components/block/block.svelte

@@ -17,6 +17,7 @@
   import { getBlockComponentOptions } from "../../functions/get-block-component-options";
   import { getProcessedBlock } from "../../functions/get-processed-block";
   import type { BuilderBlock } from "../../types/builder-block";
+  import DynamicDiv from "../dynamic-div.svelte";
   import { bindAnimations } from "./animator";
   import {
     getComponent,
@@ -30,7 +31,6 @@
   import type { ComponentProps } from "./components/component-ref/component-ref.helpers";
   import ComponentRef from "./components/component-ref/component-ref.svelte";
   import RepeatedBlock from "./components/repeated-block.svelte";
-  import DynamicDiv from "../dynamic-div.svelte";
   import type { Writable } from "svelte/store";
 
   export let block: BlockProps["block"];

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

@@ -12,12 +12,12 @@
   } from "../../../constants/device-sizes";
   import { TARGET } from "../../../constants/target";
   import type { BuilderContextInterface } from "../../../context/types";
+  import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
   import { getProcessedBlock } from "../../../functions/get-processed-block";
   import { createCssClass } from "../../../helpers/css";
   import { checkIsDefined } from "../../../helpers/nullable";
   import type { BuilderBlock } from "../../../types/builder-block";
   import InlinedStyles from "../../inlined-styles.svelte";
-  import { camelCaseToKebabCase } from "../animator";
 
   export let block: BlockStylesProps["block"];
   export let context: BlockStylesProps["context"];
@@ -98,7 +98,7 @@
           className: `${className}:hover`,
           styles: {
             ...hoverStyles,
-            transition: `all ${hoverAnimation.duration}s ${camelCaseToKebabCase(
+            transition: `all ${hoverAnimation.duration}s ${camelToKebabCase(
               hoverAnimation.easing
             )}`,
             transitionDelay: hoverAnimation.delay

package/src/components/content/components/enable-editor.svelte

@@ -41,12 +41,12 @@
   import type { ComponentInfo } from "../../../types/components";
   import type { Dictionary } from "../../../types/typescript";
   import { triggerAnimation } from "../../block/animator";
+  import DynamicDiv from "../../dynamic-div.svelte";
   import type {
     BuilderComponentStateChange,
     ContentProps,
   } from "../content.types";
   import { getWrapperClassName } from "./styles.helpers";
-  import DynamicDiv from "../../dynamic-div.svelte";
   import type { Writable } from "svelte/store";
 
   export let builderContextSignal: BuilderEditorProps["builderContextSignal"];
@@ -248,7 +248,7 @@
     const searchParams = new URL(location.href).searchParams;
     const searchParamPreviewModel = searchParams.get("builder.preview");
     const searchParamPreviewId = searchParams.get(
-      `builder.preview.${searchParamPreviewModel}`
+      `builder.overrides.${searchParamPreviewModel}`
     );
     const previewApiKey =
       searchParams.get("apiKey") || searchParams.get("builder.space");
@@ -330,7 +330,7 @@
   onMount(() => {
     if (!apiKey) {
       logger.error(
-        "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+        "No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop."
       );
     }
     evaluateJsCode();

package/src/components/content/content.svelte

@@ -15,6 +15,7 @@
   import type { Dictionary } from "../../types/typescript";
   import Blocks from "../blocks/blocks.svelte";
   import { getUpdateVariantVisibilityScript } from "../content-variants/helpers";
+  import DynamicDiv from "../dynamic-div.svelte";
   import InlinedScript from "../inlined-script.svelte";
   import EnableEditor from "./components/enable-editor.svelte";
   import ContentStyles from "./components/styles.svelte";
@@ -24,7 +25,6 @@
   } from "./content.helpers";
   import type { ContentProps } from "./content.types";
   import { wrapComponentRef } from "./wrap-component-ref";
-  import DynamicDiv from "../dynamic-div.svelte";
 
   export let content: ContentProps["content"] = undefined;
   export let customComponents: ContentProps["customComponents"] = undefined;

package/src/components/content-variants/content-variants.types.ts

@@ -26,7 +26,7 @@ export interface ContentVariantsPrps {
   context?: BuilderRenderContext;
 
   /**
-   * Your API Key: needed to dynamically fetch symbols (required).
+   * Your API Key: needed to enable visual editing, and to dynamically fetch symbols (required).
    */
   apiKey: string;
   apiVersion?: ApiVersion;

package/src/constants/builder-registered-components.ts

@@ -1,3 +1,5 @@
+import { componentInfo as accordionComponentInfo } from '../blocks/accordion/component-info';
+import { default as Accordion } from '../blocks/accordion/index';
 import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info';
 import { default as Button } from '../blocks/button/index';
 import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info';
@@ -51,4 +53,7 @@ export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () =>
 }, ...(TARGET === 'rsc' ? [] : [{
   component: Tabs,
   ...tabsComponentInfo
+}, {
+  component: Accordion,
+  ...accordionComponentInfo
 }]), ...getExtraComponents()]

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.27"
+export const SDK_VERSION = "1.0.29"

package/src/functions/camel-to-kebab-case.ts

@@ -1 +1 @@
-export const camelToKebabCase = (string: string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
+export const camelToKebabCase = (str?: string) => str ? str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() : ''