@pictogrammers/components 0.3.2 → 0.4.0

package/pg/modification/__examples__/basic/constants.ts

@@ -30,8 +30,7 @@ export const modifications: any[] = [
     "user": {
       "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
       "name": "Austin Andrews",
-      "github": "templarian",
-      "twitter": "Templarian"
+      "github": "templarian"
     },
     "icon": null,
     "version": {
@@ -56,8 +55,7 @@ export const modifications: any[] = [
     "user": {
       "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
       "name": "Austin Andrews",
-      "github": "templarian",
-      "twitter": "Templarian"
+      "github": "templarian"
     },
     "icon": {
       "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
@@ -66,8 +64,7 @@ export const modifications: any[] = [
       "user": {
         "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
         "name": "First Last",
-        "github": "GitHubUser",
-        "twitter": "TwitterName"
+        "github": "GitHubUser"
       }
     },
     "issue": 42
@@ -87,8 +84,7 @@ export const modifications: any[] = [
     "user": {
       "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
       "name": "Austin Andrews",
-      "github": "templarian",
-      "twitter": "Templarian"
+      "github": "templarian"
     },
     "icon": {
       "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
@@ -97,8 +93,7 @@ export const modifications: any[] = [
       "user": {
         "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
         "name": "First Last",
-        "github": "GitHubUser",
-        "twitter": "TwitterName"
+        "github": "GitHubUser"
       }
     },
     "issue": 42
@@ -118,8 +113,7 @@ export const modifications: any[] = [
     "user": {
       "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
       "name": "Austin Andrews",
-      "github": "templarian",
-      "twitter": "Templarian"
+      "github": "templarian"
     },
     "icon": {
       "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
@@ -128,8 +122,7 @@ export const modifications: any[] = [
       "user": {
         "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
         "name": "First Last",
-        "github": "GitHubUser",
-        "twitter": "TwitterName"
+        "github": "GitHubUser"
       }
     },
     "issue": 42
@@ -149,8 +142,7 @@ export const modifications: any[] = [
     "user": {
       "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
       "name": "Austin Andrews",
-      "github": "templarian",
-      "twitter": "Templarian"
+      "github": "templarian"
     },
     "icon": {
       "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
@@ -159,8 +151,7 @@ export const modifications: any[] = [
       "user": {
         "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
         "name": "First Last",
-        "github": "GitHubUser",
-        "twitter": "TwitterName"
+        "github": "GitHubUser"
       }
     },
     "issue": 42
@@ -180,8 +171,7 @@ export const modifications: any[] = [
     "user": {
       "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
       "name": "Austin Andrews",
-      "github": "templarian",
-      "twitter": "Templarian"
+      "github": "templarian"
     },
     "icon": {
       "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
@@ -190,8 +180,7 @@ export const modifications: any[] = [
       "user": {
         "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
         "name": "First Last",
-        "github": "GitHubUser",
-        "twitter": "TwitterName"
+        "github": "GitHubUser"
       }
     },
     "issue": 42
@@ -211,8 +200,7 @@ export const modifications: any[] = [
     "user": {
       "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
       "name": "Austin Andrews",
-      "github": "templarian",
-      "twitter": "Templarian"
+      "github": "templarian"
     },
     "icon": {
       "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
@@ -221,8 +209,7 @@ export const modifications: any[] = [
       "user": {
         "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
         "name": "First Last",
-        "github": "GitHubUser",
-        "twitter": "TwitterName"
+        "github": "GitHubUser"
       }
     },
     "issue": 42
@@ -242,8 +229,7 @@ export const modifications: any[] = [
     "user": {
       "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
       "name": "Austin Andrews",
-      "github": "templarian",
-      "twitter": "Templarian"
+      "github": "templarian"
     },
     "icon": {
       "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
@@ -252,8 +238,7 @@ export const modifications: any[] = [
       "user": {
         "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
         "name": "First Last",
-        "github": "GitHubUser",
-        "twitter": "TwitterName"
+        "github": "GitHubUser"
       }
     },
     "issue": 42
@@ -273,8 +258,7 @@ export const modifications: any[] = [
     "user": {
       "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
       "name": "Austin Andrews",
-      "github": "templarian",
-      "twitter": "Templarian"
+      "github": "templarian"
     },
     "icon": {
       "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
@@ -283,8 +267,7 @@ export const modifications: any[] = [
       "user": {
         "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
         "name": "First Last",
-        "github": "GitHubUser",
-        "twitter": "TwitterName"
+        "github": "GitHubUser"
       }
     },
     "issue": 42
@@ -304,8 +287,7 @@ export const modifications: any[] = [
     "user": {
       "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
       "name": "Austin Andrews",
-      "github": "templarian",
-      "twitter": "Templarian"
+      "github": "templarian"
     },
     "icon": {
       "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
@@ -314,8 +296,7 @@ export const modifications: any[] = [
       "user": {
         "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
         "name": "First Last",
-        "github": "GitHubUser",
-        "twitter": "TwitterName"
+        "github": "GitHubUser"
       }
     },
     "issue": 42
@@ -335,8 +316,7 @@ export const modifications: any[] = [
     "user": {
       "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
       "name": "Austin Andrews",
-      "github": "templarian",
-      "twitter": "Templarian"
+      "github": "templarian"
     },
     "icon": {
       "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
@@ -345,8 +325,7 @@ export const modifications: any[] = [
       "user": {
         "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
         "name": "First Last",
-        "github": "GitHubUser",
-        "twitter": "TwitterName"
+        "github": "GitHubUser"
       }
     },
     "issue": 42
@@ -366,8 +345,7 @@ export const modifications: any[] = [
     "user": {
       "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
       "name": "Austin Andrews",
-      "github": "templarian",
-      "twitter": "Templarian"
+      "github": "templarian"
     },
     "icon": {
       "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
@@ -376,8 +354,7 @@ export const modifications: any[] = [
       "user": {
         "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
         "name": "First Last",
-        "github": "GitHubUser",
-        "twitter": "TwitterName"
+        "github": "GitHubUser"
       }
     },
     "issue": 42
@@ -397,8 +374,7 @@ export const modifications: any[] = [
     "user": {
       "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
       "name": "Austin Andrews",
-      "github": "templarian",
-      "twitter": "Templarian"
+      "github": "templarian"
     },
     "icon": {
       "id": "AB147073-9D20-4DA1-A108-3856FC1764C1",
@@ -407,8 +383,7 @@ export const modifications: any[] = [
       "user": {
         "id": "79c44334-2d86-11e5-8ac4-842b2b6cfe1b",
         "name": "First Last",
-        "github": "GitHubUser",
-        "twitter": "TwitterName"
+        "github": "GitHubUser"
       }
     },
     "issue": 42

package/pg/modification/modification.ts

@@ -96,7 +96,7 @@ function itemsInsertDates(modifications) {
   template
 })
 export default class PgModification extends HTMLElement {
-  @Prop() modifications: Modification[] | null = null;
+  @Prop() modifications: Modification[] = [];
   @Prop() edit: boolean = false;
   // Ex: pictogrammers/repo
   @Prop() github: string = '';

package/pg/overlay/overlay.ts

@@ -1,26 +1,27 @@
-import { Component } from '@pictogrammers/element';
+import { Component, Prop } from '@pictogrammers/element';
 
-function camelToDash(str: string): string {
-  return str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase()
-}
-
-const layers: any[] = [];
-const promises: any[] = [];
+const layers: Set<HTMLElement> = new Set();
+const promises: Map<HTMLElement, (value: any) => void> = new Map();
 
 @Component()
 export default class PgOverlay extends HTMLElement {
   static open(props: any = {}): Promise<any> {
-    var ele = document.createElement(camelToDash(this.name));
+    var ele = document.createElement(this.name);
     Object.assign(ele, props);
     document.body.appendChild(ele);
-    layers.push(ele);
+    layers.add(ele);
     return new Promise((resolve) => {
-      promises.push(resolve);
+      promises.set(ele, resolve);
     });
   }
 
   close(result?: any) {
-    layers.pop().remove();
-    promises.pop()(result);
+    this.remove();
+    layers.delete(this);
+    const resolve = promises.get(this);
+    if (resolve) {
+      resolve(result);
+    }
+    promises.delete(this);
   }
 }

package/pg/overlayContextMenu/README.md

@@ -0,0 +1,35 @@
+# Overlay Menu
+
+The `PgOverlayContextMenu` creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.
+
+Components that use `PgOverlayContextMenu` include:
+
+- `pg-input-select`
+
+## Usage
+
+```typescript
+import PgMenuItem from '@pictogrammers/components/pg/menuItem';
+
+#isOpen: false;
+handleSourceClick(e: MouseEvent) {
+  if (this.#isOpen) { return; }
+  this.#isOpen = true;
+  const result = await PgOverlayContextMenu.open({
+    source: this.$element,
+    x: e.clientX,
+    y: e.clientY,
+    items: [{
+      label: 'Item 1',
+      value: 'item1',
+      type: PgMenuItem
+    }, {
+      label: 'Item 2',
+      value: 'item2',
+      type: PgMenuItem
+    }]
+  });
+  this.#isOpen = false;
+  console.log(result);
+}
+```

package/pg/overlayContextMenu/__examples__/basic/basic.css

@@ -0,0 +1,23 @@
+p {
+  margin: 0.5rem 0;
+}
+
+[part=area] {
+  display: flex;
+  width: 20rem;
+  height: 6rem;
+  border: 1px dashed rgb(79, 143, 249);
+  border-radius: 1rem;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+  background: var(--pg-focus-background-color, rgba(79, 143, 249, 0.1));
+  color: rgba(79, 143, 249, 0.75);
+  text-shadow: 0 0 4px #fff;
+  box-sizing: border-box;
+  outline: 0;
+}
+
+[part=area]:focus {
+  border-width: 2px;
+}

package/pg/overlayContextMenu/__examples__/basic/basic.html

@@ -0,0 +1,7 @@
+<div class="example">
+  <div part="area" tabindex="0">
+    Right Click or Context Menu Key
+  </div>
+  <p>Result: <code part="result"></code></p></p>
+  <p>input: <code part="input"></code></p></p>
+</div>

package/pg/overlayContextMenu/__examples__/basic/basic.ts

@@ -0,0 +1,87 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgMenuItemIcon from '../../../menuItemIcon/menuItemIcon';
+import PgMenuDivider from '../../../menuDivider/menuDivider';
+import PgOverlayContextMenu from '../../overlayContextMenu';
+
+import template from './basic.html';
+import style from './basic.css';
+
+const IconFile = 'M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z';
+const IconFolder = 'M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z';
+const IconLeft = 'M3,3H21V5H3V3M3,7H15V9H3V7M3,11H21V13H3V11M3,15H15V17H3V15M3,19H21V21H3V19Z';
+const IconCenter = 'M3,3H21V5H3V3M7,7H17V9H7V7M3,11H21V13H3V11M7,15H17V17H7V15M3,19H21V21H3V19Z';
+const IconRight = 'M3,3H21V5H3V3M9,7H21V9H9V7M3,11H21V13H3V11M9,15H21V17H9V15M3,19H21V21H3V19Z';
+
+@Component({
+  selector: 'x-pg-overlay-context-menu-basic',
+  template,
+  style
+})
+export default class XPgOverlayContextMenuBasic extends HTMLElement {
+  @Part() $area: HTMLDivElement;
+  @Part() $result: HTMLSpanElement;
+  @Part() $input: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$area.addEventListener('contextmenu', this.#handleContextMenu.bind(this));
+  }
+
+  #value = null;
+
+  async #handleContextMenu(e: MouseEvent) {
+    console.log('context');
+    e.preventDefault();
+    const items = [{
+      label: 'Add File',
+      value: 'item1',
+      icon: IconFile,
+      type: PgMenuItemIcon
+    },
+    {
+      label: 'Add Folder',
+      value: 'item2',
+      icon: IconFolder,
+      type: PgMenuItemIcon
+    },
+    {
+      type: PgMenuDivider
+    },
+    {
+      label: 'Text Alignment',
+      value: 'item3',
+      icon: IconLeft,
+      type: PgMenuItemIcon,
+      items: [{
+          label: 'Left',
+          value: 'left',
+          icon: IconLeft,
+          type: PgMenuItemIcon,
+          checked: true
+      }, {
+          label: 'Center',
+          value: 'center',
+          icon: IconCenter,
+          type: PgMenuItemIcon,
+          checked: false
+      }, {
+          label: 'Right',
+          value: 'right',
+          icon: IconRight,
+          type: PgMenuItemIcon,
+          checked: false
+      }]
+    }];
+    const result = await PgOverlayContextMenu.open({
+      source: this.$area,
+      x: e.clientX,
+      y: e.clientY,
+      value: this.#value,
+      items
+    });
+    if (result !== undefined) {
+      this.#value = result;
+    }
+    this.$result.textContent = JSON.stringify(result);
+  }
+}

package/pg/overlayContextMenu/index.ts

@@ -0,0 +1,3 @@
+import PgOverlayContextMenu from './overlayContextMenu';
+
+export default PgOverlayContextMenu;

package/pg/overlayContextMenu/overlayContextMenu.css

@@ -0,0 +1,16 @@
+:host {
+  display: contents;
+}
+
+[part="overlay"] {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  overflow: visible;
+  --pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
+  top: anchor(top);
+  left: anchor(left);
+  min-width: 10rem;
+  margin: var(--pg-overlay-menu-_y, 0) 0 0 var(--pg-overlay-menu-_x, 0);
+}

package/pg/overlayContextMenu/overlayContextMenu.html

@@ -0,0 +1,3 @@
+<div part="overlay">
+  <pg-menu part="menu"></pg-menu>
+</div>

package/pg/overlayContextMenu/overlayContextMenu.ts

@@ -0,0 +1,98 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgMenu from '../menu/menu';
+import PgOverlay from '../overlay/overlay';
+
+import template from './overlayContextMenu.html';
+import style from './overlayContextMenu.css';
+
+// Only allow a single open context menu
+const stack: PgOverlayContextMenu[] = [];
+const stack2: PgOverlayContextMenu[] = [];
+
+@Component({
+  selector: 'pg-overlay-context-menu',
+  template,
+  style
+})
+export default class PgOverlayContextMenu extends PgOverlay {
+  @Part() $overlay: HTMLDivElement;
+  @Part() $menu: PgMenu;
+
+  @Prop() source: HTMLElement | null = null;
+  @Prop() x: number = 0;
+  @Prop() y: number = 0;
+  @Prop() default: any = null;
+  @Prop() items: any[] = [];
+  @Prop() value: any = null;
+
+  render(changes) {
+    if (changes.items) {
+      //if (this.value !== null) {
+      //  this.items.forEach(item => item.checked = false);
+      //  this.items.find(item => item.value === this.value.value).checked = true;
+      //}
+      this.$menu.items = this.items;
+    }
+  }
+
+  connectedCallback() {
+    stack.pop()?.close();
+    stack.push(this);
+    stack2.push(this);
+    this.$menu.addEventListener('select', this.#handleSelect.bind(this));
+    this.$menu.addEventListener('close', this.#handleClose.bind(this));
+    this.$overlay.popover = 'auto';
+    if (this.source !== null) {
+      // @ts-ignore
+      this.$overlay.showPopover({
+        source: this.source
+      });
+    }
+    this.$overlay.addEventListener('toggle', this.#toggle.bind(this));
+    // Position
+    const rect = this.source?.getBoundingClientRect();
+    const x =  this.x - (rect?.left || 0),
+      y = this.y - (rect?.top || 0);
+    // ToDo: update to CSS Variables
+    this.$overlay.style.setProperty('--pg-overlay-menu-_x', `${x}px`);
+    this.$overlay.style.setProperty('--pg-overlay-menu-_y', `${y}px`);
+    // Focus
+    this.$menu.focus(0);
+    // Should return focus
+    this.#handleDown = this.#down.bind(this);
+    document.addEventListener('pointerdown', this.#handleDown);
+  }
+
+  #ignore = false;
+  #handleDown;
+  #down(e: MouseEvent) {
+    this.#ignore = e.composedPath().includes(this.source as any);
+  }
+
+  #toggle(e: ToggleEvent) {
+    if (e.newState === 'closed') {
+      this.close();
+      if (stack2.length === 0 && this.#ignore) {
+        console.log(e);
+        this.source?.focus();
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    stack2.pop();
+    document.removeEventListener('pointerdown', this.#handleDown);
+  }
+
+  #handleClose(e: any) {
+    this.close();
+    this.source?.focus();
+  }
+
+  #handleSelect(e: any) {
+    e.detail.item.index = e.detail.index;
+    this.close(e.detail.item);
+    this.source?.focus();
+  }
+}

package/pg/overlayMenu/README.md

@@ -0,0 +1,33 @@
+# Overlay Menu
+
+The `PgOverlayMenu` creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.
+
+Components that use `PgOverlayMenu` include:
+
+- `pg-button-menu`
+
+## Usage
+
+```typescript
+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);
+}
+```

package/pg/overlayMenu/__examples__/basic/basic.css

@@ -0,0 +1,3 @@
+p {
+  margin: 0.5rem 0;
+}

package/pg/overlayMenu/__examples__/basic/basic.html

@@ -0,0 +1,5 @@
+<div class="example">
+  <button part="button">Create Menu Overlay</button>
+  <p>Result: <code part="result"></code></p></p>
+  <p>input: <code part="input"></code></p></p>
+</div>

package/pg/overlayMenu/__examples__/basic/basic.ts

@@ -0,0 +1,62 @@
+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';
+import style from './basic.css';
+
+@Component({
+  selector: 'x-pg-overlay-menu-basic',
+  template,
+  style
+})
+export default class XPgOverlayMenuBasic extends HTMLElement {
+  @Part() $button: HTMLButtonElement;
+  @Part() $result: HTMLSpanElement;
+  @Part() $input: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', this.#handleClick.bind(this));
+  }
+
+  #value = null;
+
+  #menuOpen = false;
+  async #handleClick() {
+    if (this.#menuOpen) { return; }
+    const items = [{
+      label: 'Item 1',
+      value: 'item1',
+      type: PgMenuItem
+    },
+    {
+      label: 'Item 2',
+      value: 'item2',
+      type: PgMenuItem
+    },
+    {
+      type: PgMenuDivider
+    },
+    {
+      label: 'Item 3',
+      value: 'item3',
+      type: PgMenuItem
+    }];
+    this.#menuOpen = true;
+    const result = await PgOverlayMenu.open({
+      source: this.$button,
+      value: this.#value,
+      items,
+      oninput: (value) => {
+        this.$input.textContent = value;
+      }
+    });
+    if (result !== undefined) {
+      this.#value = result;
+    }
+    this.$result.textContent = result;
+    this.#menuOpen = false;
+  }
+}

package/pg/overlayMenu/index.ts

@@ -0,0 +1,3 @@
+import PgOverlayMenu from './overlayMenu';
+
+export default PgOverlayMenu;