Fixing bugs

Author: Templarian

src/pg/buttonMenu/__examples__/basic/basic.html

@@ -1,5 +1,5 @@
 <div class="example">
-  <pg-button-menu part="menu"></pg-button-menu>
+  <pg-button-menu part="menu" label="Options"></pg-button-menu>
   <div>
     <code>value: <code part="value"></code></code>
   </div>

src/pg/buttonMenu/__examples__/basic/basic.ts

@@ -13,6 +13,7 @@ export default class XPgButtonMenuBasic extends HTMLElement {
   @Part() $value: HTMLSpanElement;
 
   connectedCallback() {
+    this.$menu.label = 'Options';
     this.$menu.items = [{
       value: 'item1',
       label: 'Item 1'

src/pg/buttonMenu/buttonMenu.css

@@ -5,4 +5,8 @@
 span {
   align-self: center;
   display: flex;
+}
+
+[part=collapse] {
+  display: none;
 }

src/pg/buttonMenu/buttonMenu.html

@@ -1,8 +1,4 @@
 <pg-button part="button">
-  <span part="expand">
-    <pg-icon path="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></pg-icon>
-  </span>
-  <span part="collapse">
-    <pg-icon path="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"></pg-icon>
-  </span>
+  <span part="label"></span>
+  <pg-icon part="icon" path="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></pg-icon>
 </pg-button>

src/pg/buttonMenu/buttonMenu.ts

@@ -1,6 +1,7 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
 
 import PgMenuItem from '../menuItem/menuItem';
+import PgIcon from '../icon/icon';
 import PgOverlayMenu from '../overlayMenu/overlayMenu';
 
 import '../button/button';
@@ -9,7 +10,8 @@ import PgButton from '../button/button';
 import template from './buttonMenu.html';
 import style from './buttonMenu.css';
 
-const t = [true, 'true', ''];
+const IconExpand = 'M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z';
+const IconCollapse = 'M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z';
 
 @Component({
   selector: 'pg-button-menu',
@@ -19,51 +21,48 @@ const t = [true, 'true', ''];
 export default class PgButtonMenu extends HTMLElement {
   @Prop() items: any[] = [];
   @Prop() value: any = null;
+  @Prop() label: string = '';
+  @Prop() default: any = null;
 
   @Part() $button: PgButton;
-  @Part() $expand: HTMLSlotElement;
-  @Part() $collapse: HTMLSlotElement;
+  @Part() $icon: PgIcon;
+  @Part() $label: HTMLSpanElement;
 
   connectedCallback() {
-    this.$button.addEventListener('click', (e) => {
-      e.stopPropagation();
-      this.#handleClick();
-      // open menu
-      /*this.dispatchEvent(
-        new CustomEvent('click', {
-          detail: {
-            active: this.active
-          }
-        })
-      );*/
-    });
+    this.$button.addEventListener('click', this.#handleClick.bind(this));
+  }
+
+  render(changes) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
   }
 
   #menuOpen = false;
   async #handleClick() {
-    if (this.#menuOpen) { return; }
+    this.#menuOpen = !this.#menuOpen;
+    this.$icon.path = this.#menuOpen ? IconCollapse : IconExpand;
+    if (!this.#menuOpen) { return; }
     const items = this.items.map((item) => {
       return {
         type: PgMenuItem,
         label: item.label,
         value: item.value
       };
     });
-    this.#menuOpen = true;
-    /*
+    // Create Menu
+    const result = await PgOverlayMenu.open({
+      source: this,
+      default: this.default ?? items[0],
+      value: items.find(x => x.value === this.value) ?? null,
+      items: items
+    });
     if (result !== undefined) {
-      this.#value = result;
-    }
-    this.$result.textContent = result;
-    */
-    this.#menuOpen = false;
-  }
-
-
-  render(changes) {
-    if (changes.active) {
-      this.$expand.style.display = this.$button.active ? 'flex' : 'none';
-      this.$collapse.style.display = this.$button.active ? 'none' : 'flex';
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          value: result.value
+        }
+      }));
     }
   }
 }

src/pg/overlayMenu/overlayMenu.css

@@ -7,9 +7,8 @@
   padding: 0;
   border: 0;
   background: transparent;
-  overflow: visible;
   --pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
-  top: anchor(top);
+  top: calc(anchor(bottom) - 0.25rem);
   left: anchor(left);
   min-width: calc(anchor-size(width) + calc(2 * var(--pg-menu-padding, 0.25rem)));
   translate: var(--pg-overlay-menu-_x, 0) var(--pg-overlay-menu-_y, 0);

src/pg/overlaySelectMenu/overlaySelectMenu.css

@@ -10,7 +10,7 @@
   overflow: visible;
   --pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
   top: anchor(top);
-  left: calc(anchor(right) + 0.25rem);
+  left: anchor(left);
   min-width: calc(anchor-size(width) + calc(2 * var(--pg-menu-padding, 0.25rem)));
   margin: var(--pg-overlay-menu-_y, 0) 0 0 var(--pg-overlay-menu-_x, 0);
 }