material 0.8.6 → 0.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
   "main": "index.js",
   "type": "module",

package/src/appbar.js

@@ -1,6 +1,8 @@
 import build from './module/build'
 
 class AppBar {
+  static uid = "material-appbar";
+
   static defaults = {
     class: 'appbar'
   }

package/src/badge.js

@@ -4,6 +4,8 @@ import display from './mixin/display'
 const isStringNumber = (str) => !isNaN(parseFloat(str)) && isFinite(str)
 
 class Badge {
+  static uid = "material-badge";
+
   static defaults = {
     class: 'badge'
   }

package/src/calendar.js

@@ -36,6 +36,8 @@ const defaults = {
  * @type {prime}
  */
 class Calendar {
+  static uid = "material-calendar";
+
   /**
    * init
    * @return {Object} The class options

package/src/card.js

@@ -3,6 +3,8 @@ import display from './mixin/display'
 import position from './mixin/position'
 
 class Card {
+  static uid = "material-card";
+
   static defaults = {
     class: 'card',
     position: {

package/src/checkbox.js

@@ -9,6 +9,8 @@ import icon from './skin/material/icon/checkbox.svg'
 import Element from './element'
 
 class Checkbox {
+  static uid = "material-checkbox";
+
   static defaults = {
     class: 'checkbox',
     layout: [

package/src/component.js

@@ -27,6 +27,8 @@ const defaults = {
  * });
  */
 class Component {
+  static uid = "material-component";
+
   /**
    * Constructor
    * @param  {Object} options - Component options

package/src/datehour.js

@@ -1,6 +1,8 @@
 import build from './module/build'
 
 class DateHour {
+  static uid = "material-datehour";
+
   static defaults = {
     class: 'date',
     tag: 'span'

package/src/dialog.js

@@ -9,6 +9,8 @@ import Button from './button'
 import Layout from './layout'
 
 class Dialog {
+  static uid = "material-dialog";
+
   static defaults = {
     class: 'dialog',
     close: true,

package/src/divider.js

@@ -16,6 +16,8 @@ const defaults = {
  * @example new Item(object);
  */
 class Divider {
+  static uid = "material-divider";
+
   /**
    * init
    * @return {Object} The class options

package/src/drawer.js

@@ -18,6 +18,8 @@ const defaults = {
 }
 
 class Drawer {
+  static uid = "material-drawer";
+
   constructor (options) {
     this.options = Object.assign({}, defaults, options || {})
 

package/src/element.js

@@ -1,4 +1,6 @@
 class Element {
+  static uid = "material-element";
+
   static isElement () {
     return true
   }

package/src/file.js

@@ -5,6 +5,8 @@ import dataset from './module/dataset'
 import attributes from './module/attributes'
 
 class File {
+  static uid = "material-file";
+
   static defaults = {
     class: 'file',
     attributes: ['name', 'accept', 'required', 'disabled', 'multiple'],

package/src/form.js

@@ -21,6 +21,8 @@ const defaults = {
  * @return {Class} This class instance
  */
 class Form {
+  static uid = "material-form";
+
   /**
    * Constructor
    * @param  {Object} options - Component options

package/src/icon.js

@@ -16,6 +16,8 @@ var defaults = {
  * @example new Item(object);
  */
 class Icon {
+  static uid = "material-icon";
+
   /**
    * init
    * @return {Object} The class options

package/src/image.js

@@ -1,6 +1,8 @@
 import build from './module/build'
 
 class Image {
+  static uid = "material-image";
+
   static defaults = {
     class: 'image',
     tag: 'div',

package/src/item.js

@@ -1,6 +1,8 @@
 import build from './module/build'
 
 class Item {
+  static uid = "material-item";
+
   static defaults = {
     prefix: 'material',
     class: 'item',

package/src/layout.js

@@ -1,28 +1,47 @@
 import { is as isObject } from './module/object'
-import * as css from './module/css'
 
+/**
+ * Layout class for creating and managing UI components.
+ */
 class Layout {
+  /**
+   * Constructs a new Layout instance.
+   *
+   * @param {Array} schema - An array defining the structure and components of the layout.
+   * @param {HTMLElement} container - The container in which the layout components are placed.
+   * @param {boolean} [enableMemoization=false] - Flag to enable memoization (not implemented in current version).
+   */
   constructor (schema, container) {
     this.components = []
+    // const startTime = Date.now()
     this.component = this.create(schema, container)
-
+    // const endTime = Date.now()
+    // console.log(`Execution time: ${endTime - startTime} ms`)
     return this
   }
 
+  /**
+   * Recursively creates components based on a provided schema.
+   *
+   * @param {Array} schema - An array of components or sub-schemas.
+   * @param {HTMLElement} container - The container for the current level of components.
+   * @param {Object} [structure={}] - An accumulator object for components, keyed by name.
+   * @param {number} [level=0] - The current level of recursion.
+   * @returns {Object} The structure containing all created components.
+   */
   create (schema, container, structure, level) {
     level = level || 0
     level++
 
     structure = structure || {}
     let component = null
+    const fragment = document.createDocumentFragment()
 
     for (let i = 0; i < schema.length; i++) {
-      // console.log('index', i, typeof schema[i])
       var name
       let options = {}
 
-      if (schema[i] instanceof Object &&
-        typeof schema[i] === 'function') {
+      if (schema[i] instanceof Object && typeof schema[i] === 'function') {
         if (isObject(schema[i + 1])) {
           options = schema[i + 1]
         } else if (isObject(schema[i + 2])) {
@@ -37,113 +56,47 @@ class Layout {
         }
 
         component = new schema[i](options)
-        const element = component.element || component
 
-        if (level === 1) {
-          structure.element = element
-        }
+        const element = component.element || component
+        if (level === 1) structure.element = element
 
         if (name) {
           structure[name] = component
           this.components.push([name, component])
         }
 
-        // if (component) {
-        //   this.display(component.element, options)
-        //   this.style(component, options)
-        // }
-
-        if (component && container) {
-          if (component.insert) {
-            component.insert(container)
-          } else {
-            const wrapper = container.element || container
+        if (component) {
+          if (component.insert) component.insert(fragment)
+          else fragment.appendChild(element)
 
-            wrapper.appendChild(element)
-
-            if (component.onInserted) {
-              component.onInserted(wrapper)
-            }
-          }
-          component._container = container
+          if (component.onInserted) component.onInserted(fragment)
         }
       } else if (Array.isArray(schema[i])) {
-        // console.log('------', schema[i])
-        if (component == null) {
-          component = container
-        }
+        if (!component) component = container
         this.create(schema[i], component, structure, level)
       }
     }
 
-    return structure
-  }
-
-  display (element, options) {
-    const display = options.display
-    const direction = options.direction || 'horizontal'
-
-    if (!element || !display) return
-
-    if (direction === 'horizontal') {
-      element.className += ' ' + 'flex-row'
-    } else if (direction === 'vertical') {
-      element.className += ' ' + 'flex-column'
-    }
-  }
-
-  style (component) {
-    const options = component.options || {}
-
-    // console.log('component', component);
-
-    if (options.flex) {
-      css.add(component.element, 'flex-' + options.flex)
-    } else {
-      const size = options.size
-      if (options.size && options.width) {
-        component.element.width = size + 'px'
-      } else if (options.size && options.height) {
-        component.element.height = size + 'px'
-      }
-    }
-
-    if (options.position) {
-      component.element.position = options.position
-    }
-
-    if (options.bottom) {
-      component.element.bottom = options.bottom
-    }
-
-    if (options.hide) {
-      component.element.display = 'none'
-    }
-
-    if (options.theme) {
-      css.add(component.element, 'theme' + '-' + options.theme)
+    if (container && fragment.hasChildNodes()) {
+      const wrapper = container.element || container
+      // console.log('wrapper', wrapper)
+      // console.log('fragment', fragment)
+      wrapper.appendChild(fragment)
     }
-  }
-
-  extractInfo (object) {
-    // console.log('extractField', object)
-
-    const field = {}
 
-    for (const property in object) {
-      if (object.hasOwnProperty(property)) {
-        const infos = property.split(/\./)
-
-        if (infos[0] === 'info' && infos[1] !== undefined) {
-          // console.log('field', infos[0], infos[1])
-          field[infos[1]] = object[property]
-        }
-      }
-    }
-
-    return field
+    return structure
   }
 
+  /**
+   * Retrieves a specific component or the entire component structure.
+   *
+   * This method allows accessing a component from the created layout by its name.
+   * If a name is provided, it returns the component associated with that name.
+   * If no name is provided, it returns the entire component structure.
+   *
+   * @param {string} name - The name of the component to retrieve.
+   * @returns {Object} The requested component or the entire component structure.
+   */
   get (name) {
     if (name) return this.component[name]
     else return this.component

package/src/link.js

@@ -1,6 +1,8 @@
 import build from './module/build'
 
 class Link {
+  static uid = "material-link";
+
   static defaults = {
     class: 'link',
     tag: 'a'

package/src/list/collection.js

@@ -7,6 +7,8 @@ const defaults = {
 }
 
 class Collection {
+  static uid = "material-list-collection";
+
   /**
    * Constructor
    * @param  {Object} options - Component options

package/src/list/virtual.new.js

@@ -6,6 +6,8 @@ import emitter from '../module/emitter' // Import the emitter module.
 
 // Define the VirtualList class
 class VirtualList {
+  static uid = "material-list-virtuallist";
+
   constructor (options) {
     // Initialize the class with options passed to the constructor.
     this.options = { ...(options || {}) } // Spread operator to merge options with default values.

package/src/list.js

@@ -7,6 +7,8 @@ const defaults = {
 }
 
 class List {
+  static uid = "material-list";
+
   constructor (options) {
     this.options = Object.assign({}, defaults, options || {})
 

package/src/loader.js

@@ -1,4 +1,6 @@
 class Loader {
+  static uid = "material-loader";
+
   static defaults = {
     class: 'loader'
   }

package/src/loading.js

@@ -1,6 +1,8 @@
 import build from './module/build'
 
 class Loading {
+  static uid = "material-loading";
+
   static isComponent () {
     return true
   }

package/src/map.js

@@ -41,6 +41,8 @@ const defaults = {
 }
 
 class Map {
+  static uid = "material-map";
+
   /**
    * Constructor component options
    * @return {Object} Class instance

package/src/mixin/controller.js

@@ -6,6 +6,8 @@ let instance = null
  *
  */
 class Controller {
+  static uid = "material-mixin-controller";
+
   /**
    * Setting up block level variable to store class state
    * , set's to null by default.

package/src/mixin/emitter.js

@@ -1,4 +1,6 @@
 class EventEmitter {
+  static uid = "material-mixin-eventemitter";
+
   constructor () {
     this.events = {}
   }

package/src/mixin/position.js

@@ -5,7 +5,6 @@ export default {
     const { offsetX = 0, offsetY = 0, align = 'center', vAlign = 'middle' } = position
 
     const name = this.constructor.name
-    console.log('constructor', name)
 
     if (!target) return
 
@@ -13,15 +12,8 @@ export default {
     const screen = this.element.parentNode.getBoundingClientRect()
     const element = this.element.getBoundingClientRect()
 
-    console.log('caller', caller)
-    console.log('screen', screen)
-    console.log('element', element)
-
     let left, top
 
-    console.log('align', align)
-    console.log('target left', caller.left)
-
     switch (align) {
       case 'left':
         left = caller.left + caller.width
@@ -40,13 +32,15 @@ export default {
         left = caller.left + (caller.width / 2) - (element.width / 2)
     }
 
+    // ensure that the element remains within the limits of its container
+
     if (left < 0) left = offsetX
 
     if (left + element.width + offsetX > screen.width) {
-      left = caller.left - element.width + caller.width - offsetX
+      left = screen.width - element.width - offsetX
     }
 
-    console.log('left', left)
+    // console.log('left', left)
 
     // left = Math.max(offsetX, Math.min(left, screen.width - element.width - offsetX))
 
@@ -77,12 +71,6 @@ export default {
         top = caller.top + scrollY + (caller.height / 2) - (element.height / 2)
     }
 
-    // if (this.options.class !== 'menu') {
-    //   top = Math.max(offsetY, Math.min(top, screen.height - element.height - offsetY))
-    // }
-
-    console.log('top', top)
-
     this.element.style.left = `${left}px`
     this.element.style.top = `${top}px`
 

package/src/module/serialize.js

@@ -0,0 +1,25 @@
+/**
+ * Serializes an object into a string representation.
+ *
+ * This function takes an object and serializes its properties into a string format.
+ * It sorts the keys of the object, and for each key, it checks if the corresponding
+ * value is an object. If it is, the function is called recursively on that object.
+ * The output is a string where each key-value pair is separated by a colon, and
+ * pairs are separated by a pipe character.
+ *
+ * @param {Object} object - The object to be serialized.
+ * @returns {string} The serialized string representation of the object.
+ */
+const serialize (object, separator = '|') => {
+  const keys = Object.keys(object).sort()
+  const serialized = keys.map(key => {
+    const value = object[key]
+    if (typeof value === 'object' && value !== null) {
+      return `${key}:${serialize(value)}`
+    }
+    return `${key}:${value}`
+  })
+  return serialized.join(separator)
+}
+
+export default serialize

package/src/progress.js

@@ -14,6 +14,8 @@ const defaults = {
 }
 
 class Spinner {
+  static uid = "material-spinner";
+
   /**
    * init
    * @return {Object} The class options

package/src/selector.js

@@ -18,6 +18,8 @@ const defaults = {
 }
 
 class Selector {
+  static uid = "material-selector";
+
   static isComponent () {
     return true
   }

package/src/slider.js

@@ -50,6 +50,8 @@ const defaults = {
  * @extends Control
  */
 class Slider {
+  static uid = "material-slider";
+
   /**
    * init
    * @return {Object} The class options

package/src/tabs.js

@@ -20,6 +20,8 @@ const defaults = {
 }
 
 class Tabs {
+  static uid = "material-tabs";
+
   /**
    * Constructor
    * @param  {Object} options - Component options

package/src/text.js

@@ -1,6 +1,8 @@
 import build from './module/build'
 
 class Text {
+  static uid = "material-text";
+
   static defaults = {
     class: 'text',
     tag: 'span'

package/src/textfield.js

@@ -4,6 +4,8 @@ import dataset from './module/dataset'
 import attributes from './module/attributes'
 
 class Textfield {
+  static uid = "material-textfield";
+
   static isComponent () {
     return true
   }

package/src/toolbar.js

@@ -11,6 +11,8 @@ const defaults = {
 }
 
 class Toolbar {
+  static uid = "material-toolbar";
+
   /**
    * Constructor
    * @param  {Object} options - Component options

package/src/tooltip.js

@@ -20,6 +20,8 @@ const defaults = {
 }
 
 class Tooltip {
+  static uid = "material-tooltip";
+
   /**
    * The init method of the Button class
    * @param  {Object} The element attributes

package/src/tree.js

@@ -14,6 +14,8 @@ const defaults = {
 }
 
 class Tree {
+  static uid = "material-tree";
+
   constructor (options) {
     this.options = Object.assign({}, defaults, options || {})