material 0.9.0 → 0.9.2

package/index.js

@@ -1,9 +1,12 @@
+// base classes
+import Control from './src/class/control'
+import Component from './src/class/component'
+// components
 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/datehour'
 import Dialog from './src/dialog'
 import Drawer from './src/drawer'
@@ -11,7 +14,6 @@ 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 Loading from './src/loading'
 import Menu from './src/menu'
@@ -31,22 +33,34 @@ import Toolbar from './src/toolbar'
 import Tooltip from './src/tooltip'
 import View from './src/view'
 import attributes from './src/module/attributes'
-import build from './src/module/build'
+// mixins
+import EventEmitter from './src/mixin/emitter'
+import display from './src/mixin/display'
+import build from './src/mixin/build'
+// modules
+import clone from './src/module/clone'
 import dataset from './src/module/dataset'
 import device from './src/module/device'
-import display from './src/mixin/display'
-import request from './src/module/request'
-import events from './src/module/events'
 import emitter from './src/module/emitter'
+import events from './src/module/events'
 import jsonToHTML from './src/module/jsontohtml'
+import { create } from './src/module/layout'
 import mediator from './src/module/mediator'
+import merge from './src/module/merge'
 import observer from './src/module/observer'
+import request from './src/module/request'
+import ripple from './src/module/ripple'
 import smoothscroll from './src/module/smoothscroll'
 
 export {
-  AppBar, Button, Card, Checkbox, Component, DateHour, Dialog, Drawer, Element,
-  File, Form, Image, Layout, List, Loading, Menu, Navigation, Progress, Select,
+  // classes
+  Component, Control,
+  AppBar, Button, Card, Checkbox, DateHour, Dialog, Drawer, Element,
+  File, Form, Image, List, Loading, Menu, Navigation, Progress, Select,
   Selecter, Slider, Snackbar, Switch, Switcher, Tabs, TabView, Text, Textfield, Toolbar, Tooltip,
-  View, attributes, build, dataset, device, display, events, emitter, jsonToHTML, mediator,
-  observer, request, smoothscroll
+  View,
+  // mixins and  modules
+  EventEmitter,
+  attributes, build, clone, create, dataset, device, display, events, emitter, jsonToHTML, mediator, merge,
+  observer, request, ripple, smoothscroll
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
   "main": "index.js",
   "type": "module",

package/scripts/doccoAssistant.js

@@ -0,0 +1,25 @@
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+// Construct __dirname equivalent for ES module
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const doccoOutputDir = path.join(__dirname, '../docs/src') // Path to Docco output directory
+const indexFilePath = path.join(__dirname, '..', 'docs', 'index.html') // Path to your index file
+
+let indexContent = '<html><head><title>Library Index</title></head><body>'
+indexContent += '<h1>Index of Documented Modules</h1><ul>'
+
+fs.readdirSync(doccoOutputDir).forEach(file => {
+  console.log('file', file)
+  if (path.extname(file) === '.html') {
+    const moduleName = path.basename(file, '.html')
+    indexContent += `<li><a href="src/${file}">${moduleName}</a></li>`
+  }
+})
+
+indexContent += '</ul></body></html>'
+
+fs.writeFileSync(indexFilePath, indexContent, 'utf8')
+console.log('Index file generated at:', indexFilePath)

package/src/appbar.js

@@ -1,8 +1,6 @@
-import build from './module/build'
+import build from './mixin/build'
 
 class AppBar {
-  static uid = "material-appbar";
-
   static defaults = {
     class: 'appbar'
   }
@@ -13,7 +11,7 @@ class AppBar {
   }
 
   init (options) {
-    this.options = Object.assign({}, AppBar.defaults, options || {})
+    this.options = { ...AppBar.defaults, ...options }
     Object.assign(this, build)
   }
 }

package/src/badge.js

@@ -1,23 +1,17 @@
-import build from './module/build'
-import display from './mixin/display'
+import { Component, build, display } from '../index'
 
 const isStringNumber = (str) => !isNaN(parseFloat(str)) && isFinite(str)
 
-class Badge {
-  static uid = "material-badge";
-
+class Badge extends Component {
   static defaults = {
-    class: 'badge'
+    class: 'badge',
+    mixins: [build, display]
   }
 
   constructor (options) {
-    this.init(options)
-    this.build()
-  }
+    super(options)
 
-  init (options) {
-    this.options = Object.assign({}, Badge.defaults, options || {})
-    Object.assign(this, build, display)
+    this.build()
   }
 
   set (text) {
@@ -29,7 +23,6 @@ class Badge {
   }
 
   inc (value) {
-    // console.log('inc', value)
     let actual = this.element.innerHTML
 
     if (actual === '') actual = '0'

package/src/button.js

@@ -1,22 +1,23 @@
-import EventEmitter from './mixin/emitter'
-import build from './module/build'
-import display from './mixin/display'
-import events from './module/events'
-import dataset from './module/dataset'
-import ripple from './module/ripple'
+import {
+  Control,
+  display,
+  dataset,
+  ripple
+} from '../index'
 
 const DEFAULT_TYPE = 'button'
 const DEFAULT_CLASS = 'button'
 
-class Button extends EventEmitter {
+class Button extends Control {
   static isComponent () {
     return true
   }
 
   static defaults = {
-    class: DEFAULT_CLASS,
+    class: 'button',
     tag: 'button',
     styles: ['style', 'color'],
+    mixins: [display],
     ripple: true,
     stopPropagation: false,
     events: [
@@ -30,18 +31,11 @@ class Button extends EventEmitter {
   }
 
   constructor (options) {
-    super()
+    super(options)
 
-    this.init(options)
-    this.build()
     this.setup()
   }
 
-  init (options) {
-    this.options = { ...Button.defaults, ...options }
-    Object.assign(this, build, display)
-  }
-
   setup () {
     this.setAttributes()
     this.styleAttributes()
@@ -49,8 +43,6 @@ class Button extends EventEmitter {
     if (this.options.text) {
       this.element.innerHTML = this.element.innerHTML + this.options.text
     }
-
-    events.attach(this.options.events, this)
   }
 
   setAttributes () {

package/src/calendar.js

@@ -8,56 +8,32 @@ import Button from './button'
 import iconBack from './skin/material/icon/back.svg'
 import iconForward from './skin/material/icon/forward.svg'
 
-const defaults = {
-  prefix: 'material',
-  class: 'calendar',
-  target: '.week-day',
-  functions: ['newEvent'],
-  rangedays: 7,
-  months: ['January', 'February', 'Mars', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-  days: ['Sunday', 'Monday', 'Tuesday', 'wednesday', 'Thursday', 'Friday', 'Saturday'],
-  mode: 'view',
-  range: [8, 18],
-  display: 'three',
-  weekend: [0, 1],
-  events: [
-    ['root.dblclick', 'add']
-  ]
-}
-
-/**
- * List view class
- * @class
- * @param {Object} options Default options for view
- * @extends {View}
- * @since 0.0.4
- * @author Jerome Vial
- *
- * @type {prime}
- */
 class Calendar {
-  static uid = "material-calendar";
+  static defaults = {
+    prefix: 'material',
+    class: 'calendar',
+    target: '.week-day',
+    functions: ['newEvent'],
+    rangedays: 7,
+    months: ['January', 'February', 'Mars', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+    days: ['Sunday', 'Monday', 'Tuesday', 'wednesday', 'Thursday', 'Friday', 'Saturday'],
+    mode: 'view',
+    range: [8, 18],
+    display: 'three',
+    weekend: [0, 1],
+    events: [
+      ['root.dblclick', 'add']
+    ]
+  }
 
-  /**
-   * init
-   * @return {Object} The class options
-   */
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-
-    this.init()
+    this.init(options)
     this.build()
-    events.attach(this.options.events, this)
-
-    return this
+    this.setup()
   }
 
-  /**
-   * [_initView description]
-   * @return  Class instance
-   */
   init (options) {
-    // assign modules
+    this.options = { ...Calendar.defaults, ...options }
     Object.assign(this, emitter, attach)
 
     // init function
@@ -74,11 +50,10 @@ class Calendar {
     return this
   }
 
-  /**
-   * getMonday
-   * @param  {Date} d
-   * @return {Date}
-   */
+  setup () {
+    events.attach(this.options.events, this)
+  }
+
   getFirstDayOfWeek (d) {
     d = new Date(d)
     const day = d.getDay()

package/src/card.js

@@ -1,10 +1,8 @@
-import build from './module/build'
+import build from './mixin/build'
 import display from './mixin/display'
 import position from './mixin/position'
 
 class Card {
-  static uid = "material-card";
-
   static defaults = {
     class: 'card',
     position: {
@@ -23,7 +21,7 @@ class Card {
   }
 
   init (options) {
-    this.options = Object.assign({}, Card.defaults, options || {})
+    this.options = { ...Card.defaults, ...options }
     Object.assign(this, build, display, position)
   }
 }

package/src/checkbox.js

@@ -1,16 +1,13 @@
 import EventEmitter from './mixin/events'
 // import control from './mixin/control'
-import build from './module/build'
+import build from './mixin/build'
 import events from './module/events'
 import * as css from './module/css'
 
 import icon from './skin/material/icon/checkbox.svg'
-
 import Element from './element'
 
 class Checkbox {
-  static uid = "material-checkbox";
-
   static defaults = {
     class: 'checkbox',
     layout: [
@@ -36,10 +33,8 @@ class Checkbox {
   }
 
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = { ...Checkbox.defaults, ...options }
     Object.assign(this, build, attach)
-
-    return this
   }
 
   setup () {

package/src/class/component.js

@@ -0,0 +1,19 @@
+import build from '../module/build'
+
+class Component {
+  static base = 'component'
+
+  constructor (options) {
+    this.options = { ...this.constructor.defaults, ...options }
+
+    const mixins = this.options.mixins || []
+
+    for (let i = 0; i < mixins.length; i++) {
+      Object.assign(this, mixins[i])
+    }
+
+    build(this)
+  }
+}
+
+export default Component

package/src/class/control.js

@@ -0,0 +1,33 @@
+import Component from './component'
+import events from '../module/events'
+
+class Control extends Component {
+  static base = 'control'
+
+  constructor (options) {
+    super(options)
+    this.events = {}
+
+    if (this.options.events) {
+      events.attach(this.options.events, this)
+    }
+  }
+
+  on (event, listener) {
+    if (!this.events[event]) {
+      this.events[event] = []
+    }
+    this.events[event].push(listener)
+
+    return this
+  }
+
+  emit (event, ...args) {
+    if (this.events[event]) {
+      this.events[event].forEach(listener => listener.apply(this, args))
+    }
+    return this
+  }
+}
+
+export default Control

package/src/component.js

@@ -4,60 +4,26 @@ import insert from './mixin/insert'
 
 import emitter from './module/emitter'
 
-const defaults = {
-  prefix: 'material',
-  class: 'component',
-  tag: 'span'
-}
-
-/**
- * Base class for all ui components
- * @class
- * @param {Object} options - The component options
- * @return {Object} The class Instance
- */
+// Depracted
 
-/**
- * Class representing a UI Container. Can add components.
- *
- * @extends Component
- * @return {parent} The class instance
- * @example new Container({
- *   container: document.body
- * });
- */
 class Component {
-  static uid = "material-component";
+  static defaults = {
+    prefix: 'material',
+    class: 'component',
+    tag: 'span'
+  }
 
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
     this.init(options)
     this.build()
-
-    return this
   }
 
-  /**
-   * init method
-   * @param  {Object} Options
-   * @return {Object} Instance
-   */
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = { ...Component.defaults, ...options }
 
     Object.assign(this, emitter, events, insert)
-
-    return this
   }
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
   build () {
     this.element = create(this.options)
 

package/src/datehour.js

@@ -1,8 +1,6 @@
-import build from './module/build'
+import build from './mixin/build'
 
 class DateHour {
-  static uid = "material-datehour";
-
   static defaults = {
     class: 'date',
     tag: 'span'
@@ -14,7 +12,7 @@ class DateHour {
   }
 
   init (options) {
-    this.options = Object.assign({}, DateHour.defaults, options || {})
+    this.options = { ...DateHour.defaults, ...options }
     Object.assign(this, build)
   }
 

package/src/dialog.js

@@ -6,11 +6,9 @@ import display from './mixin/display'
 import Element from './element'
 import Text from './text'
 import Button from './button'
-import Layout from './layout'
+import { create } from './module/layout'
 
 class Dialog {
-  static uid = "material-dialog";
-
   static defaults = {
     class: 'dialog',
     close: true,
@@ -46,7 +44,7 @@ class Dialog {
   }
 
   init (options) {
-    this.options = Object.assign({}, Dialog.defaults, options || {})
+    this.options = { ...Dialog.defaults, ...options }
     Object.assign(this, emitter, display)
   }
 
@@ -68,7 +66,7 @@ class Dialog {
     this.surface.classList.add('surface')
     this.element.appendChild(this.surface)
 
-    this.layout = new Layout(this.options.layout, this.surface)
+    this.layout = create(this.options.layout, this.surface)
     this.ui = this.layout.component
 
     if (this.options.container) {

package/src/drawer.js

@@ -6,22 +6,22 @@ import events from './mixin/events'
 import create from './element/create'
 import emitter from './module/emitter'
 
-const defaults = {
-  prefix: 'material',
-  class: 'drawer',
-  modifier: 'width',
-  state: 'closed',
-  position: 'left',
-  tag: 'div',
-  width: '340',
-  modules: [emitter, events]
-}
+// Depracted, see Navigation
 
 class Drawer {
-  static uid = "material-drawer";
+  static defaults = {
+    prefix: 'material',
+    class: 'drawer',
+    modifier: 'width',
+    state: 'closed',
+    position: 'left',
+    tag: 'div',
+    width: '340',
+    modules: [emitter, events]
+  }
 
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = { ...Drawer.defaults, ...options }
 
     init(this)
 

package/src/element.js

@@ -1,33 +1,29 @@
 class Element {
-  static uid = "material-element";
-
   static isElement () {
     return true
   }
 
-  constructor (options) {
-    this.options = Object.assign({}, options || {})
-    // console.log('element options', options)
-    const element = document.createElement(this.options.tag || 'div')
-
-    const container = this.options.container
-    delete this.options.container
-    delete this.options.tag
-
-    if (options.html) element.innerHTML = this.options.html
-    delete this.options.html
+  constructor (options = {}) {
+    // Use the spread operator for default options
+    this.options = { tag: 'div', container: null, html: '', text: '', id: '', ...options }
 
-    if (options.text) element.textContent = this.options.text
-    delete this.options.text
+    const element = document.createElement(this.options.tag)
 
-    if (options.id) element.setAttribute('id', options.id)
+    // Apply HTML, text, and id if provided
+    if (this.options.html) element.innerHTML = this.options.html
+    if (this.options.text) element.textContent = this.options.text
+    if (this.options.id) element.setAttribute('id', this.options.id)
 
-    for (const [property, value] of Object.entries(this.options)) {
-      element.setAttribute(property, value)
+    // Apply additional attributes
+    for (const key in this.options) {
+      if (!['tag', 'container', 'html', 'text', 'id'].includes(key)) {
+        element.setAttribute(key, this.options[key])
+      }
     }
 
-    if (container) {
-      container.appendChild(element)
+    // Append to container if available
+    if (this.options.container) {
+      this.options.container.appendChild(element)
     }
 
     return element

package/src/file.js

@@ -1,12 +1,10 @@
 import EventEmitter from './mixin/emitter'
 import events from './module/events'
-import build from './module/build'
+import build from './mixin/build'
 import dataset from './module/dataset'
 import attributes from './module/attributes'
 
 class File {
-  static uid = "material-file";
-
   static defaults = {
     class: 'file',
     attributes: ['name', 'accept', 'required', 'disabled', 'multiple'],
@@ -20,7 +18,7 @@ class File {
     this.init(options)
     this.build()
     this.buildInput()
-    events.attach(this.options.events, this)
+    this.setup()
   }
 
   init (options) {
@@ -46,6 +44,10 @@ class File {
     }
   }
 
+  setup () {
+    events.attach(this.options.events, this)
+  }
+
   change (e) {
     this.emit('change', e)
   }

package/src/form/build.js

@@ -1,6 +1,6 @@
 import dataset from '../view/dataset'
 
-import Layout from '../layout'
+import { create } from '../module/layout'
 
 export default {
   build () {
@@ -51,7 +51,7 @@ export default {
   buildLayout () {
     // console.log('buildLayout')
     this.form.innerHTML = ''
-    this.layout = new Layout(this.options.layout, this.form)
+    this.layout = create(this.options.layout, this.form)
     this.ui = this.layout.component
 
     // console.log('ui', this.ui)