material 0.9.20 → 0.9.22

package/src/module/request.js

@@ -5,36 +5,69 @@ const request = async (
   headers = {},
   signal = null,
   debug = false,
-  cache = 'no-store' // Adding cache parameter with a default value
+  cache = 'no-store'
 ) => {
-  // console.trace('request')
-  const defaultHeaders = {
-    Accept: 'application/json',
-    'Content-Type': 'application/json'
-  }
-
   const options = {
     method,
-    headers: { ...defaultHeaders, ...headers },
+    headers: {}, // We'll set headers based on body type
     signal,
-    cache // Including the cache option in the request
+    cache
   }
 
-  if (debug) {
-    console.log('debug', options)
+  // Handle headers and body based on body type
+  if (body) {
+    if (body instanceof FormData) {
+      // For FormData, don't set Content-Type - browser will set it automatically
+      options.body = body
+      options.headers = {
+        Accept: 'application/json',
+        ...headers
+      }
+
+      if (debug) {
+        console.group('FormData Contents:')
+        for (const pair of body.entries()) {
+          console.log(`${pair[0]}: ${pair[1]}`)
+        }
+        console.groupEnd()
+      }
+    } else {
+      // For JSON data
+      options.headers = {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        ...headers
+      }
+      options.body = JSON.stringify(body)
+    }
+  } else {
+    // No body, use default headers
+    options.headers = {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      ...headers
+    }
   }
 
-  if (body) {
-    options.body = JSON.stringify(body)
+  if (debug) {
+    console.group('Request Debug:')
+    console.log('URL:', url)
+    console.log('Method:', method)
+    console.log('Options:', { ...options, body: options.body instanceof FormData ? '[FormData]' : options.body })
+    console.groupEnd()
   }
 
   try {
     const response = await fetch(url, options)
+
     if (!response.ok) {
-      // console.log('Error', response)
+      if (debug) {
+        console.error('Response error:', response.status, response.statusText)
+      }
+      throw new Error(`HTTP error! status: ${response.status}`)
     }
 
-    // Determine response type based on 'Accept' header
+    // Handle response based on Accept header
     if (headers.Accept === 'text/xml') {
       return await response.text()
     } else {
@@ -44,7 +77,7 @@ const request = async (
     if (headers.Accept === 'text/xml') {
       throw error
     } else {
-      throw { error }
+      throw { error: error.message || 'Request failed' }
     }
   }
 }

package/src/selector.js

@@ -26,7 +26,7 @@ class Selector {
 
   init (options) {
     this.options = Object.assign({}, Selector.defaults, options || {})
-    Object.assign(this, emitter, attach)
+    Object.assign(this, emitter, events)
   }
 
   /**

package/src/skin/material/control/colorpicker.sass

@@ -0,0 +1,188 @@
+.colorpicker
+  display: none
+  position: absolute
+  width: 280px
+  background-color: var(--md-sys-color-surface)
+  border-radius: 4px
+  box-shadow: var(--md-sys-elevation-3)
+  z-index: 1000
+  
+  // Panel container
+  .panel
+    padding: 16px
+  
+   // Color gradient area
+  .gradient
+    position: relative
+    width: 100%
+    height: 150px
+    margin-bottom: 16px
+    border-radius: 4px
+    background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor)
+    cursor: pointer
+
+    .marker
+      position: absolute
+      width: 12px
+      height: 12px
+      margin: -6px
+      border: 2px solid #fff
+      border-radius: 50%
+      background-color: currentColor
+      box-shadow: 0 1px 4px rgba(0,0,0,0.2)
+      cursor: pointer
+      transition: transform 0.1s ease
+      
+      &:focus
+        outline: none
+        transform: scale(1.1)
+  
+  // Hue and Alpha sliders
+  .hue,
+  .alpha
+    position: relative
+    width: 100%
+    height: 20px
+    margin: 8px 0
+    border-radius: 10px
+
+    input[type="range"]
+      position: absolute
+      width: 100%
+      height: 100%
+      margin: 0
+      opacity: 0
+      cursor: pointer
+      appearance: none
+
+    .marker
+      position: absolute
+      width: 20px
+      height: 20px
+      transform: translateX(-50%)
+      border: 2px solid #fff
+      border-radius: 50%
+      background-color: currentColor
+      box-shadow: 0 1px 4px rgba(0,0,0,0.2)
+      pointer-events: none
+
+  .hue
+    background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%)
+
+  .alpha
+    background-image: linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa)
+    background-size: 8px 8px
+    background-position: 0 0, 4px 4px
+
+    &:after
+      content: ''
+      position: absolute
+      width: 100%
+      height: 100%
+      border-radius: inherit
+      background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor)
+
+  // Input and Preview
+  .input
+    width: 100%
+    height: 40px
+    margin: 8px 0
+    padding: 0 12px
+    border: 1px solid var(--md-sys-color-outline)
+    border-radius: 4px
+    background: var(--md-sys-color-surface)
+    color: var(--md-sys-color-on-surface)
+    font-family: var(--md-sys-typescale-body-medium-font-family)
+    font-size: var(--md-sys-typescale-body-medium-size)
+    transition: border-color 0.2s ease
+
+    &:focus
+      outline: none
+      border-color: var(--md-sys-color-primary)
+
+  .preview
+    position: relative
+    width: 40px
+    height: 40px
+    border-radius: 4px
+    background-image: linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa)
+    background-size: 8px 8px
+    background-position: 0 0, 4px 4px
+    overflow: hidden
+    
+    &:after
+      content: ''
+      position: absolute
+      inset: 0
+      background-color: currentColor
+
+  // Swatches
+  .swatches
+    display: flex
+    flex-wrap: wrap
+    gap: 8px
+    margin-top: 16px
+
+    button
+      width: 24px
+      height: 24px
+      padding: 0
+      border: none
+      border-radius: 4px
+      background-color: currentColor
+      cursor: pointer
+      transition: transform 0.1s ease
+
+      &:hover
+        transform: scale(1.1)
+
+      &:focus
+        outline: 2px solid var(--md-sys-color-primary)
+        outline-offset: 2px
+
+  // States
+  &.is-open
+    display: block
+
+  &[data-inline="true"]
+    position: relative
+    display: block
+
+  &[data-alpha="false"]
+    .alpha
+      display: none
+
+// Field wrapper styles
+.colorpicker-field
+  position: relative
+  display: inline-flex
+  align-items: center
+
+  input
+    padding-right: 40px
+
+  .preview
+    position: absolute
+    right: 8px
+    width: 24px
+    height: 24px
+    border-radius: 4px
+    background-image: linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa)
+    background-size: 8px 8px
+    background-position: 0 0, 4px 4px
+    pointer-events: none
+
+    &:after
+      content: ''
+      position: absolute
+      inset: 0
+      background-color: currentColor
+
+// Dark theme support
+@media (prefers-color-scheme: dark)
+  .colorpicker
+    background-color: var(--md-sys-color-surface-container-high)
+
+    .input
+      background: var(--md-sys-color-surface-container)
+      color: var(--md-sys-color-on-surface)

package/src/switch.js

@@ -100,7 +100,7 @@ class Switch extends EventEmitter {
         this.setValue(value, silent)
         break
       case 'text':
-        this.setValue(value)
+        this.setText(value)
         break
       case 'disabled':
         if (value === true) {
@@ -110,7 +110,7 @@ class Switch extends EventEmitter {
         }
         break
       default:
-        this.setValue(prop, silent)
+        this.setValue(prop, value)
     }
 
     return this
@@ -160,17 +160,15 @@ class Switch extends EventEmitter {
       this.ui.input.checked = true
       this.checked = true
       this.value = true
-      if (!silent) {
-        this.emit('change', this.checked)
-      }
     } else {
       this.element.classList.remove('is-checked')
       this.ui.input.checked = false
       this.checked = false
       this.value = false
-      if (!silent) {
-        this.emit('change', this.checked)
-      }
+    }
+
+    if (!silent) {
+      this.emit('change', this.checked)
     }
     return this
   }

package/src/switcher.js

@@ -151,7 +151,7 @@ class Switcher extends EventEmitter {
     this.emit('change', this.selected)
   }
 
-  set (prop, value) {
+  set (prop, value, silent) {
     switch (prop) {
       case 'value':
         this.setValue(value)
@@ -163,13 +163,13 @@ class Switcher extends EventEmitter {
         this.addOptions(value)
         break
       default:
-        this.setValue(prop)
+        this.setValue(prop, value)
     }
 
     return this
   }
 
-  setValue (value) {
+  setValue (value, silent) {
     // console.log('value', value, this.options.list, this.element)
     const list = this.options.list
     if (this.options.mode === 'unique') {
@@ -193,6 +193,24 @@ class Switcher extends EventEmitter {
     }
   }
 
+  get () {
+    console.log('get', this.options.mode, this.selected[0])
+    if (this.options.mode === 'unique') {
+      return this.selected[0]
+    } else {
+      return this.selected
+    }
+  }
+
+  getValue () {
+    // console.log('get', this.selected)
+    if (this.options.mode === 'unique') {
+      return this.selected[0]
+    } else {
+      return this.selected
+    }
+  }
+
   addOptions (list) {
     // console.log('setOptions', list, this.options.list)
 
@@ -236,15 +254,6 @@ class Switcher extends EventEmitter {
     // console.log('setText', value)
     this.setLabel(value)
   }
-
-  get () {
-    // console.log('get', this.selected)
-    if (this.options.mode === 'unique') {
-      return this.selected[0]
-    } else {
-      return this.selected
-    }
-  }
 }
 
 export default Switcher

package/src/text.js

@@ -19,7 +19,7 @@ class Text extends Component {
 
   set (text) {
     // console.log('set', text)
-    if (text === 'undefined') text = ''
+    if (text === 'undefined' || !text) text = ''
 
     const label = this.options.label || ''
 

package/src/textfield.js

@@ -2,6 +2,7 @@ import emitter from './module/emitter'
 import events from './module/events'
 import dataset from './module/dataset'
 import attributes from './module/attributes'
+import * as css from './module/css'
 
 class Textfield {
   static isComponent () {
@@ -38,7 +39,7 @@ class Textfield {
     this.element.classList.add('textfield')
 
     if (this.options.class !== 'textfield') {
-      this.element.classList.add(this.options.class)
+      css.add(this.element, this.options.class)
     }
 
     this.buildLabel()
@@ -166,6 +167,10 @@ class Textfield {
   get () {
     return this.input.value
   }
+
+  getValue () {
+    return this.input.value
+  }
 }
 
 export default Textfield

package/src/list.new/build.js

@@ -1,139 +0,0 @@
-import scrollbar from '../module/scrollbar'
-import dataset from '../module/dataset'
-
-import { create } from '../module/layout'
-import Virtual from './virtual'
-import Loading from '../loading'
-
-export default {
-  build (data) {
-    // console.log('options', this.options.name)
-
-    this.dataId = this.options.dataId || '_id'
-
-    this.element = document.createElement('div')
-    this.element.classList.add('list')
-
-    if (this.options.class) {
-      this.addClass(this.options.class)
-    }
-
-    this.element.addEventListener('click', (e) => {
-      e.stopPropagation()
-    })
-
-    if (this.options.name) {
-      this.name = this.options.name
-    }
-
-    if (this.options.data) {
-      dataset(this.element, this.options.data)
-    }
-
-    this.layout = create(this.options.layout.main, this.element)
-    this.ui = this.layout.component
-
-    // prepare loading
-    // this.ui.loading = new Loading()
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.element)
-    }
-
-    const scrollbarOffset = scrollbar()
-
-    // console.log('scrollbarOffset', scrollbarOffset)
-    if (this.ui && this.ui.body) {
-      // console.log('body padding', 11 - scrollbarOffset + 'px')
-      this.ui.body.style.marginRight = 11 - scrollbarOffset + 'px'
-      this.ui.body.classList.add('offset' + scrollbarOffset)
-    }
-
-    this.buildVirtual()
-  },
-
-  addClass (c) {
-    const list = c.split(' ')
-
-    for (let i = 0; i < list.length; i++) {
-      this.element.classList.add(list[i])
-    }
-  },
-
-  buildVirtual () {
-    // console.log('buildVirtual', this.options.class)
-    let height = 80
-    this.size = this.options.list.size
-    this.stop = false
-
-    if (this.options.item && this.options.item.height) {
-      height = this.options.item.height
-    }
-
-    this.virtual = new Virtual({
-      view: this.options.name,
-      container: this.ui.body,
-      itemHeight: height,
-      size: this.size,
-      render: (i) => {
-        // console.log('render', this.data[i])
-        return this.renderItem(this.data[i])
-      }
-    }).on('next', (total) => {
-      // console.log('next', total)
-      if (this.stop) return
-
-      // console.log('next', total, this.page, this.size)
-      this.page = this.page || 1
-      // console.log('slide', total, this.options.list.size)
-      // var page = Math.ceil(total / this.size) + 1
-
-      this.page++
-
-      if (this.mode === 'search') {
-        this.search(this.ui['search-input'].input.value, this.page, this.size, true)
-      } else {
-        // console.log('request', this.page, this.size, true)
-        this.request(this.page, this.size, true)
-      }
-    }).on('progress', (progress) => {
-      // console.log('progress', progress, this.count)
-
-      if (this.statusDisplay) {
-        const percent = parseInt(progress / this.count * 100)
-        this.statusDisplay('count', percent + '% | ' + progress + ' / ' + this.count)
-      }
-
-      this.onProgress(progress)
-    })
-    // .on('size', (size) => {
-    // console.log('!!!!size', size)
-    // this.size = size
-    // })
-    //
-  },
-
-  onProgress (value) {
-    // console.log('progress', value, this._value)
-
-    if (this.ui.head) {
-      if (this.ui.body.scrollTop > 0 && this.ui.head) {
-        this.ui.head.classList.add('scrolled')
-      } else if (this.ui.head) {
-        this.ui.head.classList.remove('scrolled')
-      }
-    }
-
-    if (value > this._value) {
-      // console.log('scrolling down')
-      this.emit('scrolling', 'down')
-    } else if (value < this._value) {
-      // console.log('scrolling up')
-      this.emit('scrolling', 'up')
-    }
-
-    this._value = value
-
-    this.scrollTop = this.ui.body.scrollTop
-  }
-}

package/src/list.new/click.js

@@ -1,40 +0,0 @@
-
-export default {
-  click (e) {
-    // console.log('click', e.target)
-    e.stopPropagation()
-
-    if (e.target === e.currentTarget) {
-      return
-    }
-
-    const target = '[data-id]'
-    let item = e.target
-    let i = 0
-
-    while (item && !item.matches(target)) {
-      // console.log('item', item)
-      if (i > 10) {
-        item = null
-        break
-      }
-      item = item.parentNode
-      i++
-    }
-
-    if (e.target.matches('BUTTON') && e.target.dataset.name && item.dataset.id) {
-      // console.log('button', e.target.dataset.name)
-      this.emit(e.target.dataset.name, item.dataset.id)
-      return this
-    }
-
-    if (this.select) {
-      this.select(item)
-    }
-
-    // console.log('item', item, e.target.dataset.name)
-
-    return this
-    // console.log(item)
-  }
-}

package/src/list.new/collection.js

@@ -1,30 +0,0 @@
-class Collection {
-  constructor () {
-    this.items = {}
-    this.ids = []
-  }
-
-  add (item) {
-    const id = item[this.dataId]
-    this.items[id] = item
-    this.ids.push(id)
-  }
-
-  get (id) {
-    return this.items[id] || null
-  }
-
-  getIndex (id) {
-    return this.ids.indexOf(id)
-  }
-
-  getPage (page, pageSize) {
-    const start = (page - 1) * pageSize
-    const end = start + pageSize
-    return this.ids.slice(start, end).map(id => this.items[id])
-  }
-
-  getCount () {
-    return this.ids.length
-  }
-}

package/src/list.new/create.js

@@ -1,45 +0,0 @@
-export default {
-  create () {
-    // console.log('create', this.mode, this.options.item.new)
-    // console.log('selected', this.info, this.item)
-
-    if (this.mode === 'create') return
-
-    this.mode = 'create'
-
-    if (this.options.virtual === true) {
-      this.data.unshift(this.options.item.new)
-      this.render(this.data)
-    } else {
-      if (this.options.item) {
-        this.newItem = this.renderItem(this.options.item.new, 'create')
-      }
-    }
-
-    this.emit('create', this.options.item.new)
-  },
-
-  created (data) {
-    // console.log('created', this.data.length, data)
-    if (this.options.virtual === true) {
-      this.data[0] = data
-      this.render(this.data)
-    } else {
-      this.mode = null
-      this.info = data
-      this.ui.body.removeChild(this.newItem)
-      this.item = this.renderItem(data, 'top')
-    }
-  },
-
-  createCancel () {
-    // console.log('createCancel', this.newItem)
-    // console.log('remove')
-    // console.log('prepare reselect', this.info, this.item)
-    this.ui.body.removeChild(this.newItem)
-    this.mode = null
-    if (this.item && this.info) {
-      this.select(this.info, this.item)
-    }
-  }
-}

package/src/list.new/data.js

@@ -1,16 +0,0 @@
-export default {
-  storeData (list, more) {
-    console.log('storeData', list.length, more)
-    if (more !== true) {
-      this.dataList = []
-    }
-
-    // console.log('storeData', this.dataStore)
-    this.dataStore = this.dataStore || {}
-
-    for (let i = 0; i < list.length; i++) {
-      this.dataList.push(list[i][this.dataId])
-      this.dataStore[list[i][this.dataId]] = list[i]
-    }
-  }
-}