Updating demos.

Author: Templarian

src/pg/menuDivider/menuDivider.ts

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@pictogrammers/element';
+import { Component, Prop, Part } from '@pictogrammers/element';
 
 import template from './menuDivider.html';
 import style from './menuDivider.css';
@@ -10,4 +10,13 @@ import style from './menuDivider.css';
 })
 export default class PgMenuDivider extends HTMLElement {
   @Prop() focusable = false;
+
+  @Part() $divider: HTMLDivElement;
+
+  getHeight(): number {
+    const computedStyle = window.getComputedStyle(this.$divider);
+    const marginTop = parseFloat(computedStyle.marginTop);
+    const marginBottom = parseFloat(computedStyle.marginBottom);
+    return this.$divider.getBoundingClientRect().height + marginTop + marginBottom;
+  }
 }

src/pg/menuItem/README.md

@@ -1,6 +1,8 @@
 # `<pg-menu>`
 
-The `pg-menu-item` is usually rendered as a child of the `pg-menu`.
+The `pg-menu-item` is usually rendered as a child of the `pg-menu` as a `type: PgMenuItem`.
+
+## Usage
 
 ```typescript
 import '@pictogrammers/components/pgMenuItem.js';
@@ -12,4 +14,14 @@ import '@pictogrammers/components/pgMenuItem.js';
 
 | Attributes | Tested   | Description |
 | ---------- | -------- | ----------- |
-| `label`    |          | Item label. |
+| `label`    |          | Item label. |
+| `checked`  |          | Item checked. |
+| `disabled` |          | Item disabled. |
+
+## Events
+
+```typescript
+this.$item.addEventListener('select', (e: any) => {
+  const { index } = e.detail;
+});
+```

src/pg/menuItem/__examples__/basic/basic.html

@@ -2,6 +2,25 @@
   <pg-menu-item part="item"></pg-menu-item>
 </div>
 <div>
-  <button>Toggle <code>disabled</code></button>
-  <button>Toggle <code>checked</code></button>
+  <table style="border: 1px solid #ddd;margin-block-start: 0.5rem;">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Value</th>
+        <th>&nbsp;</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>checked</code></td>
+        <td part="checkedValue"></td>
+        <td><input part="checkedToggle" type="checkbox"/></td>
+      </tr>
+      <tr>
+        <td><code>disabled</code></td>
+        <td part="disabledValue"></td>
+        <td><input part="disabledToggle" type="checkbox"/></td>
+      </tr>
+    </tbody>
+  </table>
 </div>

src/pg/menuItem/__examples__/basic/basic.ts

@@ -1,4 +1,5 @@
-import { Component, Part, Prop } from '@pictogrammers/element';
+import { Component, Part } from '@pictogrammers/element';
+
 import PgMenuItem from '../../menuItem';
 
 import template from './basic.html';
@@ -9,10 +10,32 @@ import template from './basic.html';
 })
 export default class XPgMenuItemBasic extends HTMLElement {
   @Part() $item: PgMenuItem;
+  @Part() $checkedToggle: HTMLInputElement;
+  @Part() $disabledToggle: HTMLInputElement;
+  @Part() $checkedValue: HTMLDivElement;
+  @Part() $disabledValue: HTMLDivElement;
 
   connectedCallback() {
     this.$item.label = 'Item 1';
     this.$item.checked = false;
     this.$item.disabled = false;
+
+    this.$checkedValue.textContent = `${this.$item.checked}`;
+    this.$disabledValue.textContent = `${this.$item.disabled}`;
+
+    this.$item.addEventListener('select', (e: any) => {
+      this.$checkedToggle.checked = e.target.checked;
+      this.$checkedValue.textContent = `${this.$item.checked}`;
+    });
+
+    this.$checkedToggle.addEventListener('change', (e: any) => {
+      this.$item.checked = e.target.checked;
+      this.$checkedValue.textContent = `${this.$item.checked}`;
+    });
+
+    this.$disabledToggle.addEventListener('change', (e: any) => {
+      this.$item.disabled = e.target.checked;
+      this.$disabledValue.textContent = `${this.$item.disabled}`;
+    });
   }
 }

src/pg/menuItem/menuItem.ts

@@ -34,6 +34,7 @@ export default class PgMenuItem extends HTMLElement {
 
   connectedCallback() {
     this.$label.addEventListener('click', () => {
+      this.checked = true;
       this.dispatchEvent(new CustomEvent('select', {
         detail: { index: this.index }
       }));

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

@@ -1,5 +1,7 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
+
 import PgMenuItem from '../../../menuItem/menuItem';
+import PgMenuDivider from '../../../menuDivider/menuDivider';
 import PgOverlayMenu from '../../overlayMenu';
 
 import template from './basic.html';
@@ -33,6 +35,14 @@ export default class XPgOverlayMenuBasic extends HTMLElement {
       label: 'Item 2',
       value: 'item2',
       type: PgMenuItem
+    },
+    {
+      type: PgMenuDivider
+    },
+    {
+      label: 'Item 3',
+      value: 'item3',
+      type: PgMenuItem
     }];
     this.#menuOpen = true;
     const result = await PgOverlayMenu.open({