@pictogrammers/components 0.3.2 → 0.4.0

package/pg/tabs/partials/tab.ts

@@ -0,0 +1,70 @@
+import { Component, Prop, Part, node, forEach } from '@pictogrammers/element';
+
+import template from './tab.html';
+import style from './tab.css';
+
+@Component({
+  selector: 'pg-partial-tab',
+  template,
+  style
+})
+export default class PgPartialTab extends HTMLElement {
+
+  @Prop() index: number;
+  @Prop() label: string = '';
+  @Prop() selected: boolean = false;
+
+  @Part() $tab: HTMLLIElement;
+  @Part() $button: HTMLButtonElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', this.#handleClick.bind(this));
+    this.$button.addEventListener('keydown', this.#handleKeyDown.bind(this));
+  }
+
+  render(changes) {
+    if (changes.label) {
+      this.$button.textContent = this.label;
+    }
+    if (changes.selected) {
+      this.$button.classList.toggle('selected', this.selected);
+    }
+  }
+
+  #handleClick() {
+    const selectEvent = new CustomEvent('select', {
+      detail: {
+        index: this.index
+      }
+    });
+    this.dispatchEvent(selectEvent);
+  }
+
+  #handleKeyDown(e: KeyboardEvent) {
+    switch(e.key) {
+      case 'ArrowLeft':
+        const arrowLeftEvent = new CustomEvent('arrowleft', {
+          detail: {
+            index: this.index
+          }
+        });
+        this.dispatchEvent(arrowLeftEvent);
+        e.preventDefault();
+        break;
+      case 'ArrowRight':
+        const arrowRightEvent = new CustomEvent('arrowright', {
+          detail: {
+            index: this.index
+          }
+        });
+        this.dispatchEvent(arrowRightEvent);
+        e.preventDefault();
+        break;
+    }
+  }
+
+  focus() {
+    this.$button.focus();
+  }
+
+}

package/pg/tabs/tabs.css

@@ -14,56 +14,3 @@
 [part="tab"] {
   margin-right: 0.25rem;
 }
-
-[part="button"] {
-  position: relative;
-  display: flex;
-  line-height: calc(2.5rem - 0.5px);
-  border-top: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-bottom: 0;
-  border-left: 1px solid transparent;
-  border-radius: 0.25rem 0.25rem 0 0;
-  padding: 0 0.75rem;
-  text-decoration: none;
-  color: var(--pg-tab-border, #453C4F);
-  align-items: center;
-  align-content: center;
-  box-sizing: border-box;
-  outline: none;
-  background: transparent;
-}
-
-[part="tab"].active [part="button"] {
-  border-color: var(--pg-tab-border, #453C4F);
-  font-weight: bold;
-  background: #fff;
-  cursor: default;
-  height: calc(2.5rem + 0.5px);
-}
-
-[part="button"]:not(.active):hover {
-  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-search-focus-glow, rgb(79, 143, 249, 0.6));
-}
-
-[part="button"]:focus::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-search-focus-glow, rgb(79, 143, 249, 0.5));
-}

package/pg/tabs/tabs.ts

@@ -1,10 +1,9 @@
-import { Component, Prop, Part, node } from '@pictogrammers/element';
-import { list, item } from '../shared/list';
+import { Component, Prop, Part, node, forEach } from '@pictogrammers/element';
 import PgTab from '../tab/tab';
 
 import template from './tabs.html';
 import style from './tabs.css';
