material 0.7.4 → 0.7.6

package/src/module/numabbr.js

@@ -0,0 +1,28 @@
+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']
+
+  for (let i = abbrev.length - 1; i >= 0; i--) {
+    const size = Math.pow(10, (i + 1) * 3)
+
+    if (size <= number) {
+      let num = Math.round(number * factor / size) / factor
+
+      // Handle special case where we round up to the next abbreviation
+      if (num === 1000 && i < abbrev.length - 1) {
+        num = 1
+        return `${num}${abbrev[i + 1]}`
+      }
+
+      return `${num}${abbrev[i]}`
+    }
+  }
+
+  return number.toString()
+}
+
+export default numabbr

package/src/module/object.js

@@ -1,11 +1,11 @@
 
-function is (object) {
+const is = (object) => {
   return object &&
     typeof object === 'object' &&
     Object.getPrototypeOf(object) === Object.getPrototypeOf({})
 }
 
-function byString (o, s) {
+const byString = (o, s) => {
   s = s.replace(/\[(\w+)\]/g, '.$1') // convert indexes to properties
   s = s.replace(/^\./, '') // strip a leading dot
   const a = s.split('.')

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/module/passive.js

@@ -1,4 +1,4 @@
-function passiveEvents () {
+const passiveEvents = () => {
   let supportsPassive = false
 
   try {

package/src/module/remove.js

@@ -1,19 +1,7 @@
 import extract from './extract'
-
-/**
- * attach function to events
- * @module module/attach
- * @category module
- */
-
-/**
- * [attach description]
- * @param  {object} component [description]
- * @param  {[type]} events    [description]
- * @return {[type]}           [description]
- */
+import last from './last'
 export default {
-  remove: function (events) {
+  remove: (events) => {
     // console.log('attach', events)
     events = events || this.options.events
     if (!events) return
@@ -42,33 +30,10 @@ export default {
       } else if (e && e.element && e.element.off && f && bound) {
         e.element.off(e.name, f.bind(bound))
       } else {
-        console.trace('can\'t attach', def[0])
-        console.log('can\'t attach', def[0])
+        console.trace('can\'t be removed', def[0])
       }
     })
 
     return this
-  },
-
-  /**
-   * Return the last reference from an object
-   * @param  {string} str Object path for example key1.key2.key3
-   * @return {value} The value of the last reference
-   */
-  last: function (str) {
-    // console.log('_path', str)
-    if (!str) return this
-    else if (!str.match(/\./)) return this[str]
-    let last
-
-    const keys = str.split('.')
-    for (let i = 0, l = keys.length; i < l; i++) {
-      const key = keys[i]
-
-      last = last || this
-      last = last[key]
-    }
-
-    return last
   }
 }

package/src/module/request.js

@@ -1,4 +1,3 @@
-// request.js
 const request = async (url, method = 'GET', body = null, headers = {}, signal = null) => {
   const defaultHeaders = {
     Accept: 'application/json',

package/src/module/ripple.js

@@ -2,7 +2,8 @@ import insert from '../element/insert'
 import offset from '../element/offset'
 
 const defaults = {
-  transition: '.5s cubic-bezier(0.4, 0.0, 0.2, 1)',
+  // transition: '.375s cubic-bezier(0.4, 0.0, 0.2, 1)',
+  transition: '.375s linear',
   opacity: ['1', '.3']
 }
 

package/src/module/touch.js

@@ -1,4 +1,4 @@
-export default function () {
+export default () => {
   try {
     document.createEvent('TouchEvent')
     return true

package/src/module/utils.js

@@ -1,31 +1,11 @@
-/**
- * Utility functions
- * @module module/utils
- */
-
-/**
- * Checks if given value is an array
- * @param {*} object
- * @returns {boolean}
- */
 const isArray = (object) => {
   return Object.prototype.toString.call(object) === '[object Array]'
 }
 
-/**
- * Checks if JavaScript object is a plain object
- * @param {Object} object
- * @returns {*|boolean}
- */
 const isLiteralObject = (object) => {
   return object && typeof object === 'object' && Object.getPrototypeOf(object) === Object.getPrototypeOf({})
 }
 
-/**
- * Checks if object is iterable
- * @param {Object} object
- * @returns {boolean}
- */
 const isIterable = (object) => {
   return isLiteralObject(object) ||
     isArray(object) ||
@@ -34,11 +14,6 @@ const isIterable = (object) => {
       object.length !== undefined)
 }
 
-/**
- *
- * @param {Object} object
- * @param {Function} callback
- */
 const each = (object, callback) => {
   if (isArray(object) || (typeof object === 'object' && object.length !== undefined)) {
     for (let i = 0, l = object.length; i < l; i++) {
@@ -54,12 +29,6 @@ const each = (object, callback) => {
   }
 }
 
-/**
- * Array.indexOf support
- * @param {Array} array
- * @param {*} obj
- * @returns {number}
- */
 const indexOf = (array, obj) => {
   if (Array.prototype.indexOf) {
     return Array.prototype.indexOf.call(array, obj)

package/src/module/viewport.js

@@ -1,19 +1,13 @@
-
-function viewport (el) {
+const viewport = el => {
   if (!el) return
 
-  const rect = el.getBoundingClientRect()
-
-  const top = rect.top
-  const left = rect.left
-  const width = rect.width
-  const height = rect.height
+  const { top, left, width, height } = el.getBoundingClientRect()
 
   return (
     top >= window.pageYOffset &&
     left >= window.pageXOffset &&
-    (top + height) <= (window.pageYOffset + window.innerHeight) &&
-    (left + width) <= (window.pageXOffset + window.innerWidth)
+    top + height <= window.pageYOffset + window.innerHeight &&
+    left + width <= window.pageXOffset + window.innerWidth
   )
 }
 

package/src/navigation.js

@@ -1,24 +1,74 @@
+import EventEmitter from './mixin/emitter'
+
 import * as css from './module/css'
 import build from './module/build'
+import attach from './module/attach'
+import display from './mixin/display'
+import Element from './element'
+import Button from './button'
+import Item from './item'
 
-class Navigation {
+class Navigation extends EventEmitter {
   static defaults = {
-    class: 'navigation'
+    class: 'navigation',
+    tag: 'nav',
+    layout: [
+      [Element, 'body', { class: 'body' }]
+    ],
+    events: [
+      ['element.click', 'toggle']
+    ]
   }
 
   constructor (options) {
+    super()
+
     this.init(options)
     this.build()
+    this.attach()
     this.setup()
   }
 
   init (options) {
     this.options = { ...Navigation.defaults, ...options }
-    Object.assign(this, build)
+    Object.assign(this, build, attach, display)
+    this.items = []
+  }
+
+  setup () {
+    console.log('setup', this.options)
+    if (this.options.type) css.add(this.element, 'type-' + this.options.type)
+    if (this.options.type === 'rail') this.show()
+    if (this.options.items) this.render(this.options.items)
   }
 
-  setup() {
-    if (this.options.type) css.add(this.element, 'type-', this.options.type)
+  render (items) {
+    console.log('render', items)
+    if (items && Array.isArray(items)) {
+      for (let i = 0; i < items.length; i++) {
+        this.add(items[i])
+      }
+    }
+  }
+
+  add (obj) {
+    if (typeof obj !== 'object') return this
+    let item
+    if (obj.type === 'header') {
+      item = new Element({ tag: 'span', class: 'header' })
+    } else if (obj.type === 'divider') {
+      item = new Element({ tag: 'span', class: 'divider' })
+    } else {
+      obj.container = this.ui.body
+      obj.class = 'item'
+      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/styles/M3/app/index.sass

@@ -0,0 +1,19 @@
+html
+  font-size: 100%
+  line-height: 1.15
+  width: 100%
+  height: 100%
+
+body
+  color: rgba(0, 0, 0, 0.67)
+  font-family: Roboto, arial, serif
+  font-size: 100%
+  display: flex
+  // position: relative
+  // display: block
+  // height: 100%
+  // width: 100%
+  // overflow: hidden
+  margin: 0
+  padding: 0
+  // user-select: none

package/src/styles/M3/base/body.sass

@@ -0,0 +1,55 @@
+
+// HTML Tags General Defintion
+html
+  font-size: 100%
+  line-height: 1.15
+  width: 100%
+  height: 100%
+
+body
+  color: rgba(0, 0, 0, 0.67)
+  font-family: Roboto, arial, serif
+  font-size: 100%
+  // position: relative
+  // display: block
+  // height: 100%
+  // width: 100%
+  // overflow: hidden
+  margin: 0
+  padding: 0
+  // user-select: none
+
+input,
+textarea,
+keygen,
+select,
+button
+  font-size: 1em
+  font-family: Roboto, arial, serif
+  color: rgb(51, 51, 51)
+
+p
+  line-height: 20px
+  padding-top: 6px
+  margin-bottom: 14px
+  letter-spacing: 0
+  font-weight: 400
+
+// get rid of outline
+select,
+input,
+textarea,
+button
+  outline: none
+  &:hover
+    outline: none
+
+button
+  user-select: none
+
+// set all container boder-box
+*
+  box-sizing: border-box
+
+a
+  color: rgba(0, 0, 0, 0.7)

package/src/styles/M3/base/elevation.sass

@@ -0,0 +1,50 @@
+.elevation-z0
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)
+.elevation-z1
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
+.elevation-z2
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
+.elevation-z3
+  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)
+.elevation-z4
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)
+.elevation-z5
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12)
+.elevation-z6
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)
+.elevation-z7
+  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12)
+.elevation-z8
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
+.elevation-z9
+  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12)
+.elevation-z10
+  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12)
+.elevation-z11
+  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12)
+.elevation-z12
+  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)
+.elevation-z13
+  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12)
+.elevation-z14
+  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12)
+.elevation-z15
+  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12)
+.elevation-z16
+  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)
+.elevation-z17
+  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12)
+.elevation-z18
+  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12)
+.elevation-z19
+  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12)
+.elevation-z20
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12)
+.elevation-z21
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12)
+.elevation-z22
+  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12)
+.elevation-z23
+  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12)
+.elevation-z24
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)

