material - npm Package Compare versions

Comparing version 0.8.7 to 0.8.8

package.json

 {
   "name": "material",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
@@ -5,0 +5,0 @@ "main": "index.js",

src/appbar.js

 import build from './module/build'
 
 class AppBar {
+  static uid = "material-appbar";
+
   static defaults = {
@@ -5,0 +7,0 @@ class: 'appbar'

src/badge.js

@@ -7,2 +7,4 @@ import build from './module/build'
 class Badge {
+  static uid = "material-badge";
+
   static defaults = {
@@ -9,0 +11,0 @@ class: 'badge'

src/calendar.js

@@ -39,2 +39,4 @@ import create from './element/create'
 class Calendar {
+  static uid = "material-calendar";
+
   /**
@@ -41,0 +43,0 @@ * init

src/card.js

@@ -6,2 +6,4 @@ import build from './module/build'
 class Card {
+  static uid = "material-card";
+
   static defaults = {
@@ -8,0 +10,0 @@ class: 'card',

src/checkbox.js

@@ -12,2 +12,4 @@ import EventEmitter from './mixin/events'
 class Checkbox {
+  static uid = "material-checkbox";
+
   static defaults = {
@@ -14,0 +16,0 @@ class: 'checkbox',

src/component.js

@@ -30,2 +30,4 @@ import create from './mixin/create'
 class Component {
+  static uid = "material-component";
+
   /**
@@ -32,0 +34,0 @@ * Constructor

src/datehour.js

 import build from './module/build'
 
 class DateHour {
+  static uid = "material-datehour";
+
   static defaults = {
@@ -5,0 +7,0 @@ class: 'date',

src/dialog.js

@@ -12,2 +12,4 @@ // dialog related modules
 class Dialog {
+  static uid = "material-dialog";
+
   static defaults = {
@@ -14,0 +16,0 @@ class: 'dialog',

src/divider.js

@@ -19,2 +19,4 @@ import create from './mixin/create'
 class Divider {
+  static uid = "material-divider";
+
   /**
@@ -21,0 +23,0 @@ * init

src/drawer.js

@@ -21,2 +21,4 @@ import init from './mixin/init'
 class Drawer {
+  static uid = "material-drawer";
+
   constructor (options) {
@@ -23,0 +25,0 @@ this.options = Object.assign({}, defaults, options || {})

src/element.js

 class Element {
+  static uid = "material-element";
+
   static isElement () {
@@ -3,0 +5,0 @@ return true

src/file.js

@@ -8,2 +8,4 @@ import EventEmitter from './mixin/emitter'
 class File {
+  static uid = "material-file";
+
   static defaults = {
@@ -10,0 +12,0 @@ class: 'file',

src/form.js

@@ -24,2 +24,4 @@ import insert from './element/insert'
 class Form {
+  static uid = "material-form";
+
   /**
@@ -26,0 +28,0 @@ * Constructor

src/icon.js

@@ -19,2 +19,4 @@ import insert from './mixin/insert'
 class Icon {
+  static uid = "material-icon";
+
   /**
@@ -21,0 +23,0 @@ * init

src/image.js

 import build from './module/build'
 
 class Image {
+  static uid = "material-image";
+
   static defaults = {
@@ -5,0 +7,0 @@ class: 'image',

src/item.js

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

src/layout.js

 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) {
@@ -18,10 +38,9 @@ level = level || 0
     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])) {
@@ -41,8 +60,6 @@ options = schema[i + 1]
         component = new schema[i](options)
+
         const element = component.element || component
+        if (level === 1) structure.element = element
 
-        if (level === 1) {
-          structure.element = element
-        }
-
         if (name) {
@@ -53,26 +70,10 @@ structure[name] = component
 
-        // if (component) {
-        //   this.display(component.element, options)
-        //   this.style(component, options)
-        // }
+        if (component) {
+          if (component.insert) component.insert(fragment)
+          else fragment.appendChild(element)
 
-        if (component && container) {
-          if (component.insert) {
-            component.insert(container)
-          } else {
-            const wrapper = container.element || container
-
-            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)
@@ -82,70 +83,22 @@ }
 
-    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'
+    if (container && fragment.hasChildNodes()) {
+      const wrapper = container.element || container
+      // console.log('wrapper', wrapper)
+      // console.log('fragment', fragment)
+      wrapper.appendChild(fragment)
     }
-  }
 
-  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)
-    }
+    return structure
   }
 
-  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
-  }
-
+  /**
+   * 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) {
@@ -152,0 +105,0 @@ if (name) return this.component[name]

src/link.js

 import build from './module/build'
 
 class Link {
+  static uid = "material-link";
+
   static defaults = {
@@ -5,0 +7,0 @@ class: 'link',

src/list.js

@@ -10,2 +10,4 @@ import * as css from './module/css'
 class List {
+  static uid = "material-list";
+
   constructor (options) {
@@ -12,0 +14,0 @@ this.options = Object.assign({}, defaults, options || {})

src/list/collection.js

@@ -10,2 +10,4 @@
 class Collection {
+  static uid = "material-list-collection";
+
   /**
@@ -12,0 +14,0 @@ * Constructor

src/list/virtual.new.js

@@ -9,2 +9,4 @@ // based on https://sergimansilla.com/blog/virtual-scrolling/
 class VirtualList {
+  static uid = "material-list-virtuallist";
+
   constructor (options) {
@@ -11,0 +13,0 @@ // Initialize the class with options passed to the constructor.

src/loader.js

 class Loader {
+  static uid = "material-loader";
+
   static defaults = {
@@ -3,0 +5,0 @@ class: 'loader'

src/loading.js

 import build from './module/build'
 
 class Loading {
+  static uid = "material-loading";
+
   static isComponent () {
@@ -5,0 +7,0 @@ return true

src/map.js

@@ -44,2 +44,4 @@ import mediator from '../module/mediator'
 class Map {
+  static uid = "material-map";
+
   /**
@@ -46,0 +48,0 @@ * Constructor component options

src/mixin/controller.js

@@ -9,2 +9,4 @@ 'use strict'
 class Controller {
+  static uid = "material-mixin-controller";
+
   /**
@@ -11,0 +13,0 @@ * Setting up block level variable to store class state

src/mixin/emitter.js

 class EventEmitter {
+  static uid = "material-mixin-eventemitter";
+
   constructor () {
@@ -3,0 +5,0 @@ this.events = {}

src/progress.js

@@ -17,2 +17,4 @@ // import Component from './component';
 class Spinner {
+  static uid = "material-spinner";
+
   /**
@@ -19,0 +21,0 @@ * init

src/selector.js

@@ -21,2 +21,4 @@ import emitter from './module/emitter'
 class Selector {
+  static uid = "material-selector";
+
   static isComponent () {
@@ -23,0 +25,0 @@ return true

src/slider.js

@@ -53,2 +53,4 @@ import init from './mixin/init'
 class Slider {
+  static uid = "material-slider";
+
   /**
@@ -55,0 +57,0 @@ * init

src/tabs.js

@@ -23,2 +23,4 @@ import create from './mixin/create'
 class Tabs {
+  static uid = "material-tabs";
+
   /**
@@ -25,0 +27,0 @@ * Constructor

src/text.js

 import build from './module/build'
 
 class Text {
+  static uid = "material-text";
+
   static defaults = {
@@ -5,0 +7,0 @@ class: 'text',

src/textfield.js

@@ -7,2 +7,4 @@ import emitter from './module/emitter'
 class Textfield {
+  static uid = "material-textfield";
+
   static isComponent () {
@@ -9,0 +11,0 @@ return true

src/toolbar.js

@@ -14,2 +14,4 @@ 'use strict'
 class Toolbar {
+  static uid = "material-toolbar";
+
   /**
@@ -16,0 +18,0 @@ * Constructor

src/tooltip.js

@@ -23,2 +23,4 @@ import touch from './module/touch'
 class Tooltip {
+  static uid = "material-tooltip";
+
   /**
@@ -25,0 +27,0 @@ * The init method of the Button class

src/tree.js

@@ -17,2 +17,4 @@ import emitter from './module/emitter'
 class Tree {
+  static uid = "material-tree";
+
   constructor (options) {
@@ -19,0 +21,0 @@ this.options = Object.assign({}, defaults, options || {})

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

471265

increased by0.4%

Number of package files

227

increased by0.44%

Lines of code

11101

increased by0.25%

No dependency changes