lexgui 0.7.12 → 0.7.13

package/build/extensions/codeeditor.js

@@ -946,8 +946,11 @@ class CodeEditor
                     {
                         this._processSelection( cursor, e );
                     }
-                } else if( !e.keepSelection )
+                }
+                else if( !e.keepSelection )
+                {
                     this.endSelection();
+                }
             });
 
             this.action( 'End', false, ( ln, cursor, e ) => {
@@ -2502,7 +2505,7 @@ class CodeEditor
         {
             // Make sure we only keep the main cursor..
             this._removeSecondaryCursors();
-            this.cursorToLine( cursor, ln, true );
+            this.cursorToLine( cursor, ln );
             this.cursorToPosition( cursor, string.length );
         }
 
@@ -4077,7 +4080,7 @@ class CodeEditor
             charCounter += t.length;
         };
 
-        let iter = lineString.matchAll(/(<!--|-->|\*\/|\/\*|::|[\[\](){}<>.,;:*"'%@$!/= ])/g);
+        let iter = lineString.matchAll(/(<!--|-->|\*\/|\/\*|::|[\[\](){}<>.,;:*"'`%@$!/= ])/g);
         let subtokens = iter.next();
         if( subtokens.value )
         {
@@ -4237,13 +4240,29 @@ class CodeEditor
             usePreviousTokenToCheckString = true;
             customStringKeys['@['] = ']';
         }
+        else if( highlight == 'javascript' || highlight == 'typescript' )
+        {
+            customStringKeys["@`"] = "`";
+        }
 
         // Manage strings
         this._stringEnded = false;
 
         if( usePreviousTokenToCheckString || ( !inBlockComment && ( lang.tags ?? false ? ( this._enclosedByTokens( token, tokenIndex, '<', '>' ) ) : true ) ) )
         {
-            const _checkIfStringEnded = t => {
+            const _checkIfStringEnded = ( t ) => {
+
+                if( this._stringInterpolation )
+                {
+                    if( token == "$" && next == "{" )
+                    {
+                        delete this._stringInterpolation;
+                        this._stringInterpolationOpened = true;
+                        this._stringEnded = true;
+                        return;
+                    }
+                }
+
                 const idx = Object.values( customStringKeys ).indexOf( t );
                 this._stringEnded = (idx > -1) && (idx == Object.values(customStringKeys).indexOf( customStringKeys[ '@' + this._buildingString ] ));
             };
@@ -4257,12 +4276,23 @@ class CodeEditor
                 // Start new string
                 this._buildingString = ( usePreviousTokenToCheckString ? ctxData.prevWithSpaces : token );
 
+                if( ( highlight == 'javascript' || highlight == 'typescript' ) && token == "`" )
+                {
+                    this._stringInterpolation = true;
+                }
+
                 // Check if string ended in same token using next...
                 if( usePreviousTokenToCheckString )
                 {
                     _checkIfStringEnded( ctxData.nextWithSpaces );
                 }
             }
+            else if( this._stringInterpolationOpened && prev == "}" )
+            {
+                delete this._stringInterpolationOpened;
+                this._stringInterpolation = true;
+                this._buildingString = "`";
+            }
         }
 
         // Update context data for next tests
@@ -4284,6 +4314,16 @@ class CodeEditor
         // Get highlighting class based on language common and specific rules
         let tokenClass = this._getTokenHighlighting( ctxData, highlight );
 
+        if( this._stringInterpolationOpened && this._pendingString )
+        {
+            this._pendingString = this._pendingString.substring( 0, this._pendingString.indexOf( "$" ) );
+
+            if( ctxData.tokens[ tokenIndex + 1 ] == "{" )
+            {
+                ctxData.tokens[ tokenIndex + 1 ] = "${";
+            }
+        }
+
         // We finished constructing a string
         if( this._buildingString && ( this._stringEnded || isLastToken ) && !inBlockComment )
         {
@@ -4671,43 +4711,57 @@ class CodeEditor
         this.hideAutoCompleteBox();
     }
 
-    cursorToRight( key, cursor )
+    cursorToRight( text, cursor )
     {
-        if( !key ) return;
+        if( !text || !text.length ) return;
+
+        const chars = text.length;
+        const offset = chars * this.charWidth;
 
-        cursor._left += this.charWidth;
+        cursor._left += offset;
         cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
-        cursor.position++;
+        cursor.position += chars;
 
         this.restartBlink();
 
         // Add horizontal scroll
+        const rightMargin = this.charWidth;
+        const cursorX = ( cursor.position * this.charWidth );
         const currentScrollLeft = this.getScrollLeft();
-        var viewportSizeX = ( this.codeScroller.clientWidth + currentScrollLeft ) - CodeEditor.LINE_GUTTER_WIDTH; // Gutter offset
-        if( (cursor.position * this.charWidth) >= viewportSizeX )
+        const viewportSizeX = this.codeScroller.clientWidth - CodeEditor.LINE_GUTTER_WIDTH; // Gutter offset
+        const viewportX = viewportSizeX + currentScrollLeft;
+
+        if( cursorX >= ( viewportX - rightMargin ) )
         {
-            this.setScrollLeft( currentScrollLeft + this.charWidth );
+            const scroll = Math.max( cursorX - ( viewportSizeX - rightMargin ), 0 );
+            this.setScrollLeft( scroll );
         }
     }
 
-    cursorToLeft( key, cursor )
+    cursorToLeft( text, cursor )
     {
-        if( !key ) return;
+        if( !text || !text.length ) return;
+
+        const chars = text.length;
+        const offset = chars * this.charWidth;
 
-        cursor._left -= this.charWidth;
+        cursor._left -= offset;
         cursor._left = Math.max( cursor._left, 0 );
         cursor.style.left = `calc( ${ cursor._left }px + ${ this.xPadding } )`;
-        cursor.position--;
+        cursor.position -= chars;
         cursor.position = Math.max( cursor.position, 0 );
+
         this.restartBlink();
 
         // Add horizontal scroll
-
+        const leftMargin = this.charWidth;
+        const cursorX = ( cursor.position * this.charWidth );
         const currentScrollLeft = this.getScrollLeft();
-        var viewportSizeX = currentScrollLeft; // Gutter offset
-        if( ( ( cursor.position - 1 ) * this.charWidth ) < viewportSizeX )
+
+        if( cursorX < ( currentScrollLeft + leftMargin ) )
         {
-            this.setScrollLeft( currentScrollLeft - this.charWidth );
+            const scroll = Math.max( cursorX - leftMargin, 0 );
+            this.setScrollLeft( scroll );
         }
     }
 
@@ -4759,9 +4813,13 @@ class CodeEditor
             return;
         }
 
-        for( let char of text )
+        if( reverse )
         {
-            reverse ? this.cursorToLeft( char, cursor ) : this.cursorToRight( char, cursor );
+            this.cursorToLeft( text, cursor )
+        }
+        else
+        {
+            this.cursorToRight( text, cursor );
         }
     }
 
@@ -4867,15 +4925,17 @@ class CodeEditor
         if( flag & CodeEditor.CURSOR_LEFT )
         {
             cursor._left = 0;
-            cursor.style.left = "calc(" + ( -this.getScrollLeft() ) + "px + " + this.xPadding + ")";
+            cursor.style.left = "calc(" + this.xPadding + ")";
             cursor.position = 0;
+            this.setScrollLeft( 0 );
         }
 
         if( flag & CodeEditor.CURSOR_TOP )
         {
             cursor._top = 0;
-            cursor.style.top = ( -this.getScrollTop() ) + "px";
+            cursor.style.top = "0px";
             cursor.line = 0;
+            this.setScrollTop( 0 )
         }
     }
 
@@ -5034,7 +5094,7 @@ class CodeEditor
         LX.doAsync( () => {
             this.codeScroller.scrollLeft = value;
             this.setScrollBarValue( 'horizontal', 0 );
-        }, 20 );
+        }, 10 );
     }
 
     setScrollTop( value )
@@ -5043,7 +5103,7 @@ class CodeEditor
         LX.doAsync( () => {
             this.codeScroller.scrollTop = value;
             this.setScrollBarValue( 'vertical' );
-        }, 20 );
+        }, 10 );
     }
 
     resize( flag = CodeEditor.RESIZE_SCROLLBAR_H_V, pMaxLength, onResize )

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.12",
+    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 );
                 }
             }