@lowdefy/blocks-aggrid 5.5.1 → 6.0.0

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

@@ -0,0 +1,686 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+id: aggridlowdefyinput
+type: Box
+
+# The input core reads its rows from the block value, so every grid is seeded from state rather
+# than from a rowData property.
+events:
+  onInit:
+    - id: set_defaults
+      type: SetState
+      params:
+        aggridlowdefyinput_basic:
+          - name: Alice
+            age: 25
+          - name: Bob
+            age: 30
+          - name: Charlie
+            age: 35
+        aggridlowdefyinput_height:
+          - name: Alice
+          - name: Bob
+        aggridlowdefyinput_default_col_def:
+          - name: Alice
+            age: 25
+          - name: Bob
+            age: 30
+        aggridlowdefyinput_empty: []
+        aggridlowdefyinput_onrowclick:
+          - name: Alice
+            age: 25
+          - name: Bob
+            age: 30
+        aggridlowdefyinput_oncellclick:
+          - name: Alice
+            age: 25
+          - name: Bob
+            age: 30
+        aggridlowdefyinput_onrowselected:
+          - name: Alice
+            age: 25
+          - name: Bob
+            age: 30
+        aggridlowdefyinput_sortable:
+          - name: Charlie
+            age: 35
+          - name: Alice
+            age: 25
+          - name: Bob
+            age: 30
+        aggridlowdefyinput_filterable:
+          - name: Alice
+            age: 25
+          - name: Bob
+            age: 30
+          - name: Charlie
+            age: 35
+        aggridlowdefyinput_editable:
+          - name: Alice
+            age: 25
+          - name: Bob
+            age: 30
+        aggridlowdefyinput_editable_no_events:
+          - name: Alice
+            age: 25
+          - name: Bob
+            age: 30
+        aggridlowdefyinput_rowdrag:
+          - name: Alice
+            age: 25
+          - name: Bob
+            age: 30
+          - name: Charlie
+            age: 35
+        aggridlowdefyinput_cell_tag:
+          - status: Active
+          - status: Blocked
+          - status: null
+        aggridlowdefyinput_cell_date:
+          - created_at: '2025-01-15T09:30:00Z'
+          - created_at: null
+        aggridlowdefyinput_cell_boolean:
+          - verified: true
+            active: true
+          - verified: false
+            active: false
+        aggridlowdefyinput_cell_number:
+          - revenue: 1245000
+          - revenue: 825500
+        aggridlowdefyinput_cell_inputs:
+          - id: t1
+            name: Alice
+            active: false
+            notes: Awaiting sign-off.
+        aggridlowdefyinput_avatar_small:
+          - id: u1
+            name: Alice Johnson
+        aggridlowdefyinput_avatar_large:
+          - id: u1
+            name: Alice Johnson
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: aggridlowdefyinput_basic
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+        - headerName: Age
+          field: age
+
+  # ============================================
+  # PROPERTY TESTS
+  # ============================================
+
+  - id: aggridlowdefyinput_height
+    type: AgGridLowdefyInput
+    properties:
+      height: 300
+      columnDefs:
+        - headerName: Name
+          field: name
+
+  - id: aggridlowdefyinput_default_col_def
+    type: AgGridLowdefyInput
+    properties:
+      defaultColDef:
+        sortable: true
+        resizable: true
+        filter: true
+      columnDefs:
+        - headerName: Name
+          field: name
+        - headerName: Age
+          field: age
+
+  - id: aggridlowdefyinput_empty
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+        - headerName: Age
+          field: age
+
+  # ============================================
+  # EVENT TESTS
+  # ============================================
+
+  - id: aggridlowdefyinput_onrowclick
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+        - headerName: Age
+          field: age
+    events:
+      onRowClick:
+        - id: set_row_click
+          type: SetState
+          params:
+            aggridlowdefyinput_row_clicked:
+              _event: row.name
+
+  - id: aggridlowdefyinput_row_click_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridlowdefyinput_row_clicked
+              - null
+          then:
+            _string.concat:
+              - 'Row: '
+              - _state: aggridlowdefyinput_row_clicked
+          else: ''
+
+  - id: aggridlowdefyinput_oncellclick
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+        - headerName: Age
+          field: age
+    events:
+      onCellClick:
+        - id: set_cell_click
+          type: SetState
+          params:
+            aggridlowdefyinput_cell_clicked:
+              _event: cell.value
+
+  - id: aggridlowdefyinput_cell_click_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridlowdefyinput_cell_clicked
+              - null
+          then:
+            _string.concat:
+              - 'Cell: '
+              - _state: aggridlowdefyinput_cell_clicked
+          else: ''
+
+  # enableClickSelection is mandatory in the v33 object form: without it clicking a row selects
+  # nothing and onRowSelected never fires.
+  - id: aggridlowdefyinput_onrowselected
+    type: AgGridLowdefyInput
+    properties:
+      rowSelection:
+        mode: singleRow
+        checkboxes: false
+        enableClickSelection: true
+      columnDefs:
+        - headerName: Name
+          field: name
+        - headerName: Age
+          field: age
+    events:
+      onRowSelected:
+        - id: set_row_selected
+          type: SetState
+          params:
+            aggridlowdefyinput_row_selected:
+              _event: row.name
+
+  - id: aggridlowdefyinput_row_selected_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridlowdefyinput_row_selected
+              - null
+          then:
+            _string.concat:
+              - 'Selected: '
+              - _state: aggridlowdefyinput_row_selected
+          else: ''
+
+  # ============================================
+  # SORTING & FILTERING
+  # ============================================
+
+  - id: aggridlowdefyinput_sortable
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+          sortable: true
+        - headerName: Age
+          field: age
+          sortable: true
+    events:
+      onSortChanged:
+        - id: set_sort_changed
+          type: SetState
+          params:
+            aggridlowdefyinput_sort_changed: true
+
+  - id: aggridlowdefyinput_sort_changed_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: aggridlowdefyinput_sort_changed
+              - true
+          then: Sort changed
+          else: ''
+
+  - id: aggridlowdefyinput_filterable
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+          filter: true
+        - headerName: Age
+          field: age
+          filter: true
+    events:
+      onFilterChanged:
+        - id: set_filter_changed
+          type: SetState
+          params:
+            aggridlowdefyinput_filter_changed: true
+
+  - id: aggridlowdefyinput_filter_changed_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: aggridlowdefyinput_filter_changed
+              - true
+          then: Filter changed
+          else: ''
+
+  # ============================================
+  # INPUT-SPECIFIC: EDITABLE CELLS
+  # ============================================
+
+  - id: aggridlowdefyinput_editable
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+          editable: true
+        - headerName: Age
+          field: age
+    events:
+      onCellValueChanged:
+        - id: set_cell_value_changed
+          type: SetState
+          params:
+            aggridlowdefyinput_cell_new_value:
+              _event: newValue
+            aggridlowdefyinput_cell_old_value:
+              _event: oldValue
+
+  - id: aggridlowdefyinput_cell_value_changed_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridlowdefyinput_cell_new_value
+              - null
+          then:
+            _string.concat:
+              - 'New: '
+              - _state: aggridlowdefyinput_cell_new_value
+          else: ''
+
+  - id: aggridlowdefyinput_old_value_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridlowdefyinput_cell_old_value
+              - null
+          then:
+            _string.concat:
+              - 'Old: '
+              - _state: aggridlowdefyinput_cell_old_value
+          else: ''
+
+  # Reads the grid's own state key. The core mutates the edited row object in place before calling
+  # methods.setValue, and that row object is the same reference the engine already holds in state,
+  # so this display follows the edit whether or not setValue ran. It shows the edit reaches the
+  # engine's state — it does not isolate the setValue call. aggridlowdefyinput_editable_no_events
+  # below is the grid that does isolate it.
+  - id: aggridlowdefyinput_value_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridlowdefyinput_editable.0.name
+              - null
+          then:
+            _string.concat:
+              - 'Value: '
+              - _state: aggridlowdefyinput_editable.0.name
+          else: ''
+
+  # Unrelated to any grid — toggling it re-renders the page, which is how the value's survival
+  # across a re-render is checked.
+  - id: aggridlowdefyinput_rerender_toggle
+    type: Switch
+    properties:
+      title: Rerender
+
+  # No events are configured on this grid, so the core's triggerEvent call returns without asking
+  # the engine to re-render. methods.setValue is then the only thing an edit can do that re-renders
+  # the display below, which makes this pair the one place the setValue call itself is observable.
+  - id: aggridlowdefyinput_editable_no_events
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+          editable: true
+        - headerName: Age
+          field: age
+
+  - id: aggridlowdefyinput_no_events_value_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridlowdefyinput_editable_no_events.0.name
+              - null
+          then:
+            _string.concat:
+              - 'No events value: '
+              - _state: aggridlowdefyinput_editable_no_events.0.name
+          else: ''
+
+  # ============================================
+  # INPUT-SPECIFIC: ROW DRAGGING
+  # ============================================
+
+  - id: aggridlowdefyinput_rowdrag
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+          rowDrag: true
+        - headerName: Age
+          field: age
+    events:
+      onRowDragEnd:
+        - id: set_row_drag_end
+          type: SetState
+          params:
+            aggridlowdefyinput_drag_from_index:
+              _event: fromIndex
+            aggridlowdefyinput_drag_to_index:
+              _event: toIndex
+            aggridlowdefyinput_drag_from_name:
+              _event: fromData.name
+            aggridlowdefyinput_drag_to_name:
+              _event: toData.name
+            aggridlowdefyinput_drag_new_order:
+              _event: newRowData
+
+  - id: aggridlowdefyinput_row_drag_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridlowdefyinput_drag_to_index
+              - null
+          then:
+            _string.concat:
+              - 'Drag: '
+              - _state: aggridlowdefyinput_drag_from_name
+              - ' ('
+              - _state: aggridlowdefyinput_drag_from_index
+              - ') -> '
+              - _state: aggridlowdefyinput_drag_to_name
+              - ' ('
+              - _state: aggridlowdefyinput_drag_to_index
+              - ')'
+          else: ''
+
+  - id: aggridlowdefyinput_row_drag_order_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridlowdefyinput_drag_new_order
+              - null
+          then:
+            _string.concat:
+              - 'Event order: '
+              - _state: aggridlowdefyinput_drag_new_order.0.name
+              - ', '
+              - _state: aggridlowdefyinput_drag_new_order.1.name
+              - ', '
+              - _state: aggridlowdefyinput_drag_new_order.2.name
+          else: ''
+
+  # onRowDragEnd builds a new array rather than mutating the rows, so unlike the cell-edit case the
+  # grid's state key only takes the new order if methods.setValue ran with it.
+  - id: aggridlowdefyinput_row_drag_value_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridlowdefyinput_rowdrag.0.name
+              - null
+          then:
+            _string.concat:
+              - 'Value order: '
+              - _state: aggridlowdefyinput_rowdrag.0.name
+              - ', '
+              - _state: aggridlowdefyinput_rowdrag.1.name
+              - ', '
+              - _state: aggridlowdefyinput_rowdrag.2.name
+          else: ''
+
+  # ============================================
+  # BUILT-IN CELL RENDERERS — cell.type
+  # ============================================
+
+  - id: aggridlowdefyinput_cell_tag
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Status
+          field: status
+          cell:
+            type: tag
+            colorMap:
+              Active: green
+              Blocked: red
+
+  - id: aggridlowdefyinput_cell_date
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Created
+          field: created_at
+          cell:
+            type: date
+        - headerName: Custom
+          field: created_at
+          cell:
+            type: date
+            format: YYYY/MM/DD
+
+  - id: aggridlowdefyinput_cell_boolean
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Verified
+          field: verified
+          cell:
+            type: boolean
+        - headerName: Active
+          field: active
+          cell:
+            type: boolean
+            trueLabel: Yes!
+            falseLabel: Nope
+
+  - id: aggridlowdefyinput_cell_number
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Revenue
+          field: revenue
+          cell:
+            type: number
+            format: currency
+            currency: USD
+            decimals: 0
+
+  # The input-flavoured cells write through node.setDataValue, so the block value follows without
+  # the app persisting anything — unlike on a display block, where the app owns the write-back.
+  - id: aggridlowdefyinput_cell_inputs
+    type: AgGridLowdefyInput
+    properties:
+      columnDefs:
+        - headerName: Name
+          field: name
+          cell:
+            type: textInput
+            eventName: onNameInput
+        - headerName: Active
+          field: active
+          cell:
+            type: switch
+            eventName: onActiveToggle
+        - headerName: Notes
+          field: notes
+          cell:
+            type: paragraphInput
+            eventName: onNotesInput
+    events:
+      onNameInput:
+        - id: set_name_input
+          type: SetState
+          params:
+            aggridlowdefyinput_name_input:
+              _event: newValue
+      onActiveToggle:
+        - id: set_active_toggle
+          type: SetState
+          params:
+            aggridlowdefyinput_active_toggle:
+              _event: newValue
+
+  - id: aggridlowdefyinput_name_input_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridlowdefyinput_name_input
+              - null
+          then:
+            _string.concat:
+              - 'Name: '
+              - _state: aggridlowdefyinput_name_input
+          else: ''
+
+  - id: aggridlowdefyinput_active_toggle_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: aggridlowdefyinput_active_toggle
+              - true
+          then: 'Active: true'
+          else: ''
+
+  - id: aggridlowdefyinput_inputs_value_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: aggridlowdefyinput_cell_inputs.0.name
+              - null
+          then:
+            _string.concat:
+              - 'Row name: '
+              - _state: aggridlowdefyinput_cell_inputs.0.name
+          else: ''
+
+  # ============================================
+  # SIZE — avatar CSS custom properties
+  # ============================================
+
+  - id: aggridlowdefyinput_avatar_small
+    type: AgGridLowdefyInput
+    properties:
+      size: small
+      columnDefs:
+        - headerName: Assignee
+          field: name
+          cell:
+            type: avatar
+            nameField: name
+            idField: id
+
+  - id: aggridlowdefyinput_avatar_large
+    type: AgGridLowdefyInput
+    properties:
+      size: large
+      columnDefs:
+        - headerName: Assignee
+          field: name
+          cell:
+            type: avatar
+            nameField: name
+            idField: id

