material 0.7.2 → 0.7.5

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

@@ -0,0 +1,32 @@
+const request = async (url, method = 'GET', body = null, headers = {}, signal = null) => {
+  const defaultHeaders = {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+
+  const options = {
+    method,
+    headers: { ...defaultHeaders, ...headers },
+    signal
+  }
+
+  if (body) {
+    options.body = JSON.stringify(body)
+  }
+
+  try {
+    const response = await fetch(url, options)
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    const data = await response.json()
+
+    return data
+  } catch (error) {
+    // Handle fetch or data processing errors
+    // console.log('error', error)
+    return { error }
+  }
+}
+
+export default request

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,18 +1,67 @@
+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'
 
-class Navigation {
+class Navigation extends EventEmitter {
   static defaults = {
-    class: 'navigation'
+    class: 'navigation',
+    tag: 'nav',
+    events: [
+      ['element.click', 'toggle']
+    ]
   }
 
   constructor (options) {
+    super()
+
     this.init(options)
     this.build()
+    this.attach()
+    this.setup()
   }
 
   init (options) {
-    this.options = Object.assign({}, Navigation.defaults, options || {})
-    Object.assign(this, build)
+    this.options = { ...Navigation.defaults, ...options }
+    Object.assign(this, build, attach, display)
+  }
+
+  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)
+  }
+
+  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 === 'divider') {
+      item = new Element({ tag: 'li', class: 'divider' })
+    } else if (obj.type === 'divider') {
+      item = new Element({ tag: 'li', class: 'divider' })
+    } else {
+      obj.container = this.ui.list
+      obj.class = 'item'
+      item = new Button(obj).on('click', (ev) => {
+        // console.log('select', ev.target.name)
+        this.emit('select', ev.target.name)
+      })
+    }
+
+    return this
   }
 }
 

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

@@ -3,7 +3,11 @@
   display: flex
   flex-direction: column
   width: 12px
-  background-color: #3a3a3a
   margin: 0
   overflow: hidden
-  transition: 0.1s linear width
+  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/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' }]
     ],
@@ -60,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)

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/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