material 0.9.21 → 0.9.23

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

@@ -110,7 +110,7 @@ class Switch extends EventEmitter {
         }
         break
       default:
-        this.setValue(prop, silent)
+        this.setValue(prop, value)
     }
 
     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,7 +163,7 @@ class Switcher extends EventEmitter {
         this.addOptions(value)
         break
       default:
-        this.setValue(prop)
+        this.setValue(prop, value)
     }
 
     return this
@@ -194,6 +194,15 @@ 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]

package/src/textfield.js

@@ -167,6 +167,10 @@ class Textfield {
   get () {
     return this.input.value
   }
+
+  getValue () {
+    return this.input.value
+  }
 }
 
 export default Textfield

package/src/slider-new.js

@@ -1,341 +0,0 @@
-import init from './mixin/init'
-import build from './element/build'
-import control from './mixin/control'
-
-import events from './mixin/events'
-import insert from './element/insert'
-import offset from './element/offset'
-import classify from './module/classify'
-// import control from './control';
-import * as css from './module/css'
-import emitter from './module/emitter'
-
-import icon from './skin/material/icon/pin.svg'
-
-class Slider {
-  static defaults = {
-    class: 'slider',
-    type: 'control',
-    label: null,
-    checked: false,
-    error: false,
-    value: false,
-    range: [0, 100],
-    step: 5,
-    modules: [control, emitter],
-    mixins: [],
-    build: ['$root.material-slider', {},
-      ['label$label.slider-label', {}],
-      ['input$input'],
-      ['$control.slider-control', {},
-        ['$track.slider-track', {},
-          ['canvas$canvas.slider-canvas', {}],
-          ['$trackvalue.slider-track-value', {}],
-          ['$knob.slider-knob', {}],
-          ['$marker.slider-marker', {},
-            ['$value.slider-value', {}]
-          ]
-        ]
-      ]
-    ],
-    events: [
-      ['element.input.focus', 'focus'],
-      ['element.input.blur', 'blur']
-    ]
-  }
-
-  constructor (options) {
-    log.info('Slider')
-    this.init(this.options)
-    this.build(this.options)
-    this.setup()
-  }
-
-  init (options) {
-    this.options = Object.assign({}, Slider.defaults, options || {})
-    init(this)
-  }
-
-  setup () {
-    events.attach(this.options.events, this)
-  }
-
-  build () {
-    this.element = build(this.options.build)
-    this.element = this.element.root
-
-    classify(this.element, this.options)
-
-    if (this.options.container) {
-      insert(this.element, this.options.container)
-    }
-
-    const value = this.element.marker.innerHTML
-    this.element.marker.innerHTML = icon + value
-
-    if (this.options.type) {
-      css.add(this.element, 'type-' + this.options.type)
-    }
-
-    // init input
-    if (this.options.disabled) {
-      this.disable(true)
-    }
-
-    // if (this.options.name) {
-    //   this.element.dataset.name = name
-    //   this.element.input.name = name
-    // }
-
-    // init text
-    const text = this.options.label || this.options.text
-    this.element.label.textContent = text
-
-    this.options.label = this.options.label || this.options.text
-
-    this.initTrack()
-
-    const delay = 50
-
-    setTimeout(() => {
-      this.initCanvas()
-    }, delay)
-  }
-
-  initCanvas () {
-    window.addEventListener('resize', () => {
-      console.log('resize')
-      this.drawCanvas()
-    }, false)
-    this.drawCanvas()
-  }
-
-  drawCanvas () {
-    const width = offset(this.element.track, 'width')
-    const height = offset(this.element.track, 'height')
-
-    this.element.canvas.width = width
-    this.element.canvas.height = height
-
-    const context = this.element.canvas.getContext('2d')
-    context.lineWidth = 2
-    context.beginPath()
-
-    context.moveTo(0, (height / 2) + 1)
-    context.lineTo(width, (height / 2) + 1)
-    context.strokeStyle = 'rgba(34, 31, 31, .26)'
-    context.stroke()
-  }
-
-  /**
-   * [buildControl description]
-   * @return {?} [description]
-   */
-  initTrack () {
-    this.element.track.addEventListener('mousedown', (ev) => {
-      if (this.disabled === true) return
-      this.initTrackSize()
-      const position = ev.layerX
-      this.update(position)
-    })
-
-    this.element.knob.addEventListener('click', (ev) => {
-      ev.stopPropagation()
-    })
-
-    this.initDragging()
-
-    const delay = 100
-
-    setTimeout(() => {
-      this.setValue(this.options.value)
-    }, delay)
-  }
-
-  initTrackSize () {
-    this._tracksize = offset(this.element.track, 'width')
-    this._knobsize = offset(this.element.knob, 'width')
-    this._markersize = 32 /* offset(this.element.marker, 'width') */
-    this._trackleft = offset(this.element.track, 'left')
-    return this
-  }
-
-  /**
-   * [initDragging description]
-   * @return {?} [description]
-   */
-  initDragging () {
-    this.element.knob.onmousedown = (e) => {
-      if (this.disabled === true) return
-
-      e.stopPropagation()
-      e = e || window.event
-
-      css.add(this.element.control, 'dragging')
-
-      let start = 0
-      let position = 0
-
-      if (e.pageX) start = e.pageX
-      else if (e.clientX) start = e.clientX
-
-      start = this._trackleft
-      document.body.onmousemove = (e) => {
-        if (this.disabled === true) return
-        console.log('mousedown', this.disabled)
-
-        e = e || window.event
-        let end = 0
-        if (e.pageX) end = e.pageX
-        else if (e.clientX) end = e.clientX
-
-        position = end - start
-        this.update(position)
-      }
-      document.body.onmouseup = (e) => {
-        document.body.onmousemove = document.body.onmouseup = null
-
-        e = e || window.event
-        let end = 0
-        if (e.pageX) end = e.pageX
-        else if (e.clientX) end = e.clientX
-
-        position = end - start
-        this.update(position)
-        css.remove(this.element.control, 'dragging')
-      }
-    }
-  }
-
-  update (position) {
-    const size = this._tracksize
-    const range = this.options.range[1] - this.options.range[0]
-
-    if (position > size) {
-      position = size
-    }
-
-    if (position < 0) {
-      position = 0
-    }
-
-    const ratio = (size / position)
-    const value = Math.round((range / ratio)) + this.options.range[0]
-
-    if (position === 0) {
-      css.remove(this.element.knob, 'notnull')
-    }
-
-    this.element.knob.style.left = position - this._knobsize / 2 + 'px'
-    this.element.trackvalue.style.width = (position) + 'px'
-    this.element.marker.style.left = position - this._markersize / 2 + 'px'
-
-    this.element.value.textContent = value
-
-    this.element.input.value = value
-    if (value > this.options.range[0]) {
-      css.add(this.element.knob, 'notnull')
-    } else {
-      css.remove(this.element.knob, 'notnull')
-    }
-  }
-
-  updateValue (value) {
-    this.initTrackSize()
-
-    let size = offset(this.element.track, 'width')
-    size = parseInt(size)
-
-    const range = this.options.range[1] - this.options.range[0]
-    const ratio = value * 100 / range
-    const position = Math.round(size * ratio / 100)
-
-    this.update(position)
-
-    return this
-  }
-
-  /**
-   * [insert description]
-   * @param  {?} container [description]
-   * @param  {?} context   [description]
-   * @return {?}           [description]
-   */
-  insert (container, context) {
-    insert(this.element, container, context)
-  }
-
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   */
-  set (prop, value) {
-    switch (prop) {
-      case 'value':
-        this.setValue(value)
-        break
-      case 'label':
-        this.setLabel(value)
-        break
-      default:
-        this.setValue(prop)
-    }
-
-    return this
-  }
-
-  /**
-   * Getter
-   * @param {string} prop
-   * @param {string} value
-   */
-  get (prop) {
-    let value
-
-    switch (prop) {
-      case 'value':
-        value = this.getValue()
-        break
-      case 'name':
-        value = this.name
-        break
-      default:
-        return this.getValue()
-    }
-
-    return value
-  }
-
-  /**
-   * [getValue description]
-   * @return {Object} The class instance
-   */
-  getValue () {
-    return this.element.input.value
-  }
-
-  /**
-   * [setValue description]
-   * @param {string} value [description]
-   */
-  setValue (value) {
-    value = value || this.options.range[0]
-    this.element.input.value = value
-    this.updateValue(value)
-  }
-
-  /**
-   * [setLabel description]
-   * @param {?} text [description]
-   */
-  setLabel (text) {
-    text = text || this.options.label || this.options.text
-
-    if (text !== null && this.label) {
-      this.label.textContent = text
-    }
-  }
-}
-
-export default Slider