material - npm Package Compare versions

Comparing version 0.4.2 to 0.4.3

package.json

 {
   "name": "material",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "A lightweight implementation of Material Design Components - ES6",
@@ -5,0 +5,0 @@ "main": "index.js",

src/form/build.js

@@ -0,1 +1,3 @@
+import dataset from '../view/dataset'
+
 import Layout from '../layout'
@@ -7,8 +9,36 @@
     this.root = document.createElement('div')
-    this.root.classList.add('form-view')
+    this.root.classList.add('form')
 
+    if (this.options.class !== 'form') {
+      this.root.classList.add(this.options.class)
+    }
+
+    if (this.options.data) {
+      dataset(this.root, this.options.data)
+    }
+
+    this.buildForm(this.options.form)
+
+    this.buildLayout()
+
+    if (this.options.container) {
+      this.options.container.appendChild(this.root)
+    }
+  },
+
+  buildForm (form) {
     this.form = document.createElement('form')
     this.root.appendChild(this.form)
 
-    this.buildLayout()
+    if (form && form.method) {
+      this.form.setAttribute('method', form.method)
+    }
+
+    if (form && form.autocomplete) {
+      this.form.setAttribute('autocomplete', form.autocomplete)
+    }
+
+    if (form && form.action) {
+      this.form.setAttribute('action', form.action)
+    }
   },
@@ -26,6 +56,5 @@
 
-    this.ui.submit.disable()
-    this.ui.cancel.disable()
-
-    // console.log('ui', this.ui)
+    if (this.disableControl) {
+      this.disableControl()
+    }
   },
@@ -52,2 +81,3 @@
     this.field = {}
+    this.fields = []
 
@@ -61,3 +91,3 @@ for (var property in object) {
           // console.log('field', name, property)
-
+          this.fields.push(name)
           this.field[name] = object[property]
@@ -64,0 +94,0 @@ }

src/form/create.js

@@ -5,10 +5,12 @@
   create (info) {
-  	console.log('create', info, this.info)
-  	this.form.style.display = 'flex'
+    console.log('create', info, this.info)
+    this.form.style.display = 'flex'
 
     this.setMode('create')
     this.render(this.options.create, 'create')
-    this.ui.cancel.enable()
-    // this.ui.submit.enable()
+
+    if (this.controls) {
+      this.enableControls()
+    }
   }
 }

src/form/mode.js

@@ -6,12 +6,4 @@ export default {
 
-    if (mode === 'create') {
-      this.ui.submit.setLabel('Create')
-    }
-
-    if (mode === 'edit') {
-      this.ui.submit.setLabel('Apply')
-    }
-
     this.emit('mode', mode)
   }
 }

src/form/render.js

@@ -5,3 +5,3 @@ import dot from '../module/dot'
   render (object, option) {
-    console.log('render', object)
+    // console.log('render', object)
 
@@ -23,11 +23,5 @@ var info = dot(object)
         // console.log('field type', field)
-        if (
-        this.field[field] &&
-        this.field[field].set) {
-          if (info[field] !== undefined) {
-            this.field[field].set(info[field])
-          } else if (object[field] !== undefined) {
-            var value = this.objectValueByDotKey(object, field)
-            this.field[field].set(value)
-          }
+        if (this.field[field] &&
+            this.field[field].set) {
+          this.field[field].set(this.objectValueByDotKey(object, field))
         }
@@ -37,4 +31,5 @@ }
 
-    this.ui.submit.disable()
-    this.ui.cancel.disable()
+    if (this.disableControls) {
+      this.disableControls()
+    }
 
@@ -50,10 +45,8 @@ this.emit('rendered')
   objectValueByDotKey (object, dotkey) {
-    // console.log('objectValueByDotKey', object, dotkey)
     var keys = dotkey.split(/\./)
 
-    var value
-    var o = object
+    var value = Object.assign({}, object)
 
     for (var i = 0; i < keys.length; i++) {
-      value = o[keys[i]]
+      value = value[keys[i]]
     }
@@ -60,0 +53,0 @@

src/form/set.js

@@ -28,5 +28,5 @@ export default {
 
-      this.emit('fetched', id)
+      this.emit('setted', id)
     })
   }
 }

