material 0.7.0 → 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/form.js

@@ -0,0 +1,27 @@
+import build from './src/form/build'
+import cancel from './src/form/cancel'
+import controller from './src/form/controller'
+import create from './src/form/create'
+import data from './src/form/data'
+import del from './src/form/delete'
+import fetch from './src/form/fetch'
+import render from './src/form/render'
+import set from './src/form/set'
+import submit from './src/form/submit'
+import update from './src/form/update'
+import verify from './src/form/verify'
+
+export {
+  build,
+  cancel,
+  controller,
+  create,
+  data,
+  del,
+  fetch,
+  render,
+  set,
+  submit,
+  update,
+  verify
+}

package/index.js

@@ -1,72 +1,73 @@
-import AppBar from 'material/src/appbar'
-import Button from 'material/src/control/button'
-import Banner from 'material/src/banner'
-import Calendar from 'material/src/calendar'
-import Card from 'material/src/card'
-import Component from 'material/src/component'
-import Container from 'material/src/container'
-import Checkbox from 'material/src/checkbox'
-import Dialog from 'material/src/dialog'
-import Divider from 'material/src/divider'
-import Drawer from 'material/src/drawer'
-import Element from 'material/src/element'
-import Form from 'material/src/form'
-import Icon from 'material/src/icon'
-import Image from 'material/src/image'
-import Item from 'material/src/item'
-import Layout from 'material/src/layout'
-import List from 'material/src/list'
-import Menu from 'material/src/menu'
-import Progress from 'material/src/progress'
-import Slider from 'material/src/slider'
-import Snackbar from 'material/src/snackbar'
-import Switch from 'material/src/switch'
-import Tabs from 'material/src/tabs'
-import Text from 'material/src/text'
-import Textfield from 'material/src/textfield'
-import Toolbar from 'material/src/toolbar'
-import View from 'material/src/view'
-import Tree from 'material/src/tree'
-
-import emitter from 'material/src/module/emitter'
-import mediator from 'material/src/module/mediator'
-import display from 'material/src/mixin/display'
-import build from 'material/src/module/build'
-import jsontohtml from 'material/src/module/jsontohtml'
+import AppBar from './src/appbar'
+import Button from './src/button'
+import Card from './src/card'
+import Component from './src/component'
+import DateHour from './src/control/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 Element from './src/element'
+import Layout from './src/layout'
+import List from './src/list'
+import Tabview from './src/tabview'
+import TabView from './src/tabview'
+import Text from './src/text'
+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 events from './src/module/attach'
+import emitter from './src/module/emitter'
+import jsonToHTML from './src/module/jsontohtml'
+import mediator from './src/module/mediator'
+import observer from './src/module/observer'
+import smoothscroll from './src/module/smoothscroll'
 
 export {
-  AppBar,
+  AppBar
   Button,
-  Banner,
-  Calendar,
+  DateHour,
+  Datehour,
+  Dialog,
   Card,
-  Checkbox,
   Component,
-  Container,
-  Dialog,
-  Divider,
-  Drawer,
   Element,
-  Form,
-  Icon,
-  Image,
-  Item,
-  Layout,
-  List,
+  File,
+  Loading,
   Menu,
-  Slider,
+  Select,
+  Selecter,
+  Snackbar,
   Switch,
+  Switcher,
+  Tabview,
+  TabView,
   Text,
   Textfield,
   Toolbar,
-  Tree,
-  Tabs,
-  View,
-  Snackbar,
-  Progress,
-  emitter,
-  display,
+  Tooltip,
+  Layout,
+  List,
+  attach,
+  attributes,
   build,
+  dataset,
+  display,
+  events,
   emitter,
-  mediator
+  jsonToHTML,
+  mediator,
+  observer,
+  smoothscroll
 }

package/list.js

@@ -0,0 +1,35 @@
+import add from './src/list/add'
+import build from './src/list/build'
+import click from './src/list/click'
+import create from './src/list/create'
+import display from './src/list/display'
+import empty from './src/list/empty'
+import filter from './src/list/filter'
+import image from './src/list/image'
+import load from './src/list/load'
+import remove from './src/list/remove'
+import render from './src/list/render'
+import request from './src/list/request'
+import search from './src/list/search'
+import select from './src/list/select'
+import status from './src/list/status'
+import update from './src/list/update'
+
+export {
+  add,
+  build,
+  click,
+  create,
+  display,
+  empty,
+  filter,
+  image,
+  load,
+  remove,
+  render,
+  request,
+  search,
+  select,
+  status,
+  update
+}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "material",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "A lightweight implementation of Material Design Components - ES6",
   "main": "index.js",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@gitlab.com/alkaloid/material.git"
@@ -17,24 +18,14 @@
     "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",

package/src/appbar.js