-import partialTab from './partials/tab.html';
+import PgPartialTab from './partials/tab';
 
 @Component({
   selector: 'pg-tabs',
@@ -13,90 +12,75 @@ import partialTab from './partials/tab.html';
 })
 export default class PgTabs extends HTMLElement {
 
-  @Part() $tabset: HTMLDivElement;
+  @Part() $tabset: HTMLUListElement;
   @Part() $slot: HTMLSlotElement;
 
-  tabs: any[] = [];
+  @Prop() tabs: any[] = [];
+
+  #selectedTab: number = 0;
+  #focusedTab: number = 0;
 
   connectedCallback() {
-    this.addEventListener('tab', this.handleTab.bind(this));
+    this.addEventListener('tab', this.#handleTab.bind(this));
     this.$slot.addEventListener('slotchange', this.handleSlotChange.bind(this));
-  }
-
-  handleTab(e: CustomEvent) {
-    const { detail } = e;
-    this.tabs.push(detail);
-    list(
-      this.$tabset,
-      this.tabs,
-      'id',
-      (tab: any) => {
-        const n = node<HTMLDivElement>(partialTab, {
-          button: {
-            innerText: tab.label
+    forEach({
+      container: this.$tabset,
+      items: this.tabs,
+      type(tab: any) {
+        return PgPartialTab;
+      },
+      connect: ($tab: PgPartialTab, tab) => {
+        $tab.addEventListener('select', (e: any) => {
+          const $tabs = Array.from(this.$tabset.children) as PgPartialTab[];
+          const { index } = e.detail;
+          const elements = this.$slot.assignedElements() as PgTab[];
+          elements[this.#selectedTab].hide();
+          $tabs[this.#selectedTab].selected = false;
+          elements[index].show();
+          $tab.selected = true;
+          this.#selectedTab = index;
+        });
+        $tab.addEventListener('arrowleft', (e: any) => {
+          const $tabs = Array.from(this.$tabset.children) as PgPartialTab[];
+          const { index } = e.detail;
+          if (this.tabs.length > 1) {
+            if (index === 0) {
+              this.#focusedTab = this.tabs.length - 1;
+            } else {
+              this.#focusedTab = index - 1;
+            }
+            $tabs[this.#focusedTab].focus();
           }
         });
-        const button = n.querySelector<HTMLDivElement>('[part="tab"]');
-        button?.addEventListener('click', (e) => {
-          this.selectTab(tab.id);
-          this.dispatchEvent(new CustomEvent<any>('select', { detail: tab }));
+        $tab.addEventListener('arrowright',  (e: any) => {
+          const $tabs = Array.from(this.$tabset.children) as PgPartialTab[];
+          const { index } = e.detail;
+          if (this.tabs.length > 1) {
+            if (index === this.tabs.length - 1) {
+              this.#focusedTab = 0;
+            } else {
+              this.#focusedTab++;
+            }
+            $tabs[this.#focusedTab].focus();
+          }
         });
-        button?.addEventListener('keydown', this.handleTabKeypress.bind(this));
-        if (this.tabs[0].id === tab.id) {
-          button?.classList.add('active');
-        }
-        return n;
-      },
-      (tab, $item) => {
-
       }
-    );
-    e.stopPropagation();
+    });
   }
 
-  handleTabKeypress(e) {
-    const tabs = Array.from(this.$tabset.children, x => x.children[0]);
-    if (tabs.length === 1) {
-      return;
-    }
-    const index = tabs.findIndex(x => x === e.target);
-    const previousIndex = index === 0 ? tabs.length - 1 : index - 1;
-    const nextIndex = index === tabs.length - 1 ? 0 : index + 1;
-    const previousTab = this.tabs[previousIndex];
-    const previousButton = tabs[previousIndex] as HTMLButtonElement;
-    const nextTab = this.tabs[nextIndex];
-    const nextButton = tabs[nextIndex] as HTMLButtonElement;
-    switch(e.key) {
-      case 'ArrowLeft':
-        if (previousTab) {
-          previousButton.focus();
-          this.selectTab(previousTab.id);
-        }
-        break;
-      case 'ArrowRight':
-        if (nextTab) {
-          nextButton.focus();
-          this.selectTab(nextTab.id);
-        }
-        break;
-    }
+  #handleTab(e: CustomEvent) {
+    const { detail } = e;
+    this.tabs.push(detail);
+    e.stopPropagation();
   }
 
-  handleSlotChange(e) {
+  handleSlotChange(e: Event) {
+    const tabs = Array.from(this.$tabset.children) as PgPartialTab[];
     const elements = this.$slot.assignedElements() as PgTab[];
     if (elements.length !== 0) {
       elements[0].show();
+      tabs[0].selected = true;
     }
   }
 
-  selectTab(id: string) {
-    const tabs = Array.from(this.$tabset.children) as HTMLElement[];
-    for (let tab of tabs) {
-      tab.classList.toggle('active', tab.dataset['key'] === id);
-    }
-    const elements = this.$slot.assignedElements() as PgTab[];
-    elements.forEach(e => e.hide());
-    const tab = elements.find(e => e.uuid === id) as PgTab;
-    tab.show();
-  }
 }

package/pg/toast/README.md

@@ -1,13 +1,42 @@
-# `<pg-toast>`
+# `PgToast`
 
-The `pg-toast` lives inside of the `pg-toasts` element.
+The `PgToast` utility will open a toast in the top right of the page.
 
 ```typescript
-import '@pictogrammers/components/pgToast.js';
+import PgToast from '@pictogrammers/components/pgToast';
 ```
 
-```html
-<pg-toast></pg-toast>
+```typescript
+PgToast.open({
+  type: 'info',
+  message: 'Loading...',
+  loading: true
+});
+
+// On Success
+this.handleToast.resolve({
+  type: 'success',
+  message: 'Saved',
+  timeout: 5
+});
+// On Error
+this.handleToast.reject({
+  type: 'error',
+  message: 'Saved',
+  timeout: 5
+});
+// Close open toast with no config
+disconnectedCallback() {
+  this.handleToast?.resolve();
+}
 ```
 
-This is entirely a presentational component.
+| Prop | default | Description |
+| ---- | ------- | ----------- |
+| `type` | `info` | `info`, `warning`, `success`, `error` |
+| `message` | `''` | Message string. |
+| `timeout` | `undefined` | Timeout in seconds |
+
+Toasts can be updated in place without adding to the queue by using the `handleToast` config.
+
+Toasts with a `timeout` will automatically hide and any future `handleToast` executions will add to the queue as a new toast.

package/pg/toast/__examples__/basic/basic.html

@@ -0,0 +1,7 @@
+<div>
+  <button part="toastInfo">Info</button>
+  <button part="toastWarning">Warning</button>
+  <button part="toastError">Error</button>
+  <button part="toastLoading">Loading (mock 3 seconds)</button>
+  <button part="toastToggle">Toggle Toast</button>
+</div>

package/pg/toast/__examples__/basic/basic.ts

@@ -0,0 +1,76 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgToast from '../../toast';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-toast-basic',
+  template
+})
+export default class XPgToastsBasic extends HTMLElement {
+
+  @Part() $toastInfo: HTMLButtonElement;
+  @Part() $toastWarning: HTMLButtonElement;
+  @Part() $toastError: HTMLButtonElement;
+  @Part() $toastLoading: HTMLButtonElement;
+  @Part() $toastToggle: HTMLButtonElement;
+
+  connectedCallback() {
+    this.$toastInfo.addEventListener('click', this.handleInfo.bind(this));
+    this.$toastWarning.addEventListener('click', this.handleWarning.bind(this));
+    this.$toastError.addEventListener('click', this.handleError.bind(this));
+    this.$toastLoading.addEventListener('click', this.handleLoading.bind(this));
+    this.$toastToggle.addEventListener('click', this.handleToggle.bind(this));
+  }
+
+  handleInfo() {
+    PgToast.open({
+      type: 'info',
+      message: 'Hello World! With really long content that wraps rows.',
+    });
+  }
+
+  handleWarning() {
+    PgToast.open({
+      type: 'warning',
+      message: 'Hello World! Warning',
+    });
+  }
+
+  handleError() {
+    PgToast.open({
+      type: 'error',
+      message: 'Hello World! Error',
+    });
+  }
+
+  async handleLoading() {
+    const toast = await PgToast.open({
+      type: 'info',
+      message: 'Loading...',
+      loading: true
+    });
+    setTimeout(() => {
+      toast({
+        type: 'success',
+        message: 'Saved record.',
+        timeout: 5
+      });
+    }, 3000);
+  }
+
+  cacheToast: any;
+  async handleToggle() {
+    if (!this.cacheToast) {
+      this.cacheToast = await PgToast.open({
+        type: 'info',
+        message: 'Loading...',
+        loading: true
+      });
+    } else {
+      this.cacheToast();
+      this.cacheToast = null;
+    }
+  }
+
+}

package/pg/toast/toast.css

@@ -1,4 +1,7 @@
 [part~=button] {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
   display: flex;
   background: #737E9E;
   box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);

package/pg/toast/toast.ts

@@ -1,16 +1,18 @@
 import { Component, Prop, Part } from '@pictogrammers/element';
 import { uuid } from '../shared/uuid';
-import { removeToast } from '../shared/toast';
 
 import template from './toast.html';
 import style from './toast.css';
+import PgOverlay from '../overlay/overlay';
+
+const toasts = [];
 
 @Component({
   selector: 'pg-toast',
   style,
   template
 })
-export default class PgToast extends HTMLElement {
+export default class PgToast extends PgOverlay {
   @Prop() loading: boolean = false;
   @Prop() message: string = '';
   @Prop() type: string = 'default';
@@ -22,16 +24,30 @@ export default class PgToast extends HTMLElement {
   @Part() $message: HTMLSpanElement;
   @Part() $loading: HTMLSpanElement;
 
+  static open(props: any = {}): Promise<any> {
+    // ToDo: validate props
+    super.open(props);
+    const key = uuid();
+    return Promise.resolve(function (config?: any) {
+      const scopedKey = key;
+      if (config === undefined) {
+        this.toasts.find(t => t.key === scopedKey).remove();
+      }
+    });
+  }
+
   toasts: any[] = [];
 
   connectedCallback() {
+    // Position toast
+    // close toast
     this.$button.addEventListener('click', () => {
-      removeToast(this.key);
+      this.remove();
     });
   }
 
   render() {
-    this.$message.innerText = this.message;
+    this.$message.textContent = this.message;
     this.$loading.classList.toggle('hide', !this.loading);
     this.$button.classList.toggle('error', this.type === 'error');
     this.$button.classList.toggle('warning', this.type === 'warning');

package/pg/tooltip/addTooltip.ts

@@ -1,3 +1,5 @@
+import { BOTTOM } from "./position";
+
 export function addTooltip($part, render, position?) {
   function handleMouseEnter() {
     $part.dispatchEvent(
@@ -6,7 +8,7 @@ export function addTooltip($part, render, position?) {
           visible: true,
           rect: $part.getBoundingClientRect(),
           text: render(),
-          position: position
+          position: position ?? BOTTOM
         },
         bubbles: true,
         composed: true

package/pg/tooltip/tooltip.ts

@@ -141,7 +141,7 @@ export default class PgTooltip extends HTMLElement {
   @Part() $tooltipArrow: HTMLDivElement;
 
   render(changes) {
-    this.$tooltipText.innerText = this.text;
+    this.$tooltipText.textContent = this.text;
     this.style.position = 'absolute';
     if (changes.visible) {
       this.style.display = this.visible ? 'block' : 'none';

package/pg/tree/README.md

@@ -0,0 +1,67 @@
+# 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.
+
+## Events
+
+- select
+- rename
+- menu
+- action
+- drop
+
+```typescript
+this.$tree.addEventListener('select', (e: any) => {
+  const { items } = e.detail;
+  this.selectedItems = items;
+});
+```
+
+```typescript
+this.$tree.addEventListener('rename', (e: any) => {
+  const { indexes, label } = e.detail;
+  const item = this.#getItem(indexes);
+  item.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);
+  })
+});
+```

package/pg/tree/__examples__/basic/basic.html

@@ -0,0 +1,10 @@
+<div style="background: #F1F1F1;padding: 0.25rem;">
+  <div style="background: #FFF; max-width: 20rem">
+    <pg-tree part="tree"></pg-tree>
+  </div>
+</div>
+<h2>Tools</h2>
+<button part="addItem">Add Item</button>
+<button part="addFolder">Add Folder</button>
+<button part="removeItem">Remove Item</button>
+<button part="updateItem">Update Selected Label Item</button>