@mixd-id/web-scaffold 0.1.230406291 → 0.1.230406293
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/package.json
CHANGED
package/src/components/List.vue
CHANGED
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
</div>
|
|
121
121
|
</slot>
|
|
122
122
|
|
|
123
|
-
<div v-if="readyState ===
|
|
123
|
+
<div v-if="readyState === 2" class="flex-1 flex items-center justify-center">
|
|
124
124
|
<svg class="animate-spin" width="36" height="36" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
|
125
125
|
</div>
|
|
126
126
|
|
|
@@ -314,7 +314,7 @@ export default{
|
|
|
314
314
|
this.preset.columns = JSON.parse(JSON.stringify(this.config.columns))
|
|
315
315
|
}
|
|
316
316
|
|
|
317
|
-
this.readyState =
|
|
317
|
+
this.readyState = 2
|
|
318
318
|
return this.socket.send(this.src, {
|
|
319
319
|
...this.preset,
|
|
320
320
|
itemsPerPage: this.data.itemsPerPage,
|
|
@@ -405,7 +405,7 @@ export default{
|
|
|
405
405
|
|
|
406
406
|
const reqItems = Object.values(this.enumCache[column.key]).filter(_ => !_.text).map(_ => _.value)
|
|
407
407
|
|
|
408
|
-
if(reqItems.length > 0){
|
|
408
|
+
if(reqItems.length > 0 && reqItems !== this.lastEnumItems){
|
|
409
409
|
|
|
410
410
|
const [ src, key, attr ] = column.enumSrc.split(':')
|
|
411
411
|
this.socket.send(src, {
|
|
@@ -431,6 +431,8 @@ export default{
|
|
|
431
431
|
if(!this.enumCache[column.key][key].text)
|
|
432
432
|
this.enumCache[column.key][key].text = key
|
|
433
433
|
}
|
|
434
|
+
|
|
435
|
+
this.lastEnumItems = reqItems
|
|
434
436
|
})
|
|
435
437
|
.catch(err => this.log('Load enums error', err))
|
|
436
438
|
}
|
|
@@ -830,6 +832,7 @@ export default{
|
|
|
830
832
|
compPrefix: '',
|
|
831
833
|
enumCache: {},
|
|
832
834
|
extItems: null,
|
|
835
|
+
lastEnumItems: null,
|
|
833
836
|
}
|
|
834
837
|
},
|
|
835
838
|
|
|
@@ -351,86 +351,93 @@ export default{
|
|
|
351
351
|
|
|
352
352
|
for(let appearance of column.appearances){
|
|
353
353
|
|
|
354
|
-
let conditionMatched =
|
|
354
|
+
let conditionMatched = false
|
|
355
355
|
for(let condition of appearance.conditions ?? []){
|
|
356
356
|
switch(condition.operator){
|
|
357
357
|
|
|
358
358
|
case '>':
|
|
359
|
-
if(value
|
|
360
|
-
conditionMatched =
|
|
359
|
+
if(value > condition.value){
|
|
360
|
+
conditionMatched = true
|
|
361
361
|
}
|
|
362
362
|
break
|
|
363
363
|
|
|
364
364
|
case '>=':
|
|
365
|
-
if(value
|
|
366
|
-
conditionMatched =
|
|
365
|
+
if(value >= condition.value){
|
|
366
|
+
conditionMatched = true
|
|
367
367
|
}
|
|
368
368
|
break
|
|
369
369
|
|
|
370
370
|
case '=':
|
|
371
|
-
if(value
|
|
372
|
-
conditionMatched =
|
|
371
|
+
if(value === condition.value){
|
|
372
|
+
conditionMatched = true
|
|
373
373
|
}
|
|
374
374
|
break
|
|
375
375
|
|
|
376
376
|
case '<':
|
|
377
|
-
if(value
|
|
378
|
-
conditionMatched =
|
|
377
|
+
if(value < condition.value){
|
|
378
|
+
conditionMatched = true
|
|
379
379
|
}
|
|
380
380
|
break
|
|
381
381
|
|
|
382
382
|
case '<=':
|
|
383
|
-
if(value
|
|
384
|
-
conditionMatched =
|
|
383
|
+
if(value <= condition.value){
|
|
384
|
+
conditionMatched = true
|
|
385
385
|
}
|
|
386
386
|
break
|
|
387
387
|
|
|
388
388
|
case 'startsWith':
|
|
389
|
-
if(
|
|
390
|
-
conditionMatched =
|
|
389
|
+
if(value.startsWith(condition.value)){
|
|
390
|
+
conditionMatched = true
|
|
391
391
|
}
|
|
392
392
|
break
|
|
393
393
|
|
|
394
394
|
case 'notStartsWith':
|
|
395
|
-
if(value.startsWith(condition.value)){
|
|
396
|
-
conditionMatched =
|
|
395
|
+
if(!value.startsWith(condition.value)){
|
|
396
|
+
conditionMatched = true
|
|
397
397
|
}
|
|
398
398
|
break
|
|
399
399
|
|
|
400
400
|
case 'contains':
|
|
401
|
-
if(value.indexOf(condition.value)
|
|
402
|
-
conditionMatched =
|
|
401
|
+
if(value.indexOf(condition.value) >= 0){
|
|
402
|
+
conditionMatched = true
|
|
403
403
|
}
|
|
404
404
|
break
|
|
405
405
|
|
|
406
406
|
case 'notContains':
|
|
407
|
-
if(value.indexOf(condition.value)
|
|
408
|
-
conditionMatched =
|
|
407
|
+
if(value.indexOf(condition.value) < 0){
|
|
408
|
+
conditionMatched = true
|
|
409
409
|
}
|
|
410
410
|
break
|
|
411
411
|
|
|
412
412
|
case 'endsWith':
|
|
413
|
-
if(
|
|
414
|
-
conditionMatched =
|
|
413
|
+
if(value.endsWith(condition.value)){
|
|
414
|
+
conditionMatched = true
|
|
415
415
|
}
|
|
416
416
|
break
|
|
417
417
|
|
|
418
418
|
case 'notEndsWith':
|
|
419
|
-
if(value.endsWith(condition.value)){
|
|
420
|
-
conditionMatched =
|
|
419
|
+
if(!value.endsWith(condition.value)){
|
|
420
|
+
conditionMatched = true
|
|
421
421
|
}
|
|
422
422
|
break
|
|
423
423
|
|
|
424
|
+
case 'none':
|
|
425
|
+
conditionMatched = true
|
|
426
|
+
break
|
|
427
|
+
|
|
424
428
|
case 'regex':
|
|
425
429
|
break
|
|
426
430
|
|
|
427
431
|
}
|
|
428
432
|
|
|
429
|
-
if(
|
|
433
|
+
if(conditionMatched) break
|
|
430
434
|
}
|
|
431
435
|
|
|
436
|
+
console.log('value', value, conditionMatched)
|
|
437
|
+
|
|
432
438
|
if(conditionMatched){
|
|
433
439
|
appearanceClass = appearance.class
|
|
440
|
+
break
|
|
434
441
|
}
|
|
435
442
|
}
|
|
436
443
|
}
|
|
@@ -35,23 +35,19 @@ export default{
|
|
|
35
35
|
|
|
36
36
|
emits: [ 'select' ],
|
|
37
37
|
|
|
38
|
-
props: {
|
|
39
|
-
|
|
40
|
-
columns: Array,
|
|
41
|
-
|
|
42
|
-
},
|
|
43
|
-
|
|
44
38
|
data(){
|
|
45
39
|
return {
|
|
46
40
|
isOpen: false,
|
|
47
41
|
context: null,
|
|
42
|
+
columns: []
|
|
48
43
|
}
|
|
49
44
|
},
|
|
50
45
|
|
|
51
46
|
methods: {
|
|
52
47
|
|
|
53
|
-
open(context){
|
|
48
|
+
open(context, columns){
|
|
54
49
|
this.context = context
|
|
50
|
+
this.columns = columns
|
|
55
51
|
this.isOpen = true
|
|
56
52
|
},
|
|
57
53
|
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
|
|
178
178
|
<button type="button"
|
|
179
179
|
class="text-primary flex flex-row items-center justify-center p-3"
|
|
180
|
-
@click="$refs.columnSelector.open(addFilter)">
|
|
180
|
+
@click="$refs.columnSelector.open(addFilter, filterColumns)">
|
|
181
181
|
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
|
|
182
182
|
Add Filter
|
|
183
183
|
</button>
|
|
@@ -468,7 +468,7 @@
|
|
|
468
468
|
<div>
|
|
469
469
|
<div class="flex flex-row items-center gap-2">
|
|
470
470
|
<label>Groups</label>
|
|
471
|
-
<button type="button" @click="$refs.columnSelector.open(obj => addPivot('rows', obj))">
|
|
471
|
+
<button type="button" @click="$refs.columnSelector.open(obj => addPivot('rows', obj), pivotColumns)">
|
|
472
472
|
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
|
|
473
473
|
</button>
|
|
474
474
|
</div>
|
|
@@ -483,7 +483,7 @@
|
|
|
483
483
|
</div>
|
|
484
484
|
<div class="flex-1 flex flex-row gap-3">
|
|
485
485
|
<strong class="flex-1 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
|
|
486
|
-
@click="$refs.columnSelector.open(obj => { Object.assign(item, obj); apply() });">
|
|
486
|
+
@click="$refs.columnSelector.open(obj => { Object.assign(item, obj); apply() }, pivotColumns);">
|
|
487
487
|
{{ item.label ? item.label : item.key }}
|
|
488
488
|
</strong>
|
|
489
489
|
<select v-if="item.type === 'date'"
|
|
@@ -506,7 +506,7 @@
|
|
|
506
506
|
<div>
|
|
507
507
|
<div class="flex flex-row items-center gap-2">
|
|
508
508
|
<label>Aggregrates</label>
|
|
509
|
-
<button type="button" @click="$refs.columnSelector.open(obj => addPivot('values', obj))">
|
|
509
|
+
<button type="button" @click="$refs.columnSelector.open(obj => addPivot('values', obj), pivotColumns)">
|
|
510
510
|
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
|
|
511
511
|
</button>
|
|
512
512
|
</div>
|
|
@@ -521,7 +521,7 @@
|
|
|
521
521
|
</div>
|
|
522
522
|
<div class="flex-1 flex flex-row gap-3">
|
|
523
523
|
<strong class="flex-1 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
|
|
524
|
-
@click="$refs.columnSelector.open(obj => { Object.assign(item, obj); apply() });">
|
|
524
|
+
@click="$refs.columnSelector.open(obj => { Object.assign(item, obj); apply() }, pivotColumns);">
|
|
525
525
|
{{ item.label ? item.label : item.key }}
|
|
526
526
|
</strong>
|
|
527
527
|
<select v-model="item.aggregrate"
|
|
@@ -604,8 +604,7 @@
|
|
|
604
604
|
|
|
605
605
|
</div>
|
|
606
606
|
|
|
607
|
-
<ColumnSelector ref="columnSelector"
|
|
608
|
-
:columns="config.columns" />
|
|
607
|
+
<ColumnSelector ref="columnSelector" />
|
|
609
608
|
|
|
610
609
|
</div>
|
|
611
610
|
|
|
@@ -766,6 +765,18 @@ export default{
|
|
|
766
765
|
return this.presetChart[this.chartType]
|
|
767
766
|
},
|
|
768
767
|
|
|
768
|
+
filterColumns(){
|
|
769
|
+
return this.config.columns.filter(_ => {
|
|
770
|
+
return _.filterable !== false
|
|
771
|
+
})
|
|
772
|
+
},
|
|
773
|
+
|
|
774
|
+
pivotColumns(){
|
|
775
|
+
return this.config.columns.filter(_ => {
|
|
776
|
+
return _.pivot !== false
|
|
777
|
+
})
|
|
778
|
+
},
|
|
779
|
+
|
|
769
780
|
preset(){
|
|
770
781
|
return this.config.presets[this.config.presetIdx]
|
|
771
782
|
},
|
|
@@ -26,12 +26,16 @@
|
|
|
26
26
|
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
|
|
27
27
|
</button>
|
|
28
28
|
</div>
|
|
29
|
+
|
|
29
30
|
<ListItem :items="appearances"
|
|
30
31
|
class="bg-transparent"
|
|
31
32
|
@reorder="(from, to) => { appearances.splice(to, 0, appearances.splice(from, 1)[0]); }"
|
|
32
33
|
container-class="flex flex-col gap-1">
|
|
33
34
|
<template v-slot="{ item, index }">
|
|
34
35
|
<div class="flex flex-row items-center gap-3">
|
|
36
|
+
<div data-reorder>
|
|
37
|
+
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
38
|
+
</div>
|
|
35
39
|
<div class="flex-1 flex flex-col gap-1">
|
|
36
40
|
<div v-for="condition in item.conditions" class="flex flex-row gap-1">
|
|
37
41
|
<Dropdown v-model="condition.operator" :class="condition.operator === 'none' ? 'w-[200px]' : 'w-[100px]'">
|