Progress fixing bugs moving to ES2023

Templarian · Templarian · commit a18042564a4f · 2025-03-02T20:50:04.000-06:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,12 +26,12 @@
     "remarkable": "^2.0.1"
   },
   "devDependencies": {
-    "@pictogrammers/element": "0.0.42",
+    "@pictogrammers/element": "0.0.44",
     "@pictogrammers/element-jest": "^0.1.7",
-    "@pictogrammers/element-webpack": "^0.1.40",
+    "@pictogrammers/element-webpack": "^0.1.42",
     "cross-env": "^7.0.3",
     "npm-run-all": "^4.1.5",
     "raw-loader": "^4.0.2",
-    "typescript": "^5.7.3"
+    "typescript": "^5.8.2"
   }
 }
diff --git a/src/pg/inputPixelEditor/__examples__/basic/basic.css b/src/pg/inputPixelEditor/__examples__/basic/basic.css
@@ -8,6 +8,10 @@
   border: 1px solid #FFF;
 }
 
+[part="value1"] {
+  word-wrap: break-word;
+}
+
 .props {
   display: flex;
   flex-direction: row;
diff --git a/src/pg/inputSelect/inputSelect.ts b/src/pg/inputSelect/inputSelect.ts
@@ -15,7 +15,7 @@ interface InputSelectItem {
 })
 export default class PgInputSelect extends HTMLElement {
   @Prop() options: InputSelectItem[] = [];
-  @Prop() value: string;
+  @Prop() value: string = '';
   @Prop() name: string = '';
 
   @Part() $select: HTMLSelectElement;
diff --git a/src/pg/inputUserSelect/inputUserSelect.ts b/src/pg/inputUserSelect/inputUserSelect.ts
@@ -34,7 +34,7 @@ const mdiShape = 'M11,13.5V21.5H3V13.5H11M12,2L17.5,11H6.5L12,2M17.5,13C20,13 22
   template
 })
 export default class PgInputUserSelect extends HTMLElement {
-  @Prop() options: User[] | null = null;
+  @Prop() options: User[] = [];
   @Prop() value: User | null = null;
   @Prop() clear: boolean = false;
   @Prop() noDataText: string = 'Empty Users List';
diff --git a/src/pg/menu/README.md b/src/pg/menu/README.md
@@ -0,0 +1,15 @@
+# `<pg-menu>`
+
+The `pg-menu` component renders a menu list.
+
+```typescript
+import '@pictogrammers/components/pgMenu.js';
+```
+
+```html
+<pg-menu></pg-menu>
+```
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| `items`    |          | Set items list. |
diff --git a/src/pg/menu/__examples__/basic/basic.html b/src/pg/menu/__examples__/basic/basic.html
@@ -0,0 +1,5 @@
+<div class="example">
+  <pg-nav
+    logo="M2,2H8V4H16V2H22V8H20V16H22V22H16V20H8V22H2V16H4V8H2V2M16,8V6H8V8H6V16H8V18H16V16H18V8H16M4,4V6H6V4H4M18,4V6H20V4H18M4,18V20H6V18H4M18,18V20H20V18H18Z"
+    name="Material Design Icons"></pg-nav>
+</div>
diff --git a/src/pg/menu/__examples__/basic/basic.ts b/src/pg/menu/__examples__/basic/basic.ts
@@ -0,0 +1,11 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-nav-basic',
+  template
+})
+export default class XPgNavBasic extends HTMLElement {
+
+}
diff --git a/src/pg/menu/menu.css b/src/pg/menu/menu.css
@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}
diff --git a/src/pg/menu/menu.html b/src/pg/menu/menu.html
@@ -0,0 +1 @@
+<div part="items"></div>
diff --git a/src/pg/menu/menu.ts b/src/pg/menu/menu.ts
@@ -0,0 +1,29 @@
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+import PgMenuItem from '../menuItem/menuItem';
+
+import template from './menu.html';
+import style from './menu.css';
+
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
+@Component({
+  selector: 'pg-menu',
+  style,
+  template
+})
+export default class PgMenu extends HTMLElement {
+  @Prop() items: any[] = [];
+
+  @Part() $items: HTMLDivElement;
+
+  connectedCallback() {
+    forEach({
+      container: this.$items,
+      items: this.items,
+      type: (item) => {
+        return PgMenuItem;
+      }
+    });
+  }
+
+}
diff --git a/src/pg/menuIcon/menuIcon.ts b/src/pg/menuIcon/menuIcon.ts
@@ -38,12 +38,12 @@ export default class PgMenuIcon extends HTMLElement {
   @Part() $colorPicker: any;
   @Part() $colorHexRgb: any;
 
-  @Local('#000000') cachePngColor: string;
-  @Local('24') cachePngSize: string;
-  @Local('#000000') cacheSvgColor: string;
+  @Local() cachePngColor: string = '#000000';
+  @Local() cachePngSize: string = '24';
+  @Local() cacheSvgColor: string = '#000000';
 
   color = 'svg';
-  @Prop() currentIndex: 0;
+  @Prop() currentIndex: number = 0;
   @Prop() icon: Icon = new Icon();
 
   connectedCallback() {
diff --git a/src/pg/menuItem/README.md b/src/pg/menuItem/README.md
@@ -0,0 +1,15 @@
+# `<pg-menu>`
+
+The `pg-menu` component renders a menu list.
+
+```typescript
+import '@pictogrammers/components/pgMenu.js';
+```
+
+```html
+<pg-menu></pg-menu>
+```
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| `items`    |          | Set items list. |
diff --git a/src/pg/menuItem/__examples__/basic/basic.html b/src/pg/menuItem/__examples__/basic/basic.html
@@ -0,0 +1,5 @@
+<div class="example">
+  <pg-nav
+    logo="M2,2H8V4H16V2H22V8H20V16H22V22H16V20H8V22H2V16H4V8H2V2M16,8V6H8V8H6V16H8V18H16V16H18V8H16M4,4V6H6V4H4M18,4V6H20V4H18M4,18V20H6V18H4M18,18V20H20V18H18Z"
+    name="Material Design Icons"></pg-nav>
+</div>
diff --git a/src/pg/menuItem/__examples__/basic/basic.ts b/src/pg/menuItem/__examples__/basic/basic.ts
@@ -0,0 +1,11 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-nav-basic',
+  template
+})
+export default class XPgNavBasic extends HTMLElement {
+
+}
diff --git a/src/pg/menuItem/menuItem.css b/src/pg/menuItem/menuItem.css
@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}
diff --git a/src/pg/menuItem/menuItem.html b/src/pg/menuItem/menuItem.html
@@ -0,0 +1 @@
+<div part="label"></div>
diff --git a/src/pg/menuItem/menuItem.ts b/src/pg/menuItem/menuItem.ts
@@ -0,0 +1,22 @@
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+
+import template from './menuItem.html';
+import style from './menuItem.css';
+
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
+@Component({
+  selector: 'pg-menu-item',
+  style,
+  template
+})
+export default class PgMenuItem extends HTMLElement {
+  @Prop() label: string = '';
+
+  @Part() $label: HTMLDivElement;
+
+  connectedCallback() {
+
+  }
+
+}
diff --git a/src/pg/modification/modification.ts b/src/pg/modification/modification.ts
@@ -96,7 +96,7 @@ function itemsInsertDates(modifications) {
   template
 })
 export default class PgModification extends HTMLElement {
-  @Prop() modifications: Modification[] | null = null;
+  @Prop() modifications: Modification[] = [];
   @Prop() edit: boolean = false;
   // Ex: pictogrammers/repo
   @Prop() github: string = '';
diff --git a/src/pg/tabs/partials/tab.ts b/src/pg/tabs/partials/tab.ts
@@ -0,0 +1,23 @@
+import { Component, Prop, Part, node, forEach } from '@pictogrammers/element';
+
+import template from './tab.html';
+// import style from './tabs.css';
+
+@Component({
+  selector: 'pg-partial-tab',
+  template
+})
+export default class PgPartialTab extends HTMLElement {
+
+  @Prop() label: string = '';
+
+  @Part() $tab: HTMLLIElement;
+  @Part() $button: HTMLButtonElement;
+
+  render(changes) {
+    if (changes.label) {
+      this.$button.textContent = this.label;
+    }
+  }
+
+}
diff --git a/src/pg/tabs/tabs.ts b/src/pg/tabs/tabs.ts
@@ -1,10 +1,9 @@
-import { Component, Prop, Part, node } from '@pictogrammers/element';
-import { list, item } from '../shared/list';
+import { Component, Prop, Part, node, forEach } from '@pictogrammers/element';
 import PgTab from '../tab/tab';
 
 import template from './tabs.html';
 import style from './tabs.css';
-import partialTab from './partials/tab.html';
+import PgPartialTab from './partials/tab';
 
 @Component({
   selector: 'pg-tabs',
@@ -13,20 +12,29 @@ import partialTab from './partials/tab.html';
 })
 export default class PgTabs extends HTMLElement {
 
-  @Part() $tabset: HTMLDivElement;
+  @Part() $tabset: HTMLUListElement;
   @Part() $slot: HTMLSlotElement;
 
   tabs: any[] = [];
 
   connectedCallback() {
     this.addEventListener('tab', this.handleTab.bind(this));
     this.$slot.addEventListener('slotchange', this.handleSlotChange.bind(this));
+    forEach({
+      container: this.$tabset,
+      items: this.tabs,
+      type: (tab: any) => {
+        return PgPartialTab;
+      }
+    });
   }
 
   handleTab(e: CustomEvent) {
     const { detail } = e;
     this.tabs.push(detail);
-    list(
+
+
+    /*list(
       this.$tabset,
       this.tabs,
       'id',
@@ -50,7 +58,7 @@ export default class PgTabs extends HTMLElement {
       (tab, $item) => {
 
       }
-    );
+    );*/
     e.stopPropagation();
   }
 
diff --git a/src/pg/treeButtonIcon/treeButtonIcon.ts b/src/pg/treeButtonIcon/treeButtonIcon.ts
@@ -4,6 +4,8 @@ import template from './treeButtonIcon.html';
 import style from './treeButtonIcon.css';
 import PgIcon from '../icon/icon';
 
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
 @Component({
   selector: 'pg-tree-button-icon',
   style,
@@ -12,7 +14,7 @@ import PgIcon from '../icon/icon';
 export default class PgTreeButtonIcon extends HTMLElement {
 
   @Prop() index: number;
-  @Prop() icon: string;
+  @Prop() icon: string = noIcon;
 
   @Part() $button: HTMLButtonElement;
   @Part() $icon: PgIcon;
diff --git a/src/pg/treeItem/treeItem.ts b/src/pg/treeItem/treeItem.ts
@@ -5,12 +5,7 @@ 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);
-  });
-}
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
 
 @Component({
   selector: 'pg-tree-item',
@@ -22,7 +17,7 @@ export default class PgTreeItem extends HTMLElement {
   @Prop() index: number;
   @Prop() label: string = '';
   @Prop() selected: boolean = false;
-  @Prop() icon: { path: string };
+  @Prop() icon: { path: string } = { path: noIcon };
   @Prop() actions: any[] = [];
   @Prop() items: any[] = [];
 
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,12 +1,11 @@
 {
   "compilerOptions": {
-    "module": "ES2015",
-    "target": "ES2017",
+    "module": "ES6",
+    "target": "ES2023",
     "lib": ["ES2023", "ES5", "ES6", "DOM"],
     "moduleResolution": "node",
     "baseUrl": "src",
     "sourceMap": true,
-    "experimentalDecorators": true,
     "strictNullChecks": true,
     "allowSyntheticDefaultImports": true,
     "outDir": "dist",

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+:host {`
	`2`	`+ display: contents;`
	`3`	`+}`