@builder.io/sdk-qwik 0.1.6 → 0.1.8

package/lib/index.qwik.cjs

@@ -324,6 +324,13 @@ const useBlock$1 = function useBlock2(props, state) {
     shouldEvaluateBindings: true
   });
 };
+const canShowBlock$1 = function canShowBlock2(props, state) {
+  if (checkIsDefined(useBlock$1(props).hide))
+    return !useBlock$1(props).hide;
+  if (checkIsDefined(useBlock$1(props).show))
+    return useBlock$1(props).show;
+  return true;
+};
 const css = function css2(props, state) {
   const styles = useBlock$1(props).responsiveStyles;
   const content = props.context.content;
@@ -354,7 +361,7 @@ const css = function css2(props, state) {
 };
 const BlockStyles = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: css(props) ? /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles, {
+    children: css(props) && canShowBlock$1(props) ? /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles, {
       styles: css(props)
     }, "LQ_0") : null,
     [qwik._IMMUTABLE]: {
@@ -572,6 +579,13 @@ const useBlock = function useBlock22(props, state) {
     shouldEvaluateBindings: true
   });
 };
+const canShowBlock = function canShowBlock22(props, state) {
+  if (checkIsDefined(useBlock(props).hide))
+    return !useBlock(props).hide;
+  if (checkIsDefined(useBlock(props).show))
+    return useBlock(props).show;
+  return true;
+};
 const proxyState = function proxyState2(props, state) {
   if (typeof Proxy === "undefined") {
     console.error("no Proxy available in this environment, cannot proxy state.");
@@ -611,8 +625,7 @@ const renderComponentProps = function renderComponentProps2(props, state) {
           ...attributes(props),
           ...actions(props)
         }
-      },
-      customBreakpoints: childrenContext(props)?.content?.meta?.breakpoints
+      }
     },
     context: childrenContext(props)
   };
@@ -645,7 +658,7 @@ const RenderBlock = (props) => {
   const state = {};
   state.tag = tag(props);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: !component(props)?.noWrap ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: canShowBlock(props) ? !component(props)?.noWrap ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [
         isEmptyHtmlElement(tag(props)) ? /* @__PURE__ */ jsxRuntime.jsx(state.tag, {
           ...attributes(props),
@@ -692,7 +705,7 @@ const RenderBlock = (props) => {
       }
     }, "9d_1") : /* @__PURE__ */ jsxRuntime.jsx(RenderComponent, {
       ...renderComponentProps(props)
-    }, "9d_2"),
+    }, "9d_2") : null,
     [qwik._IMMUTABLE]: {
       children: false
     }
@@ -781,48 +794,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 +859,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 +871,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 +884,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

@@ -322,6 +322,13 @@ const useBlock$1 = function useBlock2(props, state) {
     shouldEvaluateBindings: true
   });
 };
+const canShowBlock$1 = function canShowBlock2(props, state) {
+  if (checkIsDefined(useBlock$1(props).hide))
+    return !useBlock$1(props).hide;
+  if (checkIsDefined(useBlock$1(props).show))
+    return useBlock$1(props).show;
+  return true;
+};
 const css = function css2(props, state) {
   const styles = useBlock$1(props).responsiveStyles;
   const content = props.context.content;
@@ -352,7 +359,7 @@ const css = function css2(props, state) {
 };
 const BlockStyles = (props) => {
   return /* @__PURE__ */ jsx(Fragment, {
-    children: css(props) ? /* @__PURE__ */ jsx(RenderInlinedStyles, {
+    children: css(props) && canShowBlock$1(props) ? /* @__PURE__ */ jsx(RenderInlinedStyles, {
       styles: css(props)
     }, "LQ_0") : null,
     [_IMMUTABLE]: {
@@ -570,6 +577,13 @@ const useBlock = function useBlock22(props, state) {
     shouldEvaluateBindings: true
   });
 };
+const canShowBlock = function canShowBlock22(props, state) {
+  if (checkIsDefined(useBlock(props).hide))
+    return !useBlock(props).hide;
+  if (checkIsDefined(useBlock(props).show))
+    return useBlock(props).show;
+  return true;
+};
 const proxyState = function proxyState2(props, state) {
   if (typeof Proxy === "undefined") {
     console.error("no Proxy available in this environment, cannot proxy state.");
@@ -609,8 +623,7 @@ const renderComponentProps = function renderComponentProps2(props, state) {
           ...attributes(props),
           ...actions(props)
         }
-      },
-      customBreakpoints: childrenContext(props)?.content?.meta?.breakpoints
+      }
     },
     context: childrenContext(props)
   };
@@ -643,7 +656,7 @@ const RenderBlock = (props) => {
   const state = {};
   state.tag = tag(props);
   return /* @__PURE__ */ jsx(Fragment, {
-    children: !component(props)?.noWrap ? /* @__PURE__ */ jsxs(Fragment, {
+    children: canShowBlock(props) ? !component(props)?.noWrap ? /* @__PURE__ */ jsxs(Fragment, {
       children: [
         isEmptyHtmlElement(tag(props)) ? /* @__PURE__ */ jsx(state.tag, {
           ...attributes(props),
@@ -690,7 +703,7 @@ const RenderBlock = (props) => {
       }
     }, "9d_1") : /* @__PURE__ */ jsx(RenderComponent, {
       ...renderComponentProps(props)
-    }, "9d_2"),
+    }, "9d_2") : null,
     [_IMMUTABLE]: {
       children: false
     }
@@ -779,48 +792,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 +857,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 +869,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 +882,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.8",
   "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/block-styles.d.ts

@@ -5,6 +5,7 @@ export declare type BlockStylesProps = {
     context: BuilderContextInterface;
 };
 export declare const useBlock: (props: any, state: any) => BuilderBlock;
+export declare const canShowBlock: (props: any, state: any) => boolean | undefined;
 export declare const css: (props: any, state: any) => string;
 export declare const BlockStyles: (props: BlockStylesProps & {
     key?: any;

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

@@ -7,6 +7,7 @@ export declare type RenderBlockProps = {
 export declare const component: (props: any, state: any) => import("../../context/types.js").RegisteredComponent | null | undefined;
 export declare const tag: (props: any, state: any) => string;
 export declare const useBlock: (props: any, state: any) => any;
+export declare const canShowBlock: (props: any, state: any) => any;
 export declare const proxyState: (props: any, state: any) => any;
 export declare const actions: (props: any, state: any) => {
     [index: string]: (event: Event) => any;

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;

package/types/types/builder-block.d.ts

@@ -54,5 +54,13 @@ export interface BuilderBlock {
     } | null;
     animations?: any[];
     style?: Partial<CSSStyleDeclaration>;
+    /**
+     * generated by the "Hide If" binding
+     */
+    hide?: boolean;
+    /**
+     * generated by the "Show If" binding
+     */
+    show?: boolean;
 }
 export {};