Update version to 1.0.4, enhance README with new UI visibility controls, and improve JSON viewer component with key editing and customizable UI options.

Author: eeprojectsee

README.md

@@ -9,15 +9,17 @@ A modern, sleek Vue 3 component for viewing, editing, and manipulating JSON data
 - 🌳 **Tree Mode**: Hierarchical display with expandable/collapsible nodes
 - 📝 **Text Mode**: Raw JSON text display with syntax highlighting
 - ✏️ **Inline Editing**: Edit values directly in the tree view
+- 🔑 **Key Editing**: Rename object keys by double-clicking on them
 - ➕ **Add/Remove Nodes**: Add new key-value pairs or remove existing ones
 - 🔍 **Search & Filter**: Search across all JSON keys and values
-- 📋 **Copy to Clipboard**: Easy copying of JSON content
+- 📋 **Copy to Clipboard**: Easy copying of JSON content with visual feedback
 - 💾 **Download JSON**: Save current JSON to file
-- 🎨 **Dark/Light Theme**: Support for both themes
+- 🎨 **Dark/Light Theme**: Support for both themes with dynamic icons
 - 📱 **Responsive Design**: Works on desktop and mobile devices
 - ⌨️ **Keyboard Navigation**: Full keyboard support
 - ♿ **Accessibility**: Screen reader support with proper ARIA labels
 - 🎯 **Icon-Only Mode**: Option to hide button text labels for compact interface
+- 🎛️ **Customizable UI**: Hide specific buttons, sections, or entire header/footer
 - 🚀 **Dual Build System**: Library build for npm + Demo build for preview
 
 ## 🚀 Installation
@@ -44,16 +46,16 @@ yarn add @ctechhindi/vue3-json-viewer
 
 ```typescript
 // Option 1: Direct CSS import (recommended)
-import '@ctechhindi/vue3-json-viewer/dist/index.css'
+import "@ctechhindi/vue3-json-viewer/dist/index.css";
 
 // Option 2: Using the styles export
-import '@ctechhindi/vue3-json-viewer/styles'
+import "@ctechhindi/vue3-json-viewer/styles";
 
 // Option 3: Using the css export
-import '@ctechhindi/vue3-json-viewer/css'
+import "@ctechhindi/vue3-json-viewer/css";
 
 // Option 4: In your main.ts or main.js
-import '@ctechhindi/vue3-json-viewer/dist/index.css'
+import "@ctechhindi/vue3-json-viewer/dist/index.css";
 ```
 
 ### Basic Usage
