Fix json components
This commit is contained in:
parent
e9dfd834f7
commit
b353e6f34d
@ -1,32 +1,34 @@
|
||||
<template>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-row" @click="_expanded = !_expanded">
|
||||
<div v-if="_value.key" class="item-key">
|
||||
"{{_value.key}}" <b>:</b>
|
||||
<span v-if="!_expanded"><b> [</b> ... <b>]</b>,</span>
|
||||
<div class="flex flex-row" @click="expanded_internal = !expanded_internal">
|
||||
<div v-if="value_internal.key" class="item-key">
|
||||
"{{value_internal.key}}" <b>:</b>
|
||||
<span v-if="!expanded_internal"><b> [</b> ... <b>]</b>,</span>
|
||||
<template v-else><b>[</b></template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(row, key) of _value.value"
|
||||
<div v-for="(row, key) of value_internal.value"
|
||||
:key="key"
|
||||
>
|
||||
<JsonArray v-if="Array.isArray(row)"
|
||||
value="{'key': key', 'value': row}"
|
||||
@change="changeItem(key, value)"
|
||||
:value="row"
|
||||
@change="changeItem(rowKey, $event)"
|
||||
>
|
||||
</JsonArray>
|
||||
<JsonObject v-else-if="typeof row === 'object' && row !== null"
|
||||
value="{'key': key, 'value': row}"
|
||||
@change="changeItem(key, value)"
|
||||
:value="row"
|
||||
:label="rowKey"
|
||||
@change="changeItem(rowKey, $event)"
|
||||
>
|
||||
</JsonObject>
|
||||
<JsonElement v-else
|
||||
value="{'key': key, 'value': row}"
|
||||
@change="changeItem(key, value)"
|
||||
:value="row"
|
||||
:label="rowKey"
|
||||
@change="changeItem(rowKey, $event)"
|
||||
>
|
||||
</JsonElement>
|
||||
</div>
|
||||
<div v-if="expanded"><b>],</b>
|
||||
<div v-if="expanded_internal"><b>],</b></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -46,25 +48,34 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
_value: undefined,
|
||||
_expanded: true,
|
||||
value_internal: undefined,
|
||||
expanded_internal: true,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.value_internal = this.value;
|
||||
},
|
||||
watch: {
|
||||
value: function(val) {
|
||||
this._value = val;
|
||||
this.value_internal = val;
|
||||
},
|
||||
expanded: function(val) {
|
||||
if (val !== undefined && val !== null) {
|
||||
this._expanded = !!val;
|
||||
this.expanded_internal = !!val;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeItem(key, value) {
|
||||
this._value.value[key] = value;
|
||||
this.$emit('change', this._value.value);
|
||||
this.value_internal[key] = value;
|
||||
this.$emit('change', this.value_internal);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import url('./json.scss');
|
||||
@import url('../../../res/css/flex.scss');
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,39 +1,42 @@
|
||||
<template>
|
||||
<div class="flex flex-row">
|
||||
<div v-if="_value.key" class="item-key">
|
||||
"{{_value.key}}" <b>:</b>
|
||||
<div class="flex flex-row json-level-indent">
|
||||
<div>
|
||||
<b>
|
||||
<span v-if="label" class="item-key">"{{label}}" </span>
|
||||
:
|
||||
</b>
|
||||
</div>
|
||||
<div v-if="typeof _value.value === 'boolean'"
|
||||
<div v-if="typeof value_internal === 'boolean'"
|
||||
class="json-value-boolean"
|
||||
@click="toggleBoolean"
|
||||
>
|
||||
<template v-if="_value.value">true</template>
|
||||
<template v-if="value_internal">true</template>
|
||||
<template v-else>false</template>
|
||||
</div>
|
||||
<div v-else
|
||||
class="flex flex-row inline-edit"
|
||||
:class="{
|
||||
'json-value-number': typeof _value.value === 'number',
|
||||
'json-value-string': typeof _value.value === 'string'
|
||||
'json-value-number': typeof value_internal === 'number',
|
||||
'json-value-string': typeof value_internal === 'string'
|
||||
}"
|
||||
>
|
||||
<template v-if="editing">
|
||||
<div ref="element-edit-area"
|
||||
:contenteditable="editing"
|
||||
>
|
||||
{{_value.value}}
|
||||
{{value_internal}}
|
||||
</div>
|
||||
<div class="btn" @click="changeValue">
|
||||
✔
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="typeof _value.value === 'string'">
|
||||
"{{_value.value}}"
|
||||
<template v-if="typeof value_internal === 'string'">
|
||||
"{{value_internal}}"
|
||||
</template>
|
||||
<template v-else>
|
||||
{{_value.value}}
|
||||
</template>
|
||||
{{value_internal}}
|
||||
</template>,
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,34 +47,42 @@ export default {
|
||||
name: 'json-element',
|
||||
props: [
|
||||
'value',
|
||||
'label',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
_value: undefined,
|
||||
value_internal: undefined,
|
||||
editing: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.value_internal = this.value;
|
||||
},
|
||||
watch: {
|
||||
value: function(val) {
|
||||
this._value = val;
|
||||
this.value_internal = val;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleBoolean() {
|
||||
this._value.value = !this._value.value;
|
||||
this.$emit('change', this._value.value);
|
||||
this.value_internal = !this.value_internal;
|
||||
this.$emit('change', this.value_internal);
|
||||
},
|
||||
changeValue() {
|
||||
const newValue = this.$refs['element-edit-area'].textContent;
|
||||
if (isNaN(newValue)) {
|
||||
this._value.value = newValue;
|
||||
this.value_internal = newValue;
|
||||
this.$emit('change', newValue);
|
||||
} else {
|
||||
this._value.value = +newValue;
|
||||
this.value_internal.value = +newValue;
|
||||
this.$emit('change', +newValue);
|
||||
}
|
||||
this.editing = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import url('./json.scss');
|
||||
</style>
|
||||
|
||||
@ -1,32 +1,45 @@
|
||||
<template>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex flex-row" @click="_expanded = !_expanded">
|
||||
<div v-if="_value.key" class="item-key">
|
||||
"{{_value.key}}" <b>:</b>
|
||||
<span v-if="!_expanded"><b> {</b> ... <b>}</b>,</span>
|
||||
<div class="flex flex-column json-level-indent">
|
||||
<div class="flex flex-row" @click="expanded_internal = !expanded_internal">
|
||||
<div class="item-key-line">
|
||||
<template v-if="label">
|
||||
<b>
|
||||
<span class="item-key">"{{label}}"</span>
|
||||
:
|
||||
</b>
|
||||
</template>
|
||||
<span v-if="!expanded_internal"><b> {</b> ... <b>}</b>,</span>
|
||||
<template v-else><b>{</b></template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(row, key) of _value.value"
|
||||
:key="key"
|
||||
>
|
||||
<JsonArray v-if="Array.isArray(row)"
|
||||
value="{'value': row}"
|
||||
@change="changeItem(key, value)"
|
||||
<template v-if="expanded_internal">
|
||||
<div v-for="(row, rowKey) of value_internal"
|
||||
:key="rowKey"
|
||||
>
|
||||
</JsonArray>
|
||||
<JsonObject v-else-if="typeof row === 'object' && row !== null"
|
||||
value="{'key': key, 'value': row}"
|
||||
@change="changeItem(key, value)"
|
||||
>
|
||||
</JsonObject>
|
||||
<JsonElement v-else
|
||||
value="{'key': key, 'value': row}"
|
||||
@change="changeItem(key, value)"
|
||||
>
|
||||
</JsonElement>
|
||||
</div>
|
||||
<div v-if="expanded"><b>},</b>
|
||||
<pre>
|
||||
{label: {{rowKey}}, value: {{row}}}
|
||||
</pre>
|
||||
<JsonArray v-if="Array.isArray(row)"
|
||||
:value="row"
|
||||
@change="changeItem(rowKey, $event)"
|
||||
>
|
||||
</JsonArray>
|
||||
<JsonObject v-else-if="typeof row === 'object' && row !== null"
|
||||
:value="row"
|
||||
:label="rowKey"
|
||||
@change="changeItem(rowKey, $event)"
|
||||
>
|
||||
</JsonObject>
|
||||
<JsonElement v-else
|
||||
:value="row"
|
||||
:label="rowKey"
|
||||
@change="changeItem(rowKey, $event)"
|
||||
>
|
||||
</JsonElement>
|
||||
|
||||
</div>
|
||||
<div><b>},</b></div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -38,6 +51,7 @@ export default {
|
||||
name: 'JsonObject',
|
||||
props: [
|
||||
'value',
|
||||
'label',
|
||||
'expanded',
|
||||
],
|
||||
components: {
|
||||
@ -46,25 +60,32 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
_value: undefined,
|
||||
_expanded: true,
|
||||
value_internal: undefined,
|
||||
expanded_internal: true,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.value_internal = this.value;
|
||||
},
|
||||
watch: {
|
||||
value: function(val) {
|
||||
this._value = val;
|
||||
this.value_internal = val;
|
||||
},
|
||||
expanded: function(val) {
|
||||
if (val !== undefined && val !== null) {
|
||||
this._expanded = !!val;
|
||||
this.expanded_internal = !!val;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeItem(key, value) {
|
||||
this._value.value[key] = value;
|
||||
this.$emit('change', this._value.value);
|
||||
this.value_internal[key] = value;
|
||||
this.$emit('change', this.value_internal);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import url('./json.scss');
|
||||
</style>
|
||||
16
src/common/components/JsonEditor/json.scss
Normal file
16
src/common/components/JsonEditor/json.scss
Normal file
@ -0,0 +1,16 @@
|
||||
.json-level-indent {
|
||||
padding-left: 2em !important;
|
||||
}
|
||||
.item-key {
|
||||
color: #fa6;
|
||||
}
|
||||
|
||||
.json-value-boolean {
|
||||
color: rgb(53, 179, 120);
|
||||
}
|
||||
.json-value-number {
|
||||
color: rgb(73, 73, 160);
|
||||
}
|
||||
.json-value-string {
|
||||
color: rgb(195, 35, 35);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user