material 0.7.8 → 0.8.0

package/package.json

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

package/src/list/select.js

@@ -42,11 +42,11 @@ export default {
   },
 
   getInfoById (id) {
-    return this.dataStore[id]
+    return JSON.parse(JSON.stringify(this.dataStore[id]))
   },
 
   getSelectedInfo () {
-    return this.dataStore[this.id]
+    return JSON.parse(JSON.stringify(this.dataStore[this.id]))
   },
 
   getItemById (id, silent) {

package/src/menu.js

@@ -10,7 +10,7 @@ import Button from './button'
 class Menu extends EventEmitter {
   static defaults = {
     class: 'menu',
-    transition: 200,
+    offset: 8,
     modal: false,
     layout: [
       [Element, 'surface', { class: 'surface' },
@@ -66,12 +66,23 @@ class Menu extends EventEmitter {
 
   position (target) {
     if (!target) return
-    const offs = target.getBoundingClientRect()
-
-    const offsw = this.offset = this.ui.surface.getBoundingClientRect()
+    const caller = target.getBoundingClientRect()
+    const screen = this.ui.surface.getBoundingClientRect()
+    const menu = this.ui.list.getBoundingClientRect()
+
+    // Calculate top position
+    let top = caller.top + caller.height
+    if (top + menu.height > window.innerHeight) {
+      top = window.innerHeight - menu.height - this.options.offset
+    }
+    this.ui.surface.style.top = top + 'px'
 
-    this.ui.surface.style.top = (offs.top - 4) + 'px'
-    this.ui.surface.style.left = offs.left - offsw.width + offs.width + 'px'
+    // Calculate left position
+    let left = caller.left - caller.width + menu.width - screen.width + caller.width
+    if (left + menu.width > window.innerWidth) {
+      left = window.innerWidth - menu.width - this.options.offset
+    }
+    this.ui.surface.style.left = left + 'px'
 
     return this
   }

package/src/mixin/display.js

@@ -12,6 +12,10 @@ export default {
     // console.log('show', this.visible)
     if (!this.element) return
 
+    if (this.options.display !== false) {
+      this.element.style.display = ''
+    }
+
     this.element.getBoundingClientRect()
 
     this.element.classList.add('show')
@@ -26,6 +30,7 @@ export default {
   },
 
   hide () {
+    // console.log('hide', this.element)
     if (!this.element) return
 
     this.element.classList.remove('show')
@@ -35,6 +40,14 @@ export default {
       this.underlay.classList.remove('show')
     }
 
+    if (this.options.transition && this.element) {
+      setTimeout(() => {
+        if (this.options.display !== false) {
+          this.element.style.display = 'none'
+        }
+      }, this.options.transition)
+    }
+
     this.emit?.('hide')
     return this
   },

package/src/module/request.js

@@ -1,4 +1,4 @@
-const request = async (url, method = 'GET', body = null, headers = {}, signal = null) => {
+const request = async (url, method = 'GET', body = null, headers = {}, signal = null, debug = false) => {
   const defaultHeaders = {
     Accept: 'application/json',
     'Content-Type': 'application/json'
@@ -10,6 +10,10 @@ const request = async (url, method = 'GET', body = null, headers = {}, signal =
     signal
   }
 
+  if (debug) {
+    console.log('debug', options)
+  }
+
   if (body) {
     options.body = JSON.stringify(body)
   }
@@ -17,14 +21,17 @@ const request = async (url, method = 'GET', body = null, headers = {}, signal =
   try {
     const response = await fetch(url, options)
     if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
+      throw new Error(`Network response was not ok! ${response.status}`)
     }
-    const data = await response.json()
 
-    return data
+    // Determine response type based on 'Accept' header
+    if (headers.Accept === 'text/xml') {
+      return await response.text()
+    } else {
+      return await response.json()
+    }
   } catch (error) {
-    // Handle fetch or data processing errors
-    // console.log('error', error)
+    console.error('There has been a problem with your fetch operation:', error)
     return { error }
   }
 }

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

@@ -3,7 +3,6 @@
   &.show
     //display: block
   .surface
-    background: rgba(0,0,0,.05)
     .list
       background: white
       .item
@@ -15,7 +14,6 @@
     left: 0
     bottom: 0
     right: 0
-    background-color: rgba(0, 0, 0, 0.5)
     display: flex
     align-items: center
     justify-content: center