material 1.0.1 → 1.0.3

package/package.json

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

package/src/dialog.js

@@ -135,8 +135,6 @@ class Dialog {
   }
 
   close () {
-    // this.hide()
-
     if (this.options.close) {
       this.destroy()
     }

package/src/menu.js

@@ -37,6 +37,7 @@ class Menu extends Control {
   setup () {
     this.menus = []
     this.closeTimeout = null
+    this.closeDelay = 300
 
     document.addEventListener('click', this.handleDocumentClick)
   }
@@ -64,8 +65,26 @@ class Menu extends Control {
       item = new Element(obj)
 
       item.addEventListener('mouseenter', () => {
-        if (this.menu) {
-          this.menu.destroy()
+        if (obj.items && Array.isArray(obj.items)) {
+          // Clear any pending close timeout when entering submenu trigger
+          if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout)
+            this.closeTimeout = null
+          }
+        } else {
+          // For non-submenu items, schedule submenu close with delay
+          if (this.menu) {
+            if (this.closeTimeout) {
+              clearTimeout(this.closeTimeout)
+            }
+            this.closeTimeout = setTimeout(() => {
+              if (this.menu) {
+                this.menu.destroy()
+                this.menu = null
+              }
+              this.closeTimeout = null
+            }, this.closeDelay)
+          }
         }
       })
 
@@ -73,6 +92,18 @@ class Menu extends Control {
         item.classList.add('sub')
 
         item.addEventListener('mouseenter', () => {
+          // Clear any pending close timeout
+          if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout)
+            this.closeTimeout = null
+          }
+
+          // Destroy existing submenu before creating new one
+          if (this.menu) {
+            this.menu.destroy()
+            this.menu = null
+          }
+
           this.menu = new Menu({
             class: 'floating',
             target: item,
@@ -87,6 +118,14 @@ class Menu extends Control {
             offsetY: 8
           }).show()
 
+          // When mouse enters the submenu, cancel any close timeout
+          this.menu.element.addEventListener('mouseenter', () => {
+            if (this.closeTimeout) {
+              clearTimeout(this.closeTimeout)
+              this.closeTimeout = null
+            }
+          })
+
           this.menu.on('select', (value, name) => {
             this.emit('select', `${obj.name}:${value}`, name)
           }).on('destroy', () => {
@@ -122,7 +161,10 @@ class Menu extends Control {
   }
 
   close () {
-    // console.log('')
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout)
+      this.closeTimeout = null
+    }
     this.menus.forEach(menu => {
       menu.destroy()
     })

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

@@ -1,12 +1,10 @@
 .menu {
-  //display: none
-  &.show {
-    //display: block
-  }
+  display: none;
+
   .list {
     background: white;
     .item {
-      color: rgba(0,0,0,.87);
+      color: rgba(0, 0, 0, 0.87);
     }
   }
 
@@ -17,5 +15,8 @@
     overflow: hidden;
     opacity: 0;
     transition: 0.2s;
+    &.show {
+      opacity: 1;
+    }
   }
 }