@builder.io/sdk-svelte 1.0.26 → 1.0.28

package/src/blocks/accordion/accordion.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+  import Blocks from "../../components/blocks/index";
+  import type { AccordionProps } from "./accordion.types";
+  import type { Dictionary } from "../../types/typescript";
+  import { convertOrderNumberToString } from "./helpers";
+  import { camelToKebabCase } from "../../functions/camel-to-kebab-case";
+
+  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/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/components/block-styles.svelte

@@ -17,7 +17,7 @@
   import { checkIsDefined } from "../../../helpers/nullable";
   import type { BuilderBlock } from "../../../types/builder-block";
   import InlinedStyles from "../../inlined-styles.svelte";
-  import { camelCaseToKebabCase } from "../animator";
+  import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
 
   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

@@ -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-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

@@ -16,6 +16,8 @@ import { componentInfo as tabsComponentInfo } from '../blocks/tabs/component-inf
 import { default as Tabs } from '../blocks/tabs/index';
 import { componentInfo as textComponentInfo } from '../blocks/text/component-info';
 import { default as Text } from '../blocks/text/index';
+import { default as Accordion } from '../blocks/accordion/index';
+import { componentInfo as accordionComponentInfo } from '../blocks/accordion/component-info';
 import type { RegisteredComponent } from '../context/types';
 import { getExtraComponents } from './extra-components';
 import { TARGET } from './target';
@@ -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.26"
+export const SDK_VERSION = "1.0.28"

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() : ''

package/src/functions/get-content/generate-content-url.ts

@@ -1,4 +1,4 @@
-import { flatten } from '../../helpers/flatten';
+import { flatten, flattenMongoQuery } from '../../helpers/flatten';
 import { normalizeSearchParams } from '../../helpers/search/search';
 import { DEFAULT_API_VERSION } from '../../types/api-version';
 import { getBuilderSearchParamsFromWindow } from '../get-builder-search-params/index';
@@ -77,11 +77,11 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
     url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
   }
   if (query) {
-    const flattened = flatten({
+    const flattened = flattenMongoQuery({
       query
     });
     for (const key in flattened) {
-      url.searchParams.set(key, JSON.stringify((flattened as any)[key]));
+      url.searchParams.set(key, JSON.stringify(flattened[key]));
     }
   }
   return url;

package/src/helpers/flatten.ts

@@ -16,4 +16,26 @@ export function flatten<T extends Record<string, any>>(object: T, path: string |
       [newPath]: value
     };
   }, ({} as T));
+}
+
+/**
+ * Flatten a nested MongoDB query object into a flat object with dot-separated keys.
+ * $ keys are not flattened and are left as is.
+ *
+ * { foo: { bar: { $gt: 5 }}} -> { 'foo.bar': { '$gt': 5 }}
+ * { foo: {'bar.id': { $elemMatch: { 'baz.id': { $in: ['abc', 'bcd'] }}}}} -> { 'foo.bar.id': { '$elemMatch': { 'baz.id': { '$in': ['abc', 'bcd'] }}}}
+ */
+export function flattenMongoQuery(obj: any, _current?: any, _res: any = {}): {
+  [key: string]: string;
+} {
+  for (const key in obj) {
+    const value = obj[key];
+    const newKey = _current ? _current + '.' + key : key;
+    if (value && typeof value === 'object' && !Array.isArray(value) && !Object.keys(value).find(item => item.startsWith('$'))) {
+      flattenMongoQuery(value, newKey, _res);
+    } else {
+      _res[newKey] = value;
+    }
+  }
+  return _res;
 }