Add icon-only mode option, improve README, and enhance JSON viewer with line numbers and action text visibility controls

Author: eeprojectsee

README.md

@@ -17,13 +17,14 @@ A modern, sleek Vue 3 component for viewing, editing, and manipulating JSON data
 - 📱 **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
 - 🚀 **Dual Build System**: Library build for npm + Demo build for preview
 
 ## 🚀 Installation
 
 This component is now available on npm as `@ctechhindi/vue3-json-viewer`
 
-[@ctechhindi/vue3-json-viewer](https://www.npmjs.com/package/@ctechhindi/vue3-json-viewer)  
+[@ctechhindi/vue3-json-viewer](https://www.npmjs.com/package/@ctechhindi/vue3-json-viewer)
 
 ```bash
 npm install @ctechhindi/vue3-json-viewer
@@ -53,8 +54,8 @@ yarn add @ctechhindi/vue3-json-viewer
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import JsonViewer from '@ctechhindi/vue3-json-viewer'
+import { ref } from "vue";
+import JsonViewer from "@ctechhindi/vue3-json-viewer";
 
 const jsonData = ref({
   name: "John Doe",
@@ -63,13 +64,13 @@ const jsonData = ref({
   hobbies: ["reading", "coding"],
   address: {
     street: "123 Main St",
-    city: "Anytown"
-  }
-})
+    city: "Anytown",
+  },
+});
 
 const handleDataUpdate = (newData: any) => {
-  console.log('Data updated:', newData)
-}
+  console.log("Data updated:", newData);
+};
 </script>
 ```
 
@@ -84,6 +85,7 @@ const handleDataUpdate = (newData: any) => {
     default-mode="tree"
     :show-line-numbers="true"
     :max-depth="3"
+    :hide-action-text="false"
     @update:data="handleDataUpdate"
     @node-click="handleNodeClick"
     @node-expand="handleNodeExpand"
@@ -95,76 +97,77 @@ const handleDataUpdate = (newData: any) => {
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import JsonViewer from '@ctechhindi/vue3-json-viewer'
+import { ref } from "vue";
+import JsonViewer from "@ctechhindi/vue3-json-viewer";
 
 const complexData = ref({
   // Your complex JSON data
-})
+});
 
-const currentTheme = ref<'light' | 'dark'>('light')
+const currentTheme = ref<"light" | "dark">("light");
 
 // Event handlers
 const handleDataUpdate = (newData: any) => {
-  console.log('Data updated:', newData)
-}
+  console.log("Data updated:", newData);
+};
 
 const handleNodeClick = (node: any) => {
-  console.log('Node clicked:', node)
-}
+  console.log("Node clicked:", node);
+};
 
 const handleNodeExpand = (node: any) => {
-  console.log('Node expanded:', node)
-}
+  console.log("Node expanded:", node);
+};
 
 const handleNodeCollapse = (node: any) => {
-  console.log('Node collapsed:', node)
-}
+  console.log("Node collapsed:", node);
+};
 
 const handleEditStart = () => {
-  console.log('Edit mode started')
-}
+  console.log("Edit mode started");
+};
 
 const handleEditSave = (data: any) => {
-  console.log('Changes saved:', data)
-}
+  console.log("Changes saved:", data);
+};
 
 const handleEditCancel = () => {
-  console.log('Edit cancelled')
-}
+  console.log("Edit cancelled");
+};
 </script>
 ```
 
 ## 📋 Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `data` | `any` | `{}` | JSON data to display |
-| `editable` | `boolean` | `true` | Enable editing capabilities |
-| `theme` | `'light' \| 'dark'` | `'light'` | Theme preference |
-| `defaultMode` | `'tree' \| 'text'` | `'tree'` | Default view mode |
-| `showLineNumbers` | `boolean` | `false` | Show line numbers in text mode |
-| `maxDepth` | `number` | `3` | Maximum depth to expand by default |
+| Prop              | Type                | Default   | Description                          |
+| ----------------- | ------------------- | --------- | ------------------------------------ |
+| `data`            | `any`               | `{}`      | JSON data to display                 |
+| `editable`        | `boolean`           | `true`    | Enable editing capabilities          |
+| `theme`           | `'light' \| 'dark'` | `'light'` | Theme preference                     |
+| `defaultMode`     | `'tree' \| 'text'`  | `'tree'`  | Default view mode                    |
+| `showLineNumbers` | `boolean`           | `false`   | Show line numbers in text mode       |
+| `maxDepth`        | `number`            | `3`       | Maximum depth to expand by default   |
+| `hideActionText`  | `boolean`           | `false`   | Hide button text labels (icons only) |
 
 ## 🎭 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 |
+| 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 |
+| `edit-start`    | -                | Edit mode started    |
+| `edit-save`     | `data: any`      | Changes saved        |
+| `edit-cancel`   | -                | Edit mode cancelled  |
 
 ## 🏗️ Data Structure
 
 ```typescript
 interface JsonNode {
   key: string;
   value: any;
-  type: 'string' | 'number' | 'boolean' | 'object' | 'array' | 'null';
+  type: "string" | "number" | "boolean" | "object" | "array" | "null";
   path: string[];
   level: number;
   expanded?: boolean;
@@ -223,6 +226,7 @@ npm run preview
 ### Build Outputs
 
 - **`npm run build`** → Creates `dist/` folder with library files:
+
   - `json-viewer.umd.js` - UMD bundle
   - `json-viewer.mjs` - ES module bundle
   - `style.css` - Component styles

src/App.vue

@@ -21,11 +21,19 @@
               <input type="checkbox" v-model="isDarkTheme" @change="toggleTheme" />
               Dark Theme
             </label>
-          </div>
+                         <label>
+               <input type="checkbox" v-model="showLineNumbers" />
+               Show Line Numbers
+             </label>
+             <label>
+               <input type="checkbox" v-model="hideActionText" />
+               Hide Button Text
+             </label>
+           </div>
         </div>
 
         <div class="json-viewer-container">
-          <JsonViewer v-model:data="jsonData" :editable="true" :theme="isDarkTheme ? 'dark' : 'light'" default-mode="tree" :max-depth="2" @update:data="handleDataUpdate" @node-click="handleNodeClick" @edit-save="handleEditSave" @edit-cancel="handleEditCancel" @theme-change="handleThemeChange" />
+                     <JsonViewer v-model:data="jsonData" :editable="true" :theme="isDarkTheme ? 'dark' : 'light'" default-mode="tree" :max-depth="2" :show-line-numbers="showLineNumbers" :hide-action-text="hideActionText" @update:data="handleDataUpdate" @node-click="handleNodeClick" @edit-save="handleEditSave" @edit-cancel="handleEditCancel" @theme-change="handleThemeChange" />
         </div>
       </div>
 
@@ -63,13 +71,13 @@
         <div class="footer-links">
           <a href="https://github.com/jeevan-lal/vue3-json-viewer" target="_blank" rel="noopener noreferrer" class="github-link">
             <svg class="github-icon" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
             </svg>
             GitHub Repository
           </a>
           <a href="https://www.npmjs.com/package/@ctechhindi/vue3-json-viewer" target="_blank" rel="noopener noreferrer" class="npm-link">
             <svg class="npm-icon" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0H1.763zM5.13 5.323l13.837.019-.009 13.836h-3.464l.007-4.211h-3.456v4.201H5.136V5.323z"/>
+              <path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0H1.763zM5.13 5.323l13.837.019-.009 13.836h-3.464l.007-4.211h-3.456v4.201H5.136V5.323z" />
             </svg>
             NPM Package
           </a>
@@ -86,6 +94,8 @@ import JsonViewer from "./components/JsonViewer.vue";
 // Reactive state
 const jsonData = ref({});
 const isDarkTheme = ref(false);
+const showLineNumbers = ref(true);
+const hideActionText = ref(false);
 
 // Sample data sets
 const sampleData = {
@@ -361,6 +371,9 @@ body.dark-theme .sample-btn:hover {
 .theme-controls {
   padding-top: 1rem;
   border-top: 1px solid #e5e7eb;
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
 }
 
 body.dark-theme .theme-controls {