onechiporenko · onechiporenko · Oct 15, 2024 · Oct 15, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -7,7 +7,7 @@ module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 'latest',
     sourceType: 'module',
     requireConfigFile: false,
     babelOptions: {

diff --git a/.template-lintrc.js b/.template-lintrc.js
@@ -6,4 +6,12 @@ module.exports = {
     'table-groups': false,
     'require-presentational-children': false,
   },
+  overrides: [
+    {
+      files: 'tests/dummy/app/**/*.hbs',
+      rules: {
+        'no-builtin-form-components': false,
+      },
+    },
+  ],
 };
diff --git a/addon/components/models-table-server-paginated.ts b/addon/components/models-table-server-paginated.ts
@@ -1,13 +1,13 @@
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { isBlank, isNone } from '@ember/utils';
-import { debounce } from '@ember/runloop';
 import ModelsTable from './models-table';
 import ModelsTableColumn from '../utils/emt/emt-column';
 import { SortConstants } from '../constants/sort-constants';
 import { type ModelsTableServerPaginatedArgs } from '../interfaces/components/models-table-server-paginated-args.interface';
 import { type FilterQueryParameters } from '../interfaces/filter-query-parameters.interface';
 import { type DataRequestQuery } from '../interfaces/data-request-query.interface';
+import { debounceTask } from 'ember-lifeline';
 
 /**
  * Table-component with pagination, sorting and filtering.
@@ -275,7 +275,7 @@ export default class ModelsTableServerPaginated extends ModelsTable<ModelsTableS
   }
 
   protected _loadDataOnce(): void {
-    debounce(this, this._loadData, this.debounceDataLoadTime);
+    debounceTask(this, '_loadData', this.debounceDataLoadTime);
   }
 
   constructor(owner: unknown, args: ModelsTableServerPaginatedArgs) {

diff --git a/addon/components/models-table.ts b/addon/components/models-table.ts
@@ -1,6 +1,5 @@
 import type { ComponentLike } from '@glint/template';
 import { compare, isBlank, isNone, typeOf } from '@ember/utils';
-import { next, once, run } from '@ember/runloop';
 import Component from '@glimmer/component';
 import { assert, warn } from '@ember/debug';
 import { action, get, set } from '@ember/object';
@@ -36,6 +35,7 @@ import { type ColumnCustomSortFn } from '../types/column-custom-sort-fn.type';
 import { splitPropSortDirection } from '../utils/emt/split-prop-sort-direction.function';
 import { defaultFilter } from '../utils/default-filter.function';
 import betterCompare from '../utils/emt/better-compare.function';
+import { runTask, scheduleTask } from 'ember-lifeline';
 
 const {
   keys,
@@ -931,7 +931,7 @@ export default class ModelsTableComponent<T> extends Component<
         false,
         { id: '#emt-multipleSelected_autoset' },
       );
-      next(() => (this.multipleSelect = true));
+      runTask(this, () => (this.multipleSelect = true), 1);
     }
   }
 
@@ -1014,21 +1014,25 @@ export default class ModelsTableComponent<T> extends Component<
       .filter((col) => isSortedByDefault(col));
     filteredOrderedColumns.forEach((column) => {
       this.sort(column);
-      next(() => {
-        if (this.multipleColumnsSorting) {
-          this._multiColumnsSorting(
-            column,
-            column.sortField,
-            column.sortDirection,
-          );
-        } else {
-          this._singleColumnSorting(
-            column,
-            column.sortField,
-            column.sortDirection,
-          );
-        }
-      });
+      runTask(
+        this,
+        () => {
+          if (this.multipleColumnsSorting) {
+            this._multiColumnsSorting(
+              column,
+              column.sortField,
+              column.sortDirection,
+            );
+          } else {
+            this._singleColumnSorting(
+              column,
+              column.sortField,
+              column.sortDirection,
+            );
+          }
+        },
+        1,
+      );
     });
     this.updateHeaderCellsColspanOnce();
   }
@@ -1178,7 +1182,7 @@ export default class ModelsTableComponent<T> extends Component<
    * Update colspans for table header cells
    */
   protected updateHeaderCellsColspan(): void {
-    once(this, this.updateHeaderCellsColspanOnce);
+    scheduleTask(this, 'actions', this.updateHeaderCellsColspanOnce);
   }
 
   protected updateHeaderCellsColspanOnce(): void {
@@ -1294,15 +1298,15 @@ export default class ModelsTableComponent<T> extends Component<
     const hideOtherColumns = isNone(columnSetToToggle.hideOtherColumns)
       ? !columnSetToToggle.toggleSet
       : columnSetToToggle.hideOtherColumns;
-    let showColumns: string[] = [];
-    // If showColumns is a function, call it
-    if (typeof columnSetToToggle.showColumns === 'function') {
-      run(this, columnSetToToggle.showColumns, this.processedColumns);
+    const showColumnsClb = columnSetToToggle.showColumns;
+    if (typeof showColumnsClb === 'function') {
+      runTask(this, () => showColumnsClb(this.processedColumns));
       this.updateHeaderCellsColspan();
       return;
-    } else {
-      showColumns = columnSetToToggle.showColumns || [];
     }
+    const showColumns = Array.isArray(columnSetToToggle.showColumns)
+      ? columnSetToToggle.showColumns
+      : [];
 
     const setColumns: ModelsTableColumn[] = [];
     const otherColumns: ModelsTableColumn[] = [];
@@ -1402,15 +1406,19 @@ export default class ModelsTableComponent<T> extends Component<
       this.sortByGroupedFieldDirection = newSorting;
       return;
     }
-    next(() => {
-      if (this.multipleColumnsSorting) {
-        this._multiColumnsSorting(column, column.sortField, newSorting);
-      } else {
-        this._singleColumnSorting(column, column.sortField, newSorting);
-      }
-      this.collapseRowOnNavigate();
-      this.forceToFirstPage();
-    });
+    runTask(
+      this,
+      () => {
+        if (this.multipleColumnsSorting) {
+          this._multiColumnsSorting(column, column.sortField, newSorting);
+        } else {
+          this._singleColumnSorting(column, column.sortField, newSorting);
+        }
+        this.collapseRowOnNavigate();
+        this.forceToFirstPage();
+      },
+      1,
+    );
   }
 
   /**

diff --git a/addon/components/models-table/themes/bootstrap4/global-filter.hbs b/addon/components/models-table/themes/bootstrap4/global-filter.hbs
@@ -5,10 +5,10 @@
     <div class="globalSearch {{@themeInstance.form}}">
       <div class={{@themeInstance.inputGroup}}>
         <label for={{this.inputId}} class="input-group-addon">{{@themeInstance.searchLabelMsg}}</label>
-        <Input
+        <input
           id={{this.inputId}}
-          @type="text"
-          @value={{@value}}
+          type="text"
+          value={{@value}}
           class="filterString {{@themeInstance.input}}"
           {{on "enter" this.noop}}
           {{on "input" this.updateGlobalFilterString}}

diff --git a/addon/components/models-table/themes/bootstrap4/row-filtering-cell.hbs b/addon/components/models-table/themes/bootstrap4/row-filtering-cell.hbs
@@ -50,10 +50,10 @@
               />
             {{/let}}
           {{else}}
-            <Input
+            <input
               id={{this.inputId}}
-              @type="text"
-              @value={{@column.filterString}}
+              type="text"
+              value={{@column.filterString}}
               class={{@themeInstance.input}}
               {{on "enter" this.noop}}
               {{on "input" this.updateColumnFilter}}

diff --git a/addon/components/models-table/themes/default/cell-content-edit.hbs b/addon/components/models-table/themes/default/cell-content-edit.hbs
@@ -1,8 +1,10 @@
 {{! @glint-nocheck: this is fine }}
 <label ...attributes>
-  <Input
-    @type="text"
+  <input
+    type="text"
     class={{@themeInstance.input}}
-    @value={{get @record @column.propertyName}}/>
+    value={{get @record @column.propertyName}}
+    {{on "input" this.updateProperty}}
+  />
 </label>
 {{yield}}
diff --git a/addon/components/models-table/themes/default/cell-content-edit.ts b/addon/components/models-table/themes/default/cell-content-edit.ts
@@ -1,9 +1,18 @@
 import Component from '@glimmer/component';
 import { type CellContentEditSignature } from '../../../../interfaces/components/models-table/themes/default/cell-content-edit-signature.interface';
+import { action, set } from '@ember/object';
 
 /**
  * Component for cells in the edit-mode.
  *
  * Properties and event-handlers from [models-table/cell](Components.ModelsTableCell.html) are bound here
  */
