material 0.9.0 → 0.9.1

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 () {

package/src/tabs.js

@@ -6,27 +6,20 @@ import offset from './element/offset'
 
 import List from './list'
 import Button from './button'
-import Divider from './divider'
+import Element from './element'
 
-const defaults = {
-  prefix: 'material',
-  class: 'tabs',
-  tag: 'div',
-  indicator: {
+class Tabs {
+  static defaults = {
     prefix: 'material',
-    class: 'indicator',
-    tag: 'div'
+    class: 'tabs',
+    tag: 'div',
+    indicator: {
+      prefix: 'material',
+      class: 'indicator',
+      tag: 'div'
+    }
   }
-}
 
-class Tabs {
-  static uid = "material-tabs";
-
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
     this.init(options)
     this.build()
@@ -35,7 +28,7 @@ class Tabs {
   }
 
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = { ...Tabs.defaults, ...options }
     Object.assign(this, insert, emitter)
   }
 
@@ -58,7 +51,7 @@ class Tabs {
         render: (info) => {
           let item
           if (info.type === 'divider') {
-            item = new Divider()
+            item = new Element({ class: 'divider' })
           } else {
             item = new Button({
               name: info.name,

package/src/tabview.js

@@ -1,7 +1,7 @@
 import EventEmitter from './mixin/emitter'
 import observer from './element/observer'
 import events from './module/events'
-import build from './module/build'
+import build from './mixin/build'
 import display from './view/display'
 
 class TabView extends EventEmitter {

package/src/text.js

@@ -1,8 +1,6 @@
-import build from './module/build'
+import build from './mixin/build'
 
 class Text {
-  static uid = "material-text";
-
   static defaults = {
     class: 'text',
     tag: 'span'
@@ -15,7 +13,7 @@ class Text {
   }
 
   init (options) {
-    this.options = Object.assign({}, Text.defaults, options || {})
+    this.options = { ...Text.defaults, ...options }
     Object.assign(this, build)
   }
 

package/src/textfield.js

@@ -4,8 +4,6 @@ import dataset from './module/dataset'
 import attributes from './module/attributes'
 
 class Textfield {
-  static uid = "material-textfield";
-
   static isComponent () {
     return true
   }
@@ -28,7 +26,7 @@ class Textfield {
   }
 
   init (options) {
-    this.options = Object.assign({}, Textfield.defaults, options || {})
+    this.options = { ...Textfield.defaults, ...options }
     Object.assign(this, emitter, dataset)
     // console.log('options', options)
   }

package/src/toolbar.js

@@ -4,40 +4,26 @@ import create from './mixin/create'
 import insert from './mixin/insert'
 import offset from './element/offset'
 
-const defaults = {
-  prefix: 'material',
-  class: 'toolbar',
-  tag: 'div'
-}
-
 class Toolbar {
-  static uid = "material-toolbar";
+  static defaults = {
+    prefix: 'material',
+    class: 'toolbar',
+    tag: 'div'
+  }
 
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
     this.init(options)
     this.build()
     this.attach()
-    return this
   }
 
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = { ...Toolbar.defaults, ...options }
     Object.assign(this, insert)
 
-    // console.log('waterfALL', this.options.waterfall)
-
     this.waterfall = this.options.waterfall
   }
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
   build () {
     this.element = create(this.options)