material - npm Package Compare versions

Comparing version 0.3.13 to 0.3.17

index.js

@@ -1,4 +0,4 @@
-import AppBar from 'material/src/AppBar'
-import Button from 'material/src/Button'
-import Banner from 'material/src/Banner'
+import AppBar from 'material/src/appbar'
+import Button from 'material/src/button'
+import Banner from 'material/src/banner'
 import Calendar from 'material/src/calendar'
@@ -12,2 +12,3 @@ import Card from 'material/src/card'
 import Drawer from 'material/src/drawer'
+import Element from 'material/src/element'
 import Form from 'material/src/form'
@@ -43,3 +44,5 @@ import Icon from 'material/src/icon'
   Drawer,
+  Element,
   Form,
+  Icon,
   Image,
@@ -46,0 +49,0 @@ Item,

package.json

 {
   "name": "material",
-  "version": "0.3.13",
+  "version": "0.3.17",
   "description": "A lightweight implementation of Material Design Components - ES6",
@@ -29,15 +29,7 @@ "main": "index.js",
     "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"
+    "uglify-es": "^3.0.28"
   },
@@ -44,0 +36,0 @@ "scripts": {

rollup.config.js

@@ -7,8 +7,4 @@ // Roolup plugins
 import replace from 'rollup-plugin-replace'
-// import eslint from 'rollup-plugin-eslint';
 import uglify from 'rollup-plugin-uglify-es'
-// import strip from 'rollup-plugin-strip';
-// import string from 'rollup-plugin-string';
-// import svg from 'rollup-plugin-svg';
-import html from 'rollup-plugin-html'
+import rawsvg from 'rollup-plugin-rawsvg'
 
@@ -29,8 +25,2 @@ export default {
     commonjs(),
-    // eslint({
-    //   exclude: [
-    //     'src/styles/**',
-    //     '*.json'
-    //   ]
-    // }),
     babel({
@@ -43,33 +33,5 @@ include: 'node_modules/**'
     }),
-    // string({
-    //   // Required to be specified
-    //   include: '**/*.svg',
-
-    //   // Undefined by default
-    //   // exclude: ['**/index.html']
-    // }),
-    html({
-      include: './skin/material/icon/*.svg',
-      htmlMinifierOptions: {
-        collapseWhitespace: true,
-        collapseBooleanAttributes: true,
-        conservativeCollapse: true,
-        minifyJS: true
-      }
-    }),
-    // strip({
-    //   // set this to `false` if you don't want to
-    //   // remove debugger statements
-    //   debugger: true,
-
-    //   // defaults to `[ 'console.*', 'assert.*' ]`
-    //   functions: ['console.log', 'assert.*', 'debug', 'alert'],
-
-    //   // set this to `false` if you're not using sourcemaps –
-    //   // defaults to `true`
-    //   sourceMap: true
-    // }),
-    // svg(),
+    rawsvg(),
     uglify()
   ]
 }

src/button.js

@@ -17,3 +17,4 @@ 'use strict'
   events: [
-    ['root.click', 'handleClick']
+    ['root.click', 'handleClick'],
+    ['root.mouseover', 'handleMouseOver']
   ]
@@ -84,5 +85,13 @@ }
 
+    if (this.options.title) {
+      this.root.setAttribute('title', this.options.title)
+    }
+
     this.label(this.options.label)
     this.icon(this.options.icon)
 
+    if (this.options.tooltip) {
+      this.root.dataset.tooltip = this.options.tooltip
+    }
+
     if (this.options.container) {
@@ -132,2 +141,6 @@ if (this.options.container.root) {
     }
+
+    if (this.options.disabled === true) {
+      this.disable()
+    }
   }
@@ -204,4 +217,21 @@
   }
+
+  /**
+   * method handleClick
+   * @param  {event} e
+   * @return {void}
+   */
+  handleMouseOver (e) {
+    e.preventDefault()
+
+    // console.log('mouse over', e.target)
+
+    if (e.target.dataset.tooltip) {
+      // console.log(e.target.dataset.tooltip)
+    }
+
+    return this
+  }
 }
 
 export default Button

src/component/control.js