-export default class CellContentEdit extends Component<CellContentEditSignature> {}
+export default class CellContentEdit extends Component<CellContentEditSignature> {
+  @action
+  updateProperty(value: string): void {
+    if (!this.args.column.propertyName) {
+      return;
+    }
+    set(this.args.record, this.args.column.propertyName, value);
+  }
+}
diff --git a/addon/components/models-table/themes/default/global-filter.hbs b/addon/components/models-table/themes/default/global-filter.hbs
@@ -4,10 +4,10 @@
   {{else}}
     <div class="globalSearch {{@themeInstance.form}}">
       <div class={{@themeInstance.formElementWrapper}}>
-        <label for={{this.inputId}}>{{@themeInstance.searchLabelMsg}}</label> <Input
+        <label for={{this.inputId}}>{{@themeInstance.searchLabelMsg}}</label> <input
           id={{this.inputId}}
-          @type="text"
-          @value={{@value}}
+          type="text"
+          value={{@value}}
           class="filterString {{@themeInstance.input}}"
           {{on "enter" this.noop}}
           {{on "input" this.updateGlobalFilterString}}

diff --git a/addon/components/models-table/themes/default/row-filtering-cell.hbs b/addon/components/models-table/themes/default/row-filtering-cell.hbs
@@ -52,10 +52,10 @@
               />
             {{/let}}
           {{else}}
