npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue3-json-component

v0.4.2

Published

A VueJS 3 JSON Tree View with no dependencies and module builds.

Downloads

34

Readme

Vue3 JSON Component


NOTE

This is primary a fork of vue-json-component which was created to achieve quick Vue 3 support.


npm TypeScript vue2

Demo

A collapsable tree view for JSON. This package has some similarites with vue-json-tree-view so I'll address the differences below. I'm not contributing this back to that package because it would require breaking API changes, and the code is entirely different. Contributions welcome!

demo image

Philosophy

This package has a few major improvements over predecessors: builds, styles, and customization. For builds, this package ships CommonJS, Module, and UNPKG builds with no dependencies. vue-json-tree-view bundles in lots of dependencies -- including lodash. I also export global Vue imports, local Vue imports, and TypeScript declarations. The code itself is about as small as it can be while being easy to follow.

The styles in this package are all scoped, with key colors still being customizable. There are no extra margins or overflow rules and text properties are all inherited from the page. This makes the view much easier to integrate anywhere you need it.

The default color theme is based on solarized, and font weights are modified to increase readability. The component uses semantic HTML elements and tries to be fully keyboard accessible.

Usage

Install

npm i vue3-json-component
yarn add vue3-json-component

Import Locally

import { defineComponent } from 'vue';
import { JsonView } from 'vue3-json-component';

export default defineComponent({
	components: {JsonView}
})

Import Globally

import JsonView from 'vue3-json-component';

Vue.use(JsonView);

Use


<template>
	<json-view :data="data"/>
</template>

Customize

The font size and font family are inherited from the page. The component now supports dark mode, and has switched to a CSS Variables based implementation.

Props

  • data (JSON): The valid JSON object you want rendered as a tree.
  • rootKey (String): The name of the top level root key; defaults to root.
  • maxDepth (Number): Depth of the tree that is open at first render; defaults to 1.
  • colorScheme (New) (String): Setting to 'dark' enables dark mode.

Styles

⚠️ This API has changed to CSS Variables. All of these can be customized for light and dark mode as is documented below.

--vjc-key-color: #0977e6

;
--vjc-valueKey-color: #073642

;
--vjc-string-color: #268bd2

;
--vjc-number-color: #2aa198

;
--vjc-boolean-color: #cb4b16

;
--vjc-null-color: #6c71c4

;
--vjc-arrow-size:

6
px

;
--vjc-arrow-color: #444

;
--vjc-hover-color:
rgba

(
0
,
0
,
0
,
0.15
)
;

Example


<template>
	<json-view
		:data="data"
		rootKey="view"
		:maxDepth="1"
		class="customize"
	/>
</template>

<style lang="scss" scoped>
	.customize {
		--vjc-valueKey-color: green;
	}

	.customize.dark {
		--vjc-valueKey-color: red;
	}
</style>

Note: your styles will need to be scoped to override the scoped CSS Variables in the component.

Advanced Features

Selected Item Events

You can allow users to click elements, and receive an event when this occurs. The selected event will pass you the key, value, and path of the selected value. If you do not listen for the event, the styles will not indicate that values are clickable.


<json-view
	:data="data"
	@update:selected="itemSelected"
/>

Event

  • key: string
  • value: string
  • path: string

Development

Install

yarn

Hot-Reload Hostapp

yarn serve

Build Component

yarn build

Contributing

Contributions are welcome via pull request. If you want to discuss your feature before committing development time, feel free to open an issue and we can refine the idea.

Thanks!