material 0.7.1 → 0.7.4

package/src/select.js

@@ -1,9 +1,9 @@
 import EventEmitter from './mixin/emitter'
-
+// modules
 import build from './module/build'
 import attach from './module/attach'
 import attributes from './module/attributes'
-import dataset from './view/dataset'
+import dataset from './module/dataset'
 
 class Select extends EventEmitter {
   static defaults = {
@@ -23,7 +23,7 @@ class Select extends EventEmitter {
     this.attach()
   }
 
-  init(options) {
+  init (options) {
     this.options = Object.assign({}, Select.defaults, options || {})
     Object.assign(this, build, attach, dataset)
   }
@@ -61,13 +61,13 @@ class Select extends EventEmitter {
   setOptions (options) {
     // console.log('buildCountry', this.input)
 
-    var first = this.options.first
+    const first = this.options.first
 
     if (first && first[0] && first[1]) {
       this.input.options[0] = new Option(first[1], first[0])
     }
 
-    for (var i = 0; i < options.length; i++) {
+    for (let i = 0; i < options.length; i++) {
       this.addOption(options[i][1], options[i][0])
     }
   }
@@ -96,7 +96,7 @@ class Select extends EventEmitter {
   }
 
   get () {
-    var value = null
+    let value = null
 
     if (this.input[this.input.selectedIndex]) {
       value = this.input[this.input.selectedIndex].value

package/src/selecter.js

@@ -1,52 +1,50 @@
-import emitter from './module/emitter'
+import EventEmitter from './mixin/emitter'
+// modules
 import attach from './module/attach'
-import dataset from './view/dataset'
+import dataset from './module/dataset'
 import attributes from './module/attributes'
-import addClass from './module/addclass'
-
-// ui
+import * as css from './module/css'
+// components
 import Layout from './layout'
 import Element from './element'
 import Button from './button'
 
-const defaults = {
-  class: 'selecter',
-  first: null,
-  attributes: ['type', 'name', 'autocomplete', 'required'],
-  layout: [
-    [Element, 'label', { tag: 'label', class: 'label' }],
-    [Element, 'value', { tag: 'value', class: 'value' }],
-    [Element, 'input', { tag: 'input', type: 'text', class: 'input' }],
-    [Element, 'list', { class: 'list' },
-      [Element, 'head', { class: 'head' },
-        [Element, 'title', { class: 'title' }],
-        [Button, 'close', { class: 'close' }]
-      ],
-      [Element, 'body', { class: 'body' }]
+class Selecter extends EventEmitter {
+  static defaults = {
+    class: 'selecter',
+    first: null,
+    attributes: ['type', 'name', 'autocomplete', 'required'],
+    layout: [
+      [Element, 'label', { tag: 'label', class: 'label' }],
+      [Element, 'value', { tag: 'value', class: 'value' }],
+      [Element, 'input', { tag: 'input', type: 'text', class: 'input' }],
+      [Element, 'list', { class: 'list' },
+        [Element, 'head', { class: 'head' },
+          [Element, 'title', { class: 'title' }],
+          [Button, 'close', { class: 'close' }]
+        ],
+        [Element, 'body', { class: 'body' }]
+      ]
+    ],
+    events: [
+      ['ui.value.click', 'showList'],
+      ['ui.list.click', 'select'],
+      ['ui.close.click', 'hideList']
     ]
-  ],
-  events: [
-    ['ui.value.click', 'showList'],
-    ['ui.list.click', 'select'],
-    ['ui.close.click', 'hideList']
-  ]
-}
+  }
 
-class Selecter {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter, attach, dataset)
+    super()
 
+    this.init(options)
     this.build()
     this.setup()
     this.attach()
+  }
 
-    return this
+  init (options) {
+    this.options = Object.assign({}, Selecter.defaults, options || {})
+    Object.assign(this, attach, dataset)
   }
 
   setup () {
@@ -75,17 +73,18 @@ class Selecter {
       this.element.classList.add(this.options.case + '-case')
     }
   }
+
   /**
    * build method
    * @return {Object} The class instance
    */
   build () {
-    var tag = this.options.tag || 'span'
+    const tag = this.options.tag || 'span'
     this.element = document.createElement(tag)
     this.element.classList.add('selecter')
 
     if (this.options.class !== 'selecter') {
-      addClass(this.element, this.options.class)
+      css.add(this.element, this.options.class)
     }
 
     this.layout = new Layout(this.options.layout, this.element)
@@ -138,9 +137,9 @@ class Selecter {
 
     // console.log('list', list)
 
-    for (var i = 0; i < list.length; i++) {
+    for (let i = 0; i < list.length; i++) {
       // if (list.indexOf(list[i][0]) > -1) {
-      var item = document.createElement('div')
+      const item = document.createElement('div')
       item.classList.add('item')
       item.innerHTML = list[i][1]
       item.dataset.value = list[i][0]
@@ -169,6 +168,7 @@ class Selecter {
       this.element.classList.add('bold')
     }
   }
+
   showList () {
     // console.log('showList')
 

package/src/selector.js

@@ -121,8 +121,8 @@ class Selector {
   update (target) {
     target = target || this.target
     if (!target) return
-    var coords = target.getBoundingClientRect()
-    var pcoords = this.element.parentNode.getBoundingClientRect()
+    const coords = target.getBoundingClientRect()
+    const pcoords = this.element.parentNode.getBoundingClientRect()
 
     this.element.style.top = coords.top - pcoords.top + 'px'
     this.element.style.left = coords.left - pcoords.left + 'px'
@@ -158,7 +158,7 @@ class Selector {
     const offsetY = this.element.getBoundingClientRect().y
     const element = document.body
 
-    var ratio = parseInt(this.element.style.width, 10) / parseInt(this.element.style.height, 10)
+    const ratio = parseInt(this.element.style.width, 10) / parseInt(this.element.style.height, 10)
 
     this.border.setPointerCapture(ev.pointerId)
 

package/src/skin/material/button/action.sass

@@ -1,6 +1,6 @@
 
 // type action
-.material-button.type-action
+.button.type-action
   min-width: 36px
   transition: box-shadow .2s
   box-shadow: none
@@ -15,7 +15,7 @@
       fill: $default-color-text
 
 // styles
-.material-button.type-action
+.button.type-action
   &.style-dense,
   &.style-compact
     height: 32px
@@ -32,7 +32,7 @@
 
 
 // states
-.material-button.type-action
+.button.type-action
   &:hover
     //background-color: #E0E0E0;
 
@@ -43,7 +43,7 @@
     //background-color: rgba(255, 255, 255, 1)
 
 // color
-.material-button.type-action
+.button.type-action
   &.primary-color
     background-color: $primary-color
     color: $primary-color-text
@@ -65,8 +65,8 @@
 
 
 // theme
-.dark-mode .material-button.type-action,
-.material-button.type-action.dark-mode
+.dark-mode .button.type-action,
+.button.type-action.dark-mode
 
   //background-color: rgba(255, 255, 255, 0.95)
   color: $primary-color-text-dark

package/src/skin/material/button/button.sass

@@ -1,4 +1,4 @@
-.material-button
+.button
   display: flex
   -webkit-font-smoothing: antialiased
   white-space: nowrap
@@ -60,7 +60,7 @@
       order: 1
 
 // states
-.material-button
+.button
   &.is-disabled
     pointer-events: none
     opacity: .3
@@ -86,7 +86,7 @@
     opacity: .3
 
 // styles
-.material-button
+.button
   &.style-compact
     > .button-label
       padding-left: 0
@@ -100,7 +100,7 @@
       padding-bottom: 2px
 
 // color
-.material-button
+.button
   &.primary-color
     color: $primary-color
     &:focus
@@ -134,8 +134,8 @@
       background-color: rgba($secondary-color, .05)
 
 // theme
-.dark-mode .material-button,
-.material-button.dark-mode
+.dark-mode .button,
+.button.dark-mode
   color: $default-color-text-dark
   .button-icon
     svg

package/src/skin/material/button/file.sass

@@ -1,6 +1,6 @@
 
 // type file
-.material-button.type-file
+.button.type-file
   overflow: hidden
   position: relative
   vertical-align: middle

package/src/skin/material/button/floating.sass

@@ -1,6 +1,6 @@
 
 // type floating
-.material-button.type-floating
+.button.type-floating
   min-width: 56px
   min-height: 56px
   transition: box-shadow .2s
@@ -21,7 +21,7 @@
     background-color: rgba(0, 0, 0, 1)
 
 // states
-.material-button.type-floating
+.button.type-floating
   background-color: rgba(0, 0, 0, 0.05)
   &:focus
     background-color: rgba(0, 0, 0, 0.15)
@@ -33,7 +33,7 @@
     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)
 
 // color
-.material-button.type-floating
+.button.type-floating
   &.primary-color
     background-color: $primary-color
     color: $primary-color-text
@@ -68,8 +68,8 @@
       background-color: lighten($secondary-color, 5%)
 
 // theme
-.dark-mode .material-button.type-floating,
-.material-button.type-floating.dark-mode
+.dark-mode .button.type-floating,
+.button.type-floating.dark-mode
   .material-ripple
     opacity: .1
     background-color: rgba(255, 255, 255, 1)

package/src/skin/material/button/raised.sass

@@ -1,6 +1,6 @@
 
 // type raised
-.material-button.type-raised
+.button.type-raised
   min-width: 36px
   transition: box-shadow .2s
   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)
@@ -9,7 +9,7 @@
     background-color: rgba(0, 0, 0, 1)
 
 // states
-.material-button.type-raised
+.button.type-raised
   background-color: rgba(0, 0, 0, 0.05)
   &:focus
     background-color: rgba(0, 0, 0, 0.15)
@@ -21,7 +21,7 @@
     box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 6px 8px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
 
 // color
-.material-button.type-raised
+.button.type-raised
   &.primary-color
     background-color: $primary-color
     color: $primary-color-text
@@ -56,8 +56,8 @@
       background-color: lighten($secondary-color, 5%)
 
 // theme
-.dark-mode .material-button.type-raised,
-.material-button.type-raised.dark-mode
+.dark-mode .button.type-raised,
+.button.type-raised.dark-mode
   .material-ripple
     opacity: .1
     background-color: rgba(255, 255, 255, 1)

package/src/skin/material/button/stroked.sass

@@ -1,6 +1,6 @@
 
 // type stroked
-.material-button.type-stroked
+.button.type-stroked
   min-width: 36px
   transition: box-shadow .2s
   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)
@@ -8,7 +8,7 @@
     background-color: rgba(255, 255, 255, .3)
 
 // states
-.material-button.type-stroked
+.button.type-stroked
   &:hover
     //background-color: #E0E0E0;
   &:focus
@@ -19,7 +19,7 @@
     box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 6px 8px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
 
 // color
-.material-button.type-stroked
+.button.type-stroked
   &.primary-color
     background-color: $primary-color
     color: $primary-color-text
@@ -46,8 +46,8 @@
         background-color: $secondary-color
 
 // theme
-.dark-mode .material-button.type-stroked,
-.material-button.type-stroked.dark-mode
+.dark-mode .button.type-stroked,
+.button.type-stroked.dark-mode
 
   //background-color: rgba(255, 255, 255, 0.95)
   color: $primary-color-text-dark

package/src/skin/material/component/navigation.sass

@@ -1 +1,13 @@
-.navigation
+.navigation
+  flex: none
+  display: flex
+  flex-direction: column
+  width: 12px
+  margin: 0
+  overflow: hidden
+  background-color: #3a3a3a
+  transition: 0.1s linear width
+  &.type-rail
+    display: flex
+    flex-direction: column
+    width: 80px

package/src/skin/material/control/checkbox.sass

@@ -1,4 +1,4 @@
-.material-checkbox
+.checkbox
   display: block
   position: relative
   margin-left: 4px
@@ -17,7 +17,7 @@
     left: -10000px
     order: 2
 
-  .checkbox-control
+  .control
     //flex: none;
     order: 1
     cursor: pointer
@@ -29,7 +29,7 @@
     border-radius: 50%
 
     //margin: 10px 10px 10px 4px;
-    .checkbox-icon
+    .icon
       position: absolute
       top: 11px
       left: 11px
@@ -38,14 +38,14 @@
       transition: .3s
 
       //stroke: rgba(0, 0, 0, 0.5);
-      .checkbox-check
+      .check
         opacity: 0
         position: absolute
         fill: rgba(255, 255, 255, 0.95)
         top: 8px
         left: 8px
 
-  .checkbox-label
+  label
     flex: 1
     order: 3
     font-size: 1rem
@@ -56,13 +56,13 @@
     overflow: hidden
 
   &.is-checked
-    .checkbox-control
-      .checkbox-icon
+    .control
+      .icon
         transition: .3s
         border-color: $secondary-color
         background-color: $secondary-color
 
-        .checkbox-check
+        .check
           opacity: 1
           position: absolute
           fill: rgba(255, 255, 255, 0.95)
@@ -70,36 +70,36 @@
           left: 8px
 
   &.is-disabled
-    .checkbox-label
+    label
       opacity: .4
 
-    .checkbox-icon
+    .icon
       background-color: rgba(0, 0, 0, 0.26)
       border-color: rgba(0, 0, 0, 0.26)
       //opacity: .4
 
-    .checkbox-control
-      .checkbox-icon
+    .control
+      .icon
         opacity: .4
 
   &.is-focused
-    .checkbox-control
+    .control
       background-color: rgba(34, 31, 31, 0.05)
 
   &:active
-    .checkbox-control
-      //background-color: transparent;
+    .control
+      background-color: transparent
 
-.dark-mode .material-checkbox,
-.material-checkbox.dark-mode
-  > .material-control
-    > .checkbox-icon
+.dark-mode .checkbox,
+.checkbox.dark-mode
+  .control
+    .icon
       border: 2px solid rgba(255, 255, 255, 0.5)
 
   &.is-focused
-    .checkbox-control
+    .control
       background-color: rgba(255, 255, 255, 0.05)
 
   &.is-checked
-    .material-control
+    .control
       background-color: rgba(255, 255, 255, 0.5)

package/src/skin/material/module/ripple.sass

@@ -1,4 +1,4 @@
-.material-ripple
+.material-ripple, .ripple
   opacity: 1
   pointer-events: none
   z-index: 1

package/src/slider.js

@@ -8,7 +8,7 @@ import offset from './element/offset'
 import classify from './module/classify'
 // import control from './control';
 import attach from './module/attach'
-import css from './module/css'
+import * as css from './module/css'
 import emitter from './module/emitter'
 
 import icon from './skin/material/icon/pin.svg'

package/src/snackbar.js

@@ -13,9 +13,10 @@ class Snackbar extends EventEmitter {
     class: 'snackbar',
     transition: 225,
     duration: 4000,
+    stack: false,
     close: false,
     layout: [
-      [Text, 'text', { tag: 'span', class: 'text' }],
+      [Text, 'message', { tag: 'span', class: 'message' }],
       [Button, 'action', { class: 'action', type: 'link' }],
       [Button, 'close', { class: 'close', type: 'action' }]
     ],
@@ -23,24 +24,25 @@ class Snackbar extends EventEmitter {
       ['ui.action.click', 'action'],
       ['ui.close.click', 'destroy']
     ]
-  };
+  }
 
   constructor (options) {
     super()
 
     this.init(options)
     this.build(this.constructor)
-    this.render()    
+    this.render()
     this.bindEvents()
     this.show()
 
-    if (this.options.duration)
-      setTimeout(()=>{
+    if (this.options.duration) {
+      setTimeout(() => {
         this.destroy()
       }, this.options.duration)
+    }
   }
 
-  init(options) {
+  init (options) {
     this.options = Object.assign({}, Snackbar.defaults, options || {})
     Object.assign(this, build, bindEvents, display)
 
@@ -50,7 +52,7 @@ class Snackbar extends EventEmitter {
   buildSnackbarContainer (container = document.body) {
     // console.log('buildSnackbarContainer', container)
 
-    let snackbarContainer = container.querySelector('.snackbars')
+    const snackbarContainer = container.querySelector('.snackbars')
 
     // console.log('snackbarContainer', snackbarContainer)
 
@@ -59,12 +61,13 @@ class Snackbar extends EventEmitter {
       this.options.container.classList.add('snackbars')
       container.appendChild(this.options.container)
     } else {
+      if (this.options.stack === false) snackbarContainer.innerHTML = ''
       this.options.container = snackbarContainer
     }
   }
 
   render () {
-    this.ui.text.set(this.options.text)
+    this.ui.message.set(this.options.message)
 
     if (this.options.action) {
       this.ui.action.set(this.options.action)
@@ -82,7 +85,7 @@ class Snackbar extends EventEmitter {
     this.destroy()
   }
 
-  close() {
+  close () {
     // console.log('close')
     this.destroy()
   }

package/src/styles/M3/abstracts/variables.sass

@@ -0,0 +1,44 @@
+// Color Palette
+$color-primary: #3498db
+$color-secondary: #2ecc71
+$color-tertiary: #9b59b6
+$color-tonal: #d9e7cc
+$color-success: #2ecc71
+$color-warning: #f1c40f
+$color-danger: #e74c3c
+$color-light: #ecf0f1
+$color-dark: #34495e
+
+$text-on-primary: #ffffff
+$text-primary-on-dark: #ffffff
+$text-primary-on-light: #333333
+$text-on-tonal: #131F0D
+
+// Typography
+$font-primary: 'Helvetica Neue', Arial, sans-serif
+$font-secondary: 'Georgia', serif
+$font-size-base: 1rem // 16px
+$font-size-large: 1.25rem // 20px
+$font-size-small: 0.875rem // 14px
+
+// Spacing
+$spacing-unit: 10px
+
+// Breakpoints for Responsive Design
+$breakpoint-xs: 480px
+$breakpoint-sm: 768px
+$breakpoint-md: 992px
+$breakpoint-lg: 1200px
+
+// Z-index Layers
+$zindex-dropdown: 1000
+$zindex-sticky: 1020
+$zindex-fixed: 1030
+$zindex-modal-backdrop: 1040
+$zindex-modal: 1050
+$zindex-popover: 1060
+$zindex-tooltip: 1070
+
+// Other Variables
+$border-radius: 4px
+$box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)

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

@@ -0,0 +1,26 @@
+.button
+  font-size: 0.875rem
+  font-weight: 500
+  color: $text-on-primary
+  height: 40px
+  background-color: $color-primary
+  padding-left: 24px
+  padding-right: 24px
+  border-radius: 20px
+  border: none
+  overflow: hidden
+  &.style-filled
+    color: $text-on-primary
+    background-color: $color-primary
+  &.style-tonal
+    color: $text-on-tonal
+    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)
+  &.style-outlined
+    color: $color-primary
+    background-color: transparent
+    border-color: 2px solid #72776C
+  &.style-text
+    color: $color-primary