npm - @liedekef/ftable - Versions diffs - 1.2.0 → 1.3.1 - Mend

@liedekef/ftable 1.2.0 → 1.3.1

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 (5) hide show

package/ftable.esm.js CHANGED Viewed

@@ -1413,9 +1413,7 @@ class FTableFormBuilder {
                 : [];
         // Support data-livesearch attribute on the virtual select as well as field.livesearch
-        const livesearch = field.livesearch
-            ?? (attributes['data-livesearch'] === 'true' || attributes['data-livesearch'] === true)
-            ?? false;
+        const livesearch = field.livesearch ?? false;
         return this._buildCustomMultiSelect({
             containerId:    fieldName,
@@ -2187,7 +2185,7 @@ class FTable extends FTableEventEmitter {
     initColumnWidths() {
         const visibleFields = this.columnList.filter(fieldName => {
             const field = this.options.fields[fieldName];
-            return field.visibility !== 'hidden' && field.visibility !== 'separator';
+            return !field.action && field.visibility !== 'hidden' && field.visibility !== 'separator';
         });
         const count = visibleFields.length;
@@ -2206,7 +2204,7 @@ class FTable extends FTableEventEmitter {
                 th: this.elements.table.querySelector(`[data-field-name="${fieldName}"]`),
                 field: this.options.fields[fieldName]
             }))
-            .filter(item => item.th && item.field.visibility !== 'hidden' && item.field.visibility !== 'separator');
+            .filter(item => item.th && !item.field.action && item.field.visibility !== 'hidden' && item.field.visibility !== 'separator');
         if (visibleHeaders.length === 0) return;
@@ -2341,8 +2339,17 @@ class FTable extends FTableEventEmitter {
         this.fieldList.forEach(fieldName => {
             const field = this.options.fields[fieldName];
             const isKeyField = field.key === true;
-            if (isKeyField) {
+            const isActionField = !!field.action; // action: 'select' | 'update' | 'clone' | 'delete'
+            if (isActionField) {
+                // Action columns are always listed but never part of forms or sorting
+                field.list = true;
+                field.create = false;
+                field.edit = false;
+                field.sorting = false;
+                field.searchable = false;
+                field.visibility = field.visibility ?? 'visible';
+            } else if (isKeyField) {
                 if (field.create === undefined || !field.create) {
                     field.create = true;
                     field.type = 'hidden';
@@ -2367,6 +2374,13 @@ class FTable extends FTableEventEmitter {
             return field.list !== false;
         });
+        // Track which actions are user-placed (via action columns in fields)
+        this._userPlacedActions = new Set(
+            this.fieldList
+                .filter(name => this.options.fields[name].action)
+                .map(name => this.options.fields[name].action)
+        );
         // Find key field
         this.keyField = this.fieldList.find(name => this.options.fields[name].key === true);
         if (!this.keyField) {
@@ -2377,6 +2391,7 @@ class FTable extends FTableEventEmitter {
     async resolveAsyncFieldOptions() {
         const promises = this.columnList.map(async (fieldName) => {
             const field = this.options.fields[fieldName];
+            if (field.action) return; // Skip action columns
             const originalOptions = this.formBuilder.originalFieldOptions.get(fieldName);
             if (this.formBuilder.shouldResolveOptions(originalOptions)) {
@@ -2402,7 +2417,7 @@ class FTable extends FTableEventEmitter {
         for (const row of rows) {
             for (const fieldName of this.columnList) {
                 const field = this.options.fields[fieldName];
-                if (!field.options) continue;
+                if (field.action || !field.options) continue;
                 const cell = row.querySelector(`td[data-field-name="${fieldName}"]`);
                 if (!cell) continue;
@@ -2473,8 +2488,8 @@ class FTable extends FTableEventEmitter {
             parent: thead
         });
-        // Add selecting column if enabled
-        if (this.options.selecting && this.options.selectingCheckboxes) {
+        // Add selecting column if enabled (only if not user-placed)
+        if (this.options.selecting && this.options.selectingCheckboxes && !this._userPlacedActions.has('select')) {
             const selectHeader = FTableDOMHelper.create('th', {
                 className: `ftable-command-column-header ftable-column-header-select`,
                 parent: headerRow
@@ -2492,9 +2507,41 @@ class FTable extends FTableEventEmitter {
             }
         }
-        // Add data columns
+        // Add data columns (including any user-placed action columns)
         this.columnList.forEach(fieldName => {
             const field = this.options.fields[fieldName];
+            // If this column is a user-placed action column, render an action header
+            if (field.action) {
+                const actionClassMap = {
+                    select: 'ftable-column-header-select',
+                    update: 'ftable-column-header-edit',
+                    clone:  'ftable-column-header-clone',
+                    delete: 'ftable-column-header-delete',
+                };
+                const th = FTableDOMHelper.create('th', {
+                    className: `ftable-command-column-header ${actionClassMap[field.action] || ''}`,
+                    parent: headerRow
+                });
+                if (field.title) {
+                    th.textContent = field.title;
+                }
+                // For select action with multiselect, add the select-all checkbox
+                if (field.action === 'select' && this.options.selecting && this.options.selectingCheckboxes && this.options.multiselect) {
+                    const selectAllCheckbox = FTableDOMHelper.create('input', {
+                        attributes: { type: 'checkbox' },
+                        parent: th
+                    });
+                    selectAllCheckbox.addEventListener('change', () => {
+                        this.toggleSelectAll(selectAllCheckbox.checked);
+                    });
+                }
+                if (field.width) {
+                    th.style.width = field.width;
+                }
+                return;
+            }
             const th = FTableDOMHelper.create('th', {
                 className: `ftable-column-header ${field.listClass || ''} ${field.listClassHeader || ''}`,
                 attributes: { 'data-field-name': fieldName },
@@ -2543,22 +2590,22 @@ class FTable extends FTableEventEmitter {
             }
         });
-        // Add action columns
-        if (this.options.actions.updateAction) {
+        // Add default action columns only if not user-placed
+        if (this.options.actions.updateAction && !this._userPlacedActions.has('update')) {
             FTableDOMHelper.create('th', {
                 className: 'ftable-command-column-header ftable-column-header-edit',
                 parent: headerRow
             });
         }
-        if (this.options.actions.cloneAction) {
+        if (this.options.actions.cloneAction && !this._userPlacedActions.has('clone')) {
             FTableDOMHelper.create('th', {
                 className: 'ftable-command-column-header ftable-column-header-clone',
                 parent: headerRow
             });
         }
-        if (this.options.actions.deleteAction) {
+        if (this.options.actions.deleteAction && !this._userPlacedActions.has('delete')) {
             FTableDOMHelper.create('th', {
                 className: 'ftable-command-column-header ftable-column-header-delete',
                 parent: headerRow
@@ -2579,17 +2626,27 @@ class FTable extends FTableEventEmitter {
             parent: theadParent
         });
-        // Add empty cell for selecting column if enabled
-        if (this.options.selecting && this.options.selectingCheckboxes) {
+        // Add empty cell for selecting column if enabled (only if not user-placed)
+        if (this.options.selecting && this.options.selectingCheckboxes && !this._userPlacedActions.has('select')) {
             FTableDOMHelper.create('th', {
                 className: 'ftable-toolbarsearch-column-header',
                 parent: searchRow
             });
         }
-        // Add search input cells for data columns
+        // Add search input cells for data columns (including user-placed action columns)
         for (const fieldName of this.columnList) {
             const field = this.options.fields[fieldName];
+            // Action columns get an empty search cell
+            if (field.action) {
+                FTableDOMHelper.create('th', {
+                    className: 'ftable-toolbarsearch-column-header ftable-command-column-header',
+                    parent: searchRow
+                });
+                continue;
+            }
             const isSearchable = field.searchable !== false;
             const th = FTableDOMHelper.create('th', {
@@ -2761,9 +2818,9 @@ class FTable extends FTableEventEmitter {
                 parent: searchRow
             });
-            const actionCount = (this.options.actions.updateAction ? 1 : 0) +
-                (this.options.actions.deleteAction ? 1 : 0) +
-                (this.options.actions.cloneAction ? 1 : 0);
+            const actionCount = (this.options.actions.updateAction && !this._userPlacedActions.has('update') ? 1 : 0) +
+                (this.options.actions.deleteAction && !this._userPlacedActions.has('delete') ? 1 : 0) +
+                (this.options.actions.cloneAction && !this._userPlacedActions.has('clone') ? 1 : 0);
             if (actionCount > 0) {
                 resetTh.colSpan = actionCount;
@@ -2871,9 +2928,7 @@ class FTable extends FTableEventEmitter {
     }
     createCustomMultiSelectForSearch(fieldSearchName, fieldName, field, optionsSource, attributes) {
-        const livesearch = field.livesearch
-            ?? (attributes['data-livesearch'] === 'true' || attributes['data-livesearch'] === true)
-            ?? false;
+        const livesearch = field.livesearch ?? false;
         return this.formBuilder._buildCustomMultiSelect({
             hiddenSelectId:            fieldSearchName,
@@ -3114,9 +3169,10 @@ class FTable extends FTableEventEmitter {
         const settings = {};
         this.columnList.forEach(fieldName => {
+            const field = this.options.fields[fieldName];
+            if (field.action) return; // Action columns have no persistent state
             const th = this.elements.table.querySelector(`[data-field-name="${fieldName}"]`);
             if (th) {
-                const field = this.options.fields[fieldName];
                 settings[fieldName] = {
                     width: th.style.width || field.width || 'auto',
                     visibility: field.visibility || 'visible'
@@ -3148,7 +3204,7 @@ class FTable extends FTableEventEmitter {
             const settings = JSON.parse(settingsJson);
             Object.entries(settings).forEach(([fieldName, config]) => {
                 const field = this.options.fields[fieldName];
-                if (field) {
+                if (field && !field.action) {
                     if (config.width) field.width = config.width;
                     if (config.visibility) field.visibility = config.visibility;
                 }
@@ -3450,6 +3506,7 @@ class FTable extends FTableEventEmitter {
         this.columnList.forEach(fieldName => {
             const field = this.options.fields[fieldName];
+            if (field.action) return; // Action columns don't appear in column picker
             const isVisible = field.visibility !== 'hidden';
             const isFixed = field.visibility === 'fixed';
             const isSeparator = field.visibility === 'separator';
@@ -3862,26 +3919,45 @@ class FTable extends FTableEventEmitter {
         // Store record data
         row.recordData = record;
-        // Add selecting checkbox if enabled
-        if (this.options.selecting && this.options.selectingCheckboxes) {
+        // Add selecting checkbox if enabled (only if not user-placed)
+        if (this.options.selecting && this.options.selectingCheckboxes && !this._userPlacedActions.has('select')) {
             this.addSelectingCell(row);
         }
-        // Add data cells
+        // Add data cells (including user-placed action columns)
         this.columnList.forEach(fieldName => {
-            this.addDataCell(row, record, fieldName);
+            const field = this.options.fields[fieldName];
+            if (field.action) {
+                // Render inline action cell
+                switch (field.action) {
+                    case 'select':
+                        this.addSelectingCell(row);
+                        break;
+                    case 'update':
+                        this.addEditCell(row);
+                        break;
+                    case 'clone':
+                        this.addCloneCell(row);
+                        break;
+                    case 'delete':
+                        this.addDeleteCell(row);
+                        break;
+                }
+            } else {
+                this.addDataCell(row, record, fieldName);
+            }
         });
-        // Add action cells
-        if (this.options.actions.updateAction) {
+        // Add default action cells only if not user-placed
+        if (this.options.actions.updateAction && !this._userPlacedActions.has('update')) {
             this.addEditCell(row);
         }
-        if (this.options.actions.cloneAction) {
+        if (this.options.actions.cloneAction && !this._userPlacedActions.has('clone')) {
             this.addCloneCell(row);
         }
-        if (this.options.actions.deleteAction) {
+        if (this.options.actions.deleteAction && !this._userPlacedActions.has('delete')) {
             this.addDeleteCell(row);
         }

package/ftable.js CHANGED Viewed

@@ -1414,9 +1414,7 @@ class FTableFormBuilder {
                 : [];
         // Support data-livesearch attribute on the virtual select as well as field.livesearch
-        const livesearch = field.livesearch
-            ?? (attributes['data-livesearch'] === 'true' || attributes['data-livesearch'] === true)
-            ?? false;
+        const livesearch = field.livesearch ?? false;
         return this._buildCustomMultiSelect({
             containerId:    fieldName,
@@ -2188,7 +2186,7 @@ class FTable extends FTableEventEmitter {
     initColumnWidths() {
         const visibleFields = this.columnList.filter(fieldName => {
             const field = this.options.fields[fieldName];
-            return field.visibility !== 'hidden' && field.visibility !== 'separator';
+            return !field.action && field.visibility !== 'hidden' && field.visibility !== 'separator';
         });
         const count = visibleFields.length;
@@ -2207,7 +2205,7 @@ class FTable extends FTableEventEmitter {
                 th: this.elements.table.querySelector(`[data-field-name="${fieldName}"]`),
                 field: this.options.fields[fieldName]
             }))
-            .filter(item => item.th && item.field.visibility !== 'hidden' && item.field.visibility !== 'separator');
+            .filter(item => item.th && !item.field.action && item.field.visibility !== 'hidden' && item.field.visibility !== 'separator');
         if (visibleHeaders.length === 0) return;
@@ -2342,8 +2340,17 @@ class FTable extends FTableEventEmitter {
         this.fieldList.forEach(fieldName => {
             const field = this.options.fields[fieldName];
             const isKeyField = field.key === true;
-            if (isKeyField) {
+            const isActionField = !!field.action; // action: 'select' | 'update' | 'clone' | 'delete'
+            if (isActionField) {
+                // Action columns are always listed but never part of forms or sorting
+                field.list = true;
+                field.create = false;
+                field.edit = false;
+                field.sorting = false;
+                field.searchable = false;
+                field.visibility = field.visibility ?? 'visible';
+            } else if (isKeyField) {
                 if (field.create === undefined || !field.create) {
                     field.create = true;
                     field.type = 'hidden';
@@ -2368,6 +2375,13 @@ class FTable extends FTableEventEmitter {
             return field.list !== false;
         });
+        // Track which actions are user-placed (via action columns in fields)
+        this._userPlacedActions = new Set(
+            this.fieldList
+                .filter(name => this.options.fields[name].action)
+                .map(name => this.options.fields[name].action)
+        );
         // Find key field
         this.keyField = this.fieldList.find(name => this.options.fields[name].key === true);
         if (!this.keyField) {
@@ -2378,6 +2392,7 @@ class FTable extends FTableEventEmitter {
     async resolveAsyncFieldOptions() {
         const promises = this.columnList.map(async (fieldName) => {
             const field = this.options.fields[fieldName];
+            if (field.action) return; // Skip action columns
             const originalOptions = this.formBuilder.originalFieldOptions.get(fieldName);
             if (this.formBuilder.shouldResolveOptions(originalOptions)) {
@@ -2403,7 +2418,7 @@ class FTable extends FTableEventEmitter {
         for (const row of rows) {
             for (const fieldName of this.columnList) {
                 const field = this.options.fields[fieldName];
-                if (!field.options) continue;
+                if (field.action || !field.options) continue;
                 const cell = row.querySelector(`td[data-field-name="${fieldName}"]`);
                 if (!cell) continue;
@@ -2474,8 +2489,8 @@ class FTable extends FTableEventEmitter {
             parent: thead
         });
-        // Add selecting column if enabled
-        if (this.options.selecting && this.options.selectingCheckboxes) {
+        // Add selecting column if enabled (only if not user-placed)
+        if (this.options.selecting && this.options.selectingCheckboxes && !this._userPlacedActions.has('select')) {
             const selectHeader = FTableDOMHelper.create('th', {
                 className: `ftable-command-column-header ftable-column-header-select`,
                 parent: headerRow
@@ -2493,9 +2508,41 @@ class FTable extends FTableEventEmitter {
             }
         }
-        // Add data columns
+        // Add data columns (including any user-placed action columns)
         this.columnList.forEach(fieldName => {
             const field = this.options.fields[fieldName];
+            // If this column is a user-placed action column, render an action header
+            if (field.action) {
+                const actionClassMap = {
+                    select: 'ftable-column-header-select',
+                    update: 'ftable-column-header-edit',
+                    clone:  'ftable-column-header-clone',
+                    delete: 'ftable-column-header-delete',
+                };
+                const th = FTableDOMHelper.create('th', {
+                    className: `ftable-command-column-header ${actionClassMap[field.action] || ''}`,
+                    parent: headerRow
+                });
+                if (field.title) {
+                    th.textContent = field.title;
+                }
+                // For select action with multiselect, add the select-all checkbox
+                if (field.action === 'select' && this.options.selecting && this.options.selectingCheckboxes && this.options.multiselect) {
+                    const selectAllCheckbox = FTableDOMHelper.create('input', {
+                        attributes: { type: 'checkbox' },
+                        parent: th
+                    });
+                    selectAllCheckbox.addEventListener('change', () => {
+                        this.toggleSelectAll(selectAllCheckbox.checked);
+                    });
+                }
+                if (field.width) {
+                    th.style.width = field.width;
+                }
+                return;
+            }
             const th = FTableDOMHelper.create('th', {
                 className: `ftable-column-header ${field.listClass || ''} ${field.listClassHeader || ''}`,
                 attributes: { 'data-field-name': fieldName },
@@ -2544,22 +2591,22 @@ class FTable extends FTableEventEmitter {
             }
         });
-        // Add action columns
-        if (this.options.actions.updateAction) {
+        // Add default action columns only if not user-placed
+        if (this.options.actions.updateAction && !this._userPlacedActions.has('update')) {
             FTableDOMHelper.create('th', {
                 className: 'ftable-command-column-header ftable-column-header-edit',
                 parent: headerRow
             });
         }
-        if (this.options.actions.cloneAction) {
+        if (this.options.actions.cloneAction && !this._userPlacedActions.has('clone')) {
             FTableDOMHelper.create('th', {
                 className: 'ftable-command-column-header ftable-column-header-clone',
                 parent: headerRow
             });
         }
-        if (this.options.actions.deleteAction) {
+        if (this.options.actions.deleteAction && !this._userPlacedActions.has('delete')) {
             FTableDOMHelper.create('th', {
                 className: 'ftable-command-column-header ftable-column-header-delete',
                 parent: headerRow
@@ -2580,17 +2627,27 @@ class FTable extends FTableEventEmitter {
             parent: theadParent
         });
-        // Add empty cell for selecting column if enabled
-        if (this.options.selecting && this.options.selectingCheckboxes) {
+        // Add empty cell for selecting column if enabled (only if not user-placed)
+        if (this.options.selecting && this.options.selectingCheckboxes && !this._userPlacedActions.has('select')) {
             FTableDOMHelper.create('th', {
                 className: 'ftable-toolbarsearch-column-header',
                 parent: searchRow
             });
         }
-        // Add search input cells for data columns
+        // Add search input cells for data columns (including user-placed action columns)
         for (const fieldName of this.columnList) {
             const field = this.options.fields[fieldName];
+            // Action columns get an empty search cell
+            if (field.action) {
+                FTableDOMHelper.create('th', {
+                    className: 'ftable-toolbarsearch-column-header ftable-command-column-header',
+                    parent: searchRow
+                });
+                continue;
+            }
             const isSearchable = field.searchable !== false;
             const th = FTableDOMHelper.create('th', {
@@ -2762,9 +2819,9 @@ class FTable extends FTableEventEmitter {
                 parent: searchRow
             });
-            const actionCount = (this.options.actions.updateAction ? 1 : 0) +
-                (this.options.actions.deleteAction ? 1 : 0) +
-                (this.options.actions.cloneAction ? 1 : 0);
+            const actionCount = (this.options.actions.updateAction && !this._userPlacedActions.has('update') ? 1 : 0) +
+                (this.options.actions.deleteAction && !this._userPlacedActions.has('delete') ? 1 : 0) +
+                (this.options.actions.cloneAction && !this._userPlacedActions.has('clone') ? 1 : 0);
             if (actionCount > 0) {
                 resetTh.colSpan = actionCount;
@@ -2872,9 +2929,7 @@ class FTable extends FTableEventEmitter {
     }
     createCustomMultiSelectForSearch(fieldSearchName, fieldName, field, optionsSource, attributes) {
-        const livesearch = field.livesearch
-            ?? (attributes['data-livesearch'] === 'true' || attributes['data-livesearch'] === true)
-            ?? false;
+        const livesearch = field.livesearch ?? false;
         return this.formBuilder._buildCustomMultiSelect({
             hiddenSelectId:            fieldSearchName,
@@ -3115,9 +3170,10 @@ class FTable extends FTableEventEmitter {
         const settings = {};
         this.columnList.forEach(fieldName => {
+            const field = this.options.fields[fieldName];
+            if (field.action) return; // Action columns have no persistent state
             const th = this.elements.table.querySelector(`[data-field-name="${fieldName}"]`);
             if (th) {
-                const field = this.options.fields[fieldName];
                 settings[fieldName] = {
                     width: th.style.width || field.width || 'auto',
                     visibility: field.visibility || 'visible'
@@ -3149,7 +3205,7 @@ class FTable extends FTableEventEmitter {
             const settings = JSON.parse(settingsJson);
             Object.entries(settings).forEach(([fieldName, config]) => {
                 const field = this.options.fields[fieldName];
-                if (field) {
+                if (field && !field.action) {
                     if (config.width) field.width = config.width;
                     if (config.visibility) field.visibility = config.visibility;
                 }
@@ -3451,6 +3507,7 @@ class FTable extends FTableEventEmitter {
         this.columnList.forEach(fieldName => {
             const field = this.options.fields[fieldName];
+            if (field.action) return; // Action columns don't appear in column picker
             const isVisible = field.visibility !== 'hidden';
             const isFixed = field.visibility === 'fixed';
             const isSeparator = field.visibility === 'separator';
@@ -3863,26 +3920,45 @@ class FTable extends FTableEventEmitter {
         // Store record data
         row.recordData = record;
-        // Add selecting checkbox if enabled
-        if (this.options.selecting && this.options.selectingCheckboxes) {
+        // Add selecting checkbox if enabled (only if not user-placed)
+        if (this.options.selecting && this.options.selectingCheckboxes && !this._userPlacedActions.has('select')) {
             this.addSelectingCell(row);
         }
-        // Add data cells
+        // Add data cells (including user-placed action columns)
         this.columnList.forEach(fieldName => {
-            this.addDataCell(row, record, fieldName);
+            const field = this.options.fields[fieldName];
+            if (field.action) {
+                // Render inline action cell
+                switch (field.action) {
+                    case 'select':
+                        this.addSelectingCell(row);
+                        break;
+                    case 'update':
+                        this.addEditCell(row);
+                        break;
+                    case 'clone':
+                        this.addCloneCell(row);
+                        break;
+                    case 'delete':
+                        this.addDeleteCell(row);
+                        break;
+                }
+            } else {
+                this.addDataCell(row, record, fieldName);
+            }
         });
-        // Add action cells
-        if (this.options.actions.updateAction) {
+        // Add default action cells only if not user-placed
+        if (this.options.actions.updateAction && !this._userPlacedActions.has('update')) {
             this.addEditCell(row);
         }
-        if (this.options.actions.cloneAction) {
+        if (this.options.actions.cloneAction && !this._userPlacedActions.has('clone')) {
             this.addCloneCell(row);
         }
-        if (this.options.actions.deleteAction) {
+        if (this.options.actions.deleteAction && !this._userPlacedActions.has('delete')) {
             this.addDeleteCell(row);
         }