@lowdefy/blocks-basic 0.0.0-experimental-20260928105334 → 0.0.0-experimental-20260928120643

package/dist/blocks/Anchor/Anchor.js

@@ -40,7 +40,7 @@ const AnchorBlock = ({ blockId, classNames, events, components: { Icon, Link, Sh
             },
             events: events,
             properties: get(events, 'onClick.loading') ? {
-                name: 'AiOutlineLoading3Quarters',
+                name: 'loading',
                 spin: true
             } : icon,
             styles: {

package/dist/blocks/Anchor/gallery.yaml

@@ -68,7 +68,7 @@
       properties:
         title: Link with Icon
         url: https://lowdefy.com
-        icon: AiOutlineLink
+        icon: link
     - id: icon_download
       type: Anchor
       layout:
@@ -76,7 +76,7 @@
       properties:
         title: Download
         url: https://lowdefy.com
-        icon: AiOutlineDownload
+        icon: download
     - id: icon_external
       type: Anchor
       layout:
@@ -84,7 +84,7 @@
       properties:
         title: External Link
         url: https://lowdefy.com
-        icon: AiOutlineExport
+        icon: SquareArrowOutUpRight
     - id: icon_mail
       type: Anchor
       layout:
@@ -92,7 +92,7 @@
       properties:
         title: Send Email
         url: https://lowdefy.com
-        icon: AiOutlineMail
+        icon: mail
     - id: icon_github
       type: Anchor
       layout:
@@ -100,7 +100,7 @@
       properties:
         title: GitHub
         url: https://github.com/lowdefy/lowdefy
-        icon: AiOutlineGithub
+        icon: GitBranch
     - id: icon_object
       type: Anchor
       layout:
@@ -109,7 +109,7 @@
         title: Colored Icon
         url: https://lowdefy.com
         icon:
-          name: AiOutlineHeart
+          name: heart
           color: '#ff4d4f'
 
 - title: New Tab
@@ -130,7 +130,7 @@
         title: External Docs
         url: https://docs.lowdefy.com
         newTab: true
-        icon: AiOutlineExport
+        icon: SquareArrowOutUpRight
 
 - title: Disabled
   blocks:
@@ -150,7 +150,7 @@
         title: Disabled with Icon
         url: https://lowdefy.com
         disabled: true
-        icon: AiOutlineLock
+        icon: lock
     - id: enabled_link
       type: Anchor
       layout:
@@ -159,7 +159,7 @@
         title: Enabled Link
         url: https://lowdefy.com
         disabled: false
-        icon: AiOutlineUnlock
+        icon: unlock
 
 - title: Aria Label
   blocks:
@@ -177,7 +177,7 @@
         flex: 0 0 auto
       properties:
         url: https://lowdefy.com
-        icon: AiOutlineHome
+        icon: home
         ariaLabel: Go to home page
 
 - title: Rel Attribute
@@ -209,7 +209,7 @@
       properties:
         title: Go Back
         back: true
-        icon: AiOutlineArrowLeft
+        icon: arrow-left
     - id: nav_home
       type: Anchor
       layout:
@@ -217,7 +217,7 @@
       properties:
         title: Go Home
         home: true
-        icon: AiOutlineHome
+        icon: home
 
 - title: Keyboard Shortcuts
   blocks:
@@ -228,7 +228,7 @@
       properties:
         title: Documentation
         url: https://docs.lowdefy.com
-        icon: AiOutlineBook
+        icon: Book
       events:
         onClick:
           shortcut: mod+shift+d
@@ -313,4 +313,4 @@
       properties:
         title: Large Red Link
         url: https://lowdefy.com
-        icon: AiOutlineHeart
+        icon: heart

package/dist/blocks/Anchor/meta.js

@@ -15,7 +15,7 @@
 */ export default {
     category: 'display',
     icons: [
-        'AiOutlineLoading3Quarters'
+        'loading'
     ],
     valueType: null,
     cssKeys: {
@@ -65,7 +65,7 @@
                     'string',
                     'object'
                 ],
-                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.",
+                description: 'Icon name (a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`) or properties of an Icon block for anchor icon.',
                 docs: {
                     displayType: 'icon'
                 }
@@ -76,10 +76,12 @@
             },
             href: {
                 type: 'string',
+                urlKind: 'href',
                 description: 'The href to link to when the anchor link is clicked.'
             },
             url: {
                 type: 'string',
+                urlKind: 'url',
                 description: 'External url to link to when the anchor link is clicked.'
             },
             rel: {

package/dist/blocks/Anchor/tests/Anchor.e2e.yaml

@@ -25,7 +25,7 @@ blocks:
     type: Anchor
     properties:
       title: With Icon
-      icon: AiOutlineLink
+      icon: link
 
   - id: anchor_disabled
     type: Anchor

package/dist/blocks/Anchor/tests.yaml

@@ -21,18 +21,18 @@
 - id: properties.icon string
   type: Anchor
   properties:
-    icon: AiFillFire
+    icon: Flame
 - id: properties.icon object
   type: Anchor
   properties:
     title: Click here
     icon:
       color: red
-      name: AiFillRocket
+      name: Rocket
 - id: properties.icon and properties.title
   type: Anchor
   properties:
-    icon: AiOutlineLink
+    icon: link
     title: This is the anchor title
 - id: properties.disabled
   type: Anchor
@@ -42,7 +42,7 @@
 - id: properties.icon, properties.title and properties.disabled
   type: Anchor
   properties:
-    icon: AiOutlineLink
+    icon: link
     title: This is the anchor title
     disabled: true
 - id: properties.url
@@ -92,7 +92,7 @@
   type: Anchor
   properties:
     title: Click here
-    icon: AiOutlineLink
+    icon: link
     style:
       color: green !important
       fontSize: 8
@@ -103,7 +103,7 @@
       loading: true
   properties:
     title: Click here
-    icon: AiOutlineLink
+    icon: link
     style:
       color: green !important
       fontSize: 8

package/dist/blocks/Box/gallery.yaml

@@ -896,7 +896,7 @@
               layout:
                 flex: 0 0 auto
               properties:
-                name: AiOutlineRocket
+                name: Rocket
                 size: 32
                 color: '#1677ff'
             - id: box_feature_a_title
@@ -918,7 +918,7 @@
               layout:
                 flex: 0 0 auto
               properties:
-                name: AiOutlineSafety
+                name: Shield
                 size: 32
                 color: '#52c41a'
             - id: box_feature_b_title
@@ -940,7 +940,7 @@
               layout:
                 flex: 0 0 auto
               properties:
-                name: AiOutlineApi
+                name: Plug
                 size: 32
                 color: '#722ed1'
             - id: box_feature_c_title
@@ -1110,7 +1110,7 @@
               layout:
                 flex: 0 0 auto
               properties:
-                name: AiOutlineCheckCircle
+                name: check-circle
                 size: 20
                 color: '#52c41a'
             - id: box_inbox_item_1_body
@@ -1147,7 +1147,7 @@
               layout:
                 flex: 0 0 auto
               properties:
-                name: AiOutlineUserAdd
+                name: UserPlus
                 size: 20
                 color: '#1677ff'
             - id: box_inbox_item_2_body
@@ -1184,7 +1184,7 @@
               layout:
                 flex: 0 0 auto
               properties:
-                name: AiOutlineWarning
+                name: warning
                 size: 20
                 color: '#faad14'
             - id: box_inbox_item_3_body
@@ -1247,7 +1247,7 @@
                   layout:
                     flex: 0 0 auto
                   properties:
-                    name: AiOutlineDashboard
+                    name: Gauge
                     size: 16
                     color: '#1677ff'
                 - id: box_sidebar_text_dashboard
@@ -1274,7 +1274,7 @@
                   layout:
                     flex: 0 0 auto
                   properties:
-                    name: AiOutlineProject
+                    name: SquareKanban
                     size: 16
                     color: rgba(128, 128, 128, 0.7)
                 - id: box_sidebar_text_projects
@@ -1301,7 +1301,7 @@
                   layout:
                     flex: 0 0 auto
                   properties:
-                    name: AiOutlineSetting
+                    name: settings
                     size: 16
                     color: rgba(128, 128, 128, 0.7)
                 - id: box_sidebar_text_settings

package/dist/blocks/ClickableHtml/ClickableHtml.js

@@ -14,32 +14,14 @@
   limitations under the License.
 */ import React from 'react';
 import { withBlockDefaults, HtmlComponent } from '@lowdefy/block-utils';
-// dataset keys are camelCase (data-record-id → recordId); config authors
-// write the attributes in kebab-case, so hand them back as snake_case.
-function toSnakeCase(key) {
-    return key.replace(/[A-Z]/g, (match)=>`_${match.toLowerCase()}`);
-}
-const ClickableHtml = ({ blockId, classNames, events, properties, methods, styles })=>{
-    // Each clickable element names the event it fires in its data-event
-    // attribute (data-event="onEditClick" → events.onEditClick), so every
-    // target in the markup has its own action chain. Its other data-*
-    // attributes are the event object.
-    function onClick(clickEvent) {
-        const target = clickEvent.target.closest('[data-event]');
-        if (!target || !clickEvent.currentTarget.contains(target)) return;
-        const { event: name, ...data } = target.dataset;
-        if (!name) return;
-        clickEvent.preventDefault();
-        const event = {};
-        Object.keys(data).forEach((key)=>{
-            event[toSnakeCase(key)] = data[key];
-        });
-        methods.triggerEvent({
-            name,
-            event
-        });
-    }
-    return /*#__PURE__*/ React.createElement(HtmlComponent, {
+// Each clickable element names the event it fires in its data-event attribute
+// (data-event="onEditClick" → events.onEditClick), so every target in the
+// markup has its own action chain. Its other data-* attributes are the event
+// object. HtmlComponent finds the target, including inside data-popover
+// content, and prevents the element's default action. Only the events listed
+// in properties.dataEvents fire, since the markup can hold data.
+const ClickableHtml = ({ blockId, classNames, events, properties, methods, styles })=>/*#__PURE__*/ React.createElement(HtmlComponent, {
+        dataEvents: properties.dataEvents,
         div: true,
         events: events,
         html: properties.html,
@@ -47,7 +29,6 @@ const ClickableHtml = ({ blockId, classNames, events, properties, methods, style
         methods: methods,
         className: classNames?.element,
         style: styles?.element,
-        onClick: onClick
+        onDataEvent: methods.triggerEvent
     });
-};
 export default withBlockDefaults(ClickableHtml);

package/dist/blocks/ClickableHtml/gallery.yaml

@@ -16,6 +16,9 @@
     - id: buttons_basic
       type: ClickableHtml
       properties:
+        dataEvents:
+          - onSmallClick
+          - onLargeClick
         html: '<p>Pick a size: <button data-event="onSmallClick">Small</button> <button data-event="onLargeClick">Large</button></p>'
       events:
         onSmallClick:
@@ -44,6 +47,8 @@
     - id: list_rows
       type: ClickableHtml
       properties:
+        dataEvents:
+          - onRowClick
         html: '<ul style="list-style: none; padding: 0; margin: 0;"><li data-event="onRowClick" data-record-id="rec_1" style="padding: 8px; cursor: pointer; border-bottom: 1px solid var(--ant-color-border);">First record</li><li data-event="onRowClick" data-record-id="rec_2" style="padding: 8px; cursor: pointer; border-bottom: 1px solid var(--ant-color-border);">Second record</li><li data-event="onRowClick" data-record-id="rec_3" style="padding: 8px; cursor: pointer;">Third record</li></ul>'
       events:
         onRowClick:
@@ -69,6 +74,8 @@
     - id: mixed_content
       type: ClickableHtml
       properties:
+        dataEvents:
+          - onCommentClick
         html: '<p>This <a href="https://lowdefy.com" target="_blank">link</a> navigates normally, but <a href="#" data-event="onCommentClick" data-thread-id="t_9">this one</a> fires onCommentClick instead.</p>'
       events:
         onCommentClick:
@@ -99,6 +106,9 @@
           border: 1px solid var(--ant-color-border)
           background: var(--ant-color-bg-container)
       properties:
+        dataEvents:
+          - onEditClick
+          - onRemoveClick
         html: '<h4 style="margin: 0 0 8px 0;">Card</h4><p style="margin: 0 0 8px 0; color: var(--ant-color-text-secondary);">Yours to change or remove until tomorrow.</p><button data-event="onEditClick">Edit</button> <button data-event="onRemoveClick">Remove</button>'
       events:
         onEditClick:
@@ -111,3 +121,79 @@
             type: SetState
             params:
               style_card_action: remove
+
+- title: Clickable icons and a popover menu
+  blocks:
+    - id: row_actions
+      type: ClickableHtml
+      properties:
+        dataEvents:
+          - onEdit
+          - onDuplicate
+          - name: onDelete
+            confirm: Delete invoice INV-042?
+        html: '<p>Invoice INV-042 <i data-icon="edit" data-event="onEdit" data-id="42" data-tooltip="Edit" style="cursor: pointer"></i> <span data-popover="more" style="cursor: pointer"><i data-icon="more-vertical"></i></span></p><div data-popover-content="more" hidden><p data-event="onDuplicate" data-id="42" style="cursor: pointer; margin: 0 0 8px"><i data-icon="copy"></i> Duplicate</p><p data-event="onDelete" data-id="42" style="cursor: pointer; margin: 0; color: var(--ant-color-error)"><i data-icon="delete"></i> Delete</p></div>'
+      events:
+        onEdit:
+          - id: set_edit
+            type: SetState
+            params:
+              row_actions_last: { _string.concat: ['edit ', { _event: id }] }
+        onDuplicate:
+          - id: set_duplicate
+            type: SetState
+            params:
+              row_actions_last: { _string.concat: ['duplicate ', { _event: id }] }
+        onDelete:
+          - id: set_delete
+            type: SetState
+            params:
+              row_actions_last: { _string.concat: ['delete ', { _event: id }] }
+    - id: row_actions_result
+      type: Html
+      properties:
+        html:
+          _string.concat:
+            - '<p>Last action: <code>'
+            - _state:
+                key: row_actions_last
+                default: 'none yet'
+            - '</code></p>'
+
+- title: Confirm before an event
+  blocks:
+    - id: confirm_actions
+      type: ClickableHtml
+      properties:
+        dataEvents:
+          - name: onDelete
+            confirm: true
+          - onArchive
+        html: '<p>INV-2026-0042 <i data-icon="delete" data-event="onDelete" data-id="42" data-tooltip="Delete" data-confirm="Delete invoice INV-2026-0042?" style="cursor: pointer; color: var(--ant-color-error)"></i> <span data-event="onArchive" data-id="42" data-confirm style="cursor: pointer; color: var(--ant-color-primary)">Archive</span></p>'
+      events:
+        onDelete:
+          - id: deleted
+            type: SetState
+            params:
+              confirm_last:
+                _string.concat:
+                  - 'deleted '
+                  - _event: id
+        onArchive:
+          - id: archived
+            type: SetState
+            params:
+              confirm_last:
+                _string.concat:
+                  - 'archived '
+                  - _event: id
+    - id: confirm_result
+      type: Html
+      properties:
+        html:
+          _string.concat:
+            - '<p>Last action: <code>'
+            - _state:
+                key: confirm_last
+                default: 'none yet'
+            - '</code></p>'

package/dist/blocks/ClickableHtml/meta.js

@@ -19,8 +19,26 @@
     cssKeys: {
         element: 'The Html element.'
     },
+    hazards: [
+        {
+            id: 'html-style-stripped',
+            message: 'Content is sanitised with DOMPurify, so <style>, <script> and inline event handlers are removed before render. Clicks are wired through data-event attributes instead of inline handlers.',
+            see: 'display-blocks/clickablehtml'
+        },
+        {
+            id: 'clickable-html-data-events',
+            message: 'List every event the HTML fires in properties.dataEvents: a data-event whose name is not listed does nothing. HTML built from user or request data must escape that data, so the data cannot add data-event elements of its own: _nunjucks escapes {{ values }} unless they are marked safe, while _string.concat and _js do not escape.',
+            see: 'display-blocks/clickablehtml'
+        },
+        {
+            id: 'clickable-html-confirm-destructive',
+            message: 'Give an event that deletes or changes data confirm in dataEvents ({ name: onDelete, confirm: "Delete this row?" }), so every click on it asks first and only OK fires it. data-confirm="Delete this row?" on the element asks too, but only where the markup says so.',
+            see: 'concepts/html-attributes'
+        }
+    ],
     // Each clickable element names its event in a data-event attribute, so the
     // event names this block fires are authored in its html.
+    dynamicEvents: true,
     events: {
         onTextSelection: 'Trigger action when text is selected and pass selected text to the event object.'
     },
@@ -28,9 +46,47 @@
         type: 'object',
         additionalProperties: false,
         properties: {
+            dataEvents: {
+                type: 'array',
+                description: 'The events the HTML may fire. A data-event whose name is not listed does nothing, and a click on it logs a console warning; with no dataEvents the HTML fires no events. List an event by name, or as { name, confirm } to make every click on it ask first.',
+                items: {
+                    oneOf: [
+                        {
+                            type: 'string',
+                            description: 'An event name, as written in data-event.'
+                        },
+                        {
+                            type: 'object',
+                            additionalProperties: false,
+                            required: [
+                                'name'
+                            ],
+                            properties: {
+                                name: {
+                                    type: 'string',
+                                    description: 'An event name, as written in data-event.'
+                                },
+                                confirm: {
+                                    oneOf: [
+                                        {
+                                            type: 'boolean',
+                                            description: 'Ask before the event fires, whatever the HTML says, with the element\'s data-confirm message or "Are you sure?".'
+                                        },
+                                        {
+                                            type: 'string',
+                                            minLength: 1,
+                                            description: 'Ask before the event fires, whatever the HTML says, with this message.'
+                                        }
+                                    ]
+                                }
+                            }
+                        }
+                    ]
+                }
+            },
             html: {
                 type: 'string',
-                description: 'Content to be rendered as Html. An element with a data-event attribute fires the event it names when clicked (data-event="onEditClick" fires events.onEditClick), and its default browser action is prevented. The event object holds the element\'s other data-* attributes with snake_case keys, so data-event="onEditClick" data-record-id="42" gives { record_id: "42" }.',
+                description: 'Content to be rendered as Html. An element with a data-event attribute fires the event it names when clicked (data-event="onEditClick" fires events.onEditClick), if dataEvents lists it, and its default browser action is prevented. The event object holds the element\'s other data-* attributes with snake_case keys, so data-event="onEditClick" data-record-id="42" gives { record_id: "42" }. Targets that are not links or buttons become keyboard focusable, and Enter or Space clicks them. A data-event inside popover content fires too, then closes the popover. A link with data-event fires the event and does not navigate. data-confirm="Delete this row?" on a data-event element asks first: only OK fires the event (bare data-confirm asks "Are you sure?"). Escape user and request data in the HTML, so it cannot add data-event elements of its own. All Html block attributes work too: data-icon, data-tooltip, data-popover, data-page-id links, data-new-tab, data-tag, data-status, data-time, data-format, data-avatar, data-copy, data-truncate and data-tone. See the HTML attributes docs page.',
                 docs: {
                     displayType: 'text-area'
                 }

package/dist/blocks/ClickableHtml/tests/ClickableHtml.e2e.yaml

@@ -18,6 +18,9 @@ blocks:
   - id: clickable_basic
     type: ClickableHtml
     properties:
+      dataEvents:
+        - onGreetClick
+        - onWaveClick
       html: '<p>Hello <button data-event="onGreetClick" data-user-id="u_1">World</button> <button data-event="onWaveClick" data-user-id="u_2">Wave</button></p>'
     events:
       onGreetClick:
@@ -67,3 +70,119 @@ blocks:
     type: ClickableHtml
     properties:
       html: <p>Safe content</p><script>alert('xss')</script>
+
+  - id: clickable_confirm
+    type: ClickableHtml
+    properties:
+      dataEvents:
+        - onDelete
+      html: '<button id="confirm_delete" data-event="onDelete" data-row-id="7" data-confirm="Delete row 7?">Delete</button> <button id="proto_event" data-event="__proto__">Proto</button>'
+    events:
+      onDelete:
+        - id: count_delete
+          type: SetState
+          params:
+            delete_count:
+              _sum:
+                - _state:
+                    key: delete_count
+                    default: 0
+                - 1
+
+  - id: clickable_confirm_result
+    type: Html
+    properties:
+      html:
+        _string.concat:
+          - '<span id="delete_count">'
+          - _json.stringify:
+              - _state:
+                  key: delete_count
+                  default: 0
+          - '</span>'
+
+  - id: clickable_allowlist
+    type: ClickableHtml
+    properties:
+      dataEvents:
+        - onListedClick
+      html: '<span id="listed_target" data-event="onListedClick">Listed</span> <span id="unlisted_target" data-event="onUnlistedClick">Unlisted</span>'
+    events:
+      onListedClick:
+        - id: set_listed
+          type: SetState
+          params:
+            allowlist_fired: listed
+      onUnlistedClick:
+        - id: set_unlisted
+          type: SetState
+          params:
+            allowlist_fired: unlisted
+
+  - id: clickable_declared_confirm
+    type: ClickableHtml
+    properties:
+      dataEvents:
+        - name: onRemove
+          confirm: Remove row 3?
+      html: '<button id="declared_remove" data-event="onRemove" data-row-id="3">Remove</button>'
+    events:
+      onRemove:
+        - id: set_removed
+          type: SetState
+          params:
+            removed_row:
+              _event: row_id
+
+  - id: clickable_refresh
+    type: ClickableHtml
+    properties:
+      dataEvents:
+        - onRefreshSoon
+        - onRefreshDelete
+      html:
+        _string.concat:
+          - '<button id="refresh_soon" data-event="onRefreshSoon">Refresh soon</button><p id="refresh_count">Refreshed '
+          - _state:
+              key: refresh_count
+              default: 0
+          - '</p><button id="refresh_delete" data-event="onRefreshDelete" data-id="5" data-confirm="Delete 5?">Delete</button> <span id="refresh_more" data-popover="more">More</span><div data-popover-content="more" hidden><span class="refresh-menu">Menu after '
+          - _state:
+              key: refresh_count
+              default: 0
+          - '</span></div>'
+    events:
+      onRefreshSoon:
+        - id: wait
+          type: Wait
+          params:
+            ms: 1000
+        - id: refresh
+          type: SetState
+          params:
+            refresh_count: 1
+      onRefreshDelete:
+        - id: set_refresh_deleted
+          type: SetState
+          params:
+            refresh_deleted:
+              _event: id
+
+  - id: clickable_events_result
+    type: Html
+    properties:
+      html:
+        _string.concat:
+          - '<span id="allowlist_fired">'
+          - _state:
+              key: allowlist_fired
+              default: ''
+          - '</span><span id="removed_row">'
+          - _state:
+              key: removed_row
+              default: ''
+          - '</span><span id="refresh_deleted">'
+          - _state:
+              key: refresh_deleted
+              default: ''
+          - '</span>'