package/dist/blocks/AgGridMaterial/AgGridMaterial.js

@@ -14,11 +14,11 @@
   limitations under the License.
 */ import React from 'react';
 import { withBlockDefaults } from '@lowdefy/block-utils';
-import '@ag-grid-community/styles/ag-grid.css';
-import '@ag-grid-community/styles/ag-theme-material.css';
 import antdStyles from '../../ag-grid-antd.module.css';
+import { themeMaterialAntd, useGridTheme } from '../../theme/themeLowdefy.js';
 import AgGrid from '../../AgGrid.js';
 const AgGridMaterial = ({ blockId, components, events, loading, methods, properties, styles })=>{
+    const theme = useGridTheme(themeMaterialAntd, properties.themeParams);
     return /*#__PURE__*/ React.createElement("div", {
         id: blockId,
         className: `ag-theme-material ${antdStyles.antdTheme}`,
@@ -32,7 +32,8 @@ const AgGridMaterial = ({ blockId, components, events, loading, methods, propert
         events: events,
         loading: loading,
         methods: methods,
-        properties: properties
+        properties: properties,
+        theme: theme
     }));
 };
 export default withBlockDefaults(AgGridMaterial);

package/dist/blocks/AgGridMaterial/e2e.js

@@ -13,4 +13,4 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import createAgGridDisplayHelper from '../../createAgGridDisplayHelper.js';
-export default createAgGridDisplayHelper('material');
+export default createAgGridDisplayHelper();