bug fixes

Author: Templarian

src/pg/menu/README.md

@@ -2,12 +2,15 @@
 
 The `pg-menu` component renders a menu list. Menus can be used inline, but are usually created by a parent component. For example:
 
-- `button-menu` - Button Menu
-- `button-icon-menu` - Button Icon Menu
+- `pg-button-menu` - Button Menu
+  - Default item `type` is `PgMenuItem`
+- `pg-button-icon-menu` - Button Icon Menu
+  - Default item `type` is `PgMenuItem`
 - `PgMenuOverlay` Utility overlay for menus.
+  - The item `type` is required.
 
 ```typescript
-import '@pictogrammers/components/pgMenu.js';
+import '@pictogrammers/components/pg/menu';
 ```
 
 ```html
@@ -16,15 +19,19 @@ import '@pictogrammers/components/pgMenu.js';
 
 | Attributes | Tested   | Description |
 | ---------- | -------- | ----------- |
-| `items`    |          | Set items list. |
+| `items`    |          | Set items list. Ex: `{ type: PgMenuItem }` |
 
 ```typescript
+import PgMenuItem from '@pictogrammers/components/pg/menuItem';
+
+// ...
 @Part() $menu: PgMenu;
 
 connectedCallback() {
   this.$menu.items = [{
     label: 'Item 1',
-    value: 'item1'
+    value: 'item1',
+    type: PgMenuItem
   }];
 }
 ```

src/pg/menu/__examples__/basic/basic.ts

@@ -23,7 +23,14 @@ export default class XPgMenuBasic extends HTMLElement {
     this.$menu.addEventListener('select', this.#handleSelect.bind(this));
   }
 
+  previousItem: any = null;
   #handleSelect(e: any) {
+    const { item } = e.detail;
+    if (this.previousItem !== null) {
+      this.previousItem.checked = false;
+    }
+    item.checked = true;
+    this.previousItem = item;
     // update clicked result
     this.$result.textContent = JSON.stringify(e.detail);
   }

src/pg/menu/menu.ts

@@ -17,8 +17,6 @@ export default class PgMenu extends HTMLElement {
 
   @Part() $items: HTMLDivElement;
 
-  previousIndex = -1;
-
   connectedCallback() {
     forEach({
       container: this.$items,
@@ -32,11 +30,6 @@ export default class PgMenu extends HTMLElement {
           this.dispatchEvent(new CustomEvent('select', {
             detail: { index, item }
           }));
-          if (this.previousIndex !== -1) {
-            (this.$items.children[this.previousIndex] as PgMenuItem).checked = false;
-          }
-          $item.checked = true;
-          this.previousIndex = index;
         });
         $item.addEventListener('up', (e: any) => {
           const { index } = e.detail;
@@ -56,9 +49,6 @@ export default class PgMenu extends HTMLElement {
             this.focus(index + 1);
           }
         });
-        if (item.checked) {
-          this.previousIndex = $item.index;
-        }
       }
     });
   }

src/pg/overlayMenu/README.md

@@ -1,19 +1,27 @@
 # Overlay Menu
 
-The `PgOverlayMenu` creates a menu.
+The `PgOverlayMenu` creates a menu creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.
 
 ```typescript
-if (this.#isOpen) { return; }
-this.#isOpen = true;
-const result = await PgOverlayMenu.open({
-  source: this.$element,
-  items: [{
-    label: 'Item 1',
-    value: 'item1'
-  }, {
-    label: 'Item 2',
-    value: 'item2'
-  }]
-});
-console.log(result);
+import PgMenuItem from '@pictogrammers/components/pg/menuItem';
+
+#isOpen: false;
+handleSourceClick() {
+  if (this.#isOpen) { return; }
+  this.#isOpen = true;
+  const result = await PgOverlayMenu.open({
+    source: this.$element,
+    items: [{
+      label: 'Item 1',
+      value: 'item1',
+      type: PgMenuItem
+    }, {
+      label: 'Item 2',
+      value: 'item2',
+      type: PgMenuItem
+    }]
+  });
+  this.#isOpen = false;
+  console.log(result);
+}
 ```

src/pg/overlayMenu/__examples__/basic/basic.ts

@@ -1,4 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
+import PgMenuItem from '../../../menuItem/menuItem';
 import PgOverlayMenu from '../../overlayMenu';
 
 import template from './basic.html';
@@ -25,11 +26,13 @@ export default class XPgOverlayMenuBasic extends HTMLElement {
     if (this.#menuOpen) { return; }
     const items = [{
       label: 'Item 1',
-      value: 'item1'
+      value: 'item1',
+      type: PgMenuItem
     },
     {
       label: 'Item 2',
-      value: 'item2'
+      value: 'item2',
+      type: PgMenuItem
     }];
     this.#menuOpen = true;
     const result = await PgOverlayMenu.open({

src/pg/tabs/partials/tab.css

@@ -30,25 +30,13 @@
   border-color: var(--pg-tab-border, #453C4F);
 }
 
-[part="button"]:active::before {
-  content: '';
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: 0;
-  left: -1px;
-  border-radius: 0.25rem 0.25rem 0 0;
-  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
+[part="button"].selected:focus-visible {
+  color: #197BE0;
+  border-color: rgb(79, 143, 249);
 }
 
-[part="button"]:focus::before {
-  pointer-events: none;
-  content: '';
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: 0;
-  left: -1px;
-  border-radius: 0.25rem 0.25rem 0 0;
-  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
+[part="button"]:not(.selected):focus-visible {
+  background: var(--pg-focus-color, rgb(79, 143, 249, 0.15));
+  border-color: rgb(79, 143, 249);
+  color: #197BE0;
 }

src/pg/treeItem/treeItem.css

@@ -112,7 +112,7 @@
   z-index: 1;
 }
 
-[part=item]:hover {
+[part=item]:not(.dragging):hover {
   background: var(--pg-tree-item-background-hover, rgb(69, 60, 79, 0.1));
 }
 [part=item].items.selected {
@@ -221,6 +221,7 @@
   background: rgba(255, 255, 255, 0.5);
   user-select: none;
   margin: -0.25rem;
+  border: 2px dashed rgb(79, 143, 249);
 }
 [part=items].dragging {
   --pg-_is-index-dragging: true;

src/pg/treeItem/treeItem.ts

@@ -1,10 +1,11 @@
 import { Component, Prop, Part, forEach } from '@pictogrammers/element';
 
-import template from './treeItem.html';
-import style from './treeItem.css';
 import PgIcon from '../icon/icon';
 import PgTreeButtonIcon from '../treeButtonIcon/treeButtonIcon';
 
+import template from './treeItem.html';
+import style from './treeItem.css';
+
 const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
 
 @Component({