@pictogrammers/components 0.5.20 → 0.5.22

package/package.json

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

package/pg/modal/__examples__/basic/basic.ts

@@ -1,11 +1,21 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
 import PgModal from '../../modal';
 
+import '../../../modalHeader/modalHeader';
+import '../../../modalBody/modalBody';
+import '../../../modalFooter/modalFooter';
+
 import template from './basic.html';
 
 @Component({
   selector: 'x-my-modal',
-  template: `<main>Hello! <button part="close">Close</button></main>`
+  template: `
+    <pg-modal-header>My Modal</pg-modal-header>
+    <pg-modal-body>Hello!</pg-modal-body>
+    <pg-modal-footer>
+      <button part="close">Close</button>
+    </pg-modal-footer>
+  `
 })
 export class XMyModal extends PgModal {
 

package/pg/modalAlert/modalAlert.css

@@ -16,25 +16,8 @@
   overflow: hidden;
   min-width: 15rem;
 }
-header {
-  border-bottom: 1px solid #ccc;
-  background: #f1f1f1;
-  padding: 0.75rem 1rem;
-}
-header h2 {
+[part="headerText"] {
   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;
 }

package/pg/modalAlert/modalAlert.html

@@ -4,18 +4,18 @@
     id="dialog1"
     aria-labelledby="dialog_label"
     aria-modal="true">
-    <header part="header">
+    <pg-modal-header part="header">
       <h2 id="dialog_label"
         class="dialog_label"
         part="headerText">
         Alert
       </h2>
-    </header>
-    <main>
+    </pg-modal-header>
+    <pg-modal-body>
       <p part="message"></p>
-    </main>
-    <footer>
+    </pg-modal-body>
+    <pg-modal-footer>
       <pg-button part="okay" variant="brand">Okay</pg-button>
-    </footer>
+    </pg-modal-footer>
   </div>
 </div>

package/pg/modalAlert/modalAlert.ts

@@ -5,6 +5,10 @@ import style from './modalAlert.css';
 
 import PgOverlay from '../overlay/overlay';
 import PgButton from '../button/button';
+import PgModalHeader from '../modalHeader/modalHeader';
+
+import '../modalBody/modalBody';
+import '../modalFooter/modalFooter';
 
 @Component({
   selector: 'pg-modal-alert',
@@ -15,7 +19,7 @@ export default class PgModalAlert extends PgOverlay {
   @Prop() header: string = 'Are you sure?';
   @Prop() message: string = 'Are you sure?';
 
-  @Part() $header: HTMLDivElement;
+  @Part() $header: PgModalHeader;
   @Part() $headerText: HTMLHeadingElement;
   @Part() $message: HTMLDivElement;
   @Part() $okay: PgButton;

package/pg/modalBody/README.md

@@ -0,0 +1,17 @@
+# `<pg-modal-body>`
+
+The `pg-modal-body` component is a presentational component for the body section of a `PgModal`.
+
+```typescript
+import '@pictogrammers/components/pg/modalBody';
+```
+
+```html
+<pg-modal-body>Content</pg-modal-body>
+```
+
+## CSS Variables
+
+| CSS Variables            | Default        | Description |
+| ------------------------- | --------------- | ----------- |
+| `--pg-modal-body-padding` | `0.5rem 1rem` | Padding     |

package/pg/modalBody/index.ts

@@ -0,0 +1,3 @@
+import PgModalBody from './modalBody';
+
+export default PgModalBody;

package/pg/modalBody/modalBody.css

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+}
+[part="body"] {
+  padding: var(--pg-modal-body-padding, 0.5rem 1rem);
+}

package/pg/modalBody/modalBody.html

@@ -0,0 +1,3 @@
+<main part="body">
+  <slot></slot>
+</main>

package/pg/modalBody/modalBody.ts

@@ -0,0 +1,13 @@
+import { Component } from '@pictogrammers/element';
+
+import template from './modalBody.html';
+import style from './modalBody.css';
+
+@Component({
+  selector: 'pg-modal-body',
+  style,
+  template
+})
+export default class PgModalBody extends HTMLElement {
+
+}

package/pg/modalFooter/README.md

@@ -0,0 +1,23 @@
+# `<pg-modal-footer>`
+
+The `pg-modal-footer` component is a presentational component for the footer section of a `PgModal`.
+
+```typescript
+import '@pictogrammers/components/pg/modalFooter';
+```
+
+```html
+<pg-modal-footer>
+  <button>Close</button>
+</pg-modal-footer>
+```
+
+## CSS Variables
+
+| CSS Variables                       | Default        | Description     |
+| ------------------------------------- | --------------- | --------------- |
+| `--pg-modal-footer-background`      | `#f1f1f1`      | Background      |
+| `--pg-modal-footer-border-color`    | `#ccc`         | Border Color    |
+| `--pg-modal-footer-padding`         | `0.75rem 1rem` | Padding         |
+| `--pg-modal-footer-justify-content` | `flex-end`     | Justify Content |
+| `--pg-modal-footer-gap`             | `0.5rem`       | Gap Between Items |

package/pg/modalFooter/index.ts

@@ -0,0 +1,3 @@
+import PgModalFooter from './modalFooter';
+
+export default PgModalFooter;

package/pg/modalFooter/modalFooter.css

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+}
+[part="footer"] {
+  display: flex;
+  flex-direction: row;
+  padding: var(--pg-modal-footer-padding, 0.75rem 1rem);
+  border-top: 1px solid var(--pg-modal-footer-border-color, #ccc);
+  background: var(--pg-modal-footer-background, #f1f1f1);
+  justify-content: var(--pg-modal-footer-justify-content, flex-end);
+  gap: var(--pg-modal-footer-gap, 0.5rem);
+}

package/pg/modalFooter/modalFooter.html

@@ -0,0 +1,3 @@
+<footer part="footer">
+  <slot></slot>
+</footer>

package/pg/modalFooter/modalFooter.ts

@@ -0,0 +1,13 @@
+import { Component } from '@pictogrammers/element';
+
+import template from './modalFooter.html';
+import style from './modalFooter.css';
+
+@Component({
+  selector: 'pg-modal-footer',
+  style,
+  template
+})
+export default class PgModalFooter extends HTMLElement {
+
+}

package/pg/modalHeader/README.md

@@ -0,0 +1,19 @@
+# `<pg-modal-header>`
+
+The `pg-modal-header` component is a presentational component for the header section of a `PgModal`.
+
+```typescript
+import '@pictogrammers/components/pg/modalHeader';
+```
+
+```html
+<pg-modal-header>Title</pg-modal-header>
+```
+
+## CSS Variables
+
+| CSS Variables                     | Default     | Description  |
+| ---------------------------------- | ----------- | ------------ |
+| `--pg-modal-header-background`    | `#f1f1f1`   | Background   |
+| `--pg-modal-header-border-color`  | `#ccc`      | Border Color |
+| `--pg-modal-header-padding`       | `0.75rem 1rem` | Padding  |

package/pg/modalHeader/index.ts

@@ -0,0 +1,3 @@
+import PgModalHeader from './modalHeader';
+
+export default PgModalHeader;

package/pg/modalHeader/modalHeader.css

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+}
+[part="header"] {
+  border-bottom: 1px solid var(--pg-modal-header-border-color, #ccc);
+  background: var(--pg-modal-header-background, #f1f1f1);
+  padding: var(--pg-modal-header-padding, 0.75rem 1rem);
+  font-size: 1.25rem;
+}

package/pg/modalHeader/modalHeader.html

@@ -0,0 +1,3 @@
+<header part="header">
+  <slot></slot>
+</header>

package/pg/modalHeader/modalHeader.ts

@@ -0,0 +1,13 @@
+import { Component } from '@pictogrammers/element';
+
+import template from './modalHeader.html';
+import style from './modalHeader.css';
+
+@Component({
+  selector: 'pg-modal-header',
+  style,
+  template
+})
+export default class PgModalHeader extends HTMLElement {
+
+}

package/pg/modalPrompt/README.md

@@ -0,0 +1,34 @@
+# `PgModalPrompt`
+
+The `PgModalPrompt` creates a dialog with a single text field, an okay button, and a cancel button. For a message only dialog use `PgModalAlert`. For okay/cancel without a field use `PgModalConfirm`.
+
+```typescript
+import PgModalPrompt from '@pictogrammers/components/pg/modalPrompt';
+```
+
+```typescript
+const result = await PgModalPrompt.open({
+  header: 'Rename Item',
+  message: 'Enter a new name for the item.',
+  value: 'Untitled',
+  placeholder: 'Name',
+});
+if (result === null) {
+  console.log('Cancelled');
+} else {
+  console.log('New name:', result);
+}
+```
+
+## Props
+
+| Props       | Default                    | Description |
+| ----------- | --------------------------- | ----------- |
+| header      | `'Please provide a value'` | Dialog title |
+| message     | `''`                        | Optional message shown above the field |
+| value       | `''`                        | Initial value of the field |
+| placeholder | `''`                        | Placeholder text for the field |
+| okay        | `'Okay'`                    | Okay button label |
+| cancel      | `'Cancel'`                  | Cancel button label |
+
+`close()` resolves with the field's value when `Okay` is clicked (or `Enter` is pressed), and `null` when `Cancel` is clicked or `Escape` is pressed.

package/pg/modalPrompt/__examples__/basic/basic.html

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

package/pg/modalPrompt/__examples__/basic/basic.ts

@@ -0,0 +1,33 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgModalPrompt from '../../modalPrompt';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-modal-prompt-basic',
+  template
+})
+export default class XPgModalPromptBasic extends HTMLElement {
+
+  @Part() $button: HTMLButtonElement;
+  @Part() $result: HTMLSpanElement;
+
+  currentValue = 'Hello World!';
+
+  connectedCallback() {
+    this.$result.textContent = `${this.currentValue}`;
+    this.$button.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  async handleClick() {
+    const result = await PgModalPrompt.open({
+      header: 'Rename Item',
+      message: 'Enter a new name for the item.',
+      value: this.currentValue,
+      placeholder: 'Name',
+    });
+    this.currentValue = result;
+    this.$result.textContent = `${result}`;
+  }
+
+}

package/pg/modalPrompt/index.ts

@@ -0,0 +1,3 @@
+import PgModalPrompt from './modalPrompt';
+
+export default PgModalPrompt;

package/pg/modalPrompt/modalPrompt.css

@@ -0,0 +1,32 @@
+.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;
+}
+[part="headerText"] {
+  font-size: 1.25rem;
+  margin: 0;
+  font-weight: normal;
+}
+[part="message"] {
+  margin-block: 0.5rem 1rem;
+}
+[part="message"]:empty {
+  display: none;
+}
+[part="input"] {
+  margin-block-end: 0.5rem;
+}

package/pg/modalPrompt/modalPrompt.html

@@ -0,0 +1,23 @@
+<div class="backdrop">
+  <div class="dialog"
+    role="dialog"
+    id="dialog1"
+    aria-labelledby="dialog_label"
+    aria-modal="true">
+    <pg-modal-header part="header">
+      <h2 id="dialog_label"
+        class="dialog_label"
+        part="headerText">
+        Prompt
+      </h2>
+    </pg-modal-header>
+    <pg-modal-body>
+      <p part="message"></p>
+      <pg-input-text part="input"></pg-input-text>
+    </pg-modal-body>
+    <pg-modal-footer>
+      <pg-button part="cancel">Cancel</pg-button>
+      <pg-button part="okay" variant="brand">Okay</pg-button>
+    </pg-modal-footer>
+  </div>
+</div>

package/pg/modalPrompt/modalPrompt.ts

@@ -0,0 +1,89 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './modalPrompt.html';
+import style from './modalPrompt.css';
+
+import PgOverlay from '../overlay/overlay';
+import PgButton from '../button/button';
+import PgInputText from '../inputText/inputText';
+import PgModalHeader from '../modalHeader/modalHeader';
+
+import '../modalBody/modalBody';
+import '../modalFooter/modalFooter';
+
+@Component({
+  selector: 'pg-modal-prompt',
+  template,
+  style
+})
+export default class PgModalPrompt extends PgOverlay {
+  @Prop() header: string = 'Please provide a value';
+  @Prop() message: string = '';
+  @Prop() value: string = '';
+  @Prop() placeholder: string = '';
+  @Prop() cancel: string = 'Cancel';
+  @Prop() okay: string = 'Okay';
+
+  @Part() $header: PgModalHeader;
+  @Part() $headerText: HTMLHeadingElement;
+  @Part() $message: HTMLParagraphElement;
+  @Part() $input: PgInputText;
+  @Part() $okay: PgButton;
+  @Part() $cancel: PgButton;
+
+  #cacheKeydownHandler: any;
+
+  connectedCallback() {
+    this.$okay.addEventListener('click', this.#handleOkay.bind(this));
+    this.$cancel.addEventListener('click', this.#handleCancel.bind(this));
+    this.$input.addEventListener('keydown', this.#handleInputKeyDown.bind(this));
+    this.#cacheKeydownHandler ??= this.#handleKeyDown.bind(this);
+    document.addEventListener('keydown', this.#cacheKeydownHandler);
+    this.$input.focus();
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this.#cacheKeydownHandler);
+  }
+
+  #handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      this.close(null);
+    }
+  }
+
+  #handleInputKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      this.#handleOkay();
+    }
+  }
+
+  #handleOkay() {
+    this.close(this.$input.value);
+  }
+
+  #handleCancel() {
+    this.close(null);
+  }
+
+  render(changes) {
+    if (changes.header) {
+      this.$headerText.textContent = this.header;
+    }
+    if (changes.message) {
+      this.$message.textContent = this.message;
+    }
+    if (changes.value) {
+      this.$input.value = this.value;
+    }
+    if (changes.placeholder) {
+      this.$input.placeholder = this.placeholder;
+    }
+    if (changes.okay) {
+      this.$okay.textContent = this.okay;
+    }
+    if (changes.cancel) {
+      this.$cancel.textContent = this.cancel;
+    }
+  }
+}