diff --git a/package.json b/package.json index db12042..a6059d4 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "test": "mocha ./src/**/*.test.js" }, "type": "module", + "module": "./public/build/jsoneditor.mjs", "dependencies": { "@fortawesome/free-regular-svg-icons": "5.13.0", "@fortawesome/free-solid-svg-icons": "5.13.0", diff --git a/public/examples/01_basic_usage.html b/public/examples/01_basic_usage.html new file mode 100644 index 0000000..220cef4 --- /dev/null +++ b/public/examples/01_basic_usage.html @@ -0,0 +1,52 @@ + + + + + + JSONEditor | Basic usage + + + + +

+ + +

+
+ + + + diff --git a/public/index.html b/public/index.html index 9b701bf..c5d4c2e 100644 --- a/public/index.html +++ b/public/index.html @@ -6,11 +6,140 @@ JSON Editor (Svelte) - + - + +
+

+ + + +

+ + diff --git a/rollup.config.js b/rollup.config.js index c67206a..c9ff9cd 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -11,9 +11,9 @@ export default { input: 'src/main.js', output: { sourcemap: true, - format: 'iife', - name: 'app', - file: 'public/build/bundle.js' + format: 'esm', // esm, umd, cjs, iife + name: 'JSONEditor', + file: 'public/build/jsoneditor.module.js' }, plugins: [ svelte({ diff --git a/src/App.sass b/src/App.sass deleted file mode 100644 index 831d480..0000000 --- a/src/App.sass +++ /dev/null @@ -1,24 +0,0 @@ -html, body { - position: relative; - width: 100%; - height: 100%; - margin: 0; - padding: 0; -} - -body { - color: #333; - margin: 0; - padding: 8px; - box-sizing: border-box; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -} - -h1 { - color: purple; -} - -.editor { - width: 800px; - height: 500px; -} \ No newline at end of file diff --git a/src/App.svelte b/src/App.svelte deleted file mode 100644 index e0c8adb..0000000 --- a/src/App.svelte +++ /dev/null @@ -1,128 +0,0 @@ - - -
- -
- -

- - - -

- - diff --git a/src/JSONEditor.sass b/src/JSONEditor.sass index 3733435..21411a7 100644 --- a/src/JSONEditor.sass +++ b/src/JSONEditor.sass @@ -1,12 +1,13 @@ @import './styles.scss'; .jsoneditor { - border: 1px solid gray; + border: 1px solid $theme-color; width: 100%; height: 100%; min-height: 150px; display: flex; flex-direction: column; + padding-bottom: $input-padding; .menu { font-family: $font-family-menu; diff --git a/src/JSONEditor.svelte b/src/JSONEditor.svelte index 7b60e27..797ea83 100644 --- a/src/JSONEditor.svelte +++ b/src/JSONEditor.svelte @@ -6,7 +6,7 @@ import { immutableJSONPatch } from './utils/immutableJSONPatch' export let json = {} - export let onChange = () => {} + export let onChangeJson = () => {} export let searchText = '' export function get() { @@ -30,7 +30,7 @@ $: searchResult = searchText ? doSearch(json, searchText) : undefined - $: onChange(json) + $: onChangeJson(json) function handleChangeKey (key, oldKey) { // console.log('handleChangeKey', { key, oldKey }) @@ -46,7 +46,7 @@ * @param {JSONPatchDocument} operations */ function handleChange (operations) { - console.log('handleChange', operations) + // console.log('handleChange', operations) // TODO: store changes in history json = immutableJSONPatch(json, operations).json diff --git a/src/main.js b/src/main.js index 1719c77..eaa8048 100644 --- a/src/main.js +++ b/src/main.js @@ -1,9 +1,5 @@ -import App from './App.svelte'; +import JSONEditor from './JSONEditor.svelte' -const app = new App({ - target: document.body, - props: { - } -}); - -export default app; \ No newline at end of file +export default function jsoneditor (config) { + return new JSONEditor(config) +} diff --git a/src/styles.scss b/src/styles.scss index 58bece7..fc0dd16 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -24,8 +24,6 @@ $error-border-color: #ffd700; $gray: #9d9d9d; $gray-icon: $gray; $light-gray: #c0c0c0; -$input-padding: 5px; - $line-height: 18px; $indentation-width: 18px;