@@ -155,6 +157,47 @@ const handleEditCancel = () => {
 </script>
 ```
 
+### Customizing UI Elements
+
+You can hide specific UI elements using the visibility props:
+
+```vue
+<template>
+  <JsonViewer
+    v-model:data="jsonData"
+    :hide-header="false"
+    :hide-footer="true"
+    :hide-mode-switcher="false"
+    :hide-tree-controls="false"
+    :hide-edit-controls="false"
+    :hide-search-button="true"
+    :hide-copy-button="false"
+    :hide-download-button="true"
+    :hide-theme-button="false"
+  />
+</template>
+```
+
+### Minimal Configuration
+
+For a minimal, read-only viewer:
+
+```vue
+<template>
+  <JsonViewer
+    v-model:data="jsonData"
+    :editable="false"
+    :hide-header="false"
+    :hide-footer="true"
+    :hide-edit-controls="true"
+    :hide-search-button="true"
+    :hide-copy-button="false"
+    :hide-download-button="true"
+    :hide-theme-button="false"
+  />
+</template>
+```
+
 ## 📋 Props
 
 | Prop              | Type                | Default   | Description                          |
@@ -167,17 +210,33 @@ const handleEditCancel = () => {
 | `maxDepth`        | `number`            | `3`       | Maximum depth to expand by default   |
 | `hideActionText`  | `boolean`           | `false`   | Hide button text labels (icons only) |
 
+### UI Visibility Props
+
+| Prop                 | Type      | Default | Description                              |
+| -------------------- | --------- | ------- | ---------------------------------------- |
+| `hideHeader`         | `boolean` | `false` | Hide the entire menu bar (header)        |
+| `hideFooter`         | `boolean` | `false` | Hide the entire footer                   |
+| `hideModeSwitcher`   | `boolean` | `false` | Hide the Tree/Text mode switcher         |
+| `hideTreeControls`   | `boolean` | `false` | Hide the Expand All/Collapse All buttons |
+| `hideEditControls`   | `boolean` | `false` | Hide the Edit/Save/Cancel buttons        |
+| `hideSearchButton`   | `boolean` | `false` | Hide the Search button                   |
+| `hideCopyButton`     | `boolean` | `false` | Hide the Copy button                     |
+| `hideDownloadButton` | `boolean` | `false` | Hide the Download button                 |
+| `hideThemeButton`    | `boolean` | `false` | Hide the Theme toggle button             |
+
 ## 🎭 Events
 
-| Event           | Payload          | Description          |
-| --------------- | ---------------- | -------------------- |
-| `update:data`   | `newData: any`   | Data changed event   |
-| `node-click`    | `node: JsonNode` | Node clicked event   |
-| `node-expand`   | `node: JsonNode` | Node expanded event  |
-| `node-collapse` | `node: JsonNode` | Node collapsed event |
-| `edit-start`    | -                | Edit mode started    |
-| `edit-save`     | `data: any`      | Changes saved        |
-| `edit-cancel`   | -                | Edit mode cancelled  |
+| Event           | Payload                                                     | Description          |
+| --------------- | ----------------------------------------------------------- | -------------------- |
+| `update:data`   | `newData: any`                                              | Data changed event   |
+| `node-click`    | `node: JsonNode`                                            | Node clicked event   |
+| `node-expand`   | `node: JsonNode`                                            | Node expanded event  |
+| `node-collapse` | `node: JsonNode`                                            | Node collapsed event |
+| `edit-start`    | -                                                           | Edit mode started    |
+| `edit-save`     | `data: any`                                                 | Changes saved        |
+| `edit-cancel`   | -                                                           | Edit mode cancelled  |
+| `key-change`    | `event: { node: JsonNode, oldKey: string, newKey: string }` | Key name changed     |
+| `theme-change`  | `theme: 'light' \| 'dark'`                                  | Theme changed        |
 
 ## 🏗️ Data Structure
 
@@ -193,9 +252,30 @@ interface JsonNode {
 }
 ```
 
-## 🎨 Styling
+## 🎨 Styling & Theming
+
+The component uses **component-scoped CSS custom properties** for theming, ensuring that theme changes only affect the JsonViewer component and do not interfere with your parent application's styling.
+
+### Component-Only Theming
+
+The theme is completely self-contained within the component:
+
+**Dynamic Theme Icons**: The theme button automatically shows:
+- 🌙 **Moon icon** when in light theme (click to switch to dark)
+- ☀️ **Sun icon** when in dark theme (click to switch to light)
+
+```vue
+<template>
+  <JsonViewer 
+    :theme="'dark'"  <!-- Theme only affects this component -->
+    v-model:data="jsonData" 
+  />
+</template>
+```
+
+### CSS Custom Properties
 
-The component uses CSS custom properties for theming. You can customize the appearance by overriding these variables:
+You can customize the appearance by overriding these CSS variables within the component scope:
 
 ```css
 .json-viewer {
@@ -213,6 +293,49 @@ The component uses CSS custom properties for theming. You can customize the appe
 }
 ```
 
+### Using in Other Projects
+
+When you use this component in other projects, the theme will **only affect the component itself**:
+
+```vue
+<template>
+  <div>
+    <!-- This header won't be affected by theme changes -->
+    <header class="my-app-header">
+      <h1>My Application</h1>
+    </header>
+    
+    <!-- Only this component will change theme -->
+    <JsonViewer 
+      :theme="componentTheme"
+      v-model:data="jsonData"
+      @theme-change="handleThemeChange"
+    />
+    
+    <!-- This footer also won't be affected -->
+    <footer class="my-app-footer">
+      <p>My Application Footer</p>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+const componentTheme = ref('light');
+
+const handleThemeChange = (newTheme) => {
+  componentTheme.value = newTheme;
+  // Theme only affects the JsonViewer component
+  // Your app's global styling remains unchanged
+};
+</script>
+```
+
+**Benefits:**
+- ✅ **No Global Side Effects** - Theme changes only affect the component
+- ✅ **Better Encapsulation** - Component manages its own appearance
+- ✅ **Easier Integration** - No conflicts with parent project's theme system
+- ✅ **Reusable** - Can be used in any project without affecting global styles
+
 ## 🛠️ Development
 
 ### Setup
@@ -308,6 +431,28 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 - Font families: [Inter](https://rsms.me/inter/) and [Fira Code](https://github.com/tonsky/FiraCode)
 - Built with [Vue 3](https://vuejs.org/) and [Vite](https://vitejs.dev/)
 
+## 🔧 Troubleshooting
+
+### Theme Not Working?
+
+**Problem**: Theme changes not visible in your project
+
+**Solution**: The component now uses component-only theming. Make sure you're passing the theme prop correctly:
+
+```vue
+<!-- ✅ Correct - Theme will work -->
+<JsonViewer :theme="'dark'" v-model:data="jsonData" />
+
+<!-- ❌ Incorrect - No theme prop -->
+<JsonViewer v-model:data="jsonData" />
+```
+
+### Theme Affecting Other Elements?
+
+**Problem**: Theme changes affecting your entire application
+
+**Solution**: This shouldn't happen anymore! The component is now completely self-contained. If you're still experiencing issues, make sure you're using the latest version.
+
 ## 📞 Support
 
 If you have any questions or need help, please:

dist/components/JsonNode.vue.d.ts

@@ -23,6 +23,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         node: JsonNodeType;
         value: any;
     }) => void;
+    "key-change": (event: {
+        node: JsonNodeType;
+        oldKey: string;
+        newKey: string;
+    }) => void;
     "node-delete": (node: JsonNodeType) => void;
     "node-add": (event: {
         parent: JsonNodeType;
@@ -40,6 +45,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         node: JsonNodeType;
         value: any;
     }) => any) | undefined;
