refactor: standardize event naming and improve type safety across components

This commit introduces several improvements:
- Renamed `valueChange` event to `somethingChanged` for consistency
- Updated event emitter types to be more specific
- Simplified type handling in various components
- Improved type safety in JsonTreeNode initialization
- Removed redundant type checks and simplified logic in some methods

Author: bacali95

projects/ngx-json-table/src/lib/components/tbody/key/key.component.html

@@ -42,7 +42,7 @@
     <span
       class="delete-child"
       *ngIf="settings.options.delete"
-      (click)="item.delete(); valueChange.emit('delete')"
+      (click)="item.delete(); somethingChanged.emit('delete')"
       [innerHTML]="icons.deleteChild | sanitizeHtml"></span>
   </span>
   <span *ngIf="item.edit" class="float-right">

projects/ngx-json-table/src/lib/components/tbody/key/key.component.ts

@@ -8,12 +8,10 @@ import { Icons, Settings } from '../../../lib/settings';
   styleUrls: ['./key.component.scss'],
 })
 export class KeyComponent {
-  @Input() value: unknown;
-  @Output() valueChange = new EventEmitter<unknown>();
-
   @Input() item: JsonTreeNode;
   @Input() settings: Settings;
   @Input() icons: Icons;
+  @Output() somethingChanged = new EventEmitter<'clean' | 'edit' | 'add' | 'delete'>();
 
   constructor() {}
 
@@ -23,17 +21,20 @@ export class KeyComponent {
     this.item.edit && this.item.toggleEdit();
     if (this.item.isNew) {
       this.item.delete();
-      this.valueChange.emit('clean');
+      this.somethingChanged.emit('clean');
     }
   }
 
   @HostListener('keyup.enter')
   onEnterKeyListener() {
-    if (this.item.checkNotUniqueKey()) return;
+    if (this.item.checkNotUniqueKey()) return false;
+
     this.item.toggleEdit();
     this.item.updateState();
     this.item.isNew = false;
-    this.valueChange.emit('edit');
+    this.somethingChanged.emit('edit');
+
+    return true;
   }
 
   addChild(isObject = false, isArray = false) {
@@ -54,15 +55,11 @@ export class KeyComponent {
       }
     }
     this.item.children.splice(0, 0, node);
-    this.valueChange.emit('add');
+    this.somethingChanged.emit('add');
   }
 
   toggleDropdownMenu(dropdown: HTMLSpanElement) {
     const value = dropdown.style.display;
     dropdown.style.display = value === 'none' || value === '' ? 'block' : 'none';
   }
-
-  public onValueChange(value: unknown): void {
-    this.valueChange.emit(value);
-  }
 }

projects/ngx-json-table/src/lib/components/tbody/tbody.component.html

@@ -6,7 +6,7 @@
     [item]="item"
     [settings]="settings"
     [icons]="icons"
-    (valueChange)="somethingChanged($event)"></tr>
+    (somethingChanged)="somethingChanged($event)"></tr>
 </ng-container>
 <tr *ngIf="!table || table.length === 0">
   <td colspan="2">No data Found</td>

projects/ngx-json-table/src/lib/components/tbody/tbody.component.ts

@@ -64,7 +64,7 @@ export class TbodyComponent implements OnChanges {
     }
   }
 
