seijikohara / json-tree-view-vue3 Goto Github PK

JSON tree rendering Vue3 component

JavaScript 3.16% Vue 79.69% TypeScript 8.19% HTML 8.96%

vue3 vue3-tree json typescript

json-tree-view-vue3's Introduction

json-tree-view-vue3

A Vue3 component that displays JSON in a collapsible tree. Inspired by vue-json-component and vue-json-tree-view to work with Vue3 and TypeScript.

Example

<script setup lang="ts">
import { JsonTreeView } from "json-tree-view-vue3";
import 'json-tree-view-vue3/dist/style.css'

const json = `{"string":"text","number":123,"boolean":true,"null":null,"array":["A","B","C"],"object":{"prop1":"value1","nestedObject":{"prop2":"value2"}}}`
</script>

<template>
  <JsonTreeView :json="json" :maxDepth="3" />
</template>

Props

Props	Required	Param Type	Default value	Description
json	true	string		JSON string to display the tree
rootKey	false	string	"/"	Top root-level name
maxDepth	false	number	1	The depth of the tree that will be open when rendered
colorScheme	false	string	"light"	"light" or "dark" can be used.

Events

selected(event: {key: string, value: PrimitiveTypes, path: string}]

json-tree-view-vue3's People

Contributors

Stargazers

Watchers

Forkers

trendingtechnology ziadj mohamed-salah-fahmy joeyberkovitz wcheek moussaclarke functionfirst k1-c davleb onigetoc zainabraja19

json-tree-view-vue3's Issues

Long render times for large data

I have some json data with around 2000 properties I'm trying to render, but it takes around 3s to render everything.

This line is causing the slowdown.

json-tree-view-vue3/src/components/JsonTreeViewItem.vue

Line 14 in 04fa65a

v-show="state.open"

It's using v-show to render the data then hide it. If it was using v-if, it wouldn't render everything at once, speeding up initial loads.

This isn't unique to your project. I've also seen the same issue in vue3-json-component.

When using the following code to generate chunked data, I've seen speedups from 2000ms total to 50ms initial plus each click to show when switching from v-show to v-if.

// {0: [0, 1, 2, ...], 1: [0, 1, 2, ...], ...}
const chunkeddata: Record<number, number[]> = {};
for (let i = 0; i < 100; i++) {
    chunkeddata[i] = [];
    for (let j = 0; j < 100; j++) {
        chunkeddata[i].push(j)
    }
}

Edit tree entries

Thank you for this component. I was lucky to have stumbled upon it.

I've been able to get the component working along with having access to its events. I'm hoping to build a component that will allow me to edit the entries at each level.

Do you have an idea of how to implement this? I was thinking if I could access more events, then I could add some input feature that would allow editing of the data object stored in my Vue instance.

Tree not visualized

I tried to create a simple component just like in the example, but the tree is not showing.

Incorrect typing in @selected handler function

Hi,

When we import the component into our vue3/typescript project, we are getting the following error:

node_modules/json-tree-view-vue3/src/components/JsonTreeViewItem.vue:132:12 - error TS2322: Type '(data: Data) => void' is not assignable to type '(value: SelectedData | Data) => any'.
  Types of parameters 'data' and 'value' are incompatible.
    Type 'SelectedData | Data' is not assignable to type 'Data'.
      Type 'SelectedData' is not assignable to type 'Data'.
        Index signature for type 'string' is missing in type 'SelectedData'.

132           @selected="onSelected"
               ~~~~~~~~



Found 1 error in node_modules/json-tree-view-vue3/src/components/JsonTreeViewItem.vue:132

Vite build error

Hi @seijikohara

I was facing a build issue that could be easily overcome by modifying this :
function onClick(data: Data)
to this
function onClick(data: Data | ItemData)

Thank you

Invalid Event Type Inside JsonTreeViewItem

When using this library in Vue3 TypeScript project I'm facing this error:

node_modules/json-tree-view-vue3/src/components/JsonTreeViewItem.vue:132:12 - error TS2322: Type '(data: Data) => void' is not assignable to type '(value: SelectedData | Data) => any'.
  Types of parameters 'data' and 'value' are incompatible.                                                                                                                              
    Type 'SelectedData | Data' is not assignable to type 'Data'.                                                                                                                        
      Type 'SelectedData' is not assignable to type 'Data'.                                                                                                                             
        Index signature for type 'string' is missing in type 'SelectedData'.                                                                                                            

132           @selected="onSelected"
               ~~~~~~~~



Found 1 error in node_modules/json-tree-view-vue3/src/components/JsonTreeViewItem.vue:132

I believe that the handler for "onSelected" event does not correspond to the declared type:

Using:
"vue": "3.4.14",
"vue-tsc": "1.8.27"
"typescript": "5.3.3",
"json-tree-view-vue3": "^0.3.1",

seijikohara / json-tree-view-vue3 Goto Github PK

json-tree-view-vue3's Introduction

json-tree-view-vue3

Example

Props

Events

json-tree-view-vue3's People

Contributors

Stargazers

Watchers

Forkers

json-tree-view-vue3's Issues

Long render times for large data

Edit tree entries

Tree not visualized

Incorrect typing in @selected handler function

Vite build error

Invalid Event Type Inside JsonTreeViewItem

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent