material 0.7.4 → 0.7.6

package/index.js

@@ -29,6 +29,7 @@ import Text from './src/text'
 import Textfield from './src/textfield'
 import Toolbar from './src/toolbar'
 import Tooltip from './src/tooltip'
+import View from './src/view'
 import attach from './src/module/attach'
 import attributes from './src/module/attributes'
 import build from './src/module/build'
@@ -45,6 +46,6 @@ export {
   AppBar, Button, Card, Checkbox, Component, DateHour, Dialog, Drawer, Element,
   File, Form, Image, Layout, List, Loading, Menu, Navigation, Progress, Select,
   Selecter, Slider, Snackbar, Switch, Switcher, Tabs, TabView, Text, Textfield, Toolbar, Tooltip,
-  attach, attributes, build, dataset, display, events, emitter, jsonToHTML, mediator,
+  View, attach, attributes, build, dataset, display, events, emitter, jsonToHTML, mediator,
   observer, smoothscroll
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "material",
-  "version": "0.7.4",
-  "description": "A lightweight implementation of Material Design Components - ES6",
+  "version": "0.7.6",
+  "description": "A lightweight implementation of Material Design Components for the web - ES6",
   "main": "index.js",
   "type": "module",
   "repository": {
@@ -15,7 +15,7 @@
   },
   "homepage": "https://gitlab.com/alkaloid/material",
   "keywords": [
-    "lightweight material design ui component es6 vanilla javascript"
+    "lightweight material design ui component web es6 vanilla javascript"
   ],
   "devDependencies": {
     "standard": "^10.0.3"

package/src/button.js

@@ -46,18 +46,12 @@ class Button extends EventEmitter {
   setup () {
     this.setAttributes()
     this.styleAttributes()
-    this.buildElements()
 
     if (this.options.text) {
       this.element.innerHTML = this.element.innerHTML + this.options.text
     }
   }
 
-  buildElements () {
-    this.buildIcon()
-    this.buildLabel()
-  }
-
   setAttributes () {
     const { type, name, value, title, text, label, tooltip, data, case: caseOption } = this.options
 
@@ -80,26 +74,6 @@ class Button extends EventEmitter {
     if (bold) this.element.classList.add('bold')
   }
 
-  buildLabel () {
-    if (!this.options.label) return
-
-    this.label = document.createElement('label')
-    this.label.classList.add('label')
-    this.label.innerHTML = this.options.label
-
-    this.element.appendChild(this.label)
-  }
-
-  buildIcon () {
-    if (!this.options.icon) return
-
-    this.icon = document.createElement('i')
-    this.icon.classList.add('icon')
-    this.icon.innerHTML = this.options.icon
-
-    this.element.appendChild(this.icon)
-  }
-
   set (prop, value) {
     // console.log('set', this.element, prop, value)
     switch (prop) {
@@ -107,15 +81,15 @@ class Button extends EventEmitter {
         this.element.value = value
         break
       case 'label':
-        if (!this.label) this.buildLabel()
-        this.label.innerHTML = value
+        if (!this.ui.label) this.buildLabel()
+        this.ui.label.innerHTML = value
         break
       case 'text':
         this.element.innerHTML = value
         break
       case 'icon':
-        if (this.icon) {
-          this.icon.innerHTML = value
+        if (this.ui.icon) {
+          this.ui.icon.innerHTML = value
         }
         break
       case 'enable':
@@ -133,13 +107,13 @@ class Button extends EventEmitter {
   }
 
   setLabel (value) {
-    if (this.label) {
-      this.label.innerHTML = value
+    if (this.ui.label) {
+      this.ui.label.innerHTML = value
     }
   }
 
   setText (value) {
-    if (this.label) {
+    if (this.ui.label) {
       this.setLabel(value)
     } else {
       this.element.innerHTML = value

package/src/card.js

@@ -11,11 +11,6 @@ const defaults = {
 }
 
 class Card {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
     this.init(options)
     this.build()

package/src/element/insert.js

@@ -1,9 +1,11 @@
 import dom from '../module/dom'
 
 const insert = (component, container, context = 'bottom') => {
+  // console.log('insert', component, container, context)
+
   if (!component || !container) return
 
-  element = component.element || component
+  const element = component.element || component
   container = container.element || container
 
   const contexts = ['top', 'bottom', 'after', 'before']

package/src/file.js

@@ -13,7 +13,6 @@ class File {
   constructor (options) {
     this.init(options)
     this.build()
-    this.buildLabel()
     this.buildInput()
     this.attach()
   }
@@ -23,15 +22,6 @@ class File {
     Object.assign(this, build)
   }
 
-  buildLabel () {
-    if (this.options.label) {
-      this.label = document.createElement('label')
-      this.label.classList.add('label')
-      this.label.innerHTML = this.options.label
-      this.element.appendChild(this.label)
-    }
-  }
-
   buildInput () {
     this.field = document.createElement('div')
     this.field.classList.add('field')

package/src/item.js

@@ -1,93 +1,45 @@
-import Layout from './layout'
+import build from './module/build'
 
-import create from './mixin/create'
-import insert from './mixin/insert'
-
-const defaults = {
-  prefix: 'material',
-  class: 'item',
-  type: 'default',
-  tag: 'li',
-  types: {
-    default: 'span',
-    display4: 'h1',
-    display3: 'h1',
-    display2: 'h1',
-    display1: 'h1',
-    headline: 'h1',
-    title: 'h2',
-    subheading2: 'h3',
-    subheading1: 'h4',
-    body: 'p',
-    body2: 'aside',
-    caption: 'span'
+class Item {
+  static defaults = {
+    prefix: 'material',
+    class: 'item',
+    type: 'default',
+    tag: 'span',
+    types: {
+      default: 'span',
+      display4: 'h1',
+      display3: 'h1',
+      display2: 'h1',
+      display1: 'h1',
+      headline: 'h1',
+      title: 'h2',
+      subheading2: 'h3',
+      subheading1: 'h4',
+      body: 'p',
+      body2: 'aside',
+      caption: 'span'
+    }
   }
-}
 
-/**
- * The class represents an item ie for list
- *
- * @class
- * @return {Object} The class instance
- * @example new Item(object);
- */
-class Item {
-  /**
-   * init
-   * @return {Object} The class options
-   */
   constructor (options) {
     this.init(options)
     this.build()
+    this.setup()
+  }
 
-    return this
+  setup () {
+    if (this.options.text) this.set(this.options.text)
+    if (this.options.name) this.element.setAttribute('name', this.options.name)
   }
 
-  /**
-   * [init description]
-   * @param  {?} options [description]
-   * @return {?}         [description]
-   */
   init (options) {
-    // merge options
-    this.options = Object.assign({}, defaults, options || {})
-
-    // define class
-
-    // assign modules
-    Object.assign(this, insert)
-  }
+    this.options = Object.assign({}, Item.defaults, options || {})
+    Object.assign(this, build)
 
-  /**
-   * Build function for item
-   * @return {Object} This class instance
-   */
-  build () {
-    // define main tag
     this.options.tag = this.options.tag || this.options.types[this.options.type]
-
-    this.options.tag = this.options.tag
-
-    this.element = create(this.options)
-
-    if (this.options.text) {
-      this.set(this.options.text)
-    }
-
-    if (this.options.layout) {
-      this.layout = new Layout(this.options.layout, this.element)
-    } else {
-      if (this.options.container) {
-        this.insert(this.options.container)
-      }
-    }
   }
 
-  /**
-   * Get or set text value of the element
-   * @param {string} value The text to set
-   * @returns {*}
-   */
   set (value) {
     if (value) {
       if (this.element.innerText) {
@@ -95,8 +47,6 @@ class Item {
       } else {
         this.element.textContent = value
       }
-
-      return this
     }
 
     return this

package/src/loader.js

@@ -0,0 +1,88 @@
+class Loader {
+  static defaults = {
+    class: 'loader'
+  }
+
+  constructor (options) {
+    this.options = Object.assign({}, Loader.defaults, options || {})
+
+    // Object.assign(this, attach, mediator, build)
+
+    this.build()
+
+    return this
+  }
+
+  build () {
+    this.element = document.createElement(this.options.tag || 'div')
+    this.element.classList.add(this.options.class || 'loader')
+
+    this.container = document.createElement('div')
+    this.container.classList.add('container')
+    this.element.appendChild(this.container)
+
+    const svg = `
+      <svg 
+        version="1.1" 
+        id="dc-spinner" 
+        xmlns="http://www.w3.org/2000/svg" 
+        x="0px" y="0px"
+        width:"38"
+        height:"38"
+        viewBox="0 0 38 38" 
+        preserveAspectRatio="xMinYMin meet"
+      >
+        <path class="circles" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
+          C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
+          C34.797,11.841,28.159,5.203,20,5.203z">
+        </path>
+
+        <path class="circles" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
+          S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
+          S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
+        </path>
+
+        <path class="circletwo" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
+            c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
+        <animateTransform
+              attributeName="transform"
+              type="rotate"
+              from="0 20 20"
+              to="360 20 20"
+              calcMode="spline"
+              keySplines="0.4, 0, 0.2, 1"
+              keyTimes="0;1"
+              dur="2s"
+              repeatCount="indefinite" />      
+         </path>
+
+        <path class="circleone" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
+        c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
+        C12.875,32.922,7.078,27.125,7.078,20z">
+         <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 20 20"
+            to="360 20 20"
+            dur="1.8s"  
+            repeatCount="indefinite" />  
+        </path>
+      </svg>`
+
+    this.container.innerHTML = svg
+    this.text = document.createElement(this.options.tag || 'span')
+    this.text.classList.add('text')
+    this.text.innerHTML = this.options.text
+    this.container.appendChild(this.text)
+  }
+
+  show () {
+    this.element.classList.add('show')
+  }
+
+  hide () {
+    this.element.classList.remove('show')
+  }
+}
+
+export default Loader

package/src/mixin/control.js

@@ -8,10 +8,6 @@ const KEYCODE = {
 }
 
 const control = {
-  /**
-   * [toggle description]
-   * @return {Object} The class instance
-   */
   toggle () {
     if (this.disabled) return
 
@@ -26,10 +22,6 @@ const control = {
     return this
   },
 
-  /**
-   * Set checkbox value
-   * @param {boolean} value [description]
-   */
   check (checked) {
     if (checked === true) {
       css.add(this.element, 'is-checked')
@@ -45,10 +37,6 @@ const control = {
     return this
   },
 
-  /**
-   * [initLabel description]
-   * @return {?} [description]
-   */
   label (label, container) {
     if (!label) return
 
@@ -65,11 +53,6 @@ const control = {
     insert(this.element.label, container)
   },
 
-  /**
-   * [_initIcon description]
-   * @param  {string} type
-   * @return {string}
-   */
   icon (icon, container, position) {
     if (!icon) return
 
@@ -88,10 +71,6 @@ const control = {
     this.element.icon.innerHTML = icon
   },
 
-  /**
-   * [initLabel description]
-   * @return {?} [description]
-   */
   error (error) {
     error = error || this.options.error
     if (this.options.error === null) return
@@ -137,12 +116,6 @@ const control = {
     }
   },
 
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
   get (prop) {
     switch (prop) {
       case 'name':
@@ -165,10 +138,6 @@ const control = {
     return this.element.dataset.name
   },
 
-  /**
-   * [_onInputFocus description]
-   * @return {?} [description]
-   */
   focus () {
     if (this.disabled === true) return this
 
@@ -177,10 +146,6 @@ const control = {
     return this
   },
 
-  /**
-   * [_onInputBlur description]
-   * @return {?} [description]
-   */
   blur () {
     css.remove(this.element, 'is-focused')
     return this

package/src/mixin/display.js

@@ -10,10 +10,7 @@ export default {
 
   show () {
     // console.log('show', this.visible)
-
-    // if (this.options.transition) {
-    //   this.element.style.display = 'initial'
-    // }
+    if (!this.element) return
 
     this.element.getBoundingClientRect()
 
@@ -29,11 +26,6 @@ export default {
   },
 
   hide () {
-    // console.log('hide')
-    // if (this.element.style.display === 'none') return
-    // clearTimeout(this.displayTimeout)
-    // this._display = getComputedStyle(this.element).display
-
     if (!this.element) return
 
     this.element.classList.remove('show')
@@ -43,13 +35,6 @@ export default {
       this.underlay.classList.remove('show')
     }
 
-    // if (this.options.transition) {
-    //   this.displayTimeout = setTimeout(() => {
-    //     console.log('display: none', this._display)
-    //     this.element.style.display = 'none'
-    //   }, this.options.transition)
-    // }
-
     this.emit?.('hide')
     return this
   },

package/src/mixin/label.js

@@ -3,10 +3,6 @@ import insert from '../element/insert'
 
 const prefix = 'material'
 
-/**
- * [initLabel description]
- * @return {?} [description]
- */
 function label (root, text, options) {
   text = text || null
 

package/src/module/attach.js

@@ -1,5 +1,5 @@
-// Assuming extract is imported or defined elsewhere
 import extract from './extract'
+import last from './last'
 
 const attachModule = {
   attach (events) {
@@ -18,7 +18,7 @@ const attachModule = {
         keys.pop()
       }
 
-      const bound = this.last(keys.join('.'))
+      const bound = last(keys.join('.'), this)
 
       let handler = null
 
@@ -45,14 +45,8 @@ const attachModule = {
     })
 
     return this
-  },
-
-  last (str) {
-    if (!str) return this
-    if (!str.includes('.')) return this[str]
-
-    return str.split('.').reduce((acc, key) => acc[key], this)
   }
+
 }
 
 export default attachModule

package/src/module/attributes.js

@@ -1,21 +1,14 @@
 const special = ['required', 'disabled', 'multiple', 'checked']
 
-function attributes (element, o) {
-  // console.log('attributes', o.attributes, element)
+const attributes = (element, options) => {
+  if (!element || !options.attributes) return
 
-  if (!element) return
-
-  for (let i = 0; i < o.attributes.length; i++) {
-    const attribute = o.attributes[i]
-
-    if (o[attribute] && o[attribute] !== 'undefined') {
-      if (special.indexOf(attribute) > -1) {
-        element.setAttribute(attribute, attribute)
-      } else {
-        element.setAttribute(attribute, o[attribute])
-      }
+  options.attributes.forEach(attribute => {
+    if (options[attribute] && String(options[attribute]) !== 'undefined') {
+      const value = special.includes(attribute) ? attribute : options[attribute]
+      element.setAttribute(attribute, value)
     }
-  }
+  })
 }
 
 export default attributes

package/src/module/build.js

@@ -33,9 +33,34 @@ export default {
       this.ui = this.layout.component
     }
 
+    this.ui = this.ui || {}
+
+    if (this.options.label) this.buildLabel()
+    if (this.options.icon) this.buildIcon()
+
     if (this.options.show === true && this.show) this.show()
   },
 
+  buildLabel () {
+    if (!this.options.label) return
+
+    this.ui.label = document.createElement('label')
+    this.ui.label.classList.add('label')
+    this.ui.label.innerHTML = this.options.label
+
+    this.element.appendChild(this.ui.label)
+  },
+
+  buildIcon () {
+    if (!this.options.icon) return
+
+    this.ui.icon = document.createElement('i')
+    this.ui.icon.classList.add('icon')
+    this.ui.icon.innerHTML = this.options.icon
+
+    this.element.appendChild(this.ui.icon)
+  },
+
   appendTo (container) {
     container.appendChild(this.element)
   }

package/src/module/cookie.js

@@ -0,0 +1,24 @@
+const cookie = {
+  set: (name, value, expire = 365) => {
+    const d = new Date()
+    d.setTime(d.getTime() + (expire * 24 * 60 * 60 * 1000))
+    const expires = `expires=${d.toUTCString()}`
+    document.cookie = `${name}=${value};${expires};path=/`
+  },
+  get: name => {
+    const nameEQ = `${name}=`
+    const ca = decodeURIComponent(document.cookie).split(';')
+
+    for (let c of ca) {
+      while (c.charAt(0) === ' ') c = c.substring(1)
+      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length)
+    }
+
+    return ''
+  },
+  del: name => {
+    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
+  }
+}
+
+export default cookie

package/src/module/last.js

@@ -1,18 +1,8 @@
-export default {
-  (str) => {
-    // console.log('_path', str)
-    if (!str) return this
-    else if (!str.match(/\./)) return this[str]
-    var last
+const last = (str, that) => {
+  if (!str) return that
+  if (!str.includes('.')) return that[str]
 
-    var keys = str.split('.')
-    for (var i = 0, l = keys.length; i < l; i++) {
-      var key = keys[i]
-
-      last = last || this
-      last = last[key]
-    }
-
-    return last
-  }
+  return str.split('.').reduce((acc, key) => acc[key], that)
 }
+
+export default last