material 0.7.5 → 0.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
   "main": "index.js",
   "type": "module",

package/src/button.js

@@ -46,18 +46,12 @@ class Button extends EventEmitter {
   setup () {
     this.setAttributes()
     this.styleAttributes()
-    this.buildElements()
 
     if (this.options.text) {
       this.element.innerHTML = this.element.innerHTML + this.options.text
     }
   }
 
-  buildElements () {
-    this.buildIcon()
-    this.buildLabel()
-  }
-
   setAttributes () {
     const { type, name, value, title, text, label, tooltip, data, case: caseOption } = this.options
 
@@ -80,26 +74,6 @@ class Button extends EventEmitter {
     if (bold) this.element.classList.add('bold')
   }
 
-  buildLabel () {
-    if (!this.options.label) return
-
-    this.label = document.createElement('label')
-    this.label.classList.add('label')
-    this.label.innerHTML = this.options.label
-
-    this.element.appendChild(this.label)
-  }
-
-  buildIcon () {
-    if (!this.options.icon) return
-
-    this.icon = document.createElement('i')
-    this.icon.classList.add('icon')
-    this.icon.innerHTML = this.options.icon
-
-    this.element.appendChild(this.icon)
-  }
-
   set (prop, value) {
     // console.log('set', this.element, prop, value)
     switch (prop) {
@@ -107,15 +81,15 @@ class Button extends EventEmitter {
         this.element.value = value
         break
       case 'label':
-        if (!this.label) this.buildLabel()
-        this.label.innerHTML = value
+        if (!this.ui.label) this.buildLabel()
+        this.ui.label.innerHTML = value
         break
       case 'text':
         this.element.innerHTML = value
         break
       case 'icon':
-        if (this.icon) {
-          this.icon.innerHTML = value
+        if (this.ui.icon) {
+          this.ui.icon.innerHTML = value
         }
         break
       case 'enable':
@@ -133,13 +107,13 @@ class Button extends EventEmitter {
   }
 
   setLabel (value) {
-    if (this.label) {
-      this.label.innerHTML = value
+    if (this.ui.label) {
+      this.ui.label.innerHTML = value
     }
   }
 
   setText (value) {
-    if (this.label) {
+    if (this.ui.label) {
       this.setLabel(value)
     } else {
       this.element.innerHTML = value
@@ -173,6 +147,16 @@ class Button extends EventEmitter {
     this.emit('click', ev)
   }
 
+  select (select) {
+    if (select === null) {
+      this.element.classList.remove('selected')
+      this.selected = null
+    } else {
+      this.element.classList.add('selected')
+      this.selected = true
+    }
+  }
+
   mousedown (ev) {
     this.element.classList.add('pushed')
   }

package/src/file.js

@@ -13,7 +13,6 @@ class File {
   constructor (options) {
     this.init(options)
     this.build()
-    this.buildLabel()
     this.buildInput()
     this.attach()
   }
@@ -23,15 +22,6 @@ class File {
     Object.assign(this, build)
   }
 
-  buildLabel () {
-    if (this.options.label) {
-      this.label = document.createElement('label')
-      this.label.classList.add('label')
-      this.label.innerHTML = this.options.label
-      this.element.appendChild(this.label)
-    }
-  }
-
   buildInput () {
     this.field = document.createElement('div')
     this.field.classList.add('field')

package/src/item.js

@@ -1,93 +1,45 @@
-import Layout from './layout'
+import build from './module/build'
 
-import create from './mixin/create'
-import insert from './mixin/insert'
-
-const defaults = {
-  prefix: 'material',
-  class: 'item',
-  type: 'default',
-  tag: 'li',
-  types: {
-    default: 'span',
-    display4: 'h1',
-    display3: 'h1',
-    display2: 'h1',
-    display1: 'h1',
-    headline: 'h1',
-    title: 'h2',
-    subheading2: 'h3',
-    subheading1: 'h4',
-    body: 'p',
-    body2: 'aside',
-    caption: 'span'
+class Item {
+  static defaults = {
+    prefix: 'material',
+    class: 'item',
+    type: 'default',
+    tag: 'span',
+    types: {
+      default: 'span',
+      display4: 'h1',
+      display3: 'h1',
+      display2: 'h1',
+      display1: 'h1',
+      headline: 'h1',
+      title: 'h2',
+      subheading2: 'h3',
+      subheading1: 'h4',
+      body: 'p',
+      body2: 'aside',
+      caption: 'span'
+    }
   }
-}
 
-/**
- * The class represents an item ie for list
- *
- * @class
- * @return {Object} The class instance
- * @example new Item(object);
- */
-class Item {
-  /**
-   * init
-   * @return {Object} The class options
-   */
   constructor (options) {
     this.init(options)
     this.build()
+    this.setup()
+  }
 
-    return this
+  setup () {
+    if (this.options.text) this.set(this.options.text)
+    if (this.options.name) this.element.setAttribute('name', this.options.name)
   }
 
-  /**
-   * [init description]
-   * @param  {?} options [description]
-   * @return {?}         [description]
-   */
   init (options) {
-    // merge options
-    this.options = Object.assign({}, defaults, options || {})
-
-    // define class
-
-    // assign modules
-    Object.assign(this, insert)
-  }
+    this.options = Object.assign({}, Item.defaults, options || {})
+    Object.assign(this, build)
 
-  /**
-   * Build function for item
-   * @return {Object} This class instance
-   */
-  build () {
-    // define main tag
     this.options.tag = this.options.tag || this.options.types[this.options.type]
-
-    this.options.tag = this.options.tag
-
-    this.element = create(this.options)
-
-    if (this.options.text) {
-      this.set(this.options.text)
-    }
-
-    if (this.options.layout) {
-      this.layout = new Layout(this.options.layout, this.element)
-    } else {
-      if (this.options.container) {
-        this.insert(this.options.container)
-      }
-    }
   }
 
-  /**
-   * Get or set text value of the element
-   * @param {string} value The text to set
-   * @returns {*}
-   */
   set (value) {
     if (value) {
       if (this.element.innerText) {
@@ -95,8 +47,6 @@ class Item {
       } else {
         this.element.textContent = value
       }
-
-      return this
     }
 
     return this

package/src/mixin/control.js

@@ -8,10 +8,6 @@ const KEYCODE = {
 }
 
 const control = {
-  /**
-   * [toggle description]
-   * @return {Object} The class instance
-   */
   toggle () {
     if (this.disabled) return
 
@@ -26,10 +22,6 @@ const control = {
     return this
   },
 
-  /**
-   * Set checkbox value
-   * @param {boolean} value [description]
-   */
   check (checked) {
     if (checked === true) {
       css.add(this.element, 'is-checked')
@@ -45,10 +37,6 @@ const control = {
     return this
   },
 
-  /**
-   * [initLabel description]
-   * @return {?} [description]
-   */
   label (label, container) {
     if (!label) return
 
@@ -65,11 +53,6 @@ const control = {
     insert(this.element.label, container)
   },
 
-  /**
-   * [_initIcon description]
-   * @param  {string} type
-   * @return {string}
-   */
   icon (icon, container, position) {
     if (!icon) return
 
@@ -88,10 +71,6 @@ const control = {
     this.element.icon.innerHTML = icon
   },
 
-  /**
-   * [initLabel description]
-   * @return {?} [description]
-   */
   error (error) {
     error = error || this.options.error
     if (this.options.error === null) return
@@ -137,12 +116,6 @@ const control = {
     }
   },
 
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
   get (prop) {
     switch (prop) {
       case 'name':
@@ -165,10 +138,6 @@ const control = {
     return this.element.dataset.name
   },
 
-  /**
-   * [_onInputFocus description]
-   * @return {?} [description]
-   */
   focus () {
     if (this.disabled === true) return this
 
@@ -177,10 +146,6 @@ const control = {
     return this
   },
 
-  /**
-   * [_onInputBlur description]
-   * @return {?} [description]
-   */
   blur () {
     css.remove(this.element, 'is-focused')
     return this

package/src/mixin/display.js

@@ -10,10 +10,7 @@ export default {
 
   show () {
     // console.log('show', this.visible)
-
-    // if (this.options.transition) {
-    //   this.element.style.display = 'initial'
-    // }
+    if (!this.element) return
 
     this.element.getBoundingClientRect()
 
@@ -29,11 +26,6 @@ export default {
   },
 
   hide () {
-    // console.log('hide')
-    // if (this.element.style.display === 'none') return
-    // clearTimeout(this.displayTimeout)
-    // this._display = getComputedStyle(this.element).display
-
     if (!this.element) return
 
     this.element.classList.remove('show')
@@ -43,13 +35,6 @@ export default {
       this.underlay.classList.remove('show')
     }
 
-    // if (this.options.transition) {
-    //   this.displayTimeout = setTimeout(() => {
-    //     console.log('display: none', this._display)
-    //     this.element.style.display = 'none'
-    //   }, this.options.transition)
-    // }
-
     this.emit?.('hide')
     return this
   },
@@ -65,9 +50,11 @@ export default {
 
       setTimeout(() => {
         dom.destroy(this.element)
+        if (this.underlay) dom.destroy(this.underlay)
       }, this.options.transition)
     } else {
       dom.destroy(this.element)
+      if (this.underlay) dom.destroy(this.underlay)
     }
 
     this.emit?.('destroy')

package/src/mixin/label.js

@@ -3,10 +3,6 @@ import insert from '../element/insert'
 
 const prefix = 'material'
 
-/**
- * [initLabel description]
- * @return {?} [description]
- */
 function label (root, text, options) {
   text = text || null
 

package/src/module/build.js

@@ -33,9 +33,34 @@ export default {
       this.ui = this.layout.component
     }
 
+    this.ui = this.ui || {}
+
+    if (this.options.icon) this.buildIcon()
+    if (this.options.label) this.buildLabel()
+
     if (this.options.show === true && this.show) this.show()
   },
 
+  buildLabel () {
+    if (!this.options.label) return
+
+    this.ui.label = document.createElement('label')
+    this.ui.label.classList.add('label')
+    this.ui.label.innerHTML = this.options.label
+
+    this.element.appendChild(this.ui.label)
+  },
+
+  buildIcon () {
+    if (!this.options.icon) return
+
+    this.ui.icon = document.createElement('i')
+    this.ui.icon.classList.add('icon')
+    this.ui.icon.innerHTML = this.options.icon
+
+    this.element.appendChild(this.ui.icon)
+  },
+
   appendTo (container) {
     container.appendChild(this.element)
   }

package/src/module/numabbr.js

@@ -1,4 +1,8 @@
 const numabbr = (number, decimals = 2) => {
+  if (typeof number !== 'number' || isNaN(number)) {
+    return null
+  }
+
   const factor = Math.pow(10, decimals)
   const abbrev = ['k', 'm', 'b', 't']
 
@@ -11,7 +15,7 @@ const numabbr = (number, decimals = 2) => {
       // Handle special case where we round up to the next abbreviation
       if (num === 1000 && i < abbrev.length - 1) {
         num = 1
-        i++
+        return `${num}${abbrev[i + 1]}`
       }
 
       return `${num}${abbrev[i]}`

package/src/module/observer.js

@@ -25,9 +25,9 @@ const observer = (() => {
   }
 
   const notify = function (event, ...args) {
-    if (!observer.events[event]) return this
+    if (!this.events[event]) return this
 
-    for (const { context, callback } of observer.events[event]) {
+    for (const { context, callback } of this.events[event]) {
       callback.apply(context, args)
     }
 

package/src/navigation.js

@@ -6,11 +6,15 @@ import attach from './module/attach'
 import display from './mixin/display'
 import Element from './element'
 import Button from './button'
+import Item from './item'
 
 class Navigation extends EventEmitter {
   static defaults = {
     class: 'navigation',
     tag: 'nav',
+    layout: [
+      [Element, 'body', { class: 'body' }]
+    ],
     events: [
       ['element.click', 'toggle']
     ]
@@ -28,6 +32,7 @@ class Navigation extends EventEmitter {
   init (options) {
     this.options = { ...Navigation.defaults, ...options }
     Object.assign(this, build, attach, display)
+    this.items = []
   }
 
   setup () {
@@ -38,6 +43,7 @@ class Navigation extends EventEmitter {
   }
 
   render (items) {
+    console.log('render', items)
     if (items && Array.isArray(items)) {
       for (let i = 0; i < items.length; i++) {
         this.add(items[i])
@@ -48,17 +54,18 @@ class Navigation extends EventEmitter {
   add (obj) {
     if (typeof obj !== 'object') return this
     let item
-    if (obj.type === 'divider') {
-      item = new Element({ tag: 'li', class: 'divider' })
+    if (obj.type === 'header') {
+      item = new Element({ tag: 'span', class: 'header' })
     } else if (obj.type === 'divider') {
-      item = new Element({ tag: 'li', class: 'divider' })
+      item = new Element({ tag: 'span', class: 'divider' })
     } else {
-      obj.container = this.ui.list
+      obj.container = this.ui.body
       obj.class = 'item'
-      item = new Button(obj).on('click', (ev) => {
-        // console.log('select', ev.target.name)
-        this.emit('select', ev.target.name)
-      })
+      obj.stopPropagation = true
+      obj.class = 'item'
+      item = new Item(obj)
+      console.log('item', item, this.items)
+      this.items.push(item)
     }
 
     return this

package/src/skin/material/control/snackbar.sass

@@ -55,7 +55,7 @@ $width: 500px
   .snackbars
     left: 50%
     bottom: 200px
-    margin-left: -$width / 2
+    margin-left: calc(-$width / 2)
     width: $width
     transition: 195ms bottom cubic-bezier(0.4, 0, 0.2, 1)
     &.up

package/src/snackbar.js

@@ -17,8 +17,7 @@ class Snackbar extends EventEmitter {
     close: false,
     layout: [
       [Text, 'message', { tag: 'span', class: 'message' }],
-      [Button, 'action', { class: 'action', type: 'link' }],
-      [Button, 'close', { class: 'close', type: 'action' }]
+      [Button, 'action', { class: 'action', type: 'link' }]
     ],
     events: [
       ['ui.action.click', 'action'],
@@ -72,11 +71,11 @@ class Snackbar extends EventEmitter {
     if (this.options.action) {
       this.ui.action.set(this.options.action)
       this.ui.action.element.classList.add('show')
+    } else if (this.options.close) {
+      this.ui.action.element.classList.remove('style-link')
+      this.ui.action.element.classList.add('style-action')
+      this.ui.action.element.classList.add('close')
     }
-
-    if (this.options.close) this.ui.close.element.classList.add('show')
-
-    return this
   }
 
   action () {

package/src/styles/M3/navigation/rail.sass

@@ -1,46 +1,27 @@
 .navigation.type-rail
   flex: none
+  color: rgba(255, 255, 255, .87)
   display: flex
+  overflow: hidden
   flex-direction: column
   width: 12px
-  background-color: #2D2F31
   padding-top: 56px
+  background-color: #2D2F31
   margin: 0
-  overflow: hidden
   transition: .1s linear width
-
   &.show
     width: 92px
-    .headmenu
-      display: flex
-    .bodymenu
-      display: flex
-  &.first
-    transition: none
-
-  .head
-    flex: none
-    display: none
-    flex-direction: column
-    width: 92px
-    height: 56px
-    padding: 0 0
-    margin: 0
-    .button.apps
-      height: 56px
-      width: 56px
-      padding: 16px 10px
-      margin: 0 auto
-      align-items: center
-      justify-content: center
-      transition: .3s linear opacity
+    .body
+      opacity: 1
+      transition: .1s opacity linear
   .body
-    display: none
+    opacity: 0
     flex: 1
     flex-direction: column
     width: 92px
     padding: 0 0
     margin: 0
+    transition: .1s opacity linear
     .item
       flex: none
       display: flex
@@ -50,11 +31,9 @@
       border-radius: 0
       text-align: center
       padding: 10px 0 6px
-      // border-radius: 4px
       font-size: 0.8rem
       text-transform: none
       text-align: center
-      // background-color: rgba(0, 0, 0, 0.3)
       align-items: center
       justify-content: center
       &.selected, &.selected:hover
@@ -63,7 +42,7 @@
           background-color: #004A77
           svg
             fill: #C2E8FF
-      i.icon
+      .icon
         width: 60px
         pointer-events: none
         padding: 0
@@ -75,7 +54,7 @@
         justify-content: center
         svg
           fill: rgba(255,255,255,.7)
-      label.label
+      .label
         pointer-events: none
         align-items: center
         justify-content: center
@@ -89,5 +68,5 @@
         margin: 0
       &:hover
         background-color: transaprent
-        i.icon
-          background-color: rgba(255,255,255,.05)
+        .icon
+          background-color: rgba(255,255,255,.05)

package/src/switch.js

@@ -1,13 +1,11 @@
+// base
 import EventEmitter from './mixin/emitter'
-
 // module
 import build from './module/build'
 import dataset from './module/dataset'
 import attach from './module/attach'
 import attributes from './module/attributes'
-
 // ui
-import Layout from './layout'
 import Element from './element'
 
 class Switch extends EventEmitter {
@@ -33,6 +31,7 @@ class Switch extends EventEmitter {
   }
 
   constructor (options) {
+    // console.log('switch')
     super()
 
     this.init(options)
@@ -51,9 +50,6 @@ class Switch extends EventEmitter {
   setup () {
     this.styleAttributes()
 
-    this.buildIcon()
-    this.buildLabel()
-
     if (this.options.data) {
       dataset(this.element, this.options.data)
     }
@@ -80,31 +76,6 @@ class Switch extends EventEmitter {
     }
   }
 
-  buildLabel () {
-    // console.log('buildLabel', this.options.label)
-    if (!this.options.label) return
-
-    this.ui.label = document.createElement('label')
-    this.ui.label.classList.add('label')
-    this.ui.label.innerHTML = this.options.label
-
-    if (this.options.name) {
-      this.ui.label.setAttribute('for', this.options.name)
-    }
-
-    this.element.insertBefore(this.ui.label, this.ui.input)
-  }
-
-  buildIcon () {
-    if (!this.options.icon) return
-
-    this.ui.icon = document.createElement('i')
-    this.ui.icon.classList.add('icon')
-    this.ui.icon.innerHTML = this.options.icon
-
-    this.element.insertBefore(this.ui.icon, this.ui.input)
-  }
-
   styleAttributes () {
     if (this.options.style) {
       this.element.classList.add('style-' + this.options.style)
@@ -123,12 +94,6 @@ class Switch extends EventEmitter {
     }
   }
 
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
   set (prop, value, silent) {
     switch (prop) {
       case 'value':

package/src/text.js

@@ -43,6 +43,14 @@ class Text {
   setText (text) {
     this.element.innerHTML = text
   }
+
+  get () {
+    if (this.element.innerHTML) {
+      return this.element.innerHTML
+    } else {
+      return ''
+    }
+  }
 }
 
 export default Text