Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@diotoborg/est-ad
Advanced tools
A Vue component for rendering JSON data as a tree structure.
Now it supports Vue3 at least. If you still use Vue2, see 1.x.
English | 简体中文
d.ts
.IE / Edge | Firefox | Chrome | Safari | Electron |
---|---|---|---|---|
IE11, Edge | last 10 versions | last 10 versions | last 10 versions | last 2 versions |
$ npm install @diotoborg/est-ad --save
$ yarn add @diotoborg/est-ad
$ npm install @diotoborg/est-ad@v1-latest --save
The CSS file is included separately and needs to be imported manually. You can either import CSS globally in your app (if supported by your framework) or directly from the component.
<template>
<div>
<@diotoborg/est-ad :data="{ key: 'value' }" />
</div>
</template>
<script>
import VueJsonPretty from '@diotoborg/est-ad';
import '@diotoborg/est-ad/lib/styles.css';
export default {
components: {
VueJsonPretty,
},
};
</script>
plugins/@diotoborg/est-ad.js
import Vue from 'vue'
import VueJsonPretty from '@diotoborg/est-ad'
Vue.component("@diotoborg/est-ad", VueJsonPretty)
nuxt.config.js
css: [
'@diotoborg/est-ad/lib/styles.css'
],
plugins: [
'@/plugins/@diotoborg/est-ad'
],
Property | Description | Type | Default |
---|---|---|---|
data(v-model) | JSON data, support v-model when use editable | JSON object | - |
collapsedNodeLength | Objects or arrays which length is greater than this threshold will be collapsed | number | - |
deep | Paths greater than this depth will be collapsed | number | - |
showLength | Show the length when collapsed | boolean | false |
showLine | Show the line | boolean | true |
showLineNumber | Show the line number | boolean | false |
showIcon | Show the icon | boolean | false |
showDoubleQuotes | Show doublequotes on key | boolean | true |
virtual | Use virtual scroll | boolean | false |
height | The height of list when using virtual | number | 400 |
itemHeight | The height of node when using virtual | number | 20 |
selectedValue(v-model) | Selected data path | string, array | - |
rootPath | Root data path | string | root |
nodeSelectable | Defines whether a node supports selection | (node) => boolean | - |
selectableType | Support path select, default none | multiple | single | - |
showSelectController | Show the select controller | boolean | false |
selectOnClickNode | Trigger select when click node | boolean | true |
highlightSelectedNode | Support highlighting selected nodes | boolean | true |
collapsedOnClickBrackets | Support click brackets to collapse | boolean | true |
renderNodeKey | render node key, or use slot #renderNodeKey | ({ node, defaultKey }) => vNode | - |
renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - |
editable | Support editable | boolean | false |
editableTrigger | Trigger | click | dblclick | click |
theme | Sets the theme of the component. Options are 'light' or 'dark', with dark mode enhancing visibility on dark backgrounds | 'light' | 'dark' | light |
Event Name | Description | Parameters |
---|---|---|
nodeClick | triggers when click node | (node: NodeData) |
bracketsClick | triggers when click brackets | (collapsed: boolean, node: NodeData) |
iconClick | triggers when click icon | (collapsed: boolean, node: NodeData) |
selectedChange | triggers when the selected value changed | (newVal, oldVal) |
Slot Name | Description | Parameters |
---|---|---|
renderNodeKey | render node key | { node, defaultKey } |
renderNodeValue | render node value | { node, defaultValue } |
FAQs
Unknown package
The npm package @diotoborg/est-ad receives a total of 425 weekly downloads. As such, @diotoborg/est-ad popularity was classified as not popular.
We found that @diotoborg/est-ad demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.