@lowdefy/blocks-basic 0.0.0-experimental-20260720072521 → 0.0.0-experimental-20260721080548

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 (33) hide show
  1. package/dist/blocks.js +0 -1
  2. package/dist/e2e.js +0 -1
  3. package/dist/metas.js +0 -1
  4. package/package.json +10 -10
  5. package/dist/blocks/Anchor/gallery.yaml +0 -316
  6. package/dist/blocks/Anchor/tests/Anchor.e2e.yaml +0 -78
  7. package/dist/blocks/Anchor/tests.yaml +0 -109
  8. package/dist/blocks/Box/gallery.yaml +0 -1369
  9. package/dist/blocks/Box/tests/Box.e2e.yaml +0 -78
  10. package/dist/blocks/Box/tests.yaml +0 -43
  11. package/dist/blocks/DangerousHtml/gallery.yaml +0 -182
  12. package/dist/blocks/DangerousHtml/tests/DangerousHtml.e2e.yaml +0 -33
  13. package/dist/blocks/DangerousHtml/tests.yaml +0 -83
  14. package/dist/blocks/Dynamic/Dynamic.js +0 -35
  15. package/dist/blocks/Dynamic/e2e.js +0 -16
  16. package/dist/blocks/Dynamic/meta.js +0 -76
  17. package/dist/blocks/Html/gallery.yaml +0 -239
  18. package/dist/blocks/Html/tests/Html.e2e.yaml +0 -56
  19. package/dist/blocks/Html/tests.yaml +0 -75
  20. package/dist/blocks/Icon/gallery.yaml +0 -702
  21. package/dist/blocks/Icon/tests/Icon.e2e.yaml +0 -43
  22. package/dist/blocks/Icon/tests.yaml +0 -54
  23. package/dist/blocks/Img/gallery.yaml +0 -446
  24. package/dist/blocks/Img/tests/Img.e2e.yaml +0 -61
  25. package/dist/blocks/Img/tests.yaml +0 -74
  26. package/dist/blocks/List/gallery.yaml +0 -523
  27. package/dist/blocks/List/tests/List.e2e.yaml +0 -199
  28. package/dist/blocks/List/tests.yaml +0 -471
  29. package/dist/blocks/Span/gallery.yaml +0 -664
  30. package/dist/blocks/Span/tests/Span.e2e.yaml +0 -59
  31. package/dist/blocks/Span/tests.yaml +0 -43
  32. package/dist/blocks/Throw/gallery.yaml +0 -40
  33. package/dist/blocks/Throw/tests.yaml +0 -20
