@pictogrammers/components 0.4.8 → 0.5.0

package/pg/jsonString/jsonString.ts

@@ -0,0 +1,42 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import PgInputText from '../inputText/inputText';
+
+import template from './jsonString.html';
+import style from './jsonString.css';
+
+@Component({
+  selector: 'pg-json-string',
+  style,
+  template,
+})
+export default class PgJsonString extends HTMLElement {
+  @Prop() key: string = '';
+  @Prop() value: string = '';
+
+  @Part() $key: HTMLDivElement;
+  @Part() $value: PgInputText;
+
+  connectedCallback() {
+    this.$value.addEventListener('input', (e: any) => {
+      this.dispatchEvent(
+        new CustomEvent('update', {
+          detail: {
+            path: [this.key],
+            key: this.key,
+            value: e.detail.value,
+          }
+        })
+      );
+    });
+  }
+
+  render(changes) {
+    if (changes.key) {
+      this.$key.textContent = this.key;
+    }
+    if (changes.value) {
+      this.$value.value = this.value;
+    }
+  }
+}

package/pg/menu/menu.ts

@@ -26,7 +26,7 @@ export default class PgMenu extends HTMLElement {
       },
       create: ($item: any, item) => {
         $item.addEventListener('close', (e: any) => {
-          const { depth } = e.detail;
+          const depth = e.detail ? e.detail.depth : 1;
           this.dispatchEvent(new CustomEvent('close', {
             detail: {
               depth
@@ -34,11 +34,12 @@ export default class PgMenu extends HTMLElement {
           }));
         });
         $item.addEventListener('select', (e: any) => {
-          const { index } = e.detail;
+          const { indexes, item } = e.detail;
+          const lastIndex = indexes[indexes.length - 1];
           this.dispatchEvent(new CustomEvent('select', {
             detail: {
-              indexes: [index],
-              item
+              indexes,
+              item: item ? item : this.items[lastIndex],
             }
           }));
         });
@@ -116,4 +117,4 @@ export default class PgMenu extends HTMLElement {
     return ele.getHeight();
   }
 
-}
+}

package/pg/menuItem/README.md

@@ -13,7 +13,11 @@ import '@pictogrammers/components/pgMenuItem.js';
 ```typescript
 this.$items = [{
   type: PgMenuItem,
-  label: 'Item 1'
+  label: 'Item 1',
+  items: [{
+    type: PgMenuItem,
+    label: 'Sub Item 1',
+  }]
 }];
 ```
 
@@ -23,10 +27,17 @@ this.$items = [{
 | `checked`  |          | Item checked. |
 | `disabled` |          | Item disabled. |
 
+| CSS Variable        | Default   | Description |
+| ------------------- | --------- | ----------- |
+| `--pg-menu-item-border-radius`  | `0.25rem` | Radius       |
+
 ## Events
 
 ```typescript
 this.$item.addEventListener('select', (e: any) => {
-  const { index } = e.detail;
+  // user clicks 'Sub Item 1'
+  const { indexes, item } = e.detail;
+  // indexes = [0, 0]
+  console.log(item.label);
 });
 ```

package/pg/menuItem/menuItem.css

@@ -6,28 +6,25 @@
   outline: none;
   display: flex;
   align-items: center;
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
   text-align: var(--pg-menu-item-text-align, left);
-  background: var(--pg-menu-item-background, transparent);
+  background-color: var(--pg-menu-item-background, transparent);
   padding: var(--pg-menu-item-padding, 0.25rem 0.5rem 0.25rem 0.5rem);
   border-color: transparent;
   border-width: 0;
   border-style: solid;
-  border-top-left-radius: var(--pg-menu-item-border-radius-top, 0.25rem);
-  border-top-right-radius: var(--pg-menu-item-border-radius-top, 0.25rem);
-  border-bottom-left-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);
-  border-bottom-right-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);
+  border-radius: var(--pg-menu-item-border-radius, 0.25rem);
   color: var(--pg-menu-item-color, #453C4F);
 }
 
 [part=label]:not(:disabled):active,
 [part=label]:not(:disabled):hover {
-  background: var(--pg-menu-item-selected-background, #453C4F);
+  background-color: var(--pg-menu-item-selected-background, #453C4F);
   color: #FFFFFF;
 }
 
 [part=label]:not(:disabled):active {
-  background: var(--pg-menu-item-active-background, #5f516e);
+  background-color: var(--pg-menu-item-active-background, #5f516e);
 }
 
 [part=label]:disabled {
@@ -69,32 +66,30 @@
   right: -1px;
   bottom: -1px;
   left: -1px;
-  border-radius: 0.25rem;
+  border-radius: var(--pg-menu-item-border-radius, 0.25rem);;
   box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
 
 [part=label]:focus-visible:not(:hover)::after {
-  background: var(--pg-focus-background-color, rgb(79, 143, 249, 0.1));
+  background-color: var(--pg-focus-background-color, rgb(79, 143, 249, 0.1));
 }
 
 [part=label].more {
   padding-right: 1.5rem;
 }
 
-[part=label].more::after {
-  position: absolute;
-  translate: -0.25rem 0;
-  right: 0;
-  content: var(--pg-menu-item-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79)' /></svg>"));
-  width: 1.5rem;
-  height: 1.5rem;
+[part=label].more {
+  background-image: var(--pg-menu-item-more, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79)' /></svg>"));
+  background-size: 1.5rem 1.5rem;
+  background-position: 100% 50%;
+  background-repeat: no-repeat;
 }
 
-[part=label].more:active::after,
-[part=label].more:hover::after {
-  content: var(--pg-menu-item-hover-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='white' /></svg>"));
+[part=label].more:active,
+[part=label].more:hover {
+  background-image: var(--pg-menu-item-hover-more, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='white' /></svg>"));
 }
 
-[part=label].more:disabled::after {
-  content: var(--pg-menu-item-disabled-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
+[part=label].more:disabled {
+  background-image: var(--pg-menu-item-disabled-more, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
 }

package/pg/menuItem/menuItem.ts

@@ -56,21 +56,26 @@ export default class PgMenuItem extends HTMLElement {
         if (result === null) {
           this.focus();
         } else if (result) {
+          const { indexes, item } = result;
           this.dispatchEvent(new CustomEvent('select', {
             detail: {
-              item: result
+              item,
+              indexes: [...indexes, this.index],
             }
           }));
         } else {
           this.dispatchEvent(new CustomEvent('close', {
             detail: {
-              depth: -1
+              depth: -1,
             }
           }));
         }
       } else {
         this.dispatchEvent(new CustomEvent('select', {
-          detail: { index: this.index }
+          detail: {
+            indexes: [this.index],
+            item: undefined, // determined by parent
+          }
         }));
       }
     });

package/pg/menuItemIcon/__examples__/basic/basic.html

@@ -1,4 +1,4 @@
-<div class="example">
+<div class="example" part="example">
   <pg-menu-item-icon part="item"></pg-menu-item-icon>
 </div>
 <div>

package/pg/menuItemIcon/__examples__/basic/basic.ts

@@ -19,6 +19,7 @@ export default class XPgMenuItemIconBasic extends HTMLElement {
   @Part() $iconFolder: HTMLButtonElement;
   @Part() $checkedValue: HTMLDivElement;
   @Part() $disabledValue: HTMLDivElement;
+  @Part() $example: HTMLDivElement;
 
   connectedCallback() {
     this.$item.icon = IconFile;
@@ -45,6 +46,12 @@ export default class XPgMenuItemIconBasic extends HTMLElement {
     this.$checkedToggle.addEventListener('change', (e: any) => {
       this.$item.checked = e.target.checked;
       this.$checkedValue.textContent = `${this.$item.checked}`;
+      // simulate check column
+      if (e.target.checked) {
+        this.$example.style.setProperty('--pg-menu-_has-check', 'true');
+      } else {
+        this.$example.style.removeProperty('--pg-menu-_has-check');
+      }
     });
 
     this.$disabledToggle.addEventListener('change', (e: any) => {

package/pg/menuItemIcon/menuItemIcon.css

@@ -6,9 +6,9 @@
   outline: none;
   display: flex;
   align-items: center;
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
   text-align: var(--pg-menu-item-text-align, left);
-  background: var(--pg-menu-item-background, transparent);
+  background-color: var(--pg-menu-item-background, transparent);
   padding: var(--pg-menu-item-padding, 0.25rem 0.5rem 0.25rem 0.5rem);
   border-color: transparent;
   border-width: 0;
@@ -22,13 +22,13 @@
 
 [part=button]:not(:disabled):active,
 [part=button]:not(:disabled):hover {
-  background: var(--pg-menu-item-selected-background, #453C4F);
+  background-color: var(--pg-menu-item-selected-background, #453C4F);
   color: #FFFFFF;
   --pg-icon-color: #FFFFFF;
 }
 
 [part=button]:not(:disabled):active {
-  background: var(--pg-menu-item-active-background, #5f516e);
+  background-color: var(--pg-menu-item-active-background, #5f516e);
 }
 
 [part=button]:disabled {
@@ -83,21 +83,24 @@
   margin-inline-end: 0.5rem;
 }
 
-[part=button].more [part=label]::after {
-  content: var(--pg-menu-item-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79)' /></svg>"));
-  width: 1.5rem;
-  height: 1.5rem;
-  vertical-align: middle;
-  translate: 0.25rem 0;
+[part=button].more {
+  padding-right: 1.5rem;
 }
 
-[part=button].more:active [part=label]::after,
-[part=button].more:hover [part=label]::after {
-  content: var(--pg-menu-item-hover-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='white' /></svg>"));
+[part=button].more {
+  background-image: var(--pg-menu-item-more, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79)' /></svg>"));
+  background-size: 1.5rem 1.5rem;
+  background-position: 100% 50%;
+  background-repeat: no-repeat;
 }
 
-[part=button].more:disabled [part=label]::after {
-  content: var(--pg-menu-item-disabled-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
+[part=button].more:active,
+[part=button].more:hover {
+  background-image: var(--pg-menu-item-hover-more, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='white' /></svg>"));
+}
+
+[part=button].more:disabled {
+  background-image: var(--pg-menu-item-disabled-more, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
 }
 
 [part=label] {

package/pg/menuItemIcon/menuItemIcon.ts

@@ -63,9 +63,11 @@ export default class PgMenuItemIcon extends HTMLElement {
         if (result === null) {
           this.focus();
         } else if (result) {
+          const { indexes, item } = result;
           this.dispatchEvent(new CustomEvent('select', {
             detail: {
-              item: result
+              indexes: [...indexes, this.index],
+              item,
             }
           }));
         } else {
@@ -78,8 +80,8 @@ export default class PgMenuItemIcon extends HTMLElement {
       } else {
         this.dispatchEvent(new CustomEvent('select', {
           detail: {
-            index: this.index,
-            item: this.items[this.index]
+            indexes: [this.index],
+            item: undefined, // determined by parent
           }
         }));
       }
@@ -118,9 +120,11 @@ export default class PgMenuItemIcon extends HTMLElement {
             if (result === null) {
               this.focus();
             } else if (result) {
+              const { indexes, item } = result;
               this.dispatchEvent(new CustomEvent('select', {
                 detail: {
-                  item: result
+                  indexes: [...indexes, this.index],
+                  item,
                 }
               }));
             } else {

package/pg/modal/README.md

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

package/pg/modal/__examples__/basic/basic.html

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

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

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

package/pg/modal/index.ts

@@ -0,0 +1,3 @@
+import PgModal from './modal';
+
+export default PgModal;

package/pg/modal/modal.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/modal/modal.html

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

package/pg/modal/modal.ts

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

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

@@ -1,5 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
-import { Modification } from 'pg/shared/models/modification';
+import { Modification } from '../../../shared/models/modification';
 import PgModification from '../../modification';
 
 import template from './basic.html';

package/pg/overlayMenu/overlayMenu.ts

@@ -60,8 +60,12 @@ export default class PgOverlayMenu extends PgOverlay {
   }
 
   #handleSelect(e: any) {
-    e.detail.item.index = e.detail.index;
-    this.close(e.detail.item);
+    // e.detail.item.index = e.detail.index;
+    const { indexes, item } = e.detail;
+    this.close({
+      indexes,
+      item
+    });
     this.source?.focus();
   }
 }

package/pg/overlaySelectMenu/overlaySelectMenu.ts

@@ -33,6 +33,7 @@ export default class PgOverlaySelectMenu extends PgOverlay {
     // Pass throughs are binded once, do not do this in render
     this.$menu.items = this.items;
     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
@@ -93,4 +94,9 @@ export default class PgOverlaySelectMenu extends PgOverlay {
     this.close(e.detail.item);
     this.source?.focus();
   }
+
+  #handleClose() {
+    this.close({ value: null });
+    this.source?.focus();
+  }
 }

package/pg/overlaySubMenu/overlaySubMenu.ts

@@ -96,8 +96,12 @@ export default class PgOverlaySubMenu extends PgOverlay {
   }
 
   #handleSelect(e: any) {
-    e.detail.item.index = e.detail.index;
-    this.close(e.detail.item);
+    const { item, indexes } = e.detail;
+    //e.detail.item.index = e.detail.indexes;
+    this.close({
+      indexes,
+      item,
+    });
     this.source?.focus();
   }
 }

package/pg/scroll/__examples__/basic/basic.ts

@@ -1,5 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
-import PgScroll from 'pg/scroll/scroll';
+import PgScroll from '../../scroll';
 
 import template from './basic.html';
 import style from './basic.css';

package/pg/search/search.css

@@ -1,7 +1,7 @@
 :host {
   display: block;
   align-self: center;
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
 }
 
 div {