@ebrains/components 0.9.3-beta → 1.1.0

package/dist/collection/components/eds-table/eds-table.js

@@ -1,3 +1,31 @@
+/**
+ * <eds-table
+      table-data='[
+        { "Property": "username", "Type": "string", "Required": "Yes" },
+        { "Property": "password", "Type": "string", "Required": "Yes" },
+        { "Property": "email", "Type": "string", "Required": "No" }
+      ]'
+      config='{
+        "Type": { "format": "uppercase" },
+        "Property": { "format": "code" },
+        "Required": { "hidden": true }
+      }'
+      actions='[
+        { "name": "view",  "label": "View"  },
+        { "name": "edit",  "label": "Edit"  },
+        { "name": "delete", "type": "checkbox" }
+      ]'
+    ></eds-table>
+
+    <script>
+      const table = document.querySelector('eds-table');
+      table.addEventListener('rowaction', e => {
+        const { action, row } = e.detail;
+        console.log(e.detail)
+        // etc.
+      });
+    </script>
+ */
 import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
 import { parseData } from "../../utils/sharedUtils";
@@ -25,6 +53,10 @@ export class EdsTable {
         this.searchEnabled = false;
         this.hostWidth = undefined;
         this.columnSize = 'default';
+        this.actions = [];
+        this.actionTemplate = undefined;
+        this.parsedActions = [];
+        this.dataColumns = [];
         this.tbData = [];
         this.columns = [];
         this.currentPage = 1;
@@ -39,8 +71,18 @@ export class EdsTable {
     handleConfigChange() {
         this.parseConfig();
     }
+    handleActionsChange() {
+        try {
+            this.parsedActions = typeof this.actions === 'string' ? JSON.parse(this.actions) : this.actions;
+        }
+        catch (_a) {
+            console.error('Failed to parse actions JSON');
+            this.parsedActions = [];
+        }
+    }
     componentWillLoad() {
         this.parseConfig();
+        this.handleActionsChange();
         this.data ? this.parseData() : this.endpoint && this.fetchData();
     }
     componentDidLoad() {
@@ -69,24 +111,20 @@ export class EdsTable {
     parseData() {
         try {
             this.tbData = parseData(this.data);
-            //this.tbData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
             this.totalRows = this.tbData.length;
             this.updateColumns();
             this.currentPage = 1;
         }
         catch (error) {
-            // eslint-disable-next-line
             console.error('Failed to parse data:', error);
             this.tbData = [];
         }
     }
     parseConfig() {
         try {
-            //this.parsedConfig = parseData(this.config);
             this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
         }
         catch (error) {
-            // eslint-disable-next-line
             console.error('Failed to parse config:', error);
             this.parsedConfig = {};
         }
@@ -98,7 +136,6 @@ export class EdsTable {
             this.data = data;
         }
         catch (error) {
-            // eslint-disable-next-line
             console.error('Failed to fetch data:', error);
         }
     }
@@ -134,24 +171,52 @@ export class EdsTable {
     handleSearch(event) {
         this.searchQuery = event.target.value;
         this.currentPage = 1;
-        /*sendAnalytics({
-          category: 'ui-component',
-          parentContext: null,
-          tag: `${this.hostEl.tagName.toLowerCase()}/eds-input-field/search`,
-          name: `${this.searchQuery}` || '',
-          action: 'page'
-        });*/
     }
     renderCell(value, column) {
         var _a;
         const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
         return format === 'uppercase' ? (value === null || value === void 0 ? void 0 : value.toString().toUpperCase()) : format === 'svg' ? (h("div", { innerHTML: value })) : format === 'bold' ? (h("strong", null, value)) : format === 'code' ? (h("code", null, value)) : (value);
     }
+    /**
+     * Renders one action (button or checkbox) for a specific action‐name.
+     * Used by the “Actions” column below.
+     */
+    renderSingleActionCell(actionName, row) {
+        var _a;
+        const act = this.parsedActions.find((a) => a.name === actionName);
+        if (this.actionTemplate) {
+            return this.actionTemplate(row);
+        }
+        const type = act.type || 'button';
+        if (type === 'checkbox') {
+            const boundField = (_a = act.field) !== null && _a !== void 0 ? _a : act.name;
+            const checked = !!row[boundField];
+            return (h("eds-input-field", { name: `chc-${actionName}`, label: act.label, type: "checkbox", checked: checked, onChange: (e) => this.emitAction(act.name, row, e.target.checked) }));
+        }
+        return h("eds-link", { label: act.label, intent: "weak", onClick: () => this.emitAction(act.name, row) });
+    }
+    emitAction(actionName, row, checked) {
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: `${this.hostEl.tagName.toLowerCase()}/action`,
+            name: actionName,
+            action: 'click'
+        });
+        this.rowaction.emit({ action: actionName, row, checked: !!checked });
+    }
     shouldEnablePagination() {
         return this.paginationEnabled && this.totalRows > this.rowsPerPage;
     }
     updateColumns() {
+        var _a, _b;
+        // 1) Grab all data‐keys from the first row (if any) as before:
         this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
+        // 2) Instead of pushing each action.name, we add just a single “actions” column
+        //    (you can call it anything; we’ll detect it in render())
+        if (((_b = (_a = this.parsedActions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && this.tbData.length > 0) {
+            this.columns.push('actions');
+        }
     }
     getVisibleColumnsCount() {
         return this.columns.filter((column) => { var _a; return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden); }).length;
@@ -166,23 +231,39 @@ export class EdsTable {
         }
         return divisionFactor;
     }
+    capitalize(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+    }
     render() {
-        // Use containerWidth state that is updated on resize.
         const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
-        // Calculate the number of visible columns and the column width.
         const visibleColumnsCount = this.getVisibleColumnsCount();
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (h("div", { key: '9ac7ad4f02237c02eaf5d3b351ded21bce29bd6c' }, this.searchEnabled && (h("div", { key: '1cecf9a9089391c3bce72dd53a6f5ffa92692661' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
-            // @ts-ignore
-            onInput: (event) => this.handleSearch(event) }))), h("div", { key: '435bbfd0a4dd3ddd0a7766863cdd8c2eaf41eb8f', class: "mt-20" }, h("table", { key: '4785490532015b7069be068e80135220f37c3955', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '8a99a961cf350bca26b1f73b8ffd6c8e1c48378f' }, h("tr", { key: 'a4ee04e342687830e905a3bd5217e53e513f0167', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+        return (h("div", { key: '5034177431626ab2bfc5fd0118c006d11a4f6e96' }, this.searchEnabled && (h("div", { key: '86e1a6ffc4bed69f290b3a53031341ab276eaf04' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'bc11838d819ecf89c5ba1cc1cfe7ac0af0e82b59', class: "mt-20" }, h("table", { key: '97f16b65eb1d9387e9ca7588184c9e68c1afcc2e', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'f4d64ada28c225db1b224277513e663a99de1cec' }, h("tr", { key: 'c6a69e159cceada0f7143c0acb787e5c23242ae7', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
-            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, column));
-        }))), h("tbody", { key: '3c764ac7137d1b21f45003c6df5324e7d0db749f' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            // 3) For the “actions” column, override the header to “Actions”
+            if (col === 'actions') {
+                // You can choose a smaller min‐width here if you wish:
+                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, "Actions"));
+            }
+            // Otherwise, render column name or action label if you do want to override:
+            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
+                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.capitalize(col)));
+            }
+            return null;
+        }))), h("tbody", { key: '133af82fdd1f820e853734ab48123cb3db527e15' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
-            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[column], column)));
-        }))))))), this.shouldEnablePagination() && (h("div", { key: '98a1179b45fbc1b2f079825c899410ef4faf8c45', class: "mt-20" }, h("eds-pagination", { key: '662c479139658ea7f3d2a3955c77e24d44dd6e74', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            if (col === 'actions') {
+                // 4) Render ALL actions inside a single <td> for this row:
+                return (h("td", { class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell", style: { minWidth: `${columnWidth - 4}px` } }, h("div", { style: { display: 'flex', gap: '0.5rem', justifyContent: 'center', flexWrap: 'wrap' } }, this.parsedActions.map((act) => (h("span", { style: { whiteSpace: 'nowrap' } }, this.renderSingleActionCell(act.name, row)))))));
+            }
+            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
+                // Regular data cell:
+                return (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[col], col)));
+            }
+            return null;
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '85032d06cd0ac5dae9b504d423fceba3cd074861', class: "mt-20" }, h("eds-pagination", { key: '8caf6f57960e222c04d45f57a5811cd7bd524f4c', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -239,7 +320,7 @@ export class EdsTable {
                 "mutable": false,
                 "complexType": {
                     "original": "| string\n    | {\n        [key: string]: {\n          hidden?: boolean;\n          format?: 'uppercase' | 'bold' | 'code';\n        };\n      }",
-                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"code\" | \"bold\" | \"uppercase\"; }; }",
+                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"code\" | \"uppercase\" | \"bold\"; }; }",
                     "references": {}
                 },
                 "required": false,
@@ -340,11 +421,58 @@ export class EdsTable {
                 "attribute": "column-size",
                 "reflect": false,
                 "defaultValue": "'default'"
+            },
+            "actions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | TableAction[]",
+                    "resolved": "TableAction[] | string",
+                    "references": {
+                        "TableAction": {
+                            "location": "local",
+                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-table/eds-table.tsx",
+                            "id": "../../../packages/components/src/components/eds-table/eds-table.tsx::TableAction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of actions to render in each row.\nEach action should have:\n - `name`: a unique key (e.g. \"view\", \"delete\")\n - `label`: what shows in the button (or you could pass an icon name here)"
+                },
+                "attribute": "actions",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "actionTemplate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(row: any) => VNode",
+                    "resolved": "(row: any) => VNode",
+                    "references": {
+                        "VNode": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::VNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional: allow the consumer to supply a full JSX render\u2010prop\ninstead of simple name/label pairs. If provided, this takes priority."
+                }
             }
         };
     }
     static get states() {
         return {
+            "parsedActions": {},
+            "dataColumns": {},
             "tbData": {},
             "columns": {},
             "currentPage": {},
@@ -354,6 +482,24 @@ export class EdsTable {
             "containerWidth": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "rowaction",
+                "name": "rowaction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the event with the payload type"
+                },
+                "complexType": {
+                    "original": "{ action: string; row: any; checked: boolean }",
+                    "resolved": "{ action: string; row: any; checked: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "hostEl"; }
     static get watchers() {
         return [{
@@ -362,6 +508,9 @@ export class EdsTable {
             }, {
                 "propName": "config",
                 "methodName": "handleConfigChange"
+            }, {
+                "propName": "actions",
+                "methodName": "handleActionsChange"
             }, {
                 "propName": "data",
                 "methodName": "parseData"

package/dist/collection/components/eds-table/eds-table.stories.js

@@ -10,10 +10,6 @@ export default {
             control: 'object',
             description: 'Column configurations (hiding and formatting)'
         },
-        endpoint: {
-            control: 'text',
-            description: 'API endpoint to fetch data from'
-        },
         rowsPerPage: {
             control: { type: 'number' },
             description: 'Number of rows displayed per page'
@@ -66,7 +62,6 @@ export const Default = {
       rows-per-page="${args.rowsPerPage}"
       pagination-enabled="${args.paginationEnabled}"
       search-enabled="${args.searchEnabled}"
-      endpoint="${args.endpoint || ''}"
       column-size="${args.columnSize}"
     ></eds-table>
   `,
@@ -79,21 +74,16 @@ export const Default = {
         rowsPerPage: 5,
         paginationEnabled: true,
         searchEnabled: true,
-        endpoint: '', // Leave empty for manual data entry
         columnSize: 'default'
     }
 };
 export const WithEndpoint = {
     render: (args) => `
     <eds-table 
-      endpoint="${args.endpoint}"
       rows-per-page="${args.rowsPerPage}"
       pagination-enabled="${args.paginationEnabled}"
       search-enabled="${args.searchEnabled}"
       host-width="600"
       column-size="${args.columnSize}"
-    ></eds-table>`,
-    args: {
-        endpoint: 'http://127.0.0.1:5001/api/catalogue'
-    }
+    ></eds-table>`
 };

package/dist/collection/components/eds-tag/eds-tag.css

@@ -5,6 +5,7 @@
     line-height: var(--f-ui-01-lineHeight);
     letter-spacing: var(--f-ui-01-letterSpacing);
   }
+
   .f-ui-03 {
     font-family: var(--f-ui-03-fontFamily);
     font-weight: var(--f-ui-03-fontWeight);
@@ -12,6 +13,7 @@
     line-height: var(--f-ui-03-lineHeight);
     letter-spacing: var(--f-ui-03-letterSpacing);
   }
+
   .f-ui-05 {
     font-family: var(--f-ui-05-fontFamily);
     font-weight: var(--f-ui-05-fontWeight);
@@ -19,83 +21,91 @@
     line-height: var(--f-ui-05-lineHeight);
     letter-spacing: var(--f-ui-05-letterSpacing);
   }
-  .py-1 {
-    padding-top: 0.0625rem;
-    padding-bottom: 0.0625rem;
-  }
+
   .py-2 {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
   }
+
   .py-3 {
     padding-top: 0.1875rem;
     padding-bottom: 0.1875rem;
   }
+
   .py-4 {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
   }
-  .px-2 {
-    padding-left: 0.125rem;
-    padding-right: 0.125rem;
-  }
-  .px-3 {
-    padding-left: 0.1875rem;
-    padding-right: 0.1875rem;
-  }
+
   .px-4 {
     padding-left: 0.25rem;
     padding-right: 0.25rem;
   }
+
   .px-5 {
     padding-left: 0.3125rem;
     padding-right: 0.3125rem;
   }
+
   .px-6 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
   }
+
   .border-2 {
     border-width: 2px;
   }
+
   .rounded-pill {
     border-radius: 100px;
   }
+
   .border-default {
     border: 2px solid var(--black);
   }
+
   .text-inverse {
     color: var(--white);
   }
+
   .bg-accent {
     background-color: var(--green-500);
   }
+
   .bg-strongest {
     background-color: var(--black);
   }
+
   .text-\[\#0034CB\] {
     --tw-text-opacity: 1;
     color: rgb(0 52 203 / var(--tw-text-opacity));
   }
+
   .border-\[\#0034CB\] {
     --tw-border-opacity: 1;
     border: 2px solid rgb(0 52 203 / var(--tw-border-opacity));
   }
+
   .text-light {
     color: var(--grey-700);
   }
+
   .bg-strongest-soft {
     background-color: rgba(0, 0, 0, .05);
   }
+
   .border-transparent {
     border-color: var(--transparent);
   }
+
   .border-inverse {
     border-color: var(--white);
   }
+
   .bg-inverse {
     background-color: var(--white);
   }
+
   .text-lighter {
     color: var(--grey-600);
   }

package/dist/collection/components/eds-tag/eds-tag.js

@@ -36,7 +36,7 @@ export class EdsTag {
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return h("span", { key: '4531e69a8dce962b77107b2da984aeae6ba4b4c4', class: classes }, this.label);
+        return h("span", { key: '78ef2d9ed4fc79f078df2fe418c339fc8934eef2', class: classes }, this.label);
     }
     static get is() { return "eds-tag"; }
     static get encapsulation() { return "shadow"; }