renusify 1.2.4 → 1.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/codeEditor/highlightCss.vue +25 -0
- package/components/codeEditor/highlightHtml.vue +25 -0
- package/components/codeEditor/highlightJs.vue +25 -0
- package/components/codeEditor/index.vue +21 -21
- package/components/form/group-input.vue +17 -10
- package/components/form/json/JsonView.vue +17 -20
- package/components/form/json/index.vue +95 -60
- package/components/formCreator/index.vue +7 -1
- package/components/index.js +1 -1
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
autocomplete="off"
|
|
7
7
|
autocorrect="off"
|
|
8
8
|
spellcheck="false"
|
|
9
|
+
@keydown="setTab"
|
|
9
10
|
></textarea>
|
|
10
11
|
<div class="text-preview" v-html="build"></div>
|
|
11
12
|
</div>
|
|
@@ -66,6 +67,30 @@ export default {
|
|
|
66
67
|
},
|
|
67
68
|
},
|
|
68
69
|
methods: {
|
|
70
|
+
setTab(event) {
|
|
71
|
+
if (event.keyCode === 9) {
|
|
72
|
+
event.preventDefault()
|
|
73
|
+
document.execCommand('insertText', false, ' '.repeat(4));
|
|
74
|
+
return false;
|
|
75
|
+
}
|
|
76
|
+
if (event.keyCode === 13) {
|
|
77
|
+
event.preventDefault()
|
|
78
|
+
let n = event.target.value.substr(0, event.target.selectionStart).split('\n')
|
|
79
|
+
n = n[n.length - 1].split('')
|
|
80
|
+
let w = ''
|
|
81
|
+
for (let i = 0; i < n.length; i++) {
|
|
82
|
+
if (n[i] === ' ') {
|
|
83
|
+
w += ' '
|
|
84
|
+
} else {
|
|
85
|
+
break
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
document.execCommand('insertText', false, '\n' + w);
|
|
90
|
+
return false;
|
|
91
|
+
}
|
|
92
|
+
return true
|
|
93
|
+
},
|
|
69
94
|
re_class(res) {
|
|
70
95
|
let regex = /\.-?[_a-zA-Z]+[_a-zA-Z0-9-]*\s*\{/g;
|
|
71
96
|
let matched = res.matchAll(regex);
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
autocomplete="off"
|
|
7
7
|
autocorrect="off"
|
|
8
8
|
spellcheck="false"
|
|
9
|
+
@keydown="setTab"
|
|
9
10
|
></textarea>
|
|
10
11
|
<div class="text-preview" v-html="build"></div>
|
|
11
12
|
</div>
|
|
@@ -86,6 +87,30 @@ export default {
|
|
|
86
87
|
},
|
|
87
88
|
},
|
|
88
89
|
methods: {
|
|
90
|
+
setTab(event) {
|
|
91
|
+
if (event.keyCode === 9) {
|
|
92
|
+
event.preventDefault()
|
|
93
|
+
document.execCommand('insertText', false, ' '.repeat(4));
|
|
94
|
+
return false;
|
|
95
|
+
}
|
|
96
|
+
if (event.keyCode === 13) {
|
|
97
|
+
event.preventDefault()
|
|
98
|
+
let n = event.target.value.substr(0, event.target.selectionStart).split('\n')
|
|
99
|
+
n = n[n.length - 1].split('')
|
|
100
|
+
let w = ''
|
|
101
|
+
for (let i = 0; i < n.length; i++) {
|
|
102
|
+
if (n[i] === ' ') {
|
|
103
|
+
w += ' '
|
|
104
|
+
} else {
|
|
105
|
+
break
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
document.execCommand('insertText', false, '\n' + w);
|
|
110
|
+
return false;
|
|
111
|
+
}
|
|
112
|
+
return true
|
|
113
|
+
},
|
|
89
114
|
re_words(res) {
|
|
90
115
|
res = this.$helper.replacer(
|
|
91
116
|
res,
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
autocomplete="off"
|
|
7
7
|
autocorrect="off"
|
|
8
8
|
spellcheck="false"
|
|
9
|
+
@keydown="setTab"
|
|
9
10
|
></textarea>
|
|
10
11
|
<div class="text-preview" v-html="build"></div>
|
|
11
12
|
</div>
|
|
@@ -83,6 +84,30 @@ export default {
|
|
|
83
84
|
},
|
|
84
85
|
},
|
|
85
86
|
methods: {
|
|
87
|
+
setTab(event) {
|
|
88
|
+
if (event.keyCode === 9) {
|
|
89
|
+
event.preventDefault()
|
|
90
|
+
document.execCommand('insertText', false, ' '.repeat(4));
|
|
91
|
+
return false;
|
|
92
|
+
}
|
|
93
|
+
if (event.keyCode === 13) {
|
|
94
|
+
event.preventDefault()
|
|
95
|
+
let n = event.target.value.substr(0, event.target.selectionStart).split('\n')
|
|
96
|
+
n = n[n.length - 1].split('')
|
|
97
|
+
let w = ''
|
|
98
|
+
for (let i = 0; i < n.length; i++) {
|
|
99
|
+
if (n[i] === ' ') {
|
|
100
|
+
w += ' '
|
|
101
|
+
} else {
|
|
102
|
+
break
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
document.execCommand('insertText', false, '\n' + w);
|
|
107
|
+
return false;
|
|
108
|
+
}
|
|
109
|
+
return true
|
|
110
|
+
},
|
|
86
111
|
strToObj(str) {
|
|
87
112
|
str = this.$helper.replacer(str, " ", "");
|
|
88
113
|
str = this.$helper.replacer(str, "\n", "");
|
|
@@ -31,24 +31,22 @@
|
|
|
31
31
|
<div v-show="show !== 'run'" ref="codeView" class="code-wrapper">
|
|
32
32
|
<div v-show="templateShow">
|
|
33
33
|
<span class="color-green"><template></span>
|
|
34
|
-
<highlight-html v-model="
|
|
34
|
+
<highlight-html v-model="temp"></highlight-html>
|
|
35
35
|
<span class="color-green"></template></span>
|
|
36
36
|
<br/>
|
|
37
37
|
</div>
|
|
38
38
|
<div v-show="scriptShow">
|
|
39
39
|
<span class="color-orange"
|
|
40
|
-
><script>
|
|
41
|
-
<br/>
|
|
42
|
-
export default {</span
|
|
40
|
+
><script><br/>export default {</span
|
|
43
41
|
>
|
|
44
|
-
<highlight-script v-model="
|
|
42
|
+
<highlight-script v-model="scr"></highlight-script>
|
|
45
43
|
<span class="color-orange">}<br/><script></span>
|
|
46
44
|
</div>
|
|
47
45
|
<div v-show="styleShow">
|
|
48
46
|
<span class="color-orange"
|
|
49
47
|
><style lang<span class="color-green">="css"</span>></span
|
|
50
48
|
>
|
|
51
|
-
<highlight-css v-model="
|
|
49
|
+
<highlight-css v-model="sty"></highlight-css>
|
|
52
50
|
<span class="color-orange"><style></span>
|
|
53
51
|
</div>
|
|
54
52
|
</div>
|
|
@@ -58,8 +56,8 @@
|
|
|
58
56
|
<script>
|
|
59
57
|
import RCodeEditorRun from "./run";
|
|
60
58
|
import highlightHtml from "./highlightHtml";
|
|
61
|
-
import HighlightScript from "
|
|
62
|
-
import HighlightCss from "
|
|
59
|
+
import HighlightScript from "./highlightJs";
|
|
60
|
+
import HighlightCss from "./highlightCss";
|
|
63
61
|
|
|
64
62
|
export default {
|
|
65
63
|
name: "r-code-editor",
|
|
@@ -69,9 +67,9 @@ export default {
|
|
|
69
67
|
templateShow: {type: Boolean, default: true},
|
|
70
68
|
scriptShow: {type: Boolean, default: true},
|
|
71
69
|
styleShow: {type: Boolean, default: true},
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
70
|
+
template: String,
|
|
71
|
+
script: String,
|
|
72
|
+
style: String,
|
|
75
73
|
},
|
|
76
74
|
emits: ["update:template", "update:script", "update:style"],
|
|
77
75
|
data() {
|
|
@@ -79,9 +77,9 @@ export default {
|
|
|
79
77
|
show: "code",
|
|
80
78
|
code: "",
|
|
81
79
|
edited: false,
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
80
|
+
temp: this.template,
|
|
81
|
+
scr: this.script,
|
|
82
|
+
sty: this.style,
|
|
85
83
|
id: this.$helper.uniqueId(),
|
|
86
84
|
};
|
|
87
85
|
},
|
|
@@ -99,14 +97,14 @@ export default {
|
|
|
99
97
|
this.get_code("codeSlot");
|
|
100
98
|
},
|
|
101
99
|
watch: {
|
|
102
|
-
|
|
103
|
-
this.$emit("update:template", this.
|
|
100
|
+
temp: function () {
|
|
101
|
+
this.$emit("update:template", this.temp);
|
|
104
102
|
},
|
|
105
|
-
|
|
106
|
-
this.$emit("update:script", this.
|
|
103
|
+
scr: function () {
|
|
104
|
+
this.$emit("update:script", this.scr);
|
|
107
105
|
},
|
|
108
|
-
|
|
109
|
-
this.$emit("update:style", this.
|
|
106
|
+
sty: function () {
|
|
107
|
+
this.$emit("update:style", this.sty);
|
|
110
108
|
},
|
|
111
109
|
},
|
|
112
110
|
methods: {
|
|
@@ -151,6 +149,7 @@ export default {
|
|
|
151
149
|
|
|
152
150
|
<style lang="scss">
|
|
153
151
|
@import "~renusify/style/include";
|
|
152
|
+
|
|
154
153
|
.#{$prefix}code-editor {
|
|
155
154
|
position: relative;
|
|
156
155
|
white-space: break-spaces;
|
|
@@ -212,6 +211,7 @@ export default {
|
|
|
212
211
|
|
|
213
212
|
.code-editor-highlight {
|
|
214
213
|
position: relative;
|
|
214
|
+
margin: -12px 0;
|
|
215
215
|
|
|
216
216
|
.text-preview {
|
|
217
217
|
white-space: pre-wrap;
|
|
@@ -223,7 +223,6 @@ export default {
|
|
|
223
223
|
line-height: 20px;
|
|
224
224
|
margin: 0;
|
|
225
225
|
border: 0;
|
|
226
|
-
|
|
227
226
|
padding: 12px;
|
|
228
227
|
}
|
|
229
228
|
|
|
@@ -253,6 +252,7 @@ export default {
|
|
|
253
252
|
top: 0;
|
|
254
253
|
left: 0;
|
|
255
254
|
resize: none;
|
|
255
|
+
overflow: hidden;
|
|
256
256
|
}
|
|
257
257
|
}
|
|
258
258
|
}
|
|
@@ -3,19 +3,16 @@
|
|
|
3
3
|
:model-value="modelValue"
|
|
4
4
|
hide>
|
|
5
5
|
<div class="w-full">
|
|
6
|
+
<span v-if="label" class="color-primary-text">{{ label }}</span>
|
|
6
7
|
<div class="group-holder" v-for="(item,i) in modelValue" :key="i">
|
|
7
8
|
<div class="group-slot">
|
|
8
9
|
<slot :item="item" :index="i" :disableDel="disDel">
|
|
9
|
-
<div class="d-flex flex-wrap pt-5">
|
|
10
|
+
<div v-if="template" class="d-flex flex-wrap pt-5 v-start">
|
|
10
11
|
<template v-for="(v,k) in item" :key="i+'-'+k">
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<r-switch-input v-else-if="typeof v==='boolean'" class="flex-grow-0 me-1" :label="t(k)"
|
|
16
|
-
v-model="item[k]"></r-switch-input>
|
|
17
|
-
</template>
|
|
18
|
-
</div>
|
|
12
|
+
<component :is="template[k]['type']" v-model="item[k]" :label="t(k)"
|
|
13
|
+
class="flex-grow-0 me-1" v-bind="template[k]['props']"></component>
|
|
14
|
+
</template>
|
|
15
|
+
</div>
|
|
19
16
|
</slot>
|
|
20
17
|
</div>
|
|
21
18
|
<div class="group-action">
|
|
@@ -85,7 +82,17 @@ export default {
|
|
|
85
82
|
add() {
|
|
86
83
|
if (this.show_add) {
|
|
87
84
|
let a = this.modelValue || []
|
|
88
|
-
|
|
85
|
+
let b = {}
|
|
86
|
+
if (this.template) {
|
|
87
|
+
for (let k in this.template) {
|
|
88
|
+
let d = 'default' in this.template[k] ? this.template[k]['default'] : null
|
|
89
|
+
if (typeof d === 'object') {
|
|
90
|
+
d = this.$helper.clearProxy(d)
|
|
91
|
+
}
|
|
92
|
+
b[k] = d
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
a.push(b)
|
|
89
96
|
this.$emit('add', true)
|
|
90
97
|
this.$emit('update:modelValue', a)
|
|
91
98
|
}
|
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div :class="`${$r.prefix}json-view d-flex v-
|
|
2
|
+
<div :class="`${$r.prefix}json-view d-flex v-end flex-wrap`"
|
|
3
3
|
v-for="(value,key) in modelValue"
|
|
4
4
|
:key="key">
|
|
5
|
-
<div class="
|
|
5
|
+
<div class="d-flex v-center me-1">
|
|
6
6
|
<r-btn v-if="!disableDel" icon class="color-error-text" text @click="del(key)">
|
|
7
7
|
<r-icon v-html="$r.icons.delete"></r-icon>
|
|
8
8
|
</r-btn>
|
|
9
|
-
<
|
|
10
|
-
<r-text-input :tile="tile" :readonly="disableEditKey" :model-value="key"
|
|
11
|
-
@update:model-value="emitkey(key,$event)"></r-text-input>
|
|
12
|
-
:
|
|
13
|
-
</template>
|
|
9
|
+
<div v-if="typeof value==='object'">{{ key }}</div>
|
|
14
10
|
</div>
|
|
15
11
|
<div v-if="typeof value==='object'" class="flex-grow-1 w-full ps-10">
|
|
16
12
|
<r-json-input :tile="tile"
|
|
@@ -18,20 +14,21 @@
|
|
|
18
14
|
@update:model-value="emit(key,$event)"
|
|
19
15
|
:disableAdd="disableAdd||template!==undefined"
|
|
20
16
|
:disableDel="disableDel||template!==undefined"
|
|
21
|
-
|
|
22
|
-
:keyWidth="keyWidth"
|
|
23
|
-
:valueWidth="valueWidth"
|
|
17
|
+
disableEditKey
|
|
24
18
|
></r-json-input>
|
|
25
19
|
</div>
|
|
26
|
-
<div v-else class="mb-1
|
|
20
|
+
<div v-else class="mb-1 flex-grow-1">
|
|
27
21
|
<r-text-input v-if="typeof value==='string'"
|
|
28
22
|
:tile="tile"
|
|
23
|
+
:label="!is_array?key:''"
|
|
29
24
|
:model-value="value" @update:model-value="emit(key,$event)"></r-text-input>
|
|
30
25
|
<r-number-input v-else-if="typeof value==='number'"
|
|
31
26
|
:tile="tile"
|
|
27
|
+
:label="!is_array?key:''"
|
|
32
28
|
:model-value="value" @update:model-value="emit(key,$event)"></r-number-input>
|
|
33
29
|
<r-switch-input v-else-if="typeof value==='boolean'"
|
|
34
30
|
:tile="tile"
|
|
31
|
+
:label="!is_array?key:''"
|
|
35
32
|
:model-value="value" @update:model-value="emit(key,$event)"></r-switch-input>
|
|
36
33
|
|
|
37
34
|
</div>
|
|
@@ -44,17 +41,9 @@ export default {
|
|
|
44
41
|
props: {
|
|
45
42
|
modelValue: Object,
|
|
46
43
|
template: Object,
|
|
47
|
-
disableEditKey: Boolean,
|
|
48
44
|
disableAdd: Boolean,
|
|
49
45
|
disableDel: Boolean,
|
|
50
|
-
tile: Boolean
|
|
51
|
-
keyWidth: {
|
|
52
|
-
type: String,
|
|
53
|
-
default: '140px'
|
|
54
|
-
}, valueWidth: {
|
|
55
|
-
type: String,
|
|
56
|
-
default: '300px'
|
|
57
|
-
}
|
|
46
|
+
tile: Boolean
|
|
58
47
|
},
|
|
59
48
|
emits: ['update:model-value'],
|
|
60
49
|
data() {
|
|
@@ -105,4 +94,12 @@ export default {
|
|
|
105
94
|
<style lang="scss">
|
|
106
95
|
@import "../../../style/include";
|
|
107
96
|
|
|
97
|
+
.#{$prefix}json-view {
|
|
98
|
+
@include rtl() {
|
|
99
|
+
border-right: 1px solid var(--color-border);
|
|
100
|
+
}
|
|
101
|
+
@include ltr() {
|
|
102
|
+
border-left: 1px solid var(--color-border);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
108
105
|
</style>
|
|
@@ -1,42 +1,33 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div :class="`${$r.prefix}json`">
|
|
3
|
-
<div v-
|
|
4
|
-
|
|
5
|
-
<div
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
</div>
|
|
32
|
-
<div v-else-if="show" class="d-flex v-baseline">
|
|
33
|
-
<r-text-input
|
|
34
|
-
v-if="!is_array"
|
|
35
|
-
v-model="info.key"
|
|
36
|
-
:tile="tile"
|
|
37
|
-
class="w-30 pe-1"
|
|
38
|
-
:label="keyLabel"></r-text-input>
|
|
39
|
-
<div class="w-20" v-if="!valueType">
|
|
2
|
+
<div :class="`${$r.prefix}json-input`">
|
|
3
|
+
<div class="d-flex v-center">
|
|
4
|
+
<r-btn v-if="!disableEditKey" class="me-1 mb-1" icon @click="modeForm=!modeForm">{}</r-btn>
|
|
5
|
+
<div v-if="label">{{ label }}</div>
|
|
6
|
+
</div>
|
|
7
|
+
<div v-if="modeForm">
|
|
8
|
+
<json-view :model-value="modelValue"
|
|
9
|
+
@update:model-value="emit"
|
|
10
|
+
:template="template"
|
|
11
|
+
:disableAdd="disableAdd"
|
|
12
|
+
:disableDel="disableDel"
|
|
13
|
+
:tile="tile"
|
|
14
|
+
></json-view>
|
|
15
|
+
<r-btn
|
|
16
|
+
v-if="!show &&!disableAdd"
|
|
17
|
+
class="my-3 ms-1"
|
|
18
|
+
icon
|
|
19
|
+
size="small"
|
|
20
|
+
@click.prevent="open">
|
|
21
|
+
<r-icon v-html="$r.icons.plus"></r-icon>
|
|
22
|
+
</r-btn>
|
|
23
|
+
<div v-else-if="show" class="d-flex v-baseline">
|
|
24
|
+
<r-text-input
|
|
25
|
+
v-if="!is_array"
|
|
26
|
+
v-model="info.key"
|
|
27
|
+
:label="keyLabel"
|
|
28
|
+
:tile="tile"
|
|
29
|
+
class="w-30 pe-1"></r-text-input>
|
|
30
|
+
<div class="w-20" v-if="!valueType">
|
|
40
31
|
<r-select-input v-model="info.type"
|
|
41
32
|
:tile="tile"
|
|
42
33
|
class="me-1"
|
|
@@ -50,21 +41,24 @@
|
|
|
50
41
|
:tile="tile"
|
|
51
42
|
:label="valueLabel"
|
|
52
43
|
v-model="info.value"></r-text-input>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
<div class="display-5 d-flex v-end pb-2" :style="{'color':color}" :class="{
|
|
63
|
-
'mt-5':Object.values(modelValue||[]).length>0,
|
|
64
|
-
'mt-2':Object.values(modelValue||[]).length===0
|
|
65
|
-
}">{{ !is_array ? '}' : ']' }}
|
|
44
|
+
<r-number-input v-else-if="val_type==='number'"
|
|
45
|
+
:tile="tile"
|
|
46
|
+
:label="$t('value','renusify')" v-model="info.value"></r-number-input>
|
|
47
|
+
<r-switch-input v-else-if="val_type==='boolean'"
|
|
48
|
+
:tile="tile"
|
|
49
|
+
:label="$t('value','renusify')" v-model="info.value"></r-switch-input>
|
|
50
|
+
<r-btn @click.prevent="add" class="ms-1 color-success" rounded>{{ $t('add', 'renusify') }}</r-btn>
|
|
66
51
|
</div>
|
|
67
52
|
</div>
|
|
53
|
+
<textarea v-else :class="{'state-error':error}"
|
|
54
|
+
:rows="Object.keys(modelValue).length+5"
|
|
55
|
+
autocapitalize="off"
|
|
56
|
+
autocomplete="off"
|
|
57
|
+
autocorrect="off"
|
|
58
|
+
class="ltr w-full"
|
|
59
|
+
spellcheck="false"
|
|
60
|
+
@input="emitt"
|
|
61
|
+
@keydown="setTab">{{ JSON.stringify(modelValue, null, 4) }}</textarea>
|
|
68
62
|
</div>
|
|
69
63
|
</template>
|
|
70
64
|
<script>
|
|
@@ -80,14 +74,6 @@ export default {
|
|
|
80
74
|
modelValue: {
|
|
81
75
|
type: Object, Array
|
|
82
76
|
},
|
|
83
|
-
keyWidth: {
|
|
84
|
-
type: String,
|
|
85
|
-
default: '140px'
|
|
86
|
-
},
|
|
87
|
-
valueWidth: {
|
|
88
|
-
type: String,
|
|
89
|
-
default: '300px'
|
|
90
|
-
},
|
|
91
77
|
valueType: {
|
|
92
78
|
type: String,
|
|
93
79
|
validator: function (value) {
|
|
@@ -101,9 +87,11 @@ export default {
|
|
|
101
87
|
disableEditKey: Boolean,
|
|
102
88
|
disableDel: Boolean
|
|
103
89
|
},
|
|
104
|
-
emits:['update:
|
|
90
|
+
emits: ['update:model-value'],
|
|
105
91
|
data() {
|
|
106
92
|
return {
|
|
93
|
+
modeForm: true,
|
|
94
|
+
error: false,
|
|
107
95
|
show: false,
|
|
108
96
|
info: {},
|
|
109
97
|
color: `rgb(${this.$helper.randomInt(0, 255)},${this.$helper.randomInt(0, 255)},${this.$helper.randomInt(0, 255)})`
|
|
@@ -124,6 +112,30 @@ export default {
|
|
|
124
112
|
}
|
|
125
113
|
},
|
|
126
114
|
methods: {
|
|
115
|
+
setTab(event) {
|
|
116
|
+
if (event.keyCode === 9) {
|
|
117
|
+
event.preventDefault()
|
|
118
|
+
document.execCommand('insertText', false, ' '.repeat(4));
|
|
119
|
+
return false;
|
|
120
|
+
}
|
|
121
|
+
if (event.keyCode === 13) {
|
|
122
|
+
event.preventDefault()
|
|
123
|
+
let n = event.target.value.substr(0, event.target.selectionStart).split('\n')
|
|
124
|
+
n = n[n.length - 1].split('')
|
|
125
|
+
let w = ''
|
|
126
|
+
for (let i = 0; i < n.length; i++) {
|
|
127
|
+
if (n[i] === ' ') {
|
|
128
|
+
w += ' '
|
|
129
|
+
} else {
|
|
130
|
+
break
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
document.execCommand('insertText', false, '\n' + w);
|
|
135
|
+
return false;
|
|
136
|
+
}
|
|
137
|
+
return true
|
|
138
|
+
},
|
|
127
139
|
open() {
|
|
128
140
|
if (this.template) {
|
|
129
141
|
let d = this.modelValue
|
|
@@ -136,6 +148,15 @@ export default {
|
|
|
136
148
|
this.show = true
|
|
137
149
|
}
|
|
138
150
|
},
|
|
151
|
+
emitt(e) {
|
|
152
|
+
try {
|
|
153
|
+
this.error = false
|
|
154
|
+
e = JSON.parse(e.target.value)
|
|
155
|
+
this.$emit('update:model-value', e)
|
|
156
|
+
} catch (er) {
|
|
157
|
+
this.error = true
|
|
158
|
+
}
|
|
159
|
+
},
|
|
139
160
|
emit(e) {
|
|
140
161
|
this.$emit('update:model-value', e)
|
|
141
162
|
},
|
|
@@ -174,3 +195,17 @@ export default {
|
|
|
174
195
|
}
|
|
175
196
|
}
|
|
176
197
|
</script>
|
|
198
|
+
<style lang="scss">
|
|
199
|
+
@import "~renusify/style/include";
|
|
200
|
+
|
|
201
|
+
.#{$prefix}json-input {
|
|
202
|
+
textarea {
|
|
203
|
+
outline: none;
|
|
204
|
+
border: 1px solid var(--color-border);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.state-error {
|
|
208
|
+
border: 1px solid var(--color-error);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
</style>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<r-col v-if="item['formInput']!==false&&iff(options[key])"
|
|
9
9
|
:class="options[key]['r-col']?options[key]['r-col']:'col-12'">
|
|
10
10
|
<component
|
|
11
|
-
:is="
|
|
11
|
+
:is="buildName(item['type'])"
|
|
12
12
|
:label="$t(key)"
|
|
13
13
|
v-model="editedItem[key]"
|
|
14
14
|
v-bind="getAttr(options[key])"
|
|
@@ -99,6 +99,12 @@ export default {
|
|
|
99
99
|
}
|
|
100
100
|
},
|
|
101
101
|
methods: {
|
|
102
|
+
buildName(name) {
|
|
103
|
+
if (name.startsWith('r-')) {
|
|
104
|
+
return name
|
|
105
|
+
}
|
|
106
|
+
return 'r-' + name
|
|
107
|
+
},
|
|
102
108
|
iff(data) {
|
|
103
109
|
const that = this
|
|
104
110
|
|
package/components/index.js
CHANGED
|
@@ -87,7 +87,7 @@ const list = {
|
|
|
87
87
|
'r-checkbox-input': {'p': 'form/checkbox.vue', 'c': ['r-input', 'r-icon'], 'd': []},
|
|
88
88
|
'r-group-input': {
|
|
89
89
|
'p': 'form/group-input.vue',
|
|
90
|
-
'c': ['r-
|
|
90
|
+
'c': ['r-btn', 'r-icon'],
|
|
91
91
|
'd': []
|
|
92
92
|
},
|
|
93
93
|
'r-input': {'p': 'form/input.vue', 'c': ['r-icon'], 'd': []},
|