Progress on tables.

Author: Templarian

src/pg/inputPixelEditor/__examples__/basic/basic.ts

@@ -43,6 +43,8 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $saveSvg: HTMLInputElement;
   @Part() $savePng: HTMLInputElement;
 
+  @Part() $addLayer: HTMLButtonElement;
+
   // MAKE A LIST COMPONENT!!!! [text | delete]
   @Part() $colors: HTMLPreElement;
   @Part() $layers: HTMLPreElement;
@@ -142,6 +144,10 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
         // no save
       }
     });
+    this.$addLayer.addEventListener('click', () => {
+      // number[][][]
+      // this.$input.addLayer();
+    });
   }
 
   handleFile(e) {

src/pg/table/README.md

@@ -0,0 +1,64 @@
+# `<pg-preview>`
+
+The `pg-table` component allows a standard way to create static tables. While it has features like the datatable it is much more lightweight lacking features like column resize and edit.
+
+- `TableHeaderText`
+- `TableHeader`
+
+```typescript
+import '@pictogrammers/components/pg/table';
+import PgTable from '@pictogrammers/components/pg/table';
+```
+
+```html
+<pg-table part="table"></pg-table>
+```
+
+| Attributes | Tested   | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| columns    |          | []      | Column definition. |
+| data       |          | []      | Data |
+
+## Columns
+
+```typescript
+// type: TableHeaderText
+this.$table.columns = [{
+  label: 'Check All',
+  key: 'check',
+  hideLabel: true,
+  type: TableHeaderCheck,
+}, {
+  label: 'Name',
+  key: 'name'
+}, {
+  label: 'Age',
+  key: 'age'
+}, {
+  label: 'Favorite',
+  key: 'favorite',
+  hideLabel: true,
+}];
+```
+
+## Data
+
+```typescript
+const IconStar = 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z';
+const IconStarOutline = 'M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z';
+this.$table.data = [{
+  name: 'Dipper Pines',
+  age: 12,
+  favorite: {
+    type: TableCellButtonIcon,
+    icon: IconStar,
+  }
+}, {
+  name: 'Mabel Pines',
+  age: 12,
+  favorite: {
+    type: TableCellButtonIcon,
+    icon: IconStar,
+  }
+}];
+```

src/pg/table/__examples__/basic/basic.html

@@ -0,0 +1,6 @@
+<div class="example">
+  <pg-table part="table"></pg-table>
+  <div>
+    <button part="pushData">Push Data</button>
+  </div>
+</div>

src/pg/table/__examples__/basic/basic.ts

@@ -0,0 +1,50 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgTable from '../../table';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-table-basic',
+  template
+})
+export default class XPgTableBasic extends HTMLElement {
+
+  @Part() $table: PgTable;
+
+  connectedCallback() {
+    // this.$table.addEventListener('click', this.handleClick.bind(this));
+    this.$table.columns = [{
+      label: 'Name',
+      key: 'name'
+    }, {
+      label: 'Age',
+      key: 'age'
+    }, {
+      label: 'Favorite',
+      key: 'favorite',
+      hideLabel: true,
+    }];
+    const IconStar = 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z';
+    const IconStarOutline = 'M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z';
+    this.$table.data = [{
+      name: 'Dipper Pines',
+      age: 12,
+      // favorite: {
+      //   type: TableCellButtonIcon,
+      //   icon: IconStar,
+      // }
+    }, {
+      name: 'Mabel Pines',
+      age: 12,
+      // favorite: {
+      //   type: TableCellButtonIcon,
+      //   icon: IconStar,
+      // }
+    }];
+  }
+
+  handleClick() {
+
+  }
+
+}

src/pg/table/table.css

@@ -0,0 +1,21 @@
+:host {
+  display: inline-flex;
+  color: var(--pg-icon-color, #222);
+}
+
+[part=table] {
+  display: table;
+  border-spacing: 0;
+}
+
+[part=header] {
+  display: table-header-group;
+}
+
+[part=columns] {
+  display: table-row;
+}
+
+[part=rows] {
+  display: table-row-group;
+}

src/pg/table/table.html

@@ -0,0 +1,6 @@
+<div part="table">
+  <div part="header">
+    <div part="columns"></div>
+  </div>
+  <div part="rows"></div>
+</div>

src/pg/table/table.ts

@@ -0,0 +1,39 @@
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+
+import PgTableColumn from '../tableColumn/tableColumn';
+import PgTableRow from '../tableRow/tableRow';
+
+import template from './table.html';
+import style from './table.css';
+
+@Component({
+  selector: 'pg-table',
+  style,
+  template
+})
+export default class PgTable extends HTMLElement {
+  @Prop() columns: any[] = [];
+  @Prop() data: any[] = [];
+
+  @Part() $columns: HTMLDivElement;
+  @Part() $rows: HTMLDivElement;
+
+  connectedCallback() {
+    forEach({
+      container: this.$columns,
+      items: this.columns,
+      type: () => PgTableColumn,
+    });
+    forEach({
+      container: this.$rows,
+      items: this.data,
+      type: () => PgTableRow,
+    });
+  }
+
+  render(changes) {
+    if (changes.data) {
+      console.log(this.data);
+    }
+  }
+}

src/pg/tableColumn/README.md

@@ -0,0 +1,3 @@
+# `PgTableColumn`
+
+See `PgTable`.

src/pg/tableColumn/tableColumn.css

@@ -0,0 +1,7 @@
+:host {
+  display: contents;
+}
+
+[part=label] {
+  display: table-cell;
+}

src/pg/tableColumn/tableColumn.html

@@ -0,0 +1 @@
+<div part="label"></div>