material 0.7.7 → 0.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "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/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/list/select.js

@@ -42,11 +42,11 @@ export default {
   },
 
   getInfoById (id) {
-    return this.dataStore[id]
+    return JSON.parse(JSON.stringify(this.dataStore[id]))
   },
 
   getSelectedInfo () {
-    return this.dataStore[this.id]
+    return JSON.parse(JSON.stringify(this.dataStore[this.id]))
   },
 
   getItemById (id, silent) {

package/src/mixin/display.js

@@ -12,6 +12,10 @@ export default {
     // console.log('show', this.visible)
     if (!this.element) return
 
+    if (this.options.display !== false) {
+      this.element.style.display = ''
+    }
+
     this.element.getBoundingClientRect()
 
     this.element.classList.add('show')
@@ -26,6 +30,7 @@ export default {
   },
 
   hide () {
+    // console.log('hide', this.element)
     if (!this.element) return
 
     this.element.classList.remove('show')
@@ -35,6 +40,14 @@ export default {
       this.underlay.classList.remove('show')
     }
 
+    if (this.options.transition && this.element) {
+      setTimeout(() => {
+        if (this.options.display !== false) {
+          this.element.style.display = 'none'
+        }
+      }, this.options.transition)
+    }
+
     this.emit?.('hide')
     return this
   },

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,10 +18,13 @@ class Snackbar extends EventEmitter {
     close: false,
     layout: [
       [Text, 'message', { tag: 'span', class: 'message' }],
-      [Button, 'action', { class: 'action', type: 'link' }]
+      [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']
     ]
   }
@@ -69,12 +73,14 @@ 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')
-    } 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')
+      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')
+      this.ui.action.classList.add('show')
     }
   }
 

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