material 0.8.9 → 0.9.1

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

package/src/module/events.js

@@ -33,6 +33,8 @@ const events = {
       } else if (f && bound) {
         handler = f.bind(bound)
       } else {
+        // throw new Error('Cannot bind function for eventDef')
+        // console.trace('Cannot bind function for eventDef')
         return // Cannot bind function for eventDef
       }
 

package/src/module/layout.js

@@ -0,0 +1,76 @@
+import { is as isObject } from '../module/object'
+
+const components = []
+
+/**
+ * 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.
+ */
+function create (schema, container, structure = {}, level = 0) {
+  level++
+  let component
+  const object = {}
+  const fragment = document.createDocumentFragment()
+
+  for (let i = 0; i < schema.length; i++) {
+    var name
+    let options = {}
+
+    if (schema[i] instanceof Object && typeof schema[i] === 'function') {
+      if (isObject(schema[i + 1])) {
+        options = schema[i + 1]
+      } else if (isObject(schema[i + 2])) {
+        options = schema[i + 2]
+      }
+
+      if (typeof schema[i + 1] === 'string') {
+        name = schema[i + 1]
+        if (!schema[i].isElement && !schema[i].isComponent) {
+          options.name = name
+        }
+      }
+
+      component = new schema[i](options)
+
+      const element = component.element || component
+      if (level === 1) structure.element = element
+
+      if (name) {
+        structure[name] = component
+        components.push([name, component])
+      }
+
+      if (component) {
+        if (component.insert) component.insert(fragment)
+        else fragment.appendChild(element)
+
+        if (component.onInserted) component.onInserted(fragment)
+      }
+    } else if (Array.isArray(schema[i])) {
+      if (!component) component = container
+      create(schema[i], component, structure, level)
+    }
+  }
+
+  if (container && fragment.hasChildNodes()) {
+    const wrapper = container.element || container
+    wrapper.appendChild(fragment)
+  }
+
+  function get (name) {
+    return structure[name] || null
+  }
+
+  object.component = structure
+  object.components = components
+  object.get = get
+
+  return object
+}
+
+export { create }

package/src/module/merge.js

@@ -0,0 +1,22 @@
+// deep merge
+const isObject = item =>
+  item && typeof item === 'object' && !Array.isArray(item)
+
+const merge = (target, ...sources) => {
+  sources.forEach(source => {
+    if (isObject(source)) {
+      Object.keys(source).forEach(key => {
+        const sourceValue = source[key]
+        if (isObject(sourceValue)) {
+          if (!isObject(target[key])) target[key] = {}
+          merge(target[key], sourceValue)
+        } else {
+          target[key] = sourceValue
+        }
+      })
+    }
+  })
+  return target
+}
+
+export default merge

package/src/navigation.js

@@ -1,7 +1,7 @@
 import EventEmitter from './mixin/emitter'
 
 import * as css from './module/css'
-import build from './module/build'
+import build from './mixin/build'
 import events from './module/events'
 import display from './mixin/display'
 import Element from './element'
