material 0.7.1 → 0.7.2

package/dist/demo.js

@@ -1,5 +1,3 @@
-console.log('demo')
-
 import {
   Button,
   Component,
@@ -35,8 +33,10 @@ import iconApps from './icon/apps.svg'
 import iconStar from './icon/star.svg'
 import iconHappy from './icon/happy.svg'
 
+console.log('demo')
+
 console.log('log')
-var list = [{
+const list = [{
   text: 'One',
   name: 'one'
 }, {
@@ -51,7 +51,7 @@ var list = [{
 }]
 
 document.addEventListener('DOMContentLoaded', function () {
-  var layout = new Layout([Component, 'demo', { display: 'flex', direction: 'vertical' },
+  const layout = new Layout([Component, 'demo', { display: 'flex', direction: 'vertical' },
     [Component, 'head', { display: 'flex', direction: 'horizontal' },
       [Toolbar, 'toolbar', { flex: 1, display: 'flex', direction: 'horizontal' },
         [Button, 'menu-navi', { icon: iconMenu, type: 'action' }],
@@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', function () {
       ],
       [List, 'navi-list', { theme: 'dark' }]
     ],
-    [Tabs, 'tabs', { color: 'primary', list: list, flex: 'none' }],
+    [Tabs, 'tabs', { color: 'primary', list, flex: 'none' }],
     [Container, 'body', { flex: '1' },
       [Container, 'container-components', { },
         [Text, 'text', { text: 'Components', type: 'title' }]
@@ -75,7 +75,7 @@ document.addEventListener('DOMContentLoaded', function () {
       // Buttons
       [Card, 'buttons', { },
         [Toolbar, 'toolbar-buttons', {},
-          [Text, 'buttons-title', { text: 'Buttons'}]
+          [Text, 'buttons-title', { text: 'Buttons' }]
         ],
         [Container, 'button-body', {},
           [Button, 'first', { text: 'Flat' }],
@@ -88,7 +88,7 @@ document.addEventListener('DOMContentLoaded', function () {
       // Buttons
       [Card, 'buttons', { },
         [Toolbar, 'toolbar-buttons', {},
-          [Text, 'buttons-title', { text: 'Floating Buttons'}]
+          [Text, 'buttons-title', { text: 'Floating Buttons' }]
         ],
         [Container, 'button-body', {},
           [Button, 'fifth', { icon: iconStar, type: 'floating', color: 'primary' }],
@@ -99,7 +99,7 @@ document.addEventListener('DOMContentLoaded', function () {
       ],
       [Card, 'checkboxes', { },
         [Toolbar, 'toolbar', {},
-          [Text, 'checkbox-title', { text: 'Checkboxes'}]
+          [Text, 'checkbox-title', { text: 'Checkboxes' }]
         ],
         [Container, 'checkbox-body', {},
           [Checkbox, 'checkbox', { text: 'Checkbox' }],
@@ -109,7 +109,7 @@ document.addEventListener('DOMContentLoaded', function () {
       ],
       [Card, 'switches', { },
         [Toolbar, 'switch-toolbar', {},
-          [Text, 'switch-title', { text: 'Switches'}]
+          [Text, 'switch-title', { text: 'Switches' }]
         ],
         [Container, 'switch-body', {},
           [Switch, 'switch', { text: 'Switch' }],
@@ -119,7 +119,7 @@ document.addEventListener('DOMContentLoaded', function () {
       ],
       [Card, 'progress indicators', { },
         [Toolbar, 'progress-toolbar', {},
-          [Text, 'progress-title', { text: 'Progress indicators'}]
+          [Text, 'progress-title', { text: 'Progress indicators' }]
         ],
         [Container, 'progress-body', {},
           [Progress, 'progress', { progress: '60%' }],
@@ -128,7 +128,7 @@ document.addEventListener('DOMContentLoaded', function () {
       ],
       [Card, 'sliders', { },
         [Toolbar, 'slider-toolbar', {},
-          [Text, 'slider-title', { text: 'Sliders'}]
+          [Text, 'slider-title', { text: 'Sliders' }]
         ],
         [Container, 'slider-body', {},
           [Slider, 'slider', { text: 'Slider' }],
@@ -139,7 +139,7 @@ document.addEventListener('DOMContentLoaded', function () {
     ]
   ], document.body)
 
-  var moreButton = layout.get('menu-more').on('click', (e) => {
+  const moreButton = layout.get('menu-more').on('click', (e) => {
     layout.get('more-menu').show(e)
   })
 
@@ -151,7 +151,7 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   })
 
-  var naviMenu = layout.get('menu-navi')
+  const naviMenu = layout.get('menu-navi')
 
   naviMenu.on('click', (e) => {
     layout.get('navi').open()

package/esbuild.js

@@ -0,0 +1,22 @@
+import esbuild from 'esbuild'
+import svg from 'esbuild-plugin-svg'
+
+const outfile = './dist/demo.js'
+
+const option = {
+  entryPoints: ['./dist/demo-bundle.js'],
+  outfile,
+  bundle: true,
+  minify: true,
+  sourcemap: false,
+  format: 'iife',
+  plugins: [svg()]
+}
+
+if (build.branch !== 'master') {
+  option.sourcemap = true
+}
+
+esbuild
+  .build(option)
+  .catch(() => process.exit(1))

package/esbuild.watch.js

@@ -0,0 +1,25 @@
+import esbuild from 'esbuild'
+import svg from 'esbuild-plugin-svg'
+import { livereloadPlugin } from '@jgoz/esbuild-plugin-livereload'
+
+esbuild
+  .build({
+    entryPoints: ['./dist/demo.js'],
+    outfile: './dist/demo-bundle.js',
+    bundle: true,
+    format: 'iife',
+    minify: false,
+    sourcemap: true,
+    plugins: [svg()],
+    watch: {
+      onRebuild (error, result) {
+        if (error) console.error('watch build failed:', error)
+        else {
+          console.log('watch build succeeded:', result)
+          // HERE: somehow restart the server from here, e.g., by sending a signal that you trap and react to inside the server.
+        }
+      }
+    }
+  }).then(result => {
+    console.log('watching...')
+  })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "A lightweight implementation of Material Design Components - ES6",
   "main": "index.js",
   "type": "module",
@@ -18,30 +18,17 @@
     "lightweight material design ui component es6 vanilla javascript"
   ],
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-es2015-rollup": "^3.0.0",
-    "npm-run-all": "^4.1.1",
-    "require-dir": "^0.3.0",
-    "rollup": "^0.49.2",
-    "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-commonjs": "^8.2.0",
-    "rollup-plugin-node-resolve": "^3.0.0",
-    "rollup-plugin-npm": "^2.0.0",
-    "rollup-plugin-uglify-es": "0.0.1",
-    "standard": "^10.0.3",
-    "uglify-es": "^3.0.28"
+    "esbuild": "^0.14.47",
+    "esbuild-plugin-svg": "^0.1.0",
+    "@jgoz/esbuild-plugin-livereload": "^2.0.3",
+    "standard": "^10.0.3"
   },
   "scripts": {
-    "dev": "rollup -c --watch",
-    "reload": "livereload 'dist/' -d",
+    "build": "node ./esbuild.js",
+    "build:watch": "node ./esbuild.watch.js",
     "styles": "sass --watch dist/styles/demo.sass:dist/demo.css",
     "watch": "npm-run-all --parallel reload dev",
     "docs": "jsdoc src -r -d docs",
     "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "dependencies": {
-    "fs-extra": "^11.1.1"
   }
 }

package/src/badge.js

@@ -15,7 +15,7 @@ class Badge {
     Object.assign(this, build)
   }
 
-  set(text) {
+  set (text) {
     if (text) {
       this.element.innerHTML = text
     } else {

package/src/button.js

@@ -1,21 +1,21 @@
 import EventEmitter from './mixin/emitter'
-
 import build from './module/build'
 import display from './mixin/display'
 import bindEvents from './module/events'
-
 import dataset from './module/dataset'
 import ripple from './module/ripple'
 
-class Button extends EventEmitter{
+const DEFAULT_TYPE = 'button'
+const DEFAULT_CLASS = 'button'
+
+class Button extends EventEmitter {
   static isComponent () {
     return true
   }
 
   static defaults = {
-    class: 'button',
+    class: DEFAULT_CLASS,
     tag: 'button',
-    modules: [build, bindEvents],
     styles: ['style', 'color'],
     ripple: true,
     stopPropagation: false,
@@ -29,11 +29,6 @@ class Button extends EventEmitter{
     ]
   }
 
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
     super()
 
@@ -41,112 +36,68 @@ class Button extends EventEmitter{
     this.build()
     this.setup()
     this.bindEvents()
-
-    if (this.options.container) {
-      this.append(this.options.container)
-    }
-
-    return this
   }
 
   init (options) {
-    this.options = Object.assign({}, Button.defaults, options || {})
+    this.options = { ...Button.defaults, ...options }
     Object.assign(this, build, display, bindEvents)
-
   }
 
   setup () {
+    this.setAttributes()
     this.styleAttributes()
-
-    this.buildIcon()
-    this.buildLabel()
+    this.buildElements()
 
     if (this.options.text) {
       this.element.innerHTML = this.element.innerHTML + this.options.text
     }
+  }
 
-    if (this.options.data) {
-      dataset(this.element, this.options.data)
-    }
-
-    if (this.options.type) {
-      this.element.setAttribute('type', this.options.type)
-    } else {
-      this.element.setAttribute('type', 'button')
-    }
-
-    if (this.options.name) {
-      this.element.setAttribute('name', this.options.name)
-    }
-
-    if (this.options.value) {
-      this.element.setAttribute('value', this.options.value)
-    }
-
-    if (this.options.title) {
-      this.element.setAttribute('title', this.options.title)
-    }
-
-    this.element.setAttribute('aria-label', this.options.text || this.options.label || this.options.class)
-
-    if (this.options.tooltip) {
-      this.element.setAttribute('data-tooltip', this.options.tooltip)
-    }
+  buildElements () {
+    this.buildIcon()
+    this.buildLabel()
+  }
 
-    if (this.options.case) {
-      this.element.classList.add(this.options.case + '-case')
-    }
+  setAttributes () {
+    const { type, name, value, title, text, label, tooltip, data, case: caseOption } = this.options
 
+    this.element.setAttribute('type', type ?? DEFAULT_TYPE)
+    if (name) this.element.setAttribute('name', name)
+    if (value) this.element.setAttribute('value', value)
+    if (title) this.element.setAttribute('title', title)
+    this.element.setAttribute('aria-label', text ?? label ?? DEFAULT_CLASS)
+    if (tooltip) this.element.setAttribute('data-tooltip', tooltip)
+    if (data) dataset(this.element, data)
+    if (caseOption) this.element.classList.add(`${caseOption}-case`)
     if (this.options.ripple) ripple(this.element)
   }
 
-  append (container) {
-    container = container || this.options.container
-    if (this.options.container) {
-      container.appendChild(this.element)
-    }
+  styleAttributes () {
+    const { style, size, color, bold } = this.options
+    if (style) this.element.classList.add(`style-${style}`)
+    if (size) this.element.classList.add(`${size}-size`)
+    if (color) this.element.classList.add(`color-${color}`)
+    if (bold) this.element.classList.add('bold')
   }
 
   buildLabel () {
     if (!this.options.label) return
 
-    if (this.options.label) {
-      this.label = document.createElement('label')
-      this.label.classList.add('label')
-      this.label.innerHTML = this.options.label
+    this.label = document.createElement('label')
+    this.label.classList.add('label')
+    this.label.innerHTML = this.options.label
 
-      this.element.appendChild(this.label)
-    }
+    this.element.appendChild(this.label)
   }
 
   buildIcon () {
     if (!this.options.icon) return
 
-    if (this.options.icon) {
-      this.icon = document.createElement('i')
-      this.icon.classList.add('icon')
-      this.icon.innerHTML = this.options.icon
-
-      this.element.appendChild(this.icon)
-    }
-  }
-
-  styleAttributes () {
-    if (this.options.style) {
-      this.element.classList.add('style-' + this.options.style)
-    }
-
-    if (this.options.size) {
-      this.element.classList.add(this.options.size + '-size')
-    }
-
-    if (this.options.color) {
-      this.element.classList.add('color-' + this.options.color)
-    }
+    this.icon = document.createElement('i')
+    this.icon.classList.add('icon')
+    this.icon.innerHTML = this.options.icon
 
-    if (this.options.bold) {
-      this.element.classList.add('bold')
-    }
+    this.element.appendChild(this.icon)
   }
 
   set (prop, value) {
@@ -156,9 +107,8 @@ class Button extends EventEmitter{
         this.element.value = value
         break
       case 'label':
-        if (this.label) {
-          this.label.innerHTML = value
-        }
+        if (!this.label) this.buildLabel()
+        this.label.innerHTML = value
         break
       case 'text':
         this.element.innerHTML = value
@@ -168,6 +118,12 @@ class Button extends EventEmitter{
           this.icon.innerHTML = value
         }
         break
+      case 'enable':
+        this.element.disabled = false
+        break
+      case 'disable':
+        this.element.disabled = true
+        break
       default:
         // console.log('prop', prop)
         this.element.innerHTML = prop
@@ -177,12 +133,12 @@ class Button extends EventEmitter{
   }
 
   setLabel (value) {
-    // console.log('setLabel', value)
-    this.label.innerHTML = value
+    if (this.label) {
+      this.label.innerHTML = value
+    }
   }
 
   setText (value) {
-    // console.log('setText', value)
     if (this.label) {
       this.setLabel(value)
     } else {
@@ -190,18 +146,12 @@ class Button extends EventEmitter{
     }
   }
 
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
-  get (prop, value) {
+  get (prop) {
     switch (prop) {
       case 'value':
         return this.element.value
       case 'label':
-        return this.label.innerHTML
+        return this.label?.innerHTML ?? this.element.value
       default:
         return this.element.value
     }