Vue Component Diagnostics: A Debugging Toolkit

This challenge focuses on building a diagnostic tool within a Vue component to aid in debugging and understanding its state. You'll create a component that displays key data points and allows for controlled manipulation of props and data, simulating various scenarios to test and debug other components that rely on it. This is a valuable skill for complex Vue applications where isolating and understanding component behavior is crucial.

Problem Description

You are tasked with creating a DiagnosticComponent in Vue.js using TypeScript. This component should:

1. Accept Props: The component should accept a set of props, which will represent the data you want to inspect and manipulate. These props will be defined as an interface called DiagnosticProps. The props should include:

   • data: An object representing the data to be inspected. The type of this object is Record<string, any>.
   • debugMode: A boolean indicating whether the diagnostic tools are enabled. Defaults to false.
   • onDataChange: A function that accepts the updated data object and allows the parent component to react to changes made within the diagnostic component.

2. Display Data: When debugMode is true, the component should display the contents of the data object in a user-friendly format (e.g., a table or list). Each key-value pair should be clearly visible.

3. Editable Fields: When debugMode is true, each value in the displayed data should be editable. Changes made in the input fields should update the data object within the component.

4. Data Change Callback: When a value is changed in an editable field, the onDataChange function (passed as a prop) should be called with the updated data object.

5. Toggle Debug Mode: Provide a button or switch to toggle the debugMode prop. When toggled on, the diagnostic tools should appear; when toggled off, they should disappear.

6. Clear Display: The component should handle cases where data is null or undefined gracefully, displaying an appropriate message instead of throwing an error.

Examples

Example 1:

Input:
DiagnosticProps = {
  data: { name: "Alice", age: 30, city: "New York" },
  debugMode: false,
  onDataChange: (newData) => { console.log("Data changed:", newData); }
}
Output: (When debugMode is toggled to true)
A UI displaying:
- Name: Alice (editable input field)
- Age: 30 (editable input field)
- City: New York (editable input field)
Explanation: The component renders editable fields for each key-value pair in the data object.

Example 2:

Input:
DiagnosticProps = {
  data: null,
  debugMode: true,
  onDataChange: (newData) => { console.log("Data changed:", newData); }
}
Output: (When debugMode is true)
A message: "No data to display."
Explanation: The component handles the case where data is null or undefined.

Example 3:

Input:
DiagnosticProps = {
  data: { isValid: true, message: "Success" },
  debugMode: true,
  onDataChange: (newData) => { console.log("Data changed:", newData); }
}
Output: (When debugMode is toggled to true and isValid is changed to false)
The `onDataChange` function is called with `{ isValid: false, message: "Success" }`.
Explanation:  The parent component receives the updated data object via the callback.

Constraints

• The component must be written in TypeScript.
• The UI should be reasonably responsive and user-friendly.
• The onDataChange callback should be called synchronously after each change.
• The component should be reusable and adaptable to different data structures.
• The component should not introduce any unnecessary dependencies.
• The component should be able to handle data objects with a maximum of 10 key-value pairs. (This is a soft constraint, but consider performance implications for larger objects).

Notes

• Consider using Vue's reactivity system to efficiently update the UI when the data object changes.
• You can use any Vue UI library or styling approach you prefer (e.g., plain CSS, Bootstrap, Vuetify).
• Focus on creating a clear and maintainable component structure.
• Think about how to handle different data types (strings, numbers, booleans) in the editable fields. Input types should be appropriate for the data type.
• Error handling is not explicitly required, but consider how the component might behave with unexpected input.