-import {onChildEvent} from "../services/dom";
-import {uniqueId} from "../services/util";
+import {onChildEvent} from '../services/dom.ts';
+import {uniqueId} from '../services/util.ts';
+import {Component} from './component';
/**
* AddRemoveRows
* Allows easy row add/remove controls onto a table.
* Needs a model row to use when adding a new row.
- * @extends {Component}
*/
-class AddRemoveRows {
+export class AddRemoveRows extends Component {
+
setup() {
this.modelRow = this.$refs.model;
this.addButton = this.$refs.add;
setupListeners() {
this.addButton.addEventListener('click', this.add.bind(this));
- onChildEvent(this.$el, this.removeSelector, 'click', (e) => {
+ onChildEvent(this.$el, this.removeSelector, 'click', e => {
const row = e.target.closest(this.rowSelector);
row.remove();
});
clone.classList.remove('hidden');
this.setClonedInputNames(clone);
this.modelRow.parentNode.insertBefore(clone, this.modelRow);
- window.components.init(clone);
+ window.$components.init(clone);
}
/**
*/
setClonedInputNames(clone) {
const rowId = uniqueId();
- const randRowIdElems = clone.querySelectorAll(`[name*="randrowid"]`);
+ const randRowIdElems = clone.querySelectorAll('[name*="randrowid"]');
for (const elem of randRowIdElems) {
elem.name = elem.name.split('randrowid').join(rowId);
}
}
-}
-export default AddRemoveRows;
\ No newline at end of file
+}