frayerjj-frontend 0.2.37 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frayerjj-frontend",
-  "version": "0.2.37",
+  "version": "0.3.1",
   "description": "My base frontend for various projects",
   "main": "src/index.js",
   "type": "module",

package/src/ckeupload.js

@@ -1,5 +1,5 @@
 import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
-import { message } from "./message";
+import { msg } from "./msg";
 
 export const ckeupload = {
     adapter: editor => {
@@ -86,7 +86,7 @@ export const ckeupload = {
                 extraPlugins: [ CkeUploadAdapter ]
             }).then(editor => {
                 window.editors[el.id] = editor;
-                message.verbose('CKEditor Initialized');
+                msg.verbose('CKEditor Initialized');
             }).catch( error => {
                 console.error( 'There was a problem initializing the editor.', error );
             });

package/src/fileUpload.js

@@ -1,5 +1,230 @@
+import { loading } from "./loading";
+import { msg } from "./msg";
+import { modal } from "./modal";
+
 export const fileUpload = {
+    
+    imgFormats: ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp'],
+
+    icons: {
+        'application/msword': 'fa-file-word',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'fa-file-word',
+        'application/vnd.ms-excel': 'fa-file-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'fa-file-excel',
+        'application/vnd.ms-powerpoint': 'fa-file-powerpoint',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'fa-file-powerpoint',
+        'application/pdf': 'fa-file-pdf',
+    },
+    
+    sampleArgs: {
+        name: 'files', // Variable name
+        mimes: ['image/jpeg', 'image/png'], // Allowed MIME types
+        iconSize: 128, // Icon size
+        files: [ // Existing files
+            { id: 1, name: 'file1.jpg', mime: 'image/jpeg', uri: '/path/to/file1.jpg' },
+        ],
+        messages: { // Messages
+            instructions: 'Drag and drop files here or click the button below.',
+            browse: 'Browse',
+            close: 'Close',
+            view: 'View',
+            delete: 'Delete',
+            errorTitle: 'Error',
+            uploadError: 'Error uploading file.',
+            deleteError: 'Error deleting file.'
+        },
+        uris: { // URIs
+            upload: '/path/to/upload',
+            delete: '/path/to/delete'
+        }
+    },
+
     build: {
-        
+
+        core: args => {
+            let container = document.createElement('div');
+            let list = document.createElement('ul');
+            list.classList.add('upload-files');
+            Objects.values(args.files).forEach(file => {
+                list.insertAdjacentHTML('beforeend', fileUpload.build.item(args, file));
+            });
+            let input = document.createElement('input');
+            input.type = 'file';
+            input.style.display = 'none';
+            let instructions = document.createElement('div');
+            instructions.classList.add('upload-instructions');
+            let icon = document.createElement('span');
+            icon.classList.add('fas', 'fa-arrow-alt-circle-u');
+            instructions.appendChild(icon);
+            let text = document.createElement('p');
+            text.textContent = args.messages.instructions ?? fileUpload.sampleArgs.messages.instructions;
+            instructions.appendChild(text);
+            let button = document.createElement('button');
+            button.classList.add('btn', 'btn-outline-secondary', 'btn-browse');
+            button.textContent = args.messages.browse ?? fileUpload.sampleArgs.messages.browse;
+            instructions.appendChild(button);
+            container.appendChild(list);
+            container.appendChild(input);
+            container.appendChild(instructions);
+            return container.outerHTML;
+        },
+
+        item: (args, file) => {
+            let item = document.createElement('li');
+            item.classList.add('upload-file');
+            item.title = file.name;
+            item.setAttribute('data-uri', file.uri);
+            if (fileUpload.imgFormats.includes(file.mime))
+                item.classList.add('upload-type-image');
+            else
+                item.classList.add('upload-type-file');
+            let input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = args.name + '[]';
+            input.value = file.id;
+            item.appendChild(input);
+            let icon = fileUpload.imgFormats.includes(file.mime) ? fileUpload.build.thumb(file) : fileUpload.build.icon(file);
+            item.appendChild(icon);
+            let heading = document.createElement('h6');
+            heading.textContent = file.name;
+            item.appendChild(heading);
+            let buttons = document.createElement('div');
+            buttons.classList.add('btn-group');
+            let view = document.createElement('button');
+            view.classList.add('btn', 'btn-outline-secondary', 'btn-view');
+            view.textContent = args.messages.view ?? fileUpload.sampleArgs.messages.view;
+            buttons.appendChild(view);
+            let del = document.createElement('button');
+            del.classList.add('btn', 'btn-outline-danger', 'btn-delete');
+            del.textContent = args.messages.delete ?? fileUpload.sampleArgs.messages.delete;
+            buttons.appendChild(del);
+            item.appendChild(buttons);
+            return item.outerHTML;
+        },
+
+        icon: file => {
+            let icon = document.createElement('span');
+            icon.classList.add('border', 'fas');
+            if (fileUpload.icons[file.mime])
+                icon.classList.add(fileUpload.icons[file.mime]);
+            else
+                icon.classList.add('fa-file');
+            icon.style.width = fileUpload.iconSize + 'px';
+            icon.style.height = fileUpload.iconSize + 'px';
+            return icon;
+        },
+
+        thumb: file => {
+            let thumb = document.createElement('img');
+            thumb.src = file.uri;
+            thumb.style.width = fileUpload.iconSize + 'px';
+            thumb.style.height = fileUpload.iconSize + 'px';
+            return thumb;
+        }
+    },
+
+    delete: (el, item) => {
+        loading.start(1, el);
+        let data = new FormData();
+        data.append('id', item.querySelector('input[type="hidden"]').value);
+        fetch(el.getAttribute('data-delete-uri'), {
+            method: 'POST',
+            body: data,
+            headers: {
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
+            }
+        }).then(response => response.json()).then(result => {
+            if (result.success)
+                item.remove();
+            else
+                modal.alert(args.messages.errorTitle ?? fileUpload.sampleArgs.messages.errorTitle, args.messages.deleteError ?? fileUpload.sampleArgs.messages.deleteError);
+            loading.stop();
+        }).catch(error => {
+            modal.alert(args.messages.errorTitle ?? fileUpload.sampleArgs.messages.errorTitle, args.messages.deleteError ?? fileUpload.sampleArgs.messages.deleteError);
+            msg.error(error);
+            loading.stop();
+        });
+    },
+
+    init: () => {
+        document.querySelectorAll('.file-upload').forEach(el => {
+            // Get arguments
+            let args = JSON.parse(el.innerHTML);
+            // Build has many input
+            el.innerHTML = fileUpload.build.core(args);
+            // Add event listeners
+            el.querySelector('.btn-browse').addEventListener('click', () => {
+                el.querySelector('input[type="file"]').click();
+            });
+            el.querySelector('input[type="file"]').addEventListener('change', ev => {
+                fileUpload.upload(el, args, ev.target.files);
+            });
+            el.addEventListener('dragover', ev => {
+                ev.preventDefault();
+                el.classList.add('dragover');
+            });
+            el.addEventListener('dragleave', ev => {
+                el.classList.remove('dragover');
+            });
+            el.addEventListener('drop', ev => {
+                ev.preventDefault();
+                el.classList.remove('dragover');
+                fileUpload.upload(el, args, ev.dataTransfer.files);
+            });
+            el.querySelectorAll('.btn-delete').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    fileUpload.delete(el, btn.closest('.upload-file'));
+                });
+            });
+            el.querySelectorAll('.btn-view').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    fileUpload.view(args, btn.closest('.upload-file'));
+                });
+            });
+        });
+    },
+
+    upload: (el, file, args) => {
+        loading.start(1, el);
+        let data = new FormData();
+        data.append('owner', args.name);
+        data.append('file', file[0]);
+        fetch(args.uris.upload, {
+            method: 'POST',
+            body: data,
+            headers: {
+                'multipart': 'form-data',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
+            }
+        }).then(response => response.json()).then(result => {
+            if (result.success)
+                el.querySelector('.upload-files').insertAdjacentHTML('beforeend', fileUpload.build.item(args, result.file));
+            else
+                modal.alert(args.messages.errorTitle ?? fileUpload.sampleArgs.messages.errorTitle, args.messages.uploadError ?? fileUpload.sampleArgs.messages.uploadError);
+            loading.stop();
+        }).catch(error => {
+            modal.alert(args.messages.errorTitle ?? fileUpload.sampleArgs.messages.errorTitle, args.messages.uploadError ?? fileUpload.sampleArgs.messages.uploadError);
+            msg.error(error);
+            loading.stop();
+        });
+    },
+
+    view: (args, item) => {
+        if (item.classList.contains('upload-type-image')) {
+            let body = document.createElement('img');
+            body.src = item.querySelector('img').src;
+        }
+        else {
+            let body = document.createElement('iframe');
+            body.src = `https://docs.google.com/gview?url=${window.location.protocol}//${window.location.host}${item.getAttribute('data-uri')}&embedded=true`;
+        }
+        let randomId = modal.randomId('fileview');
+        document.querySelector('body').insertAdjacentHTML('beforeend', modal.build.modal({
+            id: randomId,
+            className: 'modal-lg',
+            title: item.title,
+            body: body.outerHTML,
+            buttons: [{ text: args.messages.close ?? fileUpload.sampleArgs.messages.close }]
+        }));
     }
 };

