@builder.io/sdk-qwik 0.16.6 → 0.16.9

package/lib/browser/blocks/columns/columns.qwik.mjs

@@ -0,0 +1,208 @@
+import { componentQrl, inlinedQrl, _jsxBranch, useStore, useStylesScopedQrl, _jsxQ, _jsxC, _IMMUTABLE, _fnSignal } from "@builder.io/qwik";
+import { Blocks } from "../../components/blocks/blocks.qwik.mjs";
+import { DynamicRenderer } from "../../components/dynamic-renderer/dynamic-renderer.qwik.mjs";
+import { InlinedStyles } from "../../components/inlined-styles.qwik.mjs";
+import { getSizesForBreakpoints } from "../../constants/device-sizes.qwik.mjs";
+import { deoptSignal } from "../../functions/deopt.qwik.mjs";
+import { getClassPropName } from "../../functions/get-class-prop-name.qwik.mjs";
+import { mapStyleObjToStrIfNeeded } from "../../functions/get-style.qwik.mjs";
+import { getColumnsClass } from "./helpers.qwik.mjs";
+const getTagName = function getTagName2(props, state, column) {
+  return column.link ? props.builderLinkComponent || "a" : "div";
+};
+const getWidth = function getWidth2(props, state, index) {
+  var _a;
+  return ((_a = state.cols[index]) == null ? void 0 : _a.width) || 100 / state.cols.length;
+};
+const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
+  const width = getWidth(props, state, index);
+  const subtractWidth = state.gutterSize * (state.cols.length - 1) * (width / 100);
+  return `calc(${width}% - ${subtractWidth}px)`;
+};
+const getTabletStyle = function getTabletStyle2(props, state, { stackedStyle, desktopStyle }) {
+  return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
+};
+const getMobileStyle = function getMobileStyle2(props, state, { stackedStyle, desktopStyle }) {
+  return state.stackAt === "never" ? desktopStyle : stackedStyle;
+};
+const columnsCssVars = function columnsCssVars2(props, state) {
+  return {
+    "--flex-dir": state.flexDir,
+    "--flex-dir-tablet": getTabletStyle(props, state, {
+      stackedStyle: state.flexDir,
+      desktopStyle: "row"
+    })
+  };
+};
+const columnCssVars = function columnCssVars2(props, state, index) {
+  const gutter = index === 0 ? 0 : state.gutterSize;
+  const width = getColumnCssWidth(props, state, index);
+  const gutterPixels = `${gutter}px`;
+  const mobileWidth = "100%";
+  const mobileMarginLeft = 0;
+  const marginLeftKey = "margin-left";
+  const sharedStyles = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch"
+  };
+  return {
+    ...sharedStyles,
+    width,
+    [marginLeftKey]: gutterPixels,
+    "--column-width-mobile": getMobileStyle(props, state, {
+      stackedStyle: mobileWidth,
+      desktopStyle: width
+    }),
+    "--column-margin-left-mobile": getMobileStyle(props, state, {
+      stackedStyle: mobileMarginLeft,
+      desktopStyle: gutterPixels
+    }),
+    "--column-width-tablet": getTabletStyle(props, state, {
+      stackedStyle: mobileWidth,
+      desktopStyle: width
+    }),
+    "--column-margin-left-tablet": getTabletStyle(props, state, {
+      stackedStyle: mobileMarginLeft,
+      desktopStyle: gutterPixels
+    })
+  };
+};
+const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
+  var _a, _b;
+  const breakpointSizes = getSizesForBreakpoints(((_b = (_a = props.builderContext.content) == null ? void 0 : _a.meta) == null ? void 0 : _b.breakpoints) || {});
+  return breakpointSizes[size].max;
+};
+const columnsStyles = function columnsStyles2(props, state) {
+  const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
+  return `
+        @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
+
+          ${childColumnDiv} {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
+        }
+
+        @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
+
+          ${childColumnDiv} {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
+};
+const getAttributes = function getAttributes2(props, state, column, index) {
+  return {
+    ...column.link ? {
+      href: column.link
+    } : {},
+    [getClassPropName()]: "builder-column",
+    style: mapStyleObjToStrIfNeeded(columnCssVars(props, state, index))
+  };
+};
+const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  var _a;
+  _jsxBranch();
+  const state = useStore({
+    cols: props.columns || [],
+    flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
+    gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
+    stackAt: props.stackColumnsAt || "tablet"
+  });
+  useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
+  return /* @__PURE__ */ _jsxQ("div", {
+    class: getColumnsClass((_a = props.builderBlock) == null ? void 0 : _a.id) + " div-Columns",
+    style: columnsCssVars(props, state)
+  }, null, [
+    /* @__PURE__ */ _jsxC(InlinedStyles, {
+      id: "builderio-columns",
+      styles: columnsStyles(props, state),
+      get nonce() {
+        return props.builderContext.nonce;
+      },
+      [_IMMUTABLE]: {
+        id: _IMMUTABLE,
+        nonce: _fnSignal((p0) => p0.builderContext.nonce, [
+          props
+        ], "p0.builderContext.nonce")
+      }
+    }, 3, "c0_0"),
+    (props.columns || []).map((column, index) => {
+      return /* @__PURE__ */ _jsxC(DynamicRenderer, {
+        TagName: getTagName(props, state, column),
+        actionAttributes: {},
+        attributes: getAttributes(props, state, column, index),
+        children: /* @__PURE__ */ _jsxC(Blocks, {
+          path: `component.options.columns.${index}.blocks`,
+          get parent() {
+            return props.builderBlock.id;
+          },
+          get styleProp() {
+            return {
+              flexGrow: "1"
+            };
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          blocks: deoptSignal(column.blocks),
+          [_IMMUTABLE]: {
+            context: _fnSignal((p0) => p0.builderContext, [
+              props
+            ], "p0.builderContext"),
+            linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
+              props
+            ], "p0.builderLinkComponent"),
+            parent: _fnSignal((p0) => p0.builderBlock.id, [
+              props
+            ], "p0.builderBlock.id"),
+            registeredComponents: _fnSignal((p0) => p0.builderComponents, [
+              props
+            ], "p0.builderComponents"),
+            styleProp: _IMMUTABLE
+          }
+        }, 3, "c0_1"),
+        [_IMMUTABLE]: {
+          actionAttributes: _IMMUTABLE
+        }
+      }, 1, index);
+    })
+  ], 1, "c0_2");
+}, "Columns_component_7yLj4bxdI6c"));
+const STYLES = `
+.div-Columns {
+  display: flex;
+  line-height: normal;
+}
+`;
+export {
+  Columns,
+  STYLES,
+  columnCssVars,
+  columnsCssVars,
+  columnsStyles,
+  Columns as default,
+  getAttributes,
+  getColumnCssWidth,
+  getMobileStyle,
+  getTabletStyle,
+  getTagName,
+  getWidth,
+  getWidthForBreakpointSize
+};

package/lib/browser/blocks/columns/component-info.qwik.cjs

@@ -0,0 +1,251 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const componentInfo = {
+  // TODO: ways to statically preprocess JSON for references, functions, etc
+  name: "Columns",
+  isRSC: true,
+  inputs: [
+    {
+      name: "columns",
+      type: "array",
+      broadcast: true,
+      subFields: [
+        {
+          name: "blocks",
+          type: "array",
+          hideFromUI: true,
+          defaultValue: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        },
+        {
+          name: "width",
+          type: "number",
+          hideFromUI: true,
+          helperText: "Width %, e.g. set to 50 to fill half of the space"
+        },
+        {
+          name: "link",
+          type: "url",
+          helperText: "Optionally set a url that clicking this column will link to"
+        }
+      ],
+      defaultValue: [
+        {
+          blocks: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        },
+        {
+          blocks: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      onChange: (options) => {
+        function clearWidths() {
+          columns.forEach((col) => {
+            col.delete("width");
+          });
+        }
+        const columns = options.get("columns");
+        if (Array.isArray(columns)) {
+          const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
+          if (containsColumnWithWidth) {
+            const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
+            if (containsColumnWithoutWidth)
+              clearWidths();
+            else {
+              const sumWidths = columns.reduce((memo, col) => {
+                return memo + col.get("width");
+              }, 0);
+              const widthsDontAddUp = sumWidths !== 100;
+              if (widthsDontAddUp)
+                clearWidths();
+            }
+          }
+        }
+      }
+    },
+    {
+      name: "space",
+      type: "number",
+      defaultValue: 20,
+      helperText: "Size of gap between columns",
+      advanced: true
+    },
+    {
+      name: "stackColumnsAt",
+      type: "string",
+      defaultValue: "tablet",
+      helperText: "Convert horizontal columns to vertical at what device size",
+      enum: [
+        "tablet",
+        "mobile",
+        "never"
+      ],
+      advanced: true
+    },
+    {
+      name: "reverseColumnsWhenStacked",
+      type: "boolean",
+      defaultValue: false,
+      helperText: "When stacking columns for mobile devices, reverse the ordering",
+      advanced: true
+    }
+  ],
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+    builderContext: true,
+    builderComponents: true,
+    builderLinkComponent: true
+  }
+};
+exports.componentInfo = componentInfo;

package/lib/browser/blocks/columns/component-info.qwik.mjs

@@ -0,0 +1,251 @@
+const componentInfo = {
+  // TODO: ways to statically preprocess JSON for references, functions, etc
+  name: "Columns",
+  isRSC: true,
+  inputs: [
+    {
+      name: "columns",
+      type: "array",
+      broadcast: true,
+      subFields: [
+        {
+          name: "blocks",
+          type: "array",
+          hideFromUI: true,
+          defaultValue: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        },
+        {
+          name: "width",
+          type: "number",
+          hideFromUI: true,
+          helperText: "Width %, e.g. set to 50 to fill half of the space"
+        },
+        {
+          name: "link",
+          type: "url",
+          helperText: "Optionally set a url that clicking this column will link to"
+        }
+      ],
+      defaultValue: [
+        {
+          blocks: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        },
+        {
+          blocks: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      onChange: (options) => {
+        function clearWidths() {
+          columns.forEach((col) => {
+            col.delete("width");
+          });
+        }
+        const columns = options.get("columns");
+        if (Array.isArray(columns)) {
+          const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
+          if (containsColumnWithWidth) {
+            const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
+            if (containsColumnWithoutWidth)
+              clearWidths();
+            else {
+              const sumWidths = columns.reduce((memo, col) => {
+                return memo + col.get("width");
+              }, 0);
+              const widthsDontAddUp = sumWidths !== 100;
+              if (widthsDontAddUp)
+                clearWidths();
+            }
+          }
+        }
+      }
+    },
+    {
+      name: "space",
+      type: "number",
+      defaultValue: 20,
+      helperText: "Size of gap between columns",
+      advanced: true
+    },
+    {
+      name: "stackColumnsAt",
+      type: "string",
+      defaultValue: "tablet",
+      helperText: "Convert horizontal columns to vertical at what device size",
+      enum: [
+        "tablet",
+        "mobile",
+        "never"
+      ],
+      advanced: true
+    },
+    {
+      name: "reverseColumnsWhenStacked",
+      type: "boolean",
+      defaultValue: false,
+      helperText: "When stacking columns for mobile devices, reverse the ordering",
+      advanced: true
+    }
+  ],
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+    builderContext: true,
+    builderComponents: true,
+    builderLinkComponent: true
+  }
+};
+export {
+  componentInfo
+};