package/src/styles/M3/base/grid.sass

@@ -0,0 +1,63 @@
+/////////////////
+// Semantic.gs // for SCSS: http://sass-lang.com/
+/////////////////
+
+// Defaults which you can freely override
+$column-width: 60px
+$gutter-width: 20px
+$columns: 12
+
+// Utility function — you should never need to modify this
+@function gridsystem-width($columns:$columns)
+  @return ($column-width * $columns) + ($gutter-width * $columns)
+
+
+// Set $total-width to 100% for a fluid layout
+$total-width: gridsystem-width($columns)
+
+// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
+// $min-width: 999999
+// $correction: 0.5 / $min-width * 100
+
+// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
+@mixin clearfix()
+  *zoom:1
+
+  &:before,
+  &:after
+      content:""
+      display:table
+  
+  &:after
+      clear:both
+
+//////////
+// GRID //
+//////////
+
+body
+  width: 100%
+  @include clearfix()
+
+
+@mixin row($columns:$columns)
+  display: block
+  width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))
+  margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)
+  // *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction
+  // *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction
+  @include clearfix()
+
+@mixin column($x,$columns:$columns)
+  display: inline
+  float: left
+  width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))
+  margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))
+  // *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction
+  // *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction
+
+@mixin push($offset:1)
+  margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns))
+
+@mixin pull($offset:1)
+  margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns))

