@builder.io/sdk-qwik 0.16.19 → 0.16.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/lib/browser/blocks/columns/columns.qwik.cjs +44 -37
  2. package/lib/browser/blocks/columns/columns.qwik.mjs +45 -38
  3. package/lib/browser/constants/sdk-version.qwik.cjs +1 -1
  4. package/lib/browser/constants/sdk-version.qwik.mjs +1 -1
  5. package/lib/edge/blocks/columns/columns.qwik.cjs +44 -37
  6. package/lib/edge/blocks/columns/columns.qwik.mjs +45 -38
  7. package/lib/edge/constants/sdk-version.qwik.cjs +1 -1
  8. package/lib/edge/constants/sdk-version.qwik.mjs +1 -1
  9. package/lib/node/blocks/columns/columns.qwik.cjs +44 -37
  10. package/lib/node/blocks/columns/columns.qwik.mjs +45 -38
  11. package/lib/node/constants/sdk-version.qwik.cjs +1 -1
  12. package/lib/node/constants/sdk-version.qwik.mjs +1 -1
  13. package/lib/node/functions/evaluate/node-runtime/node-runtime.qwik.cjs +5 -4
  14. package/lib/node/functions/evaluate/node-runtime/node-runtime.qwik.mjs +5 -4
  15. package/package.json +1 -1
  16. package/types/src/blocks/columns/columns.d.ts +10 -10
  17. package/types/src/constants/sdk-version.d.ts +1 -1
  18. package/types/src/functions/evaluate/node-runtime/setIvm.d.ts +1 -0
package/lib/browser/blocks/columns/columns.qwik.cjs CHANGED
@@ -10,36 +10,36 @@ const getClassPropName = require("../../functions/get-class-prop-name.qwik.cjs")
10
10
  const getStyle = require("../../functions/get-style.qwik.cjs");
11
11
  const helpers = require("./helpers.qwik.cjs");
12
12
  const qwik = require("@builder.io/qwik");
13
- const getTagName = function getTagName2(props, state, column) {
13
+ const getTagName = function getTagName2(props, state, gutterSize, cols, stackAt, flexDir, column) {
14
14
  return column.link ? props.builderLinkComponent || "a" : "div";
15
15
  };
16
- const getWidth = function getWidth2(props, state, index) {
16
+ const getWidth = function getWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
17
17
  var _a;
18
- return ((_a = state.cols[index]) == null ? void 0 : _a.width) || 100 / state.cols.length;
18
+ return ((_a = cols.value[index]) == null ? void 0 : _a.width) || 100 / cols.value.length;
19
19
  };
20
- const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
21
- const width = getWidth(props, state, index);
22
- const subtractWidth = state.gutterSize * (state.cols.length - 1) * (width / 100);
20
+ const getColumnCssWidth = function getColumnCssWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
21
+ const width = getWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
22
+ const subtractWidth = gutterSize.value * (cols.value.length - 1) * (width / 100);
23
23
  return `calc(${width}% - ${subtractWidth}px)`;
24
24
  };
25
- const getTabletStyle = function getTabletStyle2(props, state, { stackedStyle, desktopStyle }) {
26
- return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
25
+ const getTabletStyle = function getTabletStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
26
+ return stackAt.value === "tablet" ? stackedStyle : desktopStyle;
27
27
  };
28
- const getMobileStyle = function getMobileStyle2(props, state, { stackedStyle, desktopStyle }) {
29
- return state.stackAt === "never" ? desktopStyle : stackedStyle;
28
+ const getMobileStyle = function getMobileStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
29
+ return stackAt.value === "never" ? desktopStyle : stackedStyle;
30
30
  };
