1
- /* global Vue, CV */
1
+ /* global Vue, CV, countlyCommon */
2
2
( function ( countlyVue ) {
3
3
Vue . component ( "cly-content-layout" , countlyVue . components . create ( {
4
4
props : {
55
55
}
56
56
} ,
57
57
status : {
58
- type : String ,
58
+ type : Object ,
59
59
required : false ,
60
- default : null
60
+ default : function ( ) {
61
+ return { show : false , label : 'Status' , mode : 'primary' } ;
62
+ } ,
61
63
} ,
62
64
saveButtonLabel : {
63
65
type : String ,
64
66
required : false ,
65
67
default : CV . i18n ( 'common.save' )
66
68
} ,
67
- saveButtonDisabled : {
69
+ disableSaveButton : {
68
70
type : Boolean ,
69
71
required : false ,
70
72
default : false
91
93
required : false ,
92
94
default : false
93
95
} ,
96
+ isToggleDisabled : {
97
+ type : Boolean ,
98
+ required : false ,
99
+ default : false
100
+ } ,
94
101
toggleTooltip : {
95
102
type : String ,
96
103
required : false
99
106
data : function ( ) {
100
107
return {
101
108
currentTab : this . tabs [ 0 ] ?. value || null ,
102
- localTitle : this . value ,
109
+ localTitle : countlyCommon . unescapeHtml ( this . value ) ,
103
110
isEditing : ! this . value
104
111
} ;
105
112
} ,
223
230
224
231
Vue . component ( "cly-status-badge" , countlyVue . components . create ( {
225
232
props : {
226
- label : {
227
- type : String ,
228
- required : false ,
229
- default : 'Status'
230
- } ,
231
- color : {
232
- type : String ,
233
- required : false ,
234
- default : 'gray'
235
- } ,
236
- icon : {
237
- type : String ,
238
- required : false ,
239
- default : 'cly-is cly-is-status'
240
- } ,
241
- iconSize : {
242
- type : String ,
243
- required : false ,
244
- default : '8'
245
- } ,
246
- width : {
233
+ mode : {
247
234
type : String ,
248
- required : false ,
249
- default : '55'
250
- } ,
251
- height : {
252
- type : String ,
253
- required : false ,
254
- default : '16'
255
- } ,
256
- radius : {
257
- type : String ,
258
- required : false ,
259
- default : '8'
235
+ required : true ,
236
+ default : 'primary' ,
237
+ validator : function ( value ) {
238
+ return [ 'primary' , 'secondary' ] . includes ( value ) ;
239
+ }
260
240
} ,
261
- fontClass : {
241
+ label : {
262
242
type : String ,
263
243
required : false ,
264
- default : 'text-small '
244
+ default : 'Status '
265
245
}
266
246
} ,
267
247
data : function ( ) {
268
248
return {
269
- colorEnum : {
270
- 'gray' : { background : '#E2E4E8' , icon : '#81868D' } ,
271
- // add more colors when needed
249
+ modeConfig : {
250
+ primary : { background : '#E2E4E8' , color : '#81868D' , icon : 'cly-is cly-is-status' } ,
251
+ secondary : { background : '#EBFAEE' , color : '#12AF51' , icon : 'cly-is cly-is-status' }
252
+ // Add more modes here if needed
272
253
}
273
254
} ;
274
255
} ,
275
256
computed : {
257
+ currentConfig ( ) {
258
+ return this . modeConfig [ this . mode ] ;
259
+ } ,
276
260
badgeStyles ( ) {
277
261
return {
278
- width : `${ this . width } px` ,
279
- height : `${ this . height } px` ,
280
- borderRadius : `${ this . radius } px` ,
281
- backgroundColor : this . colorEnum [ this . color ] ?. background || this . color ,
262
+ height : '16px' ,
263
+ borderRadius : '8px' ,
264
+ backgroundColor : this . currentConfig . background ,
282
265
display : 'flex' ,
283
266
alignItems : 'center' ,
284
267
justifyContent : 'center' ,
287
270
} ,
288
271
iconStyles ( ) {
289
272
return {
290
- color : this . colorEnum [ this . color ] ?. icon || this . color ,
291
- fontSize : ` ${ this . iconSize } px` ,
273
+ color : this . currentConfig . color ,
274
+ fontSize : '8px' ,
292
275
marginRight : '4px' ,
293
276
} ;
294
277
} ,
295
278
fontStyles ( ) {
296
279
return {
297
- color : this . colorEnum [ this . color ] ?. icon || this . color ,
280
+ color : this . currentConfig . color ,
298
281
} ;
299
282
}
300
283
} ,
301
- template : `<div :style="badgeStyles">
302
- <i :class="icon" :style="iconStyles"></i>
303
- <span :class="fontClass" :style="fontStyles">{{ label }}</span>
304
- </div>` ,
284
+ template : `
285
+ <div :style="badgeStyles">
286
+ <i :class="currentConfig.icon" :style="iconStyles"></i>
287
+ <span class="text-small" :style="fontStyles">{{ label }}</span>
288
+ </div>
289
+ ` ,
305
290
} ) ) ;
306
291
307
292
Vue . component ( "cly-content-steps" , countlyVue . components . create ( {
603
588
</div>
604
589
`
605
590
} ) ) ;
606
- } ( window . countlyVue = window . countlyVue || { } ) ) ;
591
+ } ( window . countlyVue = window . countlyVue || { } ) ) ;
0 commit comments