@pictogrammers/components 0.3.1

package/pg/toast/toast.ts

@@ -0,0 +1,39 @@
+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';
+
+@Component({
+  selector: 'pg-toast',
+  style,
+  template
+})
+export default class PgToast extends HTMLElement {
+  @Prop() loading: boolean = false;
+  @Prop() message: string = '';
+  @Prop() type: string = 'default';
+  @Prop() key: string = uuid();
+
+  @Part() $button: HTMLButtonElement;
+  @Part() $loadingIcon: SVGElement;
+  @Part() $closeIcon: SVGElement;
+  @Part() $message: HTMLSpanElement;
+  @Part() $loading: HTMLSpanElement;
+
+  toasts: any[] = [];
+
+  connectedCallback() {
+    this.$button.addEventListener('click', () => {
+      removeToast(this.key);
+    });
+  }
+
+  render() {
+    this.$message.innerText = 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/toasts/README.md

@@ -0,0 +1,37 @@
+# `<pg-toast>`
+
+The `pg-toasts` will create instances of `pg-toast`.
+
+```typescript
+import '@pictogrammers/components/pgToast.js';
+```
+
+```html
+<pg-toasts></pg-toasts>
+```
+
+## Open Toast
+
+All of these functions will return the unique key used to track them. Note by default toasts disappear after `3` seconds. Setting `0` seconds will keep the toast opened indefinitely.
+
+```js
+import { addToast, addInfoToast } from '@pictogrammers/web-component';
+// Info
+addInfoToast(message, seconds = 3);
+addInfoToast('Hello World!');
+// Generic
+const key = addToast({
+  message: 'Hello World!',
+  seconds: 10,
+  loading: true
+});
+// removeToast(key)
+```
+
+## Close or Remove Toast
+
+Toasts that define an `key` can also be removed.
+
+```js
+removeToast(key);
+```

package/pg/toasts/__examples__/basic/basic.html

@@ -0,0 +1,11 @@
+<div>
+  <div class="example">
+    <pg-toasts></pg-toasts>
+  </div>
+  <button part="toastInfo">Info</button>
+  <button part="toastWarning">Warning</button>
+  <button part="toastError">Error</button>
+  <button part="toastLoading">Loading</button>
+  <button part="toastRemove">Remove Loading</button>
+  <p>Note: This just triggers the show to make styling easier.</p>
+</div>

package/pg/toasts/__examples__/basic/basic.ts

@@ -0,0 +1,86 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import template from './basic.html';
+
+function uuid() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+
+@Component({
+  selector: 'x-pg-toasts-basic',
+  template
+})
+export default class XPgToastsBasic extends HTMLElement {
+
+  @Part() $toastInfo: HTMLButtonElement;
+  @Part() $toastWarning: HTMLButtonElement;
+  @Part() $toastError: HTMLButtonElement;
+  @Part() $toastLoading: HTMLButtonElement;
+  @Part() $toastRemove: 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.$toastRemove.addEventListener('click', this.handleRemove.bind(this));
+  }
+
+  handleInfo() {
+    document.body.dispatchEvent(new CustomEvent('pgtoastadd', {
+      detail: {
+        type: 'info',
+        message: 'Hello World! With really long content that wraps rows.',
+        key: uuid()
+      }
+    }));
+  }
+
+  handleWarning() {
+    document.body.dispatchEvent(new CustomEvent('pgtoastadd', {
+      detail: {
+        type: 'warning',
+        message: 'Hello World! Warning',
+        key: uuid()
+      }
+    }));
+  }
+
+  handleError() {
+    document.body.dispatchEvent(new CustomEvent('pgtoastadd', {
+      detail: {
+        type: 'error',
+        message: 'Hello World! Error',
+        key: uuid()
+      }
+    }));
+  }
+
+  handleLoading() {
+    this.key = uuid();
+    document.body.dispatchEvent(new CustomEvent('pgtoastadd', {
+      detail: {
+        type: 'info',
+        message: 'Loading...',
+        loading: true,
+        key: this.key
+      }
+    }));
+  }
+
+  key: string = '';
+  handleRemove() {
+    if (this.key) {
+      document.body.dispatchEvent(new CustomEvent('pgtoastremove', {
+        detail: {
+          key: this.key
+        }
+      }));
+      this.key = '';
+    }
+  }
+
+}

package/pg/toasts/index.ts

@@ -0,0 +1,3 @@
+import PgToasts from './toasts';
+
+export default PgToasts;

package/pg/toasts/toasts.css

@@ -0,0 +1,8 @@
+[part~=container] {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+}

package/pg/toasts/toasts.html

@@ -0,0 +1 @@
+<div part="container"></div>

package/pg/toasts/toasts.ts

@@ -0,0 +1,51 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+import { observeToasts } from '../shared/toast';
+import PgToast from '../toast/toast';
+
+import template from './toasts.html';
+import style from './toasts.css';
+
+@Component({
+  selector: 'pg-toasts',
+  style,
+  template
+})
+export default class PgToasts extends HTMLElement {
+  toasts: any[] = [];
+
+  @Part() $container: HTMLDivElement;
+
+  connectedCallback() {
+    observeToasts({
+      add: (toast) => {
+        this.toasts.push(toast);
+        this.render();
+      },
+      remove: (key) => {
+        const index = this.toasts.findIndex(t => t.key === key);
+        if (index !== -1) {
+          var [toast] = this.toasts.splice(index, 1);
+          this.$container.querySelector(`[key="${toast.key}"]`)?.remove();
+        }
+      }
+    });
+  }
+
+  render() {
+    this.toasts.forEach((toast) => {
+      const existing = this.$container.querySelector(`[key="${toast.key}"]`) as PgToast;
+      if (existing) {
+        existing.message = toast.message;
+        existing.loading = toast.loading;
+        existing.type = toast.type;
+      } else {
+        const ele = document.createElement('pg-toast') as PgToast;
+        ele.setAttribute('key', toast.key);
+        ele.message = toast.message;
+        ele.loading = toast.loading;
+        ele.type = toast.type;
+        this.$container.appendChild(ele);
+      }
+    });
+  }
+}

package/pg/tooltip/README.md

@@ -0,0 +1,51 @@
+# `<pg-tooltip>`
+
+The `pg-tooltip` component should be placed on the top level. It then is wired to a shared event.
+
+```typescript
+import '@pictogrammers/components/pg/tooltip';
+import PgTooltip from '@pictogrammers/components/pg/tooltip';
+import { addTooltip } from '@pictogrammers/components/pg/addTooltip';
+```
+
+```html
+<pg-icon path="..."></pg-icon>
+```
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| path       | &#x2705; | Set path data |
+
+
+## Usage
+
+Wire up the tooltip listener.
+
+```javascript
+@Part() $tooltip: PgTooltip;
+
+connectedCallback() {
+  this.addEventListener('tooltip', this.handleTooltip.bind(this));
+}
+
+handleTooltip(e) {
+  const { visible, rect, text, position } = e.detail;
+  this.$tooltip.visible = visible;
+  this.$tooltip.rect = rect;
+  this.$tooltip.text = text;
+  this.$tooltip.position = position;
+  e.stopPropagation();
+}
+```
+
+Triggering a tooltip on a part.
+
+```javascript
+import { addTooltip } from '@pictogrammers/components/pg/tooltip/addTooltip';
+
+connectedCallback() {
+  addTooltip(this.$partName, () => {
+    return `Sponsor ${this.user.name} on GitHub`;
+  });
+}
+```

package/pg/tooltip/__examples__/basic/basic.css

@@ -0,0 +1,38 @@
+.tooltip-grid {
+  height: 300px;
+  display: grid;
+  grid-template-rows: 4rem 4rem 1fr 4rem 4rem;
+  grid-template-columns: 4rem 4rem 1fr 4rem 4rem;
+}
+.tooltip-grid button {
+  width: 3rem;
+  height: 3rem;
+  align-self: center;
+  justify-self: center;
+}
+[part="tooltipSource1"] {
+  grid-column: 3;
+  grid-row: 3;
+}
+[part="tooltipSource2"] {
+  grid-column: 3;
+  grid-row: 3;
+}
+[part="tooltipSource1"] {
+  margin-right: 10rem;
+}
+[part="tooltipSource2"] {
+  margin-left: 10rem;
+}
+[part="tooltipTopStart"] {  grid-column: 2; grid-row: 1; }
+[part="tooltipTop"] { grid-column: 3; grid-row: 1; }
+[part="tooltipTopEnd"] { grid-column: 4; grid-row: 1; }
+[part="tooltipRightStart"] {  grid-column: 5; grid-row: 2; }
+[part="tooltipRight"] { grid-column: 5; grid-row: 3; }
+[part="tooltipRightEnd"] { grid-column: 5; grid-row: 4; }
+[part="tooltipBottomStart"] {  grid-column: 2; grid-row: 5; }
+[part="tooltipBottom"] { grid-column: 3; grid-row: 5; }
+[part="tooltipBottomEnd"] { grid-column: 4; grid-row: 5; }
+[part="tooltipLeftStart"] {  grid-column: 1; grid-row: 2; }
+[part="tooltipLeft"] { grid-column: 1; grid-row: 3; }
+[part="tooltipLeftEnd"] { grid-column: 1; grid-row: 4; }

package/pg/tooltip/__examples__/basic/basic.html

@@ -0,0 +1,21 @@
+<pg-tooltip part="tooltip1"></pg-tooltip>
+<pg-tooltip part="tooltip2"></pg-tooltip>
+
+<div class="example">
+  <div class="tooltip-grid">
+    <button part="tooltipSource1"></button>
+    <button part="tooltipSource2"></button>
+    <button part="tooltipTop"></button>
+    <button part="tooltipTopStart"></button>
+    <button part="tooltipTopEnd"></button>
+    <button part="tooltipRight"></button>
+    <button part="tooltipRightStart"></button>
+    <button part="tooltipRightEnd"></button>
+    <button part="tooltipBottom"></button>
+    <button part="tooltipBottomStart"></button>
+    <button part="tooltipBottomEnd"></button>
+    <button part="tooltipLeft"></button>
+    <button part="tooltipLeftStart"></button>
+    <button part="tooltipLeftEnd"></button>
+  </div>
+</div>

package/pg/tooltip/__examples__/basic/basic.ts

@@ -0,0 +1,55 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgTooltip from '../../tooltip';
+
+import template from './basic.html';
+import style from './basic.css';
+
+@Component({
+  selector: 'x-pg-tooltip-basic',
+  template,
+  style
+})
+export default class XPgTooltipBasic extends HTMLElement {
+
+  @Part() $tooltip1: PgTooltip;
+  @Part() $tooltip2: PgTooltip;
+  @Part() $tooltipSource1: PgTooltip;
+  @Part() $tooltipSource2: PgTooltip;
+  @Part() $tooltipTop: HTMLButtonElement;
+  @Part() $tooltipTopStart: HTMLButtonElement;
+  @Part() $tooltipTopEnd: HTMLButtonElement;
+  @Part() $tooltipRight: HTMLButtonElement;
+  @Part() $tooltipRightStart: HTMLButtonElement;
+  @Part() $tooltipRightEnd: HTMLButtonElement;
+  @Part() $tooltipBottom: HTMLButtonElement;
+  @Part() $tooltipBottomStart: HTMLButtonElement;
+  @Part() $tooltipBottomEnd: HTMLButtonElement;
+  @Part() $tooltipLeft: HTMLButtonElement;
+  @Part() $tooltipLeftStart: HTMLButtonElement;
+  @Part() $tooltipLeftEnd: HTMLButtonElement;
+
+  connectedCallback() {
+    const setPosition = (position) => {
+      this.$tooltip1.position = position;
+      this.$tooltip2.position = position;
+      this.$tooltip1.visible = true;
+      this.$tooltip1.rect = this.$tooltipSource1.getBoundingClientRect();
+      this.$tooltip1.text = 'Hello World!';
+      this.$tooltip2.visible = true;
+      this.$tooltip2.rect = this.$tooltipSource2.getBoundingClientRect();
+      this.$tooltip2.text = '-';
+    }
+    this.$tooltipTop.addEventListener('click', () => { setPosition('top'); });
+    this.$tooltipTopStart.addEventListener('click', () => { setPosition('top-start'); });
+    this.$tooltipTopEnd.addEventListener('click', () => { setPosition('top-end'); });
+    this.$tooltipRight.addEventListener('click', () => { setPosition('right'); });
+    this.$tooltipRightStart.addEventListener('click', () => { setPosition('right-start'); });
+    this.$tooltipRightEnd.addEventListener('click', () => { setPosition('right-end'); });
+    this.$tooltipBottom.addEventListener('click', () => { setPosition('bottom'); });
+    this.$tooltipBottomStart.addEventListener('click', () => { setPosition('bottom-start'); });
+    this.$tooltipBottomEnd.addEventListener('click', () => { setPosition('bottom-end'); });
+    this.$tooltipLeft.addEventListener('click', () => { setPosition('left'); });
+    this.$tooltipLeftStart.addEventListener('click', () => { setPosition('left-start'); });
+    this.$tooltipLeftEnd.addEventListener('click', () => { setPosition('left-end'); });
+  }
+}

package/pg/tooltip/addTooltip.ts

@@ -0,0 +1,31 @@
+export function addTooltip($part, render, position?) {
+  function handleMouseEnter() {
+    $part.dispatchEvent(
+      new CustomEvent('tooltip', {
+        detail: {
+          visible: true,
+          rect: $part.getBoundingClientRect(),
+          text: render(),
+          position: position
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+
+  function handleMouseLeave() {
+    $part.dispatchEvent(
+      new CustomEvent('tooltip', {
+        detail: {
+          visible: false
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+
+  $part.addEventListener('mouseenter', handleMouseEnter);
+  $part.addEventListener('mouseleave', handleMouseLeave);
+}

package/pg/tooltip/index.ts

@@ -0,0 +1,20 @@
+import PgTooltip from './tooltip';
+
+export { addTooltip } from './addTooltip';
+
+export {
+  TOP,
+  TOP_START,
+  TOP_END,
+  RIGHT,
+  RIGHT_START,
+  RIGHT_END,
+  BOTTOM,
+  BOTTOM_START,
+  BOTTOM_END,
+  LEFT,
+  LEFT_START,
+  LEFT_END
+} from './position';
+
+export default PgTooltip;

package/pg/tooltip/position.ts

@@ -0,0 +1,15 @@
+export const TOP = 'top';
+export const TOP_START = 'top-start';
+export const TOP_END = 'top-end';
+
+export const RIGHT = 'right';
+export const RIGHT_START = 'right-start';
+export const RIGHT_END = 'right-end';
+
+export const BOTTOM = 'bottom';
+export const BOTTOM_START = 'bottom-start';
+export const BOTTOM_END = 'bottom-end';
+
+export const LEFT = 'left';
+export const LEFT_START = 'left-start';
+export const LEFT_END = 'left-end';

package/pg/tooltip/tooltip.css

@@ -0,0 +1,36 @@
+:host {
+  pointer-events: none;
+}
+
+[part~=tooltip] {
+  position: relative;
+}
+
+[part~=tooltipText] {
+  position: absolute;
+  background: #737E9E;
+  border-radius: 0.25rem;
+  color: #FFF;
+  padding: 0.15rem 0.5rem 0.3rem 0.5rem;
+  white-space: nowrap;
+  left: 0;
+  top: 0;
+}
+
+[part~=tooltipArrow] {
+  left: 16px;
+  top: -7px;
+}
+
+[part~=tooltipArrow],
+[part~=tooltipArrow]::before {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+}
+
+[part~=tooltipArrow]::before {
+  content: '';
+  transform: rotate(45deg);
+  background: #737E9E;
+}

package/pg/tooltip/tooltip.html

@@ -0,0 +1,4 @@
+<div part="tooltip">
+  <span part="tooltipText"></span>
+  <div part="tooltipArrow"></div>
+</div>