@pictogrammers/components 0.4.8 → 0.5.0

package/pg/table/README.md

@@ -0,0 +1,108 @@
+# `<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.
+
+- `PgTableHeaderText`
+- `PgTableCellText` - default `string` cell type
+- `PgTableCellNumber` - default `number` cell type
+- `PgTableCellCheck` - default `boolean` cell type
+- `PgTableCellButton`
+- `PgTableCellButtonIcon`
+
+```typescript
+import '@pictogrammers/components/pg/table';
+import PgTable, { createTableItem } from '@pictogrammers/components/pg/table';
+```
+
+```html
+<pg-table part="table"></pg-table>
+```
+
+| Attributes | Tested   | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| columns    |          | []      | Column definition. |
+| data       |          | []      | Data |
+
+| CSS Variable        | Default   | Description |
+| ------------------- | --------- | ----------- |
+| `--pg-table-font-size`  | `inherit` | Font size |
+| `--pg-table-row-background-color` | `#f1f1f1`  | Row background |
+
+## Columns
+
+```typescript
+// type: TableHeaderText
+this.$table.columns = [{
+  label: 'Check All',
+  key: 'check',
+  hideLabel: true,
+  type: TableHeaderCheck,
+  editable: true
+}, {
+  label: 'Name',
+  key: 'name'
+}, {
+  label: 'Age',
+  key: 'age'
+}, {
+  label: 'Favorite',
+  key: 'favorite',
+  hideLabel: true,
+}];
+```
+
+Adding `editable: true` to any data types will enable editing and trigger the `action` event (see Events below).
+
+## Data
+
+The `createTableItem` unrolls the `{ key: value }` shorthand to `items: [{ key, value}]` object to support the mutable 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 = [
+  createTableItem({
+    name: 'Dipper Pines',
+    age: 12,
+    favorite: {
+      type: TableCellButtonIcon,
+      icon: IconStar,
+    }
+  }),
+  createTableItem({
+    name: 'Mabel Pines',
+    age: 12,
+    favorite: {
+      type: TableCellButtonIcon,
+      icon: IconStar,
+    }
+  })
+];
+```
+
+## Events
+
+All events dispatched will be the same `action` name. This allows the insert of `index` as it bubbles to the parent `this.$table` element.
+
+```typescript
+this.$table.addEventListener('action', (e: any) => {
+  const { getColumn, value, key } = e.detail;
+  switch(key) {
+    case 'selected':
+      getColumn(key).value = value;
+      break;
+    default:
+      throw `unhandled action event for key ${key}`;
+  }
+});
+```
+
+From a custom cell component...
+
+```typescript
+this.dispatchEvent(new CustomEvent('action', {
+  detail {
+    other: 'other data',
+  },
+}))
+```

package/pg/table/__examples__/basic/basic.html

@@ -0,0 +1,10 @@
+<div class="example">
+  <pg-table part="table"></pg-table>
+  <div>
+    <button part="pushData">Push Data</button>
+    <button part="deleteLast">Delete Last</button>
+  </div>
+  <div>
+    <code>.getCSV()</code>: <pre part="output"></pre>
+  </div>
+</div>

package/pg/table/__examples__/basic/basic.ts

@@ -0,0 +1,111 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgTable, { createTableItem } from '../../table';
+import PgTableCellButtonIcon from '../../../tableCellButtonIcon/tableCellButtonIcon';
+
+import style from './basic.css';
+import template from './basic.html';
+
+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';
+
+@Component({
+  selector: 'x-pg-table-basic',
+  style,
+  template
+})
+export default class XPgTableBasic extends HTMLElement {
+
+  @Part() $table: PgTable;
+  @Part() $pushData: HTMLButtonElement;
+  @Part() $deleteLast: HTMLButtonElement;
+  @Part() $output: HTMLPreElement;
+
+  connectedCallback() {
+    // this.$table.addEventListener('click', this.handleClick.bind(this));
+    this.$table.columns = [{
+      label: 'Select',
+      key: 'selected',
+      hideLabel: true,
+      editable: true,
+    }, {
+      label: 'Name',
+      key: 'name',
+      editable: true,
+      maxWidth: '12rem',
+    }, {
+      label: 'Age',
+      key: 'age'
+    }, {
+      label: 'Favorite',
+      key: 'favorite',
+      hideLabel: true,
+    }];
+    this.$table.data = [
+      createTableItem({
+        selected: true,
+        name: 'Dipper Pines',
+        age: 12,
+        favorite: {
+          type: PgTableCellButtonIcon,
+          icon: IconStarOutline,
+          value: false,
+        }
+      }),
+      createTableItem({
+        selected: false,
+        name: 'Mabel Pines',
+        age: 12,
+        favorite: {
+          type: PgTableCellButtonIcon,
+          icon: IconStarOutline,
+          value: false,
+        }
+      })
+    ];
+    this.$pushData.addEventListener('click', this.handlePushData.bind(this));
+    this.$deleteLast.addEventListener('click', this.handleDeleteLast.bind(this));
+    this.$table.addEventListener('action', (e: any) => {
+      const { getColumn, key } = e.detail;
+      switch(key) {
+        case 'name':
+          getColumn(key).value = e.detail.value;
+          break;
+        case 'favorite':
+          getColumn(key).value = !getColumn(key).value;
+          if (getColumn(key).value) {
+            getColumn(key).icon = IconStar;
+          } else {
+            getColumn(key).icon = IconStarOutline;
+          }
+          break;
+        case 'selected':
+          getColumn(key).value = e.detail.value;
+          break;
+      }
+      // CSV
+      this.$output.textContent = this.$table.getCSV();
+    });
+  }
+
+  newCount = 0;
+  handlePushData() {
+    this.$table.data.push(createTableItem({
+      name: `new ${this.newCount++}`,
+      age: this.newCount,
+      favorite: {
+        type: PgTableCellButtonIcon,
+        icon: IconStarOutline,
+      },
+    }));
+    // CSV
+    this.$output.textContent = this.$table.getCSV();
+  }
+
+  handleDeleteLast() {
+    this.$table.data.pop();
+    // CSV
+    this.$output.textContent = this.$table.getCSV();
+  }
+
+}

package/pg/table/table.css

@@ -0,0 +1,20 @@
+:host {
+  display: inline-flex;
+}
+
+[part=table] {
+  display: table;
+  border-spacing: 2px;
+}
+
+[part=header] {
+  display: table-header-group;
+}
+
+[part=columns] {
+  display: table-row;
+}
+
+[part=rows] {
+  display: table-row-group;
+}

package/pg/table/table.html

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

package/pg/table/table.ts

@@ -0,0 +1,86 @@
+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';
+
+/**
+ * Create a table data item that can react to data changes. While cumbersome
+ * this greatly increases performance and uses less memory.
+ *
+ * @param obj ex: { field1: 'value', field2: 42 }
+ * @returns formatted object
+ */
+export function createTableItem(obj: object) {
+  const keys = Object.keys(obj);
+  const items: any[] = [];
+  keys.forEach((key) => {
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      items.push({
+        key,
+        ...obj[key],
+      });
+    } else {
+      items.push({
+        key,
+        value: obj[key],
+      });
+    }
+  });
+  return { items };
+}
+
+@Component({
+  selector: 'pg-table',
+  style,
+  template
+})
+export default class PgTable extends HTMLElement {
+  @Prop() columns: any[] = [];
+  @Prop() data: any[] = [];
+
+  @Part() $columns: HTMLDivElement;
+  @Part() $rows: HTMLDivElement;
+
+  trackedData = [];
+
+  connectedCallback() {
+    forEach({
+      container: this.$columns,
+      items: this.columns,
+      type: () => PgTableColumn,
+    });
+    forEach({
+      container: this.$rows,
+      items: this.data,
+      type: () => PgTableRow,
+      create: ($item: PgTableRow, item) => {
+        if (this.columns.length === 0) {
+          throw 'columns must be set before data';
+        }
+        $item.columns = this.columns;
+        $item.addEventListener('action', (e: any) => {
+          e.stopPropagation();
+          this.dispatchEvent(new CustomEvent('action', {
+            detail: e.detail,
+          }));
+        })
+      }
+    });
+  }
+
+  getCSV() {
+    let text = this.columns.map((column) => {
+      return column.label;
+    }).join(',');
+    text += '\n';
+    text += this.data.map(({ items }) => {
+      return items.map((item) => {
+        return item.value;
+      }).join(',')
+    }).join('\n');
+    return text;
+  }
+}

package/pg/tableCellButtonIcon/README.md

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

package/pg/tableCellButtonIcon/tableCellButtonIcon.css

@@ -0,0 +1,16 @@
+:host {
+  display: contents;
+}
+
+[part=cell] {
+  display: table-cell;
+  padding: 0 0.5rem;
+  background-color: var(--pg-table-row-background-color);
+  border-top: 0;
+  border-radius: 0.125rem;
+  vertical-align: middle;
+  justify-items: center;
+  --pg-button-background-color: transparent;
+  --pg-button-padding: 0;
+  --pg-button-border-width: 0;
+}

package/pg/tableCellButtonIcon/tableCellButtonIcon.html

@@ -0,0 +1,5 @@
+<div part="cell">
+  <pg-button part="button">
+    <pg-icon part="icon"></pg-icon>
+  </pg-button>
+</div>

package/pg/tableCellButtonIcon/tableCellButtonIcon.ts

@@ -0,0 +1,34 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import PgButton from '../button/button';
+import PgIcon from '../icon/icon';
+
+import template from './tableCellButtonIcon.html';
+import style from './tableCellButtonIcon.css';
+
+@Component({
+  selector: 'pg-table-cell-button-icon',
+  style,
+  template
+})
+export default class PgTableCellButtonIcon extends HTMLElement {
+  @Prop() value: any = null;
+  @Prop() icon: string = '';
+
+  @Part() $button: PgButton;
+  @Part() $icon: PgIcon;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('action', {
+        detail: {},
+      }));
+    });
+  }
+
+  render(changes) {
+    if (changes.icon) {
+      this.$icon.path = this.icon;
+    }
+  }
+}

package/pg/tableCellCheck/README.md

@@ -0,0 +1,3 @@
+# `PgTableCellCheck`
+
+See `PgTable`. Default cell render for `string` type.

package/pg/tableCellCheck/tableCellCheck.css

@@ -0,0 +1,15 @@
+:host {
+  display: contents;
+}
+
+[part=cell] {
+  display: table-cell;
+  padding: 0.125rem;
+  background-color: var(--pg-table-row-background-color);
+  border-top: 0;
+  border-radius: 0.125rem;
+}
+
+[part=input] {
+  vertical-align: middle;
+}

package/pg/tableCellCheck/tableCellCheck.html

@@ -0,0 +1,3 @@
+<div part="cell">
+  <pg-input-check part="input" />
+</div>

package/pg/tableCellCheck/tableCellCheck.ts

@@ -0,0 +1,43 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import PgInputCheck from '../inputCheck/inputCheck';
+
+import template from './tableCellCheck.html';
+import style from './tableCellCheck.css';
+
+@Component({
+  selector: 'pg-table-cell-check',
+  style,
+  template,
+})
+export default class PgTableCellCheck extends HTMLElement {
+  @Prop() value: boolean = false;
+  @Prop() editable: boolean = false;
+  @Prop() key: string = '';
+
+  @Part() $input: PgInputCheck;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  render(changes) {
+    if (changes.value) {
+      this.$input.value = this.value;
+    }
+    if (changes.editable) {
+      this.$input.readOnly = !this.editable;
+    }
+  }
+
+  handleChange(e: any) {
+    const { value } = e.target;
+    this.dispatchEvent(
+      new CustomEvent('action', {
+        detail: {
+          value,
+        }
+      })
+    );
+  }
+}

package/pg/tableCellNumber/README.md

@@ -0,0 +1,3 @@
+# `PgTableCellNumber`
+
+See `PgTable`. Default cell render for `number` type.

package/pg/tableCellNumber/tableCellNumber.css

@@ -0,0 +1,11 @@
+:host {
+  display: contents;
+}
+
+[part=cell] {
+  display: table-cell;
+  background-color: var(--pg-table-row-background-color);
+  --pg-input-text-padding: 0.125rem 0.25rem;
+  --pg-input-text-border-color: rgb(69, 60, 79, 0.5);
+  vertical-align: middle;
+}

package/pg/tableCellNumber/tableCellNumber.html

@@ -0,0 +1,3 @@
+<div part="cell">
+  <pg-input-text part="input"></pg-input-text>
+</div>

package/pg/tableCellNumber/tableCellNumber.ts

@@ -0,0 +1,40 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import PgInputText from '../inputText/inputText';
+
+import template from './tableCellNumber.html';
+import style from './tableCellNumber.css';
+
+@Component({
+  selector: 'pg-table-cell-number',
+  style,
+  template
+})
+export default class PgTableCellNumber extends HTMLElement {
+  @Prop() value: number = 0;
+  @Prop() key: string = '';
+  @Prop() editable: boolean = false;
+
+  @Part() $input: PgInputText;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', (e: any) => {
+      this.dispatchEvent(
+        new CustomEvent('action', {
+          detail: {
+            value: e.detail.value,
+          }
+        })
+      );
+    });
+  }
+
+  render(changes) {
+    if (changes.value) {
+      this.$input.value = `${this.value}`;
+    }
+    if (changes.editable) {
+      this.$input.readOnly = !this.editable;
+    }
+  }
+}

package/pg/tableCellText/README.md

@@ -0,0 +1,3 @@
+# `PgTableCellText`
+
+See `PgTable`. Default cell render for `string` type.

package/pg/tableCellText/tableCellText.css

@@ -0,0 +1,11 @@
+:host {
+  display: contents;
+}
+
+[part=cell] {
+  display: table-cell;
+  background-color: var(--pg-table-row-background-color);
+  --pg-input-text-padding: 0.125rem 0.25rem;
+  --pg-input-text-border-color: rgb(69, 60, 79, 0.5);
+  vertical-align: middle;
+}

package/pg/tableCellText/tableCellText.html

@@ -0,0 +1,3 @@
+<div part="cell">
+  <pg-input-text part="input"></pg-input-text>
+</div>

package/pg/tableCellText/tableCellText.ts

@@ -0,0 +1,62 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import PgInputText from '../inputText/inputText';
+
+import template from './tableCellText.html';
+import style from './tableCellText.css';
+
+@Component({
+  selector: 'pg-table-cell-text',
+  style,
+  template
+})
+export default class PgTableCellText extends HTMLElement {
+  @Prop() value: string = '';
+  @Prop() key: string = '';
+  @Prop() editable: boolean = false;
+  @Prop() maxWidth: number | string | null = null;
+
+  @Part() $input: PgInputText;
+
+  connectedCallback() {
+    this.$input.addEventListener('input', (e: any) => {
+      this.dispatchEvent(
+        new CustomEvent('action', {
+          detail: {
+            value: e.detail.value,
+            event: 'input',
+          }
+        })
+      );
+    });
+    this.$input.addEventListener('change', (e: any) => {
+      this.dispatchEvent(
+        new CustomEvent('action', {
+          detail: {
+            value: e.detail.value,
+            event: 'change',
+          }
+        })
+      );
+    });
+  }
+
+  render(changes) {
+    if (changes.value) {
+      this.$input.value = this.value;
+    }
+    if (changes.editable) {
+      this.$input.readOnly = !this.editable;
+    }
+    if (changes.maxWidth) {
+      if (this.maxWidth === null) {
+        this.$input.style.removeProperty('--pg-input-text-max-width');
+      } else {
+        this.$input.style.setProperty(
+          '--pg-input-text-max-width',
+          `${typeof this.maxWidth === 'string' ? this.maxWidth : this.maxWidth + 'px'}`
+        );
+      }
+    }
+  }
+}

package/pg/tableColumn/README.md

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

package/pg/tableColumn/tableColumn.css

@@ -0,0 +1,12 @@
+:host {
+  display: contents;
+}
+
+[part=label] {
+  display: table-cell;
+  border-style: solid;
+  border-width: 0 0 1px 0;
+  border-color: var(--pg-table-border-color, #453C4F);
+  padding: 0.125rem 0.5rem;
+  font-weight: 600;
+}

package/pg/tableColumn/tableColumn.html

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

package/pg/tableColumn/tableColumn.ts

@@ -0,0 +1,29 @@
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+
+import template from './tableColumn.html';
+import style from './tableColumn.css';
+
+@Component({
+  selector: 'pg-table-column',
+  style,
+  template
+})
+export default class PgTableColumn extends HTMLElement {
+  @Prop() label: string = '';
+  @Prop() hideLabel: boolean = false;
+  @Prop() key: string = '';
+
+  @Part() $label: HTMLDivElement;
+
+  render(changes: { [key: string ]: boolean}) {
+    if (changes.label || changes.hideLabel) {
+      if (this.hideLabel) {
+        this.$label.ariaLabel = this.label;
+        this.$label.textContent = '';
+      } else {
+        this.$label.ariaLabel = null;
+        this.$label.textContent = this.label;
+      }
+    }
+  }
+}

package/pg/tableRow/README.md

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