Modal and element version bump.

Author: Templarian

package-lock.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "@pictogrammers/components",
   "type": "module",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "license": "MIT",
   "author": "Austin Andrews",
   "scripts": {
@@ -25,7 +25,7 @@
     "remarkable": "^2.0.1"
   },
   "devDependencies": {
-    "@pictogrammers/element": "0.0.68",
+    "@pictogrammers/element": "0.0.70",
     "@pictogrammers/element-jest": "^0.1.10",
     "@pictogrammers/element-webpack": "^0.1.56",
     "cross-env": "^7.0.3",

package.json

@@ -57,7 +57,7 @@
   flex-direction: column;
   grid-column: 1;
   grid-row: 2;
-  min-width: 10rem;
+  min-width: 12rem;
   max-width: 20rem;
 }
 

src/pg/app/app.css

@@ -1,4 +1,4 @@
-import { Component, Part, Prop } from '@pictogrammers/element';
+import { Component, Part, Prop, Local } from '@pictogrammers/element';
 
 import template from './app.html';
 import style from './app.css';
@@ -14,9 +14,14 @@ export default class PgApp extends HTMLElement {
   @Part() $side: HTMLDivElement;
   @Part() $resize: HTMLButtonElement;
 
+  @Local('app') store = new Map([
+    ['width', 12 * 16]
+  ]);
+
   connectedCallback() {
     this.$logo.addEventListener('click', this.#handleClick.bind(this));
     this.$resize.addEventListener('pointerdown', this.#handlePointerDown.bind(this));
+    this.$side.style.width = `${this.store.get('width')}px`;
   }
 
   #handleClick() {
@@ -33,6 +38,7 @@ export default class PgApp extends HTMLElement {
       const x = currentX - ee.clientX;
       const width = currentWidth - x;
       this.$side.style.width = `${width}px`;
+      this.store.set('width', Math.floor(width));
     }
     const handlePointerUp = () => {
       this.$resize.classList.remove('dragging');
@@ -42,4 +48,4 @@ export default class PgApp extends HTMLElement {
     document.addEventListener('pointermove', handlePointerMove);
     document.addEventListener('pointerup', handlePointerUp);
   }
-}
+}

src/pg/app/app.ts

@@ -0,0 +1,29 @@
+# `PgModalAlert`
+
+The `PgModal` is a base class for creating modals.
+
+```typescript
+import '@pictogrammers/components/pgModal';
+import PgModal from '@pictogrammers/components/pgModal';
+```
+
+```typescript
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './modal.html';
+import style from './modal.css';
+
+@Component({
+  selector: 'my-modal',
+  template,
+  style
+})
+export default class MyModal extends PgModal {
+  @Part() $close: HTMLButtonElement;
+  connectedCallback() {
+    this.$close.addEventListener('click', () => {
+      this.close();
+    });
+  }
+}
+```

src/pg/modal/README.md

@@ -0,0 +1,4 @@
+<div class="example">
+  <button part="button">Launch MyModal</button>
+  <div><code>Result: </code><code part="result"></code></div>
+</div>

src/pg/modal/__examples__/basic/basic.html

@@ -0,0 +1,42 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgModal from '../../modal';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-my-modal',
+  template: `<main>Hello! <button part="close">Close</button></main>`
+})
+export class XMyModal extends PgModal {
+
+  @Part() $close: HTMLButtonElement;
+
+  connectedCallback() {
+    this.$close.addEventListener('click', () => {
+      this.close();
+    });
+  }
+}
+
+@Component({
+  selector: 'x-pg-modal-basic',
+  template
+})
+export default class XPgModalBasic extends HTMLElement {
+
+  @Part() $button: HTMLButtonElement;
+  @Part() $result: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  async handleClick() {
+    const result = await XMyModal.open({
+      header: 'Delete Item',
+      message: 'Are you sure you want to delete the item?'
+    });
+    this.$result.textContent = `${result}`;
+  }
+
+}

src/pg/modal/__examples__/basic/basic.ts

@@ -0,0 +1,40 @@
+.backdrop {
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  justify-content: center;
+  align-items: center;
+}
+.dialog {
+  background: #fff;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 1rem rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  min-width: 15rem;
+}
+header {
+  border-bottom: 1px solid #ccc;
+  background: #f1f1f1;
+  padding: 0.75rem 1rem;
+}
+header h2 {
+  font-size: 1.25rem;
+  margin: 0;
+  font-weight: normal;
+}
+main {
+  padding: 0.5rem 1rem;
+}
+footer {
+  display: flex;
+  flex-direction: row;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid #ccc;
+  background: #f1f1f1;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}

src/pg/modal/modal.css

@@ -0,0 +1,9 @@
+<div class="backdrop">
+  <div class="dialog"
+    role="dialog"
+    id="dialog1"
+    aria-labelledby="dialog1_label"
+    aria-modal="true">
+    <child/>
+  </div>
+</div>

src/pg/modal/modal.html

@@ -0,0 +1,14 @@
+import { Component } from '@pictogrammers/element';
+
+import template from './modal.html';
+import style from './modal.css';
+
+import PgOverlay from '../overlay/overlay';
+
+@Component({
+  template,
+  style
+})
+export default class PgModal extends PgOverlay {
+
+}