material - npm Package Compare versions

Comparing version 0.2.4 to 0.2.6

index.js

@@ -1,2 +0,2 @@
-import Button from 'material/src/button'
+import Button from 'material/src/Button'
 import Calendar from 'material/src/calendar'
@@ -16,3 +16,5 @@ import Card from 'material/src/card'
 import Menu from 'material/src/menu'
+import Progress from 'material/src/progress'
 import Slider from 'material/src/slider'
+import Snackbar from 'material/src/snackbar'
 import Switch from 'material/src/switch'
@@ -22,2 +24,3 @@ import Text from 'material/src/text'
 import Toolbar from 'material/src/toolbar'
+import View from 'material/src/view'
 
@@ -44,3 +47,6 @@ export {
   Textfield,
-  Toolbar
-}
+  Toolbar,
+  View,
+  Snackbar,
+  Progress
+}

package.json

 {
   "name": "material",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "A lightweight implementation of Material Design Components - ES6",
@@ -18,3 +18,34 @@ "main": "index.js",
     "lightweight material design component es6 es2015 vanilla javascript"
-  ]
-}
+  ],
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-es2015-rollup": "^3.0.0",
+    "npm-run-all": "^4.1.1",
+    "require-dir": "^0.3.0",
+    "rollup": "^0.49.2",
+    "rollup-plugin-babel": "^3.0.2",
+    "rollup-plugin-commonjs": "^8.2.0",
+    "rollup-plugin-eslint": "^4.0.0",
+    "rollup-plugin-html": "^0.2.1",
+    "rollup-plugin-json": "^2.3.0",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-npm": "^2.0.0",
+    "rollup-plugin-replace": "^1.1.1",
+    "rollup-plugin-strip": "^1.1.1",
+    "rollup-plugin-svg": "^1.0.1",
+    "rollup-plugin-uglify": "^2.0.1",
+    "rollup-plugin-uglify-es": "0.0.1",
+    "standard": "^10.0.3",
+    "uglify-es": "^3.0.28",
+    "uglify-js": "github:mishoo/UglifyJS2#harmony-v2.8.0"
+  },
+  "scripts": {
+    "dev": "rollup -c --watch",
+    "reload": "livereload 'dist/' -d",
+    "watch": "npm-run-all --parallel reload dev",
+    "docs": "jsdoc src -r -d docs",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

src/button.js

 'use strict'
 
-import init from './component/init'
-import classify from './component/classify'
+import create from './component/create'
+import control from './component/control'
 import ripple from './component/ripple'
-import emitter from './module/emitter'
-import create from './element/create'
-import css from './module/css'
-import merge from './module/merge'
+
 import insert from './element/insert'
-import bind from './module/bind'
 
-// modules
-import control from './component/control'
+import emitter from './module/emitter'
+import attach from './module/attach'
 
@@ -20,11 +16,9 @@ const defaults = {
   tag: 'button',
-  modules: [control, emitter, bind, ripple],
-  build: [],
-  bind: {
-    'wrapper.click': 'click'
-  }
+  events: [
+    ['root.click', '_clickHandler']
+  ]
 }
 
 /**
- * Button component
+ * Class that represents a button
  * @class
@@ -49,8 +43,6 @@ * @since 0.0.1
   constructor (options) {
-    this.options = merge(defaults, options || {})
-
-    this.init()
+    this.init(options)
     this.build()
     this.setup()
-    this.bind(this.options.bind)
+    this.attach()
 
@@ -67,7 +59,9 @@ this.emit('ready')
    */
-  init () {
-    init(this)
+  init (options) {
+    this.options = Object.assign({}, defaults, options || {})
 
+    Object.assign(this, control, emitter, attach, ripple)
+
     this.element = this.element || {}
-
+    ripple(this)
     this.emit('init')
@@ -84,23 +78,16 @@ }
 
-    var tag = this.options.tag || 'div'
-    this.wrapper = create(tag, this.options.prefix + '-' + this.options.class)
+    this.root = create(this.options)
 
-    classify(this.wrapper, this.options)
-
     this.options.label = this.options.label || this.options.text
 
+    this.root.setAttribute('aria-label', this.options.label || this.options.name)
+
     this.label(this.options.label)
     this.icon(this.options.icon)
 
-    if (this.options.type) {
-      css.add(this.wrapper, 'type-' + this.options.type)
-    }
-
-    // insert if container options is given
     if (this.options.container) {
-      insert(this.wrapper, this.options.container)
-      this.emit('injected', this.wrapper)
+      insert(this.root, this.options.container)
     }
 
-    this.emit('built', this.wrapper)
+    this.emit('built', this.root)
 
@@ -111,3 +98,3 @@ return this
   /**
-   * [insert description]
+   * insert method
    * @param  {?} container [description]
@@ -118,3 +105,3 @@ * @param  {?} context   [description]
   insert (container, context) {
-    insert(this.wrapper, container, context)
+    insert(this.root, container, context)
 
@@ -129,22 +116,14 @@ return this
   setup () {
-    this.element.input = this.wrapper
+    this.element.input = this.root
 
     if (this.options.name) {
-      // console.log('name', this.options.name);
-      this.wrapper.dataset.name = this.options.name
+      this.root.dataset.name = this.options.name
     }
 
-    if (this.options.label) {
-      this.wrapper.title = this.options.label
-    }
+    // if (this.options.label) {
+    //   this.root.title = this.options.label
+    // }
 
-    if (this.options.style) {
-      var styles = this.options.style.split(' ')
-      for (var i = 0; i < styles.length; i++) {
-        css.add(this.wrapper, 'style-' + styles[i])
-      }
-    }
-
     if (this.options.content) {
-      this.wrapper.innerHTML = this.options.content
+      this.root.innerHTML = this.options.content
     }
@@ -160,17 +139,18 @@ }
   set (prop, value) {
-    switch(prop) {
-  case 'disabled':
-    this.disable(value)
-    break
-  case 'value':
-    this.setValue(value)
-    break
-  case 'label':
-    this.setLabel(value)
-    break
-  default:
-    this.setValue(prop)
-}
+    switch (prop) {
+      case 'disabled':
+        this.disable(value)
+        break
+      case 'value':
+        this.setValue(value)
+        break
+      case 'label':
+        this.setLabel(value)
+        break
+      default:
+        this.setValue(prop)
+    }
 
-return this }
+    return this
+  }
 
@@ -182,3 +162,3 @@ /**
    */
-  click (e) {
+  _clickHandler (e) {
     e.preventDefault()
@@ -185,0 +165,0 @@

src/calendar.js

@@ -6,3 +6,3 @@ 'use strict'
 import css from './module/css'
-import bind from './module/bind'
+import attach from './module/attach'
 import emitter from './module/emitter'
@@ -26,5 +26,5 @@
   weekend: [0, 1],
-  bind: {
-    'wrapper.dblclick': 'add'
-  }
+  events: [
+    ['root.dblclick', 'add']
+  ]
 }
@@ -47,6 +47,8 @@
    */
-  constructor(options) {
-    this.init(options)
+  constructor (options) {
+    this.options = Object.assign({}, defaults, options || {})
+
+    this.init()
     this.build()
-    this.bind()
+    this.attach()
 
@@ -60,7 +62,5 @@ return this
    */
-  init(options) {
-    this.options = Object.assign(defaults, options)
-
+  init (options) {
     // assign modules
-    Object.assign(this, emitter, bind)
+    Object.assign(this, emitter, attach)
 
@@ -86,3 +86,3 @@ // init function
    */
-  getFirstDayOfWeek(d) {
+  getFirstDayOfWeek (d) {
     d = new Date(d)
@@ -100,3 +100,3 @@ var day = d.getDay()
    */
-  _initFunction(functions) {
+  _initFunction (functions) {
     functions = functions || []
@@ -117,7 +117,7 @@
    */
-  build() {
+  build () {
     // define main tag
     var tag = this.options.tag || 'div'
 
-    this.wrapper = create(tag, this.options.prefix + '-' + this.options.class)
+    this.root = create(tag, this.options.prefix + '-' + this.options.class)
 
@@ -127,3 +127,3 @@ this.buildWeek()
     if (this.options.container) {
-      insert(this.wrapper, this.options.container)
+      insert(this.root, this.options.container)
     }
@@ -138,3 +138,3 @@
    */
-  buildWeek() {
+  buildWeek () {
     this.buildHeader()
@@ -153,5 +153,5 @@ this.buildAllDay()
    */
-  buildHeader() {
+  buildHeader () {
     this.header = create('header')
-    insert(this.header, this.wrapper)
+    insert(this.header, this.root)
 
@@ -188,3 +188,3 @@ this.buildHeadline()
    */
-  buildHeadline() {
+  buildHeadline () {
     this.headline = create('div', this.options.class + '-headline')
@@ -209,3 +209,3 @@
    */
-  buildNavigation() {
+  buildNavigation () {
     var navigation = create('div', this.options.prefix + '-toolbar')
@@ -221,3 +221,3 @@ insert(navigation, this.headline)
 
-    css.add(back.wrapper, 'compact')
+    css.add(back.root, 'compact')
 
@@ -231,3 +231,3 @@ var today = new Button({
 
-    css.add(today.wrapper, 'compact')
+    css.add(today.root, 'compact')
 
@@ -241,3 +241,3 @@ var next = new Button({
 
-    css.add(next.wrapper, 'compact')
+    css.add(next.root, 'compact')
   }
@@ -250,3 +250,3 @@
    */
-  buildAllDay() {
+  buildAllDay () {
     var allday = create('div', 'allday')
@@ -276,3 +276,3 @@ insert(allday, this.header)
    */
-  buildBody() {
+  buildBody () {
     var cells = []
@@ -286,3 +286,3 @@
     css.add(this.body, this.options.class + '-body')
-    insert(this.body, this.wrapper)
+    insert(this.body, this.root)
 
@@ -323,3 +323,3 @@ var hours = create('div')
    */
-  dateToString(d) {
+  dateToString (d) {
     var day = d.getDate()
@@ -346,3 +346,3 @@ var month = d.getMonth() + 1
    */
-  initCanvas() {
+  initCanvas () {
     var canvas = create('canvas')
@@ -382,3 +382,3 @@ css.add(canvas, 'canvas')
    */
-  add(e) {
+  add (e) {
     if (e.target && e.target.matches(this.options.target)) {
@@ -405,3 +405,3 @@ var data = e.target.getAttribute('data-date')
    */
-  roundTime(value) {
+  roundTime (value) {
     var step = 0.5
@@ -417,3 +417,3 @@ var inv = 1.0 / step
    */
-  set(prop, value, options) {
+  set (prop, value, options) {
     console.log('set calendart', prop, value)
@@ -436,3 +436,3 @@ switch (prop) {
    */
-  setWeek(data) {
+  setWeek (data) {
     this.buildWeek(data)
@@ -446,6 +446,6 @@ return this
    */
-  next() {
+  next () {
     this.firstDay.setDate(this.firstDay.getDate() + this.options.rangedays)
 
-    this.wrapper.innerHTML = ''
+    this.root.innerHTML = ''
 
@@ -459,6 +459,6 @@ this.buildWeek()
    */
-  back() {
+  back () {
     this.firstDay.setDate(this.firstDay.getDate() - this.options.rangedays)
 
-    this.wrapper.innerHTML = ''
+    this.root.innerHTML = ''
 
@@ -473,7 +473,7 @@ this.buildWeek()
    */
-  goto(date) {
+  goto (date) {
     date = date || new Date()
 
     this.firstDay = this.getFirstDayOfWeek(this.date)
-    this.wrapper.innerHTML = ''
+    this.root.innerHTML = ''
 
@@ -483,12 +483,12 @@ this.buildWeek()
 
-  newEvent(date) {
+  newEvent (date) {
     // console.log('new Event', date);
   }
 
-  empty() {
+  empty () {
     console.log('empty')
-    this.wrapper.innerHTML = ''
+    this.root.innerHTML = ''
   }
 }
 
-export default Calendar
+export default Calendar

src/card.js

 'use strict'
 
 // import modules
-import init from './component/init'
-import merge from './module/merge'
-import create from './element/create'
+import create from './component/create'
 import insert from './component/insert'
-import classify from './component/classify'
 // import components
@@ -15,3 +12,3 @@ import Layout from './layout'
   class: 'card',
-  modules: [insert]
+  tag: 'div'
 }
@@ -26,8 +23,11 @@
   constructor (options) {
-    this.options = merge(defaults, options || {})
-
-    init(this)
+    this.init(options)
     this.build()
   }
 
+  init (options) {
+    this.options = Object.assign({}, defaults, options || {})
+    Object.assign(this, insert)
+  }
+
   /**
@@ -38,9 +38,7 @@ * build the component using the super method
   build () {
-    var tag = this.options.tag || 'div'
+    this.root = create(this.options)
 
-    this.wrapper = create(tag)
-    classify(this.wrapper, this.options)
-
-    this.options.layout.wrapper = this.wrapper
-    this.layout = new Layout(this.options.layout)
+    if (this.options.layout) {
+      this.layout = new Layout(this.options.layout, this.root)
+    }
   }
@@ -47,0 +45,0 @@ }

src/checkbox.js

 'use strict'
 
-import init from './component/init'
-import merge from './module/merge'
 import events from './component/events'
 import control from './component/control'
-import emitter from './module/emitter'
-import bind from './module/bind'
+import label from './component/label'
+
 import insert from './element/insert'
 import build from './element/build'
+
+import emitter from './module/emitter'
+import attach from './module/attach'
 import css from './module/css'
@@ -20,8 +21,8 @@
   type: 'control',
-  modules: [events, control, emitter, bind],
-  build: ['$wrapper.material-checkbox', {},
+  // modules: [events, control, emitter, attach],
+  build: ['$root.material-checkbox', {},
     ['input$input', {}],
     ['span$control.checkbox-control']
   ],
-  binding: [
+  events: [
     ['element.control.click', 'click', {}],
@@ -32,12 +33,5 @@ ['element.label.click', 'toggle', {}],
     ['element.input.focus', 'focus'],
-    ['element.input.blur', 'blur']
-  ],
-  bind: {
-    'element.control.click': 'click',
-    'element.label.click': 'toggle',
-    // for accessibility purpose
-    'element.input.click': 'toggle',
-    'element.input.focus': 'focus',
-    'element.input.blur': 'blur'
-  }
+    ['element.input.blur', 'blur'],
+    ['element.input.keydown', 'keydown', {}]
+  ]
 }
@@ -64,8 +58,6 @@ /**
    */
-  constructor(options) {
-    this.options = merge(defaults, options || {})
-    // init and build
-    this.init()
+  constructor (options) {
+    this.init(options)
     this.build()
-    this.bind(this.options.bind)
+    this.attach()
 
@@ -80,5 +72,5 @@ return this
    */
-  init() {
-    init(this)
-    // init options and merge options to defaults
+  init (options) {
+    this.options = Object.assign({}, defaults, options || {})
+    Object.assign(this, events, control, emitter, attach)
 
@@ -92,18 +84,24 @@ return this
    */
-  build() {
+  build () {
     this.element = build(this.options.build)
-    this.wrapper = this.element.wrapper
+    this.root = this.element.root
 
     this.element.control.innerHTML = icon
 
-    this.label(this.options.label)
+    var text = this.options.text || this.options.label
 
+    this.element.label = label(this.root, text, this.options)
+
     this.element.input.setAttribute('type', 'checkbox')
     this.element.input.setAttribute('name', this.options.name)
-    this.element.input.setAttribute('value', this.options.value)
+    this.element.input.setAttribute('aria-label', this.options.name)
 
+    if (this.options.value) {
+      this.element.label.setAttribute('value', this.options.value)
+    }
+
     if (this.options.disabled) {
       this.disabled = this.options.disabled
       this.element.input.setAttribute('disabled', 'disabled')
-      css.add(this.wrapper, 'is-disabled')
+      css.add(this.root, 'is-disabled')
     }
@@ -121,3 +119,3 @@
     if (this.options.container) {
-      insert(this.wrapper, this.options.container)
+      insert(this.root, this.options.container)
     }
@@ -134,3 +132,3 @@
    */
-  set(prop, value) {
+  set (prop, value) {
     switch (prop) {
@@ -153,4 +151,10 @@ case 'checked':
 
-  insert(container, context) {
-    insert(this.wrapper, container, context)
+  /**
+   * [insert description]
+   * @param  {?} container [description]
+   * @param  {?} context   [description]
+   * @return {?}           [description]
+   */
+  insert (container, context) {
+    insert(this.root, container, context)
 
@@ -163,5 +167,5 @@ return this
    * @param  {event} e [description]
-   * @return {[type]}   [description]
+   * @return {?}   [description]
    */
-  click(e) {
+  click (e) {
     this.toggle(e)
@@ -177,3 +181,3 @@ this.element.input.focus()
    */
-  setValue(value) {
+  setValue (value) {
     console.log('setValue', value)
@@ -187,2 +191,2 @@ this.value = value
 
-export default Checkbox
+export default Checkbox

src/component.js

 'use strict'
 
-import init from './component/init'
-import classify from './component/classify'
+import create from './component/create'
 import events from './component/events'
 import insert from './component/insert'
 
-import create from './element/create'
-
-import bind from './module/bind'
-import merge from './module/merge'
 import emitter from './module/emitter'
@@ -17,4 +12,3 @@
   class: 'component',
-  tag: 'div',
-  modules: [emitter, events, bind, insert]
+  tag: 'span'
 }
@@ -45,12 +39,17 @@
   constructor (options) {
-    this.options = merge(defaults, options || {})
+    this.init(options)
+    this.build()
 
-    init(this)
-    this.build(this.options)
+    return this
+  }
 
-    if (this.options.bind) {
-      this.bind(this.options.bind)
-    }
+  /**
+   * init method
+   * @param  {Object} Options
+   * @return {Object} Instance
+   */
+  init (options) {
+    this.options = Object.assign({}, defaults, options || {})
 
-    this.emit('ready')
+    Object.assign(this, emitter, events, insert)
 
@@ -64,14 +63,9 @@ return this
    */
-  build (options) {
-    var tag = options.tag || 'div'
-    this.wrapper = create(tag, options.css)
+  build () {
+    this.root = create(this.options)
 
-    classify(this.wrapper, options)
-
-    if (options.container) {
-      this.insert(options.container)
+    if (this.options.container) {
+      this.insert(this.options.container)
     }
 
-    this.emit('built', this.wrapper)
-
     return this
@@ -78,0 +72,0 @@ }

src/component/classify.js

@@ -11,3 +11,3 @@ import css from '../module/css'
  * Init component class
- * @param  {element} element The component wrapper element
+ * @param  {element} element The component root element
  * @param  {object} options component class options
@@ -38,3 +38,3 @@ * @return {Instance} The Class instance
   if (options.name) {
-    // console.log('name', options.name);
+    // console.log('name', options.name)
     element.dataset.name = options.name
@@ -53,4 +53,8 @@ }
   }
+
+  if (options.theme) {
+    element.classList.add(options.theme + '-theme')
+  }
 }
 
 export default classify

src/component/control.js

@@ -5,2 +5,7 @@ import create from '../element/create'
 
+const KEYCODE = {
+  ENTER: 13,
+  SPACE: 32
+}
+
 var control = {
@@ -14,2 +19,4 @@ /**
 
+    this.focus()
+
     if (this.checked) {
@@ -30,3 +37,3 @@ this.check(false)
     if (checked) {
-      css.add(this.wrapper, 'is-checked')
+      css.add(this.root, 'is-checked')
       this.element.input.checked = true
@@ -36,3 +43,3 @@ this.checked = true
     } else {
-      css.remove(this.wrapper, 'is-checked')
+      css.remove(this.root, 'is-checked')
       this.element.input.checked = false
@@ -60,3 +67,3 @@ this.checked = false
 
-    insert(this.element.label, this.wrapper)
+    insert(this.element.label, this.root)
   },
@@ -80,3 +87,3 @@
     this.element.icon = create('i', this.options.class + '-icon')
-    insert(this.element.icon, this.wrapper, position)
+    insert(this.element.icon, this.root, position)
 
@@ -102,3 +109,3 @@ this.element.icon.innerHTML = icon
 
-    insert(this.element.error, this.wrapper, 'bottom')
+    insert(this.element.error, this.root, 'bottom')
   },
@@ -110,3 +117,3 @@
     this.element.input.setAttribute('disabled', 'disabled')
-    css.add(this.wrapper, 'is-disabled')
+    css.add(this.root, 'is-disabled')
     return this
@@ -119,6 +126,17 @@ },
     this.element.input.removeAttribute('disabled')
-    css.remove(this.wrapper, 'is-disabled')
+    css.remove(this.root, 'is-disabled')
     return this
   },
 
+  keydown (e) {
+    if (e.altKey) return
+
+    switch (e.keyCode) {
+      case KEYCODE.ENTER:
+      case KEYCODE.SPACE:
+        e.preventDefault()
+        this.toggle(e)
+    }
+  },
+
   /**
@@ -131,3 +149,3 @@ * [_onInputFocus description]
 
-    css.add(this.wrapper, 'is-focused')
+    css.add(this.root, 'is-focused')
     if (this.element.input !== document.activeElement) { this.element.input.focus() }
@@ -142,3 +160,3 @@ return this
   blur () {
-    css.remove(this.wrapper, 'is-focused')
+    css.remove(this.root, 'is-focused')
     return this
@@ -145,0 +163,0 @@ }

src/component/events.js

@@ -9,3 +9,3 @@ export default {
   addEvent (event, fn) {
-    var element = this.wrapper
+    var element = this.root
     // avoid memory overhead of new anonymous functions for every event handler that's installed
@@ -49,3 +49,3 @@ // by using local functions
   removeEvent (event, fn) {
-    var element = this.wrapper
+    var element = this.root
 
@@ -52,0 +52,0 @@ if (element.removeEventListener) {

src/component/insert.js

@@ -21,3 +21,3 @@ 'use strict'
   insert (container, context) {
-    var element = this.wrapper
+    var element = this.root
 
@@ -39,4 +39,4 @@ this.insertElement(element, container, context)
   insertElement (element, container, context) {
-    if (container && container.wrapper) {
-      container = container.wrapper
+    if (container && container.root) {
+      container = container.root
     }
@@ -43,0 +43,0 @@

src/container.js

 'use strict'
 
-import merge from './module/merge'
-import create from './element/create'
-import css from './module/css'
+import create from './component/create'
 import insert from './element/insert'
@@ -12,7 +10,3 @@ import emitter from './module/emitter'
   class: 'container',
-  type: null,
-  element: {
-    tag: 'span',
-    type: null
-  }
+  tag: 'div'
 }
@@ -40,6 +34,2 @@
 
-    if (this.options.bind) {
-      this.bind(this.options.bind)
-    }
-
     return this
@@ -54,13 +44,5 @@ }
   init (options) {
-    // init options and merge options to defaults
-    options = options || {}
-    this.options = merge(defaults, options || {})
-
-    this.options.name = this.options.name
-
-    // implement modules
+    this.options = Object.assign({}, defaults, options || {})
     Object.assign(this, emitter)
 
-    // this.controller = controller;
-
     return this
@@ -73,18 +55,7 @@ }
    */
-  build (props) {
-    var tag = this.options.tag || 'div'
+  build () {
+    this.root = create(this.options)
 
-    this.wrapper = create(tag, this.options.prefix + '-' + this.options.class)
-
-    if (this.options.name) {
-      css.add(this.wrapper, this.options.class + '-' + this.options.name)
-    }
-
-    if (this.options.css) {
-      css.add(this.wrapper, this.options.css)
-    }
-
     if (this.options.container) {
-      // console.log(this.options.name, opts.container);
-      insert(this.wrapper, this.options.container)
+      insert(this.root, this.options.container)
     }
@@ -96,3 +67,3 @@
   insert (container, context) {
-    insert(this.wrapper, container, context)
+    insert(this.root, container, context)
     return this
@@ -99,0 +70,0 @@ }

src/dialog.js

 'use strict'
 
 // dialog related modules
-import merge from './module/merge'
 import events from './component/events'
 import emitter from './module/emitter'
 import controller from './component/controller'
-import bind from './module/bind'
+import attach from './module/attach'
 import insert from './component/insert'
@@ -18,5 +17,5 @@ import event from './element/event.js'
   class: 'dialog',
-  bind: {
-    'wrapper.click': 'close'
-  }
+  events: [
+    ['root.click', 'close']
+  ]
 }
@@ -30,13 +29,9 @@
    */
-  constructor(options) {
-    // init and build
+  constructor (options) {
     this.init(options)
     this.build()
+    this.attach()
 
-    if (this.options.bind) {
-      this.bind(this.options.bind)
-    }
+    this.root.style.display = 'none'
 
-    this.wrapper.style.display = 'none'
-
     return this
@@ -50,9 +45,8 @@ }
    */
-  init(options) {
-    // init options and merge options to defaults
-    options = options || {}
-    this.options = merge(defaults, options || {})
+  init (options) {
+    // init options
+    this.options = Object.assign({}, defaults, options || {})
 
     // implement modules
-    Object.assign(this, events, emitter, bind, insert)
+    Object.assign(this, events, emitter, attach, insert)
 
@@ -68,10 +62,9 @@ this.controller = controller
    */
-  build() {
-    var tag = this.options.tag || 'div'
-    // this.wrapper = new Element(this.options.element);
-    this.wrapper = document.createElement(tag)
+  build () {
+    // this.root = new Element(this.options.element);
+    this.root = document.createElement(tag)
 
-    css.add(this.wrapper, 'material-dialog')
+    css.add(this.root, 'material-dialog')
     if (this.options.css) {
-      css.add(this.wrapper, this.options.css)
+      css.add(this.root, this.options.css)
     }
@@ -83,28 +76,28 @@
 
-    this.insertElement(this.surface, this.wrapper)
+    this.insertElement(this.surface, this.root)
 
-    this.options.layout.wrapper = this.surface
-    this.layout = new Layout(this.options.layout)
+    this.options.layout.root = this.surface
+    this.layout = new Layout(this.options.layout, this.surface)
 
-    event.add(this.surface, 'click', function(ev) {
+    event.add(this.surface, 'click', function (ev) {
       ev.stopPropagation()
     })
 
-    // this.wrapper = element.createElement(tag);
+    // this.root = element.createElement(tag);
   }
 
-  close() {
-    css.add(this.wrapper, 'dialog-closing')
+  close () {
+    css.add(this.root, 'dialog-closing')
 
     var delayMillis = 200 // 1 second
     setTimeout(() => {
-      this.wrapper.style.display = 'none'
-      css.remove(this.wrapper, 'dialog-closing')
-      css.remove(this.wrapper, 'dialog-show')
+      this.root.style.display = 'none'
+      css.remove(this.root, 'dialog-closing')
+      css.remove(this.root, 'dialog-show')
     }, delayMillis)
   }
 
-  show() {
-    this.wrapper.style.display = 'flex'
-    // css.add(this.wrapper, 'dialog-showing');
+  show () {
+    this.root.style.display = 'flex'
+    // css.add(this.root, 'dialog-showing');
 
@@ -114,4 +107,4 @@ var delayMillis = 100 // 1 second
     setTimeout(() => {
-      css.add(this.wrapper, 'dialog-show')
-      // css.remove(this.wrapper, 'dialog-showing');
+      css.add(this.root, 'dialog-show')
+      // css.remove(this.root, 'dialog-showing');
     }, delayMillis)
@@ -121,2 +114,2 @@ }
 
-export default Dialog
+export default Dialog

src/divider.js

 'use strict'
 
-import merge from './module/merge'
+import create from './component/create'
 import insert from './component/insert'
-import css from './module/css'
 
@@ -14,3 +13,3 @@ var defaults = {
 /**
- * The item class is used for example as item list
+ * this class component represent an divider usually in a list
  *
@@ -27,3 +26,3 @@ * @class
    */
-  constructor(options) {
+  constructor (options) {
     this.init(options)
@@ -40,6 +39,4 @@ this.build()
    */
-  init(options) {
-    options = options || {}
-    // merge options
-    this.options = merge(defaults, options || {})
+  init (options) {
+    this.options = Object.assign({}, defaults, options || {})
 
@@ -53,17 +50,7 @@ Object.assign(this, insert)
    */
-  build(options) {
-    options = options || this.options
+  build () {
+    this.root = create(this.options)
 
-    // define main tag
-
-    this.wrapper = document.createElement(this.options.tag)
-
-    css.add(this.wrapper, this.options.prefix + '-' + this.options.class)
-
-    if (options.type) {
-      css.add(this.wrapper, this.options.class + '-' + options.type)
-    }
-
     if (this.options.text) {
-      this.wrapper.textContent = this.options.text
+      this.root.textContent = this.options.text
     }
@@ -77,2 +64,2 @@
 
-export default Divider
+export default Divider

src/drawer.js

@@ -9,3 +9,2 @@ 'use strict'
 import create from './element/create'
-import merge from './module/merge'
 import emitter from './module/emitter'
@@ -39,7 +38,7 @@
   constructor (options) {
-    this.options = merge(defaults, options || {})
+    this.options = Object.assign({}, defaults, options || {})
 
     init(this)
 
-    this.build(this.options)
+    this.build()
 
@@ -55,18 +54,18 @@ this.emit('ready')
    */
-  build (options) {
-    this.wrapper = create('aside')
+  build () {
+    this.root = create('aside')
 
-    classify(this.wrapper, options)
+    classify(this.root, this.options)
 
-    if (options.position) { css.add(this.wrapper, 'position-' + options.position) }
+    if (this.options.position) { css.add(this.root, 'position-' + this.options.position) }
 
-    if (options.size) {
-      if (options.position === 'top' || options.position === 'bottom') {
-        this.wrapper.style = 'height: ' + options.size + 'px;'
+    if (this.options.size) {
+      if (this.options.position === 'top' || this.options.position === 'bottom') {
+        this.root.style = 'height: ' + this.options.size + 'px;'
       } else {
-        this.wrapper.style = 'width: ' + options.size + 'px;'
+        this.root.style = 'width: ' + this.options.size + 'px;'
       }
     }
 
-    if (options.container) { insert(this.wrapper, options.container) }
+    if (this.options.container) { insert(this.root, this.options.container) }
 
@@ -77,3 +76,3 @@ if (!this.options.state) {
 
-    this.emit('built', this.wrapper)
+    this.emit('built', this.root)
 
@@ -102,3 +101,3 @@ return this
   close () {
-    css.remove(this.wrapper, 'show')
+    css.remove(this.root, 'show')
     css.remove(this.underlay, 'show')
@@ -120,3 +119,3 @@ this.state = 'closed'
 
-    insert(this.underlay, this.wrapper.parentNode, 'top')
+    insert(this.underlay, this.root.parentNode, 'top')
     this.underlay.addEventListener('click', (e) => {
@@ -129,3 +128,3 @@ this.close()
 
-    css.add(this.wrapper, 'show')
+    css.add(this.root, 'show')
     this.state = 'opened'
@@ -144,3 +143,3 @@ this.emit(this.state)
   insert (container, context) {
-    insert(this.wrapper, container, context)
+    insert(this.root, container, context)
 
@@ -147,0 +146,0 @@ return this

src/element/event.js

@@ -10,3 +10,3 @@ export default {
     // check if element is a compoenent
-    element = element.wrapper || element
+    element = element.root || element
 
@@ -51,3 +51,3 @@ // avoid memory overhead of new anonymous functions for every event handler that's installed
   remove (element, event, fn) {
-    element = element.wrapper || element
+    element = element.root || element
 
@@ -54,0 +54,0 @@ if (element.removeEventListener) {

src/element/insert.js

@@ -12,7 +12,7 @@ 'use strict'
  */
-function insert(element, container, context) {
+function insert (element, container, context) {
   if (!element || !container) return
 
-  element = element.wrapper || element
-  container = container.wrapper || container
+  element = element.root || element
+  container = container.root || container
 
@@ -37,2 +37,2 @@ context = context || 'bottom'
 
-export default insert
+export default insert

src/form.js

 'use strict'
 
-import merge from './module/merge'
-import insert from './component/insert'
+import insert from './element/insert'
 import css from './module/css'
 import emitter from './module/emitter'
-import bind from './module/bind'
+import attach from './module/attach'
 import controller from './component/controller'
@@ -17,3 +16,3 @@
   tag: 'div',
-  controls: ['field', 'checkbox', 'slider', 'switch']
+  controls: ['textfield', 'checkbox', 'slider', 'switch']
 }
@@ -34,6 +33,7 @@
   constructor (options) {
-    this.options = merge(defaults, options || {})
+    this.options = Object.assign({}, defaults, options || {})
 
-    this.init(options)
+    this.init()
     this.build()
+    this.attach()
 
@@ -47,15 +47,9 @@ return this
    */
-  init (options) {
-    // initOPtions
-
+  init () {
     // init intanciate name
 
-    this.name = this.options.name
-
-    // merge options
-
     // implement module
     Object.assign(this,
       emitter,
-      bind,
+      attach,
       insert
@@ -69,3 +63,3 @@ )
     if (this.options.render) {
-      this.render = options.render
+      this.render = this.options.render
     }
@@ -85,23 +79,19 @@
 
-    this.wrapper = document.createElement(tag)
-    css.add(this.wrapper, this.options.prefix + '-' + this.options.class)
+    this.root = document.createElement(tag)
+    css.add(this.root, this.options.prefix + '-' + this.options.class)
 
-    this._initLayout(this.options.layout)
+    // complete layout options
+    this.options.root = this.root
 
+    this.layout = new Layout(this.options.layout, this.root)
+
+    this._initControls(this.layout.controls)
+
     return this
   }
 
-  /**
-   * Instanciate layout
-   * @param  {?} options [description]
-   * @return {?}         [description]
-   */
-  _initLayout (options) {
-    // complete layout options
-    options.wrapper = this.wrapper
-    options.controls = this.options.controls
+  insert (container, context) {
+    insert(this.root, container, context)
 
-    this.layout = new Layout(options)
-
-    this._initControls(this.layout.controls)
+    return this
   }
@@ -159,2 +149,3 @@
     }
+    return this
   }
@@ -161,0 +152,0 @@

src/image.js

 'use strict'
 
-import merge from './module/merge'
 import insert from './component/insert'
@@ -26,8 +25,4 @@ import css from './module/css'
    */
-  constructor(options) {
-    // console.log('text options', options);
-
-    this.options = merge(defaults, options || {})
-
-    this.init()
+  constructor (options) {
+    this.init(options)
     this.build()
@@ -43,3 +38,4 @@
    */
-  init() {
+  init (options) {
+    this.options = Object.assign({}, defaults, options || {})
     Object.assign(this, insert)
@@ -52,3 +48,3 @@ }
    */
-  build(options) {
+  build (options) {
     options = options || this.options
@@ -58,12 +54,12 @@
 
-    this.wrapper = document.createElement(tag)
+    this.root = document.createElement(tag)
 
     if (options.src) {
-      this.wrapper.setAttribute('style', 'background-image: url(' + options.src + ')')
+      this.root.setAttribute('style', 'background-image: url(' + options.src + ')')
     }
 
-    css.add(this.wrapper, this.options.prefix + '-' + this.options.class)
+    css.add(this.root, this.options.prefix + '-' + this.options.class)
 
-    if (options.css) { css.add(this.wrapper, options.css) }
-    // css.add(this.wrapper, this.options.class + '-adjust');
+    if (options.css) { css.add(this.root, options.css) }
+    // css.add(this.root, this.options.class + '-adjust');
 
@@ -80,8 +76,8 @@ if (this.options.container) {
    */
-  set(value) {
+  set (value) {
     if (value) {
-      if (this.wrapper.innerText) {
-        this.wrapper.innerText = value
+      if (this.root.innerText) {
+        this.root.innerText = value
       } else {
-        this.wrapper.textContent = value
+        this.root.textContent = value
       }
@@ -96,2 +92,2 @@
 
-export default Image
+export default Image

src/item.js

 'use strict'
 
 // import Component from './component';
-import merge from './module/merge'
+import create from './component/create'
 import insert from './component/insert'
 import css from './module/css'
-// import bind from '../module/bind';
 
@@ -12,3 +11,4 @@ var defaults = {
   class: 'item',
-  tag: {
+  type: 'default',
+  types: {
     default: 'span',
@@ -41,3 +41,3 @@ display4: 'h1',
    */
-  constructor(options) {
+  constructor (options) {
     this.init(options)
@@ -54,5 +54,5 @@ this.build()
    */
-  init(options) {
+  init (options) {
     // merge options
-    this.options = merge(defaults, options || {})
+    this.options = Object.assign({}, defaults, options || {})
 
@@ -69,20 +69,12 @@ // define class
    */
-  build(options) {
-    options = options || this.options
-
+  build () {
     // define main tag
-    var tag = options.tag[options.type] || options.tag.default
+    this.options.tag = this.options.types[this.options.type]
 
-    this.wrapper = document.createElement(tag)
+    this.root = create(this.options)
 
-    if (options.text) {
-      this.set(options.text)
+    if (this.options.text) {
+      this.set(this.options.text)
     }
 
-    css.add(this.wrapper, this.options.prefix + '-' + this.options.class)
-
-    if (options.type) {
-      css.add(this.wrapper, this.options.class + '-' + options.type)
-    }
-
     if (this.options.container) {
@@ -98,8 +90,8 @@ this.insert(this.options.container)
    */
-  set(value) {
+  set (value) {
     if (value) {
-      if (this.wrapper.innerText) {
-        this.wrapper.innerText = value
+      if (this.root.innerText) {
+        this.root.innerText = value
       } else {
-        this.wrapper.textContent = value
+        this.root.textContent = value
       }
@@ -114,2 +106,2 @@
 
-export default Item
+export default Item

src/layout.js

@@ -15,3 +15,3 @@ import { is as isObject } from './module/object'
    */
-  constructor(schema, container) {
+  constructor (schema, container) {
     this.component = this.create(schema, container)
@@ -29,3 +29,3 @@
    */
-  create(schema, container, structure, level) {
+  create (schema, container, structure, level) {
     level = level || 0
@@ -55,3 +55,3 @@ level++
 
-        if (this.isClass(schema[i])) { component = new schema[i](options) } else component = schema[i](options)
+        component = new schema[i](options)
 
@@ -63,3 +63,3 @@ if (name) {
         if (component) {
-          this.display(component.wrapper, options)
+          this.display(component.root, options)
           this.style(component, options)
@@ -70,3 +70,4 @@ }
         if (component && container) {
-          insert(component, container)
+          if (component.insert) component.insert(container)
+          else insert(component, container)
         }
@@ -81,12 +82,2 @@ } else if (Array.isArray(schema[i])) {
 
-  isClass(F) {
-    try {
-      var object = new F()
-    } catch (err) {
-      // verify err is the expected error and then
-      return false
-    }
-    return object
-  }
-
   /**
@@ -97,3 +88,3 @@ * [_initFlexDirection description]
    */
-  display(element, options) {
+  display (element, options) {
     var display = options.display
@@ -105,3 +96,3 @@ var direction = options.direction || 'horizontal'
     if (direction === 'horizontal') {
-      element.className += ' ' + 'flex-raw'
+      element.className += ' ' + 'flex-row'
     } else if (direction === 'vertical') {
@@ -117,3 +108,3 @@ element.className += ' ' + 'flex-column'
    */
-  style(component) {
+  style (component) {
     var options = component.options || {}
@@ -124,9 +115,9 @@
     if (options.flex) {
-      css.add(component.wrapper, 'flex-' + options.flex)
+      css.add(component.root, 'flex-' + options.flex)
     } else {
       var size = options.size
       if (options.size && options.width) {
-        component.wrapper.width = size + 'px'
+        component.root.width = size + 'px'
       } else if (options.size && options.height) {
-        component.wrapper.height = size + 'px'
+        component.root.height = size + 'px'
       }
@@ -136,7 +127,7 @@ }
     if (options.hide) {
-      component.wrapper.display = 'none'
+      component.root.display = 'none'
     }
 
     if (options.theme) {
-      css.add(component.wrapper, 'theme' + '-' + options.theme)
+      css.add(component.root, 'theme' + '-' + options.theme)
     }
@@ -150,7 +141,8 @@ }
    */
-  get(name) {
-    return this.component[name]
+  get (name) {
+    if (name) return this.component[name]
+    else return this.component
   }
 }
 
-export default Layout
+export default Layout

src/list.js

@@ -8,5 +8,4 @@ 'use strict'
 import insert from './element/insert'
-import merge from './module/merge'
 import css from './module/css'
-import bind from './module/bind'
+import attach from './module/attach'
 
@@ -17,7 +16,6 @@ const defaults = {
   functions: ['render', 'select'],
-  modules: [emitter, bind],
   target: '.material-item',
-  bind: {
-    'wrapper.click': 'onSelect'
-  }
+  events: [
+    ['root.click', 'handleSelect']
+  ]
 }
@@ -41,7 +39,7 @@
   constructor (options) {
-    this.options = merge(defaults, options || {})
+    this.options = Object.assign({}, defaults, options || {})
 
     this.init(this.options)
     this.build(this.options)
-    this.bind(this.options.bind)
+    this.attach(this.options.events)
 
@@ -55,8 +53,3 @@ return this
    */
-  init (options) {
-    init(this)
-
-    this.options.class = options.class
-    this.name = options.name
-
+  init () {
     this.filters = []
@@ -67,6 +60,6 @@ this.data = []
     // assign modules
-    Object.assign(this, emitter, bind)
+    Object.assign(this, emitter, attach)
 
     // init function
-    this._initFunction(options.functions)
+    this._initFunction(this.options.functions)
 
@@ -99,7 +92,7 @@ return this
 
-    this.wrapper = document.createElement(tag)
-    css.add(this.wrapper, 'material-' + this.options.class)
+    this.root = document.createElement(tag)
+    css.add(this.root, 'material-' + this.options.class)
 
     if (options.name) {
-      css.add(this.wrapper, options.class + '-' + options.name)
+      css.add(this.root, options.class + '-' + options.name)
     }
@@ -112,6 +105,6 @@
     if (this.options.container) {
-      insert(this.wrapper, this.options.container)
+      insert(this.root, this.options.container)
     }
 
-    // this.wrapper.addEventListener("click", function(e) {
+    // this.root.addEventListener("click", function(e) {
     //   // console.log("list", this, e);
@@ -129,3 +122,3 @@ //   // e.target was the clicked element
    */
-  onSelect (e) {
+  handleSelect (e) {
     // console.log('onSelect', e.target, this.options.target);
@@ -212,3 +205,3 @@ if (e.target && e.target.matches(this.options.target)) {
     var where = 'bottom'
-    insert(item.wrapper, this.wrapper, where)
+    insert(item.root, this.root, where)
 
@@ -220,4 +213,8 @@ this.items.push(item)
 
+  insert (container, context) {
+    insert(this.root, container, context)
+  }
+
   empty () {
-    this.wrapper.innerHTML = ''
+    this.root.innerHTML = ''
     this.items = []
@@ -224,0 +221,0 @@ this.item = null

src/menu.js

 'use strict'
 
-import init from './component/init'
 import classify from './component/classify'
 import css from './module/css'
 import events from './component/events'
-import insert from './component/insert'
+import insert from './element/insert'
 import offset from './element/offset'
@@ -12,4 +11,3 @@
 
-import bind from './module/bind'
-import merge from './module/merge'
+import attach from './module/attach'
 import emitter from './module/emitter'
@@ -25,3 +23,7 @@
   tag: 'div',
-  modules: [emitter, events, bind, insert]
+  modules: [emitter, events, attach, insert],
+  events: [
+    ['root.click', 'hide'],
+    ['mask.click', 'hide']
+  ]
 }
@@ -44,11 +46,7 @@
   constructor (options) {
-    this.options = merge(defaults, options || {})
-
-    init(this)
-    this.build(this.options)
+    this.init(options)
+    this.build()
     this.setup()
 
-    if (this.options.bind) {
-      this.bind(this.options.bind)
-    }
+    this.attach()
 
@@ -61,18 +59,24 @@ this.emit('ready')
   /**
+   * [init description]
+   * @return {[type]} [description]
+   */
+  init (options) {
+    this.options = Object.assign({}, defaults, options || {})
+
+    Object.assign(this, emitter, events, attach, insert)
+  }
+
+  /**
    * Build Method
    * @return {Object} This class instance
    */
-  build (options) {
-    var tag = options.tag || 'div'
-    this.wrapper = create(tag, options.css)
+  build () {
+    this.root = create(this.options.tag, this.options.css)
+    this.mask = create(this.options.tag, this.options.class + '-mask')
 
-    classify(this.wrapper, options)
+    classify(this.root, this.options)
 
-    if (options.container) {
-      this.insert(options.container)
-    }
-
     if (this.options.list) {
       this.list = new List({
-        wrapper: this.wrapper,
+        // root: this.root,
         list: this.options.list,
@@ -82,16 +86,2 @@ target: '.material-item',
         label: 'Flat',
-        render: (info) => {
-          var item
-
-          if (info.type === 'divider') {
-            item = new Divider()
-          } else {
-            item = new Item({
-              name: info.name,
-              text: info.name
-            })
-          }
-
-          return item
-        },
         select: (item) => {
@@ -101,6 +91,6 @@ this.selected = item
         }
-      })
+      }).insert(this.root)
     }
 
-    this.emit('built', this.wrapper)
+    this.emit('built', this.root)
 
@@ -110,2 +100,7 @@ return this
 
+  insert () {
+    insert(this.mask, document.body)
+    insert(this.root, document.body)
+  }
+
   setup () {
@@ -116,16 +111,29 @@ // this.subscribe('click', () => {
     // });
+    //
+    window.addEventListener('resize', () => this.position())
   }
 
   show (e) {
-    css.add(this.wrapper, this.class + '-show')
-    var offs = offset(e.target)
+    css.add(this.mask, 'mask-show')
 
-    var offsw = offset(this.wrapper)
+    if (e) this.caller = e.target
 
-    this.wrapper.style.top = offs.top + 'px'
-    this.wrapper.style.left = offs.left - offsw.width + offs.width + 'px'
+    css.add(this.root, this.options.class + '-show')
+    this.position(this.caller)
   }
+  position () {
+    if (!this.caller) return
+    var offs = offset(this.caller)
 
+    var offsw = offset(this.root)
+
+    this.root.style.top = offs.top + 'px'
+    this.root.style.left = offs.left - offsw.width + offs.width + 'px'
+    // this.root.style.right = offs.right + offs.width + offsw.width  + 'px'
+  }
+
   hide () {
-    css.remove(this.wrapper, this.class + '-show')
+    console.log('hide')
+    css.remove(this.root, this.options.class + '-show')
+    css.remove(this.mask, 'mask-show')
   }
@@ -132,0 +140,0 @@ }

src/slider.js

@@ -12,4 +12,3 @@ 'use strict'
 // import control from './control';
-import merge from './module/merge'
-import bind from './module/bind'
+import attach from './module/attach'
 import css from './module/css'
@@ -30,5 +29,5 @@ import emitter from './module/emitter'
   step: 5,
-  modules: [events, control, emitter, bind],
+  modules: [events, control, emitter, attach],
   mixins: [],
-  build: ['$wrapper.material-slider', {},
+  build: ['$root.material-slider', {},
     ['label$label.slider-label', {}],
@@ -47,6 +46,6 @@ ['input$input'],
   ],
-  bind: {
-    'element.input.focus': 'focus',
-    'element.input.blur': 'blur'
-  }
+  events: [
+    ['element.input.focus', 'focus'],
+    ['element.input.blur', 'blur']
+  ]
 }
@@ -65,7 +64,7 @@
   constructor (options) {
-    this.options = merge(defaults, options || {})
+    this.options = Object.assign({}, defaults, options || {})
 
     this.init(this.options)
     this.build(this.options)
-    this.bind(this.options.bind)
+    this.attach()
 
@@ -90,10 +89,10 @@ return this
    */
-  build (options) {
-    this.element = build(options.build)
-    this.wrapper = this.element.wrapper
+  build () {
+    this.element = build(this.options.build)
+    this.root = this.element.root
 
-    classify(this.wrapper, this.options)
+    classify(this.root, this.options)
 
-    if (options.container) {
-      insert(this.wrapper, options.container)
+    if (this.options.container) {
+      insert(this.root, this.options.container)
     }
@@ -105,7 +104,7 @@
     if (this.options.type) {
-      css.add(this.wrapper, 'type-' + this.options.type)
+      css.add(this.root, 'type-' + this.options.type)
     }
 
     // init input
-    if (options.disabled) {
+    if (this.options.disabled) {
       this.disable(true)
@@ -115,3 +114,3 @@ }
     // if (this.options.name) {
-    //   this.wrapper.dataset.name = name
+    //   this.root.dataset.name = name
     //   this.element.input.name = name
@@ -124,3 +123,3 @@ // }
 
-    options.label = options.label || options.text
+    this.options.label = this.options.label || this.options.text
 
@@ -296,3 +295,3 @@ this.initTrack()
   insert (container, context) {
-    insert(this.wrapper, container, context)
+    insert(this.root, container, context)
   }
@@ -299,0 +298,0 @@

src/switch.js

 'use strict'
 
 // import control from '../control';
-import init from './component/init'
 import control from './component/control'
-import merge from './module/merge'
 import build from './element/build'
 import emitter from './module/emitter'
 import insert from './component/insert'
-import bind from './module/bind'
+import attach from './module/attach'
 import css from './module/css'
@@ -23,4 +21,3 @@ import classify from './component/classify'
   disabled: false,
-  modules: [emitter, control, bind, insert],
-  build: ['$wrapper.material-switch', {},
+  build: ['$root.material-switch', {},
     ['input$input$switch-input', { type: 'checkbox' }],
@@ -34,10 +31,11 @@ ['span$control.switch-control', {},
   ],
-  bind: {
-    'element.control.click': ['toggle', 'focus'],
-    'element.label.click': ['toggle', 'focus'],
+  events: [
+    ['element.control.click', 'toggle'],
+    ['element.label.click', 'toggle'],
     // for accessibility purpose
-    'element.input.click': 'toggle',
-    'element.input.focus': 'focus',
-    'element.input.blur': 'blur'
-  }
+    ['element.input.click', 'toggle'],
+    ['element.input.focus', 'focus'],
+    ['element.input.blur', 'blur']
+    // ['element.input.keydown', 'keydown']
+  ]
 }
@@ -58,9 +56,6 @@
   constructor (options) {
-    this.options = merge(defaults, options || {})
+    this.init(options)
+    this.build()
+    this.attach()
 
-    this.init(this)
-    this.build(this.options)
-
-    if (this.options.bind) { this.bind(this.options.bind) }
-
     return this
@@ -75,5 +70,4 @@ }
   init (options) {
-    init(this)
-    // init options and merge options to defaults
-    options = options || this.options
+    this.options = Object.assign({}, defaults, options || {})
+    Object.assign(this, emitter, control, attach, insert)
 
@@ -89,9 +83,9 @@ this.value = this.options.value
    */
-  build (options) {
-    this.element = build(options.build)
-    this.wrapper = this.element.wrapper
+  build () {
+    this.element = build(this.options.build)
+    this.root = this.element.root
 
-    classify(this.wrapper, options)
+    classify(this.root, this.options)
 
-    if (options.disabled) {
+    if (this.options.disabled) {
       this.disable()
@@ -104,6 +98,8 @@ }
 
-    let text = options.label || options.text || ''
+    this.element.input.setAttribute('aria-label', this.options.name)
 
+    let text = this.options.label || this.options.text || ''
+
     this.element.label.textContent = text
-
+    this.element.label.setAttribute('for', this.options.name)
     if (this.value) {
@@ -113,6 +109,4 @@ this.check()
 
-    // insert if container options is given
-    if (options.container) {
-      // console.log(this.name, opts.container);
-      this.insert(options.container)
+    if (this.options.container) {
+      this.insert(this.options.container)
     }
@@ -169,48 +163,4 @@ }
   }
-
-  /**
-   * [toggle description]
-   * @return {Object} The class instance
-   */
-  toggle () {
-    if (this.disabled) return this
-
-    if (this.value) {
-      this.unCheck(true)
-    } else {
-      this.check()
-    }
-
-    return this
-  }
-
-  /**
-   * setTrue
-   */
-  check () {
-    if (this.disabled) return this
-
-    this.value = true
-    css.add(this.wrapper, 'is-checked')
-    this.element.input.checked = true
-    this.emit('change', this.value)
-
-    return this
-  }
-
-  /**
-   * setFlas
-   */
-  unCheck () {
-    if (this.disabled) return this
-
-    this.value = false
-    css.remove(this.wrapper, 'is-checked')
-    this.element.input.checked = false
-    this.emit('change', this.value)
-
-    return this
-  }
 }
 
 export default Switch

src/text.js

 'use strict'
 
-import init from './component/init'
-import merge from './module/merge'
+import create from './component/create'
 import insert from './component/insert'
-import classify from './component/classify'
-import create from './element/create'
-import css from './module/css'
 
@@ -13,4 +9,4 @@ var defaults = {
   class: 'text',
-  modules: [insert],
-  tag: {
+  type: 'default',
+  types: {
     default: 'span',
@@ -55,10 +51,14 @@ display4: 'h1',
   constructor (options) {
-    this.options = merge(defaults, options || {})
+    this.init(options)
+    this.build()
 
-    init(this)
-    this.build(this.options)
-
     return this
   }
 
+  init (options) {
+    this.options = Object.assign({}, defaults, options || {})
+
+    Object.assign(this, insert)
+  }
+
   /**
@@ -68,19 +68,13 @@ * Build function for item
    */
-  build (options) {
-    options = options || this.options
+  build () {
+    this.options.tag = this.options.types[this.options.type]
 
-    var tag = options.tag[options.type] || options.tag.default
+    this.root = create(this.options)
 
-    this.wrapper = create(tag, options.prefix + '-' + options.class)
-
-    classify(this.wrapper, this.options)
-
-    if (options.text) {
-      this.set(options.text)
+    if (this.options.text) {
+      this.set(this.options.text)
     }
 
-    if (options.type) { css.add(this.wrapper, options.class + '-' + options.type) }
-
-    if (options.container) {
-      this.insert(options.container)
+    if (this.options.container) {
+      this.insert(this.options.container)
     }
@@ -97,6 +91,6 @@ return this
     if (value) {
-      if (this.wrapper.innerText) {
-        this.wrapper.innerText = value
+      if (this.root.innerText) {
+        this.root.innerText = value
       } else {
-        this.wrapper.textContent = value
+        this.root.textContent = value
       }
@@ -103,0 +97,0 @@

src/textfield.js

 'use strict'
 
-import init from './component/init'
 import create from './element/create'
-import insert from './component/insert'
+import insert from './element/insert'
 
 import emitter from './module/emitter'
 import css from './module/css'
-import merge from './module/merge'
-import bind from './module/bind'
+import attach from './module/attach'
 
@@ -17,19 +15,17 @@ var defaults = {
   tag: 'div',
-  modules: [emitter, bind, insert],
-  bind: {
+  events: [
     // 'change': '_onChange',
-    'input.focus': '_onInputFocus',
-    'input.blur': '_onInputBlur',
-    // 'input.keypress': '_onInputKeyPress',
-    'input.keyup': '_onInputKeyPress',
-    'input.change': '_onChange'
-    // 'input.keydown': '_onInputKeyPress'
+    ['input.focus', '_handleInputFocus'],
+    ['input.blur', '_handleInputBlur'],
+    // ['input.keypress', '_handleInputKeyPress',
+    ['input.keyup', '_handleInputKeyPress']
+    // ['input.change', '_onChange']
+    // 'input.keydown': '_handleInputKeyPress'
 
-  }
+  ]
 }
 
 /**
- * Field class
+ * Textfield class
  * @class
- * @extends {Control}
  */
@@ -42,12 +38,9 @@ class Textfield {
    */
-  constructor(options) {
-    this.options = merge(defaults, options || {})
+  constructor (options) {
+    this.options = Object.assign({}, defaults, options || {})
 
-    this.init(options)
+    this.init()
     this.build()
+    this.attach()
 
-    if (this.options.bind) {
-      this.bind(this.options.bind)
-    }
-
     return this
@@ -61,5 +54,4 @@ }
    */
-  init(options) {
-    init(this)
-    // init options and merge options to defaults
+  init () {
+    Object.assign(this, emitter, attach)
 
@@ -75,7 +67,6 @@ this.value = this.options.value
    */
-  build(options) {
-    options = options || this.options
+  build () {
     // create a new div as input element
     var tag = this.options.tag || 'div'
-    this.wrapper = create(tag, options.prefix + '-' + options.class)
+    this.root = create(tag, this.options.prefix + '-' + this.options.class)
 
@@ -87,15 +78,15 @@ this.buildLabel()
     if (this.disabled) {
-      css.add(this.wrapper, 'is-disabled')
+      css.add(this.root, 'is-disabled')
     }
 
-    // insert if container options is given
-    if (options.container) {
+    // insert if container this.options is given
+    if (this.options.container) {
       // console.log(this.name, opts.container);
-      this.insert(options.container)
+      insert(this.root, this.options.container)
     }
   }
 
-  buildLabel() {
+  buildLabel () {
     this.label = create('label', this.options.class + '-label')
-    this.insertElement(this.label, this.wrapper)
+    insert(this.label, this.root)
 
@@ -111,9 +102,9 @@ if (this.options.label !== false) {
    */
-  buildInput() {
+  buildInput () {
     this.input = create('input', this.options.class + '-input')
     this.input.setAttribute('type', 'text')
-    this.insertElement(this.input, this.wrapper)
+    insert(this.input, this.root)
 
     if (!this.options.value) {
-      css.add(this.wrapper, 'is-empty')
+      css.add(this.root, 'is-empty')
     }
@@ -133,5 +124,5 @@
    */
-  buildUnderline() {
+  buildUnderline () {
     this.underline = create('span', this.options.class + '-underline')
-    this.insertElement(this.underline, this.wrapper)
+    insert(this.underline, this.root)
   }
@@ -144,3 +135,3 @@
    */
-  set(prop, value) {
+  set (prop, value) {
     switch (prop) {
@@ -164,3 +155,3 @@ case 'value':
    */
-  setLabel(label) {
+  setLabel (label) {
     label = label || this.options.label
@@ -185,3 +176,3 @@ var text
    */
-  get(prop) {
+  get (prop) {
     var value
@@ -207,3 +198,3 @@
    */
-  getValue() {
+  getValue () {
     // console.log('getValue', this);
@@ -217,9 +208,9 @@ return this.input.value
    */
-  setValue(value) {
+  setValue (value) {
     this.input.value = value
 
     if (value) {
-      css.remove(this.wrapper, 'is-empty')
+      css.remove(this.root, 'is-empty')
     } else {
-      css.add(this.wrapper, 'is-empty')
+      css.add(this.root, 'is-empty')
     }
@@ -234,9 +225,9 @@
    */
-  setState(state) {
+  setState (state) {
     if (this.state) {
-      css.remove(this.wrapper, 'state-' + this.state)
+      css.remove(this.root, 'state-' + this.state)
     }
 
     if (state) {
-      css.add(this.wrapper, 'state-' + state)
+      css.add(this.root, 'state-' + state)
     }
@@ -254,3 +245,3 @@
    */
-  _initValue() {
+  _initValue () {
     var opts = this.options
@@ -268,4 +259,4 @@
    */
-  _onInputFocus(e) {
-    // console.log('_onInputFocus');
+  _handleInputFocus (e) {
+    // console.log('_handleInputFocus');
     if (this.readonly) return
@@ -279,4 +270,4 @@ this.setState('focus')
    */
-  _onInputBlur() {
-    // console.log('_onInputBlur', this.readonly);
+  _handleInputBlur () {
+    // console.log('_handleInputBlur', this.readonly);
     if (this.readonly) return
@@ -290,9 +281,9 @@ this.setState(null)
    */
-  _onInputKeyPress(e) {
-    // console.log('_onInputKeyPress', e);
+  _handleInputKeyPress (e) {
+    // console.log('_handleInputKeyPress', e);
 
     if (this.get('value') === '') {
-      css.add(this.wrapper, 'is-empty')
+      css.add(this.root, 'is-empty')
     } else {
-      css.remove(this.wrapper, 'is-empty')
+      css.remove(this.root, 'is-empty')
     }
@@ -307,3 +298,3 @@
    */
-  setError(error) {
+  setError (error) {
     if (error) {
@@ -317,4 +308,8 @@ this.addClass('field-error')
   }
+
+  insert (container, context) {
+    insert(this.root, container, context)
+  }
 }
 
-export default Textfield
+export default Textfield

src/toolbar.js

 'use strict'
 
-import init from './component/init'
-import classify from './component/classify'
-import events from './component/events'
+import create from './component/create'
 import insert from './component/insert'
 
-import create from './element/create'
-
-import bind from './module/bind'
-import merge from './module/merge'
-import emitter from './module/emitter'
-
 const defaults = {
   prefix: 'material',
   class: 'toolbar',
-  tag: 'div',
-  modules: [emitter, events, bind, insert]
+  tag: 'div'
 }
 
-/**
- * Base class for all ui components
- * @class
- * @param {Object} options - The component options
- * @return {Object} The class Instance
- */
-
-/**
- * Class representing a UI Container. Can add components.
- *
- * @extends Component
- * @return {parent} The class instance
- * @example new Container({
- *   container: document.body
- * });
- */
-class Component {
+class Toolbar {
   /**
@@ -44,16 +19,13 @@ * Constructor
   constructor (options) {
-    this.options = merge(defaults, options || {})
+    this.init(options)
+    this.build()
 
-    init(this)
-    this.build(this.options)
-
-    if (this.options.bind) {
-      this.bind(this.options.bind)
-    }
-
-    this.emit('ready')
-
     return this
   }
 
+  init (options) {
+    this.options = Object.assign({}, defaults, options || {})
+    Object.assign(this, insert)
+  }
+
   /**
@@ -63,14 +35,9 @@ * Build Method
    */
-  build (options) {
-    var tag = options.tag || 'div'
-    this.wrapper = create(tag, options.css)
+  build () {
+    this.root = create(this.options)
 
-    classify(this.wrapper, options)
-
-    if (options.container) {
-      this.insert(options.container)
+    if (this.options.container) {
+      this.insert(this.options.container)
     }
 
-    this.emit('built', this.wrapper)
-
     return this
@@ -80,2 +47,2 @@ }
 
-export default Component
+export default Toolbar

src/tree.js

 'use strict'
 
 import insert from './component/insert'
-import merge from './module/merge'
 import css from './module/css'
-import bind from './module/bind'
+import attach from './module/attach'
 
@@ -15,5 +14,5 @@ import emitter from './module/emitter'
   target: '.item-tree',
-  bind: {
-    'wrapper.click': 'onSelect'
-  }
+  events: [
+    ['root.click', 'onSelect']
+  ]
 }
@@ -37,11 +36,8 @@
   constructor (options) {
-    // boot sequence
-    this.init(options)
+    this.options = Object.assign({}, defaults, options || {})
+
+    this.init()
     this.build()
+    this.attach()
 
-    if (this.options.bind) {
-      // console.log('vind', this.options.bind);
-      this.bind(this.options.bind)
-    }
-
     return this
@@ -54,5 +50,4 @@ }
    */
-  init (options) {
+  init () {
     // init this
-    this.options = merge(defaults, options || {})
 
@@ -96,4 +91,4 @@ this.name = this.options.name
 
-    this.wrapper = document.createElement(tag)
-    css.add(this.wrapper, this.options.prefix + '-' + this.options.class)
+    this.root = document.createElement(tag)
+    css.add(this.root, this.options.prefix + '-' + this.options.class)
 
@@ -108,3 +103,3 @@ if (this.options.container) {
 
-    // this.wrapper.addEventListener("click", function(e) {
+    // this.root.addEventListener("click", function(e) {
     //   // console.log("list", this, e);
@@ -118,3 +113,3 @@ //   // e.target was the clicked element
   buildTree (data) {
-    this.wrapper.innerHTML = ''
+    this.root.innerHTML = ''
 
@@ -146,3 +141,3 @@ var tree = ''
 
-    this.wrapper.innerHTML = tree
+    this.root.innerHTML = tree
 
@@ -229,4 +224,4 @@ return tree
     var where = 'bottom'
-    this.insertElement(item.wrapper, this.wrapper, where)
-    // item.insert(this.wrapper, where);
+    this.insertElement(item.root, this.root, where)
+    // item.insert(this.root, where);
     this.items.push(item)
@@ -239,3 +234,3 @@
     console.log('empty')
-    this.wrapper.innerHTML = ''
+    this.root.innerHTML = ''
     this.items = []
@@ -242,0 +237,0 @@ this.item = null

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

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

403181

increased by116.11%

Number of package files

118

increased by28.26%

Lines of code

6546

increased by35.89%

Worsened metrics

Dev dependency count

22

increased byInfinity%

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes