@builder.io/sdk-svelte 1.0.22 → 1.0.24

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

@@ -0,0 +1,139 @@
+import type { ComponentInfo } from '../../types/components';
+const defaultTab = {
+  '@type': '@builder.io/sdk:Element',
+  responsiveStyles: {
+    large: {
+      paddingLeft: '20px',
+      paddingRight: '20px',
+      paddingTop: '10px',
+      paddingBottom: '10px',
+      minWidth: '100px',
+      textAlign: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      cursor: 'pointer',
+      userSelect: 'none'
+    }
+  },
+  component: {
+    name: 'Text',
+    options: {
+      text: 'New tab'
+    }
+  }
+};
+const defaultElement = {
+  '@type': '@builder.io/sdk:Element',
+  responsiveStyles: {
+    large: {
+      height: '200px',
+      display: 'flex',
+      marginTop: '20px',
+      flexDirection: 'column'
+    }
+  },
+  component: {
+    name: 'Text',
+    options: {
+      text: 'New tab content '
+    }
+  }
+};
+export const componentInfo: ComponentInfo = {
+  name: 'Builder: Tabs',
+  inputs: [{
+    name: 'tabs',
+    type: 'list',
+    broadcast: true,
+    subFields: [{
+      name: 'label',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [defaultTab]
+    }, {
+      name: 'content',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [defaultElement]
+    }],
+    defaultValue: [{
+      label: [{
+        ...defaultTab,
+        component: {
+          name: 'Text',
+          options: {
+            text: 'Tab 1'
+          }
+        }
+      }],
+      content: [{
+        ...defaultElement,
+        component: {
+          name: 'Text',
+          options: {
+            text: 'Tab 1 content'
+          }
+        }
+      }]
+    }, {
+      label: [{
+        ...defaultTab,
+        component: {
+          name: 'Text',
+          options: {
+            text: 'Tab 2'
+          }
+        }
+      }],
+      content: [{
+        ...defaultElement,
+        component: {
+          name: 'Text',
+          options: {
+            text: 'Tab 2 content'
+          }
+        }
+      }]
+    }]
+  }, {
+    name: 'activeTabStyle',
+    type: 'uiStyle',
+    helperText: 'CSS styles for the active tab',
+    defaultValue: {
+      backgroundColor: 'rgba(0, 0, 0, 0.1)'
+    }
+  }, {
+    name: 'defaultActiveTab',
+    type: 'number',
+    helperText: 'Default tab to open to. Set to "1" for the first tab, "2" for the second, or choose "0" for none',
+    defaultValue: 1,
+    advanced: true
+  }, {
+    name: 'collapsible',
+    type: 'boolean',
+    helperText: 'If on, clicking an open tab closes it so no tabs are active',
+    defaultValue: false,
+    advanced: true
+  }, {
+    name: 'tabHeaderLayout',
+    type: 'enum',
+    helperText: 'Change the layout of the tab headers (uses justify-content)',
+    defaultValue: 'flex-start',
+    enum: [{
+      label: 'Center',
+      value: 'center'
+    }, {
+      label: 'Space between',
+      value: 'space-between'
+    }, {
+      label: 'Space around',
+      value: 'space-around'
+    }, {
+      label: 'Left',
+      value: 'flex-start'
+    }, {
+      label: 'Right',
+      value: 'flex-end'
+    }]
+  }]
+}

package/src/blocks/tabs/index.ts

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

