@policystudio/policy-studio-ui-vue 1.1.44 → 1.1.47

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.
@@ -0,0 +1,531 @@
1
+ export const resultsDataHeader = [
2
+ {
3
+ 'order': 0,
4
+ 'key': 'fixed_columns',
5
+ 'title': 'Cost-Effectiveness',
6
+ 'columns': [
7
+ {
8
+ 'isActive': true,
9
+ 'key': 'tdv_benefit_to_cost_ratio',
10
+ 'title': 'TDV',
11
+ 'description': '≥ 1.0 is cost effective',
12
+ 'isChart': true,
13
+ 'hasHelper': {
14
+ 'type': 'helper',
15
+ 'id': 1
16
+ }
17
+ }
18
+ ],
19
+ 'hasHelper': {
20
+ 'type': 'helper',
21
+ 'id': 23
22
+ }
23
+ },
24
+ {
25
+ 'order': 2,
26
+ 'key': 'city_wide_impact',
27
+ 'title': 'Wide Impact',
28
+ 'columns': [
29
+ {
30
+ 'isActive': true,
31
+ 'key': 'forecast_units_affected',
32
+ 'title': 'Affected Units',
33
+ 'description': '(lifecycle)',
34
+ 'hasProjections': true,
35
+ 'hasHelper': {
36
+ 'type': 'helper',
37
+ 'id': 17
38
+ },
39
+ 'chartProjection': {
40
+ 'title': 'Number of Affected Units',
41
+ 'subtitle': ''
42
+ }
43
+ },
44
+ {
45
+ 'isActive': true,
46
+ 'key': 'forecast_initial_cost',
47
+ 'title': 'Compliance Cost',
48
+ 'description': '(lifecycle)',
49
+ 'hasProjections': true,
50
+ 'hasHelper': {
51
+ 'type': 'helper',
52
+ 'id': 20
53
+ },
54
+ 'chartProjection': {
55
+ 'title': 'Compliance Cost',
56
+ 'subtitle': ''
57
+ }
58
+ },
59
+ {
60
+ 'isActive': true,
61
+ 'key': 'forecast_emissions_savings',
62
+ 'title': 'Emissions Reductions',
63
+ 'description': '(lifecycle MTCO2e)',
64
+ 'hasProjections': true,
65
+ 'hasHelper': {
66
+ 'type': 'helper',
67
+ 'id': 18
68
+ },
69
+ 'chartProjection': {
70
+ 'title': 'Emissions Reductions',
71
+ 'subtitle': 'MTCO2e'
72
+ }
73
+ },
74
+ {
75
+ 'isActive': true,
76
+ 'key': 'forecast_lifecycle_savings',
77
+ 'title': 'Lifecycle Savings',
78
+ 'description': '(on-bill)',
79
+ 'hasProjections': true,
80
+ 'hasHelper': {
81
+ 'type': 'helper',
82
+ 'id': 19
83
+ },
84
+ 'chartProjection': {
85
+ 'title': 'Bill Savings',
86
+ 'subtitle': ''
87
+ }
88
+ },
89
+ {
90
+ 'isActive': true,
91
+ 'key': 'forecast_kwh_savings',
92
+ 'title': 'Electricity Savings',
93
+ 'description': '(lifecycle kWh)',
94
+ 'hasProjections': true,
95
+ 'hasHelper': {
96
+ 'type': 'helper',
97
+ 'id': 21
98
+ },
99
+ 'chartProjection': {
100
+ 'title': 'Electricity Savings',
101
+ 'subtitle': 'kWh'
102
+ }
103
+ },
104
+ {
105
+ 'isActive': true,
106
+ 'key': 'forecast_therms_savings',
107
+ 'title': 'Gas Savings',
108
+ 'description': '(lifecycle therms)',
109
+ 'hasProjections': true,
110
+ 'hasHelper': {
111
+ 'type': 'helper',
112
+ 'id': 22
113
+ },
114
+ 'chartProjection': {
115
+ 'title': 'Gas Savings',
116
+ 'subtitle': 'therms'
117
+ }
118
+ }
119
+ ],
120
+ 'hasHelper': {
121
+ 'type': 'helper',
122
+ 'id': 25
123
+ }
124
+ }
125
+ ]
126
+
127
+ export const resultsDataColumnGroup = [
128
+ {
129
+ 'order': 0,
130
+ 'key': 'fixed_columns',
131
+ 'title': 'Cost-Effectiveness',
132
+ 'columns': [
133
+ {
134
+ 'isActive': true,
135
+ 'key': 'tdv_benefit_to_cost_ratio',
136
+ 'title': 'TDV',
137
+ 'description': '≥ 1.0 is cost effective',
138
+ 'isChart': true,
139
+ 'hasHelper': {
140
+ 'type': 'helper',
141
+ 'id': 1
142
+ }
143
+ }
144
+ ],
145
+ 'hasHelper': {
146
+ 'type': 'helper',
147
+ 'id': 23
148
+ }
149
+ },
150
+ {
151
+ 'order': 2,
152
+ 'key': 'city_wide_impact',
153
+ 'title': 'Wide Impact',
154
+ 'columns': [
155
+ {
156
+ 'isActive': true,
157
+ 'key': 'forecast_units_affected',
158
+ 'title': 'Affected Units',
159
+ 'description': '(lifecycle)',
160
+ 'hasProjections': true,
161
+ 'hasHelper': {
162
+ 'type': 'helper',
163
+ 'id': 17
164
+ },
165
+ 'chartProjection': {
166
+ 'title': 'Number of Affected Units',
167
+ 'subtitle': ''
168
+ }
169
+ },
170
+ {
171
+ 'isActive': true,
172
+ 'key': 'forecast_initial_cost',
173
+ 'title': 'Compliance Cost',
174
+ 'description': '(lifecycle)',
175
+ 'hasProjections': true,
176
+ 'hasHelper': {
177
+ 'type': 'helper',
178
+ 'id': 20
179
+ },
180
+ 'chartProjection': {
181
+ 'title': 'Compliance Cost',
182
+ 'subtitle': ''
183
+ }
184
+ },
185
+ {
186
+ 'isActive': true,
187
+ 'key': 'forecast_emissions_savings',
188
+ 'title': 'Emissions Reductions',
189
+ 'description': '(lifecycle MTCO2e)',
190
+ 'hasProjections': true,
191
+ 'hasHelper': {
192
+ 'type': 'helper',
193
+ 'id': 18
194
+ },
195
+ 'chartProjection': {
196
+ 'title': 'Emissions Reductions',
197
+ 'subtitle': 'MTCO2e'
198
+ }
199
+ },
200
+ {
201
+ 'isActive': true,
202
+ 'key': 'forecast_lifecycle_savings',
203
+ 'title': 'Lifecycle Savings',
204
+ 'description': '(on-bill)',
205
+ 'hasProjections': true,
206
+ 'hasHelper': {
207
+ 'type': 'helper',
208
+ 'id': 19
209
+ },
210
+ 'chartProjection': {
211
+ 'title': 'Bill Savings',
212
+ 'subtitle': ''
213
+ }
214
+ },
215
+ {
216
+ 'isActive': true,
217
+ 'key': 'forecast_kwh_savings',
218
+ 'title': 'Electricity Savings',
219
+ 'description': '(lifecycle kWh)',
220
+ 'hasProjections': true,
221
+ 'hasHelper': {
222
+ 'type': 'helper',
223
+ 'id': 21
224
+ },
225
+ 'chartProjection': {
226
+ 'title': 'Electricity Savings',
227
+ 'subtitle': 'kWh'
228
+ }
229
+ },
230
+ {
231
+ 'isActive': true,
232
+ 'key': 'forecast_therms_savings',
233
+ 'title': 'Gas Savings',
234
+ 'description': '(lifecycle therms)',
235
+ 'hasProjections': true,
236
+ 'hasHelper': {
237
+ 'type': 'helper',
238
+ 'id': 22
239
+ },
240
+ 'chartProjection': {
241
+ 'title': 'Gas Savings',
242
+ 'subtitle': 'therms'
243
+ }
244
+ }
245
+ ],
246
+ 'hasHelper': {
247
+ 'type': 'helper',
248
+ 'id': 25
249
+ }
250
+ }
251
+ ]
252
+
253
+ export const resultsDataSummary = [
254
+ {
255
+ 'data': {
256
+ 'forecast_units_affected': 337.5,
257
+ 'forecast_emissions_savings': -1470.2228427746163,
258
+ 'forecast_therms_savings': -365783.4118312498,
259
+ 'forecast_kwh_savings': 5790873.440625001,
260
+ 'forecast_lifecycle_savings': 1384353.6577500012,
261
+ 'forecast_initial_cost': 840955.172375,
262
+ 'initial_cost': -744.7994892592594,
263
+ 'annual_bill_savings_avg': null,
264
+ 'annual_bill_savings': -229.11570370370367,
265
+ 'emissions_savings': 0.5992222222222222,
266
+ 'kwh_savings': -1596.6407407407407,
267
+ 'therms_savings': 134.17952962962963,
268
+ 'lifecycle_savings': -3470.4795667037033,
269
+ 'compliance_margin': 6.797037037037037,
270
+ 'baseline_fuel_type': 'Mixed-fuel',
271
+ 'energy_savings_combined': 7.96989981162963,
272
+ 'on_bill_cost_ratio': 0.9328797158714975,
273
+ 'tdv_benefit_to_cost_ratio': 1.327363515218667,
274
+ 'simple_payback': 4.842552503682514,
275
+ 'tdv2022_benefit_to_cost_ratio': 0
276
+ },
277
+ 'deep': 0,
278
+ 'id': 'policy',
279
+ 'title': 'Total Impact',
280
+ 'items': [
281
+ {
282
+ 'data': {
283
+ 'forecast_units_affected': 77.5,
284
+ 'forecast_emissions_savings': 1427.3145433224304,
285
+ 'forecast_therms_savings': 296624.89395,
286
+ 'forecast_kwh_savings': -2102697.449999999,
287
+ 'forecast_lifecycle_savings': 19620.35775000001,
288
+ 'forecast_initial_cost': 408160,
289
+ 'initial_cost': 2014,
290
+ 'annual_bill_savings_avg': null,
291
+ 'annual_bill_savings': -439.0199999999999,
292
+ 'emissions_savings': 2.045,
293
+ 'kwh_savings': -3999,
294
+ 'therms_savings': 400.1415,
295
+ 'lifecycle_savings': -4160.687805,
296
+ 'compliance_margin': 29.6,
297
+ 'baseline_fuel_type': 'Mixed-fuel',
298
+ 'energy_savings_combined': 26.36819047,
299
+ 'on_bill_cost_ratio': 1.460322707,
300
+ 'tdv_benefit_to_cost_ratio': 1.42,
301
+ 'simple_payback': 0,
302
+ 'tdv2022_benefit_to_cost_ratio': 0
303
+ },
304
+ 'deep': 1,
305
+ 'id': 'policy:container-2459',
306
+ 'title': 'New Single Family Units',
307
+ 'items': [
308
+ {
309
+ 'data': {
310
+ 'forecast_units_affected': 77.5,
311
+ 'forecast_emissions_savings': 1427.3145433224304,
312
+ 'forecast_therms_savings': 296624.89395,
313
+ 'forecast_kwh_savings': -2102697.449999999,
314
+ 'forecast_lifecycle_savings': 19620.35775000001,
315
+ 'forecast_initial_cost': 408160,
316
+ 'initial_cost': 2014,
317
+ 'annual_bill_savings_avg': null,
318
+ 'annual_bill_savings': -439.0199999999999,
319
+ 'emissions_savings': 2.045,
320
+ 'kwh_savings': -3999,
321
+ 'therms_savings': 400.1415,
322
+ 'lifecycle_savings': -4160.687805,
323
+ 'compliance_margin': 29.6,
324
+ 'baseline_fuel_type': 'Mixed-fuel',
325
+ 'energy_savings_combined': 26.36819047,
326
+ 'on_bill_cost_ratio': 1.460322707,
327
+ 'tdv_benefit_to_cost_ratio': 1.42,
328
+ 'simple_payback': 0,
329
+ 'tdv2022_benefit_to_cost_ratio': 0
330
+ },
331
+ 'deep': 2,
332
+ 'id': 'policy:container-2459:climateZone-1-PGE',
333
+ 'title': 'Climate Zone 1',
334
+ 'items': [
335
+ {
336
+ 'data': {
337
+ 'forecast_units_affected': 77.5,
338
+ 'forecast_emissions_savings': 1427.3145433224304,
339
+ 'forecast_therms_savings': 296624.89395,
340
+ 'forecast_kwh_savings': -2102697.449999999,
341
+ 'forecast_lifecycle_savings': 19620.35775000001,
342
+ 'forecast_initial_cost': 408160,
343
+ 'initial_cost': 2014,
344
+ 'annual_bill_savings': -439.02,
345
+ 'emissions_savings': 2.045,
346
+ 'kwh_savings': -3999,
347
+ 'therms_savings': 400.1415,
348
+ 'lifecycle_savings': -4160.687805,
349
+ 'compliance_margin': 29.6,
350
+ 'baseline_fuel_type': 'Mixed-fuel',
351
+ 'energy_savings_combined': 26.36819047,
352
+ 'on_bill_cost_ratio': 1.460322707,
353
+ 'tdv_benefit_to_cost_ratio': 1.42,
354
+ 'simple_payback': 0,
355
+ 'tdv2022_benefit_to_cost_ratio': null
356
+ },
357
+ 'deep': 3,
358
+ 'id': 'policy:container-2459:climateZone-1-PGE:fuel-all-electric',
359
+ 'title': 'All Electric',
360
+ 'items': null,
361
+ 'is_disabled': false,
362
+ 'is_last': false,
363
+ 'index': '0-0-0-0',
364
+ 'last_deep': true
365
+ },
366
+ {
367
+ 'data': {
368
+ 'initial_cost': 1806.25,
369
+ 'annual_bill_savings': 186.04,
370
+ 'emissions_savings': 0.42,
371
+ 'kwh_savings': 89.395,
372
+ 'therms_savings': 68.604,
373
+ 'lifecycle_savings': 5647.744375,
374
+ 'compliance_margin': 11.95,
375
+ 'baseline_fuel_type': 'Mixed-fuel',
376
+ 'energy_savings_combined': 7.16541574,
377
+ 'on_bill_cost_ratio': 2.784541829,
378
+ 'tdv_benefit_to_cost_ratio': 2.75,
379
+ 'simple_payback': 9.708831573,
380
+ 'tdv2022_benefit_to_cost_ratio': null
381
+ },
382
+ 'deep': 3,
383
+ 'id': 'policy:container-2459:climateZone-1-PGE:fuel-mixed-fuel',
384
+ 'title': 'Mixed-fuel',
385
+ 'items': null,
386
+ 'is_disabled': true,
387
+ 'is_last': true,
388
+ 'index': '0-0-0-1',
389
+ 'last_deep': true
390
+ }
391
+ ],
392
+ 'is_disabled': false,
393
+ 'is_last': true,
394
+ 'index': '0-0-0',
395
+ 'last_deep': false
396
+ }
397
+ ],
398
+ 'is_disabled': false,
399
+ 'is_last': false,
400
+ 'index': '0-0',
401
+ 'last_deep': false
402
+ },
403
+ {
404
+ 'data': {
405
+ 'forecast_units_affected': 260,
406
+ 'forecast_emissions_savings': -2897.5373860970467,
407
+ 'forecast_therms_savings': -662408.3057812498,
408
+ 'forecast_kwh_savings': 7893570.890625,
409
+ 'forecast_lifecycle_savings': 1364733.3000000012,
410
+ 'forecast_initial_cost': 432795.17237499997,
411
+ 'initial_cost': -1567.1339524038463,
412
+ 'annual_bill_savings_avg': null,
413
+ 'annual_bill_savings': -166.54807692307693,
414
+ 'emissions_savings': 0.16826923076923078,
415
+ 'kwh_savings': -880.5528846153846,
416
+ 'therms_savings': 54.902403846153845,
417
+ 'lifecycle_savings': -3264.74441875,
418
+ 'compliance_margin': 0,
419
+ 'baseline_fuel_type': 'Mixed-fuel',
420
+ 'energy_savings_combined': 2.4857939423076925,
421
+ 'on_bill_cost_ratio': 0.435459354,
422
+ 'tdv_benefit_to_cost_ratio': 1.2400000000000002,
423
+ 'simple_payback': 9.409461647,
424
+ 'tdv2022_benefit_to_cost_ratio': 0
425
+ },
426
+ 'deep': 1,
427
+ 'id': 'policy:container-2539',
428
+ 'title': 'New ADUs',
429
+ 'items': [
430
+ {
431
+ 'data': {
432
+ 'forecast_units_affected': 260,
433
+ 'forecast_emissions_savings': -2897.5373860970467,
434
+ 'forecast_therms_savings': -662408.3057812498,
435
+ 'forecast_kwh_savings': 7893570.890625,
436
+ 'forecast_lifecycle_savings': 1364733.3000000012,
437
+ 'forecast_initial_cost': 432795.17237499997,
438
+ 'initial_cost': -1567.1339524038463,
439
+ 'annual_bill_savings_avg': null,
440
+ 'annual_bill_savings': -166.54807692307693,
441
+ 'emissions_savings': 0.16826923076923078,
442
+ 'kwh_savings': -880.5528846153846,
443
+ 'therms_savings': 54.902403846153845,
444
+ 'lifecycle_savings': -3264.74441875,
445
+ 'compliance_margin': 0,
446
+ 'baseline_fuel_type': 'Mixed-fuel',
447
+ 'energy_savings_combined': 2.4857939423076925,
448
+ 'on_bill_cost_ratio': 0.435459354,
449
+ 'tdv_benefit_to_cost_ratio': 1.2400000000000002,
450
+ 'simple_payback': 9.409461647,
451
+ 'tdv2022_benefit_to_cost_ratio': 0
452
+ },
453
+ 'deep': 2,
454
+ 'id': 'policy:container-2539:climateZone-1-PGE',
455
+ 'title': 'Climate Zone 1',
456
+ 'items': [
457
+ {
458
+ 'data': {
459
+ 'forecast_units_affected': 125,
460
+ 'forecast_emissions_savings': -2897.5373860970467,
461
+ 'forecast_therms_savings': -662408.3057812498,
462
+ 'forecast_kwh_savings': 7893570.890625,
463
+ 'forecast_lifecycle_savings': 1364733.3000000012,
464
+ 'forecast_initial_cost': 432795.17237499997,
465
+ 'initial_cost': -3259.638621,
466
+ 'annual_bill_savings': -346.42,
467
+ 'emissions_savings': 0.35,
468
+ 'kwh_savings': -1831.55,
469
+ 'therms_savings': 114.197,
470
+ 'lifecycle_savings': -6790.668391,
471
+ 'compliance_margin': 0,
472
+ 'baseline_fuel_type': 'Mixed-fuel',
473
+ 'energy_savings_combined': 5.1704514,
474
+ 'on_bill_cost_ratio': 0.435459354,
475
+ 'tdv_benefit_to_cost_ratio': 1.24,
476
+ 'simple_payback': 9.409461647,
477
+ 'tdv2022_benefit_to_cost_ratio': null
478
+ },
479
+ 'deep': 3,
480
+ 'id': 'policy:container-2539:climateZone-1-PGE:fuel-all-electric',
481
+ 'title': 'All Electric',
482
+ 'items': null,
483
+ 'is_disabled': false,
484
+ 'is_last': false,
485
+ 'index': '0-1-0-0',
486
+ 'last_deep': true
487
+ },
488
+ {
489
+ 'data': {
490
+ 'forecast_units_affected': 135,
491
+ 'initial_cost': 0,
492
+ 'annual_bill_savings': 0,
493
+ 'emissions_savings': 0,
494
+ 'kwh_savings': 0,
495
+ 'therms_savings': 0,
496
+ 'lifecycle_savings': 0,
497
+ 'compliance_margin': 0,
498
+ 'baseline_fuel_type': 'Mixed-fuel',
499
+ 'energy_savings_combined': 0,
500
+ 'on_bill_cost_ratio': 0,
501
+ 'tdv_benefit_to_cost_ratio': 0,
502
+ 'simple_payback': 0,
503
+ 'tdv2022_benefit_to_cost_ratio': null
504
+ },
505
+ 'deep': 3,
506
+ 'id': 'policy:container-2539:climateZone-1-PGE:fuel-mixed-fuel',
507
+ 'title': 'Mixed-fuel',
508
+ 'items': null,
509
+ 'is_disabled': false,
510
+ 'is_last': true,
511
+ 'index': '0-1-0-1',
512
+ 'last_deep': true
513
+ }
514
+ ],
515
+ 'is_disabled': false,
516
+ 'is_last': true,
517
+ 'index': '0-1-0',
518
+ 'last_deep': false
519
+ }
520
+ ],
521
+ 'is_disabled': false,
522
+ 'is_last': true,
523
+ 'index': '0-1',
524
+ 'last_deep': false
525
+ }
526
+ ],
527
+ 'is_disabled': false,
528
+ 'index': '0',
529
+ 'last_deep': false
530
+ }
531
+ ]
package/src/index.js CHANGED
@@ -23,8 +23,10 @@ import PsChips from './components/chips/PsChips.vue'
23
23
  import PsDataTable from './components/datatable/PsDataTable.vue'