package/src/hasMany.js

@@ -1,11 +1,27 @@
-import { message } from './message.js';
+import { msg } from './msg.js';
 import { modal } from './modal.js';
 
 export const hasMany = {
+
+    sampleArgs: {
+        name: 'name', // Variable name
+        title: 'Title', // Verbose name
+        notb: false, // Use None of the Below
+        messages: {
+            notbLabel: 'None', // Label for None of the Below
+            close: 'Close', // Close button text
+            button: 'Select Objects' // OK button text
+        },
+        options: [
+            { id: 1, label: 'Option 1', checked: false },
+            { id: 2, label: 'Option 2', checked: true }
+        ]
+    },
+
     build: {
 
         core: args => {
-            message.verbose('Building Has Many Inupt');
+            msg.verbose('Building Has Many Inupt');
             // Create container
             let container = document.createElement('div');
             // Create list of selected items
@@ -23,7 +39,7 @@ export const hasMany = {
             if (args.notb)
                 modalList.insertAdjacentHTML('beforeend', hasMany.build.checkItem(args.name, {
                     id: 'notb',
-                    label: (args.notbLabel ?? 'None'),
+                    label: (args.notbLabel ?? hasMany.sampleArgs.messages.notbLabel),
                     notb: true
                 }));
             // Cycle through all options
@@ -39,7 +55,7 @@ export const hasMany = {
                 id: randomId,
                 title: args.title,
                 body: modalList.outerHTML,
-                buttons: [ { text: 'OK' } ]
+                buttons: [ { text: args.messages.close ?? hasMany.sampleArgs.messages.close } ]
             }));
             // Create button to open modal
             let button = document.createElement('button');
@@ -47,6 +63,7 @@ export const hasMany = {
             button.className = 'btn btn-outline-secondary btn-block';
             button.setAttribute('data-bs-toggle', 'modal');
             button.setAttribute('data-bs-target', '#' + randomId);
+            button.textContent = args.messages.button ?? hasMany.sampleArgs.messages.button;
             // Add elements to container
             container.appendChild(input);
             container.appendChild(list);

package/src/init.js

@@ -1,12 +1,12 @@
 import * as bootstrap from 'bootstrap';
 import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic';
 import { createPopper } from '@popperjs/core';
-import { parsePhoneNumber } from 'libphonenumber-js/min';
 import { avatarCropper } from './avatarCropper';
 import { ckeupload } from './ckeupload';
+import { fileUpload } from './fileUpload';
 import { hasMany } from './hasMany';
 import { loading } from './loading';
-import { message } from './message';
+import { msg } from './msg';
 import { modal } from './modal';
 import { phoneInput } from './phoneInput';
 import { session } from './session';
@@ -16,20 +16,20 @@ export const init = () => {
 
     window.bootstrap = bootstrap;
     window.createPopper = createPopper;
-    window.message = message;
+    window.msg = msg;
     window.modal = modal;
     window.session = session;
     window.validate = validate;
     window.loading = loading;
     window.ClassicEditor = ClassicEditor;
-    window.parsePhoneNumber = parsePhoneNumber;
     loading.init();
     
     window.addEventListener('load', () => {
 
-        message.verbose('Page Loaded, Initializing');
+        msg.verbose('Page Loaded, Initializing');
         avatarCropper.init();
         ckeupload.init();
+        fileUpload.init();
         hasMany.init();
         modal.ajax.init();
         phoneInput.init();
@@ -56,9 +56,9 @@ export const init = () => {
             
         // Updates the id in the form action inside a modal. Used for delete confirm and edit modals.
         document.querySelectorAll('.modal-uuid-update').forEach(el => {
-            message.verbose('Enabling Modal UUID Update');
+            msg.verbose('Enabling Modal UUID Update');
             el.addEventListener('click', ev => {
-                message.verbose('Updating Modal UUID');
+                msg.verbose('Updating Modal UUID');
                 ev.preventDefault();
                 let uuid = el.getAttribute('inst-uuid'),
                     modalSelector = el.getAttribute('data-bs-target'),
@@ -70,7 +70,7 @@ export const init = () => {
                     form.setAttribute('action', action);
                 }
                 else {
-                    message.warn('Unable to update modal UUID.');
+                    msg.warn('Unable to update modal UUID.');
                     modal.close();
                     modal.alert('Error', 'Unable to initialize form.');
                 }
@@ -79,18 +79,18 @@ export const init = () => {
 
         // Automatically submits on change. Used in Page Nav Selects.
         document.querySelectorAll('.change-submit').forEach(el => {
-            message.verbose('Enabling Change Submit');
+            msg.verbose('Enabling Change Submit');
             el.addEventListener('change', () => {
-                message.verbose('Change Submit Triggered');
+                msg.verbose('Change Submit Triggered');
                 el.closest('form').submit();
             });
         });
 
         // Confirm/Delete Modals
         document.querySelectorAll('.confirm-link').forEach(el => {
-            message.verbose('Enabling Confirm Link');
+            msg.verbose('Enabling Confirm Link');
             el.addEventListener('click', ev => {
-                message.verbose('Confirm Link Triggered');
+                msg.verbose('Confirm Link Triggered');
                 ev.preventDefault();
                 modal.confirm(
                     el.getAttribute('confirm-msg') || 'Are you sure?',
@@ -105,21 +105,21 @@ export const init = () => {
         });
 
         // Filter Selects
-        document.querySelectorAll('.filter-select').forEach(select => {
-            message.verbose('Enabling Filter Select');
+        let filterSelects = document.querySelectorAll('.filter-select');
+        if (filterSelects.length) filterSelects.forEach(select => {
+            msg.verbose('Enabling Filter Select');
             select.addEventListener('change', ev => {
-                message.verbose('Filter Select Triggered');
-                if (el.value)
-                    document.querySelectorAll('.filter-' + select.getAttribute('name')).forEach(el => {
-                        if (el.classList.contains('filter-' + select.getAttribute('name') + '-' + select.value))
-                            el.style.display = '';
-                        else
-                            el.style.display = 'none';
-                    });
-                else
-                    document.querySelectorAll('.filter-' + select.getAttribute('name')).forEach(el => {
-                        el.style.display = '';
+                msg.verbose('Filter Select Triggered');
+                document.querySelectorAll('.filter-items').forEach(el => {
+                    el.style.display = '';
+                    filterSelects.forEach(filter => {
+                        if (filter.value) {
+                            let attr = filter.getAttribute('filter-attr');
+                            if (el.getAttribute(attr) != filter.value)
+                                el.style.display = 'none';
+                        }
                     });
+                });
             });
         });
 
@@ -127,15 +127,15 @@ export const init = () => {
         let toTop = document.getElementById('toTopBtn');
         toTop.style.visibility = "hidden";
         toTop.addEventListener('click', () => {
-            message.verbose('Scrolling to Top');
+            msg.verbose('Scrolling to Top');
             scrollTo(0, 0);
         });
         window.addEventListener('scroll', () => {
             if (scrollY > 1500) {
-                message.verbose('Scrolling to Top Button Visible');
+                msg.verbose('Scrolling to Top Button Visible');
                 toTop.style.visibility = "visible";
             } else {
-                message.verbose('Scrolling to Top Button Hidden');
+                msg.verbose('Scrolling to Top Button Hidden');
                 toTop.style.visibility = "hidden";
             }
         });

package/src/loading.js

@@ -1,4 +1,4 @@
-import { message } from './message';
+import { msg } from './msg';
 import { session } from './session';
 
 export const loading = {
@@ -72,32 +72,32 @@ export const loading = {
 
     init: () => {
         window.addEventListener('DOMContentLoaded', () => {
-            message.verbose('DOM Loaded, Starting Animation');
+            msg.verbose('DOM Loaded, Starting Animation');
             loading.start();
         });
         window.addEventListener('beforeunload', () => {
-            message.verbose('Navigating Away, Starting Animation');
+            msg.verbose('Navigating Away, Starting Animation');
             loading.start(1);
         });
         window.addEventListener('error', () => {
-            message.verbose('DOM Error, Clearing Animation');
+            msg.verbose('DOM Error, Clearing Animation');
             loading.clear();
         });
         window.addEventListener('abort', () => {
-            message.verbose('Load Aborted, Clearing Animation');
+            msg.verbose('Load Aborted, Clearing Animation');
             loading.clear();
         });
         window.addEventListener('unload', () => {
-            message.verbose('Page Unloaded, Clearing Animation');
+            msg.verbose('Page Unloaded, Clearing Animation');
             loading.clear();
         });
         window.addEventListener('load', () => {
-            message.verbose('Resources Loaded, Stopping Animation');
+            msg.verbose('Resources Loaded, Stopping Animation');
             loading.stop();
         });
         window.addEventListener('pageshow', (e) => {
             if (e.originalEvent && e.originalEvent.persisted) {
-                message.verbose('Back button detected, Stopping Animation');
+                msg.verbose('Back button detected, Stopping Animation');
                 loading.stop();
             }
         });

package/src/modal.js

@@ -1,5 +1,5 @@
 import { Modal } from 'bootstrap';
-import { message } from './message.js';
+import { msg } from './msg.js';
 
 export const modal = {
     
@@ -13,10 +13,10 @@ export const modal = {
         init: () => {
             // Cycle through all AJAX Modals in DOM
             document.querySelectorAll('.ajax-modal').forEach(el => {
-                message.verbose('Enabling AJAX Modal');
+                msg.verbose('Enabling AJAX Modal');
                 el.addEventListener('click', ev => {
                     ev.preventDefault();
-                    message.verbose('Building AJAX Modal');
+                    msg.verbose('Building AJAX Modal');
                     let buttons;
                     if (el.getAttribute('modal-info'))
                         buttons = [{ text: 'OK' }];
@@ -38,7 +38,7 @@ export const modal = {
                     let bsAjaxModal = Modal.getOrCreateInstance(ajaxModal);
                     bsAjaxModal.show();
                     loading.start(0, ajaxModalBody);
-                    message.verbose('Loading AJAX Modal');
+                    msg.verbose('Loading AJAX Modal');
                     fetch(el.getAttribute('modal-load-uri'), { method: 'GET' }).then(response => {
                         ajaxModalBody.insertAdjacentHTML('afterbegin', response);
                         let images = ajaxModalBody.querySelectorAll('img')
@@ -51,30 +51,30 @@ export const modal = {
                                 });
                             });
                         } else loading.stop();
-                        message.verbose('AJAX Modal Loaded');
+                        msg.verbose('AJAX Modal Loaded');
                         if (!el.getAttribute('modal-info')) {
-                            message.verbose('Adding submit handler to AJAX Modal');
+                            msg.verbose('Adding submit handler to AJAX Modal');
                             ajaxModal.querySelector('.btn-save').addEventListener('click', () => {
-                                message.verbose('Submitting AJAX Modal');
+                                msg.verbose('Submitting AJAX Modal');
                                 loading.start(0, ajaxModalBody);
                                 let form = ajaxModal.querySelector('form');
                                 fetch(form.getAttribute('action'), {
                                     method: 'POST',
                                     body: new FormData(form)
                                 }).then(response => {
-                                    message.verbose('AJAX Modal Saved');
+                                    msg.verbose('AJAX Modal Saved');
                                     loading.stop();
                                     bsAjaxModal.hide();
                                     ajaxModal.remove();
                                 }).catch(() => {
-                                    message.warn('AJAX Modal Save Failed');
+                                    msg.warn('AJAX Modal Save Failed');
                                     loading.stop();
                                     modal.alert(modal.ajax.error.save.msg, modal.ajax.error.save.title);
                                 });
                             });
                         }
                     }).catch(() => {
-                        message.warn('AJAX Modal Load Failed');
+                        msg.warn('AJAX Modal Load Failed');
                         loading.stop();
                         bsAjaxModal.hide();
                         ajaxModal.remove();
@@ -86,7 +86,7 @@ export const modal = {
     },
 
     alert: (msg, title = "Alert", button = "OK") => {
-        message.verbose('Building Alert Modal');
+        msg.verbose('Building Alert Modal');
         let randomId = modal.randomId('confirm');
         document.querySelector('body').insertAdjacentHTML('beforeend', modal.build.modal({
             id: randomId,
@@ -105,89 +105,89 @@ export const modal = {
 
     build: {
 
-        input: vars => {
+        input: args => {
             let input;
-            if (vars.type == 'select') {
+            if (args.type == 'select') {
                 input = document.createElement('select');
                 input.className = 'form-select';
-                if (vars.opts)
-                    for (let [key, val] of  Object.entries(vars.opts)) {
+                if (args.opts)
+                    for (let [key, val] of  Object.entries(args.opts)) {
                         let option = document.createElement('option');
                         option.value = key;
                         option.textContent = val;
-                        if (key == vars.value)
+                        if (key == args.value)
                             option.setAttribute('selected', 'selected');
                         input.appendChild(option);
                     }
             } else {
-                if (vars.type == 'textarea')
+                if (args.type == 'textarea')
                     input = document.createElement('textarea');
                 else {
                     input = document.createElement('input');
-                    input.setAttribute('type', vars.type);
-                    input.value = vars.value;
+                    input.setAttribute('type', args.type);
+                    input.value = args.value;
                 }
                 input.className = 'form-control';
-                if (vars.placeholder)
-                    input.setAttribute('placeholder', vars.placeholder);
+                if (args.placeholder)
+                    input.setAttribute('placeholder', args.placeholder);
             }
-            input.id = vars.id;
-            input.setAttribute('aria-label', vars.placeholder ?? vars.label);
-            if (vars.checked)
+            input.id = args.id;
+            input.setAttribute('aria-label', args.placeholder ?? args.label);
+            if (args.checked)
                 input.setAttribute('checked', 'checked');
-            if (vars.inputClass)
-                input.classList.add(vars.inputClass);
+            if (args.inputClass)
+                input.classList.add(args.inputClass);
             return input.outerHTML;
         },
     
-        inputLine: vars => {
+        inputLine: args => {
             let row = document.createElement('div');
             row.className = 'row';
-            if (vars.rowClass)
-                row.classList.add(vars.rowClass);
-            row.insertAdjacentHTML('beforeend', modal.build.input(vars));
-            if (vars.label)
-                if (vars.type == 'checkbox' || vars.type == 'radio')
+            if (args.rowClass)
+                row.classList.add(args.rowClass);
+            row.insertAdjacentHTML('beforeend', modal.build.input(args));
+            if (args.label)
+                if (args.type == 'checkbox' || args.type == 'radio')
                     row.insertAdjacentHTML('beforeend', label);
                 else
-                    row.insertAdjacentHTML('afterbegin', modal.build.label(vars));
+                    row.insertAdjacentHTML('afterbegin', modal.build.label(args));
             return row.outerHTML;
         },
     
-        line: vars => {
+        line: args => {
             let row = document.createElement('div');
             row.className = 'row';
-            if (vars.rowClass)
-                row.classList.add(vars.rowClass);
-            if (vars.label)
-                row.insertAdjacentHTML('beforeend', modal.build.label(vars));
+            if (args.rowClass)
+                row.classList.add(args.rowClass);
+            if (args.label)
+                row.insertAdjacentHTML('beforeend', modal.build.label(args));
             return row.outerHTML;
         },
     
-        label: vars => {
+        label: args => {
             let label = document.createElement('label');
-            label.setAttribute('for', vars.id);
+            label.setAttribute('for', args.id);
             label.className = 'fw-bold text-dark';
-            label.textContent = vars.label;
+            label.textContent = args.label;
             return label.outerHTML;
         },
 
-        modal: vars => {
-            message.verbose('Building Dynamic Modal');
+        modal: args => {
+            msg.verbose('Building Dynamic Modal');
             
             // Modal container
             let modal = document.createElement('div');
             modal.className = 'modal fade';
-            modal.id = vars.id;
+            modal.id = args.id;
             modal.setAttribute('tabindex', '-1');
             modal.setAttribute('role', 'dialog');
-            modal.setAttribute('aria-labelledby', vars.title);
+            modal.setAttribute('aria-labelledby', args.title);
     
             // Modal dialog
             let modalDialog = document.createElement('div');
             modalDialog.className = 'modal-dialog';
-            if (vars.class)
-                modalDialog.classList.add(vars.class);
+            if (args.className)
+                modalDialog.classList.add(args.class);
     
             // Modal content
             let modalContent = document.createElement('div');
@@ -199,8 +199,8 @@ export const modal = {
     
             let modalTitle = document.createElement('h5');
             modalTitle.className = 'modal-title';
-            modalTitle.id = `${vars.id}Label`;
-            modalTitle.textContent = vars.title;
+            modalTitle.id = `${args.id}Label`;
+            modalTitle.textContent = args.title;
     
             let closeButton = document.createElement('button');
             closeButton.className = 'btn-close';
@@ -214,10 +214,10 @@ export const modal = {
             // Modal body
             let modalBody = document.createElement('div');
             modalBody.className = 'modal-body';
-            modalBody.innerHTML = vars.body ?? '';
+            modalBody.innerHTML = args.body ?? '';
     
-            if (vars.inputs)
-                Object.values(vars.inputs).forEach(i => {
+            if (args.inputs)
+                Object.values(args.inputs).forEach(i => {
                     if (i.type)
                         modalBody.insertAdjacentHTML('beforeend', modal.build.inputLine(i));
                     else
@@ -228,8 +228,8 @@ export const modal = {
             let modalFooter = document.createElement('div');
             modalFooter.className = 'modal-footer';
     
-            if (vars.buttons)
-                Object.values(vars.buttons).forEach(b => {
+            if (args.buttons)
+                Object.values(args.buttons).forEach(b => {
                     let button = document.createElement('button');
                     button.className = 'btn btn-outline-secondary me-1';
                     if (b.class)
@@ -251,7 +251,7 @@ export const modal = {
     },
     
     close: () => {
-        message.verbose('Closing Modals');
+        msg.verbose('Closing Modals');
         document.querySelectorAll('.modal').forEach(modal => {
             let bsModal = Modal.getOrCreateInstance(modal);
             if (bsModal) bsModal.hide();
@@ -259,7 +259,7 @@ export const modal = {
     },
 
     confirm: (msg, onConfirm, onCancel, title = "Are you sure?", buttonYes = "Yes", buttonNo = "No") => {
-        message.verbose('Building Confirm Modal');
+        msg.verbose('Building Confirm Modal');
         let randomId = modal.randomId('confirm');
         document.querySelector('body').insertAdjacentHTML('beforeend', modal.build.modal({
             id: randomId,

package/src/{message.js → msg.js}

@@ -1,4 +1,4 @@
-export const message = {
+export const msg = {
 
     verbose: (msg) => {
         if (window.verbose) console.log(msg);

package/src/phoneInput.js

@@ -27,6 +27,8 @@ export const phoneInput = {
                     el.parentNode.querySelector('.input-group-text').innerHTML = '+';
                 }
             });
+            if (el.value)
+                el.dispatchEvent(new Event('blur'));
         });
     }
 };

package/src/session.js

@@ -1,37 +1,37 @@
-import { message } from "./message";
+import { msg } from "./msg";
 
 export const session = {
     // Get a session variable as an integer
     getIntVar: (varName, defaultVal) => {
-        message.verbose('Getting Integer Session Variable: ' + varName);
+        msg.verbose('Getting Integer Session Variable: ' + varName);
         var val = parseInt(sessionStorage.getItem(varName));
         return isNaN(val) ? defaultVal : val;
     },
     // Get a session variable as a boolean
     getBoolVar: (varName, defaultVal) => {
-        message.verbose('Getting Boolean Session Variable: ' + varName);
+        msg.verbose('Getting Boolean Session Variable: ' + varName);
         var val = sessionStorage.getItem(varName);
         return val == 'true' ? true : val == 'false' ? false : defaultVal;
     },
     // Get a session variable as a string
     getStrVar: (varName, defaultVal) => {
-        message.verbose('Getting String Session Variable: ' + varName);
+        msg.verbose('Getting String Session Variable: ' + varName);
         var val = sessionStorage.getItem(varName);
         return val ?? defaultVal;
     },
     // Set a session variable
     set: (varName, val) => {
-        //message.verbose('Setting Session Variable: ' + varName + ' = ' + val);
+        //msg.verbose('Setting Session Variable: ' + varName + ' = ' + val);
         sessionStorage.setItem(varName, val);
     },
     // Remove a session variable
     removeVar: (varName) => {
-        message.verbose('Removing Session Variable: ' + varName);
+        msg.verbose('Removing Session Variable: ' + varName);
         sessionStorage.removeItem(varName);
     },
     // Clear all session variables
     clear: () => {
-        message.verbose('Clearing Session Variables');
+        msg.verbose('Clearing Session Variables');
         sessionStorage.clear();
     }
 };

package/src/validate.js

@@ -1,4 +1,4 @@
-import { message } from './message.js';
+import { msg } from './msg.js';
 
 export const validate = {
     methods: {
@@ -32,7 +32,7 @@ export const validate = {
         return form.querySelectorAll('input.is-invalid,select.is-invalid,textarea.is-invalid').length == 0;
     },
     init: () => {
-        message.verbose('Initializing Validation');
+        msg.verbose('Initializing Validation');
         Object.entries(validate.methods).forEach(([ className, validationMethod ]) => {
             document.querySelectorAll('input.' + className + ',select.' + className + ',textarea.' + className).forEach(input => {
                 input.addEventListener('blur', () => {
@@ -48,12 +48,12 @@ export const validate = {
         });
         document.querySelectorAll('form:not(.skip-validation)').forEach(form => {
             form.addEventListener('submit', ev => {
-                message.verbose('Form Submitted, Validating');
+                msg.verbose('Form Submitted, Validating');
                 if (!validate.check(form)) {
-                    message.warn('Form failed validation. Submited cancelled.');
+                    msg.warn('Form failed validation. Submited cancelled.');
                     ev.preventDefault();
                     form.querySelector('input.is-invalid,select.is-invalid,textarea.is-invalid').focus();
-                    message.warn('Form failed validation. Submited cancelled.');
+                    msg.warn('Form failed validation. Submited cancelled.');
                 } 
             });
         });