@liedekef/ftable 1.1.7 → 1.1.9

package/ftable.esm.js

@@ -272,11 +272,15 @@ class FTableHttpClient {
             }
 
             if (Array.isArray(value)) {
+                // Clean key: remove trailing [] if present
+                const cleanKey = key.replace(/\[\]$/, '');
+                const paramKey = cleanKey + '[]'; // Always use [] suffix once
+
                 // Append each item in the array with the same key
                 // This generates query strings like `key=val1&key=val2&key=val3`
                 value.forEach(item => {
                     if (item !== null && item !== undefined) { // Ensure array items are also not null/undefined
-                        fullUrl.searchParams.append(key, item);
+                        fullUrl.searchParams.append(paramKey, item);
                     }
                 });
             } else {
@@ -302,11 +306,15 @@ class FTableHttpClient {
                 return; // Skip null or undefined values
             }
             if (Array.isArray(value)) {
+                // Clean key: remove trailing [] if present
+                const cleanKey = key.replace(/\[\]$/, '');
+                const paramKey = cleanKey + '[]'; // Always use [] suffix once
+
                 // Append each item in the array with the same key
                 // This generates query strings like `key=val1&key=val2&key=val3`
                 value.forEach(item => {
                     if (item !== null && item !== undefined) { // Ensure array items are also not null/undefined
-                        formData.append(`${key}[]`, item);
+                        formData.append(paramKey, item);
                     }
                 });
             } else {
@@ -1218,64 +1226,55 @@ class FTableFormBuilder {
     }
 
     createCheckbox(fieldName, field, value) {
-        function getCheckboxText(field, value) {
-            if (value == undefined ) {
-                value = 0;
-            }
-            if (field.values && field.values[value] !== undefined) {
-                return field.values[value];
-            }
-            return value ? 'Yes' : 'No';
-        }
         const wrapper = FTableDOMHelper.create('div', {
-            className: 'ftable-checkbox-wrapper'
+            className: 'ftable-yesno-check-wrapper'
         });
 
         const isChecked = [1, '1', true, 'true'].includes(value);
 
-        const displayValue = getCheckboxText(field, value); // Uses field.values if defined
+        // Determine "Yes" and "No" labels
+        let dataNo = 'No';
+        let dataYes = 'Yes';
 
+        if (field.values && typeof field.values === 'object') {
+            if (field.values['0'] !== undefined) dataNo = field.values['0'];
+            if (field.values['1'] !== undefined) dataYes = field.values['1'];
+        }
+
+        // Create the checkbox
         const checkbox = FTableDOMHelper.create('input', {
+            className: ['ftable-yesno-check-input', field.inputClass || ''].filter(Boolean).join(' '),
             attributes: {
                 type: 'checkbox',
                 name: fieldName,
                 id: `Edit-${fieldName}`,
-                class: field.inputClass || '',
                 value: '1'
             },
+            properties: {
+                checked: isChecked
+            },
             parent: wrapper
         });
-        checkbox.checked = isChecked;
 
+        // Create the label with data attributes
         const label = FTableDOMHelper.create('label', {
-            attributes: { for: `Edit-${fieldName}` },
+            className: 'ftable-yesno-check-text',
+            attributes: {
+                for: `Edit-${fieldName}`,
+                'data-yes': dataYes,
+                'data-no': dataNo
+            },
             parent: wrapper
         });
 
-        // Add the static formText (e.g., "Is Active?")
+        // Optional: Add a static form label (e.g., "Is Active?")
         if (field.formText) {
-            FTableDOMHelper.create('span', {
+            const formSpan = FTableDOMHelper.create('span', {
                 text: field.formText,
-                parent: label
-            });
-        }
-
-        // Only add dynamic value span if field.values is defined
-        if (field.values) {
-            const valueSpan = FTableDOMHelper.create('span', {
-                className: 'ftable-checkbox-dynamic-value',
-                text: ` ${displayValue}`,
-                parent: label
-            });
-
-            // Update on change
-            checkbox.addEventListener('change', () => {
-                const newValue = checkbox.checked ? '1' : '0';
-                const newText = getCheckboxText(field, newValue);
-                valueSpan.textContent = ` ${newText}`;
+                parent: wrapper
             });
+            formSpan.style.marginLeft = '8px';
         }
-
         return wrapper;
     }
 
@@ -1681,7 +1680,7 @@ class FTable extends FTableEventEmitter {
         // Build column list (visible, listable, non-hidden) fields
         this.columnList = this.fieldList.filter(name => {
             const field = this.options.fields[name];
-            return field.list !== false && field.type !== 'hidden';
+            return field.list !== false;
         });
 
         // Find key field
@@ -2621,9 +2620,9 @@ class FTable extends FTableEventEmitter {
     positionColumnSelectionMenu(e) {
         const self = this;
 
-        // Use clientX/clientY (relative to viewport)
-        let left = e.clientX;
-        let top = e.clientY;
+        // menu is bounded to the body for absolute positioning above other content, so safest is to use pageX/Y
+        let left = e.pageX;
+        let top = e.pageY;
 
         // Define minimum width
         const minWidth = 100;
@@ -2855,8 +2854,8 @@ class FTable extends FTableEventEmitter {
              });
 
              if (queries.length > 0) {
-                 params['q[]'] = queries;
-                 params['opt[]'] = searchFields;
+                 params['q'] = queries;
+                 params['opt'] = searchFields;
              }
         }
 

package/ftable.js

@@ -277,11 +277,15 @@ class FTableHttpClient {
             }
 
             if (Array.isArray(value)) {
+                // Clean key: remove trailing [] if present
+                const cleanKey = key.replace(/\[\]$/, '');
+                const paramKey = cleanKey + '[]'; // Always use [] suffix once
+
                 // Append each item in the array with the same key
                 // This generates query strings like `key=val1&key=val2&key=val3`
                 value.forEach(item => {
                     if (item !== null && item !== undefined) { // Ensure array items are also not null/undefined
-                        fullUrl.searchParams.append(key, item);
+                        fullUrl.searchParams.append(paramKey, item);
                     }
                 });
             } else {
@@ -307,11 +311,15 @@ class FTableHttpClient {
                 return; // Skip null or undefined values
             }
             if (Array.isArray(value)) {
+                // Clean key: remove trailing [] if present
+                const cleanKey = key.replace(/\[\]$/, '');
+                const paramKey = cleanKey + '[]'; // Always use [] suffix once
+
                 // Append each item in the array with the same key
                 // This generates query strings like `key=val1&key=val2&key=val3`
                 value.forEach(item => {
                     if (item !== null && item !== undefined) { // Ensure array items are also not null/undefined
-                        formData.append(`${key}[]`, item);
+                        formData.append(paramKey, item);
                     }
                 });
             } else {
@@ -1223,64 +1231,55 @@ class FTableFormBuilder {
     }
 
     createCheckbox(fieldName, field, value) {
-        function getCheckboxText(field, value) {
-            if (value == undefined ) {
-                value = 0;
-            }
-            if (field.values && field.values[value] !== undefined) {
-                return field.values[value];
-            }
-            return value ? 'Yes' : 'No';
-        }
         const wrapper = FTableDOMHelper.create('div', {
-            className: 'ftable-checkbox-wrapper'
+            className: 'ftable-yesno-check-wrapper'
         });
 
         const isChecked = [1, '1', true, 'true'].includes(value);
 
-        const displayValue = getCheckboxText(field, value); // Uses field.values if defined
+        // Determine "Yes" and "No" labels
+        let dataNo = 'No';
+        let dataYes = 'Yes';
 
+        if (field.values && typeof field.values === 'object') {
+            if (field.values['0'] !== undefined) dataNo = field.values['0'];
+            if (field.values['1'] !== undefined) dataYes = field.values['1'];
+        }
+
+        // Create the checkbox
         const checkbox = FTableDOMHelper.create('input', {
+            className: ['ftable-yesno-check-input', field.inputClass || ''].filter(Boolean).join(' '),
             attributes: {
                 type: 'checkbox',
                 name: fieldName,
                 id: `Edit-${fieldName}`,
-                class: field.inputClass || '',
                 value: '1'
             },
+            properties: {
+                checked: isChecked
+            },
             parent: wrapper
         });
-        checkbox.checked = isChecked;
 
+        // Create the label with data attributes
         const label = FTableDOMHelper.create('label', {
-            attributes: { for: `Edit-${fieldName}` },
+            className: 'ftable-yesno-check-text',
+            attributes: {
+                for: `Edit-${fieldName}`,
+                'data-yes': dataYes,
+                'data-no': dataNo
+            },
             parent: wrapper
         });
 
-        // Add the static formText (e.g., "Is Active?")
+        // Optional: Add a static form label (e.g., "Is Active?")
         if (field.formText) {
-            FTableDOMHelper.create('span', {
+            const formSpan = FTableDOMHelper.create('span', {
                 text: field.formText,
-                parent: label
-            });
-        }
-
-        // Only add dynamic value span if field.values is defined
-        if (field.values) {
-            const valueSpan = FTableDOMHelper.create('span', {
-                className: 'ftable-checkbox-dynamic-value',
-                text: ` ${displayValue}`,
-                parent: label
-            });
-
-            // Update on change
-            checkbox.addEventListener('change', () => {
-                const newValue = checkbox.checked ? '1' : '0';
-                const newText = getCheckboxText(field, newValue);
-                valueSpan.textContent = ` ${newText}`;
+                parent: wrapper
             });
+            formSpan.style.marginLeft = '8px';
         }
-
         return wrapper;
     }
 
@@ -1686,7 +1685,7 @@ class FTable extends FTableEventEmitter {
         // Build column list (visible, listable, non-hidden) fields
         this.columnList = this.fieldList.filter(name => {
             const field = this.options.fields[name];
-            return field.list !== false && field.type !== 'hidden';
+            return field.list !== false;
         });
 
         // Find key field
@@ -2626,9 +2625,9 @@ class FTable extends FTableEventEmitter {
     positionColumnSelectionMenu(e) {
         const self = this;
 
-        // Use clientX/clientY (relative to viewport)
-        let left = e.clientX;
-        let top = e.clientY;
+        // menu is bounded to the body for absolute positioning above other content, so safest is to use pageX/Y
+        let left = e.pageX;
+        let top = e.pageY;
 
         // Define minimum width
         const minWidth = 100;
@@ -2860,8 +2859,8 @@ class FTable extends FTableEventEmitter {
              });
 
              if (queries.length > 0) {
-                 params['q[]'] = queries;
-                 params['opt[]'] = searchFields;
+                 params['q'] = queries;
+                 params['opt'] = searchFields;
              }
         }