lexgui 0.7.11 → 0.7.13

package/build/lexgui.module.js

@@ -1,4 +1,4 @@
-// This is a generated file. Do not edit.
+// This is a generated file. Do not edit.
 // Lexgui.js @jxarco
 
 /**
@@ -7,7 +7,7 @@
 */
 
 const LX = {
-    version: "0.7.11",
+    version: "0.7.13",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -4570,8 +4570,8 @@ Element.prototype.ignore = function( eventName, callbackName ) {
     callbackName = callbackName ?? ( "_on" + eventName );
     const callback = this[ callbackName ];
     this.removeEventListener( eventName, callback );
-};
-
+};
+
 // icons.js @jxarco
 
 const RAW_ICONS = {
@@ -4752,8 +4752,8 @@ LX.LucideIconAlias = {
     "RotateRight": "RotateCw",
     "RotateBack": "RotateCcw",
     "RotateLeft": "RotateCcw",
-};
-
+};
+
 // utils.js @jxarco
 
 function clamp( num, min, max ) { return Math.min( Math.max( num, min ), max ); }
@@ -5322,11 +5322,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
@@ -5337,6 +5338,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
@@ -6736,8 +6776,8 @@ function drawSpline( ctx, pts, t )
     ctx.restore();
 }
 
-LX.drawSpline = drawSpline;
-
+LX.drawSpline = drawSpline;
+
 // area.js @jxarco
 
 class AreaOverlayButtons {
@@ -7887,8 +7927,8 @@ class Area {
         }
     }
 }
-LX.Area = Area;
-
+LX.Area = Area;
+
 // base_component.js @jxarco
 
 /**
@@ -9055,7 +9095,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;
             }
@@ -9075,11 +9122,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' );
@@ -9108,7 +9155,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";
@@ -9778,13 +9825,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 ) )
             {
@@ -9800,14 +9848,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" } );
 
@@ -9822,9 +9870,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 );
                 }
             }
 
@@ -12698,6 +12759,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 ?? [];
@@ -12964,28 +13026,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" });
                     });
 
@@ -13693,8 +13789,8 @@ class Rate extends BaseComponent
     }
 }
 
-LX.Rate = Rate;
-
+LX.Rate = Rate;
+
 // panel.js @jxarco
 
 /**
@@ -14893,8 +14989,8 @@ class Panel {
     }
 }
 
-LX.Panel = Panel;
-
+LX.Panel = Panel;
+
 // branch.js @jxarco
 
 /**
@@ -15118,8 +15214,8 @@ class Branch {
         }
     }
 }
-LX.Branch = Branch;
-
+LX.Branch = Branch;
+
 // menubar.js @jxarco
 
 /**
@@ -15451,8 +15547,8 @@ class Menubar {
         }
     }
 }
-LX.Menubar = Menubar;
-
+LX.Menubar = Menubar;
+
 // sidebar.js @jxarco
 
 /**
@@ -16176,8 +16272,8 @@ class Sidebar {
         }
     }
 }
-LX.Sidebar = Sidebar;
-
+LX.Sidebar = Sidebar;
+
 // asset_view.js @jxarco
 
 class AssetViewEvent {
@@ -17129,8 +17225,8 @@ class AssetView {
     }
 }
 
-LX.AssetView = AssetView;
-
+LX.AssetView = AssetView;
+
 // tour.js @jxarco
 
 class Tour {
@@ -17428,6 +17524,6 @@ class Tour {
         } );
     }
 }
-LX.Tour = Tour;
-
-export { ADD_CUSTOM_COMPONENT, Area, AssetView, AssetViewEvent, BaseComponent, Branch, LX, Menubar, Panel, Sidebar, Tour };
+LX.Tour = Tour;
+
+export { ADD_CUSTOM_COMPONENT, Area, AssetView, AssetViewEvent, BaseComponent, Branch, LX, Menubar, Panel, Sidebar, Tour };