lexgui 0.7.11 → 0.7.13

package/build/lexgui.css

@@ -2753,7 +2753,6 @@ input[type=number] {
     font-size: var(--global-font-size);
     font-family: var(--global-font);
     line-height: 23px;
-    margin-left: -2px;
 }
 
 .lextree .lextreeitem {

package/build/lexgui.js

@@ -14,7 +14,7 @@ console.warn( 'Script _build/lexgui.js_ is depracated and will be removed soon.
 */
 
 const LX = {
-    version: "0.7.11",
+    version: "0.7.13",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -5329,11 +5329,12 @@ LX.guidGenerator = guidGenerator;
 function buildTextPattern( options = {} )
 {
     let patterns = [];
-    if ( options.lowercase ) patterns.push("(?=.*[a-z])");
-    if ( options.uppercase ) patterns.push("(?=.*[A-Z])");
-    if ( options.digit ) patterns.push("(?=.*\\d)");
-    if ( options.specialChar ) patterns.push("(?=.*[@#$%^&+=!])");
-    if ( options.noSpaces ) patterns.push("(?!.*\\s)");
+    if( options.lowercase ) patterns.push("(?=.*[a-z])");
+    if( options.uppercase ) patterns.push("(?=.*[A-Z])");
+    if( options.digit ) patterns.push("(?=.*\\d)");
+    if( options.specialChar ) patterns.push("(?=.*[@#$%^&+=!])");
+    if( options.noSpaces ) patterns.push("(?!.*\\s)");
+    if( options.email ) patterns.push("(^[^\s@]+@[^\s@]+\.[^\s@]+$)");
 
     let minLength = options.minLength || 0;
     let maxLength = options.maxLength || ""; // Empty means no max length restriction
@@ -5344,6 +5345,45 @@ function buildTextPattern( options = {} )
 
 LX.buildTextPattern = buildTextPattern;
 
+/**
+ * Checks a value against a set of pattern requirements and returns an array
+ * of specific error messages for all criteria that failed.
+ * @param { String } value The string to validate.
+ * @param { Object } pattern The pattern options
+ * @returns { Array } An array of error messages for failed criteria.
+ */
+function validateValueAtPattern( value, pattern = {}, ...args )
+{
+    const errors = [];
+    const minLength = pattern.minLength || 0;
+    const maxLength = pattern.maxLength; // undefined means no max limit
+
+    // Length requirements
+    if( value.length < minLength ) errors.push(`Must be at least ${ minLength } characters long.`);
+    else if( maxLength !== undefined && value.length > maxLength ) errors.push(`Must be no more than ${ maxLength } characters long.`);
+
+    // Check for Lowercase, Uppercase, Digits
+    if( pattern.lowercase && !/[a-z]/.test( value ) ) errors.push( "Must contain at least one lowercase letter (a-z)." );
+    if( pattern.uppercase && !/[A-Z]/.test( value ) ) errors.push( "Must contain at least one uppercase letter (A-Z)." );
+    if( pattern.digit && !/\d/.test( value ) ) errors.push( "Must contain at least one number (0-9)." );
+
+    // Check for No Spaces (The original regex was (?!.*\s), meaning 'not followed by any character and a space')
+    if( pattern.noSpaces && /\s/.test(value)) errors.push("Must NOT contain any spaces.");
+
+    // Check for Special Character (using the same set as buildTextPattern)
+    if( pattern.specialChar && !/[@#$%^&+=!]/.test( value ) ) errors.push("Must contain at least one special character (e.g., @, #, $, %, ^, &, +, =, !).");
+
+    // Check email formatting
+    if( pattern.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test( value ) ) errors.push("Must have a valid email format.");
+
+    // Check match to any other text word
+    if( pattern.fieldMatchName && value !== ( args[ 0 ] ) ) errors.push(`Must match ${ pattern.fieldMatchName  } field.`);
+
+    return errors;
+}
+
+LX.validateValueAtPattern = validateValueAtPattern;
+
 /**
  * @method makeDraggable
  * @description Allows an element to be dragged
@@ -9062,7 +9102,14 @@ class TextInput extends BaseComponent
 
         this.onSetValue = ( newValue, skipCallback, event ) => {
 
-            if( !this.valid( newValue ) || ( this._lastValueTriggered == newValue ) )
+            let skipTrigger = ( this._lastValueTriggered == newValue );
+
+            if( !options.ignoreValidation )
+            {
+                skipTrigger |=  ( !this.valid( newValue ) );
+            }
+
+            if( skipTrigger )
             {
                 return;
             }
@@ -9082,11 +9129,11 @@ class TextInput extends BaseComponent
             container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
-        this.valid = ( v ) => {
+        this.valid = ( v, matchField ) => {
             v = v ?? this.value();
-            if( ( wValue.pattern ?? "" ) == "" ) return true;
-            const regexp = new RegExp( wValue.pattern );
-            return regexp.test( v );
+            if( !options.pattern ) return true;
+            const errs = LX.validateValueAtPattern( v, options.pattern, matchField );
+            return ( errs.length == 0 );
         };
 
         let container = document.createElement( 'div' );
@@ -9115,7 +9162,7 @@ class TextInput extends BaseComponent
 
             if( options.pattern )
             {
-                wValue.setAttribute( "pattern", options.pattern );
+                wValue.setAttribute( "pattern", LX.buildTextPattern( options.pattern ) );
             }
 
             const trigger = options.trigger ?? "default";
@@ -9785,13 +9832,14 @@ class Form extends BaseComponent
 
             if( entryData.constructor != Object )
             {
-                const oldValue = JSON.parse( JSON.stringify( entryData ) );
+                const oldValue = LX.deepCopy( entryData );
                 entryData = { value: oldValue };
                 data[ entry ] = entryData;
             }
 
-            entryData.placeholder = entryData.placeholder ?? ( entryData.label ?? `Enter ${ entry }` );
             entryData.width = "100%";
+            entryData.placeholder = entryData.placeholder ?? ( entryData.label ?? `Enter ${ entry }` );
+            entryData.ignoreValidation = true;
 
             if( !( options.skipLabels ?? false ) )
             {
@@ -9807,14 +9855,14 @@ class Form extends BaseComponent
             container.formData[ entry ] = entryData.constructor == Object ? entryData.value : entryData;
         }
 
-        const buttonContainer = LX.makeContainer( ["100%", "auto"], "flex flex-row", "", container );
+        const buttonContainer = LX.makeContainer( ["100%", "auto"], "flex flex-row mt-2", "", container );
 
         if( options.secondaryActionName || options.secondaryActionCallback )
         {
             const secondaryButton = new LX.Button( null, options.secondaryActionName ?? "Cancel", ( value, event ) => {
-                if( callback )
+                if( options.secondaryActionCallback )
                 {
-                    callback( container.formData, event );
+                    options.secondaryActionCallback( container.formData, event );
                 }
             }, { width: "100%", minWidth: "0", buttonClass: options.secondaryButtonClass ?? "primary" } );
 
@@ -9829,9 +9877,22 @@ class Form extends BaseComponent
             {
                 let entryData = data[ entry ];
 
-                if( !entryData.textComponent.valid() )
+                const pattern = entryData.pattern;
+                const matchField = pattern?.fieldMatchName ? container.formData[ pattern.fieldMatchName ] : undefined;
+
+                if( !entryData.textComponent.valid( undefined, matchField ) )
                 {
-                    errors.push( { type: "input_not_valid", entry } );
+                    const err = { entry, type: "input_not_valid" };
+                    err.messages = [];
+                    if( pattern )
+                    {
+                        err.messages = LX.validateValueAtPattern(
+                            container.formData[ entry ],
+                            pattern,
+                            matchField
+                        );
+                    }
+                    errors.push( err );
                 }
             }
 
@@ -12705,6 +12766,7 @@ class Table extends BaseComponent
         this.filter = options.filter ?? false;
         this.customFilters = options.customFilters ?? false;
         this._toggleColumns = options.toggleColumns ?? false;
+        this._sortColumns = options.sortColumns ?? true;
         this._currentFilter = options.filterValue;
 
         data.head = data.head ?? [];
@@ -12971,28 +13033,62 @@ class Table extends BaseComponent
                         th.classList.add( "centered" );
                     }
 
-                    const menuOptions = [
-                        { name: "Asc", icon: "ArrowUpAZ", callback: sortFn.bind( this, idx, 1 ) },
-                        { name: "Desc", icon: "ArrowDownAZ", callback: sortFn.bind( this, idx, -1 ) }
-                    ];
+                    const menuOptions = [];
 
-                    if( this._toggleColumns )
+                    if( options.columnActions )
                     {
-                        menuOptions.push(
-                            null,
+                        for( let action of options.columnActions )
+                        {
+                            if( !action.name )
                             {
-                                name: "Hide", icon: "EyeOff", callback: () => {
-                                    data.colVisibilityMap[ idx ] = false;
-                                    const cells = table.querySelectorAll(`tr > *:nth-child(${idx + this.rowOffsetCount + 1})`);
-                                    cells.forEach( cell => {
-                                        cell.style.display = ( cell.style.display === "none" ) ? "" : "none";
-                                    } );
-                                }
+                                console.warn( "Invalid column action (missing name):", action );
+                                continue;
                             }
+
+                            menuOptions.push( { name: action.name, icon: action.icon, className: action.className, callback: () => {
+                                const colRows = this.data.body.map( row => [ row[ idx ] ] );
+                                const mustRefresh = action.callback( colRows, table );
+                                if( mustRefresh )
+                                {
+                                    this.refresh();
+                                }
+                            } } );
+                        }
+                    }
+
+                    if( this._sortColumns )
+                    {
+                        if(  menuOptions.length > 0 )
+                        {
+                            menuOptions.push( null );
+                        }
+
+                        menuOptions.push(
+                            { name: "Asc", icon: "ArrowUpAZ", callback: sortFn.bind( this, idx, 1 ) },
+                            { name: "Desc", icon: "ArrowDownAZ", callback: sortFn.bind( this, idx, -1 ) }
                         );
                     }
 
+                    if( this._toggleColumns )
+                    {
+                        if(  menuOptions.length > 0 )
+                        {
+                            menuOptions.push( null );
+                        }
+
+                        menuOptions.push( {
+                            name: "Hide", icon: "EyeOff", callback: () => {
+                                data.colVisibilityMap[ idx ] = false;
+                                const cells = table.querySelectorAll(`tr > *:nth-child(${idx + this.rowOffsetCount + 1})`);
+                                cells.forEach( cell => {
+                                    cell.style.display = ( cell.style.display === "none" ) ? "" : "none";
+                                } );
+                            }
+                        } );
+                    }
+
                     th.addEventListener( 'click', event => {
+                        if( menuOptions.length === 0 ) return;
                         new LX.DropdownMenu( event.target, menuOptions, { side: "bottom", align: "start" });
                     });