@@ -1,216 +1,19 @@
-import passiveEvents from './module/passive'
-import create from './mixin/create'
-import insert from './mixin/insert'
-import offset from './element/offset'
-
-const defaults = {
-  prefix: 'material',
-  class: 'appbar',
-  tag: 'header'
-}
+import build from './module/build'
 
 class AppBar {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
+  static defaults = {
+    class: 'appbar'
+  }
+
   constructor (options) {
     this.init(options)
     this.build()
-    this.attach()
-    return this
   }
 
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, insert)
-
-    /// console.log('waterfALL', this.options.waterfall)
-
-    this.waterfall = this.options.waterfall
-  }
-
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.element = create(this.options)
-
-    // console.log(this.options.height, this.options.fixed)
-
-    if (this.options.height) {
-      this.element.style.height = this.options.height + 'px'
-    }
-
-    if (this.options.fixed) {
-      // console.log('is-fixed')
-      this.element.classList.add('is-fixed')
-    }
-
-    if (this.options.flexible) {
-      this.element.classList.add('is-flexible')
-    }
-
-    // if (this.options.container) {
-    //   this.insert(this.options.container)
-    // }
-
-    return this
+    this.options = Object.assign({}, AppBar.defaults, options || {})
+    Object.assign(this, build)
   }
-
-  attach () {
-    this.element.addEventListener('DOMNodeInserted', (e) => {
-      var textNode = e.target
-      if (textNode !== this.element) return
-
-      var size = this.size = offset(this.element, 'height')
-
-      var view = this.view = this.element.parentNode
-
-      // console.log('view', view)
-
-      var p = 'top'
-
-      if (this.options.type == 'bottom') p = 'bottom'
-
-      var padding = window.getComputedStyle(view)['padding-' + p]
-      // console.log('paddingTop', padding)
-      // if (!padding) padding = window.getComputedStyle(this.element.parentNode, 'padding')
-      // console.log('padding', padding)
-
-      padding = parseInt(padding, 10)
-      // size = parseInt(size, 10)
-
-      this.padding = padding
-
-      // console.log(' toolbar inserted in', size, 'padding', padding)
-      var ptop = this.ptop = size + padding
-
-      // console.log('ptop', ptop)
-
-      if (document.body == view) {
-        // console.log('toolbar container body')
-        this.element.classList.add('toolbar-body')
-      }
-
-      // console.log('p', p)
-
-      view.setAttribute('style', 'padding-' + p + ': ' + ptop + 'px')
-      this.scroll(view)
-    })
-  }
-
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
-  set (prop, value) {
-    switch (prop) {
-      case 'minimize':
-        this.element.setAttribute('style', 'height: 64px')
-        break
-      case 'value':
-        this.setValue(value)
-        break
-      case 'label':
-        this.setLabel(value)
-        break
-      default:
-        this.check(prop)
-    }
-
-    return this
-  }
-
-  scroll (view) {
-    // console.log('initScroll')
-
-    var isBody = false
-
-    var element = view
-
-    this.scrolling = view
-
-    if (view === document.body) {
-      isBody = true
-      element = document
-      this.scrolling = document.body
-    }
-
-    view.classList.add()
-
-    element.addEventListener('scroll', (e) => {
-      var scrollTop
-      if (isBody) {
-        scrollTop = (document.documentElement ||
-       document.body.parentNode ||
-       document.body).scrollTop
-      } else {
-        scrollTop = view.scrollTop
-      }
-
-      if (scrollTop > 0) {
-        this.element.classList.add('is-scrolled')
-      } else {
-        this.element.classList.remove('is-scrolled')
-      }
-
-      // console.log('scroll', scrollTop)
-
-      this.update(e, scrollTop)
-    })
-  }
-
-  update (e, scrollTop) {
-    if (this.options.fixed) { this.fixed(e, scrollTop) }
-    if (this.options.flexible) { this.flexible(e, scrollTop) }
-  }
-
-  flexible (e, scrollTop) {
-    var size = offset(this.element, 'height')
-    // console.log('flexible', size, this.element.offsetHeight, scrollTop)
-    // if (scrollTop < this.size) {
-    //
-    var height = '64'
-    if (size < height) {
-      this.element.style.height = height + 'px'
-    } else {
-      height = this.size - scrollTop
-      if (height < 64) height = 64
-      this.element.style.height = height + 'px'
-    }
-
-    // console.log('scroll', this.element.style.top, scrollTop)
-
-    // if (scrollTop > 50) {
-    //   this.element.style.trans = scrollTop + 'px'
-    // } else {
-    //   this.element.style.top = scrollTop + 'px'
-    // }
-    // }
-      // this.element.style.top = scrollTop + 'px'
-      // this.element.style.height = this.size - scrollTop
-    // } else {
-    //   console.log('size scroll', this.size, scrollTop)
-
-    //   this.element.style.height = this.size - scrollTop + 'px'
-    //   // this.element.style.top = scrollTop + 'px'
-    // }
-  }
-
-  fixed (e, scrollTop) {
-    if (scrollTop > 0) {
-      this.element.style.transform = 'translateY(' + scrollTop + 'px)'
-    } else {
-      this.element.style.transform = 'translateY(' + scrollTop + 'px)'
-    }
-  }
-
-  waterfall$ (e) {}
 }
 
 export default AppBar

package/src/badge.js

@@ -0,0 +1,27 @@
+import build from './module/build'
+
+class Badge {
+  static defaults = {
+    class: 'badge'
+  }
+
+  constructor (options) {
+    this.init(options)
+    this.build()
+  }
+
+  init (options) {
+    this.options = Object.assign({}, Badge.defaults, options || {})
+    Object.assign(this, build)
+  }
+
+  set (text) {
+    if (text) {
+      this.element.innerHTML = text
+    } else {
+      this.element.innerHTML = ''
+    }
+  }
+}
+
+export default Badge