-            <Input
+            <input
               id={{this.inputId}}
-              @type="text"
-              @value={{@column.filterString}}
+              type="text"
+              value={{@column.filterString}}
               class={{@themeInstance.input}}
               {{on "enter" this.noop}}
               {{on "input" this.updateColumnFilter}}

diff --git a/addon/components/models-table/themes/ember-bootstrap-v4/global-filter.hbs b/addon/components/models-table/themes/ember-bootstrap-v4/global-filter.hbs
@@ -8,10 +8,10 @@
           <label for={{this.inputId}} class="input-group-text">{{@themeInstance.searchLabelMsg}}</label>
         </div>
       {{/if}}
-      <Input
+      <input
         id={{this.inputId}}
-        @type="text"
-        @value={{@value}}
+        type="text"
+        value={{@value}}
         class="filterString {{@themeInstance.input}}"
         {{on "enter" this.noop}}
         {{on "input" this.updateGlobalFilterString}}

diff --git a/addon/components/models-table/themes/ember-bootstrap-v4/row-filtering-cell.hbs b/addon/components/models-table/themes/ember-bootstrap-v4/row-filtering-cell.hbs
@@ -50,10 +50,10 @@
               />
             {{/let}}
           {{else}}
-            <Input
+            <input
               id={{this.inputId}}
-              @type="text"
-              @value={{@column.filterString}}
+              type="text"
+              value={{@column.filterString}}
               class={{@themeInstance.input}}
               {{on "enter" this.noop}}
               {{on "input" this.updateColumnFilter}}

diff --git a/addon/components/models-table/themes/ember-bootstrap-v5/global-filter.hbs b/addon/components/models-table/themes/ember-bootstrap-v5/global-filter.hbs
@@ -6,10 +6,10 @@
       {{#if @themeInstance.searchLabelMsg}}
           <label for={{this.inputId}} class="input-group-text">{{@themeInstance.searchLabelMsg}}</label>
       {{/if}}
-      <Input
+      <input
         id={{this.inputId}}
-        @type="text"
-        @value={{@value}}
+        type="text"
+        value={{@value}}
         class="filterString {{@themeInstance.input}}"
         {{on "enter" this.noop}}
         {{on "input" this.updateGlobalFilterString}}

diff --git a/addon/components/models-table/themes/ember-bootstrap-v5/row-filtering-cell.hbs b/addon/components/models-table/themes/ember-bootstrap-v5/row-filtering-cell.hbs
@@ -50,10 +50,10 @@
               />
             {{/let}}
           {{else}}
-            <Input
+            <input
               id={{this.inputId}}
-              @type="text"
-              @value={{@column.filterString}}
+              type="text"
+              value={{@column.filterString}}
               class={{@themeInstance.input}}
               {{on "enter" this.noop}}
               {{on "input" this.updateColumnFilter}}

diff --git a/addon/components/models-table/themes/plain-html/global-filter.hbs b/addon/components/models-table/themes/plain-html/global-filter.hbs
@@ -6,10 +6,10 @@
       {{#if @themeInstance.searchLabelMsg}}
         <label for={{this.inputId}}>{{@themeInstance.searchLabelMsg}}</label>
       {{/if}}
-      <Input
+      <input
         id={{this.inputId}}
         class="filterString {{@themeInstance.input}}"
-        @value={{@value}}
+        value={{@value}}
         placeholder={{@themeInstance.searchPlaceholderMsg}}
         {{on "input" this.updateGlobalFilterString}}/>
       <button

diff --git a/addon/components/models-table/themes/plain-html/row-filtering-cell.hbs b/addon/components/models-table/themes/plain-html/row-filtering-cell.hbs
@@ -50,9 +50,9 @@
               />
             {{/let}}
           {{else}}
-            <Input
+            <input
               id={{this.inputId}}
-              @value={{@column.filterString}}
+              value={{@column.filterString}}
               placeholder={{@column.filterPlaceholder}}
               {{on "input" this.updateColumnFilter}}
               {{on "click" this.noop}}/>

diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -1,4 +1,5 @@
 'use strict';
+
 const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = async function (defaults) {