diff --git a/src/App.svelte b/src/App.svelte index fba4ea7..9aa841c 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -8,33 +8,33 @@ export let searchText = '' let json = { - // 'array': [1, 2, 3, { - // name: 'Item ' + 2, - // id: String(2), - // index: 2, - // time: new Date().toISOString(), - // location: { - // latitude: 1.23, - // longitude: 23.44, - // coordinates: [23.44, 1.23] - // }, - // }], + 'array': [1, 2, 3, { + name: 'Item ' + 2, + id: String(2), + index: 2, + time: new Date().toISOString(), + location: { + latitude: 1.23, + longitude: 23.44, + coordinates: [23.44, 1.23] + }, + }], 'boolean': true, 'color': '#82b92c', 'null': null, 'number': 123, - // 'object': {'a': 'b', 'c': 'd', nested: { - // name: 'Item ' + 2, - // id: String(2), - // index: 2, - // time: new Date().toISOString(), - // location: { - // latitude: 1.23, - // longitude: 23.44, - // coordinates: [23.44, 1.23] - // }, - // }}, - // 'string': 'Hello World' + 'object': {'a': 'b', 'c': 'd', nested: { + name: 'Item ' + 2, + id: String(2), + index: 2, + time: new Date().toISOString(), + location: { + latitude: 1.23, + longitude: 23.44, + coordinates: [23.44, 1.23] + }, + }}, + 'string': 'Hello World' } let uniDirectionalValue = 'test uni directional flow in Svelte'; diff --git a/src/JSONNode.svelte b/src/JSONNode.svelte index 2fda14a..0b680a4 100644 --- a/src/JSONNode.svelte +++ b/src/JSONNode.svelte @@ -7,12 +7,12 @@ import { escapeHTML } from './utils/stringUtils.js' import { createUpdateProps } from './utils/updateProps.js' - export let key = 'root' + export let key = undefined export let value export let searchResult export let onChangeKey export let onChangeValue - export let expanded = true + export let expanded = false const DEFAULT_LIMIT = 10000 const escapeUnicode = false // TODO: pass via options @@ -142,11 +142,25 @@ } // FIXME: there is whitespace added around the separator in the HTML - .separator { + .separator, + .delimiter { display: inline; color: $gray; } + .tag { + border: none; + font-size: $font-size-small; + font-family: $font-family-menu; + color: white; + background: $light-gray; + border-radius: 2px; + padding: 0 4px; + margin-left: $input-padding; + margin-top: 2px; + cursor: pointer; + } + .items, .props { padding-left: $indentation-width; @@ -214,26 +228,33 @@