src/form/setup.js

 export default {
   setup () {
-    // console.log('setup')
-    for (var field in this.field) {
-      if (this.field.hasOwnProperty(field)) {
-        var control = this.field[field]
-        if (control && control.on) {
-          control.on('change', () => {
-            // console.log('change')
-            this.ui.submit.enable()
-            this.ui.cancel.enable()
-          })
-        }
-      }
-    }
 
-    for (var file in this.file) {
-      if (this.file.hasOwnProperty(file)) {
-        var control = this.file[file]
-        if (control && control.on) {
-          control.on('change', () => {
-            // console.log('change')
-            this.ui.submit.enable()
-            this.ui.cancel.enable()
-          })
-        }
-      }
-    }
   }
 }

src/form/submit.js

 export default {
 
   submit (ev) {
+    ev.preventDefault()
     // console.log('submit', this.ui, this.file, this.info)
     // ev.preventDefault()
-    if (!this.verify()) return
+    if (this.verify && !this.verify()) return
 
     // console.log('submit')
-    this.ui.submit.disable()
-    this.ui.cancel.disable()
+    if (this.disableControls) {
+      this.disableControls()
+    }
 
@@ -16,5 +18,8 @@ var formData = new FormData()
       formData.append('id', this.info._id)
-      formData.append('uuid', this.info.uuid)
     }
 
+    if (this.info && this.info.uuid) {
+      formData.append('id', this.info.uuid)
+    }
+
     // append field
@@ -47,22 +52,18 @@
 
-    fetch(this.options.route, {
-      method: method,
-      body: formData
-    }).then(r => r.json()).then(info => {
-      if (info.error) {
-        console.log('Error: ' + info.error)
-      } else {
-        // console.log('submit ok', info, this.mode)
-        this.ui.submit.setLabel('Apply')
+    if (this.fetch) {
+      this.fetch({
+        method: method,
+        formData: formData
+      })
+    }
 
-        if (this.mode === 'create') {
-          this.emit('created', info)
-          this.mode = null
-        } else {
-          this.info = info
-          this.emit('updated', info)
-        }
-      }
-    })
+    if (this.action) {
+      this.action({
+        method: method,
+        formData: formData
+      })
+    }
+
+    return false
   }
 }

src/layout.js

@@ -52,3 +52,3 @@ import { is as isObject } from './module/object'
           name = schema[i + 1]
