Merge pull request #264 from devforth/docs-for-jsonviewer-component

feat: Add JsonViewer documentation and example

Author: ivictbor

adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md

@@ -1726,3 +1726,40 @@ import { MixedChart } from '@/afcl'
   </div>
 </div>
 
+## Json Viever
+
+```ts
+import { JsonViever } from '@/afcl'
+```
+
+### Basic
+
+<div class="split-screen" >
+
+  <div>
+  ```html
+      <JsonViewer 
+      :value="[
+        {
+          id: 1,
+          name: 'Alice',
+          meta: {
+            age: 30,
+            hobbies: ['reading', 'biking'],
+          }
+        },
+        {
+          id: 2,
+          name: 'Bob',
+        }
+      ]" 
+      :expandDepth="2" 
+    />
+  ```
+</div>
+  <div>
+    ![Mixed Chart](image-93.png)
+  </div>
+</div>
+
+

adminforth/documentation/docs/tutorial/03-Customization/image-93.png

@@ -5,15 +5,21 @@
     :expandDepth="expandDepth"
     copyable
     sort
+    :theme="currentTheme"
   />
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { JsonViewer } from 'vue3-json-viewer'
+import { useCoreStore } from '@/stores/core'
 
 defineProps<{
   value: any
   expandDepth?: number
 }>()
 
+const coreStore = useCoreStore()
+
+const currentTheme = computed(() => (coreStore.theme === 'dark' ? 'dark' : 'light'))
 </script>