progress

Templarian · Templarian · commit a9a61d2681bf · 2025-03-31T22:54:26.000-05:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "remarkable": "^2.0.1"
   },
   "devDependencies": {
-    "@pictogrammers/element": "0.0.57",
+    "@pictogrammers/element": "0.0.58",
     "@pictogrammers/element-jest": "^0.1.8",
     "@pictogrammers/element-webpack": "^0.1.48",
     "cross-env": "^7.0.3",
diff --git a/src/pg/inputCheckList/__examples__/basic/basic.ts b/src/pg/inputCheckList/__examples__/basic/basic.ts
@@ -20,12 +20,12 @@ export default class XPgInputCheckListBasic extends HTMLElement {
         { value: 'uuid3', label: 'Item 3', disabled: true },
         { value: 'uuid4', label: 'Item 4' }
       );
-      this.$value.innerText = this.$input.value.join(',');
+      this.$value.textContent = this.$input.value.join(',');
       this.$input.addEventListener('change', this.handleChange.bind(this));
   }
 
   handleChange(e) {
     const { value } = e.detail;
-    this.$value.innerText = value.join(',');
+    this.$value.textContent = value.join(',');
   }
 }
diff --git a/src/pg/inputPixelEditor/__examples__/basic/basic.ts b/src/pg/inputPixelEditor/__examples__/basic/basic.ts
@@ -152,12 +152,12 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
 
   handleChange(e: CustomEvent) {
     const { value } = e.detail;
-    this.$value1.innerText = value.join('--');
+    this.$value1.textContent = value.join('--');
   }
 
   handleInput(e: CustomEvent) {
     const { value } = e.detail;
-    this.$value2.innerText = value;
+    this.$value2.textContent = value;
   }
 
   handleDebug(e: CustomEvent) {
diff --git a/src/pg/inputRange/__examples__/basic/basic.ts b/src/pg/inputRange/__examples__/basic/basic.ts
@@ -14,16 +14,16 @@ export default class XPgInputRangeBasic extends HTMLElement {
   @Part() $value2: HTMLSpanElement;
 
   connectedCallback() {
-    this.$input.addEventListener('change', this.handleChange.bind(this));
-    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('change', this.#handleChange.bind(this));
+    this.$input.addEventListener('input', this.#handleInput.bind(this));
   }
 
-  handleChange(e: CustomEvent) {
+  #handleChange(e: CustomEvent) {
     const { value } = e.detail;
     this.$value1.innerText = value;
   }
 
-  handleInput(e: CustomEvent) {
+  #handleInput(e: CustomEvent) {
     const { value } = e.detail;
     this.$value2.innerText = value;
   }
diff --git a/src/pg/inputRange/inputRange.ts b/src/pg/inputRange/inputRange.ts
@@ -23,11 +23,12 @@ export default class PgInputRange extends HTMLElement {
   }
 
   connectedCallback() {
-    this.$input.addEventListener('change', this.handleChange.bind(this));
-    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('change', this.#handleChange.bind(this));
+    this.$input.addEventListener('input', this.#handleInput.bind(this));
   }
 
-  handleChange(e) {
+  #handleChange(e: any) {
+    e.stopPropagation();
     const { value } = e.target;
     this.dispatchEvent(
       new CustomEvent('change', {
@@ -39,7 +40,8 @@ export default class PgInputRange extends HTMLElement {
     );
   }
 
-  handleInput(e) {
+  #handleInput(e: any) {
+    e.stopPropagation();
     const { value } = e.target;
     this.dispatchEvent(
       new CustomEvent('input', {
diff --git a/src/pg/inputSelect/inputSelect.css b/src/pg/inputSelect/inputSelect.css
@@ -25,6 +25,7 @@
   grid-row: 1;
   grid-column: 1;
   padding: 0.5rem 0.75rem;
+  font-size: var(--pg-input-select-font-size, 1rem);
 }
 
 [part=chevron] {
diff --git a/src/pg/inputText/__examples__/basic/basic.ts b/src/pg/inputText/__examples__/basic/basic.ts
@@ -14,17 +14,17 @@ export default class XPgInputTextBasic extends HTMLElement {
   @Part() $value2: HTMLSpanElement;
 
   connectedCallback() {
-    this.$input.addEventListener('change', this.handleChange.bind(this));
-    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('change', this.#handleChange.bind(this));
+    this.$input.addEventListener('input', this.#handleInput.bind(this));
   }
 
-  handleChange(e: CustomEvent) {
+  #handleChange(e: CustomEvent) {
     const { value } = e.detail;
-    this.$value1.innerText = value;
+    this.$value1.textContent = value;
   }
 
-  handleInput(e: CustomEvent) {
+  #handleInput(e: CustomEvent) {
     const { value } = e.detail;
-    this.$value2.innerText = value;
+    this.$value2.textContent = value;
   }
 }
diff --git a/src/pg/menu/__examples__/basic/basic.ts b/src/pg/menu/__examples__/basic/basic.ts
@@ -14,7 +14,8 @@ export default class XPgMenuBasic extends HTMLElement {
   connectedCallback() {
     this.$menu.items = [{
       label: 'Item 1',
-      value: 'item1'
+      value: 'item1',
+      checked: true
     },
     {
       label: 'Item 2',
@@ -24,6 +25,15 @@ export default class XPgMenuBasic extends HTMLElement {
   }
 
   #handleSelect(e: any) {
+    this.$menu.items.forEach(item => {
+      if (item.checked && item.index !== e.detail.index) {
+        item.checked = false;
+      }
+      if (!item.checked && item.index === e.detail.index) {
+        item.checked = true;
+      }
+    })
+    // update clicked result
     this.$result.textContent = JSON.stringify(e.detail);
   }
 }
diff --git a/src/pg/menuItem/__examples__/basic/basic.html b/src/pg/menuItem/__examples__/basic/basic.html
@@ -1,3 +1,7 @@
 <div class="example">
   <pg-menu-item part="item"></pg-menu-item>
+</div>
+<div>
+  <button>Toggle <code>disabled</code></button>
+  <button>Toggle <code>checked</code></button>
 </div>
diff --git a/src/pg/menuItem/__examples__/basic/basic.ts b/src/pg/menuItem/__examples__/basic/basic.ts
@@ -9,4 +9,10 @@ import template from './basic.html';
 })
 export default class XPgMenuItemBasic extends HTMLElement {
   @Part() $item: PgMenuItem;
+
+  connectedCallback() {
+    this.$item.label = 'Item 1';
+    this.$item.checked = false;
+    this.$item.disabled = false;
+  }
 }
diff --git a/src/pg/modalAlert/__examples__/basic/basic.ts b/src/pg/modalAlert/__examples__/basic/basic.ts
@@ -21,7 +21,7 @@ export default class XPgModalAlertBasic extends HTMLElement {
       header: 'Delete Item',
       message: 'Are you sure you want to delete the item?'
     });
-    this.$result.innerText = `${result}`;
+    this.$result.textContent = `${result}`;
   }
 
 }
diff --git a/src/pg/toast/__examples__/basic/basic.ts b/src/pg/toast/__examples__/basic/basic.ts
@@ -4,7 +4,7 @@ import PgToast from '../../toast';
 import template from './basic.html';
 
 @Component({
-  selector: 'x-pg-toasts-basic',
+  selector: 'x-pg-toast-basic',
   template
 })
 export default class XPgToastsBasic extends HTMLElement {
diff --git a/src/pg/toast/toast.ts b/src/pg/toast/toast.ts
@@ -39,13 +39,15 @@ export default class PgToast extends PgOverlay {
   toasts: any[] = [];
 
   connectedCallback() {
+    // Position toast
+    // close toast
     this.$button.addEventListener('click', () => {
 
     });
   }
 
   render() {
-    this.$message.innerText = this.message;
+    this.$message.textContent = 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');
diff --git a/src/pg/tooltip/tooltip.ts b/src/pg/tooltip/tooltip.ts
@@ -141,7 +141,7 @@ export default class PgTooltip extends HTMLElement {
   @Part() $tooltipArrow: HTMLDivElement;
 
   render(changes) {
-    this.$tooltipText.innerText = this.text;
+    this.$tooltipText.textContent = this.text;
     this.style.position = 'absolute';
     if (changes.visible) {
       this.style.display = this.visible ? 'block' : 'none';
diff --git a/src/pg/treeItem/treeItem.css b/src/pg/treeItem/treeItem.css
@@ -14,6 +14,7 @@
   padding: 0;
   --pg-icon-color: #FFF;
   flex: 1;
+  align-items: center
 }
 
 [part="input"] {
diff --git a/src/pg/treeItem/treeItem.ts b/src/pg/treeItem/treeItem.ts
@@ -38,6 +38,8 @@ export default class PgTreeItem extends HTMLElement {
     this.$input.addEventListener('keydown', this.#handleKeyDown.bind(this));
     this.$items.addEventListener('select', this.#handleSelect.bind(this));
     this.$items.addEventListener('rename', this.#handleRename.bind(this));
+    this.$items.addEventListener('up', this.#handleUp.bind(this));
+    this.$items.addEventListener('down', this.#handleDown.bind(this));
     forEach({
       container: this.$actions,
       items: this.actions,
@@ -95,6 +97,14 @@ export default class PgTreeItem extends HTMLElement {
     e.detail.indexes.unshift(this.index);
   }
 
+  #handleUp(e: any) {
+    e.detail.indexes.unshift(this.index);
+  }
+
+  #handleDown(e: any) {
+    e.detail.indexes.unshift(this.index);
+  }
+
   #handleSelect(e: any) {
     e.detail.indexes.unshift(this.index);
   }
@@ -139,6 +149,22 @@ export default class PgTreeItem extends HTMLElement {
         this.$input.value = this.label;
         this.$button.focus();
         break;
+      case 'ArrowUp':
+        this.dispatchEvent(new CustomEvent('up', {
+          bubbles: true,
+          composed: true,
+          detail: { indexes: [this.index] }
+        }));
+        e.preventDefault();
+        break;
+      case 'ArrowDown':
+        this.dispatchEvent(new CustomEvent('down', {
+          bubbles: true,
+          composed: true,
+          detail: { indexes: [this.index] }
+        }));
+        e.preventDefault();
+        break;
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -20,12 +20,12 @@ export default class XPgInputCheckListBasic extends HTMLElement {`
`20`	`20`	`{ value: 'uuid3', label: 'Item 3', disabled: true },`
`21`	`21`	`{ value: 'uuid4', label: 'Item 4' }`
`22`	`22`	`);`
`23`		`- this.$value.innerText = this.$input.value.join(',');`
	`23`	`+ this.$value.textContent = this.$input.value.join(',');`
`24`	`24`	`this.$input.addEventListener('change', this.handleChange.bind(this));`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`handleChange(e) {`
`28`	`28`	`const { value } = e.detail;`
`29`		`- this.$value.innerText = value.join(',');`
	`29`	`+ this.$value.textContent = value.join(',');`
`30`	`30`	`}`
`31`	`31`	`}`
Original file line number	Diff line number	Diff line change
`@@ -152,12 +152,12 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {`
`152`	`152`
`153`	`153`	`handleChange(e: CustomEvent) {`
`154`	`154`	`const { value } = e.detail;`
`155`		`- this.$value1.innerText = value.join('--');`
	`155`	`+ this.$value1.textContent = value.join('--');`
`156`	`156`	`}`
`157`	`157`
`158`	`158`	`handleInput(e: CustomEvent) {`
`159`	`159`	`const { value } = e.detail;`
`160`		`- this.$value2.innerText = value;`
	`160`	`+ this.$value2.textContent = value;`
`161`	`161`	`}`
`162`	`162`
`163`	`163`	`handleDebug(e: CustomEvent) {`
Original file line number	Diff line number	Diff line change
`@@ -14,16 +14,16 @@ export default class XPgInputRangeBasic extends HTMLElement {`
`14`	`14`	`@Part() $value2: HTMLSpanElement;`
`15`	`15`
`16`	`16`	`connectedCallback() {`
`17`		`- this.$input.addEventListener('change', this.handleChange.bind(this));`
`18`		`- this.$input.addEventListener('input', this.handleInput.bind(this));`
	`17`	`+ this.$input.addEventListener('change', this.#handleChange.bind(this));`
	`18`	`+ this.$input.addEventListener('input', this.#handleInput.bind(this));`
`19`	`19`	`}`
`20`	`20`
`21`		`- handleChange(e: CustomEvent) {`
	`21`	`+ #handleChange(e: CustomEvent) {`
`22`	`22`	`const { value } = e.detail;`
`23`	`23`	`this.$value1.innerText = value;`
`24`	`24`	`}`
`25`	`25`
`26`		`- handleInput(e: CustomEvent) {`
	`26`	`+ #handleInput(e: CustomEvent) {`
`27`	`27`	`const { value } = e.detail;`
`28`	`28`	`this.$value2.innerText = value;`
`29`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@`
`25`	`25`	`grid-row: 1;`
`26`	`26`	`grid-column: 1;`
`27`	`27`	`padding: 0.5rem 0.75rem;`
	`28`	`+ font-size: var(--pg-input-select-font-size, 1rem);`
`28`	`29`	`}`
`29`	`30`
`30`	`31`	`[part=chevron] {`
Original file line number	Diff line number	Diff line change
`@@ -14,17 +14,17 @@ export default class XPgInputTextBasic extends HTMLElement {`
`14`	`14`	`@Part() $value2: HTMLSpanElement;`
`15`	`15`
`16`	`16`	`connectedCallback() {`
`17`		`- this.$input.addEventListener('change', this.handleChange.bind(this));`
`18`		`- this.$input.addEventListener('input', this.handleInput.bind(this));`
	`17`	`+ this.$input.addEventListener('change', this.#handleChange.bind(this));`
	`18`	`+ this.$input.addEventListener('input', this.#handleInput.bind(this));`
`19`	`19`	`}`
`20`	`20`
`21`		`- handleChange(e: CustomEvent) {`
	`21`	`+ #handleChange(e: CustomEvent) {`
`22`	`22`	`const { value } = e.detail;`
`23`		`- this.$value1.innerText = value;`
	`23`	`+ this.$value1.textContent = value;`
`24`	`24`	`}`
`25`	`25`
`26`		`- handleInput(e: CustomEvent) {`
	`26`	`+ #handleInput(e: CustomEvent) {`
`27`	`27`	`const { value } = e.detail;`
`28`		`- this.$value2.innerText = value;`
	`28`	`+ this.$value2.textContent = value;`
`29`	`29`	`}`
`30`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,8 @@ export default class XPgMenuBasic extends HTMLElement {`
`14`	`14`	`connectedCallback() {`
`15`	`15`	`this.$menu.items = [{`
`16`	`16`	`label: 'Item 1',`
`17`		`- value: 'item1'`
	`17`	`+ value: 'item1',`
	`18`	`+ checked: true`
`18`	`19`	`},`
`19`	`20`	`{`
`20`	`21`	`label: 'Item 2',`
`@@ -24,6 +25,15 @@ export default class XPgMenuBasic extends HTMLElement {`
`24`	`25`	`}`
`25`	`26`
`26`	`27`	`#handleSelect(e: any) {`
	`28`	`+ this.$menu.items.forEach(item => {`
	`29`	`+ if (item.checked && item.index !== e.detail.index) {`
	`30`	`+ item.checked = false;`
	`31`	`+ }`
	`32`	`+ if (!item.checked && item.index === e.detail.index) {`
	`33`	`+ item.checked = true;`
	`34`	`+ }`
	`35`	`+ })`
	`36`	`+ // update clicked result`
`27`	`37`	`this.$result.textContent = JSON.stringify(e.detail);`
`28`	`38`	`}`
`29`	`39`	`}`