@@ -25,18 +25,19 @@ class Navigation extends EventEmitter {
 
     this.init(options)
     this.build()
-    events.attach(this.options.events, this)
     this.setup()
   }
 
   init (options) {
     this.options = { ...Navigation.defaults, ...options }
     Object.assign(this, build, display)
+
     this.items = []
   }
 
   setup () {
-    console.log('setup', this.options)
+    events.attach(this.options.events, this)
+
     if (this.options.type) css.add(this.element, 'type-' + this.options.type)
     if (this.options.type === 'rail') this.show()
     if (this.options.items) this.render(this.options.items)

package/src/progress.js

@@ -3,23 +3,17 @@ import create from './element/create'
 import classify from './module/classify'
 import insert from './element/insert'
 
-const defaults = {
-  prefix: 'material',
-  class: 'progress',
-  tag: 'div',
-  progress: '0%',
-  circular: `<svg class="progress" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+class Spinner {
+  static defaults = {
+    prefix: 'material',
+    class: 'progress',
+    tag: 'div',
+    progress: '0%',
+    circular: `<svg class="progress" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
       <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
     </svg>`
-}
-
-class Spinner {
-  static uid = "material-spinner";
+  }
 
-  /**
-   * init
-   * @return {Object} The class options
-   */
   constructor (options) {
     this.init(options)
     this.build()
@@ -27,14 +21,9 @@ class Spinner {
     return this
   }
 
-  /**
-   * [init description]
-   * @param  {?} options [description]
-   * @return {?}         [description]
-   */
   init (options) {
     // merge options
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = { ...Spinner.defaults, ...options }
 
     // define class
 
@@ -42,10 +31,6 @@ class Spinner {
     Object.assign(this, insert)
   }
 
-  /**
-   * Build function for item
-   * @return {Object} This class instance
-   */
   build (options) {
     this.element = create(this.options.tag)
     classify(this.element, this.options)

package/src/search.js

@@ -1,6 +1,6 @@
 import EventEmitter from './mixin/emitter'
 
-import build from './module/build'
+import build from './mixin/build'
 import display from './mixin/display'
 import events from './module/events'
 
@@ -36,8 +36,9 @@ class Search extends EventEmitter {
   }
 
   setup () {
-    this.input = this.ui.input
     events.attach(this.options.events, this)
+
+    this.input = this.ui.input
   }
 
   set (value) {

package/src/select.js

@@ -1,6 +1,6 @@
 import EventEmitter from './mixin/emitter'
 // modules
-import build from './module/build'
+import build from './mixin/build'
 import events from './module/events'
 import attributes from './module/attributes'
 import dataset from './module/dataset'
@@ -24,7 +24,7 @@ class Select extends EventEmitter {
   }
 
   init (options) {
-    this.options = Object.assign({}, Select.defaults, options || {})
+    this.options = { ...Select.defaults, ...options }
     Object.assign(this, build, dataset)
   }
 

package/src/selecter.js

@@ -5,7 +5,7 @@ import dataset from './module/dataset'
 import attributes from './module/attributes'
 import * as css from './module/css'
 // components
-import Layout from './layout'
+import { create } from './module/layout'
 import Element from './element'
 import Button from './button'
 
@@ -39,15 +39,16 @@ class Selecter extends EventEmitter {
     this.init(options)
     this.build()
     this.setup()
-    events.attach(this.options.events, this)
   }
 
   init (options) {
-    this.options = Object.assign({}, Selecter.defaults, options || {})
+    this.options = { ...Selecter.defaults, ...options }
     Object.assign(this, dataset)
   }
 
   setup () {
+    events.attach(this.options.events, this)
+
     if (this.options.data) {
       dataset(this.element, this.options.data)
     }
@@ -87,7 +88,7 @@ class Selecter extends EventEmitter {
       css.add(this.element, this.options.class)
     }
 
-    this.layout = new Layout(this.options.layout, this.element)
+    this.layout = create(this.options.layout, this.element)
     this.ui = this.layout.component
 
     // console.log('ui', this.ui)

package/src/selector.js

@@ -1,53 +1,32 @@
 import emitter from './module/emitter'
 import events from './module/events'
 
-const defaults = {
-  class: 'selector',
-  tag: 'div',
-  styles: ['style', 'color'],
-  modules: ['border', 'label', 'resizer'],
-  resizer: {
-    keepRatio: true,
-    minWidth: 10,
-    minHeight: 10
-  },
-  events: [
-    ['resizer.pointerdown', 'onPointerDown']
-  ]
-
-}
-
 class Selector {
-  static uid = "material-selector";
-
-  static isComponent () {
-    return true
+  static defaults = {
+    class: 'selector',
+    tag: 'div',
+    styles: ['style', 'color'],
+    modules: ['border', 'label', 'resizer'],
+    resizer: {
+      keepRatio: true,
+      minWidth: 10,
+      minHeight: 10
+    },
+    events: [
+      ['resizer.pointerdown', 'onPointerDown']
+    ]
   }
 
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
     // console.log('constructor')
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter, attach)
-    // console.log('options', options)
-
-    this.init()
-
-    return this
-  }
-
-  init () {
+    this.init(options)
     this.build()
     this.setup()
-    events.attach(this.options.events, this)
+  }
 
-    if (this.options.container) {
-      this.options.container.appendChild(this.element)
-    }
+  init (options) {
+    this.options = Object.assign({}, Selector.defaults, options || {})
+    Object.assign(this, emitter, attach)
   }
 
   /**
@@ -81,12 +60,15 @@ class Selector {
       this.element.appendChild(this.resizer)
     }
 
-    return this
+    if (this.options.container) {
+      this.options.container.appendChild(this.element)
+    }
   }
 
   setup () {
-    if (!this.options.src) return
+    events.attach(this.options.events, this)
 
+    if (!this.options.src) return
     this.setTarget(this.options.element)
   }
 

package/src/slider.js

@@ -12,75 +12,53 @@ import emitter from './module/emitter'
 
 import icon from './skin/material/icon/pin.svg'
 
-const defaults = {
-  prefix: 'material',
-  class: 'slider',
-  type: 'control',
-  label: null,
-  checked: false,
-  error: false,
-  value: false,
-  range: [0, 100],
-  step: 5,
-  modules: [control, emitter],
-  mixins: [],
-  build: ['$root.material-slider', {},
-    ['label$label.slider-label', {}],
-    ['input$input'],
-    ['$control.slider-control', {},
-      ['$track.slider-track', {},
-        ['canvas$canvas.slider-canvas', {}],
-        ['$trackvalue.slider-track-value', {}],
-        ['$knob.slider-knob', {}],
-        ['$marker.slider-marker', {},
-          ['$value.slider-value', {}]
+class Slider {
+  static defaults = {
+    class: 'slider',
+    type: 'control',
+    label: null,
+    checked: false,
+    error: false,
+    value: false,
+    range: [0, 100],
+    step: 5,
+    modules: [control, emitter],
+    mixins: [],
+    build: ['$root.material-slider', {},
+      ['label$label.slider-label', {}],
+      ['input$input'],
+      ['$control.slider-control', {},
+        ['$track.slider-track', {},
+          ['canvas$canvas.slider-canvas', {}],
+          ['$trackvalue.slider-track-value', {}],
+          ['$knob.slider-knob', {}],
+          ['$marker.slider-marker', {},
+            ['$value.slider-value', {}]
+          ]
         ]
       ]
+    ],
+    events: [
+      ['element.input.focus', 'focus'],
+      ['element.input.blur', 'blur']
     ]
-  ],
-  events: [
-    ['element.input.focus', 'focus'],
-    ['element.input.blur', 'blur']
-  ]
-}
-
-/**
- * Switch class
- * @class
- * @extends Control
- */
-class Slider {
-  static uid = "material-slider";
+  }
 
-  /**
-   * init
-   * @return {Object} The class options
-   */
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-
     this.init(this.options)
     this.build(this.options)
-    events.attach(this.options.events, this)
-
-    return this
+    this.setup()
   }
 
-  /**
-   * Constructor
-   * @param  {Object} options The class options
-   * @return {Object} This class instance
-   */
   init (options) {
+    this.options = Object.assign({}, Slider.defaults, options || {})
     init(this)
+  }
 
-    return this
+  setup () {
+    events.attach(this.options.events, this)
   }
 
-  /**
-   * build method
-   * @return {Object} The class instance
-   */
   build () {
     this.element = build(this.options.build)
     this.element = this.element.root

package/src/snackbar.js

@@ -1,7 +1,7 @@
 // base class
 import EventEmitter from './mixin/emitter'
 // related modules
-import build from './module/build'
+import build from './mixin/build'
 import events from './module/events'
 import display from './mixin/display'
 // ui element

package/src/switch.js

@@ -1,7 +1,7 @@
 // base
 import EventEmitter from './mixin/emitter'
 // module
-import build from './module/build'
+import build from './mixin/build'
 import dataset from './module/dataset'
 import events from './module/events'
 import attributes from './module/attributes'

package/src/switcher.js

@@ -23,7 +23,7 @@ class Switcher extends EventEmitter {
   }
 
   init (options) {
-    this.options = Object.assign({}, Switcher.defaults, options || {})
+    this.options = { ...Switcher.defaults, ...options }
   }
 
   build () {