-  sortJsonTree(root: JsonTreeNode, sortDirection: SortType = 'asc') {
+  sortJsonTree(root: JsonTreeNode, sortDirection: SortType) {
     root.children.sort((a, b) => a.key.localeCompare(b.key));
     sortDirection === 'desc' && root.children.reverse();
     for (const node of root.children) {
@@ -81,29 +81,30 @@ export class TbodyComponent implements OnChanges {
 
   jsonTreeToObject(root: JsonTreeNode): JsonValue {
     let result: JsonValue;
-    if (root.isComplex) {
-      result = root.isArray ? [] : {};
-      for (const node of root.children) {
-        result[node.key] = this.jsonTreeToObject(node);
-      }
-    } else {
-      if (typeof root.value === 'string') {
-        result = root.value;
-      } else {
-        const value = `${root.value}`;
-        if (`${parseFloat(value)}` === value) {
-          result = parseFloat(value);
-        } else if (['true', 'false'].includes(value.toLowerCase())) {
-          result = value === 'true';
-        } else {
-          result = value;
+
+    switch (root.type) {
+      case 'object':
+        result = root.isArray ? [] : {};
+        for (const node of root.children) {
+          result[node.key] = this.jsonTreeToObject(node);
         }
-      }
+        break;
+      case 'number':
+      case 'bigint':
+        result = parseFloat(`${root.value}`);
+        break;
+      case 'boolean':
+        result = `${root.value}` === 'true';
+        break;
+      default:
+        result = root.value;
+        break;
     }
+
     return result;
   }
 
-  toggleSortDirection(sortDirection) {
+  toggleSortDirection(sortDirection: SortType) {
     this.sortJsonTree(this.jsonTree, sortDirection);
     this.somethingChanged('sort');
   }

projects/ngx-json-table/src/lib/components/tbody/trow/trow.component.html

@@ -4,10 +4,10 @@
   [item]="item"
   [settings]="settings"
   [icons]="icons"
-  (valueChange)="valueChange.emit($event)"></td>
+  (somethingChanged)="somethingChanged.emit($event)"></td>
 <td
   ngx-json-table-value
   [style]="{ width: settings.value.width }"
   [item]="item"
   [settings]="settings"
-  (valueChange)="valueChange.emit($event)"></td>
+  (somethingChanged)="somethingChanged.emit($event)"></td>

projects/ngx-json-table/src/lib/components/tbody/trow/trow.component.ts

@@ -1,6 +1,5 @@
 import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
 import { JsonTreeNode } from '../../../lib/json-tree-node';
-import { JsonTreeEvent } from '../../../lib/types';
 import { Icons, Settings } from '../../../lib/settings';
 
 @Component({
@@ -12,7 +11,7 @@ export class TrowComponent {
   @Input() item: JsonTreeNode;
   @Input() settings: Settings;
   @Input() icons: Icons;
-  @Output() valueChange = new EventEmitter<JsonTreeEvent>();
+  @Output() somethingChanged = new EventEmitter<'clean' | 'edit' | 'add' | 'delete'>();
 
   constructor() {}
 

projects/ngx-json-table/src/lib/components/tbody/value/value.component.ts

@@ -1,6 +1,5 @@
 import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
 import { JsonTreeNode } from '../../../lib/json-tree-node';
-import { JsonTreeEvent } from '../../../lib/types';
 import { Settings } from '../../../lib/settings';
 
 @Component({
@@ -11,7 +10,7 @@ import { Settings } from '../../../lib/settings';
 export class ValueComponent {
   @Input() item: JsonTreeNode;
   @Input() settings: Settings;
-  @Output() valueChange = new EventEmitter<JsonTreeEvent>();
+  @Output() somethingChanged = new EventEmitter<'clean' | 'edit' | 'add' | 'delete'>();
 
   constructor() {}
 
@@ -21,7 +20,7 @@ export class ValueComponent {
     this.item.edit && this.item.toggleEdit();
     if (this.item.isNew) {
       this.item.delete();
-      this.valueChange.emit('clean');
+      this.somethingChanged.emit('clean');
     }
   }
 
@@ -30,6 +29,6 @@ export class ValueComponent {
     if (this.item.checkNotUniqueKey()) return;
     this.item.toggleEdit();
     this.item.updateState();
-    this.valueChange.emit('edit');
+    this.somethingChanged.emit('edit');
   }
 }

projects/ngx-json-table/src/lib/components/thead/thead.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Icons, Settings, SortType } from '../../lib/settings';
 import { JsonTreeNode } from '../../lib/json-tree-node';
-import { JsonTreeEvent, JsonValue } from '../../lib/types';
+import { JsonValue } from '../../lib/types';
 
 @Component({
   selector: '[ngx-json-table-thead]',
@@ -12,7 +12,7 @@ export class TheadComponent {
   @Input() root: JsonTreeNode;
   @Input() settings: Settings;
   @Input() icons: Icons;
-  @Output() valueChange = new EventEmitter<JsonTreeEvent>();
+  @Output() somethingChanged = new EventEmitter<'clean' | 'edit' | 'add' | 'delete'>();
   @Output() fileLoaded = new EventEmitter<JsonValue>();
   @Output() sortDirectionChange = new EventEmitter<SortType>();
 
@@ -34,7 +34,7 @@ export class TheadComponent {
     node.edit = true;
     node.isNew = true;
     this.root.children.splice(0, 0, node);
-    this.valueChange.emit('add');
+    this.somethingChanged.emit('add');
   }
 
   loadFile(event: InputEvent) {

projects/ngx-json-table/src/lib/lib/json-tree-node.ts

@@ -19,7 +19,7 @@ export class JsonTreeNode {
   level: number;
   type: JsonValueType;
   isArray: boolean;
-  parent: JsonTreeNode | null;
+  parent?: JsonTreeNode | null;
   children: JsonTreeNode[];
   showChildren: boolean;
   edit = false;
@@ -31,21 +31,21 @@ export class JsonTreeNode {
     key: string,
     value: JsonValue,
     type: JsonValueType,
-    level?: number,
-    isArray?: boolean,
-    parent?: JsonTreeNode | null,
-    children?: JsonTreeNode[],
-    showChildren?: boolean
+    level: number,
+    isArray: boolean,
+    parent: JsonTreeNode | null,
+    children: JsonTreeNode[] = [],
+    showChildren: boolean = false
   ) {
-    this.id = `${Math.random().toString(36).substr(2, 9)}`;
+    this.id = `${Math.random().toString(36).substring(2, 9)}`;
     this.key = this.prevKey = key;
     this.value = this.prevValue = value;
     this.type = type;
-    this.level = level ?? 0;
-    this.isArray = isArray ?? false;
-    this.parent = parent ?? null;
-    this.children = children ?? [];
-    this.showChildren = showChildren ?? false;
+    this.level = level;
+    this.isArray = isArray;
+    this.parent = parent;
+    this.children = children;
+    this.showChildren = showChildren;
   }
 
   toggleShowChildren(allLevels = false) {
@@ -62,13 +62,13 @@ export class JsonTreeNode {
   }
 
   checkNotUniqueKey(): boolean {
-    return (
-      (this.key === '' ||
-        (this.parent &&
-          this.parent.children.filter(c => c.id !== this.id && c.key === this.key).length > 0)) &&
-      (this.error = true) &&
-      setTimeout(() => (this.error = false), 2000) !== null
-    );
+    if (!this.key || this.parent?.children.some(c => c.id !== this.id && c.key === this.key)) {
+      this.error = true;
+      setTimeout(() => (this.error = false), 2000);
+      return true;
+    }
+
+    return false;
   }
 
   toggleEdit() {

projects/ngx-json-table/src/lib/ngx-json-table.component.html

@@ -3,7 +3,7 @@
   #thead
   [settings]="defaultSettings"
   [icons]="defaultSettings.icons"
-  (valueChange)="tbody.somethingChanged($event)"
+  (somethingChanged)="tbody.somethingChanged($event)"
   (fileLoaded)="data = $event"
   (sortDirectionChange)="tbody.toggleSortDirection($event)"></thead>
 <tbody