devex: Refactor syntax-input and link-selector-table into form controls (#2588)

Refactors `<btrix-syntax-input>` and `<btrix-link-selector-table>` to be
form-associated controls.

Author: SuaYoo

frontend/src/components/ui/code.ts

@@ -8,7 +8,7 @@ import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
 import { TailwindElement } from "@/classes/TailwindElement";
 import { tw } from "@/utils/tailwind";
 
-enum Language {
+export enum Language {
   Javascript = "javascript",
   XML = "xml",
   CSS = "css",

frontend/src/components/ui/config-details.ts

@@ -503,7 +503,10 @@ export class ConfigDetails extends BtrixElement {
       selectors.length
         ? html`
             <div class="mb-2">
-              <btrix-link-selector-table .selectors=${selectors}>
+              <btrix-link-selector-table
+                .selectors=${selectors}
+                aria-readonly="true"
+              >
               </btrix-link-selector-table>
             </div>
           `

frontend/src/components/ui/data-grid/controllers/rows.ts

@@ -65,12 +65,15 @@ export class DataGridRowsController implements ReactiveController {
     if (!this.#prevItems || items !== this.#prevItems) {
       this.setRowsFromItems(items);
 
-      // this.#host.requestUpdate();
-
       this.#prevItems = items;
     }
   }
 
+  public updateItem<T extends GridItem = GridItem>(id: GridRowId, item: T) {
+    this.rows.set(id, item);
+    this.#host.requestUpdate();
+  }
+
   public addRows<T extends GridItem = GridItem>(
     defaultItem: T | EmptyObject = {},
     count = 1,

frontend/src/components/ui/data-grid/data-grid-cell.ts

@@ -6,7 +6,12 @@ import { ifDefined } from "lit/directives/if-defined.js";
 
 import { TableCell } from "../table/table-cell";
 
-import type { GridColumn, GridColumnSelectType, GridItem } from "./types";
+import type {
+  GridColumn,
+  GridColumnSelectType,
+  GridItem,
+  GridItemValue,
+} from "./types";
 import { GridColumnType } from "./types";
 
 import { DataGridFocusController } from "@/components/ui/data-grid/controllers/focus";
@@ -44,6 +49,9 @@ export class DataGridCell extends TableCell {
   @property({ type: Object })
   item?: GridItem;
 
+  @property({ type: String })
+  value?: GridItemValue;
+
   @property({ type: Boolean })
   editable = false;
 
@@ -104,7 +112,7 @@ export class DataGridCell extends TableCell {
     if (!this.column || !this.item) return html`<slot></slot>`;
 
     if (this.editable) {
-      return this.renderEditCell({ item: this.item });
+      return this.renderEditCell({ item: this.item, value: this.value });
     }
 
     return this.renderCell({ item: this.item });
@@ -114,12 +122,18 @@ export class DataGridCell extends TableCell {
     return html`${(this.column && item[this.column.field]) ?? ""}`;
   };
 
-  renderEditCell = ({ item }: { item: GridItem }) => {
+  renderEditCell = ({
+    item,
+    value: cellValue,
+  }: {
+    item: GridItem;
+    value?: GridItemValue;
+  }) => {
     const col = this.column;
 
     if (!col) return html``;
 
-    const value = item[col.field] ?? "";
+    const value = cellValue ?? item[col.field] ?? "";
 
     switch (col.inputType) {
       case GridColumnType.Select: {

frontend/src/components/ui/data-grid/data-grid-row.ts

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { html, type PropertyValues } from "lit";
 import { customElement, property, queryAll, state } from "lit/decorators.js";
 import { directive } from "lit/directive.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import isEqual from "lodash/fp/isEqual";
 
 import { CellDirective } from "./cellDirective";
@@ -15,6 +16,7 @@ import type { GridColumn, GridItem, GridRowId } from "./types";
 
 import { DataGridFocusController } from "@/components/ui/data-grid/controllers/focus";
 import { TableRow } from "@/components/ui/table/table-row";
+import { FormControl } from "@/mixins/FormControl";
 import { tw } from "@/utils/tailwind";
 
 export type RowRemoveEventDetail = {
@@ -31,12 +33,7 @@ const editableCellStyle = tw`p-0 focus-visible:bg-slate-50 `;
  */
 @customElement("btrix-data-grid-row")
 @localized()
-export class DataGridRow extends TableRow {
-  // TODO Abstract to mixin or decorator
-  // https://github.com/webrecorder/browsertrix/issues/2577
-  static formAssociated = true;
-  readonly #internals: ElementInternals;
-
+export class DataGridRow extends FormControl(TableRow) {
   /**
    * Set of columns.
    */
@@ -73,12 +70,6 @@ export class DataGridRow extends TableRow {
   @property({ type: String, reflect: true })
   name?: string;
 
-  /**
-   * Make row focusable on validation.
-   */
-  @property({ type: Number, reflect: true })
-  tabindex = 0;
-
   @state()
   private cellValues: Partial<GridItem> = {};
 
@@ -89,44 +80,11 @@ export class DataGridRow extends TableRow {
     InputElement["validationMessage"]
   >();
 
-  public formAssociatedCallback() {
-    console.debug("form associated");
-  }
-
   public formResetCallback() {
     this.setValue(this.item || {});
     this.commitValue();
   }
 
-  public formDisabledCallback(disabled: boolean) {
-    console.debug("form disabled:", disabled);
-  }
-
-  public formStateRestoreCallback(state: string | FormData, reason: string) {
-    console.debug("formStateRestoreCallback:", state, reason);
-  }
-
-  public checkValidity(): boolean {
-    return this.#internals.checkValidity();
-  }
-
-  public reportValidity(): void {
-    this.#internals.reportValidity();
-  }
-
-  public get validity(): ValidityState {
-    return this.#internals.validity;
-  }
-
-  public get validationMessage(): string {
-    return this.#internals.validationMessage;
-  }
-
-  constructor() {
-    super();
-    this.#internals = this.attachInternals();
-  }
-
   protected createRenderRoot() {
     const root = super.createRenderRoot();
 
@@ -162,7 +120,7 @@ export class DataGridRow extends TableRow {
       this.cellValues[field] = cellValues[field];
     });
 
-    this.#internals.setFormValue(JSON.stringify(this.cellValues));
+    this.setFormValue(JSON.stringify(this.cellValues));
   }
 
   private commitValue() {
@@ -228,6 +186,7 @@ export class DataGridRow extends TableRow {
           )}
           .column=${col}
           .item=${this.item}
+          value=${ifDefined(this.cellValues[col.field] ?? undefined)}
           ?editable=${editable}
           ${cell(col)}
           @keydown=${this.onKeydown}
@@ -337,7 +296,7 @@ export class DataGridRow extends TableRow {
       this.#invalidInputsMap.delete(field);
     } else {
       this.#invalidInputsMap.set(field, validationMessage);
-      this.#internals.setValidity(validity, validationMessage, tableCell);
+      this.setValidity(validity, validationMessage, tableCell);
     }
 
     this.setValue({
@@ -357,7 +316,7 @@ export class DataGridRow extends TableRow {
       this.#invalidInputsMap.delete(field);
     } else {
       this.#invalidInputsMap.set(field, validationMessage);
-      this.#internals.setValidity(validity, validationMessage, tableCell);
+      this.setValidity(validity, validationMessage, tableCell);
     }
 
     this.commitValue();
@@ -371,13 +330,13 @@ export class DataGridRow extends TableRow {
       );
 
       if (firstInvalid?.validity && firstInvalid.validationMessage) {
-        this.#internals.setValidity(
+        this.setValidity(
           firstInvalid.validity,
           firstInvalid.validationMessage,
           firstInvalid,
         );
       } else {
-        this.#internals.setValidity({});
+        this.setValidity({});
       }
     }
   };

frontend/src/components/ui/data-grid/data-grid.ts

@@ -127,12 +127,6 @@ export class DataGrid extends TailwindElement {
   @property({ attribute: false })
   rowsController = new DataGridRowsController(this);
 
-  /**
-   * Make grid focusable on validation.
-   */
-  @property({ type: Number, reflect: true })
-  tabindex = 0;
-
   render() {
     if (!this.columns?.length) return;
 

frontend/src/components/ui/data-grid/renderRows.ts

@@ -5,11 +5,14 @@ import type { GridItem, GridRowId, GridRows } from "./types";
 
 export function renderRows<T = GridItem>(
   rows: GridRows<GridItem>,
-  renderRow: ({ id, item }: { id: GridRowId; item: T }) => TemplateResult,
+  renderRow: (
+    { id, item }: { id: GridRowId; item: T },
+    index: number,
+  ) => TemplateResult,
 ) {
   return repeat(
     rows,
     ([id]) => id,
-    ([id, item]) => renderRow({ id, item: item as T }),
+    ([id, item], i) => renderRow({ id, item: item as T }, i),
   );
 }

frontend/src/components/ui/data-grid/types.ts

@@ -6,6 +6,9 @@ export type GridItem<T extends PropertyKey = string> = Record<
   string | number | null | undefined
 >;
 
+export type GridItemValue<T extends PropertyKey = string> =
+  GridItem<T>[keyof GridItem<T>];
+
 export enum GridColumnType {
   Text = "text",
   Number = "number",
@@ -30,8 +33,11 @@ export type GridColumn<T = string> = {
   required?: boolean;
   inputPlaceholder?: string;
   width?: string;
-  renderEditCell?: ({ item }: { item: GridItem }) => TemplateResult<1>;
-  renderCell?: ({ item }: { item: GridItem }) => TemplateResult<1>;
+  renderEditCell?: (props: {
+    item: GridItem;
+    value?: GridItem[keyof GridItem];
+  }) => TemplateResult<1>;
+  renderCell?: (props: { item: GridItem }) => TemplateResult<1>;
 } & (
   | {
       inputType?: GridColumnType;

frontend/src/components/ui/data-table.ts

@@ -6,6 +6,8 @@ import { TailwindElement } from "@/classes/TailwindElement";
 type CellContent = string | TemplateResult<1>;
 
 /**
+ * @deprecated Use `<btrix-data-grid>` instead.
+ *
  * Styled tables for handling lists of tabular data.
  * Data tables are less flexible than `<btrix-table>` but require less configuration.
  */