material 0.7.2 → 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/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.2",
+  "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,17 +18,9 @@
     "lightweight material design ui component es6 vanilla javascript"
   ],
   "devDependencies": {
-    "esbuild": "^0.14.47",
-    "esbuild-plugin-svg": "^0.1.0",
-    "@jgoz/esbuild-plugin-livereload": "^2.0.3",
     "standard": "^10.0.3"
   },
   "scripts": {
-    "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"
   }
 }

package/src/checkbox.js

@@ -1,74 +1,67 @@
-import events from './mixin/events'
-import control from './mixin/control'
-import label from './mixin/label'
-
-import insert from './element/insert'
-import build from './element/build'
-
-import emitter from './module/emitter'
+import EventEmitter from './mixin/events'
+// import control from './mixin/control'
+import build from './module/build'
 import attach from './module/attach'
 import * as css from './module/css'
 
 import icon from './skin/material/icon/checkbox.svg'
-// element related modules
-
-const defaults = {
-  prefix: 'material',
-  class: 'checkbox',
-  type: 'control',
-  // modules: [events, control, emitter, attach],
-  build: ['$root.material-checkbox', {},
-    ['input$input', {}],
-    ['span$control.checkbox-control']
-  ],
-  events: [
-    ['element.control.click', 'click', {}],
-    ['element.label.click', 'toggle', {}],
-    // for accessibility purpose
-    // ['element.input.click', 'toggle', {}],
-    ['element.input.focus', 'focus'],
-    ['element.input.blur', 'blur'],
-    ['element.input.keydown', 'keydown', {}]
-  ]
-}
+
+import Element from './element'
 
 class Checkbox {
+  static defaults = {
+    class: 'checkbox',
+    layout: [
+      [Element, 'input', { type: 'checkbox' } ],
+      [Element, 'control', { type: 'checkbox' } ],
+      [Element, 'label', { tag: 'label' }]
+    ],
+    events: [
+      ['ui.control.click', 'click'],
+      ['ui.label.click', 'toggle'],
+      // for accessibility purpose
+      // ['element.input.click', 'toggle'],
+      ['ui.input.focus', 'focus'],
+      ['ui.input.blur', 'blur'],
+      ['ui.input.keydown', 'keydown']
+    ]
+  }
+
   constructor (options) {
     this.init(options)
     this.build()
+    this.setup()
     this.attach()
-
-    return this
   }
 
   init (options) {
     this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, events, control, emitter, attach)
+    Object.assign(this, build, attach)
 
     return this
   }
 
-  build () {
+  setup () {
     this.element = build(this.options.build)
     this.element = this.element.root
 
-    this.element.control.innerHTML = icon
+    this.ui.control.innerHTML = icon
 
     const text = this.options.text || this.options.label
 
-    this.element.label = label(this.element, text, this.options)
+    this.ui.label.innerHTML = text
 
-    this.element.input.setAttribute('type', 'checkbox')
-    this.element.input.setAttribute('name', this.options.name)
-    this.element.input.setAttribute('aria-label', this.options.name)
+    this.ui.input.setAttribute('type', 'checkbox')
+    this.ui.input.setAttribute('name', this.options.name)
+    this.ui.input.setAttribute('aria-label', this.options.name)
 
     if (this.options.value) {
-      this.element.input.setAttribute('value', this.options.value)
+      this.ui.input.setAttribute('value', this.options.value)
     }
 
     if (this.options.disabled) {
       this.disabled = this.options.disabled
-      this.element.input.setAttribute('disabled', 'disabled')
+      this.ui.input.setAttribute('disabled', 'disabled')
       css.add(this.element, 'is-disabled')
     }
 
@@ -79,13 +72,6 @@ class Checkbox {
     if (this.options.value) {
       this.set('value', this.value)
     }
-
-    // insert if container options is given
-    if (this.options.container) {
-      insert(this.element, this.options.container)
-    }
-
-    return this
   }
 
   set (prop, value) {
@@ -106,15 +92,25 @@ class Checkbox {
     return this
   }
 
-  insert (container, context) {
-    insert(this.element, container, context)
-
+  check (checked) {
+    if (checked === true) {
+      css.add(this.element, 'is-checked')
+      this.ui.input.checked = true
+      this.checked = true
+      this.emit('change', this.checked)
+    } else {
+      css.remove(this.element, 'is-checked')
+      this.ui.input.checked = false
+      this.checked = false
+      this.emit('change', this.checked)
+    }
     return this
   }
 
+
   click (e) {
     this.toggle(e)
-    this.element.input.focus()
+    this.ui.input.focus()
 
     return this
   }
@@ -122,7 +118,7 @@ class Checkbox {
   setValue (value) {
     // console.log('setValue', value)
     this.value = value
-    this.element.input.setAttribute('value', value)
+    this.ui.input.setAttribute('value', value)
 
     return this
   }

package/src/element/insert.js

@@ -1,10 +1,10 @@
 import dom from '../module/dom'
 
-const insert = (element, container, context = 'bottom') => {
-  if (!element || !container) return
+const insert = (component, container, context = 'bottom') => {
+  if (!component || !container) return
 
-  element = element.root || element
-  container = container.root || container
+  element = component.element || component
+  container = container.element || container
 
   const contexts = ['top', 'bottom', 'after', 'before']
   const methods = ['prepend', 'append', 'after', 'before']

package/src/list.js

@@ -1,4 +1,4 @@
-import * css from './module/css'
+import * as css from './module/css'
 
 const defaults = {
   className: 'text',
@@ -10,8 +10,6 @@ class List {
   constructor (options) {
     this.options = Object.assign({}, defaults, options || {})
 
-    // console.log('options', this.options)
-
     this.build()
 
     return this

package/src/module/build.js

@@ -16,13 +16,11 @@ export default {
       css.add(this.element, this.options.class)
     }
 
-    if (defaults.class === 'account') console.log('data')
-
     if (this.options.data) {
       dataset(this.element, this.options.data)
     }
 
-    if (this.options.base === 'view') {
+    if (this.options.base === 'view' || this.options.base === 'app') {
       this.container = this.options.container || document.body
     } else {
       this.container = this.options.container

package/src/module/dom.js

@@ -1,6 +1,7 @@
 // DOM manipulation function
 
 function append (container, element) {
+  console.log(container, element)
   container.appendChild(element)
   return element
 }

package/src/module/request.js

@@ -0,0 +1,33 @@
+// request.js
+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/navigation.js

@@ -1,3 +1,4 @@
+import * as css from './module/css'
 import build from './module/build'
 
 class Navigation {
@@ -8,12 +9,17 @@ class Navigation {
   constructor (options) {
     this.init(options)
     this.build()
+    this.setup()
   }
 
   init (options) {
-    this.options = Object.assign({}, Navigation.defaults, options || {})
+    this.options = { ...Navigation.defaults, ...options }
     Object.assign(this, build)
   }
+
+  setup() {
+    if (this.options.type) css.add(this.element, 'type-', this.options.type)
+  }
 }
 
 export default Navigation

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