package/src/blocks/tabs/tabs.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import Blocks from "../../components/blocks/blocks.svelte";
+  import type { BuilderBlock } from "../../types/builder-block";
+  import type { TabsProps } from "./tabs.types";
+
+  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 builderBlock: TabsProps["builderBlock"];
+  export let builderContext: TabsProps["builderContext"];
+  export let builderComponents: TabsProps["builderComponents"];
+  export let builderLinkComponent: TabsProps["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 activeTabContent(active: number) {
+    return tabs && tabs[active].content;
+  }
+  function getActiveTabStyle(index: number) {
+    return activeTab === index ? activeTabStyle : {};
+  }
+
+  let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
+</script>
+
+<div>
+  <div
+    style={stringifyStyles({
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: tabHeaderLayout || "flex-start",
+      overflow: "auto",
+    })}
+    class="builder-tabs-wrap"
+  >
+    {#each tabs as tab, index (index)}
+      <span
+        style={stringifyStyles(getActiveTabStyle(index))}
+        class={`builder-tab-wrap ${
+          activeTab === index ? "builder-tab-active" : ""
+        }`}
+        on:click={(event) => {
+          if (index === activeTab && collapsible) {
+            activeTab = -1;
+          } else {
+            activeTab = index;
+          }
+        }}
+        ><Blocks
+          parent={builderBlock.id}
+          path={`component.options.tabs.${index}.label`}
+          blocks={tab.label}
+          context={builderContext}
+          registeredComponents={builderComponents}
+          linkComponent={builderLinkComponent}
+        /></span
+      >
+    {/each}
+  </div>
+  {#if activeTabContent(activeTab)}
+    <div>
+      <Blocks
+        parent={builderBlock.id}
+        path={`component.options.tabs.${activeTab}.content`}
+        blocks={activeTabContent(activeTab)}
+        context={builderContext}
+        registeredComponents={builderComponents}
+        linkComponent={builderLinkComponent}
+      />
+    </div>
+  {/if}
+</div>

package/src/blocks/tabs/tabs.types.ts

@@ -0,0 +1,13 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
+export interface TabsProps extends BuilderComponentsProp, BuilderLinkComponentProp, BuilderDataProps {
+  tabs: {
+    label: BuilderBlock[];
+    content: BuilderBlock[];
+  }[];
+  builderBlock: BuilderBlock;
+  defaultActiveTab?: number;
+  collapsible?: boolean;
+  tabHeaderLayout?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+  activeTabStyle?: any;
+}

package/src/blocks/text/text.types.ts

@@ -1,3 +1,4 @@
+import type { BuilderDataProps } from '../../types/builder-props';
 export type TextProps = {
   text?: string;
-}
+} & BuilderDataProps

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

@@ -97,4 +97,10 @@ export const getInheritedStyles = ({
     return {};
   }
   return extractTextStyles(style);
+};
+export const shouldPassLinkComponent = (blockName: string | undefined) => {
+  return blockName && ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(blockName);
+};
+export const shouldPassRegisteredComponents = (blockName: string | undefined) => {
+  return blockName && ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(blockName);
 }

package/src/components/block/block.svelte

@@ -22,12 +22,15 @@
     getComponent,
     getInheritedStyles,
     getRepeatItemData,
+    shouldPassLinkComponent,
+    shouldPassRegisteredComponents,
   } from "./block.helpers";
   import BlockStyles from "./components/block-styles.svelte";
   import BlockWrapper from "./components/block-wrapper.svelte";
   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"];
@@ -101,17 +104,12 @@
       componentOptions: {
         ...getBlockComponentOptions(processedBlock()),
         builderContext: context,
-        ...(blockComponent?.()?.name === "Core:Button" ||
-        blockComponent?.()?.name === "Symbol" ||
-        blockComponent?.()?.name === "Columns" ||
-        blockComponent?.()?.name === "Form:Form"
+        ...(shouldPassLinkComponent(blockComponent?.()?.name)
           ? {
               builderLinkComponent: linkComponent,
             }
           : {}),
-        ...(blockComponent?.()?.name === "Symbol" ||
-        blockComponent?.()?.name === "Columns" ||
-        blockComponent?.()?.name === "Form:Form"
+        ...(shouldPassRegisteredComponents(blockComponent?.()?.name)
           ? {
               builderComponents: registeredComponents,
             }

package/src/components/block/components/interactive-element.svelte

@@ -17,29 +17,31 @@
   import type { Dictionary } from "../../../types/typescript";
   import type { Writable } from "svelte/store";
 
-  export let wrapperProps: InteractiveElementProps["wrapperProps"];
   export let includeBlockProps: InteractiveElementProps["includeBlockProps"];
   export let block: InteractiveElementProps["block"];
   export let context: InteractiveElementProps["context"];
+  export let wrapperProps: InteractiveElementProps["wrapperProps"];
   export let Wrapper: InteractiveElementProps["Wrapper"];
+
+  $: attributes = () => {
+    return includeBlockProps
+      ? {
+          ...getBlockProperties({
+            block: block,
+            context: $context,
+          }),
+          ...getBlockActions({
+            block: block,
+            rootState: $context.rootState,
+            rootSetState: $context.rootSetState,
+            localState: $context.localState,
+            context: $context.context,
+          }),
+        }
+      : {};
+  };
 </script>
 
-<svelte:component
-  this={Wrapper}
-  {...wrapperProps}
-  attributes={includeBlockProps
-    ? {
-        ...getBlockProperties({
-          block: block,
-          context: $context,
-        }),
-        ...getBlockActions({
-          block: block,
-          rootState: $context.rootState,
-          rootSetState: $context.rootSetState,
-          localState: $context.localState,
-          context: $context.context,
-        }),
-      }
-    : {}}><slot /></svelte:component
+<svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
+  ><slot /></svelte:component
 >

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

@@ -45,6 +45,8 @@
     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"];
@@ -56,9 +58,9 @@
   export let model: BuilderEditorProps["model"] = undefined;
   export let content: BuilderEditorProps["content"] = undefined;
   export let data: BuilderEditorProps["data"] = undefined;
+  export let showContent: BuilderEditorProps["showContent"];
   export let contentWrapper: BuilderEditorProps["contentWrapper"] = undefined;
   export let context: BuilderEditorProps["context"] = undefined;
-  export let showContent: BuilderEditorProps["showContent"];
   export let contentWrapperProps: BuilderEditorProps["contentWrapperProps"] =
     undefined;
 
@@ -276,6 +278,14 @@
       });
     }
   }
