@pictogrammers/components 0.5.19 → 0.5.21

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@pictogrammers/components",
     "type": "module",
-    "version": "0.5.19",
+    "version": "0.5.21",
     "license": "MIT",
     "author": "Austin Andrews",
     "scripts": {

package/pg/header/README.md

@@ -9,7 +9,7 @@ import '@pictogrammers/components/pgHeader.js';
 ```html
 <pg-header
   logo="...svg path..."
-  name="Material Design Icons"></pg-nav>
+  name="Material Design Icons"></pg-header>
 ```
 
 | Slots      | Tested   | Description |

package/pg/header/__examples__/basic/basic.html

@@ -4,5 +4,5 @@
     name="Material Design Icons">
     <pg-search slot="search"></pg-search>
     <pg-nav slot="nav"></pg-nav>
-  </pg-nav>
+  </pg-header>
 </div>

package/pg/modal/__examples__/basic/basic.ts

@@ -1,11 +1,21 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
 import PgModal from '../../modal';
 
+import '../../../modalHeader/modalHeader';
+import '../../../modalBody/modalBody';
+import '../../../modalFooter/modalFooter';
+
 import template from './basic.html';
 
 @Component({
   selector: 'x-my-modal',
-  template: `<main>Hello! <button part="close">Close</button></main>`
+  template: `
+    <pg-modal-header>My Modal</pg-modal-header>
+    <pg-modal-body>Hello!</pg-modal-body>
+    <pg-modal-footer>
+      <button part="close">Close</button>
+    </pg-modal-footer>
+  `
 })
 export class XMyModal extends PgModal {
 

package/pg/modalBody/README.md

@@ -0,0 +1,17 @@
+# `<pg-modal-body>`
+
+The `pg-modal-body` component is a presentational component for the body section of a `PgModal`.
+
+```typescript
+import '@pictogrammers/components/pg/modalBody';
+```
+
+```html
+<pg-modal-body>Content</pg-modal-body>
+```
+
+## CSS Variables
+
+| CSS Variables            | Default        | Description |
+| ------------------------- | --------------- | ----------- |
+| `--pg-modal-body-padding` | `0.5rem 1rem` | Padding     |

package/pg/modalBody/index.ts

@@ -0,0 +1,3 @@
+import PgModalBody from './modalBody';
+
+export default PgModalBody;

package/pg/modalBody/modalBody.css

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+}
+[part="body"] {
+  padding: var(--pg-modal-body-padding, 0.5rem 1rem);
+}

package/pg/modalBody/modalBody.html

@@ -0,0 +1,3 @@
+<main part="body">
+  <slot></slot>
+</main>

package/pg/modalBody/modalBody.ts

@@ -0,0 +1,13 @@
+import { Component } from '@pictogrammers/element';
+
+import template from './modalBody.html';
+import style from './modalBody.css';
+
+@Component({
+  selector: 'pg-modal-body',
+  style,
+  template
+})
+export default class PgModalBody extends HTMLElement {
+
+}

package/pg/modalFooter/README.md

@@ -0,0 +1,23 @@
+# `<pg-modal-footer>`
+
+The `pg-modal-footer` component is a presentational component for the footer section of a `PgModal`.
+
+```typescript
+import '@pictogrammers/components/pg/modalFooter';
+```
+
+```html
+<pg-modal-footer>
+  <button>Close</button>
+</pg-modal-footer>
+```
+
+## CSS Variables
+
+| CSS Variables                       | Default        | Description     |
+| ------------------------------------- | --------------- | --------------- |
+| `--pg-modal-footer-background`      | `#f1f1f1`      | Background      |
+| `--pg-modal-footer-border-color`    | `#ccc`         | Border Color    |
+| `--pg-modal-footer-padding`         | `0.75rem 1rem` | Padding         |
+| `--pg-modal-footer-justify-content` | `flex-end`     | Justify Content |
+| `--pg-modal-footer-gap`             | `0.5rem`       | Gap Between Items |

package/pg/modalFooter/index.ts

@@ -0,0 +1,3 @@
+import PgModalFooter from './modalFooter';
+
+export default PgModalFooter;

package/pg/modalFooter/modalFooter.css

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+}
+[part="footer"] {
+  display: flex;
+  flex-direction: row;
+  padding: var(--pg-modal-footer-padding, 0.75rem 1rem);
+  border-top: 1px solid var(--pg-modal-footer-border-color, #ccc);
+  background: var(--pg-modal-footer-background, #f1f1f1);
+  justify-content: var(--pg-modal-footer-justify-content, flex-end);
+  gap: var(--pg-modal-footer-gap, 0.5rem);
+}

package/pg/modalFooter/modalFooter.html

@@ -0,0 +1,3 @@
+<footer part="footer">
+  <slot></slot>
+</footer>

package/pg/modalFooter/modalFooter.ts

@@ -0,0 +1,13 @@
+import { Component } from '@pictogrammers/element';
+
+import template from './modalFooter.html';
+import style from './modalFooter.css';
+
+@Component({
+  selector: 'pg-modal-footer',
+  style,
+  template
+})
+export default class PgModalFooter extends HTMLElement {
+
+}

package/pg/modalHeader/README.md

@@ -0,0 +1,19 @@
+# `<pg-modal-header>`
+
+The `pg-modal-header` component is a presentational component for the header section of a `PgModal`.
+
+```typescript
+import '@pictogrammers/components/pg/modalHeader';
+```
+
+```html
+<pg-modal-header>Title</pg-modal-header>
+```
+
+## CSS Variables
+
+| CSS Variables                     | Default     | Description  |
+| ---------------------------------- | ----------- | ------------ |
+| `--pg-modal-header-background`    | `#f1f1f1`   | Background   |
+| `--pg-modal-header-border-color`  | `#ccc`      | Border Color |
+| `--pg-modal-header-padding`       | `0.75rem 1rem` | Padding  |

package/pg/modalHeader/index.ts

@@ -0,0 +1,3 @@
+import PgModalHeader from './modalHeader';
+
+export default PgModalHeader;

package/pg/modalHeader/modalHeader.css

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+}
+[part="header"] {
+  border-bottom: 1px solid var(--pg-modal-header-border-color, #ccc);
+  background: var(--pg-modal-header-background, #f1f1f1);
+  padding: var(--pg-modal-header-padding, 0.75rem 1rem);
+  font-size: 1.25rem;
+}

package/pg/modalHeader/modalHeader.html

@@ -0,0 +1,3 @@
+<header part="header">
+  <slot></slot>
+</header>

package/pg/modalHeader/modalHeader.ts

@@ -0,0 +1,13 @@
+import { Component } from '@pictogrammers/element';
+
+import template from './modalHeader.html';
+import style from './modalHeader.css';
+
+@Component({
+  selector: 'pg-modal-header',
+  style,
+  template
+})
+export default class PgModalHeader extends HTMLElement {
+
+}

package/pg/modification/__examples__/basic/basic.html

@@ -4,5 +4,5 @@
     <button part="single">Single Item</button>
     <button part="editToggle">Toggle Edit Mode</button>
   </div>
-  <pg-modification part="modification"></pg-nav>
+  <pg-modification part="modification"></pg-modification>
 </div>

package/pg/tree/README.md

@@ -1,81 +1,122 @@
-# Tree
-
-The `pg-tree` is used to render a tree list of items.
-
-- Folder / Item symbols
-- Drag and Drop
-- Context Menu
-
-## Usage
-
-While setup for a normal file tree this can be used for any folder structure.
-
-```typescript
-import PgTree, { SelectedTreeItem } from '@pictogrammers/components/pg/tree';
-```
-
-## Events
-
-- select
-- rename
-- menu
-- action
-- drop
-
-```typescript
-this.$tree.addEventListener('select', (e: any) => {
-  const { items } = e.detail;
-  // items is a
-  this.selectedItems = items;
-});
-```
-
-```typescript
-this.$tree.addEventListener('rename', (e: any) => {
-  const { item, label } = e.detail;
-  const itemData = item.getData();
-  itemData.label = label;
-});
-```
-
-```typescript
-this.$tree.addEventListener('menu', (e: any) => {
-  // menu item click
-});
-```
-
-```typescript
-this.$tree.addEventListener('action', (e: any) => {
-  const { item, actionIndex } = e.detail;
-  // item is a wrapper with all utility functions
-  switch(actionIndex) {
-    case 0:
-      // select in view
-      break;
-    case 1:
-      item.remove();
-      break;
-  }
-});
-```
-
-```typescript
-this.$tree.addEventListener('drop', (e: any) => {
-  // cancelable
-  const { items, dropIndexes } = e.detail;
-  // If folder ignore items under folder
-
-  items.forEach(() => {
-    item.move(dropIndexes);
-  })
-});
-```
-
-## Custom Size
-
-Resize from the default 32px height all the way down to 24px tall via a CSS Variable.
-
-```css
---pg-icon-width: 1rem;
---pg-icon-height: 1rem;
-```
+# Tree
+
+The `pg-tree` is used to render a tree list of items.
+
+- Folder / Item symbols
+- Drag and Drop
+- Context Menu
+
+## Usage
+
+While setup for a normal file tree this can be used for any folder structure.
+
+```typescript
+import PgTree, { SelectedTreeItem } from '@pictogrammers/components/pg/tree';
+```
+
+## Item Data Shape
+
+Each item in the `items` array follows this structure:
+
+```typescript
+{
+  label: string;
+  icon: { path: string };
+  isFolder: boolean;      // true enables the drop-onto zone and .items CSS class
+  expanded?: boolean;     // folders only
+  items?: any[];          // child items (folders only)
+  actions?: {
+    type: typeof PgTreeButtonIcon;
+    icon: string;
+    enabled: boolean;
+    label?: string;       // used as button title / aria-label
+  }[];
+}
+```
+
+## Events
+
+- `select` — one or more items selected / deselected
+- `rename` — item label edited inline
+- `menu` — right-click context menu requested
+- `action` — an action button clicked
+- `move` — drag-and-drop reorder completed
+
+```typescript
+this.$tree.addEventListener('select', (e: any) => {
+  const { items } = e.detail;
+  this.selectedItems = items;
+});
+```
+
+```typescript
+this.$tree.addEventListener('rename', (e: any) => {
+  const { item, label } = e.detail;
+  item.getData().label = label;
+});
+```
+
+```typescript
+this.$tree.addEventListener('menu', (e: any) => {
+  const { item, x, y } = e.detail;
+  // show context menu at (x, y) for item
+});
+```
+
+```typescript
+this.$tree.addEventListener('action', (e: any) => {
+  const { item, actionIndex } = e.detail;
+  switch (actionIndex) {
+    case 0:
+      // toggle visibility
+      break;
+    case 1:
+      item.remove();
+      break;
+  }
+});
+```
+
+```typescript
+this.$tree.addEventListener('move', (e: any) => {
+  const { item, position } = e.detail;
+  // position is 'before' | 'after' | 'on'
+  this.selectedItems.forEach((selected: SelectedTreeItem) => {
+    selected.move(item, position);
+  });
+});
+```
+
+## SelectedTreeItem API
+
+The `item` object passed in event details wraps the raw data with helper methods:
+
+```typescript
+item.indexes          // number[] — path to this item in the tree
+item.getData()        // returns the raw data object
+item.getParentData()  // returns the parent's raw data (or the tree root)
+item.remove()         // removes the item and clears selection
+item.move(targetItem, position)  // moves to 'before' | 'after' | 'on' the target
+```
+
+## Custom Size
+
+Resize the row height via a CSS variable (default `2`, range `1`–`2`):
+
+```css
+pg-tree {
+  --pg-tree-size: 1.5;
+}
+```
+
+## CSS Custom Properties
+
+| Property | Description |
+|---|---|
+| `--pg-tree-background` | Background of the tree container |
+| `--pg-tree-item-background` | Default item row background |
+| `--pg-tree-item-color` | Icon and text color |
+| `--pg-tree-item-font-size` | Label font size |
+| `--pg-tree-selected-primary` | Selection indicator / toggle color |
+| `--pg-tree-selected-secondary` | Selected row background |
+| `--pg-tree-selected-secondary-hover` | Selected row hover background |

package/pg/tree/tree.ts

@@ -49,11 +49,7 @@ export default class PgTree extends HTMLElement {
       this.dispatchEvent(new CustomEvent('move', {
         detail: { position: e.detail.position }
       }));
-      this.dispatchEvent(new CustomEvent('select', {
-        detail: {
-          items: [...this.#selectedIndexes.values()].map((idxs: any) => this.#wrap(idxs)),
-        }
-      }));
+      this.#dispatchSelect();
     });
     this.$items.addEventListener('rename', (e: any) => {
       e.stopPropagation();
@@ -114,11 +110,7 @@ export default class PgTree extends HTMLElement {
         }
       }
 
-      this.dispatchEvent(new CustomEvent('select', {
-        detail: {
-          items: [...this.#selectedIndexes.values()].map((idxs: any) => this.#wrap(idxs)),
-        }
-      }));
+      this.#dispatchSelect();
     });
     this.$items.addEventListener('up', (e: any) => {
       e.stopPropagation();
@@ -141,9 +133,7 @@ export default class PgTree extends HTMLElement {
         this.#selectedIndexes.forEach((idxs: any) => this.#getItem(idxs).selected = false);
         this.#selectedIndexes.clear();
         this.#lastSelectedIndexes = null;
-        this.dispatchEvent(new CustomEvent('select', {
-          detail: { items: [] }
-        }));
+        this.#dispatchSelect();
       } else if (e.key === 'Delete') {
         const toRemove = [...this.#selectedIndexes.values()] as number[][];
         // Remove higher sibling indexes first to avoid index shifts
@@ -158,6 +148,7 @@ export default class PgTree extends HTMLElement {
         toRemove.forEach((indexes: number[]) => this.#removeItem(indexes));
         this.#selectedIndexes.clear();
         this.#lastSelectedIndexes = null;
+        this.#dispatchSelect();
       }
     });
     this.$items.addEventListener('itemdragstart', (e: any) => {
@@ -186,12 +177,7 @@ export default class PgTree extends HTMLElement {
         }
       });
       this.$items.classList.toggle('dragging', true);
-      // Sync selection to consumers so #selectedItems reflects the dragged item
-      this.dispatchEvent(new CustomEvent('select', {
-        detail: {
-          items: [...this.#selectedIndexes.values()].map((idxs: any) => this.#wrap(idxs)),
-        }
-      }));
+      this.#dispatchSelect();
     });
     this.$items.addEventListener('itemdragend', () => {
       this.#draggingElements.forEach(el => el.classList.remove('dragging'));
@@ -351,6 +337,7 @@ export default class PgTree extends HTMLElement {
         this.#removeItem(indexes);
         this.#selectedIndexes.clear();
         this.#lastSelectedIndexes = null;
+        this.#dispatchSelect();
       },
       getData: () => this.#getItem(indexes),
       getParentData: () => {
@@ -359,6 +346,7 @@ export default class PgTree extends HTMLElement {
       },
       move: (item: SelectedTreeItem, position: string) => {
         this.#batchMove([indexes], item.indexes, position);
+        this.#dispatchSelect();
       }
     };
   }
@@ -368,11 +356,21 @@ export default class PgTree extends HTMLElement {
     const unproxyItem = getProxyValue(item);
     item.selected = false;
     this.#selectedIndexes.delete(unproxyItem);
+    this.#dispatchSelect();
   }
 
   unselectAll() {
     this.#selectedIndexes.forEach((idxs: any) => this.#getItem(idxs).selected = false);
     this.#selectedIndexes.clear();
+    this.#dispatchSelect();
+  }
+
+  #dispatchSelect() {
+    this.dispatchEvent(new CustomEvent('select', {
+      detail: {
+        items: [...this.#selectedIndexes.values()].map((idxs: any) => this.#wrap(idxs)),
+      }
+    }));
   }
 
   #calculateDragExcludes(): string[] {

package/pg/treeButtonIcon/treeButtonIcon.css

@@ -11,8 +11,13 @@
   border-radius: 0.125rem;
 }
 
-[part="button"]:hover {
+[part="button"]:hover:not(:disabled) {
   box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.25);
   background-color: rgba(255, 255, 255, 0.5);
   border-radius: 0.125rem;
+}
+
+[part="button"]:disabled {
+  opacity: 0.35;
+  cursor: default;
 }

package/pg/treeButtonIcon/treeButtonIcon.ts

@@ -1,42 +1,52 @@
-import { Component, Prop, Part } from '@pictogrammers/element';
-
-import template from './treeButtonIcon.html';
-import style from './treeButtonIcon.css';
-import PgIcon from '../icon/icon';
-
-const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
-
-@Component({
-  selector: 'pg-tree-button-icon',
-  style,
-  template
-})
-export default class PgTreeButtonIcon extends HTMLElement {
-
-  @Prop() index: number;
-  @Prop() icon: string = noIcon;
-
-  @Part() $button: HTMLButtonElement;
-  @Part() $icon: PgIcon;
-
-  connectedCallback() {
-    this.$button.addEventListener('click', this.#handleClick.bind(this))
-  }
-
-  #handleClick(e) {
-    this.dispatchEvent(new CustomEvent('action', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        index: this.index
-      }
-    }));
-  }
-
-  render(changes) {
-    if (changes.icon) {
-      this.$icon.path = this.icon;
-    }
-  }
-
-}
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './treeButtonIcon.html';
+import style from './treeButtonIcon.css';
+import PgIcon from '../icon/icon';
+
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
+@Component({
+  selector: 'pg-tree-button-icon',
+  style,
+  template
+})
+export default class PgTreeButtonIcon extends HTMLElement {
+
+  @Prop() index: number;
+  @Prop() icon: string = noIcon;
+  @Prop() enabled: boolean = false;
+  @Prop() label: string = '';
+
+  @Part() $button: HTMLButtonElement;
+  @Part() $icon: PgIcon;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', this.#handleClick.bind(this));
+  }
+
+  #handleClick() {
+    if (!this.enabled) return;
+    this.dispatchEvent(new CustomEvent('action', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        index: this.index
+      }
+    }));
+  }
+
+  render(changes) {
+    if (changes.icon) {
+      this.$icon.path = this.icon;
+    }
+    if (changes.enabled) {
+      this.$button.disabled = !this.enabled;
+    }
+    if (changes.label) {
+      this.$button.title = this.label;
+      this.$button.setAttribute('aria-label', this.label);
+    }
+  }
+
+}