@@ -34,3 +34,3 @@ import create from '../element/create'
   check (checked) {
-    if (checked) {
+    if (checked === true) {
       css.add(this.root, 'is-checked')
@@ -37,0 +37,0 @@ this.element.input.checked = true

src/dialog.js

@@ -11,3 +11,2 @@ 'use strict'
 import css from './module/css'
-import { _isArray } from './module/utils'
 
@@ -126,3 +125,3 @@ import {
 
-    console.log('buildTitle', this.title)
+    // console.log('buildTitle', this.title)
   }
@@ -132,2 +131,3 @@
     this.layout = new Layout(this.options.layout, this.surface)
+    this.ui = this.layout.component
   }
@@ -142,3 +142,3 @@
   buildContent () {
-    console.log('text content', this.options.content)
+    // console.log('text content', this.options.content)
     this.content = new Text({
@@ -145,0 +145,0 @@ type: 'content',

src/drawer.js

@@ -55,2 +55,3 @@ 'use strict'
   build () {
+    // console.log('build')
     this.wrapper = create('div')
@@ -82,2 +83,6 @@
 
+    if (this.options.open) {
+      this.open()
+    }
+
     if (this.options.container) { insert(this.wrapper, this.options.container) }
@@ -91,7 +96,14 @@
   attach () {
+    // console.log('attach', this.options.type)
+    if (this.options.type === 'persistent') return
+    if (this.options.type === 'permanent') return
+
     this.wrapper.addEventListener('click', (e) => {
-      console.log(' click close')
-      this.close()
+      // console.log('target', e.currentTarget)
+      if (this.wrapper === e.currentTarget) {
+        this.close()
+      }
     })
   }
+
   /**
@@ -101,2 +113,3 @@ * [toggle description]
    */
+
   toggle () {
@@ -130,3 +143,3 @@ // console.log('toggle', this.root);
   open () {
-    // console.log('open');
+    // console.log('open')
 
@@ -133,0 +146,0 @@ css.add(this.wrapper, 'show')

src/element.js

@@ -47,2 +47,6 @@
 
+    if (this.options.container) {
+      this.options.container.appendChild(element)
+    }
+
     return element
@@ -49,0 +53,0 @@ }

src/layout.js

@@ -17,2 +17,3 @@ import { is as isObject } from './module/object'
     this.component = this.create(schema, container)
+    // this.field = this.extractInfo(this.component)
 
@@ -79,2 +80,3 @@ return this
           else insert(component, container)
+          component._container = container
         }
@@ -149,2 +151,23 @@ } else if (Array.isArray(schema[i])) {
 
+  extractInfo (object) {
+    // console.log('extractField', object)
+
+    var field = {}
+
+    for (var property in object) {
+      if (object.hasOwnProperty(property)) {
+        var infos = property.split(/\./)
+
+        if (infos[0] === 'info' && infos[1] !== undefined) {
+          // console.log('field', infos[0], infos[1])
+          field[infos[1]] = object[property]
+        }
+      }
+    }
+
+    console.log('--- field', field)
+
+    return field
+  }
+
   /**
@@ -151,0 +174,0 @@ * [get description]

src/list.js

@@ -125,5 +125,11 @@ 'use strict'
   handleSelect (e) {
+    // console.log('handleSelect-', e.currentTarget, this.options.target)
+
+    if (e.target === e.currentTarget) {
+      return
+    }
+
     if (e && e.target) {
       var el = e.target
-
+      // console.log('el', el, el.matches(this.options.target))
       while (el && !el.matches(this.options.target)) {
@@ -133,3 +139,2 @@ el = el.parentNode
 
-      //console.log('item clicked: ', el)
       css.remove(this.item, 'is-selected')
@@ -136,0 +141,0 @@ css.add(el, 'is-selected')

src/select.js

@@ -238,3 +238,3 @@ 'use strict'
   _onChange (ev) {
-    console.log('change', ev)
+    // console.log('change', ev)
 
@@ -241,0 +241,0 @@ this.emit('change', ev.target.value)

src/switch.js

 'use strict'
 
 // import control from '../control';
-import control from './component/control'
+// import control from './component/control'
 import build from './element/build'
@@ -31,3 +31,3 @@ import emitter from './module/emitter'
     ['element.control.click', 'toggle'],
-    ['element.label.click', 'toggle'],
+    // ['element.label.click', 'toggle'],
     // for accessibility purpose
@@ -68,3 +68,3 @@ ['element.input.click', 'toggle'],
     this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter, control, attach, insert)
+    Object.assign(this, emitter, attach, insert)
 
@@ -150,11 +150,69 @@ this.value = this.options.value
    */
-  setValue (value) {
-    if (value) {
-      this.check(value)
+  setValue (value, silent) {
+    // console.log('setValue', value)
+    this.check(value)
+  }
+
+ /**
+   * [toggle description]
+   * @return {Object} The class instance
+   */
+  toggle () {
+    if (this.disabled) return
+
+    this.focus()
+
+    if (this.checked) {
+      this.check(false)
     } else {
-      this.unCheck(value)
+      this.check(true)
     }
+
+    return this
   }
+
+  /**
+   * Set checkbox value
+   * @param {boolean} value [description]
+   */
+  check (checked, silent) {
+    // console.log('check', checked, silent)
+    if (checked === true) {
+      this.root.classList.add('is-checked')
+      this.element.input.checked = true
+      this.checked = true
+      this.value = true
+      this.emit('change', this.checked)
+    } else {
+      this.root.classList.remove('is-checked')
+      this.element.input.checked = false
+      this.checked = false
+      this.value = false
+      this.emit('change', this.checked)
+    }
+    return this
+  }
+
+  /**
+   * [_onInputFocus description]
+   * @return {?} [description]
+   */
+  focus () {
+    if (this.disabled === true) return this
+
+    this.root.classList.add('is-focused')
+    if (this.element.input !== document.activeElement) { this.element.input.focus() }
+    return this
+  }
+
+  /**
+   * [_onInputBlur description]
+   * @return {?} [description]
+   */
+  blur () {
+    this.root.classList.remove('is-focused')
+    return this
+  }
 }
 
 export default Switch

src/tabs.js

@@ -48,6 +48,7 @@ 'use strict'
     this.root = create(this.options)
-
+    this.tab = { }
     if (this.options.list) {
       this.list = new List({
         // root: this.root,
+        tag: 'div',
         list: this.options.list,
@@ -63,9 +64,10 @@ target: '.material-button',
           } else {
-
             item = new Button({
               name: info.name,
-              text: info.text || info.name
+              text: info.text || info.name,
+              tooltip: info.tootip
             })
           }
 
+          this.tab[info.name] = item
 
@@ -75,3 +77,2 @@ return item
         select: (item) => {
-          // console.log('click')
           this.selected = item
@@ -93,7 +94,15 @@ this.click(item)
 
-  click (item) {
+  select (tab) {
+    // console.log('select', tab, this.tab)
+    this.selected = this.tab[tab]
+    this.click(this.selected.root, true)
+  }
+
+  click (item, silent) {
+    // console.log('clickitem', item, this.root);
     var or = offset(this.root)
     var o = offset(item)
     this.indicator.setAttribute('style', 'width: ' + o.width + 'px; left: ' + (o.left - or.left) + 'px;')
-    this.emit('select', item.dataset.name)
+
+    if (!silent) { this.emit('select', item.dataset.name) }
   }
@@ -100,0 +109,0 @@ }

src/textfield.js

@@ -103,2 +103,6 @@ 'use strict'
 
+    if (this.options.name) {
+      this.input.setAttribute('name', this.options.name)
+    }
+
     if (!this.options.value) {
@@ -131,9 +135,9 @@ this.root.classList.add('is-empty')
    */
-  set (prop, value) {
+  set (prop, value, options) {
     switch (prop) {
       case 'value':
-        this.setValue(value)
+        this.setValue(value, options)
         break
       case 'label':
-        this.setLabel(value)
+        this.setLabel(value, options)
         break
@@ -148,3 +152,3 @@ case 'disabled':
       default:
-        this.setValue(prop)
+        this.setValue(prop, value)
     }
@@ -225,3 +229,4 @@
    */
-  setValue (value) {
+  setValue (value, silent) {
+    // console.log('setValue', value, silent);
     this.input.value = value
@@ -235,3 +240,3 @@
 
-    this.emit('change', value)
+    if (!silent) { this.emit('change', value) }
   }
@@ -238,0 +243,0 @@

No alert changes

Improved metrics

Total package byte prevSize

630994

increased by0.9%

Dev dependency count

14

decreased by-36.36%

Number of package files

142

increased by2.16%

Lines of code

10613

increased by1.74%

No dependency changes