material 0.9.20 → 0.9.22

package/src/form/controller.js

@@ -6,17 +6,8 @@ export default {
 
     this.disableControls()
 
-    for (const field in this.field) {
-      if (this.field.hasOwnProperty(field)) {
-        this.bindControl(this.field[field])
-      }
-    }
-
-    for (const file in this.file) {
-      if (this.file.hasOwnProperty(file)) {
-        this.bindControl(this.file[file])
-      }
-    }
+    Object.keys(this.field).forEach(field => this.bindControl(this.field[field]))
+    Object.keys(this.file).forEach(file => this.bindControl(this.file[file]))
   },
 
   setMode (mode) {
@@ -39,7 +30,7 @@ export default {
   },
 
   changeMode (mode) {
-    // console.log('changeMode', mode)
+    // console.log('changeMode', mode, this.options.class)
 
     if (mode === 'update' && this.enableControls) {
       this.enableControls()
@@ -51,19 +42,18 @@ export default {
   },
 
   bindControl (control) {
-    // console.log('bindControl')
+    // console.log('bindControl', control.class)
     if (control && control.on) {
       control.on('change', () => {
-        // console.log('change', control, this.mode)
-        if (this.mode === 'read') {
-          this.setMode('update')
-        }
+        if (this.isModified) this.isModified()
+        this.setMode('update')
+        this.emit('changed', this.options.class)
+        console.log('isModified', this.isModified)
       })
     }
   },
 
   enableControls () {
-    // console.log('enableControls')
     const controls = this.options.controls || ['submit', 'cancel']
 
     if (controls === null) return
@@ -73,6 +63,8 @@ export default {
         this.ui[controls[i]].enable()
       }
     }
+
+    this.emit('enableControls')
   },
 
   disableControls () {

package/src/form/data.js

@@ -1,82 +1,210 @@
 import { byString } from '../module/object'
 
 export default {
-
+  /**
+   * Initializes form data with fields and files
+   * @returns {FormData} Initialized form data
+   */
   initData () {
-    // console.log('submit', this.mode)
+    try {
+      const data = new FormData()
 
-    const data = new FormData()
+      if (this.mode !== 'create') {
+        this.appendSysinfo(data)
+      }
 
-    if (this.mode !== 'create') {
-      this.appendSysinfo(data)
+      return this.appendFiles(this.appendFields(data))
+    } catch (error) {
+      console.error('Error initializing form data:', error)
+      throw new Error('Failed to initialize form data')
     }
+  },
 
-    this.appendFields(data)
-    this.appendFiles(data)
-
-    return data
+  /**
+   * Fetches and sets data for the form
+   * @param {Object} user - User data object
+   * @returns {Promise<void>}
+   */
+  async getData () {
+    // console.log('getData')
+    Object.entries(this.field).forEach(([fieldName, field]) => {
+      console.log('fieldName', fieldName)
+    })
   },
 
+  /**
+   * Appends system information to form data
+   * @param {FormData} data - FormData instance
+   * @returns {FormData} Updated FormData
+   */
   appendSysinfo (data) {
-    const sys = this.options.sysinfo
-    for (let i = 0; i < sys.length; i++) {
-      // console.log('sys', sys[i], this.info[sys[i]])
-      let name = sys[i]
-      if (sys[i] === '_id') name = 'id'
-
-      data.append(name, this.info[sys[i]])
+    // console.log('appendSysinfo')
+    if (!Array.isArray(this.options?.sysinfo)) {
+      return data
     }
 
+    this.options.sysinfo.forEach(field => {
+      const name = field === '_id' ? 'id' : field
+      const value = this.info?.[field]
+
+      if (value !== undefined) {
+        data.append(name, value)
+      }
+    })
+
     return data
   },
 
+  /**
+   * Appends form fields to FormData
+   * @param {FormData} data - FormData instance
+   * @returns {FormData} Updated FormData
+   */
   appendFields (data) {
-    for (const field in this.field) {
-      // console.log('field', field)
-      if (this.field.hasOwnProperty(field)) {
-        // console.log('check field', field)
-        const value = this.field[field].get()
-        if (value !== null) {
-          if (this.mode === 'update' && this.options.update && this.options.update.modifiedOnly) {
-            const modified = this.isModified(field, value)
-            if (modified) {
-              data.append(field, value)
-            }
-          } else {
-            data.append(field, value)
-          }
-        }
-      }
+    if (!this.field || !(data instanceof FormData)) {
+      return data
     }
 
+    Object.entries(this.field).forEach(([fieldName, field]) => {
+      const value = field?.get?.()
+
+      if (value === null || value === undefined) {
+        return
+      }
+
+      const shouldAppend = this.mode === 'update' &&
+        this.options?.update?.modifiedOnly
+        ? this.isModified(fieldName, value)
+        : true
+
+      if (shouldAppend) {
+        data.append(fieldName, value)
+      }
+    })
+
     return data
   },
 
+  /**
+   * Appends file inputs to FormData
+   * @param {FormData} data - FormData instance
+   * @returns {FormData} Updated FormData
+   */
   appendFiles (data) {
-    // console.log('appendFiles', this.file)
-    for (const file in this.file) {
-      // console.log('this file', this.file, this.file[file].input)
-      // console.log('file', file, this.file[file])
-      if (this.file.hasOwnProperty(file) && this.file[file].input && this.file[file].input.value) {
-        data.append(file, this.file[file].input.files[0])
-      }
+    if (!this.file || !(data instanceof FormData)) {
+      return data
     }
 
+    Object.entries(this.file)
+      .filter(([, fileField]) => {
+        const input = fileField?.input
+        return input?.value && input?.files?.length > 0
+      })
+      .forEach(([fileName, fileField]) => {
+        data.append(fileName, fileField.input.files[0])
+      })
+
     return data
   },
 
-  isModified (field, value) {
-    const initial = byString(this.info, field)
+  /**
+   * Gets structured field data
+   * @returns {Object} Field data object
+   */
+  getFieldData () {
+    if (!this.field) {
+      return {}
+    }
+
+    return Object.entries(this.field).reduce((acc, [fieldName, field]) => {
+      const value = field?.get?.()
+      if (value !== null && value !== undefined) {
+        acc[fieldName] = value
+      }
+      return acc
+    }, {})
+  },
 
-    if (typeof initial === 'number') {
-      value = Number(value)
+  /**
+   * Gets structured file data
+   * @returns {Object} File data object
+   */
+  getFileData () {
+    if (!this.file) {
+      return {}
     }
 
-    if (initial !== value) {
-      // console.log('field', field, typeof value, value)
-      return true
-    } else {
+    return Object.entries(this.file).reduce((acc, [fileName, fileField]) => {
+      const input = fileField?.input
+      if (input?.value && input?.files?.length > 0) {
+        acc[fileName] = input.files[0]
+      }
+      return acc
+    }, {})
+  },
+
+  /**
+   * Checks if any fields have been modified from their initial values
+   * @returns {boolean} True if any field is modified
+   */
+  isModified () {
+    // console.log('checkModified', this.options.class)
+    // console.log('field', this.field)
+    // console.log('info', this.info)
+
+    if (!this.field || !this.info) {
       return false
     }
+
+    let modified = false
+    Object.entries(this.field).forEach(([fieldName]) => {
+      if (this.isFieldModified(fieldName)) {
+        modified = true
+      }
+    })
+
+    this.modified = modified
+
+    // console.log('modified', modified)
+
+    return modified
+  },
+
+  /**
+   * Checks if a field value has been modified
+   * @param {string} fieldName - Field name
+   * @returns {boolean} True if modified
+   */
+  /**
+ * Checks if a specific field value has been modified from its initial value
+ * @param {string} fieldName - Field name to check
+ * @returns {boolean} True if the field is modified
+ */
+  isFieldModified (fieldName) {
+    // console.log('isFieldModified', fieldName)
+    const currentValue = this.field[fieldName]?.get?.() ?? undefined
+    const initialValue = this.info[fieldName] ?? undefined
+
+    // Special case for text fields: treat undefined and empty string as equivalent
+    if (typeof currentValue === 'string' || currentValue === undefined) {
+      const normalizedCurrent = currentValue || ''
+      const normalizedInitial = initialValue || ''
+      return normalizedCurrent !== normalizedInitial
+    }
+
+    // Handle number comparisons
+    if (typeof initialValue === 'number') {
+      const parsedCurrent = Number(currentValue)
+      return isNaN(parsedCurrent) ? true : parsedCurrent !== initialValue
+    }
+
+    // Standard null/undefined checks
+    if (initialValue === undefined || initialValue === null) {
+      return currentValue !== null && currentValue !== undefined
+    }
+
+    log.error('modified', initialValue !== currentValue)
+
+    return initialValue !== currentValue
   }
 }

package/src/form/fetch.js

@@ -1,30 +1,23 @@
+import request from '../module/request'
+
 export default {
-  fetch (option) {
+  async fetch (option) {
     // console.log('fetch', this.options.route, option.method)
-    fetch(this.options.route, {
-      method: option.method,
-      body: option.formData
-    }).then(r => r.json()).then(info => {
-      if (info.error) {
-        // console.log('Error: ' + info.error)
-        if (this.error) {
-          this.error(info)
-        }
-      } else {
-        // console.log('updated', info, this.mode)
-        if (this.mode === 'create') {
-          this.emit('created', info)
-          this.mode = 'read'
-        } else {
-          this.info = info
-          this.emit('updated', info)
-          this.mode = 'read'
-        }
 
-        if (this.success) {
-          this.success(info)
-        }
-      }
-    })
+    const info = await request(this.options.route, option.method, option.formData)
+
+    // console.log('updated', info, this.mode)
+    if (this.mode === 'create') {
+      this.emit('created', info)
+      this.mode = 'read'
+    } else {
+      this.info = info
+      this.emit('updated', info)
+      this.mode = 'read'
+    }
+
+    if (this.success) {
+      this.success(info)
+    }
   }
 }

package/src/form/render.js

@@ -12,10 +12,10 @@ export default {
       }
     }
 
-    // console.log('dotified', this.field, info)
-
     if (!info) return
 
+    // console.log('dotified', this.field, info)
+
     for (const field in this.field) {
       if (this.field.hasOwnProperty(field)) {
         // console.log('field type', field, this.field[field])

package/src/form/submit.js

@@ -1,15 +1,20 @@
 export default {
 
-  submit (ev) {
-    ev.preventDefault()
+  async submit (ev) {
+    if (ev) ev.preventDefault()
     // console.log('submit', this.mode)
 
     const data = this.initData()
 
+    // for (const pair of data.entries()) {
+    //   console.log(`${pair[0]}: ${pair[1]}`)
+    // }
+
     // console.log('data', data)
 
     if (this.update) {
-      this.update(data)
+      // console.log('this.update', this.update)
+      await this.update(data)
     } else {
       this.setMethod(data)
     }
@@ -18,6 +23,7 @@ export default {
   },
 
   setMethod (formData) {
+    // console.log('setMethod', this.mode)
     let method = 'PUT'
     if (this.mode === 'create') {
       method = 'POST'

package/src/form/update.js

@@ -1,46 +1,43 @@
+import request from '../module/request'
+
 export default {
-  update (data, options) {
-    // console.log('update', data, options)
+  async update (body, options) {
+    // console.log('update', body, options)
     // console.log('mode', this.mode)
     options = options || {}
 
     // console.log('mode', this.mode)
     const method = options.method ||
-        this.options[this.mode].method ||
-        'put'
+      this.options[this.mode].method ||
+      'PUT'
 
     const action = options.action ||
-        this.options[this.mode].action ||
-        this.options.action
+      this.options[this.mode].action ||
+      this.options.action
 
     if (this.beforeCreate) {
-      this.beforeCreate(data)
+      this.beforeCreate(body)
     }
 
-    fetch(action, {
-      method,
-      body: data
-    }).then((resp) => {
-      // console.log('resp', resp)
-      return resp.json()
-    }).then(info => {
-      // console.log('update', info)
-      if (info.error) {
-        // console.log('Error: ' + info.error)
-        if (this.error) {
-          this.error(info)
-        }
+    // console.log('request', action, method, body)
+    const info = await request(action, method, body)
+
+    // console.log('update', info)
+    if (info.error) {
+      // console.log('Error: ' + info.error)
+      if (this.error) {
+        this.error(info)
+      }
+    } else {
+      // console.log('info', this.mode, info)
+      if (this.mode === 'create') {
+        this.emit('created', info)
+        this.setMode('read')
       } else {
-        // console.log('info', this.mode, info)
-        if (this.mode === 'create') {
-          this.emit('created', info)
-          this.setMode('read')
-        } else {
-          this.emit('updated', info)
-          this.setMode('read')
-        }
-        this.info = info
+        this.emit('updated', info)
+        this.setMode('read')
       }
-    })
+      this.info = info
+    }
   }
 }

package/src/list/build.js

@@ -100,7 +100,12 @@ export default {
       // console.log('progress', progress, this.count)
 
       if (this.statusDisplay) {
-        const percent = parseInt(progress / this.count * 100)
+        let percent = parseInt(progress / this.count * 100)
+        if (progress > this.count) {
+          percent = 100
+          progress = this.count
+        }
+
         this.statusDisplay('count', percent + '% | ' + progress + ' / ' + this.count)
       }
 

package/src/list/status.js

@@ -9,7 +9,12 @@ export default {
 
   statusCount (count) {
     // console.log('statusCount', count)
+    //
     let items = 'items'
+    if (count < 1) {
+      items = 'item'
+    }
+
     if (this.status && this.status.count && this.status.count.name) {
       items = this.status.count.name
     }

package/src/list/update.js

@@ -5,6 +5,8 @@ export default {
   update (info) {
     // console.log('update', info)
 
+    if (!info) return
+
     this.getUpdatedInfo(info[this.dataId])
   },
 

package/src/list/virtual.js

@@ -135,7 +135,7 @@ VirtualList.prototype.set = function (items) {
     }
 
     const progress = Math.ceil((scrollTop / self.itemHeight) + self.itemsByScreen) - 1
-    // console.log('progress', progress)
+    // console.log('progress', progress, scrollTop, self.itemHeight)
     self.emit('progress', progress)
 
     // e.preventDefault && e.preventDefault()

package/src/module/dom.js

@@ -1,7 +1,6 @@
 // DOM manipulation function
 
 function append (container, element) {
-  console.log(container, element)
   container.appendChild(element)
   return element
 }

package/src/module/emitter.js

@@ -1,21 +1,53 @@
+// Event emitter mixin that can be extended into other objects
 export default {
-  on (event, cb) {
-    this.event = this.event || {}
-    this.event[event] = this.event[event] || []
-    this.event[event].push(cb)
+  // Initialize the events storage if needed
+  _initEvents () {
+    this.events = this.events || {}
+  },
+
+  // Add an event listener
+  on (event, listener) {
+    this._initEvents()
+    // Use nullish coalescing assignment for array initialization
+    this.events[event] ??= []
+    this.events[event].push(listener)
+    return this
+  },
+
+  // Emit an event with optional arguments
+  emit (event, ...args) {
+    this._initEvents()
+    // Use optional chaining to safely access and iterate events
+    this.events[event]?.forEach(listener => {
+      try {
+        listener.apply(this, args)
+      } catch (error) {
+        console.error(`Error in event listener for ${event}:`, error)
+      }
+    })
     return this
   },
-  off (event, cb) {
-    this.event = this.event || {}
-    if (event in this.event === false) return
-    this.event[event].splice(this.event[event].indexOf(cb), 1)
+
+  // Remove a specific listener for an event
+  off (event, listener) {
+    this._initEvents()
+    const listeners = this.events[event]
+    if (listeners?.length) {
+      const index = listeners.indexOf(listener)
+      if (index !== -1) {
+        listeners.splice(index, 1)
+      }
+    }
     return this
   },
-  emit (event /* , args... */) {
-    this.event = this.event || {}
-    if (event in this.event === false) return
-    for (let i = 0; i < this.event[event].length; i++) {
-      this.event[event][i].apply(this, Array.prototype.slice.call(arguments, 1))
+
+  // Remove all listeners for an event or all events
+  removeAll (event) {
+    this._initEvents()
+    if (event) {
+      delete this.events[event]
+    } else {
+      this.events = {}
     }
     return this
   }

package/src/module/extract.js

@@ -4,7 +4,7 @@
  * @param  {[type]} str [description]
  * @return {[type]}     [description]
  */
-function e (instance, ev) {
+const e = (instance, ev) => {
   if (!ev) return instance
   else if (!ev.match(/\./)) {
     return {
@@ -43,7 +43,7 @@ function e (instance, ev) {
  * @param  {string} func A string representing a function accessible in dot notation
  * @return {function}      The function
  */
-function f (instance, func) {
+const f = (instance, func) => {
   if (!func) return
 
   if (typeof func === 'function') {

package/src/module/layout.js

@@ -16,7 +16,7 @@ function create (schema, container, structure = {}, level = 0, components = [])
   const fragment = document.createDocumentFragment()
 
   if (!Array.isArray(schema)) {
-    console.trace('Schema is not an array!')
+    console.error('Schema is not an array!', container, level, schema)
   }
 
   for (let i = 0; i < schema.length; i++) {