-          if (!schema[i].isElement) {
+          if (!schema[i].isElement && !schema[i].isComponent) {
             options.name = name
@@ -55,0 +55,0 @@ }

src/list/build.js

@@ -26,8 +26,18 @@ import observer from '../module/observer'
 
-    observer.insert(this.root, () => {
+    if (this.options.container) {
+      this.options.container.appendChild(this.root)
+      this.show()
       this.buildVirtual()
-    })
+      // console.log('form', this.root)
+    } else {
+      this.inserted = true
+      observer.insert(this.root, () => {
+        this.buildVirtual()
+        this.inserted = true
+      })
+    }
   },
 
   buildVirtual () {
+    // console.log('buildVirtual', this.options.class)
     var height = 80
@@ -34,0 +44,0 @@

src/list/select.js

 export default {
   select (item) {
-    console.log('select', this.mode)
+    // console.log('select')
 
@@ -5,0 +5,0 @@ if (!item.dataset.id) return

src/module/attach.js

@@ -1,3 +0,1 @@
-'use strict'
-
 import extract from './extract'
@@ -28,22 +26,15 @@
       var f = extract.f(instance, def[1])
-      var o = def[2] || false
 
-      // console.log('attach', def[0], def[1])
+      var keys = def[1].split('.')
 
-      var keys = def[1].split('.')
       keys.pop()
-      var bound = this._path(keys.join('.'))
+      var bound = this.last(keys.join('.'))
 
-      if (e.element && e.element.addEventListener) {
-        e.element.addEventListener(e.name, f.bind(bound), o)
-      } else if (e.element && e.element.on) {
-        // console.log('on', e.name)
-        if (!f) {
-          console.log('can\'t attach event', e.name, 'to', def[1])
-        } else {
-          e.element.on(e.name, f.bind(bound))
-        }
+      if (f && bound && e && e.element && e.element.addEventListener) {
+        if (!f) { console.log('error') }
+        e.element.addEventListener(e.name, f.bind(bound))
+      } else if (e && e.element && e.element.on && f && bound) {
+        e.element.on(e.name, f.bind(bound))
       } else {
-        console.log('can\'t attach', def[0], def[1])
-        // console.log('--', e, f)
+        console.log('can\'t attach', def[0])
       }
@@ -60,3 +51,4 @@ })
    */
-  _path: function (str) {
+  last: function (str) {
+    // console.log('_path', str)
     if (!str) return this
@@ -63,0 +55,0 @@ else if (!str.match(/\./)) return this[str]

src/module/extract.js

@@ -1,25 +0,2 @@
-/**
- * extract.f extract a function from a string using dot
- * @param  {string} func A string representing a function accessible in dot notation
- * @return {function}      The function
- */
-function f(instance, func) {
-  if (!func) return
 
-  if (typeof func === 'function') {
-    return func
-  } else if (!func.match(/\./)) return instance[func]
-  var iteration
-
-  var keys = func.split('.')
-  for (var i = 0, l = keys.length; i < l; i++) {
-    var key = keys[i]
-
-    iteration = iteration || instance
-    iteration = iteration[key]
-  }
-
-  return iteration
-}
-
 /**
@@ -30,5 +7,11 @@ * extract.e extract a event and the context
  */
-function e(instance, ev) {
+function e (instance, ev) {
   if (!ev) return instance
-  else if (!ev.match(/\./)) return instance[ev]
+  else if (!ev.match(/\./)) {
+    return {
+      element: instance,
+      name: ev
+    }
+  }
+
   var iteration
@@ -39,5 +22,5 @@ var obj = {}
   var keys = ev.split('.')
-  for (var i = 0, l = keys.length; i < l; i++) {
+
+  for (var i = 0, l = keys.length; i <= l; i++) {
     var key = keys[i]
-
     iteration = iteration || instance
@@ -56,2 +39,26 @@ iteration = iteration[key]
 
-export default { e, f }
+/**
+ * extract.f extract a function from a string using dot
+ * @param  {string} func A string representing a function accessible in dot notation
+ * @return {function}      The function
+ */
+function f (instance, func) {
+  if (!func) return
+
+  if (typeof func === 'function') {
+    return func
+  } else if (!func.match(/\./)) return instance[func]
+  var iteration
+
+  var keys = func.split('.')
+  for (var i = 0, l = keys.length; i < l; i++) {
+    var key = keys[i]
+
+    iteration = iteration || instance
+    iteration = iteration[key]
+  }
+
+  return iteration
+}
+
+export default { e, f }

src/view/build.js

@@ -14,4 +14,4 @@ import dataset from './dataset'
 
-    var container = this.options.container || document.body
-    container.appendChild(this.root)
+    this.container = this.options.container || document.body
+    this.container.appendChild(this.root)
 
@@ -18,0 +18,0 @@ if (this.options.layout) {

src/view/display.js

 
 export default {
-  hide () {
-    this.root.classList.remove('show')
-    this.visible = false
-    this.emit('hide')
+  toggle () {
+    this.visible ? this.hide() : this.show()
   },
 
   show () {
-    // console.log('hide')
+    // console.log('show')
     this.root.classList.add('show')
     this.visible = true
+
+    if (this.underlay) {
+      this.underlay.classList.add('show')
+    }
+
     this.emit('show')
   },
 
-  toggle () {
-    this.visible ? this.hide() : this.show()
+  hide () {
+    // console.log('show')
+    this.root.classList.remove('show')
+    this.visible = false
+
+    if (this.underlay) {
+      this.underlay.classList.remove('show')
+    }
+
+    this.emit('hide')
   }
 }

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

683804

increased by2.42%

Number of package files

192

increased by6.08%

Lines of code

12475

increased by5.52%

No dependency changes