@dramaorg/recusandae-unde

v1.7.72

Published

3 months ago

Downloads

113

0High
0Medium
0Low

vanthuanbt26

electron obj collection reversed jshint ender es6 syntaxerror console es-abstract app javascript events Object.values redux Underscore copy pipe glob stable promise typed array walk fork mru framer private in environment parser module transform Array.prototype.findLastIndex gestures buffers browserlist karma fnmatch configurable URL Object.fromEntries positive form minimal ES2021 WeakSet toobject RegExp#flags ES6 require hooks omit fastclone Array.prototype.flat asserts plugin String.prototype.matchAll negative zero ES intrinsic drop view cjk babel lru name mocha es-shim API loading css-in-js which symlinks feed ajax filter inference agent jasmine cloudwatch readable utilities TypedArray consume pure ES2016 Object find-up equal Rx const traverse [[Prototype]]JSON-Schema utils variables manager command-line look nodejs assertion autoprefixer typed istanbul user-streams lockfile jsonschema validation libphonenumber idle warning full sharedarraybuffer debugger gitignore fs json starter parse concat browserslist System.global telephone has regular expression TypeBox var yaml es structuredClone prototype eslintplugin dataView korean ses regexp fast-deep-clone router random value setter move monorepo let assert reducer sameValueZero compiler cache progress rangeerror serialization banner workspace:*StyleSheet chrome character react animation function.length yup vest accessibility text JSON chromium proto awesomesauce terminal hasOwnProperty bin route53 regular jsx Array.prototype.flatten Float32Array ECMAScript 2022 modules react internal slot restful up transpile asterisks call jest Observable package manager ponyfill location crypto input channel term jQuery deep-clone Array aws equality recursive delete Object.keys ArrayBuffer concatMap shebang pose generics internal deepcopy react pose HyBi whatwg core walking parents ES2018 Promise validator fixed-width airbnb package ES2023 trimLeft es8 cloudfront enumerable zx web form-validation coercible error rework styleguide es7 globalThis storagegateway workflow properties some immer ECMAScript 2018 $.extend id prune BigUint64Array robust eventDispatcher rfc4122 Int32Array ast style inspect util valid bundling vars sort ebs Uint8ClampedArray es2018 packages query map RegExp.prototype.flags getPrototypeOf code points logging streams computed-types fast-copy apollo path pyyaml argument test ECMAScript 2020 Uint8Array endpoint hookform animation shim flatten joi vpc shell color push isConcatSpreadable functional request tape react-testing-library moment findLastIndex fastify protocol-buffers TypeScript importexport beanstalk swf cloudsearch installer real-time deterministic type ec2 import accessor fast unicode types dotenv npmignore eslint-plugin point-free String.prototype.trim arraybuffer metadata hasOwn Symbol.toStringTag reduce syntax ECMAScript 2015 WebSockets html xml __proto__tostringtag weakset look-up object censor optimizer callbound length scheme-validation ECMAScript 2023 Streams key option rss serializer assign Int16Array toReversed flatMap args slice mobile trimStart react-hooks setImmediate write columns subprocess ReactiveX format find _.extend immutable ECMAScript 6 description stream full-width classes fantasy-land elasticache helpers sqs safe binary AsyncIterator classname logger figlet function serialize Map api weakmap superagent listeners Symbol -0 commander ie search es2015 eslint sorted postcss buffer speed http ES2019 busy node global object styled-components trimRight @@toStringTag spring expression popmotion styles i18n arrays link deepclone file log testing globals tacit side byteLength postcss-plugin eslintconfig es2016 performant offset babel-core regular expressions hash file system property dom-testing-library typesafe argv toolkit dir Array.prototype.includes iam routing own ECMAScript 2019 schema framework ES7 output Stream jsdiff optimist tap language preprocessor window ECMAScript 2016 flags bound writable emr polyfill Iterator install fullwidth japanese validate uuid negative readablestream make dir private data regular-expression fps rmdir slot quote Float64Array hardlinks iterate ECMAScript forms efficient transpiler runtime express Set environments Uint32Array mkdirs Object.assign rm queueMicrotask xhr espree ES8 coverage dayjs json-schema-validator route fetch async chai https lint autoscaling rm -rf Array.prototype.filter phone once patch rds WeakMap merge dependency manager matchAll ES3 ava rapid rules cli has-own effect-ts east-asian-width mapreduce number stringifier guid remove trim invariant ES2017 wget typescript ES2015

English | 简体中文

Features

As a JSON Formatter.
Written in TypeScript, support d.ts.
Support get item data from JSON.
Support big data.
Support editable.

Environment Support

Modern browsers, Electron and Internet Explorer 11 (with polyfills)
Server-side Rendering

| IE / Edge | Firefox | Chrome | Safari | Electron | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | IE11, Edge | last 10 versions | last 10 versions | last 10 versions | last 2 versions |

Using NPM or Yarn

$ npm install @dramaorg/recusandae-unde --save

$ yarn add @dramaorg/recusandae-unde

Use Vue2

$ npm install @dramaorg/recusandae-unde@v1-latest --save

Usage

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>
    <@dramaorg/recusandae-unde :data="{ key: 'value' }" />
  </div>
</template>

<script>
import VueJsonPretty from '@dramaorg/recusandae-unde';
import '@dramaorg/recusandae-unde/lib/styles.css';

export default {
  components: {
    VueJsonPretty,
  },
};
</script>

Use Nuxt.js

In plugins/@dramaorg/recusandae-unde.js

import Vue from 'vue'
import VueJsonPretty from '@dramaorg/recusandae-unde'

Vue.component("@dramaorg/recusandae-unde", VueJsonPretty)

In nuxt.config.js

css: [
  '@dramaorg/recusandae-unde/lib/styles.css'
],
plugins: [
  '@/plugins/@dramaorg/recusandae-unde'
],

Props

| 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 |

Events

| 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) |

Slots

| Slot Name | Description | Parameters | | --------------- | ----------------- | ---------------------- | | renderNodeKey | render node key | { node, defaultKey } | | renderNodeValue | render node value | { node, defaultValue } |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme