@builder.io/sdk-svelte 0.12.3 → 0.12.5
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.
- package/lib/browser/blocks/button/button.svelte +27 -35
- package/lib/browser/blocks/button/button.svelte.d.ts +3 -2
- package/lib/browser/blocks/button/button.types.d.ts +2 -1
- package/lib/browser/blocks/columns/columns.svelte +25 -10
- package/lib/browser/blocks/columns/columns.svelte.d.ts +1 -0
- package/lib/browser/blocks/columns/columns.types.d.ts +3 -3
- package/lib/browser/blocks/symbol/symbol.svelte +4 -1
- package/lib/browser/blocks/symbol/symbol.svelte.d.ts +1 -0
- package/lib/browser/blocks/symbol/symbol.types.d.ts +2 -2
- package/lib/browser/components/block/block.svelte +26 -2
- package/lib/browser/components/block/components/block-wrapper.svelte.d.ts +1 -0
- package/lib/browser/components/block/components/component-ref/component-ref.helpers.d.ts +2 -2
- package/lib/browser/components/block/components/component-ref/component-ref.svelte +3 -1
- package/lib/browser/components/block/components/component-ref/component-ref.svelte.d.ts +1 -0
- package/lib/browser/components/block/components/repeated-block.svelte +2 -1
- package/lib/browser/components/block/components/repeated-block.svelte.d.ts +4 -5
- package/lib/browser/components/blocks/blocks.svelte +2 -0
- package/lib/browser/components/blocks/blocks.svelte.d.ts +1 -0
- package/lib/browser/components/blocks/blocks.types.d.ts +1 -0
- package/lib/browser/components/content/content.svelte +3 -0
- package/lib/browser/components/content/content.svelte.d.ts +1 -0
- package/lib/browser/components/content-variants/content-variants.svelte +3 -0
- package/lib/browser/components/content-variants/content-variants.svelte.d.ts +1 -0
- package/lib/browser/components/content-variants/content-variants.types.d.ts +6 -2
- package/lib/browser/constants/sdk-version.d.ts +1 -1
- package/lib/browser/constants/sdk-version.js +1 -1
- package/lib/browser/functions/evaluate/choose-eval.js +2 -1
- package/lib/browser/functions/evaluate/should-force-browser-runtime-in-node.d.ts +1 -0
- package/lib/browser/functions/evaluate/should-force-browser-runtime-in-node.js +21 -0
- package/lib/browser/functions/get-block-properties.d.ts +1 -2
- package/lib/browser/functions/get-block-properties.js +7 -22
- package/lib/browser/functions/get-class-prop-name.d.ts +1 -0
- package/lib/browser/functions/get-class-prop-name.js +14 -0
- package/lib/browser/functions/get-style.d.ts +12 -0
- package/lib/browser/functions/get-style.js +28 -0
- package/lib/browser/functions/is-node-runtime.js +1 -1
- package/lib/browser/functions/transform-block-properties.d.ts +2 -2
- package/lib/browser/functions/transform-style-property.d.ts +7 -0
- package/lib/browser/functions/transform-style-property.js +3 -0
- package/lib/browser/helpers/omit.d.ts +1 -0
- package/lib/browser/helpers/omit.js +7 -0
- package/lib/browser/types/builder-block.d.ts +1 -0
- package/lib/browser/types/builder-props.d.ts +3 -0
- package/lib/edge/blocks/button/button.svelte +27 -35
- package/lib/edge/blocks/button/button.svelte.d.ts +3 -2
- package/lib/edge/blocks/button/button.types.d.ts +2 -1
- package/lib/edge/blocks/columns/columns.svelte +25 -10
- package/lib/edge/blocks/columns/columns.svelte.d.ts +1 -0
- package/lib/edge/blocks/columns/columns.types.d.ts +3 -3
- package/lib/edge/blocks/symbol/symbol.svelte +4 -1
- package/lib/edge/blocks/symbol/symbol.svelte.d.ts +1 -0
- package/lib/edge/blocks/symbol/symbol.types.d.ts +2 -2
- package/lib/edge/components/block/block.svelte +26 -2
- package/lib/edge/components/block/components/block-wrapper.svelte.d.ts +1 -0
- package/lib/edge/components/block/components/component-ref/component-ref.helpers.d.ts +2 -2
- package/lib/edge/components/block/components/component-ref/component-ref.svelte +3 -1
- package/lib/edge/components/block/components/component-ref/component-ref.svelte.d.ts +1 -0
- package/lib/edge/components/block/components/repeated-block.svelte +2 -1
- package/lib/edge/components/block/components/repeated-block.svelte.d.ts +4 -5
- package/lib/edge/components/blocks/blocks.svelte +2 -0
- package/lib/edge/components/blocks/blocks.svelte.d.ts +1 -0
- package/lib/edge/components/blocks/blocks.types.d.ts +1 -0
- package/lib/edge/components/content/content.svelte +3 -0
- package/lib/edge/components/content/content.svelte.d.ts +1 -0
- package/lib/edge/components/content-variants/content-variants.svelte +3 -0
- package/lib/edge/components/content-variants/content-variants.svelte.d.ts +1 -0
- package/lib/edge/components/content-variants/content-variants.types.d.ts +6 -2
- package/lib/edge/constants/sdk-version.d.ts +1 -1
- package/lib/edge/constants/sdk-version.js +1 -1
- package/lib/edge/functions/evaluate/choose-eval.js +2 -1
- package/lib/edge/functions/evaluate/should-force-browser-runtime-in-node.d.ts +1 -0
- package/lib/edge/functions/evaluate/should-force-browser-runtime-in-node.js +21 -0
- package/lib/edge/functions/get-block-properties.d.ts +1 -2
- package/lib/edge/functions/get-block-properties.js +7 -22
- package/lib/edge/functions/get-class-prop-name.d.ts +1 -0
- package/lib/edge/functions/get-class-prop-name.js +14 -0
- package/lib/edge/functions/get-style.d.ts +12 -0
- package/lib/edge/functions/get-style.js +28 -0
- package/lib/edge/functions/is-node-runtime.js +1 -1
- package/lib/edge/functions/transform-block-properties.d.ts +2 -2
- package/lib/edge/functions/transform-style-property.d.ts +7 -0
- package/lib/edge/functions/transform-style-property.js +3 -0
- package/lib/edge/helpers/omit.d.ts +1 -0
- package/lib/edge/helpers/omit.js +7 -0
- package/lib/edge/types/builder-block.d.ts +1 -0
- package/lib/edge/types/builder-props.d.ts +3 -0
- package/lib/node/blocks/button/button.svelte +27 -35
- package/lib/node/blocks/button/button.svelte.d.ts +3 -2
- package/lib/node/blocks/button/button.types.d.ts +2 -1
- package/lib/node/blocks/columns/columns.svelte +25 -10
- package/lib/node/blocks/columns/columns.svelte.d.ts +1 -0
- package/lib/node/blocks/columns/columns.types.d.ts +3 -3
- package/lib/node/blocks/symbol/symbol.svelte +4 -1
- package/lib/node/blocks/symbol/symbol.svelte.d.ts +1 -0
- package/lib/node/blocks/symbol/symbol.types.d.ts +2 -2
- package/lib/node/components/block/block.svelte +26 -2
- package/lib/node/components/block/components/block-wrapper.svelte.d.ts +1 -0
- package/lib/node/components/block/components/component-ref/component-ref.helpers.d.ts +2 -2
- package/lib/node/components/block/components/component-ref/component-ref.svelte +3 -1
- package/lib/node/components/block/components/component-ref/component-ref.svelte.d.ts +1 -0
- package/lib/node/components/block/components/repeated-block.svelte +2 -1
- package/lib/node/components/block/components/repeated-block.svelte.d.ts +4 -5
- package/lib/node/components/blocks/blocks.svelte +2 -0
- package/lib/node/components/blocks/blocks.svelte.d.ts +1 -0
- package/lib/node/components/blocks/blocks.types.d.ts +1 -0
- package/lib/node/components/content/content.svelte +3 -0
- package/lib/node/components/content/content.svelte.d.ts +1 -0
- package/lib/node/components/content-variants/content-variants.svelte +3 -0
- package/lib/node/components/content-variants/content-variants.svelte.d.ts +1 -0
- package/lib/node/components/content-variants/content-variants.types.d.ts +6 -2
- package/lib/node/constants/sdk-version.d.ts +1 -1
- package/lib/node/constants/sdk-version.js +1 -1
- package/lib/node/functions/evaluate/choose-eval.js +2 -1
- package/lib/node/functions/evaluate/should-force-browser-runtime-in-node.d.ts +1 -0
- package/lib/node/functions/evaluate/should-force-browser-runtime-in-node.js +21 -0
- package/lib/node/functions/get-block-properties.d.ts +1 -2
- package/lib/node/functions/get-block-properties.js +7 -22
- package/lib/node/functions/get-class-prop-name.d.ts +1 -0
- package/lib/node/functions/get-class-prop-name.js +14 -0
- package/lib/node/functions/get-style.d.ts +12 -0
- package/lib/node/functions/get-style.js +28 -0
- package/lib/node/functions/is-node-runtime.js +1 -1
- package/lib/node/functions/transform-block-properties.d.ts +2 -2
- package/lib/node/functions/transform-style-property.d.ts +7 -0
- package/lib/node/functions/transform-style-property.js +3 -0
- package/lib/node/helpers/omit.d.ts +1 -0
- package/lib/node/helpers/omit.js +7 -0
- package/lib/node/types/builder-block.d.ts +1 -0
- package/lib/node/types/builder-props.d.ts +3 -0
- package/package.json +1 -1
- package/src/blocks/button/button.svelte +27 -34
- package/src/blocks/button/button.types.ts +2 -1
- package/src/blocks/columns/columns.svelte +26 -10
- package/src/blocks/columns/columns.types.ts +3 -3
- package/src/blocks/symbol/symbol.svelte +5 -1
- package/src/blocks/symbol/symbol.types.ts +2 -2
- package/src/components/block/block.svelte +28 -2
- package/src/components/block/components/block-wrapper.svelte +1 -0
- package/src/components/block/components/component-ref/component-ref.helpers.ts +1 -0
- package/src/components/block/components/component-ref/component-ref.svelte +3 -1
- package/src/components/block/components/repeated-block.svelte +5 -9
- package/src/components/blocks/blocks.svelte +2 -0
- package/src/components/blocks/blocks.types.ts +1 -0
- package/src/components/content/content.svelte +3 -0
- package/src/components/content-variants/content-variants.svelte +3 -0
- package/src/components/content-variants/content-variants.types.ts +6 -2
- package/src/constants/sdk-version.ts +1 -1
- package/src/functions/evaluate/choose-eval.ts +2 -1
- package/src/functions/evaluate/should-force-browser-runtime-in-node.ts +22 -0
- package/src/functions/get-block-properties.ts +7 -22
- package/src/functions/get-class-prop-name.ts +14 -0
- package/src/functions/get-style.ts +37 -0
- package/src/functions/is-node-runtime.ts +1 -1
- package/src/functions/transform-block-properties.ts +2 -2
- package/src/functions/transform-style-property.ts +11 -0
- package/src/helpers/omit.ts +7 -0
- package/src/types/builder-block.ts +1 -0
- package/src/types/builder-props.ts +3 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { getClassPropName } from './get-class-prop-name.js';
|
|
2
|
+
import { getStyle } from './get-style.js';
|
|
3
3
|
import { transformBlockProperties } from './transform-block-properties.js';
|
|
4
4
|
const extractRelevantRootBlockProperties = (block) => {
|
|
5
5
|
// currently we are only spreading the `href` property
|
|
@@ -38,8 +38,11 @@ export function getBlockProperties({ block, context }) {
|
|
|
38
38
|
...extractRelevantRootBlockProperties(block),
|
|
39
39
|
...block.properties,
|
|
40
40
|
'builder-id': block.id,
|
|
41
|
-
style:
|
|
42
|
-
|
|
41
|
+
style: getStyle({
|
|
42
|
+
block,
|
|
43
|
+
context
|
|
44
|
+
}),
|
|
45
|
+
[getClassPropName()]: [block.id, 'builder-block', block.class, block.properties?.class].filter(Boolean).join(' ')
|
|
43
46
|
};
|
|
44
47
|
return transformBlockProperties({
|
|
45
48
|
properties,
|
|
@@ -47,21 +50,3 @@ export function getBlockProperties({ block, context }) {
|
|
|
47
50
|
block
|
|
48
51
|
});
|
|
49
52
|
}
|
|
50
|
-
/**
|
|
51
|
-
* Svelte does not support style attribute as an object so we need to flatten it.
|
|
52
|
-
*
|
|
53
|
-
* Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
|
|
54
|
-
*/
|
|
55
|
-
function getStyleAttribute(style) {
|
|
56
|
-
switch (TARGET) {
|
|
57
|
-
case 'svelte':
|
|
58
|
-
case 'vue':
|
|
59
|
-
case 'solid':
|
|
60
|
-
return convertStyleMapToCSSArray(style).join(' ');
|
|
61
|
-
case 'qwik':
|
|
62
|
-
case 'reactNative':
|
|
63
|
-
case 'react':
|
|
64
|
-
case 'rsc':
|
|
65
|
-
return style;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getClassPropName: () => "className" | "class";
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { TARGET } from '../constants/target.js';
|
|
2
|
+
export const getClassPropName = () => {
|
|
3
|
+
switch (TARGET) {
|
|
4
|
+
case 'react':
|
|
5
|
+
case 'reactNative':
|
|
6
|
+
case 'rsc':
|
|
7
|
+
return 'className';
|
|
8
|
+
case 'svelte':
|
|
9
|
+
case 'vue':
|
|
10
|
+
case 'solid':
|
|
11
|
+
case 'qwik':
|
|
12
|
+
return 'class';
|
|
13
|
+
}
|
|
14
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { BuilderContextInterface } from '../context/types.js';
|
|
2
|
+
import type { BuilderBlock } from '../types/builder-block.js';
|
|
3
|
+
export declare const getStyle: ({ block, context }: {
|
|
4
|
+
block: BuilderBlock;
|
|
5
|
+
context: BuilderContextInterface;
|
|
6
|
+
}) => string | Partial<CSSStyleDeclaration>;
|
|
7
|
+
/**
|
|
8
|
+
* Svelte does not support style attribute as an object so we need to flatten it.
|
|
9
|
+
*
|
|
10
|
+
* Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
|
|
11
|
+
*/
|
|
12
|
+
export declare function mapStyleObjToStrIfNeeded(style: Partial<CSSStyleDeclaration>): string | Partial<CSSStyleDeclaration>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { TARGET } from '../constants/target.js';
|
|
2
|
+
import { convertStyleMapToCSSArray } from '../helpers/css.js';
|
|
3
|
+
import { transformStyleProperty } from './transform-style-property.js';
|
|
4
|
+
export const getStyle = ({ block, context }) => {
|
|
5
|
+
return mapStyleObjToStrIfNeeded(transformStyleProperty({
|
|
6
|
+
style: block.style || {},
|
|
7
|
+
context,
|
|
8
|
+
block
|
|
9
|
+
}));
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Svelte does not support style attribute as an object so we need to flatten it.
|
|
13
|
+
*
|
|
14
|
+
* Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
|
|
15
|
+
*/
|
|
16
|
+
export function mapStyleObjToStrIfNeeded(style) {
|
|
17
|
+
switch (TARGET) {
|
|
18
|
+
case 'svelte':
|
|
19
|
+
case 'vue':
|
|
20
|
+
case 'solid':
|
|
21
|
+
return convertStyleMapToCSSArray(style).join(' ');
|
|
22
|
+
case 'qwik':
|
|
23
|
+
case 'reactNative':
|
|
24
|
+
case 'react':
|
|
25
|
+
case 'rsc':
|
|
26
|
+
return style;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { BuilderContextInterface } from '../context/types';
|
|
2
|
-
import type { BuilderBlock } from '../types/builder-block';
|
|
1
|
+
import type { BuilderContextInterface } from '../context/types.js';
|
|
2
|
+
import type { BuilderBlock } from '../types/builder-block.js';
|
|
3
3
|
export declare function transformBlockProperties<T>({ properties }: {
|
|
4
4
|
properties: T;
|
|
5
5
|
context: BuilderContextInterface;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { BuilderContextInterface } from '../context/types.js';
|
|
2
|
+
import type { BuilderBlock } from '../types/builder-block.js';
|
|
3
|
+
export declare function transformStyleProperty({ style }: {
|
|
4
|
+
style: Partial<CSSStyleDeclaration>;
|
|
5
|
+
context: BuilderContextInterface;
|
|
6
|
+
block: BuilderBlock;
|
|
7
|
+
}): Partial<CSSStyleDeclaration>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function omit<T extends object>(obj: T, ...values: (keyof T)[]): Partial<T>;
|
|
@@ -1,39 +1,31 @@
|
|
|
1
|
-
<script>import
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
export let text = undefined;
|
|
1
|
+
<script>import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer.svelte";
|
|
2
|
+
import { getClassPropName } from "../../functions/get-class-prop-name.js";
|
|
3
|
+
import { filterAttrs } from "../helpers.js";
|
|
5
4
|
export let link = undefined;
|
|
5
|
+
export let builderLinkComponent = undefined;
|
|
6
|
+
export let attributes = undefined;
|
|
6
7
|
export let openLinkInNewTab = undefined;
|
|
7
|
-
|
|
8
|
-
Object.entries(vars || {}).forEach(([p, v]) => {
|
|
9
|
-
if (p.startsWith("--")) {
|
|
10
|
-
node.style.setProperty(p, v);
|
|
11
|
-
}
|
|
12
|
-
else {
|
|
13
|
-
node.style[p] = v;
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
}
|
|
8
|
+
export let text = undefined;
|
|
17
9
|
</script>
|
|
18
10
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
11
|
+
<DynamicRenderer
|
|
12
|
+
TagName={link ? builderLinkComponent || "a" : "button"}
|
|
13
|
+
attributes={{
|
|
14
|
+
...filterAttrs(attributes, "on:", false),
|
|
15
|
+
[getClassPropName()]: `${link ? "" : "builder-button"} ${
|
|
16
|
+
attributes[getClassPropName()] || ""
|
|
17
|
+
}`,
|
|
18
|
+
...(link
|
|
19
|
+
? {
|
|
20
|
+
href: link,
|
|
21
|
+
target: openLinkInNewTab ? "_blank" : undefined,
|
|
22
|
+
role: "link",
|
|
23
|
+
}
|
|
24
|
+
: {
|
|
25
|
+
role: "button",
|
|
26
|
+
}),
|
|
27
|
+
}}
|
|
28
|
+
actionAttributes={filterAttrs(attributes, "on:", true)}
|
|
29
|
+
>
|
|
30
|
+
{text}
|
|
31
|
+
</DynamicRenderer>
|
|
@@ -2,10 +2,11 @@ import { SvelteComponent } from "svelte";
|
|
|
2
2
|
import type { ButtonProps } from "./button.types.js";
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
-
attributes?: ButtonProps["attributes"];
|
|
6
|
-
text?: ButtonProps["text"];
|
|
7
5
|
link?: ButtonProps["link"];
|
|
6
|
+
builderLinkComponent?: ButtonProps["builderLinkComponent"];
|
|
7
|
+
attributes?: ButtonProps["attributes"];
|
|
8
8
|
openLinkInNewTab?: ButtonProps["openLinkInNewTab"];
|
|
9
|
+
text?: ButtonProps["text"];
|
|
9
10
|
};
|
|
10
11
|
events: {
|
|
11
12
|
[evt: string]: CustomEvent<any>;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
<script context="module"></script>
|
|
2
2
|
|
|
3
3
|
<script>import Blocks from "../../components/blocks/blocks.svelte";
|
|
4
|
+
import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer.svelte";
|
|
4
5
|
import InlinedStyles from "../../components/inlined-styles.svelte";
|
|
5
6
|
import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
|
|
6
7
|
import { TARGET } from "../../constants/target.js";
|
|
7
8
|
import "../../functions/deopt.js";
|
|
9
|
+
import { getClassPropName } from "../../functions/get-class-prop-name.js";
|
|
10
|
+
import { mapStyleObjToStrIfNeeded } from "../../functions/get-style.js";
|
|
8
11
|
export let js;
|
|
9
12
|
export let space = undefined;
|
|
10
13
|
export let columns = undefined;
|
|
@@ -12,6 +15,7 @@ export let stackColumnsAt = undefined;
|
|
|
12
15
|
export let reverseColumnsWhenStacked = undefined;
|
|
13
16
|
export let builderContext;
|
|
14
17
|
export let builderBlock;
|
|
18
|
+
export let builderLinkComponent = undefined;
|
|
15
19
|
export let builderComponents;
|
|
16
20
|
function mitosis_styling(node, vars) {
|
|
17
21
|
Object.entries(vars || {}).forEach(([p, v]) => {
|
|
@@ -43,7 +47,13 @@ function columnCssVars(index) {
|
|
|
43
47
|
const mobileWidth = "100%";
|
|
44
48
|
const mobileMarginLeft = 0;
|
|
45
49
|
const marginLeftKey = "margin-left";
|
|
50
|
+
const sharedStyles = {
|
|
51
|
+
display: "flex",
|
|
52
|
+
flexDirection: "column",
|
|
53
|
+
alignItems: "stretch",
|
|
54
|
+
};
|
|
46
55
|
return {
|
|
56
|
+
...sharedStyles,
|
|
47
57
|
width,
|
|
48
58
|
[marginLeftKey]: gutterPixels,
|
|
49
59
|
"--column-width-mobile": getMobileStyle({
|
|
@@ -124,10 +134,19 @@ let flexDir = stackColumnsAt === "never"
|
|
|
124
134
|
{/if}
|
|
125
135
|
|
|
126
136
|
{#each columns as column, index (index)}
|
|
127
|
-
<
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
{
|
|
137
|
+
<DynamicRenderer
|
|
138
|
+
TagName={column.link ? builderLinkComponent || "a" : "div"}
|
|
139
|
+
actionAttributes={{}}
|
|
140
|
+
attributes={{
|
|
141
|
+
...{},
|
|
142
|
+
...(column.link
|
|
143
|
+
? {
|
|
144
|
+
href: column.link,
|
|
145
|
+
}
|
|
146
|
+
: {}),
|
|
147
|
+
[getClassPropName()]: "builder-column",
|
|
148
|
+
style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
|
|
149
|
+
}}
|
|
131
150
|
>
|
|
132
151
|
<Blocks
|
|
133
152
|
path={`component.options.columns.${index}.blocks`}
|
|
@@ -137,9 +156,10 @@ let flexDir = stackColumnsAt === "never"
|
|
|
137
156
|
}}
|
|
138
157
|
context={builderContext}
|
|
139
158
|
registeredComponents={builderComponents}
|
|
159
|
+
linkComponent={builderLinkComponent}
|
|
140
160
|
blocks={column.blocks}
|
|
141
161
|
/>
|
|
142
|
-
</
|
|
162
|
+
</DynamicRenderer>
|
|
143
163
|
{/each}
|
|
144
164
|
</div>
|
|
145
165
|
|
|
@@ -148,9 +168,4 @@ let flexDir = stackColumnsAt === "never"
|
|
|
148
168
|
display: flex;
|
|
149
169
|
line-height: normal;
|
|
150
170
|
}
|
|
151
|
-
.div-2 {
|
|
152
|
-
display: flex;
|
|
153
|
-
flex-direction: column;
|
|
154
|
-
align-items: stretch;
|
|
155
|
-
}
|
|
156
171
|
</style>
|
|
@@ -10,6 +10,7 @@ declare const __propDef: {
|
|
|
10
10
|
reverseColumnsWhenStacked?: PropsWithBuilderData<ColumnProps>["reverseColumnsWhenStacked"];
|
|
11
11
|
builderContext: PropsWithBuilderData<ColumnProps>["builderContext"];
|
|
12
12
|
builderBlock: PropsWithBuilderData<ColumnProps>["builderBlock"];
|
|
13
|
+
builderLinkComponent?: PropsWithBuilderData<ColumnProps>["builderLinkComponent"];
|
|
13
14
|
builderComponents: PropsWithBuilderData<ColumnProps>["builderComponents"];
|
|
14
15
|
};
|
|
15
16
|
events: {
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import type { BuilderBlock } from '../../types/builder-block.js';
|
|
2
|
-
import type { BuilderComponentsProp } from '../../types/builder-props.js';
|
|
2
|
+
import type { BuilderComponentsProp, BuilderLinkComponentProp } from '../../types/builder-props.js';
|
|
3
3
|
type Column = {
|
|
4
4
|
blocks: BuilderBlock[];
|
|
5
5
|
width?: number;
|
|
6
|
+
link?: string;
|
|
6
7
|
};
|
|
7
8
|
type StackColumnsAt = 'tablet' | 'mobile' | 'never';
|
|
8
|
-
export interface ColumnProps extends BuilderComponentsProp {
|
|
9
|
+
export interface ColumnProps extends BuilderComponentsProp, BuilderLinkComponentProp {
|
|
9
10
|
columns?: Column[];
|
|
10
|
-
builderBlock: BuilderBlock;
|
|
11
11
|
space?: number;
|
|
12
12
|
stackColumnsAt?: StackColumnsAt;
|
|
13
13
|
reverseColumnsWhenStacked?: boolean;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script>import { onMount } from "svelte";
|
|
2
2
|
import ContentVariants from "../../components/content-variants/content-variants.svelte";
|
|
3
3
|
import { filterAttrs } from "../helpers.js";
|
|
4
|
+
import { getClassPropName } from "../../functions/get-class-prop-name.js";
|
|
4
5
|
import { setAttrs } from "../helpers.js";
|
|
5
6
|
import { fetchSymbolContent } from "./symbol.helpers.js";
|
|
6
7
|
export let js;
|
|
@@ -10,6 +11,7 @@ export let dynamic = undefined;
|
|
|
10
11
|
export let builderContext;
|
|
11
12
|
export let builderBlock;
|
|
12
13
|
export let builderComponents;
|
|
14
|
+
export let builderLinkComponent = undefined;
|
|
13
15
|
function setContent() {
|
|
14
16
|
if (contentToUse)
|
|
15
17
|
return;
|
|
@@ -24,7 +26,7 @@ function setContent() {
|
|
|
24
26
|
}
|
|
25
27
|
$: className = () => {
|
|
26
28
|
return [
|
|
27
|
-
...[attributes
|
|
29
|
+
...[attributes[getClassPropName()]],
|
|
28
30
|
"builder-symbol",
|
|
29
31
|
symbol?.inline ? "builder-inline-symbol" : undefined,
|
|
30
32
|
symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
|
|
@@ -64,5 +66,6 @@ $: onUpdateFn_0(...[symbol]);
|
|
|
64
66
|
}}
|
|
65
67
|
model={symbol?.model}
|
|
66
68
|
content={contentToUse}
|
|
69
|
+
linkComponent={builderLinkComponent}
|
|
67
70
|
/>
|
|
68
71
|
</div>
|
|
@@ -10,6 +10,7 @@ declare const __propDef: {
|
|
|
10
10
|
builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
|
|
11
11
|
builderBlock: PropsWithBuilderData<SymbolProps>["builderBlock"];
|
|
12
12
|
builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
|
|
13
|
+
builderLinkComponent?: PropsWithBuilderData<SymbolProps>["builderLinkComponent"];
|
|
13
14
|
};
|
|
14
15
|
events: {
|
|
15
16
|
[evt: string]: CustomEvent<any>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { BuilderContent } from '../../types/builder-content.js';
|
|
2
|
-
import type { BuilderComponentsProp } from '../../types/builder-props.js';
|
|
2
|
+
import type { BuilderComponentsProp, BuilderLinkComponentProp } from '../../types/builder-props.js';
|
|
3
3
|
interface SymbolInfo {
|
|
4
4
|
model?: string;
|
|
5
5
|
entry?: string;
|
|
@@ -8,7 +8,7 @@ interface SymbolInfo {
|
|
|
8
8
|
inline?: boolean;
|
|
9
9
|
dynamic?: boolean;
|
|
10
10
|
}
|
|
11
|
-
export interface SymbolProps extends BuilderComponentsProp {
|
|
11
|
+
export interface SymbolProps extends BuilderComponentsProp, BuilderLinkComponentProp {
|
|
12
12
|
symbol?: SymbolInfo;
|
|
13
13
|
dataOnly?: boolean;
|
|
14
14
|
dynamic?: boolean;
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
<script>import { writable } from "svelte/store";
|
|
4
4
|
import "../../functions/extract-text-styles.js";
|
|
5
5
|
import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
|
|
6
|
-
import "../../functions/get-block-properties.js";
|
|
7
6
|
import { getProcessedBlock } from "../../functions/get-processed-block.js";
|
|
7
|
+
import "../../functions/get-style.js";
|
|
8
8
|
import { getComponent, getRepeatItemData } from "./block.helpers.js";
|
|
9
9
|
import BlockStyles from "./components/block-styles.svelte";
|
|
10
10
|
import BlockWrapper from "./components/block-wrapper.svelte";
|
|
@@ -13,6 +13,7 @@ import RepeatedBlock from "./components/repeated-block.svelte";
|
|
|
13
13
|
export let block;
|
|
14
14
|
export let context;
|
|
15
15
|
export let registeredComponents;
|
|
16
|
+
export let linkComponent;
|
|
16
17
|
$: blockComponent = () => {
|
|
17
18
|
return getComponent({
|
|
18
19
|
block: block,
|
|
@@ -39,6 +40,12 @@ $: processedBlock = () => {
|
|
|
39
40
|
});
|
|
40
41
|
};
|
|
41
42
|
$: Tag = () => {
|
|
43
|
+
const shouldUseLink = block.tagName === "a" ||
|
|
44
|
+
processedBlock().properties?.href ||
|
|
45
|
+
processedBlock().href;
|
|
46
|
+
if (shouldUseLink) {
|
|
47
|
+
return linkComponent || "a";
|
|
48
|
+
}
|
|
42
49
|
return block.tagName || "div";
|
|
43
50
|
};
|
|
44
51
|
$: canShowBlock = () => {
|
|
@@ -70,6 +77,13 @@ $: componentRefProps = () => {
|
|
|
70
77
|
componentOptions: {
|
|
71
78
|
...getBlockComponentOptions(processedBlock()),
|
|
72
79
|
builderContext: context,
|
|
80
|
+
...(blockComponent?.()?.name === "Core:Button" ||
|
|
81
|
+
blockComponent?.()?.name === "Symbol" ||
|
|
82
|
+
blockComponent?.()?.name === "Columns"
|
|
83
|
+
? {
|
|
84
|
+
builderLinkComponent: linkComponent,
|
|
85
|
+
}
|
|
86
|
+
: {}),
|
|
73
87
|
...(blockComponent?.()?.name === "Symbol" ||
|
|
74
88
|
blockComponent?.()?.name === "Columns"
|
|
75
89
|
? {
|
|
@@ -78,6 +92,7 @@ $: componentRefProps = () => {
|
|
|
78
92
|
: {}),
|
|
79
93
|
},
|
|
80
94
|
context: childrenContext,
|
|
95
|
+
linkComponent: linkComponent,
|
|
81
96
|
registeredComponents: registeredComponents,
|
|
82
97
|
builderBlock: processedBlock(),
|
|
83
98
|
includeBlockProps: blockComponent?.()?.noWrap === true,
|
|
@@ -92,13 +107,19 @@ let childrenContext = writable($context);
|
|
|
92
107
|
|
|
93
108
|
{#if !blockComponent?.()?.noWrap}
|
|
94
109
|
{#if !repeatItem()}
|
|
95
|
-
<BlockWrapper
|
|
110
|
+
<BlockWrapper
|
|
111
|
+
Wrapper={Tag()}
|
|
112
|
+
block={processedBlock()}
|
|
113
|
+
{context}
|
|
114
|
+
{linkComponent}
|
|
115
|
+
>
|
|
96
116
|
<ComponentRef
|
|
97
117
|
componentRef={componentRefProps().componentRef}
|
|
98
118
|
componentOptions={componentRefProps().componentOptions}
|
|
99
119
|
blockChildren={componentRefProps().blockChildren}
|
|
100
120
|
context={componentRefProps().context}
|
|
101
121
|
registeredComponents={componentRefProps().registeredComponents}
|
|
122
|
+
linkComponent={componentRefProps().linkComponent}
|
|
102
123
|
builderBlock={componentRefProps().builderBlock}
|
|
103
124
|
includeBlockProps={componentRefProps().includeBlockProps}
|
|
104
125
|
isInteractive={componentRefProps().isInteractive}
|
|
@@ -109,6 +130,7 @@ let childrenContext = writable($context);
|
|
|
109
130
|
block={child}
|
|
110
131
|
context={childrenContext}
|
|
111
132
|
{registeredComponents}
|
|
133
|
+
{linkComponent}
|
|
112
134
|
/>
|
|
113
135
|
{/each}
|
|
114
136
|
</BlockWrapper>
|
|
@@ -118,6 +140,7 @@ let childrenContext = writable($context);
|
|
|
118
140
|
repeatContext={data.context}
|
|
119
141
|
block={data.block}
|
|
120
142
|
{registeredComponents}
|
|
143
|
+
{linkComponent}
|
|
121
144
|
/>
|
|
122
145
|
{/each}
|
|
123
146
|
{/if}
|
|
@@ -128,6 +151,7 @@ let childrenContext = writable($context);
|
|
|
128
151
|
blockChildren={componentRefProps().blockChildren}
|
|
129
152
|
context={componentRefProps().context}
|
|
130
153
|
registeredComponents={componentRefProps().registeredComponents}
|
|
154
|
+
linkComponent={componentRefProps().linkComponent}
|
|
131
155
|
builderBlock={componentRefProps().builderBlock}
|
|
132
156
|
includeBlockProps={componentRefProps().includeBlockProps}
|
|
133
157
|
isInteractive={componentRefProps().isInteractive}
|
|
@@ -3,6 +3,7 @@ type BlockWrapperProps = {
|
|
|
3
3
|
Wrapper: string;
|
|
4
4
|
block: BuilderBlock;
|
|
5
5
|
context: Writable<BuilderContextInterface>;
|
|
6
|
+
linkComponent: any;
|
|
6
7
|
};
|
|
7
8
|
import type { BuilderContextInterface } from "../../../context/types.js";
|
|
8
9
|
import type { BuilderBlock } from "../../../types/builder-block.js";
|
|
@@ -16,6 +16,7 @@ export interface ComponentProps {
|
|
|
16
16
|
blockChildren: BuilderBlock[];
|
|
17
17
|
context: Writable<BuilderContextInterface>;
|
|
18
18
|
registeredComponents: RegisteredComponents;
|
|
19
|
+
linkComponent: any;
|
|
19
20
|
builderBlock: BuilderBlock;
|
|
20
21
|
includeBlockProps: boolean;
|
|
21
22
|
isInteractive: boolean | undefined;
|
|
@@ -25,8 +26,7 @@ export declare const getWrapperProps: ({ componentOptions, builderBlock, context
|
|
|
25
26
|
}) => InteractiveElementProps | {
|
|
26
27
|
attributes?: {
|
|
27
28
|
'builder-id': string | undefined;
|
|
28
|
-
style: string | Partial<CSSStyleDeclaration
|
|
29
|
-
class: string;
|
|
29
|
+
style: string | Partial<CSSStyleDeclaration>;
|
|
30
30
|
href: any;
|
|
31
31
|
} | {
|
|
32
32
|
[index: string]: any;
|
|
@@ -7,6 +7,7 @@ export let componentRef;
|
|
|
7
7
|
export let componentOptions;
|
|
8
8
|
export let builderBlock;
|
|
9
9
|
export let context;
|
|
10
|
+
export let linkComponent;
|
|
10
11
|
export let includeBlockProps;
|
|
11
12
|
export let blockChildren;
|
|
12
13
|
export let registeredComponents;
|
|
@@ -21,13 +22,14 @@ let Wrapper = isInteractive ? InteractiveElement : componentRef;
|
|
|
21
22
|
builderBlock: builderBlock,
|
|
22
23
|
context: context,
|
|
23
24
|
componentRef: componentRef,
|
|
25
|
+
linkComponent: linkComponent,
|
|
24
26
|
includeBlockProps: includeBlockProps,
|
|
25
27
|
isInteractive: isInteractive,
|
|
26
28
|
contextValue: $context,
|
|
27
29
|
})}
|
|
28
30
|
>
|
|
29
31
|
{#each blockChildren as child (child.id)}
|
|
30
|
-
<Block block={child} {context} {registeredComponents} />
|
|
32
|
+
<Block block={child} {context} {registeredComponents} {linkComponent} />
|
|
31
33
|
{/each}
|
|
32
34
|
</svelte:component>
|
|
33
35
|
{/if}
|
|
@@ -7,6 +7,7 @@ declare const __propDef: {
|
|
|
7
7
|
componentOptions: ComponentProps["componentOptions"];
|
|
8
8
|
builderBlock: ComponentProps["builderBlock"];
|
|
9
9
|
context: ComponentProps["context"];
|
|
10
|
+
linkComponent: ComponentProps["linkComponent"];
|
|
10
11
|
includeBlockProps: ComponentProps["includeBlockProps"];
|
|
11
12
|
blockChildren: ComponentProps["blockChildren"];
|
|
12
13
|
registeredComponents: ComponentProps["registeredComponents"];
|
|
@@ -7,8 +7,9 @@ import Block from "../block.svelte";
|
|
|
7
7
|
export let repeatContext;
|
|
8
8
|
export let block;
|
|
9
9
|
export let registeredComponents;
|
|
10
|
+
export let linkComponent;
|
|
10
11
|
let store = writable(repeatContext);
|
|
11
12
|
setContext(BuilderContext.key, store);
|
|
12
13
|
</script>
|
|
13
14
|
|
|
14
|
-
<Block {block} context={store} {registeredComponents} />
|
|
15
|
+
<Block {block} context={store} {registeredComponents} {linkComponent} />
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
type Props = {
|
|
3
|
-
block: BuilderBlock;
|
|
2
|
+
type Props = Omit<BlockProps, "context"> & {
|
|
4
3
|
repeatContext: BuilderContextInterface;
|
|
5
|
-
registeredComponents: RegisteredComponents;
|
|
6
4
|
};
|
|
7
|
-
import type { BuilderContextInterface
|
|
8
|
-
import type {
|
|
5
|
+
import type { BuilderContextInterface } from "../../../context/types.js";
|
|
6
|
+
import type { BlockProps } from "../block.svelte";
|
|
9
7
|
declare const __propDef: {
|
|
10
8
|
props: {
|
|
11
9
|
repeatContext: Props["repeatContext"];
|
|
12
10
|
block: Props["block"];
|
|
13
11
|
registeredComponents: Props["registeredComponents"];
|
|
12
|
+
linkComponent: Props["linkComponent"];
|
|
14
13
|
};
|
|
15
14
|
events: {
|
|
16
15
|
[evt: string]: CustomEvent<any>;
|
|
@@ -8,6 +8,7 @@ export let parent;
|
|
|
8
8
|
export let path;
|
|
9
9
|
export let styleProp;
|
|
10
10
|
export let context = undefined;
|
|
11
|
+
export let linkComponent = undefined;
|
|
11
12
|
export let registeredComponents = undefined;
|
|
12
13
|
let builderContext = getContext(BuilderContext.key);
|
|
13
14
|
let componentsContext = getContext(ComponentsContext.key);
|
|
@@ -25,6 +26,7 @@ let componentsContext = getContext(ComponentsContext.key);
|
|
|
25
26
|
{#each blocks as block (block.id)}
|
|
26
27
|
<Block
|
|
27
28
|
{block}
|
|
29
|
+
{linkComponent}
|
|
28
30
|
context={context || builderContext}
|
|
29
31
|
registeredComponents={registeredComponents ||
|
|
30
32
|
componentsContext.registeredComponents}
|
|
@@ -5,4 +5,5 @@ import type { BlocksWrapperProps } from './blocks-wrapper.svelte';
|
|
|
5
5
|
export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'>> & {
|
|
6
6
|
context?: Writable<BuilderContextInterface>;
|
|
7
7
|
registeredComponents?: RegisteredComponents;
|
|
8
|
+
linkComponent?: any;
|
|
8
9
|
};
|