package/src/styles/M3/base/typo.sass

@@ -0,0 +1,107 @@
+.material-text
+  &.type-display4
+    font-size: 7rem
+    font-weight: 300
+    letter-spacing: -0.04em
+    line-height: 7rem
+
+  &.type-display3
+    font-size: 3.5rem
+    font-weight: 400
+    letter-spacing: -0.02em
+    line-height: 3.5rem
+
+  &.type-display2
+    font-size: 2.813rem
+    font-weight: 400
+    letter-spacing: normal
+    line-height: 3rem
+
+  &.type-display1
+    font-size: 2.125rem
+    font-weight: 400
+    letter-spacing: normal
+    line-height: 2.5rem
+
+  &.type-headline
+    font-size: 1.5rem
+    font-weight: 400
+    letter-spacing: normal
+    line-height: 2rem
+
+  &.type-title
+    font-size: 1.25rem
+    font-weight: 500
+    letter-spacing: 0.02em
+    line-height: 2rem
+
+  &.type-subheading2
+    font-size: 1rem
+    font-weight: 400
+    letter-spacing: 0.04em
+    line-height: 1.75rem
+
+  &.type-subheading1
+    font-size: 0.938rem
+    font-weight: 400
+    letter-spacing: 0.04em
+    line-height: 1.5rem
+
+  &.type-body1
+    font-size: 0.875rem
+    font-weight: 400
+    letter-spacing: 0.04em
+    line-height: 1.25rem
+
+  &.type-body2
+    font-size: 0.875rem
+    font-weight: 500
+    letter-spacing: 0.04em
+    line-height: 1.5rem
+
+  &.type-caption
+    font-size: 0.75rem
+    font-weight: 400
+    letter-spacing: 0.08em
+    line-height: 1.25rem
+
+  &.type-button
+    font-size: 14px
+    font-weight: 500
+
+    // margin-bottom: 30px;
+    margin-left: 8px
+
+  &.style-adjust
+    &.type-display4
+      margin: -1rem 0 3.5rem -0.085em
+
+    &.type-display3
+      margin: -8px 0 64px -0.07em
+
+    &.type-display2
+      margin: -0.5rem 0 4rem -0.07em
+
+    &.type-display1
+      margin: -0.5rem 0 4rem -0.07em
+
+    &.type-headline
+      margin: -0.5rem 0 1rem -0.06em
+
+    &.type-title
+      margin: -0.5rem 0 1rem -0.05em
+
+    &.type-subheading2
+      margin: -0.5rem 0 1rem -0.06em
+
+    &.type-subheading1
+      margin: -0.313rem 0 0.813rem -0.06em
+
+    &.type-body1
+      margin: -0.25rem 0 0.75rem 0
+
+    &.type-body2
+      margin: -0.25rem 0 0.75rem 0
+
+    &.type-caption
+      line-height: 1.25rem

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

@@ -2,10 +2,16 @@
   font-size: 0.875rem
   font-weight: 500
   color: $text-on-primary
+  line-height: 20px
   height: 40px
+  display: inline-flex
+  align-items: center
+  justify-content: center
+  position: relative
   background-color: $color-primary
   padding-left: 24px
   padding-right: 24px
+  margin: 0 4px
   border-radius: 20px
   border: none
   overflow: hidden
@@ -17,10 +23,17 @@
     background-color: $color-tonal
   &.style-elevated
     background-color: $color-primary
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.12)
+    &:active
+      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.12)
   &.style-outlined
     color: $color-primary
     background-color: transparent
-    border-color: 2px solid #72776C
+    border: 1px solid #72776C
+    &:hover
+      background-color: $color-tonal
   &.style-text
     color: $color-primary
+    background-color: transparent
+    &:hover
+      background-color: $color-tonal