@pictogrammers/components 0.5.18 → 0.5.20

package/package.json

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

package/pg/button/button.css

@@ -36,25 +36,18 @@
   --pg-icon-color: var(--pg-button-hover-color, #FFFFFF);
 }
 
+[part=button]:hover:active {
+  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 1) inset;
+}
+
 [part=button]:active {
-  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.5) inset;
-  position: relative;
+  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.3) inset;
 }
 
 [part=button]:focus-visible {
   position: relative;
 }
 
-[part=button]:active::before {
-  content: '';
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
-  border-radius: var(--pg-button-border-radius, 0.25rem);
-  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
-}
 [part=button]:focus-visible::before {
   pointer-events: none;
   content: '';

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/inputNumber/inputNumber.css

@@ -14,11 +14,17 @@
   font-size: 1rem;
   outline: none;
   field-sizing: content;
-  min-width: calc(
-    100%
-    - var(--pg-input-number-padding-inline-start, var(--pg-input-number-padding-inline, 0.5rem))
-    - var(--pg-input-number-padding-inline-end, var(--pg-input-number-padding-inline, 0.5rem))
-    - 2px
+  min-width: max(
+    1rem,
+    var(
+      --pg-input-number-min-width,
+      calc(
+        100%
+        - var(--pg-input-number-padding-inline-start, var(--pg-input-number-padding-inline, 0.5rem))
+        - var(--pg-input-number-padding-inline-end, var(--pg-input-number-padding-inline, 0.5rem))
+        - 2px
+      )
+    )
   );
   max-width: calc(
     var(--pg-input-number-max-width, 100%)

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);
+    }
+  }
+
+}