@@ -1,523 +0,0 @@
1
- # Copyright 2020-2026 Lowdefy, Inc
2
-
3
- # Licensed under the Apache License, Version 2.0 (the "License");
4
- # you may not use this file except in compliance with the License.
5
- # You may obtain a copy of the License at
6
-
7
- # http://www.apache.org/licenses/LICENSE-2.0
8
-
9
- # Unless required by applicable law or agreed to in writing, software
10
- # distributed under the License is distributed on an "AS IS" BASIS,
11
- # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
- # See the License for the specific language governing permissions and
13
- # limitations under the License.
14
-
15
- # ──────────────────────────────────────────────
16
- # Basic Examples
17
- # ──────────────────────────────────────────────
18
-
19
- - title: Quick Notes
20
- blocks:
21
- - id: notes_header
22
- type: Box
23
- layout:
24
- justify: space-between
25
- align: center
26
- blocks:
27
- - id: notes_title
28
- type: Title
29
- layout:
30
- flex: 0 0 auto
31
- properties:
32
- content: Notes
33
- level: 4
34
- - id: notes_add
35
- type: Button
36
- layout:
37
- flex: 0 0 auto
38
- properties:
39
- title: Add Note
40
- icon: AiOutlinePlus
41
- color: primary
42
- variant: solid
43
- size: small
44
- events:
45
- onClick:
46
- - id: notes_push
47
- type: CallMethod
48
- params:
49
- blockId: notes
50
- method: pushItem
51
- - id: notes
52
- type: List
53
- properties:
54
- direction: row
55
- blocks:
56
- - id: notes.$.text
57
- type: TextInput
58
- layout:
59
- flex: 1 1 0
60
- properties:
61
- label:
62
- disabled: true
63
- placeholder: Type a note...
64
- - id: notes.$.rm
65
- type: Button
66
- layout:
67
- flex: 0 0 auto
68
- properties:
69
- icon: AiOutlineClose
70
- color: default
71
- variant: text
72
- shape: circle
73
- size: small
74
- events:
75
- onClick:
76
- - id: rm_note
77
- type: CallMethod
78
- params:
79
- blockId: notes
80
- method: removeItem
81
- args:
82
- - _index: 0
83
-
84
- - title: Skill Tags
85
- blocks:
86
- - id: skills
87
- type: List
88
- properties:
89
- direction: row
90
- wrap: wrap
91
- blocks:
92
- - id: skills.$.label
93
- type: Tag
94
- layout:
95
- flex: 0 0 auto
96
- properties:
97
- title:
98
- _state: skills.$.label
99
- color:
100
- _state: skills.$.color
101
- closable: true
102
- events:
103
- onClose:
104
- - id: rm_skill
105
- type: CallMethod
106
- params:
107
- blockId: skills
108
- method: removeItem
109
- args:
110
- - _index: 0
111
-
112
- # ──────────────────────────────────────────────
113
- # Advanced Examples
114
- # ──────────────────────────────────────────────
115
-
116
- - title: Task Board
117
- fullWidth: true
118
- blocks:
119
- - id: tasks_header
120
- type: Box
121
- layout:
122
- justify: space-between
123
- align: center
124
- blocks:
125
- - id: tasks_title
126
- type: Title
127
- layout:
128
- flex: 0 0 auto
129
- properties:
130
- content: Tasks
131
- level: 4
132
- - id: tasks_add
133
- type: Button
134
- layout:
135
- flex: 0 0 auto
136
- properties:
137
- title: Add Task
138
- icon: AiOutlinePlus
139
- color: primary
140
- variant: solid
141
- size: small
142
- events:
143
- onClick:
144
- - id: tasks_push
145
- type: CallMethod
146
- params:
147
- blockId: tasks
148
- method: pushItem
149
- - id: tasks
150
- type: List
151
- blocks:
152
- - id: tasks.$.done
153
- type: Switch
154
- layout:
155
- flex: 0 0 auto
156
- properties:
157
- label:
158
- disabled: true
159
- size: small
160
- - id: tasks.$.name
161
- type: TextInput
162
- required: true
163
- layout:
164
- flex: 1 1 0
165
- properties:
166
- label:
167
- disabled: true
168
- placeholder: Task name
169
- size: small
170
- - id: tasks.$.priority
171
- type: Selector
172
- layout:
173
- flex: 0 0 140px
174
- properties:
175
- label:
176
- disabled: true
177
- placeholder: Priority
178
- size: small
179
- options:
180
- - High
181
- - Medium
182
- - Low
183
- - id: tasks.$.pri_tag
184
- type: Tag
185
- layout:
186
- flex: 0 0 auto
187
- properties:
188
- title:
189
- _if_none:
190
- - _state: tasks.$.priority
191
- - ''
192
- color:
193
- _if:
194
- test:
195
- _eq:
196
- - _state: tasks.$.priority
197
- - High
198
- then: red
199
- else:
200
- _if:
201
- test:
202
- _eq:
203
- - _state: tasks.$.priority
204
- - Medium
205
- then: orange
206
- else: green
207
- - id: tasks.$.up
208
- type: Button
209
- layout:
210
- flex: 0 0 auto
211
- properties:
212
- icon: AiOutlineArrowUp
213
- color: default
214
- variant: text
215
- size: small
216
- shape: circle
217
- events:
218
- onClick:
219
- - id: tasks_up
220
- type: CallMethod
221
- params:
222
- blockId: tasks
223
- method: moveItemUp
224
- args:
225
- - _index: 0
226
- - id: tasks.$.down
227
- type: Button
228
- layout:
229
- flex: 0 0 auto
230
- properties:
231
- icon: AiOutlineArrowDown
232
- color: default
233
- variant: text
234
- size: small
235
- shape: circle
236
- events:
237
- onClick:
238
- - id: tasks_down
239
- type: CallMethod
240
- params:
241
- blockId: tasks
242
- method: moveItemDown
243
- args:
244
- - _index: 0
245
- - id: tasks.$.rm
246
- type: Button
247
- layout:
248
- flex: 0 0 auto
249
- properties:
250
- icon: AiOutlineDelete
251
- color: danger
252
- variant: text
253
- size: small
254
- shape: circle
255
- events:
256
- onClick:
257
- - id: tasks_rm
258
- type: CallMethod
259
- params:
260
- blockId: tasks
261
- method: removeItem
262
- args:
263
- - _index: 0
264
- - id: tasks_footer
265
- type: Box
266
- layout:
267
- justify: flex-end
268
- blocks:
269
- - id: tasks_save
270
- type: Button
271
- layout:
272
- flex: 0 0 auto
273
- properties:
274
- title: Save Tasks
275
- icon: AiOutlineSave
276
- color: primary
277
- variant: solid
278
- events:
279
- onClick:
280
- - id: tasks_validate
281
- type: Validate
282
- params:
283
- regex: ^tasks
284
- - id: tasks_msg
285
- type: DisplayMessage
286
- params:
287
- content: Tasks saved!
288
- status: success
289
-
290
- - title: User Directory
291
- fullWidth: true
292
- blocks:
293
- - id: users_header
294
- type: Box
295
- layout:
296
- justify: space-between
297
- align: center
298
- blocks:
299
- - id: users_title
300
- type: Title
301
- layout:
302
- flex: 0 0 auto
303
- properties:
304
- content: User Directory
305
- level: 4
306
- - id: users_btns
307
- type: Box
308
- layout:
309
- flex: 0 0 auto
310
- gap: 8
311
- blocks:
312
- - id: users_load
313
- type: Button
314
- layout:
315
- flex: 0 0 auto
316
- properties:
317
- title: Load Users
318
- icon: AiOutlineCloudDownload
319
- color: primary
320
- variant: solid
321
- size: small
322
- events:
323
- onClick:
324
- - id: fetch_users
325
- type: Fetch
326
- params:
327
- url: https://jsonplaceholder.typicode.com/users
328
- responseFunction: json
329
- - id: set_users
330
- type: SetState
331
- params:
332
- users:
333
- _actions: fetch_users.response
334
- - id: users_clear
335
- type: Button
336
- layout:
337
- flex: 0 0 auto
338
- properties:
339
- title: Clear
340
- color: default
341
- variant: outlined
342
- size: small
343
- events:
344
- onClick:
345
- - id: clear_users
346
- type: SetState
347
- params:
348
- users: []
349
- - id: users
350
- type: List
351
- blocks:
352
- - id: users.$.avatar
353
- type: Avatar
354
- layout:
355
- flex: 0 0 auto
356
- properties:
357
- content:
358
- _string.charAt:
359
- on:
360
- _if_none:
361
- - _state: users.$.name
362
- - '?'
363
- index: 0
364
- color: '#1677ff'
365
- - id: users.$.disp_name
366
- type: Paragraph
367
- layout:
368
- flex: 1 1 0
369
- properties:
370
- content:
371
- _state: users.$.name
372
- - id: users.$.disp_email
373
- type: Paragraph
374
- layout:
375
- flex: 1 1 0
376
- properties:
377
- content:
378
- _state: users.$.email
379
- type: secondary
380
- - id: users.$.disp_company
381
- type: Tag
382
- layout:
383
- flex: 0 0 auto
384
- properties:
385
- title:
386
- _state: users.$.company.name
387
- color: blue
388
-
389
- - title: Invoice Builder
390
- fullWidth: true
391
- blocks:
392
- - id: inv_header
393
- type: Box
394
- layout:
395
- justify: space-between
396
- align: center
397
- blocks:
398
- - id: inv_title
399
- type: Title
400
- layout:
401
- flex: 0 0 auto
402
- properties:
403
- content: 'Invoice #1042'
404
- level: 4
405
- - id: inv_add
406
- type: Button
407
- layout:
408
- flex: 0 0 auto
409
- properties:
410
- title: Add Line
411
- icon: AiOutlinePlus
412
- color: primary
413
- variant: dashed
414
- size: small
415
- events:
416
- onClick:
417
- - id: inv_push
418
- type: CallMethod
419
- params:
420
- blockId: inv
421
- method: pushItem
422
- - id: inv
423
- type: List
424
- blocks:
425
- - id: inv.$.desc
426
- type: TextInput
427
- required: true
428
- layout:
429
- flex: 3 1 0
430
- properties:
431
- label:
432
- disabled: true
433
- placeholder: Description
434
- - id: inv.$.qty
435
- type: NumberInput
436
- required: true
437
- layout:
438
- flex: 1 1 0
439
- properties:
440
- label:
441
- disabled: true
442
- placeholder: Qty
443
- min: 1
444
- - id: inv.$.price
445
- type: NumberInput
446
- required: true
447
- layout:
448
- flex: 1 1 0
449
- properties:
450
- label:
451
- disabled: true
452
- placeholder: Unit price
453
- min: 0
454
- step: 0.01
455
- - id: inv.$.total
456
- type: Paragraph
457
- layout:
458
- flex: 0 0 100px
459
- properties:
460
- content:
461
- _js: |
462
- const qty = state('inv.$.qty') || 0;
463
- const price = state('inv.$.price') || 0;
464
- return '$' + (qty * price).toFixed(2);
465
- - id: inv.$.rm
466
- type: Button
467
- layout:
468
- flex: 0 0 auto
469
- properties:
470
- icon: AiOutlineMinusCircle
471
- color: danger
472
- variant: text
473
- size: small
474
- shape: circle
475
- events:
476
- onClick:
477
- - id: inv_rm
478
- type: CallMethod
479
- params:
480
- blockId: inv
481
- method: removeItem
482
- args:
483
- - _index: 0
484
- - id: inv_footer
485
- type: Box
486
- layout:
487
- gap: 16
488
- justify: flex-end
489
- align: center
490
- blocks:
491
- - id: inv_total
492
- type: Statistic
493
- layout:
494
- flex: 0 0 auto
495
- properties:
496
- title: Total
497
- prefix: '$'
498
- precision: 2
499
- value:
500
- _js: |
501
- const items = state('inv') || [];
502
- return items.reduce((sum, item) =>
503
- sum + ((item.qty || 0) * (item.price || 0)), 0);
504
- - id: inv_submit
505
- type: Button
506
- layout:
507
- flex: 0 0 auto
508
- properties:
509
- title: Submit Invoice
510
- icon: AiOutlineSend
511
- color: primary
512
- variant: solid
513
- events:
514
- onClick:
515
- - id: inv_validate
516
- type: Validate
517
- params:
518
- regex: ^inv
519
- - id: inv_msg
520
- type: DisplayMessage
521
- params:
522
- content: Invoice submitted!
523
- status: success
@@ -1,199 +0,0 @@
1
- # Copyright 2020-2026 Lowdefy, Inc
2
-
3
- # Licensed under the Apache License, Version 2.0 (the "License");
4
- # you may not use this file except in compliance with the License.
5
- # You may obtain a copy of the License at
6
-
7
- # http://www.apache.org/licenses/LICENSE-2.0
8
-
9
- # Unless required by applicable law or agreed to in writing, software
10
- # distributed under the License is distributed on an "AS IS" BASIS,
11
- # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
- # See the License for the specific language governing permissions and
13
- # limitations under the License.
14
-
15
- id: list
16
- type: Box
17
-
18
- events:
19
- onInit:
20
- - id: set_defaults
21
- type: SetState
22
- params:
23
- # State keys must match blockIds for List blocks
24
- list_basic:
25
- - Item 1
26
- - Item 2
27
- - Item 3
28
- list_direction_row:
29
- - Row 1
30
- - Row 2
31
- - Row 3
32
- list_direction_column:
33
- - Col 1
34
- - Col 2
35
- - Col 3
36
- list_styled:
37
- - Styled 1
38
- - Styled 2
39
- list_wrap:
40
- - Wrap 1
41
- - Wrap 2
42
- - Wrap 3
43
- list_scroll:
44
- - Scroll 1
45
- - Scroll 2
46
- - Scroll 3
47
- list_clickable:
48
- - Click Item
49
- # list_empty is intentionally not set (undefined = empty list)
50
-
51
- blocks:
52
- # ============================================
53
- # BASIC RENDERING
54
- # ============================================
55
-
56
- - id: list_basic
57
- type: List
58
- blocks:
59
- - id: list_basic_item
60
- type: Span
61
- properties:
62
- content:
63
- _state: list_basic.$
64
-
65
- # ============================================
66
- # PROPERTY TESTS
67
- # ============================================
68
-
69
- # Direction row (flexbox)
70
- - id: list_direction_row
71
- type: List
72
- properties:
73
- direction: row
74
- blocks:
75
- - id: list_direction_row_item
76
- type: Span
77
- properties:
78
- content:
79
- _state: list_direction_row.$
80
- style:
81
- padding: 5px
82
- border: 1px solid gray
83
-
84
- # Direction column
85
- - id: list_direction_column
86
- type: List
87
- properties:
88
- direction: column
89
- blocks:
90
- - id: list_direction_column_item
91
- type: Span
92
- properties:
93
- content:
94
- _state: list_direction_column.$
95
- style:
96
- padding: 5px
97
- border: 1px solid gray
98
-
99
- # Custom style
100
- - id: list_styled
101
- type: List
102
- properties:
103
- style:
104
- backgroundColor: rgb(240, 240, 240)
105
- padding: 10px
106
- blocks:
107
- - id: list_styled_item
108
- type: Span
109
- properties:
110
- content:
111
- _state: list_styled.$
112
-
113
- # Wrap property (nowrap)
114
- - id: list_wrap
115
- type: List
116
- properties:
117
- direction: row
118
- wrap: nowrap
119
- style:
120
- width: 200px
121
- blocks:
122
- - id: list_wrap_item
123
- type: Span
124
- properties:
125
- content:
126
- _state: list_wrap.$
127
- style:
128
- minWidth: 100px
129
- padding: 5px
130
- border: 1px solid gray
131
-
132
- # Scroll property
133
- - id: list_scroll
134
- type: List
135
- properties:
136
- direction: row
137
- wrap: nowrap
138
- scroll: true
139
- style:
140
- width: 200px
141
- blocks:
142
- - id: list_scroll_item
143
- type: Span
144
- properties:
145
- content:
146
- _state: list_scroll.$
147
- style:
148
- minWidth: 100px
149
- padding: 5px
150
- border: 1px solid gray
151
-
152
- # ============================================
153
- # EVENT TESTS
154
- # ============================================
155
-
156
- - id: list_clickable
157
- type: List
158
- properties:
159
- style:
160
- cursor: pointer
161
- padding: 10px
162
- border: 1px solid gray
163
- events:
164
- onClick:
165
- - id: set_clicked
166
- type: SetState
167
- params:
168
- list_clicked: true
169
- blocks:
170
- - id: list_clickable_item
171
- type: Span
172
- properties:
173
- content:
174
- _state: list_clickable.$
175
-
176
- - id: onclick_display
177
- type: Span
178
- properties:
179
- content:
180
- _if:
181
- test:
182
- _eq:
183
- - _state: list_clicked
184
- - true
185
- then: List clicked!
186
- else: ''
187
-
188
- # ============================================
189
- # EMPTY LIST
190
- # ============================================
191
-
192
- - id: list_empty
193
- type: List
194
- blocks:
195
- - id: list_empty_item
196
- type: Span
197
- properties:
198
- content:
199
- _state: list_empty.$