@pictogrammers/components 0.4.9 → 0.5.1

package/pg/menuItem/menuItem.css

@@ -6,28 +6,25 @@
   outline: none;
   display: flex;
   align-items: center;
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
   text-align: var(--pg-menu-item-text-align, left);
-  background: var(--pg-menu-item-background, transparent);
+  background-color: var(--pg-menu-item-background, transparent);
   padding: var(--pg-menu-item-padding, 0.25rem 0.5rem 0.25rem 0.5rem);
   border-color: transparent;
   border-width: 0;
   border-style: solid;
-  border-top-left-radius: var(--pg-menu-item-border-radius-top, 0.25rem);
-  border-top-right-radius: var(--pg-menu-item-border-radius-top, 0.25rem);
-  border-bottom-left-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);
-  border-bottom-right-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);
+  border-radius: var(--pg-menu-item-border-radius, 0.25rem);
   color: var(--pg-menu-item-color, #453C4F);
 }
 
 [part=label]:not(:disabled):active,
 [part=label]:not(:disabled):hover {
-  background: var(--pg-menu-item-selected-background, #453C4F);
+  background-color: var(--pg-menu-item-selected-background, #453C4F);
   color: #FFFFFF;
 }
 
 [part=label]:not(:disabled):active {
-  background: var(--pg-menu-item-active-background, #5f516e);
+  background-color: var(--pg-menu-item-active-background, #5f516e);
 }
 
 [part=label]:disabled {
@@ -69,32 +66,30 @@
   right: -1px;
   bottom: -1px;
   left: -1px;
-  border-radius: 0.25rem;
+  border-radius: var(--pg-menu-item-border-radius, 0.25rem);;
   box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
 
 [part=label]:focus-visible:not(:hover)::after {
-  background: var(--pg-focus-background-color, rgb(79, 143, 249, 0.1));
+  background-color: var(--pg-focus-background-color, rgb(79, 143, 249, 0.1));
 }
 
 [part=label].more {
   padding-right: 1.5rem;
 }
 
-[part=label].more::after {
-  position: absolute;
-  translate: -0.25rem 0;
-  right: 0;
-  content: var(--pg-menu-item-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79)' /></svg>"));
-  width: 1.5rem;
-  height: 1.5rem;
+[part=label].more {
+  background-image: var(--pg-menu-item-more, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79)' /></svg>"));
+  background-size: 1.5rem 1.5rem;
+  background-position: 100% 50%;
+  background-repeat: no-repeat;
 }
 
-[part=label].more:active::after,
-[part=label].more:hover::after {
-  content: var(--pg-menu-item-hover-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='white' /></svg>"));
+[part=label].more:active,
+[part=label].more:hover {
+  background-image: var(--pg-menu-item-hover-more, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='white' /></svg>"));
 }
 
-[part=label].more:disabled::after {
-  content: var(--pg-menu-item-disabled-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
+[part=label].more:disabled {
+  background-image: var(--pg-menu-item-disabled-more, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
 }

package/pg/menuItem/menuItem.ts

@@ -56,21 +56,26 @@ export default class PgMenuItem extends HTMLElement {
         if (result === null) {
           this.focus();
         } else if (result) {
+          const { indexes, item } = result;
           this.dispatchEvent(new CustomEvent('select', {
             detail: {
-              item: result
+              item,
+              indexes: [...indexes, this.index],
             }
           }));
         } else {
           this.dispatchEvent(new CustomEvent('close', {
             detail: {
-              depth: -1
+              depth: -1,
             }
           }));
         }
       } else {
         this.dispatchEvent(new CustomEvent('select', {
-          detail: { index: this.index }
+          detail: {
+            indexes: [this.index],
+            item: undefined, // determined by parent
+          }
         }));
       }
     });

package/pg/menuItemIcon/__examples__/basic/basic.html

@@ -1,4 +1,4 @@
-<div class="example">
+<div class="example" part="example">
   <pg-menu-item-icon part="item"></pg-menu-item-icon>
 </div>
 <div>

package/pg/menuItemIcon/__examples__/basic/basic.ts

@@ -19,6 +19,7 @@ export default class XPgMenuItemIconBasic extends HTMLElement {
   @Part() $iconFolder: HTMLButtonElement;
   @Part() $checkedValue: HTMLDivElement;
   @Part() $disabledValue: HTMLDivElement;
+  @Part() $example: HTMLDivElement;
 
   connectedCallback() {
     this.$item.icon = IconFile;
@@ -45,6 +46,12 @@ export default class XPgMenuItemIconBasic extends HTMLElement {
     this.$checkedToggle.addEventListener('change', (e: any) => {
       this.$item.checked = e.target.checked;
       this.$checkedValue.textContent = `${this.$item.checked}`;
+      // simulate check column
+      if (e.target.checked) {
+        this.$example.style.setProperty('--pg-menu-_has-check', 'true');
+      } else {
+        this.$example.style.removeProperty('--pg-menu-_has-check');
+      }
     });
 
     this.$disabledToggle.addEventListener('change', (e: any) => {

package/pg/menuItemIcon/menuItemIcon.css

@@ -6,9 +6,9 @@
   outline: none;
   display: flex;
   align-items: center;
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
   text-align: var(--pg-menu-item-text-align, left);
-  background: var(--pg-menu-item-background, transparent);
+  background-color: var(--pg-menu-item-background, transparent);
   padding: var(--pg-menu-item-padding, 0.25rem 0.5rem 0.25rem 0.5rem);
   border-color: transparent;
   border-width: 0;
@@ -22,13 +22,13 @@
 
 [part=button]:not(:disabled):active,
 [part=button]:not(:disabled):hover {
-  background: var(--pg-menu-item-selected-background, #453C4F);
+  background-color: var(--pg-menu-item-selected-background, #453C4F);
   color: #FFFFFF;
   --pg-icon-color: #FFFFFF;
 }
 
 [part=button]:not(:disabled):active {
-  background: var(--pg-menu-item-active-background, #5f516e);
+  background-color: var(--pg-menu-item-active-background, #5f516e);
 }
 
 [part=button]:disabled {
@@ -83,21 +83,24 @@
   margin-inline-end: 0.5rem;
 }
 
-[part=button].more [part=label]::after {
-  content: var(--pg-menu-item-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79)' /></svg>"));
-  width: 1.5rem;
-  height: 1.5rem;
-  vertical-align: middle;
-  translate: 0.25rem 0;
+[part=button].more {
+  padding-right: 1.5rem;
 }
 
-[part=button].more:active [part=label]::after,
-[part=button].more:hover [part=label]::after {
-  content: var(--pg-menu-item-hover-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='white' /></svg>"));
+[part=button].more {
+  background-image: var(--pg-menu-item-more, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79)' /></svg>"));
+  background-size: 1.5rem 1.5rem;
+  background-position: 100% 50%;
+  background-repeat: no-repeat;
 }
 
-[part=button].more:disabled [part=label]::after {
-  content: var(--pg-menu-item-disabled-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
+[part=button].more:active,
+[part=button].more:hover {
+  background-image: var(--pg-menu-item-hover-more, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='white' /></svg>"));
+}
+
+[part=button].more:disabled {
+  background-image: var(--pg-menu-item-disabled-more, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
 }
 
 [part=label] {

package/pg/menuItemIcon/menuItemIcon.ts

@@ -63,9 +63,11 @@ export default class PgMenuItemIcon extends HTMLElement {
         if (result === null) {
           this.focus();
         } else if (result) {
+          const { indexes, item } = result;
           this.dispatchEvent(new CustomEvent('select', {
             detail: {
-              item: result
+              indexes: [...indexes, this.index],
+              item,
             }
           }));
         } else {
@@ -78,8 +80,8 @@ export default class PgMenuItemIcon extends HTMLElement {
       } else {
         this.dispatchEvent(new CustomEvent('select', {
           detail: {
-            index: this.index,
-            item: this.items[this.index]
+            indexes: [this.index],
+            item: undefined, // determined by parent
           }
         }));
       }
@@ -118,9 +120,11 @@ export default class PgMenuItemIcon extends HTMLElement {
             if (result === null) {
               this.focus();
             } else if (result) {
+              const { indexes, item } = result;
               this.dispatchEvent(new CustomEvent('select', {
                 detail: {
-                  item: result
+                  indexes: [...indexes, this.index],
+                  item,
                 }
               }));
             } else {

package/pg/modification/__examples__/basic/basic.ts

@@ -1,5 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
-import { Modification } from 'pg/shared/models/modification';
+import { Modification } from '../../../shared/models/modification';
 import PgModification from '../../modification';
 
 import template from './basic.html';

package/pg/overlayMenu/overlayMenu.ts

@@ -60,8 +60,12 @@ export default class PgOverlayMenu extends PgOverlay {
   }
 
   #handleSelect(e: any) {
-    e.detail.item.index = e.detail.index;
-    this.close(e.detail.item);
+    // e.detail.item.index = e.detail.index;
+    const { indexes, item } = e.detail;
+    this.close({
+      indexes,
+      item
+    });
     this.source?.focus();
   }
 }

package/pg/overlaySelectMenu/overlaySelectMenu.ts

@@ -33,6 +33,7 @@ export default class PgOverlaySelectMenu extends PgOverlay {
     // Pass throughs are binded once, do not do this in render
     this.$menu.items = this.items;
     this.$menu.addEventListener('select', this.#handleSelect.bind(this));
+    this.$menu.addEventListener('close', this.#handleClose.bind(this));
     this.$overlay.popover = 'auto';
     if (this.source !== null) {
       // @ts-ignore
@@ -93,4 +94,9 @@ export default class PgOverlaySelectMenu extends PgOverlay {
     this.close(e.detail.item);
     this.source?.focus();
   }
+
+  #handleClose() {
+    this.close({ value: null });
+    this.source?.focus();
+  }
 }

package/pg/overlaySubMenu/overlaySubMenu.ts

@@ -96,8 +96,12 @@ export default class PgOverlaySubMenu extends PgOverlay {
   }
 
   #handleSelect(e: any) {
-    e.detail.item.index = e.detail.index;
-    this.close(e.detail.item);
+    const { item, indexes } = e.detail;
+    //e.detail.item.index = e.detail.indexes;
+    this.close({
+      indexes,
+      item,
+    });
     this.source?.focus();
   }
 }

package/pg/scroll/__examples__/basic/basic.ts

@@ -1,5 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
-import PgScroll from 'pg/scroll/scroll';
+import PgScroll from '../../scroll';
 
 import template from './basic.html';
 import style from './basic.css';

package/pg/search/search.css

@@ -1,7 +1,7 @@
 :host {
   display: block;
   align-self: center;
-  font-family: var(--pg-font-family);
+  font-family: var(--pg-font-family, system-ui);
 }
 
 div {

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`.