Fixes array issues.

Templarian · Templarian · commit dca7c52dcb04 · 2025-02-16T17:47:47.000-06:00
diff --git a/src/pg/grid/__examples__/basic/basic.ts b/src/pg/grid/__examples__/basic/basic.ts
@@ -77,7 +77,8 @@ export default class XPgGridBasic extends HTMLElement {
     if (count === -1) {
       this.$grid.icons = this.icons;
     }
-    this.$grid.icons = this.icons.slice(0, count);
+    // update array, fix later
+    this.$grid.icons.push(...this.icons.slice(0, count));
   }
 
   async handleSync(e: CustomEvent) {
diff --git a/src/pg/inputCheckList/__examples__/basic/basic.ts b/src/pg/inputCheckList/__examples__/basic/basic.ts
@@ -13,13 +13,13 @@ export default class XPgInputCheckListBasic extends HTMLElement {
   @Part() $value: HTMLSpanElement;
 
   connectedCallback() {
-      this.$input.value = ['uuid1', 'uuid3'];
-      this.$input.options = [
+      this.$input.value.push('uuid1', 'uuid3');
+      this.$input.options.push(
         { value: 'uuid1', label: 'Item 1' },
         { value: 'uuid2', label: 'Item 2' },
         { value: 'uuid3', label: 'Item 3', disabled: true },
         { value: 'uuid4', label: 'Item 4' }
-      ];
+      );
       this.$value.innerText = this.$input.value.join(',');
       this.$input.addEventListener('change', this.handleChange.bind(this));
   }
diff --git a/src/pg/inputSelect/__examples__/basic/basic.ts b/src/pg/inputSelect/__examples__/basic/basic.ts
@@ -13,12 +13,12 @@ export default class XPgInputSelectBasic extends HTMLElement {
   @Part() $value: HTMLSpanElement;
 
   connectedCallback() {
-    this.$input.options = [
+    this.$input.options.push(
       { label: 'Option 1', value: 'option1' },
       { label: 'Option 2', value: 'option2' },
       { label: 'Option 3', value: 'option3' },
       { label: 'Option 4', value: 'option4' }
-    ];
+    );
     this.$input.value = this.$input.options[1].value;
     this.$input.addEventListener('change', this.handleChange.bind(this));
   }
diff --git a/src/pg/listTag/__examples__/basic/basic.ts b/src/pg/listTag/__examples__/basic/basic.ts
@@ -21,25 +21,24 @@ export default class XPgIconBasic extends HTMLElement {
     this.$buttonAdd.addEventListener('click', this.handleAdd.bind(this));
     this.$buttonRemove.addEventListener('click', this.handleRemove.bind(this));
     this.$buttonEdit.addEventListener('click', this.handleEdit.bind(this));
-    this.$tags.items = tags;
+    this.$tags.items.push(...tags);
   }
 
   handleClear() {
-    this.$tags.items = [];
+    this.$tags.items.splice(0, this.$tags.items.length)
   }
 
   uuid = 4;
 
   handleAdd() {
-    this.$tags.items = [
-      ...this.$tags.items,
+    this.$tags.items.push(
       new Tag().from({
         id: `uuid${this.uuid++}`,
         count: 42,
         name: 'Foo Bar',
         url: 'foo-bar'
       })
-    ];
+    );
   }
 
   handleRemove() {
diff --git a/src/pg/markdown/__examples__/basic/basic.ts b/src/pg/markdown/__examples__/basic/basic.ts
@@ -12,7 +12,7 @@ export default class XPgMarkdownBasic extends HTMLElement {
   @Part() $markdown: PgMarkdown;
 
   connectedCallback() {
-    this.$markdown.replace = [{
+    this.$markdown.replace.push({
       find: new RegExp('(\\\\mdi|mdi|icon):([a-z0-9-]+):?([#a-z0-9-]+)?', 'g'),
       replace: (m, type, icon, color) => {
         if (type == '\\mdi') { return `mdi:${icon}`; }
@@ -36,7 +36,7 @@ export default class XPgMarkdownBasic extends HTMLElement {
         }
         return m;
       }
-    }];
+    });
 
     this.$markdown.text = example;
 
diff --git a/src/pg/search/__examples__/basic/basic.ts b/src/pg/search/__examples__/basic/basic.ts
@@ -3,6 +3,8 @@ import PgSearch from '../../search';
 import { mdiAccount, mdiAccountBox, mdiAccountCircle } from './constants';
 
 import template from './basic.html';
+import { Alias } from '../../../shared/models/alias';
+import { Icon } from '../../../shared/models/icon';
 
 @Component({
   selector: 'x-pg-search-basic',
@@ -12,18 +14,19 @@ export default class XPgSearchBasic extends HTMLElement {
   @Part() $search: PgSearch;
 
   connectedCallback() {
-    this.$search.items = [
+    this.$search.items.push(
       { type: 'Documentation', name: 'Android', url: '/getting-started/android' },
       { type: 'Documentation', name: 'Angular', url: '/getting-started/angular' },
       { type: 'Documentation', name: 'AngularJS', url: '/getting-started/angularjs' },
       { type: 'Documentation', name: 'Bootstrap', url: '/getting-started/bootstrap' },
       { type: 'Documentation', name: 'How to Play Football', url: '/getting-started/football' },
       { type: 'Documentation', name: 'Foo Angular Foo Angular', url: '/getting-started/bootstraps' }
-    ];
-    this.$search.icons = [
-      { name: 'account', data: mdiAccount, aliases: [{ name: 'user' }] },
-      { name: 'account-box', data: mdiAccountBox, aliases: [{ name: 'user-box' }] },
-      { name: 'account-circle', data: mdiAccountCircle, aliases: [{ name: 'user-circle' }] }
-    ] as any;
+    );
+    // fix types later
+    this.$search.icons.push(
+      //(new Icon()).from({ name: 'account', data: mdiAccount, aliases: [(new Alias()).from({ name: 'user' })] }),
+      //{ name: 'account-box', data: mdiAccountBox, aliases: [(new Alias()).from({ name: 'user-box' })] },
+      //{ name: 'account-circle', data: mdiAccountCircle, aliases: [(new Alias()).from({ name: 'user-circle' })] }
+     );
   }
 }
diff --git a/src/pg/tree/__examples__/basic/basic.html b/src/pg/tree/__examples__/basic/basic.html
@@ -1,3 +1,5 @@
 <div>
   <pg-tree part="tree"></pg-tree>
+  <h2>Tools</h2>
+  <button part="addItem">Add Item</button>
 </div>
diff --git a/src/pg/tree/__examples__/basic/basic.ts b/src/pg/tree/__examples__/basic/basic.ts
@@ -2,22 +2,61 @@ import { Component, Part, Prop } from '@pictogrammers/element';
 import PgTree from '../../tree';
 
 import template from './basic.html';
+import PgTreeButtonIcon from '../../../treeButtonIcon/treeButtonIcon';
+
+const IconEye = 'M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z';
 
 @Component({
   selector: 'x-pg-tree-basic',
   template
 })
 export default class XPgTreeBasic extends HTMLElement {
   @Part() $tree: PgTree;
+  @Part() $addItem: HTMLButtonElement;
 
   connectedCallback() {
-    this.$tree.items = [{
+    this.$tree.addEventListener('action', (e) => {
+      // action clicked
+      console.log('action')
+    });
+    this.$tree.addEventListener('rename', (e) => {
+      // action clicked
+    });
+    this.$tree.addEventListener('menu', (e) => {
+      // action clicked
+    });
+    this.$tree.items.push({
       key: 1,
+      icon: {
+        path: IconEye
+      },
       label: 'Item 1',
+      actions: [{
+        type: PgTreeButtonIcon,
+        icon: {
+          path: IconEye
+        }
+      },
+      {
+        type: PgTreeButtonIcon,
+        label: 'Delete',
+        icon: {
+          path: IconEye
+        }
+      }]
     },
     {
       key: 2,
       label: 'Item 2'
-    }]
+    });
+
+    let next: number = 2;
+    this.$addItem.addEventListener('click', () => {
+      next++;
+      this.$tree.items.push({
+        key: `${next}`,
+        label: `Item ${next}`
+      });
+    });
   }
 }
diff --git a/src/pg/tree/tree.css b/src/pg/tree/tree.css
@@ -0,0 +1,8 @@
+:host {
+  display: contents;
+}
+
+[part="items"] {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/pg/treeButtonIcon/README.md b/src/pg/treeButtonIcon/README.md
@@ -0,0 +1 @@
+# Tree Button Icon
diff --git a/src/pg/treeButtonIcon/treeButtonIcon.css b/src/pg/treeButtonIcon/treeButtonIcon.css
diff --git a/src/pg/treeButtonIcon/treeButtonIcon.html b/src/pg/treeButtonIcon/treeButtonIcon.html
@@ -0,0 +1,3 @@
+<button part="button">
+  <pg-icon part="icon"></pg-icon>
+</button>
diff --git a/src/pg/treeButtonIcon/treeButtonIcon.ts b/src/pg/treeButtonIcon/treeButtonIcon.ts
@@ -0,0 +1,36 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './treeButtonIcon.html';
+import style from './treeButtonIcon.css';
+import PgIcon from '../icon/icon';
+
+@Component({
+  selector: 'pg-tree-button-icon',
+  style,
+  template
+})
+export default class PgTreeButtonIcon extends HTMLElement {
+
+  @Prop() icon: { path: string };
+
+  @Part() $button: HTMLButtonElement;
+  @Part() $icon: PgIcon;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', this.#handleClick.bind(this))
+  }
+
+  #handleClick(e) {
+    this.dispatchEvent(new CustomEvent('action', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  render(changes) {
+    if (changes.icon) {
+      this.$icon.path = this.icon.path;
+    }
+  }
+
+}
diff --git a/src/pg/treeItem/treeItem.css b/src/pg/treeItem/treeItem.css
@@ -0,0 +1,11 @@
+:host {
+  display: contents;
+}
+
+[part="button"] {
+  display: flex;
+}
+
+[part="item"] {
+  display: flex;
+}
diff --git a/src/pg/treeItem/treeItem.html b/src/pg/treeItem/treeItem.html
@@ -1 +1,8 @@
-<div part="label"></div>
+<div part="item">
+  <input part="input" type="input" />
+  <button part="button">
+    <pg-icon part="icon"></pg-icon>
+    <div part="label"></div>
+  </button>
+  <div part="actions"></div>
+</div>
diff --git a/src/pg/treeItem/treeItem.ts b/src/pg/treeItem/treeItem.ts
@@ -1,7 +1,16 @@
-import { Component, Prop, Part } from '@pictogrammers/element';
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
 
 import template from './treeItem.html';
 import style from './treeItem.css';
+import PgIcon from '../icon/icon';
+import PgTreeButtonIcon from '../treeButtonIcon/treeButtonIcon';
+
+function uuid() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
 
 @Component({
   selector: 'pg-tree-item',
@@ -11,13 +20,54 @@ import style from './treeItem.css';
 export default class PgTreeItem extends HTMLElement {
 
   @Prop() label: string;
+  @Prop() icon: { path: string };
+  @Prop() actions: any[];
 
+  @Part() $item: HTMLDivElement;
+  @Part() $input: HTMLInputElement;
+  @Part() $button: HTMLButtonElement;
+  @Part() $icon: PgIcon;
   @Part() $label: HTMLDivElement;
+  @Part() $actions: HTMLDivElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('dblclick', this.#handleRename.bind(this));
+    this.$item.addEventListener('contextmenu', this.#handleContextMenu.bind(this));
+  }
 
   render(changes) {
     if (changes.label) {
       this.$label.textContent = this.label;
     }
+    if (changes.icon && this.icon) {
+      this.$icon.path = this.icon.path;
+    }
+    if (changes.actions && this.actions) {
+      this.actions.forEach(x => { if(!('key' in x)) { x.key = uuid(); } });
+      forEach({
+        container: this.$actions,
+        items: this.actions,
+        type: (item) => {
+          return PgTreeButtonIcon;
+        },
+        create: ($item, item) => {
+          // after creation of $item element
+        },
+        update: ($item, item) => {
+          // after every $item update
+        },
+      });
+    }
+  }
+
+  #handleContextMenu(e) {
+    e.preventDefault();
+  }
+
+  #handleRename(e) {
+    this.$input.value = this.label;
+    this.$input.select();
+    e.preventDefault();
   }
 
 }

Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,8 @@ export default class XPgGridBasic extends HTMLElement {`
`77`	`77`	`if (count === -1) {`
`78`	`78`	`this.$grid.icons = this.icons;`
`79`	`79`	`}`
`80`		`- this.$grid.icons = this.icons.slice(0, count);`
	`80`	`+ // update array, fix later`
	`81`	`+ this.$grid.icons.push(...this.icons.slice(0, count));`
`81`	`82`	`}`
`82`	`83`
`83`	`84`	`async handleSync(e: CustomEvent) {`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export default class XPgMarkdownBasic extends HTMLElement {`
`12`	`12`	`@Part() $markdown: PgMarkdown;`
`13`	`13`
`14`	`14`	`connectedCallback() {`
`15`		`- this.$markdown.replace = [{`
	`15`	`+ this.$markdown.replace.push({`
`16`	`16`	`find: new RegExp('(\\\\mdi\|mdi\|icon):([a-z0-9-]+):?([#a-z0-9-]+)?', 'g'),`
`17`	`17`	`replace: (m, type, icon, color) => {`
`18`	`18`	if (type == '\\mdi') { return `mdi:${icon}`; }
`@@ -36,7 +36,7 @@ export default class XPgMarkdownBasic extends HTMLElement {`
`36`	`36`	`}`
`37`	`37`	`return m;`
`38`	`38`	`}`
`39`		`- }];`
	`39`	`+ });`
`40`	`40`
`41`	`41`	`this.$markdown.text = example;`
`42`	`42`