renusify 2.3.2 → 2.4.1

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.
Files changed (23) hide show
  1. package/components/bar/scss/toolbar.scss +0 -1
  2. package/components/calendar/month.vue +2 -2
  3. package/components/calendar/year.vue +2 -2
  4. package/components/codeEditor/highlightCss.vue +12 -24
  5. package/components/codeEditor/highlightHtml.vue +14 -29
  6. package/components/codeEditor/highlightJs.vue +14 -25
  7. package/components/codeEditor/index.vue +214 -205
  8. package/components/codeEditor/mixin.js +1 -42
  9. package/components/form/dateInput/month.vue +2 -2
  10. package/components/form/dateInput/year.vue +2 -2
  11. package/components/form/jsonInput/index.vue +29 -19
  12. package/components/form/text-editor/index.vue +65 -8
  13. package/components/form/text-editor/style.scss +6 -0
  14. package/components/highlight/index.js +1 -0
  15. package/components/highlight/index.vue +46 -0
  16. package/components/highlight/mixin.js +1132 -0
  17. package/components/highlight/style.scss +107 -0
  18. package/components/index.js +1 -0
  19. package/components/nestable/NestableItem.vue +6 -4
  20. package/index.js +0 -2
  21. package/package.json +1 -1
  22. package/style/app.scss +13 -13
  23. package/style/variables/base.scss +10 -10
package/components/codeEditor/index.vue CHANGED
@@ -1,136 +1,137 @@
1
1
  <template>
2
- <div :class="`${$r.prefix}code-editor`">
3
- <div class="code-action text-right">
4
- <r-btn
5
- class="color-white-text"
6
- icon
7
- text
8
- @click.prevent="$helper.copy($refs.codeView.innerText)"
9
- >
10
- <r-icon v-html="$r.icons.copy"></r-icon>
11
- </r-btn>
12
- <r-btn
13
- class="color-white-text"
14
- icon
15
- text
16
- @click.prevent="pretty"
17
- >
18
- P
19
- </r-btn>
20
- <r-btn v-if="show === 'code' && runnable" class="color-white-text" text @click.prevent="show = 'run'">
21
- run
22
- <r-icon v-html="$r.icons.play" exact></r-icon>
23
- </r-btn>
24
- <r-btn v-if="show === 'run'" class="color-white-text" text @click.prevent="show = 'code'">
25
- <r-icon v-html="$r.icons.code_tags" exact></r-icon>
26
- </r-btn>
27
- </div>
28
- <div v-if="show === 'run' && runnable" class="code-compile">
29
- <r-code-editor-run
30
- :id="id"
31
- :script="scr"
32
- :css="sty"
33
- :template="temp"
34
- ></r-code-editor-run>
35
- </div>
36
- <div v-show="show !== 'run'" ref="codeView" class="code-wrapper">
37
- <div>
38
- <span v-show="templateShow" class="color-green">&lt;template&gt;</span>
39
- <highlight-html ref="h-html" v-model="temp"></highlight-html>
40
- <span v-show="templateShow" class="color-green">&lt;/template&gt;</span>
41
- </div>
42
- <div>
43
- <span v-show="scriptShow" class="color-orange"
2
+ <div :class="`${$r.prefix}code-editor`">
3
+ <div class="code-action text-right">
4
+ <r-btn
5
+ class="color-white-text"
6
+ icon
7
+ text
8
+ @click.prevent="$helper.copy($refs.codeView.innerText)"
9
+ >
10
+ <r-icon v-html="$r.icons.copy"></r-icon>
11
+ </r-btn>
12
+ <r-btn
13
+ v-if="runnable"
14
+ class="color-white-text"
15
+ icon
16
+ text
17
+ @click.prevent="pretty"
18
+ >
19
+ P
20
+ </r-btn>
21
+ <r-btn v-if="show === 'code' && runnable" class="color-white-text" text @click.prevent="show = 'run'">
22
+ run
23
+ <r-icon exact v-html="$r.icons.play"></r-icon>
24
+ </r-btn>
25
+ <r-btn v-if="show === 'run'" class="color-white-text" text @click.prevent="show = 'code'">
26
+ <r-icon exact v-html="$r.icons.code_tags"></r-icon>
27
+ </r-btn>
28
+ </div>
29
+ <div v-if="show === 'run' && runnable" class="code-compile">
30
+ <r-code-editor-run
31
+ :id="id"
32
+ :css="sty"
33
+ :script="scr"
34
+ :template="temp"
35
+ ></r-code-editor-run>
36
+ </div>
37
+ <div v-show="show !== 'run'" ref="codeView" class="code-wrapper">
38
+ <div>
39
+ <span v-show="templateShow" class="highlight-syn-func">&lt;template&gt;</span>
40
+ <highlight-html ref="h-html" v-model="temp"></highlight-html>
41
+ <span v-show="templateShow" class="highlight-syn-func">&lt;/template&gt;</span>
42
+ </div>
43
+ <div>
44
+ <span v-show="scriptShow" class="highlight-syn-var"
44
45
  >&lt;script&gt;<br/>export default {</span
45
46
  >
46
- <highlight-script ref="h-js" v-model="scr"></highlight-script>
47
- <span v-show="scriptShow" class="color-orange">}<br/>&lt;/script&gt;</span>
48
- </div>
49
- <div>
50
- <span v-show="cssShow" class="color-orange"
47
+ <highlight-script ref="h-js" v-model="scr"></highlight-script>
48
+ <span v-show="scriptShow" class="highlight-syn-var">}<br/>&lt;/script&gt;</span>
49
+ </div>
50
+ <div>
51
+ <span v-show="cssShow" class="highlight-syn-var"
51
52
  >&lt;style lang<span class="color-green">="css"</span>&gt;</span