+    "onKey-change"?: ((event: {
+        node: JsonNodeType;
+        oldKey: string;
+        newKey: string;
+    }) => any) | undefined;
     "onNode-delete"?: ((node: JsonNodeType) => any) | undefined;
     "onNode-add"?: ((event: {
         parent: JsonNodeType;

dist/components/JsonViewer.vue.d.ts

@@ -15,6 +15,15 @@ export interface Props {
     showLineNumbers?: boolean;
     maxDepth?: number;
     hideActionText?: boolean;
+    hideHeader?: boolean;
+    hideFooter?: boolean;
+    hideModeSwitcher?: boolean;
+    hideTreeControls?: boolean;
+    hideEditControls?: boolean;
+    hideSearchButton?: boolean;
+    hideCopyButton?: boolean;
+    hideDownloadButton?: boolean;
+    hideThemeButton?: boolean;
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     editable: boolean;
@@ -23,10 +32,24 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     showLineNumbers: boolean;
     maxDepth: number;
     hideActionText: boolean;
+    hideHeader: boolean;
+    hideFooter: boolean;
+    hideModeSwitcher: boolean;
+    hideTreeControls: boolean;
+    hideEditControls: boolean;
+    hideSearchButton: boolean;
+    hideCopyButton: boolean;
+    hideDownloadButton: boolean;
+    hideThemeButton: boolean;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "node-click": (node: JsonNodeType) => void;
     "node-expand": (node: JsonNodeType) => void;
     "node-collapse": (node: JsonNodeType) => void;
+    "key-change": (event: {
+        node: JsonNodeType;
+        oldKey: string;
+        newKey: string;
+    }) => void;
     "update:data": (newData: any) => void;
     "edit-start": () => void;
     "edit-save": (data: any) => void;
@@ -39,10 +62,24 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     showLineNumbers: boolean;
     maxDepth: number;
     hideActionText: boolean;
+    hideHeader: boolean;
+    hideFooter: boolean;
+    hideModeSwitcher: boolean;
+    hideTreeControls: boolean;
+    hideEditControls: boolean;
+    hideSearchButton: boolean;
+    hideCopyButton: boolean;
+    hideDownloadButton: boolean;
+    hideThemeButton: boolean;
 }>>> & Readonly<{
     "onNode-click"?: ((node: JsonNodeType) => any) | undefined;
     "onNode-expand"?: ((node: JsonNodeType) => any) | undefined;
     "onNode-collapse"?: ((node: JsonNodeType) => any) | undefined;
+    "onKey-change"?: ((event: {
+        node: JsonNodeType;
+        oldKey: string;
+        newKey: string;
+    }) => any) | undefined;
     "onUpdate:data"?: ((newData: any) => any) | undefined;
     "onEdit-start"?: (() => any) | undefined;
     "onEdit-save"?: ((data: any) => any) | undefined;
@@ -55,6 +92,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     showLineNumbers: boolean;
     maxDepth: number;
     hideActionText: boolean;
+    hideHeader: boolean;
+    hideFooter: boolean;
+    hideModeSwitcher: boolean;
+    hideTreeControls: boolean;
+    hideEditControls: boolean;
+    hideSearchButton: boolean;
+    hideCopyButton: boolean;
+    hideDownloadButton: boolean;
+    hideThemeButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

dist/components/icons/MoonIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

dist/components/icons/SunIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

dist/components/icons/index.d.ts

@@ -16,3 +16,5 @@ export { default as PlusIcon } from './PlusIcon.vue';
 export { default as TrashIcon } from './TrashIcon.vue';
 export { default as CheckIcon } from './CheckIcon.vue';
 export { default as XIcon } from './XIcon.vue';
+export { default as MoonIcon } from './MoonIcon.vue';
+export { default as SunIcon } from './SunIcon.vue';