material 0.7.6 → 0.7.8

package/package.json

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

package/src/badge.js

@@ -1,4 +1,7 @@
 import build from './module/build'
+import display from './mixin/display'
+
+const isStringNumber = (str) => !isNaN(parseFloat(str)) && isFinite(str)
 
 class Badge {
   static defaults = {
@@ -12,15 +15,29 @@ class Badge {
 
   init (options) {
     this.options = Object.assign({}, Badge.defaults, options || {})
-    Object.assign(this, build)
+    Object.assign(this, build, display)
   }
 
   set (text) {
-    if (text) {
-      this.element.innerHTML = text
-    } else {
-      this.element.innerHTML = ''
+    this.element.innerHTML = text || ''
+  }
+
+  get () {
+    return this.element.innerHTML
+  }
+
+  inc (value) {
+    // console.log('inc', value)
+    let actual = this.element.innerHTML
+
+    if (actual === '') actual = '0'
+
+    if (isStringNumber(value) && isStringNumber(actual)) {
+      actual = (parseInt(value, 10) + parseInt(actual, 10)).toString()
     }
+
+    this.element.innerHTML = actual
+    this.show()
   }
 }
 

package/src/button.js

@@ -147,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/form/build.js

@@ -24,6 +24,8 @@ export default {
 
     this.buildLayout()
 
+    // console.log('optioins container', this.options)
+
     if (this.options.container) {
       this.options.container.appendChild(this.element)
     }

package/src/mixin/display.js

@@ -50,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/module/build.js

@@ -35,8 +35,8 @@ export default {
 
     this.ui = this.ui || {}
 
-    if (this.options.label) this.buildLabel()
     if (this.options.icon) this.buildIcon()
+    if (this.options.label) this.buildLabel()
 
     if (this.options.show === true && this.show) this.show()
   },

package/src/snackbar.js

@@ -5,6 +5,7 @@ import build from './module/build'
 import bindEvents from './module/events'
 import display from './mixin/display'
 // ui element
+import Element from './element'
 import Text from './text'
 import Button from './button'
 
@@ -17,11 +18,13 @@ 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' }]
+      [Element, 'action', { tag: 'span', class: 'action' },
+        [Button, 'callback', { class: 'callback', type: 'link' }],
+        [Button, 'close', { class: 'close', type: 'action' }]
+      ]
     ],
     events: [
-      ['ui.action.click', 'action'],
+      ['ui.callback.click', 'action'],
       ['ui.close.click', 'destroy']
     ]
   }
@@ -70,13 +73,15 @@ class Snackbar extends EventEmitter {
     this.ui.message.set(this.options.message)
 
     if (this.options.action) {
-      this.ui.action.set(this.options.action)
-      this.ui.action.element.classList.add('show')
+      this.ui.callback.set(this.options.action)
+      this.ui.callback.element.classList.add('show')
+      this.ui.action.classList.add('show')
     }
 
-    if (this.options.close) this.ui.close.element.classList.add('show')
-
-    return this
+    if (this.options.close) {
+      this.ui.close.element.classList.add('show')
+      this.ui.action.classList.add('show')
+    }
   }
 
   action () {

package/src/styles/M3/components/badge.sass

@@ -0,0 +1,19 @@
+.badge
+  opacity: .9
+  font-family: helvetica, arial, sans-serif
+  line-height: 1.5em
+  display: none
+  cursor: pointer
+  font-size: .7em
+  font-weight: 500
+  text-align: center
+  position: absolute
+  z-index: 4
+  right: 0px
+  top: 1px
+  height: 16px
+  min-width: 16px
+  padding: 1px 5px
+  border-radius: 8px
+  // border: 1px solid rgba(255,255,255,1)
+  background-color: #BB1A1B