material 0.7.1 → 0.7.4

package/LICENSE

@@ -1,20 +1,11 @@
-The MIT License (MIT)
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, under the terms of the GNU General Public License as published by the Free Software Foundation, version 3 of the License.
 
-Copyright (c) 2019 2nd Floor
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.

package/README.md

@@ -1,5 +1 @@
-Material JS is a set of user interface components for the web. 
-
-
-[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)
-=======
+Material JS is a set of user interface ES6 components for the web. 

package/index.js

@@ -1,32 +1,39 @@
 import AppBar from './src/appbar'
+import Badge from './src/badge'
 import Button from './src/button'
 import Card from './src/card'
+import Checkbox from './src/checkbox'
 import Component from './src/component'
-import DateHour from './src/control/datehour'
+import DateHour from './src/datehour'
 import Dialog from './src/dialog'
-import File from './src/control/file'
-import Loading from './src/control/loading'
-import Menu from './src/control/menu'
-import Select from './src/select'
-import Selecter from './src/control/selecter'
-import Snackbar from './src/snackbar'
-import Switch from './src/switch'
-import Switcher from './src/control/switcher'
-import Text from './src/text'
-import Textfield from './src/textfield'
+import Drawer from './src/drawer'
 import Element from './src/element'
+import File from './src/file'
+import Form from './src/form'
+import Image from './src/image'
 import Layout from './src/layout'
 import List from './src/list'
-import Tabview from './src/tabview'
+import Loading from './src/loading'
+import Menu from './src/menu'
+import Navigation from './src/navigation'
+import Progress from './src/progress'
+import Select from './src/select'
+import Selecter from './src/selecter'
+import Snackbar from './src/snackbar'
+import Slider from './src/slider'
+import Switch from './src/switch'
+import Switcher from './src/switcher'
+import Tabs from './src/tabs'
 import TabView from './src/tabview'
 import Text from './src/text'
+import Textfield from './src/textfield'
 import Toolbar from './src/toolbar'
 import Tooltip from './src/tooltip'
 import attach from './src/module/attach'
 import attributes from './src/module/attributes'
 import build from './src/module/build'
 import dataset from './src/module/dataset'
-import display from './src/module/display'
+import display from './src/mixin/display'
 import events from './src/module/attach'
 import emitter from './src/module/emitter'
 import jsonToHTML from './src/module/jsontohtml'
@@ -35,39 +42,9 @@ import observer from './src/module/observer'
 import smoothscroll from './src/module/smoothscroll'
 
 export {
-  AppBar
-  Button,
-  DateHour,
-  Datehour,
-  Dialog,
-  Card,
-  Component,
-  Element,
-  File,
-  Loading,
-  Menu,
-  Select,
-  Selecter,
-  Snackbar,
-  Switch,
-  Switcher,
-  Tabview,
-  TabView,
-  Text,
-  Textfield,
-  Toolbar,
-  Tooltip,
-  Layout,
-  List,
-  attach,
-  attributes,
-  build,
-  dataset,
-  display,
-  events,
-  emitter,
-  jsonToHTML,
-  mediator,
-  observer,
-  smoothscroll
+  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,
+  observer, smoothscroll
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.7.1",
+  "version": "0.7.4",
   "description": "A lightweight implementation of Material Design Components - ES6",
   "main": "index.js",
   "type": "module",
@@ -9,7 +9,7 @@
     "url": "git+ssh://git@gitlab.com/alkaloid/material.git"
   },
   "author": "Jérôme Vial <jerome.vial@gmail.com>",
-  "license": "MIT",
+  "license": "GPL-3",
   "bugs": {
     "url": "https://gitlab.com/alkaloid/material/issues"
   },
@@ -18,30 +18,9 @@
     "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"
+    "standard": "^10.0.3"
   },
   "scripts": {
-    "dev": "rollup -c --watch",
-    "reload": "livereload 'dist/' -d",
-    "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
     }