+  $: showContentProps = () => {
+    return showContent
+      ? {}
+      : {
+          hidden: true,
+          "aria-hidden": true,
+        };
+  };
 
   let elementRef;
 
@@ -401,14 +411,9 @@
     builder-content-id={$builderContextSignal.content?.id}
     builder-model={model}
     {...{}}
-    {...showContent
-      ? {}
-      : {
-          hidden: true,
-          "aria-hidden": true,
-        }}
+    {...showContentProps()}
     {...contentWrapperProps}
-    class={`variant-${content?.testVariationId || content?.id}`}
+    class={getWrapperClassName(content?.testVariationId || content?.id)}
     on:initeditingbldr={(event) => {
       elementRef_onIniteditingbldr(event);
     }}

package/src/components/content/components/styles.helpers.ts

@@ -95,4 +95,7 @@ const DEFAULT_STYLES = `
 `;
 export const getDefaultStyles = (isNested: boolean | undefined) => {
   return !isNested ? DEFAULT_STYLES : '';
+};
+export const getWrapperClassName = (variationId?: string) => {
+  return `variant-${variationId}`;
 }

package/src/components/content/content.svelte

@@ -24,6 +24,7 @@
   } 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/dynamic-div.svelte

@@ -0,0 +1,19 @@
+<script context="module" lang="ts">
+  export interface DynamicDivProps {
+    children?: any;
+    attributes: any;
+    actionAttributes: any;
+    BlockWrapperProps: any;
+    builderPath: any;
+    builderParentId: any;
+    BlocksWrapperProps: any;
+    contentWrapperProps: any;
+    builderModel: any;
+    ref: any;
+  }
+</script>
+
+<script lang="ts">
+</script>
+
+<div><slot /></div>

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

@@ -12,10 +12,13 @@ import { componentInfo as slotComponentInfo } from '../blocks/slot/component-inf
 import { default as Slot } from '../blocks/slot/index';
 import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info';
 import { default as Symbol } from '../blocks/symbol/index';
+import { componentInfo as tabsComponentInfo } from '../blocks/tabs/component-info';
+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 type { RegisteredComponent } from '../context/types';
 import { getExtraComponents } from './extra-components';
+import { TARGET } from './target';
 
 /**
  * Returns a list of all registered components.
@@ -45,4 +48,7 @@ export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () =>
 }, {
   component: Text,
   ...textComponentInfo
-}, ...getExtraComponents()]
+}, ...(TARGET === 'rsc' ? [] : [{
+  component: Tabs,
+  ...tabsComponentInfo
+}]), ...getExtraComponents()]

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.22"
+export const SDK_VERSION = "1.0.24"

package/src/functions/evaluate/evaluate.ts

@@ -40,7 +40,6 @@ export function evaluate({
   enableCache
 }: EvaluatorArgs): EvalValue {
   if (code === '') {
-    logger.warn('Skipping evaluation of empty code block.');
     return undefined;
   }
   const args: ExecutorArgs = {

package/src/functions/get-class-prop-name.ts

@@ -9,6 +9,7 @@ export const getClassPropName = () => {
     case 'vue':
     case 'solid':
     case 'qwik':
+    case 'angular':
       return 'class';
   }
 }

package/src/functions/get-style.ts

@@ -27,6 +27,7 @@ export function mapStyleObjToStrIfNeeded(style: Partial<CSSStyleDeclaration>): s
     case 'svelte':
     case 'vue':
     case 'solid':
+    case 'angular':
       return convertStyleMapToCSSArray(style).join(' ');
     case 'qwik':
     case 'reactNative':

package/src/types/targets.ts

@@ -1 +1 @@
-export type Target = 'vue' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid' | 'rsc'
+export type Target = 'vue' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid' | 'rsc' | 'angular'