24
24
  import PsDataTableItem from './components/datatable/PsDataTableItem.vue'
25
25
  import PsTableResults from './components/table-results/PsTableResults.vue'
26
- import PsTableResultsHead from './components/table-results/PsTableResultsHead.vue'
27
26
  import PsTableResultsBody from './components/table-results/PsTableResultsBody.vue'
27
+ import PsTableResultsHead from './components/table-results/PsTableResultsHead.vue'
28
+ import PsTableResultsHeadComparison from './components/table-results/PsTableResultsHeadComparison.vue'
29
+ import PsTableResultsHeadFlexible from './components/table-results/PsTableResultsHeadFlexible.vue'
28
30
  import PsIcon from './components/ui/PsIcon.vue'
29
31
  import PsDotLoader from './components/ui/PsDotLoader.vue'
30
32
  import PsTooltip from './components/tooltip/PsTooltip.vue'
@@ -47,6 +49,7 @@ import PsBarChart from './components/data-graphics/PsBarChart.vue'
47
49
  import PsSimpleAlert from './components/notifications/PsSimpleAlert.vue'
48
50
  import PsBreadcrumb from './components/navigations/PsBreadcrumb.vue'
49
51
 
52
+
50
53
  export default {
51
54
  install(Vue) {
52
55
  Vue.component('PsButton', PsButton)
@@ -66,7 +69,9 @@ export default {
66
69
  Vue.component('PsDataTableItem', PsDataTableItem)
67
70
  Vue.component('PsTableResults', PsTableResults)
68
71
  Vue.component('PsTableResultsHead', PsTableResultsHead)
72
+ Vue.component('PsTableResultsHeadComparison', PsTableResultsHeadComparison)
69
73
  Vue.component('PsTableResultsBody', PsTableResultsBody)
74
+ Vue.component('PsTableResultsHeadFlexible',PsTableResultsHeadFlexible)
70
75
  Vue.component('PsIcon', PsIcon)
71
76
  Vue.component('PsDotLoader', PsDotLoader)
72
77
  Vue.component('PsTooltip', PsTooltip)
@@ -93,6 +98,7 @@ export default {
93
98
  Vue.component('PsSimpleAlert',PsSimpleAlert)
94
99
  Vue.component('PsBreadcrumb', PsBreadcrumb)
95
100
 
101
+
96
102
  Vue.directive('click-outside', {
97
103
  bind: function (el, binding, vnode) {
98
104
  el.clickOutsideEvent = function (event) {
@@ -130,6 +136,8 @@ export {
130
136
  PsTableResults,
131
137
  PsTableResultsHead,
132
138
  PsTableResultsBody,
139
+ PsTableResultsHeadFlexible,
140
+ PsTableResultsHeadComparison,
133
141
  PsIcon,
134
142
  PsDotLoader,
135
143
  PsTooltip,
@@ -1,40 +1,75 @@
1
1
  import PsSlider from '../components/controls/PsSlider.vue'
2
+
2
3
  export default {
3
- title: 'Components/Slider',
4
+ title: 'Text fields & Forms/Slider',
4
5
  component: PsSlider,
5
- argTypes: {
6
- },
6
+ // argTypes: {
7
+ // layout: { control: { type: 'inline-radio', options: sliderLayout } },
8
+ // },
7
9
  }
8
10
 
9
11
  const Template = (args, { argTypes }) => ({
10
12
  props: Object.keys(argTypes),
11
13
  components: { PsSlider },
12
14
  template: `
13
- <div style="width: 500px;">
14
- <PsSlider v-bind="$props" :value.sync="value" />
15
- </div>
15
+ <div style="width: 500px;display:block;margin:0 auto;">
16
+ <PsSlider
17
+ v-if="$props['layout'] == 'rich'"
18
+ v-bind="$props"
19
+ :value.sync="value"
20
+ class="psui-bg-gray-10 psui-p-10 psui-rounded psui-border psui-border-gray-30 psui-border-dashed"
21
+ />
22
+ <PsSlider
23
+ v-else
24
+ v-bind="$props"
25
+ :value.sync="value"
26
+ />
27
+ </div>
16
28
  `
17
29
  })
18
30
 
19
31
  export const Label = Template.bind({})
20
32
  Label.args = {
21
- min: 1,
22
- max: 100,
33
+ min: 0,
34
+ max: 200,
35
+ maxValue: 200,
23
36
  value: 30,
24
- label: 'Score Label'
37
+ label: 'Score Label',
38
+ layout: 'default'
25
39
  }
26
40
 
27
41
  export const NoLabel = Template.bind({})
28
42
  NoLabel.args = {
29
- min: 1,
30
- max: 100,
31
- value: 15
43
+ min: 0,
44
+ max: 200,
45
+ maxValue: 200,
46
+ value: 15,
47
+ layout: 'default'
32
48
  }
33
49
 
34
50
  export const Bubble = Template.bind({})
35
51
  Bubble.args = {
36
- min: 1,
37
- max: 100,
52
+ min: 0,
53
+ max: 200,
54
+ maxValue: 200,
38
55
  value: 23,
39
- bubble: true
56
+ bubble: true,
57
+ layout: 'default'
58
+ }
59
+
60
+ const sliderColors = [
61
+ { start: 140, end: 170, bgColor: '#FF906D' },
62
+ { start: 170, end: 200, bgColor: '#D65C5A' },
63
+ ]
64
+ export const Rich = Template.bind({})
65
+ Rich.args = {
66
+ min: 0,
67
+ max: 200,
68
+ maxValue: 200,
69
+ value: 20,
70
+ bubble: true,
71
+ dividers: true,
72
+ layout: 'rich',
73
+ sliderColors: sliderColors,
74
+ gridData: [0, 30, 55, 80, 100]
40
75
  }