@pictogrammers/components 0.5.1 → 0.5.3

package/package.json

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

package/pg/button/__examples__/basic/basic.css

@@ -0,0 +1,4 @@
+.example-flex {
+  display: flex;
+  gap: 0.5rem;
+}

package/pg/button/__examples__/basic/basic.ts

@@ -1,10 +1,12 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
 
+import style from './basic.css';
 import template from './basic.html';
 
 @Component({
   selector: 'x-pg-button-basic',
-  template
+  style,
+  template,
 })
 export default class XPgButtonBasic extends HTMLElement {
 

package/pg/button/__examples__/states/states.css

@@ -0,0 +1,3 @@
+h4 {
+  margin-block: 0.25rem;
+}

package/pg/button/__examples__/states/states.ts

@@ -1,11 +1,13 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
 import PgButton from '../../button';
 
+import style from './states.css';
 import template from './states.html';
 
 @Component({
   selector: 'x-pg-button-states',
-  template
+  style,
+  template,
 })
 export default class XPgButtonStates extends HTMLElement {
   @Part() $active: PgButton;

package/pg/button/__examples__/variants/variants.css

@@ -0,0 +1,4 @@
+.example-flex {
+  display: flex;
+  gap: 0.5rem;
+}

package/pg/button/__examples__/variants/variants.html

@@ -0,0 +1,10 @@
+<div class="example">
+  <div class="example-flex">
+    <pg-button variant="brand">Example Button</pg-button>
+    <pg-button variant="brand"><pg-icon path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></pg-icon></pg-button>
+    <pg-button variant="brand">
+      <pg-icon path="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></pg-icon>
+      With Icon
+    </pg-button>
+  </div>
+</div>

package/pg/button/__examples__/variants/variants.ts

@@ -0,0 +1,13 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import style from './variants.css';
+import template from './variants.html';
+
+@Component({
+  selector: 'x-pg-button-variants',
+  style,
+  template,
+})
+export default class XPgVariantsBasic extends HTMLElement {
+
+}

package/pg/button/button.css

@@ -2,7 +2,7 @@
   display: inline-flex;
 }
 
-[part="button"] {
+[part=button] {
   display: flex;
   align-items: center;
   align-content: center;
@@ -17,25 +17,26 @@
   outline: none;
   --pg-icon-color: var(--pg-button-color, #453C4F);
   cursor: var(--pg-button-cursor, var(--pg-cursor-default, default));
+  gap: var(--pg-button-gap, 0.325rem);
 }
 
-[part="button"]:hover {
+[part=button]:hover {
   --pg-button-border-color: var(--pg-button-hover-border-color, #453C4F);
   background-color: var(--pg-button-hover-background-color, #453C4F);
   color: var(--pg-button-hover-color, #FFFFFF);
   --pg-icon-color: var(--pg-button-hover-color, #FFFFFF);
 }
 
-[part="button"]:active {
+[part=button]:active {
   box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.5) inset;
   position: relative;
 }
 
-[part="button"]:focus-visible {
+[part=button]:focus-visible {
   position: relative;
 }
 
-[part="button"]:active::before {
+[part=button]:active::before {
   content: '';
   position: absolute;
   top: -1px;
@@ -45,7 +46,7 @@
   border-radius: var(--pg-button-border-radius, 0.25rem);
   box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
 }
-[part="button"]:focus-visible::before {
+[part=button]:focus-visible::before {
   pointer-events: none;
   content: '';
   position: absolute;
@@ -57,37 +58,46 @@
   box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
 
-[part="button"].start {
+[part=button].start {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   margin-right: -1px;
 }
 
-[part="button"].center {
+[part=button].center {
   border-radius: 0;
   margin-right: -1px;
 }
 
-[part="button"].end {
+[part=button].end {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-[part="button"].active {
+[part=button].active {
   box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.5) inset;
   background-color: rgba(69, 60, 79, 0.1);
   color: var(--pg-button-color, #453C4F);
 }
-[part="button"].active:hover {
+[part=button].active:hover {
   box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.5) inset;
   background-color: var(--pg-button-color, #453C4F);
-  color: var(--pg-button-hover-color, #fff);
+  color: var(--pg-button-hover-color, #FFFFFF);
 }
 
-[part="button"].block {
+[part=button].block {
   flex: 1;
 }
 
+[part=button].brand {
+  --pg-button-background-color: #453C4F;
+  --pg-button-color: #FFFFFF;
+}
+[part=button].brand:hover {
+  --pg-button-hover-background-color: color-mix(in oklab, var(--pg-button-background-color), white 10%);
+  --pg-button-hover-border-color: color-mix(in oklab, var(--pg-button-background-color), white 10%);
+}
+
 ::slotted {
   align-self: center;
-}
+}

package/pg/button/button.ts

@@ -1,14 +1,17 @@
-import { Component, Part, Prop, normalizeBoolean } from '@pictogrammers/element';
+import { Component, Part, Prop, normalizeBoolean, normalizeString } from '@pictogrammers/element';
 
 import template from './button.html';
 import style from './button.css';
 
+const variants = ['neutral', 'brand'];
+
 @Component({
   selector: 'pg-button',
   style,
   template
 })
 export default class PgButton extends HTMLElement {
+  @Prop(normalizeString) variant: string = 'neutral';
   @Prop(normalizeBoolean) active: boolean = false;
   @Prop(normalizeBoolean) block: boolean = false;
   @Prop(normalizeBoolean) start: boolean = false;
@@ -27,6 +30,13 @@ export default class PgButton extends HTMLElement {
   }
 
   render(changes) {
+    if (changes.variant) {
+      if (!variants.includes(this.variant)) {
+        throw new Error(`invalid variant ${this.variant}`);
+      }
+      this.$button.classList.toggle('neutral', this.variant === 'neutral');
+      this.$button.classList.toggle('brand', this.variant === 'brand');
+    }
     if (changes.active) {
       this.$button.classList.toggle('active', this.active);
     }

package/pg/inputPixelEditor/README.md

@@ -70,7 +70,7 @@ See usage for each method below.
 | `inputModeEllipseOutline()` | -  | Input Mode Ellipse Outline |
 | `selectLayer(index)` | -    | Select layer. |
 | `getLayers()` | -    | Get layer array. |
-| `addLayer(option)` | -        | Add layer. |
+| `addLayer(option)` | -        | Add layer. `name`, `type` required. |
 | `removeLayer(index)` | -      | Remove layer. |
 | `flattenLayers(layerIndexes)` | -      | Flatten layers. |
 | `getColor()` | -     | Get selected color |

package/pg/inputPixelEditor/inputPixelEditor.ts

@@ -23,6 +23,7 @@ import { readMetadata, textEncode, writeMetadata } from './utils/pngMetadata';
 import { canvasToPngBuffer } from './utils/canvasToPngBuffer';
 import { blobToImage } from './utils/blobToImage';
 import { diffLeftMapPixels } from './utils/diffMap';
+import { maskToBitmap } from './utils/maskToBitmap';
 
 type Color = [number, number, number, number];
 
@@ -57,7 +58,7 @@ type HistoryColorUpdateType = {
 }
 
 type HistoryItem = {
-  type: HistoryType,
+  type: HistoryType
   data: HistoryGroupType | HistoryPixelType | HistoryColorUpdateType
 }
 
@@ -1375,8 +1376,12 @@ export default class PgInputPixelEditor extends HTMLElement {
       export: optional.exclude ?? true,
       locked: optional.locked ?? false,
       visible: optional.hidden ?? true,
-      opacity: 1
+      opacity: optional.opacity ?? 1,
     });
+    // short hand for initial data
+    if (optional.data) {
+      this.setData(optional.data);
+    }
   }
 
   /**
@@ -1467,7 +1472,28 @@ export default class PgInputPixelEditor extends HTMLElement {
    * Set data
    */
   setData(data: any[]) {
-
+    data.forEach((layerData, layerIndex) => {
+      const { type } = this.#layers[layerIndex];
+      switch(type) {
+        case 'pixel':
+          const { color, path } = layerData;
+          const temp = maskToBitmap(path, this.width, this.height);
+          temp.forEach((tempY, y) => {
+            tempY.forEach((tempX, x) => {
+              if (tempX !== 0) {
+                //this.#data[layerIndex][y][x] = color;
+                this.#setPixel(x, y, color, [layerIndex]);
+              }
+            });
+          });
+          break;
+        case 'reference':
+          console.log('reference', layerData);
+          break;
+        default:
+          throw new Error(`unknown type ${type}`);
+      }
+    });
   }
 
   getExportPath() {

package/pg/inputPixelEditor/utils/maskToBitmap.ts

@@ -1,4 +1,4 @@
-export function maskToBitmap(pathData: string, width: number, height: number) {
+export function maskToBitmap(pathData: string, width: number, height: number, fill: number = 1) {
   const grid: number[][] = Array(height).fill(0).map(() => Array(width).fill(0));
 
   // Store only the vertical edges
@@ -57,7 +57,7 @@ export function maskToBitmap(pathData: string, width: number, height: number) {
         }
       }
       if (inside) {
-        grid[y][x] = 1;
+        grid[y][x] = fill;
       }
     }
   }

package/pg/inputText/inputText.css

@@ -11,8 +11,8 @@
   font-size: 1rem;
   outline: none;
   field-sizing: content;
-  min-width: calc(100% - 0.5rem - 2px);
-  max-width: calc(var(--pg-input-text-max-width, 100%) - 0.5rem - 2px);
+  min-width: calc(100% - 1.5rem - 2px);
+  max-width: calc(var(--pg-input-text-max-width, 100%) - 1.5rem - 2px);
   background-color: transparent;
 }
 

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

@@ -9,6 +9,10 @@ import template from './basic.html';
 })
 export class XMyModal extends PgModal {
 
+  @Prop() header: string = '';
+  @Prop() message: string = '';
+
+
   @Part() $close: HTMLButtonElement;
 
   connectedCallback() {
@@ -34,7 +38,7 @@ export default class XPgModalBasic extends HTMLElement {
   async handleClick() {
     const result = await XMyModal.open({
       header: 'Delete Item',
-      message: 'Are you sure you want to delete the item?'
+      message: 'Are you sure you want to delete the item?',
     });
     this.$result.textContent = `${result}`;
   }

package/pg/modalAlert/README.md

@@ -1,17 +1,16 @@
 # `PgModalAlert`
 
-The `PgModalAlert` creates a alert box above everything.
+The `PgModalAlert` creates a alert box dialog. For options like okay/cancel use `PgModalConfirm`.
 
 ```typescript
-import PgModalAlert from '@pictogrammers/components/pgModalAlert';
+import PgModalConfirm from '@pictogrammers/components/pg/modalAlert';
 ```
 
 ```typescript
 const result = await PgModalAlert.open({
-  header: 'Delete Item',
-  message: 'Are you sure you want to delete the item?'
+  header: 'Something Went Wrong',
+  message: 'Some information to alert about.',
 });
-if (result) {
-  console.log('Item has been deleted.');
-}
+// we don't care about result
+console.log('Okay was clicked');
 ```

package/pg/modalAlert/__examples__/basic/basic.ts

@@ -18,8 +18,8 @@ export default class XPgModalAlertBasic extends HTMLElement {
 
   async handleClick() {
     const result = await PgModalAlert.open({
-      header: 'Delete Item',
-      message: 'Are you sure you want to delete the item?'
+      header: 'Something Went Wrong',
+      message: 'Some information to alert about.',
     });
     this.$result.textContent = `${result}`;
   }

package/pg/modalAlert/modalAlert.html

@@ -2,10 +2,10 @@
   <div class="dialog"
     role="dialog"
     id="dialog1"
-    aria-labelledby="dialog1_label"
+    aria-labelledby="dialog_label"
     aria-modal="true">
     <header part="header">
-      <h2 id="dialog1_label"
+      <h2 id="dialog_label"
         class="dialog_label"
         part="headerText">
         Add Delivery Address
@@ -16,7 +16,7 @@
     </main>
     <footer>
       <pg-button part="no">No</pg-button>
-      <pg-button part="yes">Yes</pg-button>
+      <pg-button part="yes" variant="brand">Yes</pg-button>
     </footer>
   </div>
 </div>

package/pg/modalAlert/modalAlert.ts

@@ -18,14 +18,12 @@ export default class PgModalAlert extends PgOverlay {
   @Part() $header: HTMLDivElement;
   @Part() $headerText: HTMLHeadingElement;
   @Part() $message: HTMLDivElement;
-  @Part() $yes: PgButton;
-  @Part() $no: PgButton;
+  @Part() $okay: PgButton;
 
   #cacheKeydownHandler: any;
 
   connectedCallback() {
-    this.$yes.addEventListener('click', this.#handleYes.bind(this));
-    this.$no.addEventListener('click', this.#handleNo.bind(this));
+    this.$okay.addEventListener('click', this.#handleOkay.bind(this));
     this.#cacheKeydownHandler ??= this.#handleKeyDown.bind(this);
     document.addEventListener('keydown', this.#cacheKeydownHandler);
   }
@@ -40,20 +38,16 @@ export default class PgModalAlert extends PgOverlay {
     }
   }
 
-  #handleYes() {
-    this.close(true);
-  }
-
-  #handleNo() {
-    this.close(false);
+  #handleOkay() {
+    this.close();
   }
 
   render(changes) {
     if (changes.header) {
-      this.$headerText.innerText = this.header;
+      this.$headerText.textContent = this.header;
     }
     if (changes.message) {
-      this.$message.innerText = this.message;
+      this.$message.textContent = this.message;
     }
   }
 }

package/pg/modalAlert copy/modalAlert.css

@@ -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;
+}

package/pg/modalAlert copy/modalAlert.html

@@ -0,0 +1,22 @@
+<div class="backdrop">
+  <div class="dialog"
+    role="dialog"
+    id="dialog1"
+    aria-labelledby="dialog_label"
+    aria-modal="true">
+    <header part="header">
+      <h2 id="dialog_label"
+        class="dialog_label"
+        part="headerText">
+        Add Delivery Address
+      </h2>
+    </header>
+    <main>
+      <p part="message"></p>
+    </main>
+    <footer>
+      <pg-button part="no">No</pg-button>
+      <pg-button part="yes" variant="brand">Yes</pg-button>
+    </footer>
+  </div>
+</div>

package/pg/modalAlert copy/modalAlert.ts

@@ -0,0 +1,59 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './modalAlert.html';
+import style from './modalAlert.css';
+
+import PgOverlay from '../overlay/overlay';
+import PgButton from '../button/button';
+
+@Component({
+  selector: 'pg-modal-alert',
+  template,
+  style
+})
+export default class PgModalAlert extends PgOverlay {
+  @Prop() header: string = 'Are you sure?';
+  @Prop() message: string = 'Are you sure?';
+
+  @Part() $header: HTMLDivElement;
+  @Part() $headerText: HTMLHeadingElement;
+  @Part() $message: HTMLDivElement;
+  @Part() $yes: PgButton;
+  @Part() $no: PgButton;
+
+  #cacheKeydownHandler: any;
+
+  connectedCallback() {
+    this.$yes.addEventListener('click', this.#handleYes.bind(this));
+    this.$no.addEventListener('click', this.#handleNo.bind(this));
+    this.#cacheKeydownHandler ??= this.#handleKeyDown.bind(this);
+    document.addEventListener('keydown', this.#cacheKeydownHandler);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this.#cacheKeydownHandler);
+  }
+
+  #handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      this.close(null);
+    }
+  }
+
+  #handleYes() {
+    this.close(true);
+  }
+
+  #handleNo() {
+    this.close(false);
+  }
+
+  render(changes) {
+    if (changes.header) {
+      this.$headerText.innerText = this.header;
+    }
+    if (changes.message) {
+      this.$message.innerText = this.message;
+    }
+  }
+}

package/pg/modalConfirm/README.md

@@ -0,0 +1,19 @@
+# `PgModalConfirm`
+
+The `PgModalConfirm` creates a confirm box dialog.
+
+```typescript
+import PgModalConfirm from '@pictogrammers/components/pg/modalConfirm';
+```
+
+```typescript
+const result = await PgModalConfirm.open({
+  header: 'Delete Item',
+  message: 'Are you sure you want to delete the item?',
+  okay: 'Delete',
+  cancel: 'Keep Item',
+});
+if (result) {
+  console.log('Item has been deleted.');
+}
+```

package/pg/modalConfirm/__examples__/basic/basic.html

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

package/pg/modalConfirm/__examples__/basic/basic.ts

@@ -0,0 +1,29 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgModalConfirm from '../../modalConfirm';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-modal-confirm-basic',
+  template
+})
+export default class XPgModalConfirmBasic extends HTMLElement {
+
+  @Part() $button: HTMLButtonElement;
+  @Part() $result: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  async handleClick() {
+    const result = await PgModalConfirm.open({
+      header: 'Delete Item',
+      message: 'Are you sure you want to delete the item?',
+      okay: 'Delete',
+      cancel: 'Keep Item',
+    });
+    this.$result.textContent = `${result}`;
+  }
+
+}

package/pg/modalConfirm/modalConfirm.html

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

package/pg/modalConfirm/modalConfirm.ts

@@ -0,0 +1,61 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './modalConfirm.html';
+import style from './modalConfirm.css';
+
+import PgOverlay from '../overlay/overlay';
+import PgButton from '../button/button';
+
+@Component({
+  selector: 'pg-modal-confirm',
+  template,
+  style
+})
+export default class PgModalConfirm extends PgOverlay {
+  @Prop() header: string = 'Are you sure?';
+  @Prop() message: string = 'Are you sure?';
+  @Prop() cancel: string = 'Cancel';
+  @Prop() okay: string = 'Okay';
+
+  @Part() $header: HTMLDivElement;
+  @Part() $headerText: HTMLHeadingElement;
+  @Part() $message: HTMLDivElement;
+  @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.#cacheKeydownHandler ??= this.#handleKeyDown.bind(this);
+    document.addEventListener('keydown', this.#cacheKeydownHandler);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this.#cacheKeydownHandler);
+  }
+
+  #handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      this.close(null);
+    }
+  }
+
+  #handleOkay() {
+    this.close(true);
+  }
+
+  #handleCancel() {
+    this.close(false);
+  }
+
+  render(changes) {
+    if (changes.header) {
+      this.$headerText.textContent = this.header;
+    }
+    if (changes.message) {
+      this.$message.textContent = this.message;
+    }
+  }
+}

package/pg/overlay/overlay.ts

@@ -5,9 +5,9 @@ const promises: Map<HTMLElement, (value: any) => void> = new Map();
 
 @Component()
 export default class PgOverlay extends HTMLElement {
-  static open(props: any = {}): Promise<any> {
+  static open<T extends typeof PgOverlay>(this: T, props: Partial<Omit<InstanceType<T>, keyof PgOverlay>>): Promise<any> {
     var ele = document.createElement(this.name);
-    Object.assign(ele, props);
+    props && Object.assign(ele, props);
     document.body.appendChild(ele);
     layers.add(ele);
     return new Promise((resolve) => {

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

@@ -84,4 +84,4 @@ export default class XPgOverlayContextMenuBasic extends HTMLElement {
     }
     this.$result.textContent = JSON.stringify(result);
   }
-}
+}