@netang/quasar 0.1.20 → 0.1.22

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 (9) hide show
  1. package/components/editor-code/index.vue +325 -289
  2. package/components/field-tree/index.vue +3 -5
  3. package/components/private/components/move-to-tree/index.vue +154 -154
  4. package/components/table/index.vue +2 -2
  5. package/components/tree/index.vue +1636 -0
  6. package/package.json +1 -1
  7. package/utils/$form.js +6 -5
  8. package/utils/$power.js +2 -2
  9. package/utils/$tree.js +145 -202
package/components/editor-code/index.vue CHANGED
@@ -1,289 +1,325 @@
1
- <template>
2
- <!-- :style="currentStyle" -->
3
- <div
4
- ref="targetRef"
5
- :style="currentStyle"
6
- ></div>
7
- </template>
8
-
9
- <script>
10
- import { ref, watch, computed, onMounted } from 'vue'
11
-
12
- import script from '@netang/utils/script'
13
- import $n_isNumeric from '@netang/utils/isNumeric'
14
- import $n_isValidValue from '@netang/utils/isValidValue'
15
- import $n_sleep from '@netang/utils/sleep'
16
- import $n_px from '@netang/utils/px'
17
-
18
-
19
- import $n_toast from '../../utils/toast'
20
-
21
- export default {
22
-
23
- /**
24
- * 标识
25
- */
26
- name: 'NEditorCode',
27
-
28
- /**
29
- * 声明属性
30
- */
31
- props: {
32
- // 值 v-model
33
- modelValue: {
34
- type: [ String, Number ],
35
- default: '',
36
- },
37
- // 宽度
38
- width: {
39
- type: [ String, Number ],
40
- default: '100%',
41
- },
42
- // 高度
43
- height: [ String, Number ],
44
- // 脚本语言
45
- language: String,
46
- // 是否只读
47
- readonly: Boolean,
48
- // 是否显示代码视图
49
- minimap: Boolean,
50
- // tab 长度
51
- tabSize: {
52
- type: Number,
53
- default: 4,
54
- },
55
- // 主题
56
- theme: {
57
- type: String,
58
- default: 'vs',
59
- },
60
- },
61
-
62
- /**
63
- * 声明事件
64
- */
65
- emits: [
66
- 'update:modelValue',
67
- ],
68
-
69
- /**
70
- * 组合式
71
- */
72
- setup(props, { emit }) {
73
-
74
- // ==========【计算属性】=========================================================================================
75
-
76
- /**
77
- * 当前样式
78
- */
79
- const currentStyle = computed(function () {
80
- return {
81
- width: $n_isNumeric(props.width) ? $n_px(props.width) : props.width,
82
- height: $n_isNumeric(props.height) ? $n_px(props.height) : props.height,
83
- }
84
- })
85
-
86
- // ==========【数据】=============================================================================================
87
-
88
- // 根节点
89
- const targetRef = ref(null)
90
-
91
- // 编辑器实例
92
- let $editor = null
93
-
94
- // 停止值观察
95
- let stopValueWatcher = false
96
-
97
- // 创建睡眠实例
98
- const sleep = $n_sleep()
99
-
100
- // ==========【监听数据】=========================================================================================
101
-
102
- /**
103
- * 监听声明值
104
- */
105
- watch(() => props.modelValue, function (val) {
106
-
107
- // 如果停止值观察
108
- if (stopValueWatcher) {
109
-
110
- // 则无任何操作
111
- return
112
- }
113
-
114
- // 取消停止值观察
115
- stopValueWatcher = false
116
-
117
- // 设置值
118
- setValue(val)
119
- })
120
-
121
- // ==========【方法】============================================================================================
122
-
123
- function load() {
124
-
125
- // 如果已加载
126
- if (window.monaco) {
127
- // 创建编辑器
128
- create()
129
- return
130
- }
131
-
132
- // 版本
133
- const version = '0.34.1'
134
-
135
- // 加载 script
136
- script([
137
- [
138
- `https://cdn.staticfile.org/monaco-editor/${version}/min/vs/loader.js`,
139
- `https://fastly.jsdelivr.net/npm/monaco-editor@${version}/min/vs/loader.js`,
140
- `https://unpkg.com/monaco-editor@${version}/min/vs/loader.js`,
141
- ]
142
- ])
143
- .then(function ([ url ]) {
144
-
145
- // 按需加载
146
- const _require = window.require
147
-
148
- // 配置
149
- _require.config({
150
- // 路径
151
- paths: {
152
- vs: url.replace('/loader.js', ''),
153
- },
154
- // 语言
155
- 'vs/nls' : {
156
- availableLanguages: {
157
- '*': 'zh-cn',
158
- }
159
- }
160
- })
161
-
162
- // 加载
163
- _require(['vs/editor/editor.main'], function () {
164
- // 创建编辑器
165
- create()
166
- })
167
- })
168
- }
169
-
170
- /**
171
- * 创建编辑器
172
- */
173
- function create() {
174
-
175
- // 创建编辑器
176
- $editor = monaco.editor.create(targetRef.value, {
177
- // 主题
178
- theme: props.theme,
179
- // 脚本语言
180
- language: props.language,
181
- // 自动布局
182
- automaticLayout: true,
183
- // 自动换行
184
- wordWrap: 'on',
185
- // tab 长度
186
- tabSize: props.tabSize,
187
- // 代码略缩图
188
- minimap: {
189
- enabled: props.minimap,
190
- },
191
- // 右键
192
- contextmenu: true,
193
- // 是否只读
194
- readOnly: props.readonly,
195
- })
196
-
197
- // 监听失去焦点事件
198
- $editor.onDidBlurEditorText(function () {
199
-
200
- // 获取编辑器内容
201
- const value = getValue()
202
- if (value === void 0) {
203
- return
204
- }
205
-
206
- // 停止值观察
207
- stopValueWatcher = true
208
-
209
- // 触发更新值
210
- emit('update:modelValue', value)
211
- })
212
-
213
- // 等编辑器全部加载完成后, 设置内容值
214
- sleep(300)
215
- .then(function () {
216
- // 设置值
217
- setValue(props.modelValue)
218
- })
219
- }
220
-
221
- /**
222
- * 设置值
223
- */
224
- function setValue(value) {
225
- if ($editor) {
226
-
227
- // 编辑器设置内容
228
- $editor.setValue(value)
229
-
230
- // 代码格式化
231
- $editor.getAction('editor.action.formatDocument').run()
232
- }
233
- }
234
-
235
- /**
236
- * 获取值
237
- */
238
- function getValue() {
239
-
240
- if ($editor) {
241
-
242
- // 获取编辑器的值
243
- let value = $editor.getValue()
244
-
245
- // 如果语言为 json
246
- if (
247
- props.language === 'json'
248
- && $n_isValidValue(value)
249
- ) {
250
- try {
251
- value = JSON.stringify(JSON.parse(value))
252
-
253
- } catch (e) {
254
- // 轻提示
255
- $n_toast({
256
- message: 'JSON 语法错误'
257
- })
258
- return
259
- }
260
- }
261
-
262
- return value
263
- }
264
-
265
- return ''
266
- }
267
-
268
- // ==========【生命周期】=========================================================================================
269
-
270
- /**
271
- * 实例被挂载后调用
272
- */
273
- onMounted(function() {
274
-
275
- // 加载
276
- load()
277
- })
278
-
279
- // ==========【返回】=========================================================================================
280
-
281
- return {
282
- // 根节点
283
- targetRef,
284
- // 当前样式
285
- currentStyle,
286
- }
287
- }
288
- }
289
- </script>
1
+ <template>
2
+ <!-- :style="currentStyle" -->
3
+ <div
4
+ ref="targetRef"
5
+ :style="currentStyle"
6
+ ></div>
7
+ </template>
8
+
9
+ <script>
10
+ import { ref, watch, computed, onMounted } from 'vue'
11
+
12
+ import script from '@netang/utils/script'
13
+ import $n_isNumeric from '@netang/utils/isNumeric'
14
+ import $n_isValidValue from '@netang/utils/isValidValue'
15
+ import $n_sleep from '@netang/utils/sleep'
16
+ import $n_px from '@netang/utils/px'
17
+
18
+ import $n_toast from '../../utils/toast'
19
+
20
+ export default {
21
+
22
+ /**
23
+ * 标识
24
+ */
25
+ name: 'NEditorCode',
26
+
27
+ /**
28
+ * 声明属性
29
+ */
30
+ props: {
31
+ // 值 v-model
32
+ modelValue: {
33
+ type: [ String, Number ],
34
+ default: '',
35
+ },
36
+ // 原始值
37
+ originalValue: [ String, Number ],
38
+ // 宽度
39
+ width: {
40
+ type: [ String, Number ],
41
+ default: '100%',
42
+ },
43
+ // 高度
44
+ height: [ String, Number ],
45
+ // 脚本语言
46
+ language: String,
47
+ // 是否只读
48
+ readonly: Boolean,
49
+ // 是否显示代码视图
50
+ minimap: Boolean,
51
+ // tab 长度
52
+ tabSize: {
53
+ type: Number,
54
+ default: 4,
55
+ },
56
+ // 主题
57
+ theme: {
58
+ type: String,
59
+ default: 'vs',
60
+ },
61
+ // 是否开启差异代码
62
+ diff: Boolean,
63
+ },
64
+
65
+ /**
66
+ * 声明事件
67
+ */
68
+ emits: [
69
+ 'update:modelValue',
70
+ ],
71
+
72
+ /**
73
+ * 组合式
74
+ */
75
+ setup(props, { emit }) {
76
+
77
+ // ==========【计算属性】=========================================================================================
78
+
79
+ /**
80
+ * 当前样式
81
+ */
82
+ const currentStyle = computed(function () {
83
+ return {
84
+ width: $n_isNumeric(props.width) ? $n_px(props.width) : props.width,
85
+ height: $n_isNumeric(props.height) ? $n_px(props.height) : props.height,
86
+ }
87
+ })
88
+
89
+ // ==========【数据】=============================================================================================
90
+
91
+ // 根节点
92
+ const targetRef = ref(null)
93
+
94
+ // 编辑器实例
95
+ let $editor = null
96
+
97
+ // 停止值观察
98
+ let stopValueWatcher = false
99
+
100
+ // 创建睡眠实例
101
+ const sleep = $n_sleep()
102
+
103
+ // ==========【监听数据】=========================================================================================
104
+
105
+ /**
106
+ * 监听声明值
107
+ */
108
+ if (! props.diff) {
109
+ watch(() => props.modelValue, function (val) {
110
+
111
+ // 如果停止值观察
112
+ if (stopValueWatcher) {
113
+
114
+ // 则无任何操作
115
+ return
116
+ }
117
+
118
+ // 取消停止值观察
119
+ stopValueWatcher = false
120
+
121
+ // 设置值
122
+ setValue(val)
123
+ })
124
+ }
125
+
126
+ // ==========【方法】============================================================================================
127
+
128
+ function load() {
129
+
130
+ // 如果已加载
131
+ if (window.monaco) {
132
+ // 创建编辑器
133
+ create()
134
+ return
135
+ }
136
+
137
+ // 版本
138
+ const version = '0.34.1'
139
+
140
+ // 加载 script
141
+ script([
142
+ [
143
+ `https://cdn.staticfile.org/monaco-editor/${version}/min/vs/loader.js`,
144
+ `https://fastly.jsdelivr.net/npm/monaco-editor@${version}/min/vs/loader.js`,
145
+ `https://unpkg.com/monaco-editor@${version}/min/vs/loader.js`,
146
+ ]
147
+ ])
148
+ .then(function ([ url ]) {
149
+
150
+ // 按需加载
151
+ const _require = window.require
152
+
153
+ // 配置
154
+ _require.config({
155
+ // 路径
156
+ paths: {
157
+ vs: url.replace('/loader.js', ''),
158
+ },
159
+ // 语言
160
+ 'vs/nls' : {
161
+ availableLanguages: {
162
+ '*': 'zh-cn',
163
+ }
164
+ }
165
+ })
166
+
167
+ // 加载
168
+ _require(['vs/editor/editor.main'], function () {
169
+ // 创建编辑器
170
+ create()
171
+ })
172
+ })
173
+ }
174
+
175
+ /**
176
+ * 创建编辑器
177
+ */
178
+ function create() {
179
+
180
+ // 创建编辑器
181
+ $editor = monaco.editor[props.diff ? 'createDiffEditor' : 'create'](targetRef.value, {
182
+ // 主题
183
+ theme: props.theme,
184
+ // 脚本语言
185
+ language: props.language,
186
+ // 自动布局
187
+ automaticLayout: true,
188
+ // 自动换行
189
+ wordWrap: 'on',
190
+ // tab 长度
191
+ tabSize: props.tabSize,
192
+ // 代码略缩图
193
+ minimap: {
194
+ enabled: props.minimap,
195
+ },
196
+ // 右键
197
+ contextmenu: true,
198
+ // 是否只读
199
+ readOnly: props.readonly,
200
+ })
201
+
202
+ // 监听失去焦点事件
203
+ if (! props.diff) {
204
+ $editor.onDidBlurEditorText(function () {
205
+
206
+ // 获取编辑器内容
207
+ const value = getValue()
208
+ if (value === void 0) {
209
+ return
210
+ }
211
+
212
+ // 停止值观察
213
+ stopValueWatcher = true
214
+
215
+ // 触发更新值
216
+ emit('update:modelValue', value)
217
+ })
218
+ }
219
+
220
+ // 等编辑器全部加载完成后, 设置内容值
221
+ sleep(300)
222
+ .then(function () {
223
+ // 设置值
224
+ setValue(props.modelValue)
225
+ })
226
+ }
227
+
228
+ /**
229
+ * 设置值
230
+ */
231
+ function setValue(value) {
232
+ if ($editor) {
233
+
234
+ // 如果是比较差异代码
235
+ if (props.diff) {
236
+ $editor.setModel({
237
+ original: monaco.editor.createModel(formatValue(props.originalValue), props.language),
238
+ modified: monaco.editor.createModel(formatValue(value), props.language),
239
+ })
240
+
241
+ // 否则是编辑代码
242
+ } else {
243
+ // 编辑器设置内容
244
+ $editor.setValue(formatValue(value))
245
+ }
246
+
247
+ // 代码格式化
248
+ // $editor.getAction('editor.action.formatDocument').run()
249
+ }
250
+ }
251
+
252
+ /**
253
+ * 获取值
254
+ */
255
+ function getValue() {
256
+
257
+ if ($editor) {
258
+
259
+ // 获取编辑器的值
260
+ let value = $editor.getValue()
261
+
262
+ // 如果语言为 json
263
+ if (
264
+ props.language === 'json'
265
+ && $n_isValidValue(value)
266
+ ) {
267
+ try {
268
+ value = JSON.stringify(JSON.parse(value))
269
+
270
+ } catch (e) {
271
+ // 轻提示
272
+ $n_toast({
273
+ message: 'JSON 语法错误'
274
+ })
275
+ return
276
+ }
277
+ }
278
+
279
+ return value
280
+ }
281
+
282
+ return ''
283
+ }
284
+
285
+ /**
286
+ * 格式化值
287
+ */
288
+ function formatValue(value) {
289
+ try {
290
+ if (value) {
291
+ if (
292
+ props.language === 'json'
293
+ && $n_isValidValue(value)
294
+ ) {
295
+ return JSON.stringify(JSON.parse(value), null, 2)
296
+ }
297
+ return value
298
+ }
299
+ } catch (e) {}
300
+
301
+ return ''
302
+ }
303
+
304
+ // ==========【生命周期】=========================================================================================
305
+
306
+ /**
307
+ * 实例被挂载后调用
308
+ */
309
+ onMounted(function() {
310
+
311
+ // 加载
312
+ load()
313
+ })
314
+
315
+ // ==========【返回】=========================================================================================
316
+
317
+ return {
318
+ // 根节点
319
+ targetRef,
320
+ // 当前样式
321
+ currentStyle,
322
+ }
323
+ }
324
+ }
325
+ </script>
package/components/field-tree/index.vue CHANGED
@@ -89,10 +89,9 @@
89
89
  >
90
90
  <q-card>
91
91
  <!-- 树 -->
92
- <q-tree
93
- class="q-pa-sm q-pr-md"
92
+ <n-tree
94
93
  ref="treeRef"
95
- style="min-width:260px;"
94
+ style="min-width:260px;max-height:380px;"
96
95
  :filter="inputValue"
97
96
  :nodes="currentTreeNodes"
98
97
  :node-key="nodeKey"
@@ -107,14 +106,13 @@
107
106
  >
108
107
  <template v-slot:default-header="{ node }">
109
108
  <div
110
- class="cursor-pointer full-width"
111
109
  :class="{
112
110
  'text-primary': checkTreeNodeActive(node),
113
111
  }"
114
112
  @click="onNode($event, node)"
115
113
  >{{node.label}}</div>
116
114
  </template>
117
- </q-tree>
115
+ </n-tree>
118
116
 
119
117
  <!-- loading -->
120
118
  <div class="flex flex-center" style="height:100px" v-else>