@mixd-id/web-scaffold 0.1.230406293 → 0.1.230406294
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
|
@@ -836,6 +836,12 @@ export default{
|
|
|
836
836
|
}
|
|
837
837
|
},
|
|
838
838
|
|
|
839
|
+
provide(){
|
|
840
|
+
return {
|
|
841
|
+
listStyle: this.$style
|
|
842
|
+
}
|
|
843
|
+
},
|
|
844
|
+
|
|
839
845
|
watch: {
|
|
840
846
|
|
|
841
847
|
config: {
|
|
@@ -865,4 +871,221 @@ export default{
|
|
|
865
871
|
@apply w-[21px] h-[21px] rounded-full bg-text-50 flex items-center justify-center hover:bg-red-600;
|
|
866
872
|
}
|
|
867
873
|
|
|
874
|
+
.pv-green1, .pv-green2, .pv-green3, .pv-green4, .pv-green5{
|
|
875
|
+
@apply rounded-lg text-center text-text cursor-pointer;
|
|
876
|
+
}
|
|
877
|
+
.pv-green1{
|
|
878
|
+
background-color: #d3f3df;
|
|
879
|
+
}
|
|
880
|
+
.pv-green2{
|
|
881
|
+
background-color: #bdeecf;
|
|
882
|
+
}
|
|
883
|
+
.pv-green3{
|
|
884
|
+
background-color: #a7e8bf;
|
|
885
|
+
}
|
|
886
|
+
.pv-green4{
|
|
887
|
+
background-color: #91e2af;
|
|
888
|
+
}
|
|
889
|
+
.pv-green5{
|
|
890
|
+
background-color: #7adc9e;
|
|
891
|
+
}
|
|
892
|
+
html[data-theme="dark"] .pv-green1{
|
|
893
|
+
@apply text-text;
|
|
894
|
+
background-color: #031409;
|
|
895
|
+
}
|
|
896
|
+
html[data-theme="dark"] .pv-green2{
|
|
897
|
+
@apply text-text;
|
|
898
|
+
background-color: #072713;
|
|
899
|
+
}
|
|
900
|
+
html[data-theme="dark"] .pv-green3{
|
|
901
|
+
@apply text-text;
|
|
902
|
+
background-color: #0a3b1c;
|
|
903
|
+
}
|
|
904
|
+
html[data-theme="dark"] .pv-green4{
|
|
905
|
+
@apply text-text;
|
|
906
|
+
background-color: #0e4f26;
|
|
907
|
+
}
|
|
908
|
+
html[data-theme="dark"] .pv-green5{
|
|
909
|
+
@apply text-text;
|
|
910
|
+
background-color: #11632f;
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
.pv-red1, .pv-red2, .pv-red3, .pv-red4, .pv-red5{
|
|
914
|
+
@apply rounded-lg text-center text-text cursor-pointer;
|
|
915
|
+
}
|
|
916
|
+
.pv-red1{
|
|
917
|
+
background-color: #fce9e9;
|
|
918
|
+
}
|
|
919
|
+
.pv-red2{
|
|
920
|
+
background-color: #f8d4d4;
|
|
921
|
+
}
|
|
922
|
+
.pv-red3{
|
|
923
|
+
background-color: #f5bebe;
|
|
924
|
+
}
|
|
925
|
+
.pv-red4{
|
|
926
|
+
background-color: #f1a8a8;
|
|
927
|
+
}
|
|
928
|
+
.pv-red5{
|
|
929
|
+
background-color: #ee9393;
|
|
930
|
+
}
|
|
931
|
+
html[data-theme="dark"] .pv-red1{
|
|
932
|
+
@apply text-text;
|
|
933
|
+
background-color: #160404;
|
|
934
|
+
}
|
|
935
|
+
html[data-theme="dark"] .pv-red2{
|
|
936
|
+
@apply text-text;
|
|
937
|
+
background-color: #2c0808;
|
|
938
|
+
}
|
|
939
|
+
html[data-theme="dark"] .pv-red3{
|
|
940
|
+
@apply text-text;
|
|
941
|
+
background-color: #420b0b;
|
|
942
|
+
}
|
|
943
|
+
html[data-theme="dark"] .pv-red4{
|
|
944
|
+
@apply text-text;
|
|
945
|
+
background-color: #580f0f;
|
|
946
|
+
}
|
|
947
|
+
html[data-theme="dark"] .pv-red5{
|
|
948
|
+
@apply text-text;
|
|
949
|
+
background-color: #6e1313;
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
.pv-blue1, .pv-blue2, .pv-blue3, .pv-blue4, .pv-blue5{
|
|
953
|
+
@apply rounded-lg text-center text-text cursor-pointer;
|
|
954
|
+
}
|
|
955
|
+
.pv-blue1{
|
|
956
|
+
background-color: #e9effd;
|
|
957
|
+
}
|
|
958
|
+
.pv-blue2{
|
|
959
|
+
background-color: #d3e0fb;
|
|
960
|
+
}
|
|
961
|
+
.pv-blue3{
|
|
962
|
+
background-color: #bed0f9;
|
|
963
|
+
}
|
|
964
|
+
.pv-blue4{
|
|
965
|
+
background-color: #a8c1f7;
|
|
966
|
+
}
|
|
967
|
+
.pv-blue5{
|
|
968
|
+
background-color: #92b1f5;
|
|
969
|
+
}
|
|
970
|
+
html[data-theme="dark"] .pv-blue1{
|
|
971
|
+
@apply text-text;
|
|
972
|
+
background-color: #040a17;
|
|
973
|
+
}
|
|
974
|
+
html[data-theme="dark"] .pv-blue2{
|
|
975
|
+
@apply text-text;
|
|
976
|
+
background-color: #07142f;
|
|
977
|
+
}
|
|
978
|
+
html[data-theme="dark"] .pv-blue3{
|
|
979
|
+
@apply text-text;
|
|
980
|
+
background-color: #0b1e46;
|
|
981
|
+
}
|
|
982
|
+
html[data-theme="dark"] .pv-blue4{
|
|
983
|
+
@apply text-text;
|
|
984
|
+
background-color: #0f285e;
|
|
985
|
+
}
|
|
986
|
+
html[data-theme="dark"] .pv-blue5{
|
|
987
|
+
@apply text-text;
|
|
988
|
+
background-color: #133276;
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
.pv-yellow1, .pv-yellow2, .pv-yellow3, .pv-yellow4, .pv-yellow5{
|
|
992
|
+
@apply rounded-lg text-center text-text cursor-pointer;
|
|
993
|
+
}
|
|
994
|
+
.pv-yellow1{
|
|
995
|
+
background-color: #fdf7e6;
|
|
996
|
+
}
|
|
997
|
+
.pv-yellow2{
|
|
998
|
+
background-color: #fbf0ce;
|
|
999
|
+
}
|
|
1000
|
+
.pv-yellow3{
|
|
1001
|
+
background-color: #f9e8b5;
|
|
1002
|
+
}
|
|
1003
|
+
.pv-yellow4{
|
|
1004
|
+
background-color: #f7e19c;
|
|
1005
|
+
}
|
|
1006
|
+
.pv-yellow5{
|
|
1007
|
+
background-color: #f5d984;
|
|
1008
|
+
}
|
|
1009
|
+
html[data-theme="dark"] .pv-yellow1{
|
|
1010
|
+
@apply text-text;
|
|
1011
|
+
background-color: #171201;
|
|
1012
|
+
}
|
|
1013
|
+
html[data-theme="dark"] .pv-yellow2{
|
|
1014
|
+
@apply text-text;
|
|
1015
|
+
background-color: #2f2402;
|
|
1016
|
+
}
|
|
1017
|
+
html[data-theme="dark"] .pv-yellow3{
|
|
1018
|
+
@apply text-text;
|
|
1019
|
+
background-color: #463602;
|
|
1020
|
+
}
|
|
1021
|
+
html[data-theme="dark"] .pv-yellow4{
|
|
1022
|
+
@apply text-text;
|
|
1023
|
+
background-color: #5e4803;
|
|
1024
|
+
}
|
|
1025
|
+
html[data-theme="dark"] .pv-yellow5{
|
|
1026
|
+
@apply text-text;
|
|
1027
|
+
background-color: #755a04;
|
|
1028
|
+
}
|
|
1029
|
+
|
|
1030
|
+
.pv-fuchsia1, .pv-fuchsia2, .pv-fuchsia3, .pv-fuchsia4, .pv-fuchsia5{
|
|
1031
|
+
@apply rounded-lg text-center text-text cursor-pointer;
|
|
1032
|
+
}
|
|
1033
|
+
.pv-fuchsia1{
|
|
1034
|
+
background-color: #f6e8f7;
|
|
1035
|
+
}
|
|
1036
|
+
.pv-fuchsia2{
|
|
1037
|
+
background-color: #edd2ef;
|
|
1038
|
+
}
|
|
1039
|
+
.pv-fuchsia3{
|
|
1040
|
+
background-color: #e3bbe7;
|
|
1041
|
+
}
|
|
1042
|
+
.pv-fuchsia4{
|
|
1043
|
+
background-color: #daa4df;
|
|
1044
|
+
}
|
|
1045
|
+
.pv-fuchsia5{
|
|
1046
|
+
background-color: #d18ed7;
|
|
1047
|
+
}
|
|
1048
|
+
html[data-theme="dark"] .pv-fuchsia1{
|
|
1049
|
+
@apply text-text;
|
|
1050
|
+
background-color: #100311;
|
|
1051
|
+
}
|
|
1052
|
+
html[data-theme="dark"] .pv-fuchsia2{
|
|
1053
|
+
@apply text-text;
|
|
1054
|
+
background-color: #210623;
|
|
1055
|
+
}
|
|
1056
|
+
html[data-theme="dark"] .pv-fuchsia3{
|
|
1057
|
+
@apply text-text;
|
|
1058
|
+
background-color: #310834;
|
|
1059
|
+
}
|
|
1060
|
+
html[data-theme="dark"] .pv-fuchsia4{
|
|
1061
|
+
@apply text-text;
|
|
1062
|
+
background-color: #410b46;
|
|
1063
|
+
}
|
|
1064
|
+
html[data-theme="dark"] .pv-fuchsia5{
|
|
1065
|
+
@apply text-text;
|
|
1066
|
+
background-color: #520e58;
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
.pv-gradient1, .pv-gradient2, .pv-gradient3, .pv-gradient4, .pv-gradient5, .pv-default{
|
|
1070
|
+
@apply rounded-lg text-center text-text cursor-pointer;
|
|
1071
|
+
}
|
|
1072
|
+
.pv-gradient1{
|
|
1073
|
+
@apply bg-gradient-to-r from-cyan-500 to-blue-500;
|
|
1074
|
+
}
|
|
1075
|
+
.pv-gradient2{
|
|
1076
|
+
@apply bg-gradient-to-r from-sky-500 to-indigo-500;
|
|
1077
|
+
}
|
|
1078
|
+
.pv-gradient3{
|
|
1079
|
+
@apply bg-gradient-to-r from-violet-500 to-fuchsia-500;
|
|
1080
|
+
}
|
|
1081
|
+
.pv-gradient4{
|
|
1082
|
+
@apply bg-gradient-to-r from-purple-500 to-pink-500;
|
|
1083
|
+
}
|
|
1084
|
+
.pv-gradient5{
|
|
1085
|
+
@apply bg-gradient-to-r from-pink-500 to-teal-500;
|
|
1086
|
+
}
|
|
1087
|
+
.pv-default{
|
|
1088
|
+
@apply text-primary;
|
|
1089
|
+
}
|
|
1090
|
+
|
|
868
1091
|
</style>
|
|
@@ -88,6 +88,8 @@ const _DEFAULT_COLUMN_WIDTH = '100px'
|
|
|
88
88
|
|
|
89
89
|
export default{
|
|
90
90
|
|
|
91
|
+
inject: [ 'listStyle' ],
|
|
92
|
+
|
|
91
93
|
emits: [ 'scroll-end', 'item-click' ],
|
|
92
94
|
|
|
93
95
|
props:{
|
|
@@ -251,7 +253,7 @@ export default{
|
|
|
251
253
|
const elHeight = parseInt(window.getComputedStyle(this.$el).height !== '0px' ?
|
|
252
254
|
window.getComputedStyle(this.$el).height :
|
|
253
255
|
window.getComputedStyle(this.$el).maxHeight)
|
|
254
|
-
this.itemHeight =
|
|
256
|
+
this.itemHeight = Math.ceil(parseFloat(window.getComputedStyle(this.$refs.calc).height))
|
|
255
257
|
this.maxVisibleItems = elHeight > 0 ? Math.ceil(elHeight / this.itemHeight) + 1 : this.items.length
|
|
256
258
|
|
|
257
259
|
if(this.itemHeight <= 0 && import.meta.env.DEV){
|
|
@@ -433,8 +435,6 @@ export default{
|
|
|
433
435
|
if(conditionMatched) break
|
|
434
436
|
}
|
|
435
437
|
|
|
436
|
-
console.log('value', value, conditionMatched)
|
|
437
|
-
|
|
438
438
|
if(conditionMatched){
|
|
439
439
|
appearanceClass = appearance.class
|
|
440
440
|
break
|
|
@@ -445,7 +445,7 @@ export default{
|
|
|
445
445
|
return [
|
|
446
446
|
this.$style.tdDiv,
|
|
447
447
|
this.$style['align-' + align],
|
|
448
|
-
appearanceClass
|
|
448
|
+
this.listStyle ? this.listStyle[appearanceClass] : ''
|
|
449
449
|
]
|
|
450
450
|
.join(' ')
|
|
451
451
|
},
|
|
@@ -45,23 +45,44 @@
|
|
|
45
45
|
<Textbox v-if="condition.operator !== 'none'" v-model.numberconditions="condition.value" class="w-[100px]"/>
|
|
46
46
|
</div>
|
|
47
47
|
</div>
|
|
48
|
-
<div :class="item.class" class="px-2">
|
|
48
|
+
<div :class="listStyle[item.class]" class="px-2">
|
|
49
49
|
Sample
|
|
50
50
|
</div>
|
|
51
51
|
<div>
|
|
52
52
|
<Dropdown class="w-[120px]" v-model="item.class">
|
|
53
|
-
<option value="
|
|
54
|
-
<option value="
|
|
55
|
-
<option value="
|
|
56
|
-
<option value="
|
|
57
|
-
<option value="
|
|
58
|
-
<option value="
|
|
59
|
-
<option value="
|
|
60
|
-
<option value="
|
|
61
|
-
<option value="
|
|
62
|
-
<option value="
|
|
63
|
-
<option value="
|
|
64
|
-
<option value="
|
|
53
|
+
<option value="pv-default">Default</option>
|
|
54
|
+
<option value="pv-red1">Red 1</option>
|
|
55
|
+
<option value="pv-red2">Red 2</option>
|
|
56
|
+
<option value="pv-red3">Red 3</option>
|
|
57
|
+
<option value="pv-red4">Red 4</option>
|
|
58
|
+
<option value="pv-red5">Red 5</option>
|
|
59
|
+
<option value="pv-green1">Green 1</option>
|
|
60
|
+
<option value="pv-green2">Green 2</option>
|
|
61
|
+
<option value="pv-green3">Green 3</option>
|
|
62
|
+
<option value="pv-green4">Green 4</option>
|
|
63
|
+
<option value="pv-green5">Green 5</option>
|
|
64
|
+
<option value="pv-blue5">Blue 5</option>
|
|
65
|
+
<option value="pv-blue1">Blue 1</option>
|
|
66
|
+
<option value="pv-blue2">Blue 2</option>
|
|
67
|
+
<option value="pv-blue3">Blue 3</option>
|
|
68
|
+
<option value="pv-blue4">Blue 4</option>
|
|
69
|
+
<option value="pv-blue5">Blue 5</option>
|
|
70
|
+
<option value="pv-yellow5">Yellow 5</option>
|
|
71
|
+
<option value="pv-yellow1">Yellow 1</option>
|
|
72
|
+
<option value="pv-yellow2">Yellow 2</option>
|
|
73
|
+
<option value="pv-yellow3">Yellow 3</option>
|
|
74
|
+
<option value="pv-yellow4">Yellow 4</option>
|
|
75
|
+
<option value="pv-yellow5">Yellow 5</option>
|
|
76
|
+
<option value="pv-fuchsia1">Fuchsia 1</option>
|
|
77
|
+
<option value="pv-fuchsia2">Fuchsia 2</option>
|
|
78
|
+
<option value="pv-fuchsia3">Fuchsia 3</option>
|
|
79
|
+
<option value="pv-fuchsia4">Fuchsia 4</option>
|
|
80
|
+
<option value="pv-fuchsia5">Fuchsia 5</option>
|
|
81
|
+
<option value="pv-gradient1">Gradient 1</option>
|
|
82
|
+
<option value="pv-gradient2">Gradient 2</option>
|
|
83
|
+
<option value="pv-gradient3">Gradient 3</option>
|
|
84
|
+
<option value="pv-gradient4">Gradient 4</option>
|
|
85
|
+
<option value="pv-gradient5">Gradient 5</option>
|
|
65
86
|
</Dropdown>
|
|
66
87
|
</div>
|
|
67
88
|
<div>
|
|
@@ -83,7 +104,7 @@ export default{
|
|
|
83
104
|
|
|
84
105
|
emits: [ 'apply' ],
|
|
85
106
|
|
|
86
|
-
inject: [ 'socketEmit2' ],
|
|
107
|
+
inject: [ 'listStyle', 'socketEmit2' ],
|
|
87
108
|
|
|
88
109
|
props: {
|
|
89
110
|
|