52
53
  >
53
- <highlight-css ref="h-css" v-model="sty"></highlight-css>
54
- <span v-show="cssShow" class="color-orange">&lt;/style&gt;</span>
55
- </div>
56
- </div>
54
+ <highlight-css ref="h-css" v-model="sty"></highlight-css>
55
+ <span v-show="cssShow" class="highlight-syn-var">&lt;/style&gt;</span>
56
+ </div>
57
57
  </div>
58
+ </div>
58
59
  </template>
59
60
 
60
61
  <script>
61
62
  import {defineAsyncComponent} from 'vue'
62
63
 
63
64
  export default {
64
- name: "r-code-editor",
65
- components: {
66
- HighlightCss: defineAsyncComponent(() =>
67
- import("./highlightCss.vue")
68
- ), HighlightScript: defineAsyncComponent(() =>
69
- import("./highlightJs.vue")
70
- ), highlightHtml: defineAsyncComponent(() =>
71
- import("./highlightHtml.vue")
72
- ), RCodeEditorRun: defineAsyncComponent(() =>
73
- import("./run.vue")
74
- )
65
+ name: "r-code-editor",
66
+ components: {
67
+ HighlightCss: defineAsyncComponent(() =>
68
+ import("./highlightCss.vue")
69
+ ), HighlightScript: defineAsyncComponent(() =>
70
+ import("./highlightJs.vue")
71
+ ), highlightHtml: defineAsyncComponent(() =>
72
+ import("./highlightHtml.vue")
73
+ ), RCodeEditorRun: defineAsyncComponent(() =>
74
+ import("./run.vue")
75
+ )
76
+ },
77
+ props: {
78
+ runnable: Boolean,
79
+ templateShow: {type: Boolean, default: true},
80
+ scriptShow: {type: Boolean, default: true},
81
+ cssShow: {type: Boolean, default: true},
82
+ template: String,
83
+ script: String,
84
+ css: String,
85
+ },
86
+ emits: ["update:template", "update:script", "update:css"],
87
+ data() {
88
+ return {
89
+ show: "code",
90
+ code: "",
91
+ edited: false,
92
+ temp: this.template,
93
+ scr: this.script,
94
+ sty: this.css,
95
+ id: this.$helper.uniqueId(),
96
+ };
97
+ },
98
+ created() {
99
+ if (!this.$r.icons.play) {
100
+ this.$r.icons.play =
101
+ '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5.14v14l11-7l-11-7Z"/></svg>';
102
+ }
103
+ if (!this.$r.icons.code_tags) {
104
+ this.$r.icons.code_tags =
105
+ '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4Z"/></svg>';
106
+ }
107
+ },
108
+ watch: {
109
+ template: function (n) {
110
+ this.temp = n
75
111
  },
76
- props: {
77
- runnable: Boolean,
78
- templateShow: {type: Boolean, default: true},
79
- scriptShow: {type: Boolean, default: true},
80
- cssShow: {type: Boolean, default: true},
81
- template: String,
82
- script: String,
83
- css: String,
112
+ script: function (n) {
113
+ this.scr = n
84
114
  },
85
- emits: ["update:template", "update:script", "update:css"],
86
- data() {
87
- return {
88
- show: "code",
89
- code: "",
90
- edited: false,
91
- temp: this.template,
92
- scr: this.script,
93
- sty: this.css,
94
- id: this.$helper.uniqueId(),
95
- };
115
+ css: function (n) {
116
+ this.sty = n
96
117
  },
97
- created() {
98
- if (!this.$r.icons.play) {
99
- this.$r.icons.play =
100
- '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5.14v14l11-7l-11-7Z"/></svg>';
101
- }
102
- if (!this.$r.icons.code_tags) {
103
- this.$r.icons.code_tags =
104
- '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4Z"/></svg>';
105
- }
118
+ temp: function () {
119
+ this.$emit("update:template", this.temp);
106
120
  },
107
- watch: {
108
- template: function (n) {
109
- this.temp = n
110
- },
111
- script: function (n) {
112
- this.scr = n
113
- },
114
- css: function (n) {
115
- this.sty = n
116
- },
117
- temp: function () {
118
- this.$emit("update:template", this.temp);
119
- },
120
- scr: function () {
121
- this.$emit("update:script", this.scr);
122
- },
123
- sty: function () {
124
- this.$emit("update:css", this.sty);
125
- },
121
+ scr: function () {
122
+ this.$emit("update:script", this.scr);
126
123
  },
127
- methods: {
128
- pretty() {
129
- this.temp = this.$refs["h-html"].pretty_html(this.temp)
130
- this.scr = this.$refs["h-js"].pretty_js(this.scr)
131
- this.sty = this.$refs["h-css"].pretty_js(this.sty)
132
- }
124
+ sty: function () {
125
+ this.$emit("update:css", this.sty);
133
126
  },
127
+ },
128
+ methods: {
129
+ pretty() {
130
+ this.temp = this.$refs["h-html"].pretty_html(this.temp)
131
+ this.scr = this.$refs["h-js"].pretty_js(this.scr)
132
+ this.sty = this.$refs["h-css"].pretty_js(this.sty)
133
+ }
134
+ },
134
135
  };
135
136
  </script>
136
137
 
@@ -138,110 +139,118 @@ export default {
138
139
  @use "../../style/variables/base";
139
140
 
140
141
  .#{base.$prefix}code-editor {
141
- position: relative;
142
- white-space: break-spaces;
143
- caret-color: white;
144
- background-color: #15212e;
145
- color: #fff;
142
+ position: relative;
143
+ white-space: break-spaces;
144
+ caret-color: white;
145
+ background-color: #15212e;
146
+ color: #fff;
147
+ padding: 10px;
148
+ font-size: 14px;
149
+
150
+ .code-script,
151
+ .code-template {
152
+ padding: 0 20px;
153
+ }
154
+
155
+ .code-wrapper {
156
+ direction: ltr;
157
+ text-align: left;
146
158
  padding: 10px;
147
- font-size: 14px;
159
+ }
148
160
 
149
- .code-script,
150
- .code-template {
151
- padding: 0 20px;
152
- }
161
+ .code-compile {
162
+ background-color: #fafafa;
163
+ min-height: 300px;
164
+ padding: 10px;
165
+ margin: 0 -10px -10px -10px;
166
+ color: black;
167
+ }
153
168
 
154
- .code-wrapper {
155
- direction: ltr;
156
- text-align: left;
157
- padding: 10px;
158
- }
159
169
 
160
- .code-compile {
161
- background-color: #fafafa;
162
- min-height: 300px;
163
- padding: 10px;
164
- margin: 0 -10px -10px -10px;
165
- color: black;
166
- }
170
+ .highlight-syn-deleted,
171
+ .highlight-syn-err,
172
+ .highlight-syn-var {
173
+ color: #ff5261
174
+ }
167
175
 
168
- .color-func {
169
- color: #db92e3;
170
- }
176
+ .highlight-syn-section,
177
+ .highlight-syn-kwd {
178
+ color: #ff7cc6
179
+ }
171
180
 
172
- .color-func2 {
173
- color: #deca10;
174
- }
181
+ .highlight-syn-class {
182
+ color: #eab07c
183
+ }
175
184
 
176
- .color-orange {
177
- color: orange;
178
- }
185
+ .highlight-numbers,
186
+ .highlight-syn-cmnt {
187
+ color: #7d828b
188
+ }
179
189
 
180
- .color-green {
181
- color: #0cde27;
182
- }
190
+ .highlight-syn-insert,
191
+ .highlight-syn-type,
192
+ .highlight-syn-func,
193
+ .highlight-syn-bool {
194
+ color: #71d58a
195
+ }
183
196
 
184
- .color-blue {
185
- color: #3bb7ee;
186
- }
197
+ .highlight-syn-num {
198
+ color: #b581fd
199
+ }
187
200
 
188
- .color-number {
189
- color: #7ad5ff;
190
- }
201
+ .highlight-syn-oper {
202
+ color: #80c6ff
203
+ }
191
204
 
192
- .color-purple {
193
- color: #d2a8ee;
194
- }
205
+ .highlight-syn-str {
206
+ color: #4dacfa
207
+ }
208
+
209
+ .code-editor-highlight {
210
+ position: relative;
211
+ margin: -12px 0;
195
212
 
196
- .color-comment {
197
- color: #898d8c;
213
+ .text-preview {
214
+ white-space: pre-wrap;
215
+ word-break: keep-all;
216
+ overflow-wrap: break-word;
217
+ min-height: 40px;
218
+ font-size: 14px;
219
+ letter-spacing: 2px;
220
+ line-height: 20px;
221
+ margin: 0;
222
+ border: 0;
223
+ padding: 12px;
198
224
  }
199
225
 
200
- .code-editor-highlight {
201
- position: relative;
202
- margin: -12px 0;
203
-
204
- .text-preview {
205
- white-space: pre-wrap;
206
- word-break: keep-all;
207
- overflow-wrap: break-word;
208
- min-height: 40px;
209
- font-size: 14px;
210
- letter-spacing: 2px;
211
- line-height: 20px;
212
- margin: 0;
213
- border: 0;
214
- padding: 12px;
215
- }
216
-
217
- textarea {
218
- &::selection {
219
- background-color: #fafafa;
220
- -webkit-text-fill-color: #000;
221
- color: #000;
222
- }
223
-
224
- padding: 12px;
225
- margin: 0;
226
- border: 0;
227
- font-size: 14px;
228
- letter-spacing: 2px;
229
- line-height: 20px;
230
- -webkit-font-smoothing: antialiased;
231
- -webkit-text-fill-color: transparent;
232
- outline: none;
233
- width: 100%;
234
- height: 100%;
235
- min-height: 40px;
236
- white-space: pre-wrap;
237
- word-break: keep-all;
238
- overflow-wrap: break-word;
239
- position: absolute;
240
- top: 0;
241
- left: 0;
242
- resize: none;
243
- overflow: hidden;
244
- }
226
+ textarea {
227
+ &::selection {
228
+ background-color: #fafafa;
229
+ -webkit-text-fill-color: #000;
230
+ color: #000;
231
+ }
232
+
233
+ padding: 12px;
234
+ margin: 0;
235
+ border: 0;
236
+ font-size: 14px;
237
+ letter-spacing: 2px;
238
+ line-height: 20px;
239
+ -webkit-font-smoothing: antialiased;
240
+ -webkit-text-fill-color: transparent;
241
+ outline: none;
242
+ width: 100%;
243
+ height: 100%;
244
+ min-height: 40px;
245
+ white-space: pre-wrap;
246
+ word-break: keep-all;
247
+ overflow-wrap: break-word;
248
+ position: absolute;
249
+ top: 0;
250
+ left: 0;
251
+ resize: none;
252
+ overflow: hidden;
245
253
  }
254
+ }
246
255
  }
247
256
  </style>
package/components/codeEditor/mixin.js CHANGED
@@ -140,47 +140,6 @@ export default {
140
140
  return false;
141
141
  }
142
142
  return true
143
- },
144
- re_quote(res) {
145
- let regex = /"([^"]*)"/g;
146
- res = res.replace(regex, '<span class="color-green code-editor-span">"$1"</span>');
147
- regex = /'([^']*)'/g;
148
- return res.replace(regex, "<span class=\"color-green code-editor-span\">'$1'</span>");
149
- },
150
- re_special(res, regex = /([{}\[\]])/g, color = "color-orange") {
151
- return res.replace(regex, '<span class="' + color + ' code-editor-span">$1</span>')
152
- },
153
- re_number(res) {
154
- return res.replace(/\b([0-9.]+)\b/g, '<span class="color-blue code-editor-span">$1</span>')
155
- },
156
- re_words(res, words) {
157
- words.forEach((word) => {
158
- res = res.replace(new RegExp("\\b(" + word + ")\\b", 'g'), '<span class="color-orange code-editor-span">$1</span>')
159
- })
160
-
161
- return res;
162
- },
163
- re_comment(res) {
164
- //eslint-disable-next-line
165
- let regex = /(\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*)$/gm;
166
- return res.replace(regex, '<span class="color-comment code-editor-span">$1</span>')
167
- },
168
- re_func(res) {
169
- //function like Date()
170
- let regex = /([$a-zA-Z-0-9_\s]+)(?=\()/g;
171
- res = res.replace(regex, '<span class="color-func2 code-editor-span">$1</span>')
172
-
173
- // Object keys
174
- regex = /([a-zA-Z-0-9_]+)(?=:)/g;
175
- res = res.replace(regex, '<span class="color-purple code-editor-span">$1</span>')
176
-
177
-
178
- //function like $r $d()
179
- regex = /(\$([a-zA-z0-9]*)[.(])/g;
180
- res = res.replace(regex, '<span class="color-func code-editor-span">$1</span>')
181
-
182
-
183
- return res;
184
- },
143
+ }
185
144
  }
186
145
  }
package/components/form/dateInput/month.vue CHANGED
@@ -1,9 +1,9 @@
1
1
  <template>
2
- <div class="d-flex flex-wrap">
2
+ <div class="d-flex flex-wrap h-space-around">
3
3
  <r-btn v-for="i in ls"
4
4
  :key="i"
5
5
  outlined
6
- class="w-30 ma-2"
6
+ class="w-25 ma-1"
7
7
  :class="{'color-one':i===modelValue}"
8
8
  @click.prevent="emit(i)">
9
9
  {{
package/components/form/dateInput/year.vue CHANGED
@@ -1,8 +1,8 @@
1
1
  <template>
2
- <div class="date-picker-year d-flex flex-wrap">
2
+ <div class="date-picker-year d-flex flex-wrap h-space-around">
3
3
  <r-btn v-for="i in 200"
4
4
  :key="i"
5
- class="w-30 ma-2"
5
+ class="w-25 ma-1"
6
6
  :class="{'color-one year-select':modelValue+i-100===modelValue}"
7
7
  outlined
8
8
  @click.prevent="emit(modelValue+i-100)">
package/components/form/jsonInput/index.vue CHANGED
@@ -65,13 +65,13 @@
65
65
  :rows="modelValue?Object.keys(modelValue).length+5:5"
66
66
  @keydown="setTab"
67
67
  ></textarea>
68
- <div class="text-preview" v-html="build"></div>
68
+ <div class="text-preview" v-html="code"></div>
69
69
  </div>
70
70
  </div>
71
71
  </template>
72
72
  <script>
73
73
  import {defineAsyncComponent} from 'vue'
74
- import mixin from '../../codeEditor/mixin.js'
74
+ import mixin from '../../highlight/mixin.js'
75
75
 
76
76
  export default {
77
77
  name: 'r-json',
@@ -105,9 +105,15 @@ export default {
105
105
  modeForm: true,
106
106
  error: false,
107
107
  show: false,
108
+ code: "",
108
109
  info: {}
109
110
  }
110
111
  },
112
+ async created() {
113
+ if (this.modelValue) {
114
+ await this.build_code()
115
+ }
116
+ },
111
117
  watch: {
112
118
  modeForm: function () {
113
119
  this.lazyValue = JSON.stringify(this.modelValue || {}, null, 4)
@@ -123,9 +129,10 @@ export default {
123
129
  }
124
130
 
125
131
  },
126
- lazyValue: function () {
132
+ lazyValue: async function () {
127
133
  try {
128
134
  this.error = false
135
+ await this.build_code()
129
136
  this.$emit('update:modelValue', JSON.parse(this.lazyValue))
130
137
  } catch (er) {
131
138
  this.error = true
@@ -139,17 +146,6 @@ export default {
139
146
  }
140
147
  return this.tile
141
148
  },
142
- build() {
143
- if (!this.lazyValue) {
144
- return "";
145
- }
146
- let res = this.lazyValue
147
- res = this.re_quote(res);
148
- res = this.re_words(res, [true, false, null]);
149
- res = this.re_number(res);
150
- res = this.re_special(res, /([{},:\[\]])/g, 'color-orange');
151
- return res;
152
- },
153
149
  is_array() {
154
150
  if (this.baseArray) {
155
151
  return true
@@ -158,6 +154,9 @@ export default {
158
154
  }
159
155
  },
160
156
  methods: {
157
+ async build_code() {
158
+ this.code = await this.highlight(this.lazyValue, "json", true)
159
+ },
161
160
  open() {
162
161
  if (this.template) {
163
162
  let d = this.modelValue
@@ -288,18 +287,29 @@ export default {
288
287
  overflow: hidden;
289
288
  }
290
289
 
291
- .color-orange {
290
+
291
+ .highlight-syn-deleted,
292
+ .highlight-syn-err,
293
+ .highlight-syn-var {
292
294
  color: var(--color-error);
293
295
  }
294
296
 
295
- .color-green {
296
- color: var(--color-success);
297
- }
298
297
 
298
+ .highlight-syn-insert,
299
+ .highlight-syn-type,
300
+ .highlight-syn-func,
301
+ .highlight-syn-bool {
302
+ color: var(--color-warning);
303
+ }
299
304
 
300
- .color-blue {
305
+ .highlight-syn-num, .highlight-numbers {
301
306
  color: var(--color-info);
302
307
  }
308
+
309
+
310
+ .highlight-syn-str {
311
+ color: var(--color-success);
312
+ }
303
313
  }
304
314
  }
305
315
  </style>