material 0.9.0 → 0.9.2

package/src/form.js

@@ -5,31 +5,18 @@ import events from './module/events'
 import controller from './mixin/controller'
 
 // import component
-import Layout from './layout'
+import { create } from './module/layout'
 
-const defaults = {
-  prefix: 'material',
-  class: 'form',
-  tag: 'div',
-  controls: ['textfield', 'checkbox', 'slider', 'switch']
-}
-
-/**
- * Form class
- *
- * @class
- * @return {Class} This class instance
- */
 class Form {
-  static uid = "material-form";
+  static defaults = {
+    prefix: 'material',
+    class: 'form',
+    tag: 'div',
+    controls: ['textfield', 'checkbox', 'slider', 'switch']
+  }
 
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = Object.assign({}, Form.defaults, options || {})
 
     this.init()
     this.build()
@@ -78,7 +65,7 @@ class Form {
     // complete layout options
     this.options.root = this.element
 
-    this.layout = new Layout(this.options.layout, this.element)
+    this.layout = create(this.options.layout, this.element)
 
     this._initControls(this.layout.controls)
 

package/src/icon.js

@@ -1,27 +1,13 @@
 import insert from './mixin/insert'
 import * as css from './module/css'
 
-var defaults = {
-  prefix: 'material',
-  class: 'icon',
-  tag: 'div'
-}
-
-/**
- * The item class is used for example as item list
- *
- * @class
- * @extends {Component}
- * @return {Object} The class instance
- * @example new Item(object);
- */
 class Icon {
-  static uid = "material-icon";
+  static defaults = {
+    prefix: 'material',
+    class: 'icon',
+    tag: 'div'
+ }
 
-  /**
-   * init
-   * @return {Object} The class options
-   */
   constructor (options) {
     this.init(options)
     this.build()
@@ -29,20 +15,11 @@ class Icon {
     return this
   }
 
-  /**
-   * [init description]
-   * @param  {?} options [description]
-   * @return {?}         [description]
-   */
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = Object.assign({}, Icon.defaults, options || {})
     Object.assign(this, insert)
   }
 
-  /**
-   * Build function for item
-   * @return {Object} This class instance
-   */
   build (options) {
     options = options || this.options
 
@@ -66,11 +43,6 @@ class Icon {
     }
   }
 
-  /**
-   * Get or set text value of the element
-   * @param {string} value The text to set
-   * @returns {*}
-   */
   set (value) {
     if (value) {
       if (this.element.innerText) {

package/src/image.js

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

package/src/item.js

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

package/src/link.js

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

package/src/list/build.js

@@ -1,7 +1,7 @@
 import scrollbar from '../module/scrollbar'
 import dataset from '../module/dataset'
 
-import Layout from '../layout'
+import { create } from '../module/layout'
 import Virtual from './virtual'
 import Loading from '../loading'
 
@@ -30,7 +30,7 @@ export default {
       dataset(this.element, this.options.data)
     }
 
-    this.layout = new Layout(this.options.layout.main, this.element)
+    this.layout = create(this.options.layout.main, this.element)
     this.ui = this.layout.component
 
     // prepare loading

package/src/list/render.js

@@ -1,11 +1,11 @@
 import Element from '../element'
-import Layout from '../layout'
+import { create } from '../module/layout'
 
 import dot from '../module/dot'
 
 export default {
 
-  render (list, option) {
+  render (list) {
     // console.log('render', list)
     this.virtual.set(list)
 
@@ -38,8 +38,6 @@ export default {
       class: 'item'
     })
 
-    // console.log('---', this.id)
-
     if (this.id && this.id === info[this.dataId]) {
       element.classList.add('selected')
     }
@@ -53,13 +51,13 @@ export default {
       const item = info[this.options.itemSwitch]
 
       if (this.options.layout.item[item]) {
-        layout = new Layout(this.options.layout.item[item], element)
+        layout = create(this.options.layout.item[item], element)
       } else {
-        layout = new Layout(this.options.layout.item.base, element)
+        layout = create(this.options.layout.item.base, element)
       }
     } else {
       const itemName = this.options.itemName || 'item'
-      layout = new Layout(this.options.layout[itemName], element)
+      layout = create(this.options.layout[itemName], element)
     }
 
     // console.log('translate', layout)

package/src/list/select.js

@@ -1,3 +1,5 @@
+import clone from '../module/clone'
+
 export default {
   select (item, silent) {
     // console.log('select', item.dataset.id)
@@ -42,11 +44,11 @@ export default {
   },
 
   getInfoById (id) {
-    return JSON.parse(JSON.stringify(this.dataStore[id]))
+    return clone(this.dataStore[id])
   },
 
   getSelectedInfo () {
-    return JSON.parse(JSON.stringify(this.dataStore[this.id]))
+    return clone(this.dataStore[this.id])
   },
 
   getItemById (id, silent) {

package/src/list/update.js

@@ -1,4 +1,4 @@
-import Layout from '../layout'
+import { create } from '../module/layout'
 
 export default {
   update (info) {
@@ -53,7 +53,7 @@ export default {
     const item = this.ui.body.querySelector('[data-id="' + info[this.dataId] + '"]')
     if (item) {
       item.innerHTML = ''
-      const layout = new Layout(this.options.layout.item, item)
+      const layout = create(this.options.layout.item, item)
 
       this.renderInfo(layout, info)
     }

package/src/list.js

@@ -1,20 +1,19 @@
 import * as css from './module/css'
 
-const defaults = {
-  className: 'text',
-  tag: 'span',
-  seprator: ' | '
-}
-
 class List {
-  static uid = "material-list";
+  static defaults = {
+    className: 'text',
+    tag: 'span',
+    seprator: ' | '
+  }
 
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-
+    this.init(options)
     this.build()
+  }
 
-    return this
+  init (otions) {
+    this.options = { ...List.defaults, ...options }
   }
 
   build () {
@@ -37,9 +36,9 @@ class List {
   }
 
   set (list) {
-    var text = ''
+    let text = ''
 
-    for (var i = 0; i < list.length; i++) {
+    for (let i = 0; i < list.length; i++) {
       if (i < list.length - 1) {
         text = text + list[i] + this.options.seprator
       } else {
@@ -50,7 +49,7 @@ class List {
     // console.log('set', text)
     if (text === undefined) return
 
-    var label = this.options.label || ''
+    const label = this.options.label || ''
 
     this.element.innerHTML = label + text
 

package/src/loader.js

@@ -1,18 +1,15 @@
 class Loader {
-  static uid = "material-loader";
-
   static defaults = {
     class: 'loader'
   }
 
   constructor (options) {
-    this.options = Object.assign({}, Loader.defaults, options || {})
-
-    // Object.assign(this, mediator, build)
-
+    this.init(options)
     this.build()
+  }
 
-    return this
+  init (options) {
+    this.options = { ...Loader.defaults, ...options }
   }
 
   build () {

package/src/loading.js

@@ -1,12 +1,6 @@
-import build from './module/build'
+import build from './mixin/build'
 
 class Loading {
-  static uid = "material-loading";
-
-  static isComponent () {
-    return true
-  }
-
   static defaults = {
     class: 'loading',
     tag: 'div',
@@ -24,7 +18,7 @@ class Loading {
   }
 
   init (options) {
-    this.options = Object.assign({}, Loading.defaults, options || {})
+    this.options = { ...Loading.defaults, ...options }
     Object.assign(this, build)
   }
 

package/src/map.js

@@ -13,42 +13,37 @@ import mode from './map/mode'
 import select from './map/select'
 import focus from './map/focus'
 
-const events = [
-  ['root.mousedown', 'mouseDown'],
-  ['root.mouseup', 'mouseUp'],
-  ['root.mousemove', 'mouseMove'],
-  ['root.mouseleave', 'mouseLeave'],
-  ['root.mouseout', 'mouseOut'],
-  ['root.click', 'mouseClick'],
-  ['root.touchStart', 'mouseClick']
-]
-
-const defaults = {
-  class: 'worldmap',
-  tag: 'main',
-  zoom: 0.3,
-  isocodes: [],
-  mode: 'unique',
-  path: '/dist/map/',
-  pinchZoom: {
-    maxZoom: 128,
-    minZoom: 3,
-    setOffsetsOnce: true,
-    verticalPadding: 64,
-    horizontalPadding: 64,
-    tapZoomFactor: 0
-  }
-}
+// Depracted
 
 class Map {
-  static uid = "material-map";
+  static defaults = {
+    class: 'worldmap',
+    tag: 'main',
+    zoom: 0.3,
+    isocodes: [],
+    mode: 'unique',
+    path: '/dist/map/',
+    pinchZoom: {
+      maxZoom: 128,
+      minZoom: 3,
+      setOffsetsOnce: true,
+      verticalPadding: 64,
+      horizontalPadding: 64,
+      tapZoomFactor: 0
+    },
+    events: [
+      ['root.mousedown', 'mouseDown'],
+      ['root.mouseup', 'mouseUp'],
+      ['root.mousemove', 'mouseMove'],
+      ['root.mouseleave', 'mouseLeave'],
+      ['root.mouseout', 'mouseOut'],
+      ['root.click', 'mouseClick'],
+      ['root.touchStart', 'mouseClick']
+    ]
+  }
 
-  /**
-   * Constructor component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = { ...Map.defaults, ...options }
 
     Object.assign(
       this, emitter, init, build, viewport, mouse,

package/src/menu.js

@@ -1,6 +1,6 @@
 import EventEmitter from './mixin/emitter'
 // menu related modules
-import build from './module/build'
+import build from './mixin/build'
 import events from './module/events'
 import display from './mixin/display'
 import position from './mixin/position'
@@ -41,7 +41,7 @@ class Menu extends EventEmitter {
   }
 
   init (options) {
-    this.options = Object.assign({}, Menu.defaults, options || {})
+    this.options = { ...Menu.defaults, ...options }
     Object.assign(this, build, display, position)
 
     this.menus = []

package/src/mixin/build.js

@@ -0,0 +1,68 @@
+import * as css from '../module/css'
+import dataset from '../module/dataset'
+
+import { create } from '../module/layout'
+
+export default {
+  build () {
+    this.element = document.createElement(this.options.tag || 'div')
+
+    const defaults = this.constructor.defaults || {}
+
+    if (defaults.base) css.add(this.element, defaults.base)
+    if (defaults.class) css.add(this.element, defaults.class)
+
+    if (this.options.class !== defaults.class) {
+      css.add(this.element, this.options.class)
+    }
+
+    if (this.options.data) {
+      dataset(this.element, this.options.data)
+    }
+
+    if (this.options.base === 'view' || this.options.base === 'app') {
+      this.container = this.options.container || document.body
+    } else {
+      this.container = this.options.container
+    }
+
+    if (this.container) this.appendTo(this.container)
+
+    if (this.options.layout) {
+      this.layout = create(this.options.layout, this.element)
+      this.ui = this.layout.component
+    }
+
+    this.ui = this.ui || {}
+
+    if (this.options.icon) this.buildIcon()
+    if (this.options.label) this.buildLabel()
+
+    if (this.options.show === true && this.show) this.show()
+  },
+
+  buildLabel () {
+    if (!this.options.label) return
+
+    this.ui.label = document.createElement('label')
+    this.ui.label.classList.add('label')
+    this.ui.label.innerHTML = this.options.label
+
+    this.element.appendChild(this.ui.label)
+  },
+
+  buildIcon () {
+    if (!this.options.icon) return
+
+    this.ui.icon = document.createElement('i')
+    this.ui.icon.classList.add('icon')
+    this.ui.icon.innerHTML = this.options.icon
+
+    this.element.appendChild(this.ui.icon)
+  },
+
+  appendTo (container) {
+    // console.log('appendTo', container)
+    container.appendChild(this.element)
+  }
+}

package/src/mixin/emitter.js

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

package/src/module/build.js

@@ -1,67 +1,72 @@
 import * as css from './css'
 import dataset from './dataset'
+import { create } from '../module/layout'
 
-import Layout from '../layout'
+/**
+ * Builds a UI component instance.
+ * @param {object} instance - The component instance to build.
+ */
+const build = (instance) => {
+  const { tag = 'div', class: customClass, data, base, container, schema, icon, label, show } = instance.options
+  const { defaults = {} } = instance.constructor
 
-export default {
-  build () {
-    this.element = document.createElement(this.options.tag || 'div')
+  instance.element = document.createElement(tag)
 
-    const defaults = this.constructor.defaults || {}
+  if (defaults.base) css.add(instance.element, defaults.base)
+  if (defaults.class) css.add(instance.element, defaults.class)
 
-    if (defaults.base) css.add(this.element, defaults.base)
-    if (defaults.class) css.add(this.element, defaults.class)
-
-    if (this.options.class !== defaults.class) {
-      css.add(this.element, this.options.class)
-    }
+  if (customClass !== defaults.class) {
+    css.add(instance.element, customClass)
+  }
 
-    if (this.options.data) {
-      dataset(this.element, this.options.data)
-    }
+  if (data) {
+    dataset(instance.element, data)
+  }
 
-    if (this.options.base === 'view' || this.options.base === 'app') {
-      this.container = this.options.container || document.body
-    } else {
-      this.container = this.options.container
-    }
+  setupContainer(instance, base, container)
 
-    if (this.container) this.appendTo(this.container)
+  if (schema) {
+    setupLayout(instance, schema)
+  }
 
-    if (this.options.layout) {
-      this.layout = new Layout(this.options.layout, this.element)
-      this.ui = this.layout.component
-    }
+  instance.ui = instance.ui || {}
 
-    this.ui = this.ui || {}
+  if (icon) buildIcon(instance)
+  if (label) buildLabel(instance)
 
-    if (this.options.icon) this.buildIcon()
-    if (this.options.label) this.buildLabel()
+  if (show === true && instance.show) instance.show()
+}
 
-    if (this.options.show === true && this.show) this.show()
-  },
+const setupContainer = (instance, base, container) => {
+  instance.container = (base === 'view' || base === 'app') ? container || document.body : container
+  if (instance.container) instance.container.appendChild(instance.element)
+}
 
-  buildLabel () {
-    if (!this.options.label) return
+const setupLayout = (instance, schema) => {
+  instance.layout = create(schema, instance.element)
+  instance.ui = instance.layout.component
+}
 
-    this.ui.label = document.createElement('label')
-    this.ui.label.classList.add('label')
-    this.ui.label.innerHTML = this.options.label
+function buildLabel ({ ui, options, element }) {
+  const { label } = options
+  if (!label) return
 
-    this.element.appendChild(this.ui.label)
-  },
+  ui.label = document.createElement('label')
+  ui.label.classList.add('label')
+  ui.label.innerHTML = label
 
-  buildIcon () {
-    if (!this.options.icon) return
+  element.appendChild(ui.label)
+}
 
-    this.ui.icon = document.createElement('i')
-    this.ui.icon.classList.add('icon')
-    this.ui.icon.innerHTML = this.options.icon
+function buildIcon ({ ui, options, element }) {
+  const { icon } = options
+  if (!icon) return
 
-    this.element.appendChild(this.ui.icon)
-  },
+  ui.icon = document.createElement('i')
+  ui.icon.classList.add('icon')
+  ui.icon.innerHTML = icon
 
-  appendTo (container) {
-    container.appendChild(this.element)
-  }
+  element.appendChild(ui.icon)
 }
+
+export default build

package/src/module/clone.js

@@ -0,0 +1,15 @@
+const deepClone = obj => {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj // Return the value if obj is not an object
+  }
+
+  const clone = Array.isArray(obj) ? [] : {}
+
+  Object.entries(obj).forEach(([key, value]) => {
+    clone[key] = deepClone(value)
+  })
+
+  return clone
+}
+
+export default deepClone

package/src/module/dot.js

@@ -17,16 +17,22 @@
  * // flatComplex is now { 'a': [{ b: 1 }, { c: 2 }], 'd': [Date Object] }
  */
 
-const dot = (obj, base = '') => {
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    const newKey = base ? `${base}.${key}` : key
-    if (value && typeof value === 'object' && !Array.isArray(value)) {
-      Object.assign(acc, dot(value, newKey))
-    } else {
-      acc[newKey] = value
+function dot (obj) {
+  const res = {}
+  function recurse (obj, current) {
+    for (const key in obj) {
+      const value = obj[key]
+      const newKey = (current ? current + '.' + key : key)
+      if (value && typeof value === 'object') {
+        recurse(value, newKey)
+      } else {
+        res[newKey] = value
+      }
     }
-    return acc
-  }, {})
+  }
+
+  recurse(obj)
+  return res
 }
 
 export default dot