31
- const columnsCssVars = function columnsCssVars2(props, state) {
31
+ const columnsCssVars = function columnsCssVars2(props, state, gutterSize, cols, stackAt, flexDir) {
32
32
  return {
33
- "--flex-dir": state.flexDir,
34
- "--flex-dir-tablet": getTabletStyle(props, state, {
35
- stackedStyle: state.flexDir,
33
+ "--flex-dir": flexDir.value,
34
+ "--flex-dir-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
35
+ stackedStyle: flexDir.value,
36
36
  desktopStyle: "row"
37
37
  })
38
38
  };
39
39
  };
40
- const columnCssVars = function columnCssVars2(props, state, index) {
41
- const gutter = index === 0 ? 0 : state.gutterSize;
42
- const width = getColumnCssWidth(props, state, index);
40
+ const columnCssVars = function columnCssVars2(props, state, gutterSize, cols, stackAt, flexDir, index) {
41
+ const gutter = index === 0 ? 0 : gutterSize.value;
42
+ const width = getColumnCssWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
43
43
  const gutterPixels = `${gutter}px`;
44
44
  const mobileWidth = "100%";
45
45
  const mobileMarginLeft = 0;
@@ -53,33 +53,33 @@ const columnCssVars = function columnCssVars2(props, state, index) {
53
53
  ...sharedStyles,
54
54
  width,
55
55
  [marginLeftKey]: gutterPixels,
56
- "--column-width-mobile": getMobileStyle(props, state, {
56
+ "--column-width-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
57
57
  stackedStyle: mobileWidth,
58
58
  desktopStyle: width
59
59
  }),
60
- "--column-margin-left-mobile": getMobileStyle(props, state, {
60
+ "--column-margin-left-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
61
61
  stackedStyle: mobileMarginLeft,
62
62
  desktopStyle: gutterPixels
63
63
  }),
64
- "--column-width-tablet": getTabletStyle(props, state, {
64
+ "--column-width-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
65
65
  stackedStyle: mobileWidth,
66
66
  desktopStyle: width
67
67
  }),
68
- "--column-margin-left-tablet": getTabletStyle(props, state, {
68
+ "--column-margin-left-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
69
69
  stackedStyle: mobileMarginLeft,
70
70
  desktopStyle: gutterPixels
71
71
  })
72
72
  };
73
73
  };
74
- const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
74
+ const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, gutterSize, cols, stackAt, flexDir, size) {
75
75
  var _a, _b;
76
76
  const breakpointSizes = deviceSizes.getSizesForBreakpoints(((_b = (_a = props.builderContext.content) == null ? void 0 : _a.meta) == null ? void 0 : _b.breakpoints) || {});
77
77
  return breakpointSizes[size].max;
78
78
  };
79
- const columnsStyles = function columnsStyles2(props, state) {
79
+ const columnsStyles = function columnsStyles2(props, state, gutterSize, cols, stackAt, flexDir) {
80
80
  const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
81
81
  return `
82
- @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
82
+ @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "medium")}px) {
83
83
  .${props.builderBlock.id}-breakpoints {
84
84
  flex-direction: var(--flex-dir-tablet);
85
85
  align-items: stretch;
@@ -91,7 +91,7 @@ const columnsStyles = function columnsStyles2(props, state) {
91
91
  }
92
92
  }
93
93
 
94
- @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
94
+ @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "small")}px) {
95
95
  .${props.builderBlock.id}-breakpoints {
96
96
  flex-direction: var(--flex-dir);
97
97
  align-items: stretch;
@@ -104,39 +104,46 @@ const columnsStyles = function columnsStyles2(props, state) {
104
104
  },
105
105
  `;
106
106
  };
107
- const getAttributes = function getAttributes2(props, state, column, index) {
107
+ const getAttributes = function getAttributes2(props, state, gutterSize, cols, stackAt, flexDir, column, index) {
108
108
  return {
109
109
  ...{},
110
110
  ...column.link ? {
111
111
  href: column.link
112
112
  } : {},
113
113
  [getClassPropName.getClassPropName()]: "builder-column",
114
- style: getStyle.mapStyleObjToStrIfNeeded(columnCssVars(props, state, index))
114
+ style: getStyle.mapStyleObjToStrIfNeeded(columnCssVars(props, state, gutterSize, cols, stackAt, flexDir, index))
115
115
  };
116
116
  };
117
117
  const Columns = qwik.component$((props) => {
118
118
  var _a;
119
- const state = qwik.useStore({
120
- cols: props.columns || [],
121
- flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
122
- gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
123
- stackAt: props.stackColumnsAt || "tablet"
124
- });
119
+ const state = {};
125
120
  qwik.useStylesScoped$(STYLES);
121
+ const gutterSize = qwik.useComputed$(() => {
122
+ return typeof props.space === "number" ? props.space || 0 : 20;
123
+ });
124
+ const cols = qwik.useComputed$(() => {
125
+ return props.columns || [];
126
+ });
127
+ const stackAt = qwik.useComputed$(() => {
128
+ return props.stackColumnsAt || "tablet";
129
+ });
130
+ const flexDir = qwik.useComputed$(() => {
131
+ return props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
132
+ });
126
133
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
127
134
  class: helpers.getColumnsClass((_a = props.builderBlock) == null ? void 0 : _a.id) + " div-Columns",
128
- style: columnsCssVars(props, state),
135
+ style: columnsCssVars(props, state, gutterSize, cols, stackAt, flexDir),
129
136
  children: [
130
137
  /* @__PURE__ */ jsxRuntime.jsx(inlinedStyles.InlinedStyles, {
131
138
  id: "builderio-columns",
132
- styles: columnsStyles(props, state),
139
+ styles: columnsStyles(props, state, gutterSize, cols, stackAt, flexDir),
133
140
  nonce: props.builderContext.nonce
134
141
  }),
135
142
  (props.columns || []).map((column, index) => {
136
143
  return /* @__PURE__ */ jsxRuntime.jsx(dynamicRenderer.DynamicRenderer, {
137
- TagName: getTagName(props, state, column),
144
+ TagName: getTagName(props, state, gutterSize, cols, stackAt, flexDir, column),
138
145
  actionAttributes: {},
139
- attributes: getAttributes(props, state, column, index),
146
+ attributes: getAttributes(props, state, gutterSize, cols, stackAt, flexDir, column, index),
140
147
  children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Blocks, {
141
148
  path: `component.options.columns.${index}.blocks`,
142
149
  parent: props.builderBlock.id,
package/lib/browser/blocks/columns/columns.qwik.mjs CHANGED
@@ -7,37 +7,37 @@ import { deoptSignal } from "../../functions/deopt.qwik.mjs";
7
7
  import { getClassPropName } from "../../functions/get-class-prop-name.qwik.mjs";
8
8
  import { mapStyleObjToStrIfNeeded } from "../../functions/get-style.qwik.mjs";
9
9
  import { getColumnsClass } from "./helpers.qwik.mjs";
10
- import { component$, useStore, useStylesScoped$ } from "@builder.io/qwik";
11
- const getTagName = function getTagName2(props, state, column) {
10
+ import { component$, useStylesScoped$, useComputed$ } from "@builder.io/qwik";
11
+ const getTagName = function getTagName2(props, state, gutterSize, cols, stackAt, flexDir, column) {
12
12
  return column.link ? props.builderLinkComponent || "a" : "div";
13
13
  };
14
- const getWidth = function getWidth2(props, state, index) {
14
+ const getWidth = function getWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
15
15
  var _a;
16
- return ((_a = state.cols[index]) == null ? void 0 : _a.width) || 100 / state.cols.length;
16
+ return ((_a = cols.value[index]) == null ? void 0 : _a.width) || 100 / cols.value.length;
17
17
  };
18
- const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
19
- const width = getWidth(props, state, index);
20
- const subtractWidth = state.gutterSize * (state.cols.length - 1) * (width / 100);
18
+ const getColumnCssWidth = function getColumnCssWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
19
+ const width = getWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
20
+ const subtractWidth = gutterSize.value * (cols.value.length - 1) * (width / 100);
21
21
  return `calc(${width}% - ${subtractWidth}px)`;
22
22
  };
23
- const getTabletStyle = function getTabletStyle2(props, state, { stackedStyle, desktopStyle }) {
24
- return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
23
+ const getTabletStyle = function getTabletStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
24
+ return stackAt.value === "tablet" ? stackedStyle : desktopStyle;
25
25
  };
26
- const getMobileStyle = function getMobileStyle2(props, state, { stackedStyle, desktopStyle }) {
27
- return state.stackAt === "never" ? desktopStyle : stackedStyle;
26
+ const getMobileStyle = function getMobileStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
27
+ return stackAt.value === "never" ? desktopStyle : stackedStyle;
28
28
  };
29
- const columnsCssVars = function columnsCssVars2(props, state) {
29
+ const columnsCssVars = function columnsCssVars2(props, state, gutterSize, cols, stackAt, flexDir) {
30
30
  return {
31
- "--flex-dir": state.flexDir,
32
- "--flex-dir-tablet": getTabletStyle(props, state, {
33
- stackedStyle: state.flexDir,
31
+ "--flex-dir": flexDir.value,
32
+ "--flex-dir-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
33
+ stackedStyle: flexDir.value,
34
34
  desktopStyle: "row"
35
35
  })
36
36
  };
37
37
  };
38
- const columnCssVars = function columnCssVars2(props, state, index) {
39
- const gutter = index === 0 ? 0 : state.gutterSize;
40
- const width = getColumnCssWidth(props, state, index);
38
+ const columnCssVars = function columnCssVars2(props, state, gutterSize, cols, stackAt, flexDir, index) {
39
+ const gutter = index === 0 ? 0 : gutterSize.value;
40
+ const width = getColumnCssWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
41
41
  const gutterPixels = `${gutter}px`;
42
42
  const mobileWidth = "100%";
43
43
  const mobileMarginLeft = 0;
@@ -51,33 +51,33 @@ const columnCssVars = function columnCssVars2(props, state, index) {
51
51
  ...sharedStyles,
52
52
  width,
53
53
  [marginLeftKey]: gutterPixels,
54
- "--column-width-mobile": getMobileStyle(props, state, {
54
+ "--column-width-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
55
55
  stackedStyle: mobileWidth,
56
56
  desktopStyle: width
57
57
  }),
58
- "--column-margin-left-mobile": getMobileStyle(props, state, {
58
+ "--column-margin-left-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
59
59
  stackedStyle: mobileMarginLeft,
60
60
  desktopStyle: gutterPixels
61
61
  }),
62
- "--column-width-tablet": getTabletStyle(props, state, {
62
+ "--column-width-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
63
63
  stackedStyle: mobileWidth,
64
64
  desktopStyle: width
65
65
  }),
66
- "--column-margin-left-tablet": getTabletStyle(props, state, {
66
+ "--column-margin-left-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
67
67
  stackedStyle: mobileMarginLeft,
68
68
  desktopStyle: gutterPixels
69
69
  })
70
70
  };
71
71
  };
72
- const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
72
+ const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, gutterSize, cols, stackAt, flexDir, size) {
73
73
  var _a, _b;
74
74
  const breakpointSizes = getSizesForBreakpoints(((_b = (_a = props.builderContext.content) == null ? void 0 : _a.meta) == null ? void 0 : _b.breakpoints) || {});
75
75
  return breakpointSizes[size].max;
76
76
  };
77
- const columnsStyles = function columnsStyles2(props, state) {
77
+ const columnsStyles = function columnsStyles2(props, state, gutterSize, cols, stackAt, flexDir) {
78
78
  const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
79
79
  return `
80
- @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
80
+ @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "medium")}px) {
81
81
  .${props.builderBlock.id}-breakpoints {
82
82
  flex-direction: var(--flex-dir-tablet);
83
83
  align-items: stretch;
@@ -89,7 +89,7 @@ const columnsStyles = function columnsStyles2(props, state) {
89
89
  }
90
90
  }
91
91
 
92
- @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
92
+ @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "small")}px) {
93
93
  .${props.builderBlock.id}-breakpoints {
94
94
  flex-direction: var(--flex-dir);
95
95
  align-items: stretch;
@@ -102,39 +102,46 @@ const columnsStyles = function columnsStyles2(props, state) {
102
102
  },
103
103
  `;
104
104
  };
105
- const getAttributes = function getAttributes2(props, state, column, index) {
105
+ const getAttributes = function getAttributes2(props, state, gutterSize, cols, stackAt, flexDir, column, index) {
106
106
  return {
107
107
  ...{},
108
108
  ...column.link ? {
109
109
  href: column.link
110
110
  } : {},
111
111
  [getClassPropName()]: "builder-column",
112
- style: mapStyleObjToStrIfNeeded(columnCssVars(props, state, index))
112
+ style: mapStyleObjToStrIfNeeded(columnCssVars(props, state, gutterSize, cols, stackAt, flexDir, index))
113
113
  };
114
114
  };
115
115
  const Columns = component$((props) => {
116
116
  var _a;
117
- const state = useStore({
118
- cols: props.columns || [],
119
- flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
120
- gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
121
- stackAt: props.stackColumnsAt || "tablet"
122
- });
117
+ const state = {};
123
118
  useStylesScoped$(STYLES);
119
+ const gutterSize = useComputed$(() => {
120
+ return typeof props.space === "number" ? props.space || 0 : 20;
121
+ });
122
+ const cols = useComputed$(() => {
123
+ return props.columns || [];
124
+ });
125
+ const stackAt = useComputed$(() => {
126
+ return props.stackColumnsAt || "tablet";
127
+ });
128
+ const flexDir = useComputed$(() => {
129
+ return props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
130
+ });
124
131
  return /* @__PURE__ */ jsxs("div", {
125
132
  class: getColumnsClass((_a = props.builderBlock) == null ? void 0 : _a.id) + " div-Columns",
126
- style: columnsCssVars(props, state),
133
+ style: columnsCssVars(props, state, gutterSize, cols, stackAt, flexDir),
127
134
  children: [
128
135
  /* @__PURE__ */ jsx(InlinedStyles, {
129
136
  id: "builderio-columns",
130
- styles: columnsStyles(props, state),
137
+ styles: columnsStyles(props, state, gutterSize, cols, stackAt, flexDir),
131
138
  nonce: props.builderContext.nonce
132
139
  }),
133
140
  (props.columns || []).map((column, index) => {
134
141
  return /* @__PURE__ */ jsx(DynamicRenderer, {
135
- TagName: getTagName(props, state, column),
142
+ TagName: getTagName(props, state, gutterSize, cols, stackAt, flexDir, column),
136
143
  actionAttributes: {},
137
- attributes: getAttributes(props, state, column, index),
144
+ attributes: getAttributes(props, state, gutterSize, cols, stackAt, flexDir, column, index),
138
145
  children: /* @__PURE__ */ jsx(Blocks, {
139
146
  path: `component.options.columns.${index}.blocks`,
140
147
  parent: props.builderBlock.id,
package/lib/browser/constants/sdk-version.qwik.cjs CHANGED
@@ -1,4 +1,4 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const SDK_VERSION = "0.16.19";
3
+ const SDK_VERSION = "0.16.20";
4
4
  exports.SDK_VERSION = SDK_VERSION;
package/lib/browser/constants/sdk-version.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const SDK_VERSION = "0.16.19";
1
+ const SDK_VERSION = "0.16.20";
2
2
  export {
3
3
  SDK_VERSION
4
4
  };
package/lib/edge/blocks/columns/columns.qwik.cjs CHANGED
@@ -10,36 +10,36 @@ const getClassPropName = require("../../functions/get-class-prop-name.qwik.cjs")
10
10
  const getStyle = require("../../functions/get-style.qwik.cjs");
11
11
  const helpers = require("./helpers.qwik.cjs");
12
12
  const qwik = require("@builder.io/qwik");
13
- const getTagName = function getTagName2(props, state, column) {
13
+ const getTagName = function getTagName2(props, state, gutterSize, cols, stackAt, flexDir, column) {
14
14
  return column.link ? props.builderLinkComponent || "a" : "div";
15
15
  };
16
- const getWidth = function getWidth2(props, state, index) {
16
+ const getWidth = function getWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
17
17
  var _a;
18
- return ((_a = state.cols[index]) == null ? void 0 : _a.width) || 100 / state.cols.length;
18
+ return ((_a = cols.value[index]) == null ? void 0 : _a.width) || 100 / cols.value.length;
19
19
  };
20
- const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
21
- const width = getWidth(props, state, index);
22
- const subtractWidth = state.gutterSize * (state.cols.length - 1) * (width / 100);
20
+ const getColumnCssWidth = function getColumnCssWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
21
+ const width = getWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
22
+ const subtractWidth = gutterSize.value * (cols.value.length - 1) * (width / 100);
23
23
  return `calc(${width}% - ${subtractWidth}px)`;
24
24
  };
25
- const getTabletStyle = function getTabletStyle2(props, state, { stackedStyle, desktopStyle }) {
26
- return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
25
+ const getTabletStyle = function getTabletStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
26
+ return stackAt.value === "tablet" ? stackedStyle : desktopStyle;
27
27
  };
28
- const getMobileStyle = function getMobileStyle2(props, state, { stackedStyle, desktopStyle }) {
29
- return state.stackAt === "never" ? desktopStyle : stackedStyle;
28
+ const getMobileStyle = function getMobileStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
29
+ return stackAt.value === "never" ? desktopStyle : stackedStyle;
30
30
  };
31
- const columnsCssVars = function columnsCssVars2(props, state) {
31
+ const columnsCssVars = function columnsCssVars2(props, state, gutterSize, cols, stackAt, flexDir) {
32
32
  return {
33
- "--flex-dir": state.flexDir,
34
- "--flex-dir-tablet": getTabletStyle(props, state, {
35
- stackedStyle: state.flexDir,
33
+ "--flex-dir": flexDir.value,
34
+ "--flex-dir-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
35
+ stackedStyle: flexDir.value,
36
36
  desktopStyle: "row"
37
37
  })
38
38
  };
39
39
  };
40
- const columnCssVars = function columnCssVars2(props, state, index) {
41
- const gutter = index === 0 ? 0 : state.gutterSize;
42
- const width = getColumnCssWidth(props, state, index);
40
+ const columnCssVars = function columnCssVars2(props, state, gutterSize, cols, stackAt, flexDir, index) {
41
+ const gutter = index === 0 ? 0 : gutterSize.value;
42
+ const width = getColumnCssWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
43
43
  const gutterPixels = `${gutter}px`;
44
44
  const mobileWidth = "100%";
45
45
  const mobileMarginLeft = 0;
@@ -53,33 +53,33 @@ const columnCssVars = function columnCssVars2(props, state, index) {
53
53
  ...sharedStyles,
54
54
  width,
55
55
  [marginLeftKey]: gutterPixels,
56
- "--column-width-mobile": getMobileStyle(props, state, {
56
+ "--column-width-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
57
57
  stackedStyle: mobileWidth,
58
58
  desktopStyle: width
59
59
  }),
60
- "--column-margin-left-mobile": getMobileStyle(props, state, {
60
+ "--column-margin-left-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
61
61
  stackedStyle: mobileMarginLeft,
62
62
  desktopStyle: gutterPixels
63
63
  }),
64
- "--column-width-tablet": getTabletStyle(props, state, {
64
+ "--column-width-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
65
65
  stackedStyle: mobileWidth,
66
66
  desktopStyle: width
67
67
  }),
68
- "--column-margin-left-tablet": getTabletStyle(props, state, {
68
+ "--column-margin-left-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
69
69
  stackedStyle: mobileMarginLeft,
70
70
  desktopStyle: gutterPixels
71
71
  })
72
72
  };
73
73
  };
74
- const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
74
+ const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, gutterSize, cols, stackAt, flexDir, size) {
75
75
  var _a, _b;
76
76
  const breakpointSizes = deviceSizes.getSizesForBreakpoints(((_b = (_a = props.builderContext.content) == null ? void 0 : _a.meta) == null ? void 0 : _b.breakpoints) || {});
77
77
  return breakpointSizes[size].max;
78
78
  };
79
- const columnsStyles = function columnsStyles2(props, state) {
79
+ const columnsStyles = function columnsStyles2(props, state, gutterSize, cols, stackAt, flexDir) {
80
80
  const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
81
81
  return `
82
- @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
82
+ @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "medium")}px) {
83
83
  .${props.builderBlock.id}-breakpoints {
84
84
  flex-direction: var(--flex-dir-tablet);
85
85
  align-items: stretch;
@@ -91,7 +91,7 @@ const columnsStyles = function columnsStyles2(props, state) {
91
91
  }
92
92
  }
93
93
 
94
- @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
94
+ @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "small")}px) {
95
95
  .${props.builderBlock.id}-breakpoints {
96
96
  flex-direction: var(--flex-dir);
97
97
  align-items: stretch;
@@ -104,39 +104,46 @@ const columnsStyles = function columnsStyles2(props, state) {
104
104
  },
105
105
  `;
106
106
  };
107
- const getAttributes = function getAttributes2(props, state, column, index) {
107
+ const getAttributes = function getAttributes2(props, state, gutterSize, cols, stackAt, flexDir, column, index) {
108
108
  return {
109
109
  ...{},
110
110
  ...column.link ? {
111
111
  href: column.link
112
112
  } : {},
113
113
  [getClassPropName.getClassPropName()]: "builder-column",
114
- style: getStyle.mapStyleObjToStrIfNeeded(columnCssVars(props, state, index))
114
+ style: getStyle.mapStyleObjToStrIfNeeded(columnCssVars(props, state, gutterSize, cols, stackAt, flexDir, index))
115
115
  };
116
116
  };
117
117
  const Columns = qwik.component$((props) => {
118
118
  var _a;
119
- const state = qwik.useStore({
120
- cols: props.columns || [],
121
- flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
122
- gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
123
- stackAt: props.stackColumnsAt || "tablet"
124
- });
119
+ const state = {};
125
120
  qwik.useStylesScoped$(STYLES);
121
+ const gutterSize = qwik.useComputed$(() => {
122
+ return typeof props.space === "number" ? props.space || 0 : 20;
123
+ });
124
+ const cols = qwik.useComputed$(() => {
125
+ return props.columns || [];
126
+ });
127
+ const stackAt = qwik.useComputed$(() => {
128
+ return props.stackColumnsAt || "tablet";
129
+ });
130
+ const flexDir = qwik.useComputed$(() => {
131
+ return props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
132
+ });
126
133
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
127
134
  class: helpers.getColumnsClass((_a = props.builderBlock) == null ? void 0 : _a.id) + " div-Columns",
128
- style: columnsCssVars(props, state),
135
+ style: columnsCssVars(props, state, gutterSize, cols, stackAt, flexDir),
129
136
  children: [
130
137
  /* @__PURE__ */ jsxRuntime.jsx(inlinedStyles.InlinedStyles, {
131
138
  id: "builderio-columns",
132
- styles: columnsStyles(props, state),
139
+ styles: columnsStyles(props, state, gutterSize, cols, stackAt, flexDir),
133
140
  nonce: props.builderContext.nonce
134
141
  }),
135
142
  (props.columns || []).map((column, index) => {
136
143
  return /* @__PURE__ */ jsxRuntime.jsx(dynamicRenderer.DynamicRenderer, {
137
- TagName: getTagName(props, state, column),
144
+ TagName: getTagName(props, state, gutterSize, cols, stackAt, flexDir, column),
138
145
  actionAttributes: {},
139
- attributes: getAttributes(props, state, column, index),
146
+ attributes: getAttributes(props, state, gutterSize, cols, stackAt, flexDir, column, index),
140
147
  children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Blocks, {
141
148
  path: `component.options.columns.${index}.blocks`,
142
149
  parent: props.builderBlock.id,
package/lib/edge/blocks/columns/columns.qwik.mjs CHANGED
@@ -7,37 +7,37 @@ import { deoptSignal } from "../../functions/deopt.qwik.mjs";
7
7
  import { getClassPropName } from "../../functions/get-class-prop-name.qwik.mjs";
8
8
  import { mapStyleObjToStrIfNeeded } from "../../functions/get-style.qwik.mjs";
9
9
  import { getColumnsClass } from "./helpers.qwik.mjs";
10
- import { component$, useStore, useStylesScoped$ } from "@builder.io/qwik";
11
- const getTagName = function getTagName2(props, state, column) {
10
+ import { component$, useStylesScoped$, useComputed$ } from "@builder.io/qwik";
11
+ const getTagName = function getTagName2(props, state, gutterSize, cols, stackAt, flexDir, column) {
12
12
  return column.link ? props.builderLinkComponent || "a" : "div";
13
13
  };
14
- const getWidth = function getWidth2(props, state, index) {
14
+ const getWidth = function getWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
15
15
  var _a;
16
- return ((_a = state.cols[index]) == null ? void 0 : _a.width) || 100 / state.cols.length;
16
+ return ((_a = cols.value[index]) == null ? void 0 : _a.width) || 100 / cols.value.length;
17
17
  };
18
- const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
19
- const width = getWidth(props, state, index);
20
- const subtractWidth = state.gutterSize * (state.cols.length - 1) * (width / 100);
18
+ const getColumnCssWidth = function getColumnCssWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
19
+ const width = getWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
20
+ const subtractWidth = gutterSize.value * (cols.value.length - 1) * (width / 100);
21
21
  return `calc(${width}% - ${subtractWidth}px)`;
22
22
  };
23
- const getTabletStyle = function getTabletStyle2(props, state, { stackedStyle, desktopStyle }) {
24
- return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
23
+ const getTabletStyle = function getTabletStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
24
+ return stackAt.value === "tablet" ? stackedStyle : desktopStyle;
25
25
  };
26
- const getMobileStyle = function getMobileStyle2(props, state, { stackedStyle, desktopStyle }) {
27
- return state.stackAt === "never" ? desktopStyle : stackedStyle;
26
+ const getMobileStyle = function getMobileStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
27
+ return stackAt.value === "never" ? desktopStyle : stackedStyle;
28
28
  };
29
- const columnsCssVars = function columnsCssVars2(props, state) {
29
+ const columnsCssVars = function columnsCssVars2(props, state, gutterSize, cols, stackAt, flexDir) {
30
30
  return {
31
- "--flex-dir": state.flexDir,
32
- "--flex-dir-tablet": getTabletStyle(props, state, {
33
- stackedStyle: state.flexDir,
31
+ "--flex-dir": flexDir.value,
32
+ "--flex-dir-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
33
+ stackedStyle: flexDir.value,
34
34
  desktopStyle: "row"
35
35
  })
36
36
  };
37
37
  };
38
- const columnCssVars = function columnCssVars2(props, state, index) {
39
- const gutter = index === 0 ? 0 : state.gutterSize;
40
- const width = getColumnCssWidth(props, state, index);
38
+ const columnCssVars = function columnCssVars2(props, state, gutterSize, cols, stackAt, flexDir, index) {
39
+ const gutter = index === 0 ? 0 : gutterSize.value;
40
+ const width = getColumnCssWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
41
41
  const gutterPixels = `${gutter}px`;
42
42
  const mobileWidth = "100%";
43
43
  const mobileMarginLeft = 0;
@@ -51,33 +51,33 @@ const columnCssVars = function columnCssVars2(props, state, index) {
51
51
  ...sharedStyles,
52
52
  width,
53
53
  [marginLeftKey]: gutterPixels,
54
- "--column-width-mobile": getMobileStyle(props, state, {
54
+ "--column-width-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
55
55
  stackedStyle: mobileWidth,
56
56
  desktopStyle: width
57
57
  }),
58
- "--column-margin-left-mobile": getMobileStyle(props, state, {
58
+ "--column-margin-left-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
59
59
  stackedStyle: mobileMarginLeft,
60
60
  desktopStyle: gutterPixels
61
61
  }),
62
- "--column-width-tablet": getTabletStyle(props, state, {
62
+ "--column-width-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
63
63
  stackedStyle: mobileWidth,
64
64
  desktopStyle: width
65
65
  }),
66
- "--column-margin-left-tablet": getTabletStyle(props, state, {
66
+ "--column-margin-left-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
67
67
  stackedStyle: mobileMarginLeft,
68
68
  desktopStyle: gutterPixels
69
69
  })
70
70
  };
71
71
  };
72
- const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
72
+ const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, gutterSize, cols, stackAt, flexDir, size) {
73
73
  var _a, _b;
74
74
  const breakpointSizes = getSizesForBreakpoints(((_b = (_a = props.builderContext.content) == null ? void 0 : _a.meta) == null ? void 0 : _b.breakpoints) || {});
75
75
  return breakpointSizes[size].max;
76
76
  };
77
- const columnsStyles = function columnsStyles2(props, state) {
77
+ const columnsStyles = function columnsStyles2(props, state, gutterSize, cols, stackAt, flexDir) {
78
78
  const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
79
79
  return `
80
- @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
80
+ @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "medium")}px) {
81
81
  .${props.builderBlock.id}-breakpoints {
82
82
  flex-direction: var(--flex-dir-tablet);
83
83
  align-items: stretch;
@@ -89,7 +89,7 @@ const columnsStyles = function columnsStyles2(props, state) {
89
89
  }
90
90
  }
91
91
 
92
- @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
92
+ @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "small")}px) {
93
93
  .${props.builderBlock.id}-breakpoints {
94
94
  flex-direction: var(--flex-dir);
95
95
  align-items: stretch;
@@ -102,39 +102,46 @@ const columnsStyles = function columnsStyles2(props, state) {
102
102
  },
103
103
  `;
104
104
  };
105
- const getAttributes = function getAttributes2(props, state, column, index) {
105
+ const getAttributes = function getAttributes2(props, state, gutterSize, cols, stackAt, flexDir, column, index) {
106
106
  return {
107
107
  ...{},
108
108
  ...column.link ? {
109
109
  href: column.link
110
110
  } : {},
111
111
  [getClassPropName()]: "builder-column",
112
- style: mapStyleObjToStrIfNeeded(columnCssVars(props, state, index))
112
+ style: mapStyleObjToStrIfNeeded(columnCssVars(props, state, gutterSize, cols, stackAt, flexDir, index))
113
113
  };
114
114
  };
115
115
  const Columns = component$((props) => {
116
116
  var _a;
117
- const state = useStore({
118
- cols: props.columns || [],
119
- flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
120
- gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
121
- stackAt: props.stackColumnsAt || "tablet"
122
- });
117
+ const state = {};
123
118
  useStylesScoped$(STYLES);
119
+ const gutterSize = useComputed$(() => {
120
+ return typeof props.space === "number" ? props.space || 0 : 20;
121
+ });
122
+ const cols = useComputed$(() => {
123
+ return props.columns || [];
124
+ });
125
+ const stackAt = useComputed$(() => {
126
+ return props.stackColumnsAt || "tablet";
127
+ });
128
+ const flexDir = useComputed$(() => {
129
+ return props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
130
+ });
124
131
  return /* @__PURE__ */ jsxs("div", {
125
132
  class: getColumnsClass((_a = props.builderBlock) == null ? void 0 : _a.id) + " div-Columns",
126
- style: columnsCssVars(props, state),
133
+ style: columnsCssVars(props, state, gutterSize, cols, stackAt, flexDir),
127
134
  children: [
128
135
  /* @__PURE__ */ jsx(InlinedStyles, {
129
136
  id: "builderio-columns",
130
- styles: columnsStyles(props, state),
137
+ styles: columnsStyles(props, state, gutterSize, cols, stackAt, flexDir),
131
138
  nonce: props.builderContext.nonce
132
139
  }),
133
140
  (props.columns || []).map((column, index) => {
134
141
  return /* @__PURE__ */ jsx(DynamicRenderer, {
135
- TagName: getTagName(props, state, column),
142
+ TagName: getTagName(props, state, gutterSize, cols, stackAt, flexDir, column),
136
143
  actionAttributes: {},
137
- attributes: getAttributes(props, state, column, index),
144
+ attributes: getAttributes(props, state, gutterSize, cols, stackAt, flexDir, column, index),
138
145
  children: /* @__PURE__ */ jsx(Blocks, {
139
146
  path: `component.options.columns.${index}.blocks`,
140
147
  parent: props.builderBlock.id,
package/lib/edge/constants/sdk-version.qwik.cjs CHANGED
@@ -1,4 +1,4 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const SDK_VERSION = "0.16.19";
3
+ const SDK_VERSION = "0.16.20";
4
4
  exports.SDK_VERSION = SDK_VERSION;
package/lib/edge/constants/sdk-version.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const SDK_VERSION = "0.16.19";
1
+ const SDK_VERSION = "0.16.20";
2
2
  export {
3
3
  SDK_VERSION
4
4
  };
package/lib/node/blocks/columns/columns.qwik.cjs CHANGED
@@ -10,36 +10,36 @@ const getClassPropName = require("../../functions/get-class-prop-name.qwik.cjs")
10
10
  const getStyle = require("../../functions/get-style.qwik.cjs");
11
11
  const helpers = require("./helpers.qwik.cjs");
12
12
  const qwik = require("@builder.io/qwik");
13
- const getTagName = function getTagName2(props, state, column) {
13
+ const getTagName = function getTagName2(props, state, gutterSize, cols, stackAt, flexDir, column) {
14
14
  return column.link ? props.builderLinkComponent || "a" : "div";
15
15
  };
16
- const getWidth = function getWidth2(props, state, index) {
16
+ const getWidth = function getWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
17
17
  var _a;
18
- return ((_a = state.cols[index]) == null ? void 0 : _a.width) || 100 / state.cols.length;
18
+ return ((_a = cols.value[index]) == null ? void 0 : _a.width) || 100 / cols.value.length;
19
19
  };
20
- const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
21
- const width = getWidth(props, state, index);
22
- const subtractWidth = state.gutterSize * (state.cols.length - 1) * (width / 100);
20
+ const getColumnCssWidth = function getColumnCssWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
21
+ const width = getWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
22
+ const subtractWidth = gutterSize.value * (cols.value.length - 1) * (width / 100);
23
23
  return `calc(${width}% - ${subtractWidth}px)`;
24
24
  };
25
- const getTabletStyle = function getTabletStyle2(props, state, { stackedStyle, desktopStyle }) {
26
- return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
25
+ const getTabletStyle = function getTabletStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
26
+ return stackAt.value === "tablet" ? stackedStyle : desktopStyle;
27
27
  };
28
- const getMobileStyle = function getMobileStyle2(props, state, { stackedStyle, desktopStyle }) {
29
- return state.stackAt === "never" ? desktopStyle : stackedStyle;
28
+ const getMobileStyle = function getMobileStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
29
+ return stackAt.value === "never" ? desktopStyle : stackedStyle;
30
30
  };
31
- const columnsCssVars = function columnsCssVars2(props, state) {
31
+ const columnsCssVars = function columnsCssVars2(props, state, gutterSize, cols, stackAt, flexDir) {
32
32
  return {
33
- "--flex-dir": state.flexDir,
34
- "--flex-dir-tablet": getTabletStyle(props, state, {
35
- stackedStyle: state.flexDir,
33
+ "--flex-dir": flexDir.value,
34
+ "--flex-dir-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
35
+ stackedStyle: flexDir.value,
36
36
  desktopStyle: "row"
37
37
  })
38
38
  };
39
39
  };
40
- const columnCssVars = function columnCssVars2(props, state, index) {
41
- const gutter = index === 0 ? 0 : state.gutterSize;
42
- const width = getColumnCssWidth(props, state, index);
40
+ const columnCssVars = function columnCssVars2(props, state, gutterSize, cols, stackAt, flexDir, index) {
41
+ const gutter = index === 0 ? 0 : gutterSize.value;
42
+ const width = getColumnCssWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
43
43
  const gutterPixels = `${gutter}px`;
44
44
  const mobileWidth = "100%";
45
45
  const mobileMarginLeft = 0;
@@ -53,33 +53,33 @@ const columnCssVars = function columnCssVars2(props, state, index) {
53
53
  ...sharedStyles,
54
54
  width,
55
55
  [marginLeftKey]: gutterPixels,
56
- "--column-width-mobile": getMobileStyle(props, state, {
56
+ "--column-width-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
57
57
  stackedStyle: mobileWidth,
58
58
  desktopStyle: width
59
59
  }),
60
- "--column-margin-left-mobile": getMobileStyle(props, state, {
60
+ "--column-margin-left-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
61
61
  stackedStyle: mobileMarginLeft,
62
62
  desktopStyle: gutterPixels
63
63
  }),
64
- "--column-width-tablet": getTabletStyle(props, state, {
64
+ "--column-width-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
65
65
  stackedStyle: mobileWidth,
66
66
  desktopStyle: width
67
67
  }),
68
- "--column-margin-left-tablet": getTabletStyle(props, state, {
68
+ "--column-margin-left-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
69
69
  stackedStyle: mobileMarginLeft,
70
70
  desktopStyle: gutterPixels
71
71
  })
72
72
  };
73
73
  };
74
- const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
74
+ const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, gutterSize, cols, stackAt, flexDir, size) {
75
75
  var _a, _b;
76
76
  const breakpointSizes = deviceSizes.getSizesForBreakpoints(((_b = (_a = props.builderContext.content) == null ? void 0 : _a.meta) == null ? void 0 : _b.breakpoints) || {});
77
77
  return breakpointSizes[size].max;
78
78
  };
79
- const columnsStyles = function columnsStyles2(props, state) {
79
+ const columnsStyles = function columnsStyles2(props, state, gutterSize, cols, stackAt, flexDir) {
80
80
  const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
81
81
  return `
82
- @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
82
+ @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "medium")}px) {
83
83
  .${props.builderBlock.id}-breakpoints {
84
84
  flex-direction: var(--flex-dir-tablet);
85
85
  align-items: stretch;
@@ -91,7 +91,7 @@ const columnsStyles = function columnsStyles2(props, state) {
91
91
  }
92
92
  }
93
93
 
94
- @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
94
+ @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "small")}px) {
95
95
  .${props.builderBlock.id}-breakpoints {
96
96
  flex-direction: var(--flex-dir);
97
97
  align-items: stretch;
@@ -104,39 +104,46 @@ const columnsStyles = function columnsStyles2(props, state) {
104
104
  },
105
105
  `;
106
106
  };
107
- const getAttributes = function getAttributes2(props, state, column, index) {
107
+ const getAttributes = function getAttributes2(props, state, gutterSize, cols, stackAt, flexDir, column, index) {
108
108
  return {
109
109
  ...{},
110
110
  ...column.link ? {
111
111
  href: column.link
112
112
  } : {},
113
113
  [getClassPropName.getClassPropName()]: "builder-column",
114
- style: getStyle.mapStyleObjToStrIfNeeded(columnCssVars(props, state, index))
114
+ style: getStyle.mapStyleObjToStrIfNeeded(columnCssVars(props, state, gutterSize, cols, stackAt, flexDir, index))
115
115
  };
116
116
  };
117
117
  const Columns = qwik.component$((props) => {
118
118
  var _a;
119
- const state = qwik.useStore({
120
- cols: props.columns || [],
121
- flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
122
- gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
123
- stackAt: props.stackColumnsAt || "tablet"
124
- });
119
+ const state = {};
125
120
  qwik.useStylesScoped$(STYLES);
121
+ const gutterSize = qwik.useComputed$(() => {
122
+ return typeof props.space === "number" ? props.space || 0 : 20;
123
+ });
124
+ const cols = qwik.useComputed$(() => {
125
+ return props.columns || [];
126
+ });
127
+ const stackAt = qwik.useComputed$(() => {
128
+ return props.stackColumnsAt || "tablet";
129
+ });
130
+ const flexDir = qwik.useComputed$(() => {
131
+ return props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
132
+ });
126
133
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
127
134
  class: helpers.getColumnsClass((_a = props.builderBlock) == null ? void 0 : _a.id) + " div-Columns",
128
- style: columnsCssVars(props, state),
135
+ style: columnsCssVars(props, state, gutterSize, cols, stackAt, flexDir),
129
136
  children: [
130
137
  /* @__PURE__ */ jsxRuntime.jsx(inlinedStyles.InlinedStyles, {
131
138
  id: "builderio-columns",
132
- styles: columnsStyles(props, state),
139
+ styles: columnsStyles(props, state, gutterSize, cols, stackAt, flexDir),
133
140
  nonce: props.builderContext.nonce
134
141
  }),
135
142
  (props.columns || []).map((column, index) => {
136
143
  return /* @__PURE__ */ jsxRuntime.jsx(dynamicRenderer.DynamicRenderer, {
137
- TagName: getTagName(props, state, column),
144
+ TagName: getTagName(props, state, gutterSize, cols, stackAt, flexDir, column),
138
145
  actionAttributes: {},
139
- attributes: getAttributes(props, state, column, index),
146
+ attributes: getAttributes(props, state, gutterSize, cols, stackAt, flexDir, column, index),
140
147
  children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Blocks, {
141
148
  path: `component.options.columns.${index}.blocks`,
142
149
  parent: props.builderBlock.id,
package/lib/node/blocks/columns/columns.qwik.mjs CHANGED
@@ -7,37 +7,37 @@ import { deoptSignal } from "../../functions/deopt.qwik.mjs";
7
7
  import { getClassPropName } from "../../functions/get-class-prop-name.qwik.mjs";
8
8
  import { mapStyleObjToStrIfNeeded } from "../../functions/get-style.qwik.mjs";
9
9
  import { getColumnsClass } from "./helpers.qwik.mjs";
10
- import { component$, useStore, useStylesScoped$ } from "@builder.io/qwik";
11
- const getTagName = function getTagName2(props, state, column) {
10
+ import { component$, useStylesScoped$, useComputed$ } from "@builder.io/qwik";
11
+ const getTagName = function getTagName2(props, state, gutterSize, cols, stackAt, flexDir, column) {
12
12
  return column.link ? props.builderLinkComponent || "a" : "div";
13
13
  };
14
- const getWidth = function getWidth2(props, state, index) {
14
+ const getWidth = function getWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
15
15
  var _a;
16
- return ((_a = state.cols[index]) == null ? void 0 : _a.width) || 100 / state.cols.length;
16
+ return ((_a = cols.value[index]) == null ? void 0 : _a.width) || 100 / cols.value.length;
17
17
  };
18
- const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
19
- const width = getWidth(props, state, index);
20
- const subtractWidth = state.gutterSize * (state.cols.length - 1) * (width / 100);
18
+ const getColumnCssWidth = function getColumnCssWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
19
+ const width = getWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
20
+ const subtractWidth = gutterSize.value * (cols.value.length - 1) * (width / 100);
21
21
  return `calc(${width}% - ${subtractWidth}px)`;
22
22
  };
23
- const getTabletStyle = function getTabletStyle2(props, state, { stackedStyle, desktopStyle }) {
24
- return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
23
+ const getTabletStyle = function getTabletStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
24
+ return stackAt.value === "tablet" ? stackedStyle : desktopStyle;
25
25
  };
26
- const getMobileStyle = function getMobileStyle2(props, state, { stackedStyle, desktopStyle }) {
27
- return state.stackAt === "never" ? desktopStyle : stackedStyle;
26
+ const getMobileStyle = function getMobileStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
27
+ return stackAt.value === "never" ? desktopStyle : stackedStyle;
28
28
  };
29
- const columnsCssVars = function columnsCssVars2(props, state) {
29
+ const columnsCssVars = function columnsCssVars2(props, state, gutterSize, cols, stackAt, flexDir) {
30
30
  return {
31
- "--flex-dir": state.flexDir,
32
- "--flex-dir-tablet": getTabletStyle(props, state, {
33
- stackedStyle: state.flexDir,
31
+ "--flex-dir": flexDir.value,
32
+ "--flex-dir-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
33
+ stackedStyle: flexDir.value,
34
34
  desktopStyle: "row"
35
35
  })
36
36
  };
37
37
  };
38
- const columnCssVars = function columnCssVars2(props, state, index) {
39
- const gutter = index === 0 ? 0 : state.gutterSize;
40
- const width = getColumnCssWidth(props, state, index);
38
+ const columnCssVars = function columnCssVars2(props, state, gutterSize, cols, stackAt, flexDir, index) {
39
+ const gutter = index === 0 ? 0 : gutterSize.value;
40
+ const width = getColumnCssWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
41
41
  const gutterPixels = `${gutter}px`;
42
42
  const mobileWidth = "100%";
43
43
  const mobileMarginLeft = 0;
@@ -51,33 +51,33 @@ const columnCssVars = function columnCssVars2(props, state, index) {
51
51
  ...sharedStyles,
52
52
  width,
53
53
  [marginLeftKey]: gutterPixels,
54
- "--column-width-mobile": getMobileStyle(props, state, {
54
+ "--column-width-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
55
55
  stackedStyle: mobileWidth,
56
56
  desktopStyle: width
57
57
  }),
58
- "--column-margin-left-mobile": getMobileStyle(props, state, {
58
+ "--column-margin-left-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
59
59
  stackedStyle: mobileMarginLeft,
60
60
  desktopStyle: gutterPixels
61
61
  }),
62
- "--column-width-tablet": getTabletStyle(props, state, {
62
+ "--column-width-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
63
63
  stackedStyle: mobileWidth,
64
64
  desktopStyle: width
65
65
  }),
66
- "--column-margin-left-tablet": getTabletStyle(props, state, {
66
+ "--column-margin-left-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
67
67
  stackedStyle: mobileMarginLeft,
68
68
  desktopStyle: gutterPixels
69
69
  })
70
70
  };
71
71
  };
72
- const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
72
+ const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, gutterSize, cols, stackAt, flexDir, size) {
73
73
  var _a, _b;
74
74
  const breakpointSizes = getSizesForBreakpoints(((_b = (_a = props.builderContext.content) == null ? void 0 : _a.meta) == null ? void 0 : _b.breakpoints) || {});
75
75
  return breakpointSizes[size].max;
76
76
  };
77
- const columnsStyles = function columnsStyles2(props, state) {
77
+ const columnsStyles = function columnsStyles2(props, state, gutterSize, cols, stackAt, flexDir) {
78
78
  const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
79
79
  return `
80
- @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
80
+ @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "medium")}px) {
81
81
  .${props.builderBlock.id}-breakpoints {
82
82
  flex-direction: var(--flex-dir-tablet);
83
83
  align-items: stretch;
@@ -89,7 +89,7 @@ const columnsStyles = function columnsStyles2(props, state) {
89
89
  }
90
90
  }
91
91
 
92
- @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
92
+ @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "small")}px) {
93
93
  .${props.builderBlock.id}-breakpoints {
94
94
  flex-direction: var(--flex-dir);
95
95
  align-items: stretch;
@@ -102,39 +102,46 @@ const columnsStyles = function columnsStyles2(props, state) {
102
102
  },
103
103
  `;
104
104
  };
105
- const getAttributes = function getAttributes2(props, state, column, index) {
105
+ const getAttributes = function getAttributes2(props, state, gutterSize, cols, stackAt, flexDir, column, index) {
106
106
  return {
107
107
  ...{},
108
108
  ...column.link ? {
109
109
  href: column.link
110
110
  } : {},
111
111
  [getClassPropName()]: "builder-column",
112
- style: mapStyleObjToStrIfNeeded(columnCssVars(props, state, index))
112
+ style: mapStyleObjToStrIfNeeded(columnCssVars(props, state, gutterSize, cols, stackAt, flexDir, index))
113
113
  };
114
114
  };
115
115
  const Columns = component$((props) => {
116
116
  var _a;
117
- const state = useStore({
118
- cols: props.columns || [],
119
- flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
120
- gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
121
- stackAt: props.stackColumnsAt || "tablet"
122
- });
117
+ const state = {};
123
118
  useStylesScoped$(STYLES);
119
+ const gutterSize = useComputed$(() => {
120
+ return typeof props.space === "number" ? props.space || 0 : 20;
121
+ });
122
+ const cols = useComputed$(() => {
123
+ return props.columns || [];
124
+ });
125
+ const stackAt = useComputed$(() => {
126
+ return props.stackColumnsAt || "tablet";
127
+ });
128
+ const flexDir = useComputed$(() => {
129
+ return props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
130
+ });
124
131
  return /* @__PURE__ */ jsxs("div", {
125
132
  class: getColumnsClass((_a = props.builderBlock) == null ? void 0 : _a.id) + " div-Columns",
126
- style: columnsCssVars(props, state),
133
+ style: columnsCssVars(props, state, gutterSize, cols, stackAt, flexDir),
127
134
  children: [
128
135
  /* @__PURE__ */ jsx(InlinedStyles, {
129
136
  id: "builderio-columns",
130
- styles: columnsStyles(props, state),
137
+ styles: columnsStyles(props, state, gutterSize, cols, stackAt, flexDir),
131
138
  nonce: props.builderContext.nonce
132
139
  }),
133
140
  (props.columns || []).map((column, index) => {
134
141
  return /* @__PURE__ */ jsx(DynamicRenderer, {
135
- TagName: getTagName(props, state, column),
142
+ TagName: getTagName(props, state, gutterSize, cols, stackAt, flexDir, column),
136
143
  actionAttributes: {},
137
- attributes: getAttributes(props, state, column, index),
144
+ attributes: getAttributes(props, state, gutterSize, cols, stackAt, flexDir, column, index),
138
145
  children: /* @__PURE__ */ jsx(Blocks, {
139
146
  path: `component.options.columns.${index}.blocks`,
140
147
  parent: props.builderBlock.id,
package/lib/node/constants/sdk-version.qwik.cjs CHANGED
@@ -1,4 +1,4 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const SDK_VERSION = "0.16.19";
3
+ const SDK_VERSION = "0.16.20";
4
4
  exports.SDK_VERSION = SDK_VERSION;
package/lib/node/constants/sdk-version.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const SDK_VERSION = "0.16.19";
1
+ const SDK_VERSION = "0.16.20";
2
2
  export {
3
3
  SDK_VERSION
4
4
  };
package/lib/node/functions/evaluate/node-runtime/node-runtime.qwik.cjs CHANGED
@@ -57,6 +57,8 @@ if (typeof output === 'object' && output !== null) {
57
57
  let IVM_INSTANCE = null;
58
58
  let IVM_CONTEXT = null;
59
59
  const setIvm = (ivm, options = {}) => {
60
+ if (IVM_INSTANCE)
61
+ return;
60
62
  IVM_INSTANCE = ivm;
61
63
  setIsolateContext(options);
62
64
  };
@@ -84,6 +86,8 @@ const getIvm = () => {
84
86
  function setIsolateContext(options = {
85
87
  memoryLimit: 128
86
88
  }) {
89
+ if (IVM_CONTEXT)
90
+ return IVM_CONTEXT;
87
91
  const ivm = getIvm();
88
92
  const isolate = new ivm.Isolate(options);
89
93
  const context = isolate.createContextSync();
@@ -97,10 +101,7 @@ function setIsolateContext(options = {
97
101
  return context;
98
102
  }
99
103
  const getIsolateContext = () => {
100
- if (IVM_CONTEXT)
101
- return IVM_CONTEXT;
102
- const context = setIsolateContext();
103
- return context;
104
+ return setIsolateContext();
104
105
  };
105
106
  const runInNode = ({ code, builder, context, event, localState, rootSetState, rootState }) => {
106
107
  const ivm = getIvm();
package/lib/node/functions/evaluate/node-runtime/node-runtime.qwik.mjs CHANGED
@@ -55,6 +55,8 @@ if (typeof output === 'object' && output !== null) {
55
55
  let IVM_INSTANCE = null;
56
56
  let IVM_CONTEXT = null;
57
57
  const setIvm = (ivm, options = {}) => {
58
+ if (IVM_INSTANCE)
59
+ return;
58
60
  IVM_INSTANCE = ivm;
59
61
  setIsolateContext(options);
60
62
  };
@@ -82,6 +84,8 @@ const getIvm = () => {
82
84
  function setIsolateContext(options = {
83
85
  memoryLimit: 128
84
86
  }) {
87
+ if (IVM_CONTEXT)
88
+ return IVM_CONTEXT;
85
89
  const ivm = getIvm();
86
90
  const isolate = new ivm.Isolate(options);
87
91
  const context = isolate.createContextSync();
@@ -95,10 +99,7 @@ function setIsolateContext(options = {
95
99
  return context;
96
100
  }
97
101
  const getIsolateContext = () => {
98
- if (IVM_CONTEXT)
99
- return IVM_CONTEXT;
100
- const context = setIsolateContext();
101
- return context;
102
+ return setIsolateContext();
102
103
  };
103
104
  const runInNode = ({ code, builder, context, event, localState, rootSetState, rootState }) => {
104
105
  const ivm = getIvm();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@builder.io/sdk-qwik",
3
- "version": "0.16.19",
3
+ "version": "0.16.20",
4
4
  "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/qwik",
5
5
  "repository": {
6
6
  "type": "git",
package/types/src/blocks/columns/columns.d.ts CHANGED
@@ -2,22 +2,22 @@ import { SizeName } from "../../constants/device-sizes";
2
2
  import { Dictionary } from "../../types/typescript";
3
3
  import { Column, ColumnProps } from "./columns.types";
4
4
  type CSSVal = string | number;
5
- export declare const getTagName: (props: any, state: any, column: Column) => any;
6
- export declare const getWidth: (props: any, state: any, index: number) => any;
7
- export declare const getColumnCssWidth: (props: any, state: any, index: number) => string;
8
- export declare const getTabletStyle: (props: any, state: any, { stackedStyle, desktopStyle, }: {
5
+ export declare const getTagName: (props: any, state: any, gutterSize: any, cols: any, stackAt: any, flexDir: any, column: Column) => any;
6
+ export declare const getWidth: (props: any, state: any, gutterSize: any, cols: any, stackAt: any, flexDir: any, index: number) => any;
7
+ export declare const getColumnCssWidth: (props: any, state: any, gutterSize: any, cols: any, stackAt: any, flexDir: any, index: number) => string;
8
+ export declare const getTabletStyle: (props: any, state: any, gutterSize: any, cols: any, stackAt: any, flexDir: any, { stackedStyle, desktopStyle, }: {
9
9
  stackedStyle: CSSVal;
10
10
  desktopStyle: CSSVal;
11
11
  }) => CSSVal;
12
- export declare const getMobileStyle: (props: any, state: any, { stackedStyle, desktopStyle, }: {
12
+ export declare const getMobileStyle: (props: any, state: any, gutterSize: any, cols: any, stackAt: any, flexDir: any, { stackedStyle, desktopStyle, }: {
13
13
  stackedStyle: CSSVal;
14
14
  desktopStyle: CSSVal;
15
15
  }) => CSSVal;
16
- export declare const columnsCssVars: (props: any, state: any) => Dictionary<string>;
17
- export declare const columnCssVars: (props: any, state: any, index: number) => Dictionary<string>;
18
- export declare const getWidthForBreakpointSize: (props: any, state: any, size: SizeName) => number;
19
- export declare const columnsStyles: (props: any, state: any) => string;
20
- export declare const getAttributes: (props: any, state: any, column: any, index: number) => {
16
+ export declare const columnsCssVars: (props: any, state: any, gutterSize: any, cols: any, stackAt: any, flexDir: any) => Dictionary<string>;
17
+ export declare const columnCssVars: (props: any, state: any, gutterSize: any, cols: any, stackAt: any, flexDir: any, index: number) => Dictionary<string>;
18
+ export declare const getWidthForBreakpointSize: (props: any, state: any, gutterSize: any, cols: any, stackAt: any, flexDir: any, size: SizeName) => number;
19
+ export declare const columnsStyles: (props: any, state: any, gutterSize: any, cols: any, stackAt: any, flexDir: any) => string;
20
+ export declare const getAttributes: (props: any, state: any, gutterSize: any, cols: any, stackAt: any, flexDir: any, column: any, index: number) => {
21
21
  style: string | Partial<CSSStyleDeclaration>;
22
22
  href?: any;
23
23
  };
package/types/src/constants/sdk-version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const SDK_VERSION = "0.16.19";
1
+ export declare const SDK_VERSION = "0.16.20";
package/types/src/functions/evaluate/node-runtime/setIvm.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { setIvm } from './node-runtime';