@policystudio/policy-studio-ui-vue 1.1.90-beta.10 → 1.1.90-beta.12
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/dist/contents/ComparisonData.js +376 -0
- package/dist/contents/ComparisonData.js.map +1 -0
- package/dist/contents/FlexibleData.js +501 -0
- package/dist/contents/FlexibleData.js.map +1 -0
- package/dist/contents/ResultsData.js +530 -0
- package/dist/contents/ResultsData.js.map +1 -0
- package/dist/index.js +114 -0
- package/dist/index.js.map +1 -0
- package/dist/stories/Accordion.stories.js +56 -0
- package/dist/stories/Accordion.stories.js.map +1 -0
- package/dist/stories/BadgeWithIcon.stories.js +28 -0
- package/dist/stories/BadgeWithIcon.stories.js.map +1 -0
- package/dist/stories/BarChart.stories.js +16 -0
- package/dist/stories/BarChart.stories.js.map +1 -0
- package/dist/stories/Breadcrumb.stories.js +21 -0
- package/dist/stories/Breadcrumb.stories.js.map +1 -0
- package/dist/stories/Button.stories.js +44 -0
- package/dist/stories/Button.stories.js.map +1 -0
- package/dist/stories/CardInfos.stories.js +13 -0
- package/dist/stories/CardInfos.stories.js.map +1 -0
- package/dist/stories/ChartLegend.stories.js +13 -0
- package/dist/stories/ChartLegend.stories.js.map +1 -0
- package/dist/stories/Checkbox.stories.js +44 -0
- package/dist/stories/Checkbox.stories.js.map +1 -0
- package/dist/stories/CheckboxSimple.stories.js +48 -0
- package/dist/stories/CheckboxSimple.stories.js.map +1 -0
- package/dist/stories/Chips.stories.js +27 -0
- package/dist/stories/Chips.stories.js.map +1 -0
- package/dist/stories/ClimateZoneBadge.stories.js +15 -0
- package/dist/stories/ClimateZoneBadge.stories.js.map +1 -0
- package/dist/stories/CostEffectBar.stories.js +21 -0
- package/dist/stories/CostEffectBar.stories.js.map +1 -0
- package/dist/stories/Datatable.stories.js +45 -0
- package/dist/stories/Datatable.stories.js.map +1 -0
- package/dist/stories/DateCardInfo.stories.js +18 -0
- package/dist/stories/DateCardInfo.stories.js.map +1 -0
- package/dist/stories/Dialog.stories.js +127 -0
- package/dist/stories/Dialog.stories.js.map +1 -0
- package/dist/stories/Draggable.stories.js +20 -0
- package/dist/stories/Draggable.stories.js.map +1 -0
- package/dist/stories/Dropdown.stories.js +98 -0
- package/dist/stories/Dropdown.stories.js.map +1 -0
- package/dist/stories/DropdownList.stories.js +208 -0
- package/dist/stories/DropdownList.stories.js.map +1 -0
- package/dist/stories/Header.stories.js +39 -0
- package/dist/stories/Header.stories.js.map +1 -0
- package/dist/stories/HighlightRippleDot.stories.js +13 -0
- package/dist/stories/HighlightRippleDot.stories.js.map +1 -0
- package/dist/stories/Icon.stories.js +19 -0
- package/dist/stories/Icon.stories.js.map +1 -0
- package/dist/stories/InlineSelector.stories.js +16 -0
- package/dist/stories/InlineSelector.stories.js.map +1 -0
- package/dist/stories/Input.stories.js +235 -0
- package/dist/stories/Input.stories.js.map +1 -0
- package/dist/stories/InputSelect.stories.js +28 -0
- package/dist/stories/InputSelect.stories.js.map +1 -0
- package/dist/stories/InputTextArea.stories.js +23 -0
- package/dist/stories/InputTextArea.stories.js.map +1 -0
- package/dist/stories/MiniTag.stories.js +44 -0
- package/dist/stories/MiniTag.stories.js.map +1 -0
- package/dist/stories/Playground.stories.js +14 -0
- package/dist/stories/Playground.stories.js.map +1 -0
- package/dist/stories/ProgressBar.stories.js +21 -0
- package/dist/stories/ProgressBar.stories.js.map +1 -0
- package/dist/stories/RadioButton.stories.js +36 -0
- package/dist/stories/RadioButton.stories.js.map +1 -0
- package/dist/stories/RadioButtonSimple.stories.js +40 -0
- package/dist/stories/RadioButtonSimple.stories.js.map +1 -0
- package/dist/stories/SimpleAlert.stories.js +19 -0
- package/dist/stories/SimpleAlert.stories.js.map +1 -0
- package/dist/stories/Slider.stories.js +70 -0
- package/dist/stories/Slider.stories.js.map +1 -0
- package/dist/stories/Switch.stories.js +35 -0
- package/dist/stories/Switch.stories.js.map +1 -0
- package/dist/stories/TabHeader.stories.js +48 -0
- package/dist/stories/TabHeader.stories.js.map +1 -0
- package/dist/stories/TableResults.stories.js +717 -0
- package/dist/stories/TableResults.stories.js.map +1 -0
- package/dist/stories/TagScope.stories.js +16 -0
- package/dist/stories/TagScope.stories.js.map +1 -0
- package/dist/stories/TestimonialCard.stories.js +24 -0
- package/dist/stories/TestimonialCard.stories.js.map +1 -0
- package/dist/stories/Toast.stories.js +51 -0
- package/dist/stories/Toast.stories.js.map +1 -0
- package/dist/stories/Toggle.stories.js +42 -0
- package/dist/stories/Toggle.stories.js.map +1 -0
- package/dist/stories/Tooltip.stories.js +108 -0
- package/dist/stories/Tooltip.stories.js.map +1 -0
- package/dist/util/GeneralFunctions.js +29 -0
- package/dist/util/GeneralFunctions.js.map +1 -0
- package/dist/util/imageLoader.js +52 -0
- package/dist/util/imageLoader.js.map +1 -0
- package/package.json +1 -1
- package/src/index.ts +8 -4
- package/src/stories/ClimateZoneBadge.stories.ts +12 -22
- package/src/stories/CostEffectBar.stories.ts +19 -21
- package/src/stories/Dialog.stories.ts +2 -2
- package/src/stories/Draggable.stories.ts +18 -27
- package/src/stories/Dropdown.stories.ts +13 -2
- package/src/stories/Icon.stories.ts +1 -0
- package/src/stories/Input.stories.ts +1 -2
- package/src/stories/RadioButton.stories.ts +1 -2
- package/src/stories/TabHeader.stories.ts +1 -0
- package/src/util/GeneralFunctions.ts +6 -5
- package/src/util/imageLoader.ts +5 -3
- package/tsconfig.json +2 -2
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import PsDraggable from '../components/controls/PsDraggable.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Controls & Selectors/Draggable',
|
|
4
|
+
component: PsDraggable
|
|
5
|
+
};
|
|
6
|
+
const Template = (args, { argTypes }) => ({
|
|
7
|
+
props: Object.keys(argTypes),
|
|
8
|
+
components: { PsDraggable },
|
|
9
|
+
template: `
|
|
10
|
+
<div style='width: 300px; font-family: "Lato", sans-serif; font-size: 12px;'>
|
|
11
|
+
<PsDraggable v-bind='$props'/>
|
|
12
|
+
</div>
|
|
13
|
+
`
|
|
14
|
+
});
|
|
15
|
+
export const Component = Template.bind({});
|
|
16
|
+
Component.args = {
|
|
17
|
+
getColumns: { columnGroups: [{ title: 'COST EFFECTIVENESS', columns: ['Item 1', 'Item 2', 'Item 3', 'Item 4'] }, { title: 'PER HOME RESULTS', columns: ['Item 1', 'Item 2', 'Item 3', 'Item 4'] }] },
|
|
18
|
+
module: 'comparison'
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=Draggable.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Draggable.stories.js","sourceRoot":"","sources":["../../src/stories/Draggable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,wCAAwC,CAAA;AAEhE,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,WAAW;CACvB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,WAAW,EAAE;IAC3B,QAAQ,EAAE;;;;GAIT;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,SAAS,CAAC,IAAI,GAAG;IACf,UAAU,EAAE,EAAC,YAAY,EAAC,CAAC,EAAC,KAAK,EAAE,oBAAoB,EAAE,OAAO,EAAE,CAAE,QAAQ,EAAG,QAAQ,EAAG,QAAQ,EAAE,QAAQ,CAAC,EAAC,EAAE,EAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAE,QAAQ,EAAG,QAAQ,EAAG,QAAQ,EAAE,QAAQ,CAAC,EAAC,CAAC,EAAC;IACnM,MAAM,EAAE,YAAY;CACrB,CAAA"}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import PsDropdown from '../components/forms/PsDropdown.vue';
|
|
2
|
+
import PsDropdownList from '../components/forms/PsDropdownList.vue';
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Components/Dropdown',
|
|
5
|
+
component: { PsDropdown, PsDropdownList },
|
|
6
|
+
};
|
|
7
|
+
const Template = (args, { argTypes }) => ({
|
|
8
|
+
props: Object.keys(argTypes),
|
|
9
|
+
components: { PsDropdown, PsDropdownList },
|
|
10
|
+
template: `
|
|
11
|
+
<div style='background: #E6ECF2; width:1200px; height: 700px; padding: 20px;' class='psui-flex psui-gap-64 psui-bg-gray-20 '>
|
|
12
|
+
<PsDropdown>
|
|
13
|
+
<template #dropdownTrigger>
|
|
14
|
+
<i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-2'>more_horiz</i>
|
|
15
|
+
</template>
|
|
16
|
+
<template #items>
|
|
17
|
+
<div class='psui-pb-5'>
|
|
18
|
+
<p class='psui-uppercase psui-text-gray-40 psui-text-accentSmall' style='padding: 24px 20px 8px 20px;'>divider label</p>
|
|
19
|
+
|
|
20
|
+
<ul>
|
|
21
|
+
<li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 01</li>
|
|
22
|
+
<li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 02</li>
|
|
23
|
+
<li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 03</li>
|
|
24
|
+
|
|
25
|
+
<p class='psui-uppercase psui-text-gray-40 psui-text-accentSmall' style='padding: 24px 24px 8px 24px;'>divider label</p>
|
|
26
|
+
|
|
27
|
+
<li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 04</li>
|
|
28
|
+
<li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 05</li>
|
|
29
|
+
<li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 06</li>
|
|
30
|
+
</ul>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
</PsDropdown>
|
|
34
|
+
|
|
35
|
+
<PsDropdown>
|
|
36
|
+
<template #dropdownTrigger>
|
|
37
|
+
<i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-2'>more_horiz</i>
|
|
38
|
+
</template>
|
|
39
|
+
<template #items>
|
|
40
|
+
<div class='psui-pb-5'>
|
|
41
|
+
<p class='psui-uppercase psui-text-gray-40 psui-text-accentSmall' style='padding: 24px 24px 8px 24px;'>divider label</p>
|
|
42
|
+
|
|
43
|
+
<ul>
|
|
44
|
+
<li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>public</i><span>Selectable option 01</span></li>
|
|
45
|
+
<li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>share</i><span>Selectable option 02</span></li>
|
|
46
|
+
<li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>person</i><span>Selectable option 03</span></li>
|
|
47
|
+
|
|
48
|
+
<p class='psui-uppercase psui-text-gray-40 psui-text-accentSmall' style='padding: 24px 24px 8px 24px;'>divider label</p>
|
|
49
|
+
|
|
50
|
+
<li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>settings</i><span>Selectable option 04</span></li>
|
|
51
|
+
<li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>save</i><span>Selectable option 05</span></li>
|
|
52
|
+
<li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>equalizer</i><span>Selectable option 06</span></li>
|
|
53
|
+
</ul>
|
|
54
|
+
</div>
|
|
55
|
+
</template>
|
|
56
|
+
</PsDropdown>
|
|
57
|
+
|
|
58
|
+
<PsDropdown>
|
|
59
|
+
<template #dropdownTrigger>
|
|
60
|
+
<i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-auto'>more_horiz</i>
|
|
61
|
+
</template>
|
|
62
|
+
<template #items>
|
|
63
|
+
<PsDropdownList v-bind='$props'></PsDropdownList>
|
|
64
|
+
</template>
|
|
65
|
+
</PsDropdown>
|
|
66
|
+
|
|
67
|
+
<PsDropdown>
|
|
68
|
+
<template #dropdownTrigger>
|
|
69
|
+
<i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-auto'>more_horiz</i>
|
|
70
|
+
</template>
|
|
71
|
+
<template #items>
|
|
72
|
+
<div class='psui-my-3'>
|
|
73
|
+
<ul>
|
|
74
|
+
<li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>public</i><span>Selectable option 01</span></li>
|
|
75
|
+
<li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>share</i><span>Selectable option 02</span></li>
|
|
76
|
+
<li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>person</i><span>Selectable option 03</span></li>
|
|
77
|
+
<li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>settings</i><span>Selectable option 04</span></li>
|
|
78
|
+
<li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>save</i><span>Selectable option 05</span></li>
|
|
79
|
+
<li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>equalizer</i><span>Selectable option 06</span></li>
|
|
80
|
+
</ul>
|
|
81
|
+
</div>
|
|
82
|
+
</template>
|
|
83
|
+
</PsDropdown>
|
|
84
|
+
</div>
|
|
85
|
+
`,
|
|
86
|
+
});
|
|
87
|
+
export const DropdownMenu = Template.bind({});
|
|
88
|
+
DropdownMenu.args = {
|
|
89
|
+
items: [
|
|
90
|
+
'Selectable option 01',
|
|
91
|
+
'Selectable option 02',
|
|
92
|
+
'Selectable option 03',
|
|
93
|
+
'Selectable option 04',
|
|
94
|
+
'Selectable option 05',
|
|
95
|
+
'Selectable option 06',
|
|
96
|
+
],
|
|
97
|
+
};
|
|
98
|
+
//# sourceMappingURL=Dropdown.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../src/stories/Dropdown.stories.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,oCAAoC,CAAA;AAC3D,OAAO,cAAc,MAAM,wCAAwC,CAAA;AACnE,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,EAAE,UAAU,EAAE,cAAc,EAAE;CAC1C,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,UAAU,EAAE,cAAc,EAAE;IAC1C,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ET;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC7C,YAAY,CAAC,IAAI,GAAG;IAClB,KAAK,EAAE;QACL,sBAAsB;QACtB,sBAAsB;QACtB,sBAAsB;QACtB,sBAAsB;QACtB,sBAAsB;QACtB,sBAAsB;KACvB;CACF,CAAA"}
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
import PsDropdownList, { itemStyle } from '../components/forms/PsDropdownList.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Components/Dropdown/Dropdown List',
|
|
4
|
+
component: { PsDropdownList },
|
|
5
|
+
argTypes: {
|
|
6
|
+
layout: {
|
|
7
|
+
control: {
|
|
8
|
+
type: 'inline-radio',
|
|
9
|
+
options: itemStyle
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
rigthLabelFormatter: {
|
|
13
|
+
control: {
|
|
14
|
+
type: 'select',
|
|
15
|
+
options: [null, 'label', 'function']
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
const Template = (args, { argTypes }) => ({
|
|
21
|
+
props: Object.keys(argTypes),
|
|
22
|
+
components: { PsDropdownList },
|
|
23
|
+
data: () => ({
|
|
24
|
+
selected: item,
|
|
25
|
+
onlyTextItems: onlyTextItems,
|
|
26
|
+
richItems: richItems,
|
|
27
|
+
}),
|
|
28
|
+
template: `
|
|
29
|
+
<div style="width:100%;" class="psui-flex psui-gap-8 psui-bg-gray-20 psui-rounded-xl psui-p-10">
|
|
30
|
+
<div class="psui-w-1/2">
|
|
31
|
+
<p class="psui-text-h4 psui-font-bold psui-text-blue-80 psui-mb-2">OnlyText</p>
|
|
32
|
+
|
|
33
|
+
<div class="psui-rounded psui-bg-white psui-shadow-elevation-20 psui-py-3">
|
|
34
|
+
<PsDropdownList
|
|
35
|
+
v-bind="$props"
|
|
36
|
+
:items="onlyTextItems"
|
|
37
|
+
:selected.sync="selected"
|
|
38
|
+
left-label="title"
|
|
39
|
+
key-value="key"
|
|
40
|
+
layout="onlytext"
|
|
41
|
+
:study-data="study_data"
|
|
42
|
+
/>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div class="psui-w-1/2">
|
|
47
|
+
<p class="psui-text-h4 psui-font-bold psui-text-blue-80 psui-mb-2">Rich</p>
|
|
48
|
+
|
|
49
|
+
<div class="psui-rounded psui-bg-white psui-shadow-elevation-20 psui-py-3">
|
|
50
|
+
<PsDropdownList
|
|
51
|
+
v-bind="$props"
|
|
52
|
+
:items="richItems"
|
|
53
|
+
:selected.sync="selected"
|
|
54
|
+
left-label="title"
|
|
55
|
+
key-value="key"
|
|
56
|
+
layout="rich"
|
|
57
|
+
:study-data="study_data"
|
|
58
|
+
/>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
`,
|
|
63
|
+
});
|
|
64
|
+
const onlyTextItems = [
|
|
65
|
+
{
|
|
66
|
+
'key': 'item_01',
|
|
67
|
+
'title': 'Dropdown Item',
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
'key': 'item_02',
|
|
71
|
+
'title': 'Dropdown Item',
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
'key': 'item_03',
|
|
75
|
+
'title': 'Dropdown Item',
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
'key': 'item_04',
|
|
79
|
+
'title': 'Dropdown Item',
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
'key': 'item_05',
|
|
83
|
+
'title': 'Dropdown Item',
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
'key': 'item_06',
|
|
87
|
+
'title': 'Dropdown Item',
|
|
88
|
+
},
|
|
89
|
+
];
|
|
90
|
+
const richItems = [
|
|
91
|
+
{
|
|
92
|
+
'isActive': true,
|
|
93
|
+
'key': 'forecast_units_affected',
|
|
94
|
+
'title': 'Affected Units',
|
|
95
|
+
'description': '(lifecycle)',
|
|
96
|
+
'right_label': '00',
|
|
97
|
+
'hasProjections': true,
|
|
98
|
+
'hasHelper': {
|
|
99
|
+
'type': 'helpers',
|
|
100
|
+
'id': 17,
|
|
101
|
+
'slug': 'forecast_units_affected'
|
|
102
|
+
},
|
|
103
|
+
'chartProjection': {
|
|
104
|
+
'title': 'Number of Affected Units',
|
|
105
|
+
'subtitle': ''
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
'isActive': false,
|
|
110
|
+
'key': 'forecast_initial_cost',
|
|
111
|
+
'title': 'Compliance Cost',
|
|
112
|
+
'description': '(lifecycle)',
|
|
113
|
+
'right_label': '00',
|
|
114
|
+
'hasProjections': true,
|
|
115
|
+
'hasHelper': {
|
|
116
|
+
'type': 'helpers',
|
|
117
|
+
'id': 20,
|
|
118
|
+
'slug': 'forecast_initial_cost'
|
|
119
|
+
},
|
|
120
|
+
'chartProjection': {
|
|
121
|
+
'title': 'Compliance Cost',
|
|
122
|
+
'subtitle': ''
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
'isActive': true,
|
|
127
|
+
'key': 'forecast_emissions_savings',
|
|
128
|
+
'title': 'Emissions Reductions',
|
|
129
|
+
'description': '(lifecycle MTCO²e)',
|
|
130
|
+
'right_label': '00',
|
|
131
|
+
'hasProjections': true,
|
|
132
|
+
'hasHelper': {
|
|
133
|
+
'type': 'helpers',
|
|
134
|
+
'id': 18,
|
|
135
|
+
'slug': 'forecast_emissions_savings'
|
|
136
|
+
},
|
|
137
|
+
'chartProjection': {
|
|
138
|
+
'title': 'Emissions Reductions',
|
|
139
|
+
'subtitle': 'MTCO²e'
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
'isActive': true,
|
|
144
|
+
'key': 'forecast_lifecycle_savings',
|
|
145
|
+
'title': 'Lifecycle Savings',
|
|
146
|
+
'description': '(on-bill)',
|
|
147
|
+
'right_label': '00',
|
|
148
|
+
'hasProjections': true,
|
|
149
|
+
'hasHelper': {
|
|
150
|
+
'type': 'helpers',
|
|
151
|
+
'id': 19,
|
|
152
|
+
'slug': 'forecast_lifecycle_savings'
|
|
153
|
+
},
|
|
154
|
+
'chartProjection': {
|
|
155
|
+
'title': 'Bill Savings',
|
|
156
|
+
'subtitle': ''
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
'isActive': false,
|
|
161
|
+
'key': 'forecast_kwh_savings',
|
|
162
|
+
'title': 'Electricity Savings',
|
|
163
|
+
'description': '(lifecycle kWh)',
|
|
164
|
+
'right_label': '00',
|
|
165
|
+
'hasProjections': true,
|
|
166
|
+
'hasHelper': {
|
|
167
|
+
'type': 'helpers',
|
|
168
|
+
'id': 21,
|
|
169
|
+
'slug': 'forecast_kwh_savings'
|
|
170
|
+
},
|
|
171
|
+
'chartProjection': {
|
|
172
|
+
'title': 'Electricity Savings',
|
|
173
|
+
'subtitle': 'kWh'
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
'isActive': false,
|
|
178
|
+
'key': 'forecast_therms_savings',
|
|
179
|
+
'title': 'Gas Savings',
|
|
180
|
+
'description': '(lifecycle therms)',
|
|
181
|
+
'right_label': '00',
|
|
182
|
+
'hasProjections': true,
|
|
183
|
+
'hasHelper': {
|
|
184
|
+
'type': 'helpers',
|
|
185
|
+
'id': 22,
|
|
186
|
+
'slug': 'forecast_therms_savings'
|
|
187
|
+
},
|
|
188
|
+
'chartProjection': {
|
|
189
|
+
'title': 'Gas Savings',
|
|
190
|
+
'subtitle': 'therms'
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
];
|
|
194
|
+
const item = richItems[0];
|
|
195
|
+
const studyData = {
|
|
196
|
+
'forecast_units_affected': 7001.75,
|
|
197
|
+
'forecast_emissions_savings': 17575.66588897,
|
|
198
|
+
'forecast_therms_savings': 5060589.279978376,
|
|
199
|
+
'forecast_kwh_savings': -104561078.77158748,
|
|
200
|
+
'forecast_lifecycle_savings': -40645997.14350001,
|
|
201
|
+
'forecast_initial_cost': -21144739.311334003
|
|
202
|
+
};
|
|
203
|
+
export const DropdownList = Template.bind({});
|
|
204
|
+
DropdownList.args = {
|
|
205
|
+
items: onlyTextItems,
|
|
206
|
+
study_data: studyData,
|
|
207
|
+
};
|
|
208
|
+
//# sourceMappingURL=DropdownList.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownList.stories.js","sourceRoot":"","sources":["../../src/stories/DropdownList.stories.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import MyHeader from './Header.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Example/Header',
|
|
4
|
+
component: MyHeader,
|
|
5
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
6
|
+
tags: ['autodocs'],
|
|
7
|
+
render: (args) => ({
|
|
8
|
+
// Components used in your story `template` are defined in the `components` object
|
|
9
|
+
components: {
|
|
10
|
+
MyHeader,
|
|
11
|
+
},
|
|
12
|
+
// The story's `args` need to be mapped into the template through the `setup()` method
|
|
13
|
+
setup() {
|
|
14
|
+
// Story args can be spread into the returned object
|
|
15
|
+
return {
|
|
16
|
+
...args,
|
|
17
|
+
};
|
|
18
|
+
},
|
|
19
|
+
// Then, the spread values can be accessed directly in the template
|
|
20
|
+
template: '<my-header :user="user" />',
|
|
21
|
+
}),
|
|
22
|
+
parameters: {
|
|
23
|
+
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
|
24
|
+
layout: 'fullscreen',
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
export const LoggedIn = {
|
|
28
|
+
args: {
|
|
29
|
+
user: {
|
|
30
|
+
name: 'Jane Doe',
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
};
|
|
34
|
+
export const LoggedOut = {
|
|
35
|
+
args: {
|
|
36
|
+
user: null,
|
|
37
|
+
},
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=Header.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Header.stories.js","sourceRoot":"","sources":["../../src/stories/Header.stories.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,cAAc,CAAA;AAEnC,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,0HAA0H;IAC1H,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACjB,kFAAkF;QAClF,UAAU,EAAE;YACV,QAAQ;SACT;QACD,sFAAsF;QACtF,KAAK;YACH,oDAAoD;YACpD,OAAO;gBACL,GAAG,IAAI;aACR,CAAA;QACH,CAAC;QACD,mEAAmE;QACnE,QAAQ,EAAE,4BAA4B;KACvC,CAAC;IACF,UAAU,EAAE;QACV,2FAA2F;QAC3F,MAAM,EAAE,YAAY;KACrB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,IAAI,EAAE;YACJ,IAAI,EAAE,UAAU;SACjB;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;KACX;CACF,CAAA"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import PsHighlightRippleDot from '../components/badges-and-tags/PsHighlightRippleDot.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Badges & Tags/Badges/HighlightRippleDot',
|
|
4
|
+
component: PsHighlightRippleDot,
|
|
5
|
+
};
|
|
6
|
+
const Template = (args, { argTypes }) => ({
|
|
7
|
+
props: Object.keys(argTypes),
|
|
8
|
+
components: { PsHighlightRippleDot },
|
|
9
|
+
template: '<PsHighlightRippleDot v-bind="$props" />',
|
|
10
|
+
});
|
|
11
|
+
export const HighlightRippleDot = Template.bind({});
|
|
12
|
+
HighlightRippleDot.args = {};
|
|
13
|
+
//# sourceMappingURL=HighlightRippleDot.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HighlightRippleDot.stories.js","sourceRoot":"","sources":["../../src/stories/HighlightRippleDot.stories.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,MAAM,wDAAwD,CAAA;AAEzF,eAAe;IACb,KAAK,EAAE,yCAAyC;IAChD,SAAS,EAAE,oBAAoB;CAChC,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,oBAAoB,EAAE;IACpC,QAAQ,EAAE,0CAA0C;CACrD,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACnD,kBAAkB,CAAC,IAAI,GAAG,EAAE,CAAA"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import PsIcon from '../components/ui/PsIcon.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Components/Icon',
|
|
4
|
+
component: PsIcon,
|
|
5
|
+
argTypes: {},
|
|
6
|
+
};
|
|
7
|
+
const Template = (args, { argTypes }) => ({
|
|
8
|
+
props: Object.keys(argTypes),
|
|
9
|
+
components: { PsIcon },
|
|
10
|
+
template: `
|
|
11
|
+
<div class='psui-flex'>
|
|
12
|
+
<PsIcon v-bind="$props" type='svg' icon="/images/multifamily-units.svg" />
|
|
13
|
+
<PsIcon v-bind="$props" type='svg' icon="/images/multifamily-units.svg"/>
|
|
14
|
+
</div>
|
|
15
|
+
`,
|
|
16
|
+
});
|
|
17
|
+
export const IconSimple = Template.bind({});
|
|
18
|
+
IconSimple.args = {};
|
|
19
|
+
//# sourceMappingURL=Icon.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../src/stories/Icon.stories.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD,eAAe;IACX,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,EAAE;CACb,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,MAAM,EAAE;IACtB,QAAQ,EAAE;;;;;KAKT;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC3C,UAAU,CAAC,IAAI,GAAG,EAAE,CAAA"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import PsInlineSelector from '../components/controls/PsInlineSelector.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Controls & Selectors/InlineSelector',
|
|
4
|
+
component: PsInlineSelector,
|
|
5
|
+
};
|
|
6
|
+
const TemplateDefault = (args, { argTypes }) => ({
|
|
7
|
+
props: Object.keys(argTypes),
|
|
8
|
+
components: { PsInlineSelector },
|
|
9
|
+
template: `
|
|
10
|
+
<div style="width: auto; margin-right: auto; display: flex; align-items: center;">
|
|
11
|
+
<PsInlineSelector v-bind="$props"></PsInlineSelector>
|
|
12
|
+
</div>
|
|
13
|
+
`
|
|
14
|
+
});
|
|
15
|
+
export const Default = TemplateDefault.bind({});
|
|
16
|
+
//# sourceMappingURL=InlineSelector.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InlineSelector.stories.js","sourceRoot":"","sources":["../../src/stories/InlineSelector.stories.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,6CAA6C,CAAA;AAE1E,eAAe;IACb,KAAK,EAAE,qCAAqC;IAC5C,SAAS,EAAE,gBAAgB;CAC5B,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,IAAQ,EAAE,EAAC,QAAQ,EAAgB,EAAE,EAAE,CAAC,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAC,gBAAgB,EAAC;IAC9B,QAAQ,EAAE;;;;GAIT;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|