@lowdefy/blocks-basic 0.0.0-experimental-20250915134255 → 0.0.0-experimental-20251010122007
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/dist/blocks/Anchor/documentation.md +122 -0
- package/dist/blocks/Box/documentation.md +55 -0
- package/dist/blocks/DangerousHtml/documentation.md +97 -0
- package/dist/blocks/Html/documentation.md +85 -0
- package/dist/blocks/Icon/documentation.md +83 -0
- package/dist/blocks/Img/documentation.md +99 -0
- package/dist/blocks/List/documentation.md +125 -0
- package/dist/blocks/Span/documentation.md +51 -0
- package/package.json +5 -5
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
<TITLE>
|
|
2
|
+
Anchor
|
|
3
|
+
</TITLE>
|
|
4
|
+
|
|
5
|
+
<DESCRIPTION>
|
|
6
|
+
|
|
7
|
+
Anchor link block. Creates a clickable icon and/ or text.
|
|
8
|
+
|
|
9
|
+
> When changing the relationship (`rel`) property of the linked URL, make sure you understand the security implications. Read more about link types [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
|
|
10
|
+
|
|
11
|
+
</DESCRIPTION>
|
|
12
|
+
|
|
13
|
+
<SCHEMA>
|
|
14
|
+
|
|
15
|
+
```json
|
|
16
|
+
{
|
|
17
|
+
"type": "object",
|
|
18
|
+
"properties": {
|
|
19
|
+
"type": "object",
|
|
20
|
+
"additionalProperties": false,
|
|
21
|
+
"properties": {
|
|
22
|
+
"ariaLabel": {
|
|
23
|
+
"type": "string",
|
|
24
|
+
"description": "Arial-label to apply to link tag."
|
|
25
|
+
},
|
|
26
|
+
"back": {
|
|
27
|
+
"type": "boolean",
|
|
28
|
+
"description": "When the link is clicked, trigger the browser back."
|
|
29
|
+
},
|
|
30
|
+
"home": {
|
|
31
|
+
"type": "boolean",
|
|
32
|
+
"description": "When the link is clicked, route to the home page."
|
|
33
|
+
},
|
|
34
|
+
"input": {
|
|
35
|
+
"type": "object",
|
|
36
|
+
"description": "When the link is clicked, pass data as the input object to the next Lowdefy page. Can only be used with pageId link and newTab false.",
|
|
37
|
+
"docs": {
|
|
38
|
+
"displayType": "yaml"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"urlQuery": {
|
|
42
|
+
"type": "object",
|
|
43
|
+
"description": "When the link is clicked, pass data as a url query to the next page.",
|
|
44
|
+
"docs": {
|
|
45
|
+
"displayType": "yaml"
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
"disabled": {
|
|
49
|
+
"type": "boolean",
|
|
50
|
+
"default": false,
|
|
51
|
+
"description": "Disable the anchor if true."
|
|
52
|
+
},
|
|
53
|
+
"icon": {
|
|
54
|
+
"type": ["string", "object"],
|
|
55
|
+
"description": "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block for anchor icon.",
|
|
56
|
+
"docs": {
|
|
57
|
+
"displayType": "icon"
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
"pageId": {
|
|
61
|
+
"type": "string",
|
|
62
|
+
"description": "When the link is clicked, route to the provided Lowdefy page."
|
|
63
|
+
},
|
|
64
|
+
"href": {
|
|
65
|
+
"type": "string",
|
|
66
|
+
"description": "The href to link to when the anchor link is clicked."
|
|
67
|
+
},
|
|
68
|
+
"url": {
|
|
69
|
+
"type": "string",
|
|
70
|
+
"description": "External url to link to when the anchor link is clicked."
|
|
71
|
+
},
|
|
72
|
+
"rel": {
|
|
73
|
+
"type": "string",
|
|
74
|
+
"default": "noopener noreferrer",
|
|
75
|
+
"description": "The relationship of the linked URL as space-separated link types."
|
|
76
|
+
},
|
|
77
|
+
"newTab": {
|
|
78
|
+
"type": "boolean",
|
|
79
|
+
"default": false,
|
|
80
|
+
"description": "Open link in a new tab when the anchor link is clicked."
|
|
81
|
+
},
|
|
82
|
+
"replace": {
|
|
83
|
+
"type": "boolean",
|
|
84
|
+
"default": false,
|
|
85
|
+
"description": "Prevent adding a new entry into browser history by replacing the url instead of pushing into history. Can only be used with pageId link and newTab false."
|
|
86
|
+
},
|
|
87
|
+
"scroll": {
|
|
88
|
+
"type": "boolean",
|
|
89
|
+
"default": false,
|
|
90
|
+
"description": "Disable scrolling to the top of the page after page transition. Can only be used with pageId link and newTab false."
|
|
91
|
+
},
|
|
92
|
+
"style": {
|
|
93
|
+
"type": "object",
|
|
94
|
+
"description": "Css style object to applied to anchor.",
|
|
95
|
+
"docs": {
|
|
96
|
+
"displayType": "yaml"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
"title": {
|
|
100
|
+
"type": "string",
|
|
101
|
+
"description": "Text to display in the anchor."
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
"events": {
|
|
106
|
+
"type": "object",
|
|
107
|
+
"additionalProperties": false,
|
|
108
|
+
"properties": {
|
|
109
|
+
"onClick": {
|
|
110
|
+
"type": "array",
|
|
111
|
+
"description": "Called when Anchor is clicked."
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
</SCHEMA>
|
|
119
|
+
|
|
120
|
+
<EXAMPLES>
|
|
121
|
+
|
|
122
|
+
</EXAMPLES>
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<TITLE>
|
|
2
|
+
Box
|
|
3
|
+
</TITLE>
|
|
4
|
+
|
|
5
|
+
<DESCRIPTION>
|
|
6
|
+
|
|
7
|
+
A Box is a container that places sub-blocks into a html `<div>`.
|
|
8
|
+
The Box has a single area, `content`.
|
|
9
|
+
|
|
10
|
+
</DESCRIPTION>
|
|
11
|
+
|
|
12
|
+
<SCHEMA>
|
|
13
|
+
|
|
14
|
+
```json
|
|
15
|
+
{
|
|
16
|
+
"type": "object",
|
|
17
|
+
"properties": {
|
|
18
|
+
"type": "object",
|
|
19
|
+
"additionalProperties": false,
|
|
20
|
+
"properties": {
|
|
21
|
+
"content": {
|
|
22
|
+
"type": "string",
|
|
23
|
+
"description": "Box content string. Overrides the \"content\" content area."
|
|
24
|
+
},
|
|
25
|
+
"style": {
|
|
26
|
+
"type": "object",
|
|
27
|
+
"description": "Css style object to apply to Box div.",
|
|
28
|
+
"docs": {
|
|
29
|
+
"displayType": "yaml"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"events": {
|
|
35
|
+
"type": "object",
|
|
36
|
+
"additionalProperties": false,
|
|
37
|
+
"properties": {
|
|
38
|
+
"onClick": {
|
|
39
|
+
"type": "array",
|
|
40
|
+
"description": "Trigger actions when the Box is clicked."
|
|
41
|
+
},
|
|
42
|
+
"onPaste": {
|
|
43
|
+
"type": "array",
|
|
44
|
+
"description": "Trigger actions when the element is focused and a paste event is triggered."
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
</SCHEMA>
|
|
52
|
+
|
|
53
|
+
<EXAMPLES>
|
|
54
|
+
|
|
55
|
+
</EXAMPLES>
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
<TITLE>
|
|
2
|
+
DangerousHtml
|
|
3
|
+
</TITLE>
|
|
4
|
+
|
|
5
|
+
<DESCRIPTION>
|
|
6
|
+
|
|
7
|
+
A block to render HTML with the ability to customize the [DOMPurify's options](https://github.com/cure53/DOMPurify#can-i-configure-dompurify).
|
|
8
|
+
|
|
9
|
+
> The DangerousHtml block sanitizes HTML using [DOMPurify's](https://github.com/cure53/DOMPurify) with the ability to customize the sanitization options. This comes with some security considerations, please consider [DOMPurify's Security Goals and Threat Model](https://github.com/cure53/DOMPurify/wiki/Security-Goals-&-Threat-Model) for more details regarding the security impact of using the DangerousHtml block.
|
|
10
|
+
|
|
11
|
+
> In short, it is strongly advised to never render any user input DangerousHtml content, only render hardcoded or trusted HTML content.
|
|
12
|
+
|
|
13
|
+
</DESCRIPTION>
|
|
14
|
+
|
|
15
|
+
<SCHEMA>
|
|
16
|
+
|
|
17
|
+
```json
|
|
18
|
+
{
|
|
19
|
+
"type": "object",
|
|
20
|
+
"properties": {
|
|
21
|
+
"type": "object",
|
|
22
|
+
"additionalProperties": false,
|
|
23
|
+
"properties": {
|
|
24
|
+
"html": {
|
|
25
|
+
"type": "string",
|
|
26
|
+
"description": "Content to be rendered as Html.",
|
|
27
|
+
"docs": {
|
|
28
|
+
"displayType": "text-area"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
"DOMPurifyOptions": {
|
|
32
|
+
"type": "object",
|
|
33
|
+
"description": "Customize DOMPurify options. Options are only applied when the block is mounted, thus any parsed settings is only applied at first render.",
|
|
34
|
+
"docs": {
|
|
35
|
+
"displayType": "yaml"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
"style": {
|
|
39
|
+
"type": "object",
|
|
40
|
+
"description": "Css style object to apply to Html div.",
|
|
41
|
+
"docs": {
|
|
42
|
+
"displayType": "yaml"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
</SCHEMA>
|
|
51
|
+
|
|
52
|
+
<EXAMPLES>
|
|
53
|
+
|
|
54
|
+
### Basic DangerousHtml
|
|
55
|
+
|
|
56
|
+
```yaml
|
|
57
|
+
id: basic_example
|
|
58
|
+
type: DangerousHtml
|
|
59
|
+
properties:
|
|
60
|
+
html: |
|
|
61
|
+
<div style="background: #123456; padding: 10px;"><h1 style="color: white;">A simple white title box</h1></div>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### DangerousHtml with iframes sanitized
|
|
65
|
+
|
|
66
|
+
```yaml
|
|
67
|
+
id: sanitized_iframes_example
|
|
68
|
+
type: DangerousHtml
|
|
69
|
+
properties:
|
|
70
|
+
html: |
|
|
71
|
+
The iframe was removed: <iframe width="560" height="315" src="https://www.youtube.com/embed/pkCJpDleMtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> - title: DangerousHtml with iframes enabled
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### DangerousHtml with iframes not sanitized
|
|
75
|
+
|
|
76
|
+
```yaml
|
|
77
|
+
id: iframes_example
|
|
78
|
+
type: DangerousHtml
|
|
79
|
+
properties:
|
|
80
|
+
DOMPurifyOptions:
|
|
81
|
+
ADD_TAGS:
|
|
82
|
+
- iframe
|
|
83
|
+
html: |
|
|
84
|
+
The iframe was not removed: <iframe width="560" height="315" src="https://www.youtube.com/embed/pkCJpDleMtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### DangerousHtml basic sanitization
|
|
88
|
+
|
|
89
|
+
```yaml
|
|
90
|
+
id: sanitized_example
|
|
91
|
+
type: DangerousHtml
|
|
92
|
+
properties:
|
|
93
|
+
html: |
|
|
94
|
+
<div style="color: red; border: 2px dashed blue; padding: 10px;"><script>alert("hello world")</script><img src=x onerror=alert("img") />A little bit of bad html sanitized.</div>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
</EXAMPLES>
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<TITLE>
|
|
2
|
+
Html
|
|
3
|
+
</TITLE>
|
|
4
|
+
|
|
5
|
+
<DESCRIPTION>
|
|
6
|
+
|
|
7
|
+
A block to render HTML.
|
|
8
|
+
|
|
9
|
+
> The Html block sanitizes HTML using [DOMPurify's](https://github.com/cure53/DOMPurify) default configuration. This comes with some security considerations, please consider [DOMPurify's Security Goals and Threat Model](https://github.com/cure53/DOMPurify/wiki/Security-Goals-&-Threat-Model) for more details regarding the security impact of using the Html block. In short, it is strongly advised to never render any user input Html content, only render hardcoded or trusted HTML content.
|
|
10
|
+
|
|
11
|
+
</DESCRIPTION>
|
|
12
|
+
|
|
13
|
+
<SCHEMA>
|
|
14
|
+
|
|
15
|
+
```json
|
|
16
|
+
{
|
|
17
|
+
"type": "object",
|
|
18
|
+
"properties": {
|
|
19
|
+
"type": "object",
|
|
20
|
+
"additionalProperties": false,
|
|
21
|
+
"properties": {
|
|
22
|
+
"html": {
|
|
23
|
+
"type": "string",
|
|
24
|
+
"description": "Content to be rendered as Html.",
|
|
25
|
+
"docs": {
|
|
26
|
+
"displayType": "text-area"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
"style": {
|
|
30
|
+
"type": "object",
|
|
31
|
+
"description": "Css style object to apply to Html div.",
|
|
32
|
+
"docs": {
|
|
33
|
+
"displayType": "yaml"
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
"events": {
|
|
39
|
+
"type": "object",
|
|
40
|
+
"additionalProperties": false,
|
|
41
|
+
"properties": {
|
|
42
|
+
"onTextSelection": {
|
|
43
|
+
"type": "array",
|
|
44
|
+
"description": "Trigger action when text is selected and pass selected text to the event object."
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
</SCHEMA>
|
|
52
|
+
|
|
53
|
+
<EXAMPLES>
|
|
54
|
+
|
|
55
|
+
### Basic DangerousHtml
|
|
56
|
+
|
|
57
|
+
```yaml
|
|
58
|
+
id: basic_example
|
|
59
|
+
type: Html
|
|
60
|
+
properties:
|
|
61
|
+
html: |
|
|
62
|
+
<div style="background: #123456; padding: 10px;"><h1 style="color: white;">A simple white title box</h1></div>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### DangerousHtml with iframes sanitized
|
|
66
|
+
|
|
67
|
+
```yaml
|
|
68
|
+
id: sanitized_iframes_example
|
|
69
|
+
type: Html
|
|
70
|
+
properties:
|
|
71
|
+
html: |
|
|
72
|
+
The iframe was removed: <iframe style="max-width: 512px;" width="100%" src="https://www.youtube.com/embed/7N7GWdlQJlU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> - title: DangerousHtml with iframes enabled
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### DangerousHtml basic sanitization
|
|
76
|
+
|
|
77
|
+
```yaml
|
|
78
|
+
id: sanitized_example
|
|
79
|
+
type: Html
|
|
80
|
+
properties:
|
|
81
|
+
html: |
|
|
82
|
+
<div style="color: red; border: 2px dashed blue; padding: 10px;"><script>alert("hello world")</script><img src=x onerror=alert("img") />A little bit of bad html sanitized.</div>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
</EXAMPLES>
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
<TITLE>
|
|
2
|
+
Icon
|
|
3
|
+
</TITLE>
|
|
4
|
+
|
|
5
|
+
<DESCRIPTION>
|
|
6
|
+
|
|
7
|
+
A Icon component. Render Ant Design and other icons
|
|
8
|
+
|
|
9
|
+
</DESCRIPTION>
|
|
10
|
+
|
|
11
|
+
<SCHEMA>
|
|
12
|
+
|
|
13
|
+
```json
|
|
14
|
+
{
|
|
15
|
+
"type": "object",
|
|
16
|
+
"properties": {
|
|
17
|
+
"type": "object",
|
|
18
|
+
"additionalProperties": false,
|
|
19
|
+
"properties": {
|
|
20
|
+
"color": {
|
|
21
|
+
"type": "string",
|
|
22
|
+
"description": "Primary icon color.",
|
|
23
|
+
"docs": {
|
|
24
|
+
"displayType": "color"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"name": {
|
|
28
|
+
"type": "string",
|
|
29
|
+
"default": "AiOutlineCloseCircle",
|
|
30
|
+
"description": "Name of icon to be displayed."
|
|
31
|
+
},
|
|
32
|
+
"rotate": {
|
|
33
|
+
"type": "number",
|
|
34
|
+
"description": "Number of degrees to rotate the icon."
|
|
35
|
+
},
|
|
36
|
+
"size": {
|
|
37
|
+
"type": ["string", "number"],
|
|
38
|
+
"description": "Size of the icon.",
|
|
39
|
+
"docs": {
|
|
40
|
+
"displayType": "number"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"spin": {
|
|
44
|
+
"type": "boolean",
|
|
45
|
+
"default": false,
|
|
46
|
+
"description": "Continuously spin icon with animation."
|
|
47
|
+
},
|
|
48
|
+
"title": {
|
|
49
|
+
"type": "string",
|
|
50
|
+
"description": "Icon hover title for accessibility."
|
|
51
|
+
},
|
|
52
|
+
"style": {
|
|
53
|
+
"type": "object",
|
|
54
|
+
"description": "CSS style object.",
|
|
55
|
+
"docs": {
|
|
56
|
+
"displayType": "yaml"
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"disableLoadingIcon": {
|
|
60
|
+
"type": "boolean",
|
|
61
|
+
"default": false,
|
|
62
|
+
"description": "While loading after the icon has been clicked, don't render the loading icon."
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
"events": {
|
|
67
|
+
"type": "object",
|
|
68
|
+
"additionalProperties": false,
|
|
69
|
+
"properties": {
|
|
70
|
+
"onClick": {
|
|
71
|
+
"type": "array",
|
|
72
|
+
"description": "Trigger actions when icon is clicked."
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
</SCHEMA>
|
|
80
|
+
|
|
81
|
+
<EXAMPLES>
|
|
82
|
+
|
|
83
|
+
</EXAMPLES>
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
<TITLE>
|
|
2
|
+
Img
|
|
3
|
+
</TITLE>
|
|
4
|
+
|
|
5
|
+
<DESCRIPTION>
|
|
6
|
+
|
|
7
|
+
A block to render a HTML [`<img/>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) element.
|
|
8
|
+
|
|
9
|
+
</DESCRIPTION>
|
|
10
|
+
|
|
11
|
+
<SCHEMA>
|
|
12
|
+
|
|
13
|
+
```json
|
|
14
|
+
{
|
|
15
|
+
"type": "object",
|
|
16
|
+
"properties": {
|
|
17
|
+
"type": "object",
|
|
18
|
+
"additionalProperties": false,
|
|
19
|
+
"required": ["src"],
|
|
20
|
+
"properties": {
|
|
21
|
+
"src": {
|
|
22
|
+
"type": "string",
|
|
23
|
+
"description": "The image URL."
|
|
24
|
+
},
|
|
25
|
+
"alt": {
|
|
26
|
+
"type": "string",
|
|
27
|
+
"description": "Alternative text description of the image."
|
|
28
|
+
},
|
|
29
|
+
"crossOrigin": {
|
|
30
|
+
"type": "string",
|
|
31
|
+
"enum": ["anonymous", "use-credentials"],
|
|
32
|
+
"description": "Indicates if the fetching of the image must be done using a CORS request."
|
|
33
|
+
},
|
|
34
|
+
"decoding": {
|
|
35
|
+
"type": "string",
|
|
36
|
+
"enum": ["sync", "async", "auto"],
|
|
37
|
+
"description": "An image decoding hint to the browser. Sync for atomic presentation with other content, async, to reduce delay in presenting other content and auto leave to browser to decide."
|
|
38
|
+
},
|
|
39
|
+
"height": {
|
|
40
|
+
"type": "number",
|
|
41
|
+
"description": "Height of the image."
|
|
42
|
+
},
|
|
43
|
+
"loading": {
|
|
44
|
+
"type": "string",
|
|
45
|
+
"enum": ["eager", "lazy"],
|
|
46
|
+
"description": "How the browser should load the image. Eager loads the image immediately, lazy, defers loading until the image it reaches a calculated distance from the viewport, as defined by the browser."
|
|
47
|
+
},
|
|
48
|
+
"sizes": {
|
|
49
|
+
"type": "string",
|
|
50
|
+
"description": "Indicating a set of source sizes of strings separated by commas."
|
|
51
|
+
},
|
|
52
|
+
"srcSet": {
|
|
53
|
+
"type": "string",
|
|
54
|
+
"description": "Possible image sources for the user agent to use, strings separated by commas.",
|
|
55
|
+
"docs": {
|
|
56
|
+
"displayType": "text-area"
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"style": {
|
|
60
|
+
"type": "object",
|
|
61
|
+
"description": "Css style object to applied to the image.",
|
|
62
|
+
"docs": {
|
|
63
|
+
"displayType": "yaml"
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
"width": {
|
|
67
|
+
"type": "number",
|
|
68
|
+
"description": "Width of the image."
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
</SCHEMA>
|
|
76
|
+
|
|
77
|
+
<EXAMPLES>
|
|
78
|
+
|
|
79
|
+
### Basic Img
|
|
80
|
+
|
|
81
|
+
```yaml
|
|
82
|
+
id: basic_example
|
|
83
|
+
type: Img
|
|
84
|
+
properties:
|
|
85
|
+
src: https://docs.lowdefy.com/logo-light-theme.png
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### srcset Img
|
|
89
|
+
|
|
90
|
+
```yaml
|
|
91
|
+
id: srcset_example
|
|
92
|
+
type: Img
|
|
93
|
+
properties:
|
|
94
|
+
src: https://docs.lowdefy.com/logo-light-theme.png
|
|
95
|
+
srcSet: https://docs.lowdefy.com/logo-square-light-theme.png 40w, https://docs.lowdefy.com/logo-light-theme.png 577w
|
|
96
|
+
sizes: '(max-width: 576px) 40px, 577px'
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
</EXAMPLES>
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
<TITLE>
|
|
2
|
+
List
|
|
3
|
+
</TITLE>
|
|
4
|
+
|
|
5
|
+
<DESCRIPTION>
|
|
6
|
+
|
|
7
|
+
The List block renders a content area for all items in the array. All list blocks create a array in state at their block `id`. The list content areas are rendered for each index in the array. See the [List Concept](/lists) page for a detailed description on how to work with lists.
|
|
8
|
+
|
|
9
|
+
</DESCRIPTION>
|
|
10
|
+
|
|
11
|
+
<SCHEMA>
|
|
12
|
+
|
|
13
|
+
```json
|
|
14
|
+
{
|
|
15
|
+
"type": "object",
|
|
16
|
+
"properties": {
|
|
17
|
+
"type": "object",
|
|
18
|
+
"additionalProperties": false,
|
|
19
|
+
"properties": {
|
|
20
|
+
"direction": {
|
|
21
|
+
"type": "string",
|
|
22
|
+
"enum": ["row", "column", "row-reverse", "column-reverse"],
|
|
23
|
+
"description": "List content along a 'row' or down a 'column'. Applies the 'flex-direction' css property to the List block."
|
|
24
|
+
},
|
|
25
|
+
"wrap": {
|
|
26
|
+
"type": "string",
|
|
27
|
+
"enum": ["wrap", "nowrap", "wrap-reverse"],
|
|
28
|
+
"description": "Specifies wrapping style to be applied to List block as 'wrap', 'nowrap' or 'wrap-reverse'. Applies the 'flex-wrap' css property to the List block - defaults to 'wrap', requires List direction to be set."
|
|
29
|
+
},
|
|
30
|
+
"scroll": {
|
|
31
|
+
"type": "boolean",
|
|
32
|
+
"description": "Specifies whether scrolling should be applied to the List, can be true or false. Applies the 'overflow' css property to the List block - defaults to 'visible', requires List direction to be set."
|
|
33
|
+
},
|
|
34
|
+
"style": {
|
|
35
|
+
"type": "object",
|
|
36
|
+
"description": "Css style object to apply to List block.",
|
|
37
|
+
"docs": {
|
|
38
|
+
"displayType": "yaml"
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"events": {
|
|
44
|
+
"type": "object",
|
|
45
|
+
"additionalProperties": false,
|
|
46
|
+
"properties": {
|
|
47
|
+
"onClick": {
|
|
48
|
+
"type": "array",
|
|
49
|
+
"description": "Trigger actions when the List is clicked."
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
</SCHEMA>
|
|
57
|
+
|
|
58
|
+
<EXAMPLES>
|
|
59
|
+
|
|
60
|
+
### Todo List
|
|
61
|
+
|
|
62
|
+
```yaml
|
|
63
|
+
id: todo_app
|
|
64
|
+
type: Box
|
|
65
|
+
layout:
|
|
66
|
+
contentGutter: 16
|
|
67
|
+
blocks:
|
|
68
|
+
- id: todo_input
|
|
69
|
+
type: TextInput
|
|
70
|
+
layout:
|
|
71
|
+
grow: 1
|
|
72
|
+
properties:
|
|
73
|
+
label:
|
|
74
|
+
disabled: true
|
|
75
|
+
placeholder: Write something todo...
|
|
76
|
+
- id: add_item
|
|
77
|
+
type: Button
|
|
78
|
+
layout:
|
|
79
|
+
shrink: 1
|
|
80
|
+
properties:
|
|
81
|
+
icon: AiOutlinePlus
|
|
82
|
+
title: Add item
|
|
83
|
+
events:
|
|
84
|
+
onClick:
|
|
85
|
+
- id: add
|
|
86
|
+
type: SetState
|
|
87
|
+
params:
|
|
88
|
+
todo_input: null
|
|
89
|
+
todos:
|
|
90
|
+
_array.concat:
|
|
91
|
+
- - _state: todo_input
|
|
92
|
+
- _state: todos
|
|
93
|
+
- id: todos
|
|
94
|
+
type: List
|
|
95
|
+
layout:
|
|
96
|
+
contentGutter: 16
|
|
97
|
+
blocks:
|
|
98
|
+
- id: todos.$
|
|
99
|
+
type: TitleInput
|
|
100
|
+
layout:
|
|
101
|
+
grow: 1
|
|
102
|
+
properties:
|
|
103
|
+
level: 4
|
|
104
|
+
- id: remove_item
|
|
105
|
+
type: Icon
|
|
106
|
+
layout:
|
|
107
|
+
shrink: 1
|
|
108
|
+
properties:
|
|
109
|
+
name: AiOutlineMinusCircle
|
|
110
|
+
size: 18
|
|
111
|
+
events:
|
|
112
|
+
onClick:
|
|
113
|
+
- id: remove
|
|
114
|
+
type: CallMethod
|
|
115
|
+
messages:
|
|
116
|
+
loading: Removing Item...
|
|
117
|
+
success: Item Removed.
|
|
118
|
+
params:
|
|
119
|
+
blockId: todos
|
|
120
|
+
method: removeItem
|
|
121
|
+
args:
|
|
122
|
+
- _index: 0
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
</EXAMPLES>
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<TITLE>
|
|
2
|
+
Span
|
|
3
|
+
</TITLE>
|
|
4
|
+
|
|
5
|
+
<DESCRIPTION>
|
|
6
|
+
|
|
7
|
+
A Span is a container that places sub-blocks into a html `<span>`.
|
|
8
|
+
The Span has a single area, `content`.
|
|
9
|
+
|
|
10
|
+
</DESCRIPTION>
|
|
11
|
+
|
|
12
|
+
<SCHEMA>
|
|
13
|
+
|
|
14
|
+
```json
|
|
15
|
+
{
|
|
16
|
+
"type": "object",
|
|
17
|
+
"properties": {
|
|
18
|
+
"type": "object",
|
|
19
|
+
"additionalProperties": false,
|
|
20
|
+
"properties": {
|
|
21
|
+
"content": {
|
|
22
|
+
"type": "string",
|
|
23
|
+
"description": "Span content string. Overrides the \"content\" content area."
|
|
24
|
+
},
|
|
25
|
+
"style": {
|
|
26
|
+
"type": "object",
|
|
27
|
+
"description": "Css style object to apply to Span div.",
|
|
28
|
+
"docs": {
|
|
29
|
+
"displayType": "yaml"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"events": {
|
|
35
|
+
"type": "object",
|
|
36
|
+
"additionalProperties": false,
|
|
37
|
+
"properties": {
|
|
38
|
+
"onClick": {
|
|
39
|
+
"type": "array",
|
|
40
|
+
"description": "Trigger actions when the Span is clicked."
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
</SCHEMA>
|
|
48
|
+
|
|
49
|
+
<EXAMPLES>
|
|
50
|
+
|
|
51
|
+
</EXAMPLES>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lowdefy/blocks-basic",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-20251010122007",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "Basic html Lowdefy blocks.",
|
|
6
6
|
"homepage": "https://lowdefy.com",
|
|
@@ -40,16 +40,16 @@
|
|
|
40
40
|
"dist/*"
|
|
41
41
|
],
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@lowdefy/block-utils": "0.0.0-experimental-
|
|
44
|
-
"@lowdefy/helpers": "0.0.0-experimental-
|
|
43
|
+
"@lowdefy/block-utils": "0.0.0-experimental-20251010122007",
|
|
44
|
+
"@lowdefy/helpers": "0.0.0-experimental-20251010122007",
|
|
45
45
|
"dompurify": "3.2.4",
|
|
46
46
|
"react": "18.2.0",
|
|
47
47
|
"react-dom": "18.2.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@emotion/jest": "11.10.5",
|
|
51
|
-
"@lowdefy/block-dev": "0.0.0-experimental-
|
|
52
|
-
"@lowdefy/jest-yaml-transform": "0.0.0-experimental-
|
|
51
|
+
"@lowdefy/block-dev": "0.0.0-experimental-20251010122007",
|
|
52
|
+
"@lowdefy/jest-yaml-transform": "0.0.0-experimental-20251010122007",
|
|
53
53
|
"@swc/cli": "0.1.63",
|
|
54
54
|
"@swc/core": "1.3.99",
|
|
55
55
|
"@swc/jest": "0.2.29",
|