@builder.io/sdk-qwik 0.1.6 → 0.1.7

package/lib/index.qwik.cjs

@@ -611,8 +611,7 @@ const renderComponentProps = function renderComponentProps2(props, state) {
           ...attributes(props),
           ...actions(props)
         }
-      },
-      customBreakpoints: childrenContext(props)?.content?.meta?.breakpoints
+      }
     },
     context: childrenContext(props)
   };
@@ -781,48 +780,48 @@ const STYLES$2 = `
   flex-direction: column;
   align-items: stretch;
 }`;
-const getGutterSize = function getGutterSize2(props, state) {
+const getGutterSize = function getGutterSize2(props, state, builderContext2) {
   return typeof props.space === "number" ? props.space || 0 : 20;
 };
-const getColumns = function getColumns2(props, state) {
+const getColumns = function getColumns2(props, state, builderContext2) {
   return props.columns || [];
 };
-const getWidth = function getWidth2(props, state, index) {
+const getWidth = function getWidth2(props, state, builderContext2, index) {
   const columns = getColumns(props);
   return columns[index]?.width || 100 / columns.length;
 };
-const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
+const getColumnCssWidth = function getColumnCssWidth2(props, state, builderContext2, index) {
   const columns = getColumns(props);
   const gutterSize = getGutterSize(props);
   const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
-  return `calc(${getWidth(props, state, index)}% - ${subtractWidth}px)`;
+  return `calc(${getWidth(props, state, builderContext2, index)}% - ${subtractWidth}px)`;
 };
-const maybeApplyForTablet = function maybeApplyForTablet2(props, state, prop) {
+const maybeApplyForTablet = function maybeApplyForTablet2(props, state, builderContext2, prop) {
   const _stackColumnsAt = props.stackColumnsAt || "tablet";
   return _stackColumnsAt === "tablet" ? prop : "inherit";
 };
-const columnsCssVars = function columnsCssVars2(props, state) {
+const columnsCssVars = function columnsCssVars2(props, state, builderContext2) {
   const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
   return {
     "--flex-dir": flexDir,
-    "--flex-dir-tablet": maybeApplyForTablet(props, state, flexDir)
+    "--flex-dir-tablet": maybeApplyForTablet(props, state, builderContext2, flexDir)
   };
 };
-const columnCssVars = function columnCssVars2(props, state) {
+const columnCssVars = function columnCssVars2(props, state, builderContext2) {
   const width = "100%";
   const marginLeft = "0";
   return {
     "--column-width": width,
     "--column-margin-left": marginLeft,
-    "--column-width-tablet": maybeApplyForTablet(props, state, width),
-    "--column-margin-left-tablet": maybeApplyForTablet(props, state, marginLeft)
+    "--column-width-tablet": maybeApplyForTablet(props, state, builderContext2, width),
+    "--column-margin-left-tablet": maybeApplyForTablet(props, state, builderContext2, marginLeft)
   };
 };
-const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
-  const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
+const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, builderContext2, size) {
+  const breakpointSizes = getSizesForBreakpoints(builderContext2.content?.meta?.breakpoints || {});
   return breakpointSizes[size].max;
 };
-const columnStyleObjects = function columnStyleObjects2(props, state) {
+const columnStyleObjects = function columnStyleObjects2(props, state, builderContext2) {
   return {
     columns: {
       small: {
@@ -846,9 +845,9 @@ const columnStyleObjects = function columnStyleObjects2(props, state) {
     }
   };
 };
-const columnsStyles = function columnsStyles2(props, state) {
+const columnsStyles = function columnsStyles2(props, state, builderContext2) {
   return `
-        @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
+        @media (max-width: ${getWidthForBreakpointSize(props, state, builderContext2, "medium")}px) {
           .${props.builderBlock.id}-breakpoints {
             ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
           }
@@ -858,7 +857,7 @@ const columnsStyles = function columnsStyles2(props, state) {
           }
         }
 
-        @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
+        @media (max-width: ${getWidthForBreakpointSize(props, state, builderContext2, "small")}px) {
           .${props.builderBlock.id}-breakpoints {
             ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
           }
@@ -871,25 +870,26 @@ const columnsStyles = function columnsStyles2(props, state) {
 };
 const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
+  const builderContext$1 = qwik.useContext(builderContext);
   const state = {};
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: `builder-columns ${props.builderBlock.id}-breakpoints div-Columns`,
     style: {
       ...{},
-      ...columnsCssVars(props, state)
+      ...columnsCssVars(props, state, builderContext$1)
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles, {
-        styles: columnsStyles(props, state)
+        styles: columnsStyles(props, state, builderContext$1)
       }, "c0_0"),
       (props.columns || []).map(function(column, index) {
         return /* @__PURE__ */ jsxRuntime.jsx("div", {
           class: "builder-column div-Columns-2",
           style: {
-            width: getColumnCssWidth(props, state, index),
+            width: getColumnCssWidth(props, state, builderContext$1, index),
             marginLeft: `${index === 0 ? 0 : getGutterSize(props)}px`,
             ...{},
-            ...columnCssVars(props, state)
+            ...columnCssVars(props, state, builderContext$1)
           },
           children: /* @__PURE__ */ jsxRuntime.jsx(RenderBlocks, {
             get blocks() {

package/lib/index.qwik.mjs

@@ -609,8 +609,7 @@ const renderComponentProps = function renderComponentProps2(props, state) {
           ...attributes(props),
           ...actions(props)
         }
-      },
-      customBreakpoints: childrenContext(props)?.content?.meta?.breakpoints
+      }
     },
     context: childrenContext(props)
   };
@@ -779,48 +778,48 @@ const STYLES$2 = `
   flex-direction: column;
   align-items: stretch;
 }`;
-const getGutterSize = function getGutterSize2(props, state) {
+const getGutterSize = function getGutterSize2(props, state, builderContext2) {
   return typeof props.space === "number" ? props.space || 0 : 20;
 };
-const getColumns = function getColumns2(props, state) {
+const getColumns = function getColumns2(props, state, builderContext2) {
   return props.columns || [];
 };
-const getWidth = function getWidth2(props, state, index) {
+const getWidth = function getWidth2(props, state, builderContext2, index) {
   const columns = getColumns(props);
   return columns[index]?.width || 100 / columns.length;
 };
-const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
+const getColumnCssWidth = function getColumnCssWidth2(props, state, builderContext2, index) {
   const columns = getColumns(props);
   const gutterSize = getGutterSize(props);
   const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
-  return `calc(${getWidth(props, state, index)}% - ${subtractWidth}px)`;
+  return `calc(${getWidth(props, state, builderContext2, index)}% - ${subtractWidth}px)`;
 };
-const maybeApplyForTablet = function maybeApplyForTablet2(props, state, prop) {
+const maybeApplyForTablet = function maybeApplyForTablet2(props, state, builderContext2, prop) {
   const _stackColumnsAt = props.stackColumnsAt || "tablet";
   return _stackColumnsAt === "tablet" ? prop : "inherit";
 };
-const columnsCssVars = function columnsCssVars2(props, state) {
+const columnsCssVars = function columnsCssVars2(props, state, builderContext2) {
   const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
   return {
     "--flex-dir": flexDir,
-    "--flex-dir-tablet": maybeApplyForTablet(props, state, flexDir)
+    "--flex-dir-tablet": maybeApplyForTablet(props, state, builderContext2, flexDir)
   };
 };
-const columnCssVars = function columnCssVars2(props, state) {
+const columnCssVars = function columnCssVars2(props, state, builderContext2) {
   const width = "100%";
   const marginLeft = "0";
   return {
     "--column-width": width,
     "--column-margin-left": marginLeft,
-    "--column-width-tablet": maybeApplyForTablet(props, state, width),
-    "--column-margin-left-tablet": maybeApplyForTablet(props, state, marginLeft)
+    "--column-width-tablet": maybeApplyForTablet(props, state, builderContext2, width),
+    "--column-margin-left-tablet": maybeApplyForTablet(props, state, builderContext2, marginLeft)
   };
 };
-const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
-  const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
+const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, builderContext2, size) {
+  const breakpointSizes = getSizesForBreakpoints(builderContext2.content?.meta?.breakpoints || {});
   return breakpointSizes[size].max;
 };
-const columnStyleObjects = function columnStyleObjects2(props, state) {
+const columnStyleObjects = function columnStyleObjects2(props, state, builderContext2) {
   return {
     columns: {
       small: {
@@ -844,9 +843,9 @@ const columnStyleObjects = function columnStyleObjects2(props, state) {
     }
   };
 };
-const columnsStyles = function columnsStyles2(props, state) {
+const columnsStyles = function columnsStyles2(props, state, builderContext2) {
   return `
-        @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
+        @media (max-width: ${getWidthForBreakpointSize(props, state, builderContext2, "medium")}px) {
           .${props.builderBlock.id}-breakpoints {
             ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
           }
@@ -856,7 +855,7 @@ const columnsStyles = function columnsStyles2(props, state) {
           }
         }
 
-        @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
+        @media (max-width: ${getWidthForBreakpointSize(props, state, builderContext2, "small")}px) {
           .${props.builderBlock.id}-breakpoints {
             ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
           }
@@ -869,25 +868,26 @@ const columnsStyles = function columnsStyles2(props, state) {
 };
 const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   useStylesScopedQrl(inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
+  const builderContext$1 = useContext(builderContext);
   const state = {};
   return /* @__PURE__ */ jsxs("div", {
     class: `builder-columns ${props.builderBlock.id}-breakpoints div-Columns`,
     style: {
       ...{},
-      ...columnsCssVars(props, state)
+      ...columnsCssVars(props, state, builderContext$1)
     },
     children: [
       /* @__PURE__ */ jsx(RenderInlinedStyles, {
-        styles: columnsStyles(props, state)
+        styles: columnsStyles(props, state, builderContext$1)
       }, "c0_0"),
       (props.columns || []).map(function(column, index) {
         return /* @__PURE__ */ jsx("div", {
           class: "builder-column div-Columns-2",
           style: {
-            width: getColumnCssWidth(props, state, index),
+            width: getColumnCssWidth(props, state, builderContext$1, index),
             marginLeft: `${index === 0 ? 0 : getGutterSize(props)}px`,
             ...{},
-            ...columnCssVars(props, state)
+            ...columnCssVars(props, state, builderContext$1)
           },
           children: /* @__PURE__ */ jsx(RenderBlocks, {
             get blocks() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Builder.io Qwik SDK",
   "type": "module",
   "main": "./lib/index.qwik.cjs",

package/types/blocks/columns/columns.d.ts

@@ -1,6 +1,5 @@
 import type { BuilderBlock } from "../../types/builder-block";
 import type { SizeName } from "../../constants/device-sizes";
-import type { Breakpoints } from "../../types/builder-content";
 declare type Column = {
     blocks: any;
     width?: number;
@@ -12,25 +11,24 @@ export interface ColumnProps {
     space?: number;
     stackColumnsAt?: StackColumnsAt;
     reverseColumnsWhenStacked?: boolean;
-    customBreakpoints?: Breakpoints;
 }
-export declare const getGutterSize: (props: any, state: any) => any;
-export declare const getColumns: (props: any, state: any) => any;
-export declare const getWidth: (props: any, state: any, index: number) => any;
-export declare const getColumnCssWidth: (props: any, state: any, index: number) => string;
-export declare const maybeApplyForTablet: (props: any, state: any, prop: string | undefined) => string | undefined;
-export declare const columnsCssVars: (props: any, state: any) => {
+export declare const getGutterSize: (props: any, state: any, builderContext: any) => any;
+export declare const getColumns: (props: any, state: any, builderContext: any) => any;
+export declare const getWidth: (props: any, state: any, builderContext: any, index: number) => any;
+export declare const getColumnCssWidth: (props: any, state: any, builderContext: any, index: number) => string;
+export declare const maybeApplyForTablet: (props: any, state: any, builderContext: any, prop: string | undefined) => string | undefined;
+export declare const columnsCssVars: (props: any, state: any, builderContext: any) => {
     "--flex-dir": string;
     "--flex-dir-tablet": string | undefined;
 };
-export declare const columnCssVars: (props: any, state: any) => {
+export declare const columnCssVars: (props: any, state: any, builderContext: any) => {
     "--column-width": string;
     "--column-margin-left": string;
     "--column-width-tablet": string | undefined;
     "--column-margin-left-tablet": string | undefined;
 };
-export declare const getWidthForBreakpointSize: (props: any, state: any, size: SizeName) => number;
-export declare const columnStyleObjects: (props: any, state: any) => {
+export declare const getWidthForBreakpointSize: (props: any, state: any, builderContext: any, size: SizeName) => number;
+export declare const columnStyleObjects: (props: any, state: any, builderContext: any) => {
     columns: {
         small: {
             flexDirection: string;
@@ -52,12 +50,12 @@ export declare const columnStyleObjects: (props: any, state: any) => {
         };
     };
 };
-export declare const columnsStyles: (props: any, state: any) => string;
-export declare const reactNativeColumnsStyles: (props: any, state: any) => {
+export declare const columnsStyles: (props: any, state: any, builderContext: any) => string;
+export declare const reactNativeColumnsStyles: (props: any, state: any, builderContext: any) => {
     flexDirection: string;
     alignItems: string;
 };
-export declare const reactNativeColumnStyles: (props: any, state: any) => {
+export declare const reactNativeColumnStyles: (props: any, state: any, builderContext: any) => {
     width: string;
     marginLeft: string;
 };

package/types/components/render-block/render-component.d.ts

@@ -1,9 +1,7 @@
 import type { BuilderBlock } from "../../types/builder-block.js";
 import type { BuilderContextInterface } from "../../context/types.js";
-import type { Breakpoints } from "../../types/builder-content.js";
 declare type ComponentOptions = {
     [index: string]: any;
-    customBreakpoints?: Breakpoints;
     attributes?: {
         [index: string]: any;
     };
@@ -13,7 +11,6 @@ export interface RenderComponentProps {
     componentOptions: ComponentOptions;
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
-    customBreakpoints?: Breakpoints;
 }
 export declare const RenderComponent: (props: RenderComponentProps & {
     key?: any;