@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 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import PsAccordionItem from '../components/accordion/PsAccordionItem.vue';
|
|
2
|
+
import PsAccordion from '../components/accordion/PsAccordion.vue';
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Components/Accordion',
|
|
5
|
+
component: PsAccordion,
|
|
6
|
+
subcomponents: { PsAccordionItem },
|
|
7
|
+
};
|
|
8
|
+
export const Index = (args, { argTypes }) => ({
|
|
9
|
+
props: Object.keys({ argTypes, args }),
|
|
10
|
+
components: { PsAccordion, PsAccordionItem },
|
|
11
|
+
template: `
|
|
12
|
+
<div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-2 psui-gap-6">
|
|
13
|
+
<div>
|
|
14
|
+
<div class="psui-my-4">
|
|
15
|
+
<h1 class="psui-font-bold psui-border-b psui-border-gray-30">Accordion Big</h1>
|
|
16
|
+
</div>
|
|
17
|
+
<PsAccordion layout="big" class="psui-bg-white">
|
|
18
|
+
<PsAccordionItem title="Header 01">
|
|
19
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
|
|
20
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
|
|
21
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
|
|
22
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
|
|
23
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
|
|
24
|
+
</PsAccordionItem>
|
|
25
|
+
<PsAccordionItem title="Header 02">
|
|
26
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
|
|
27
|
+
</PsAccordionItem>
|
|
28
|
+
<PsAccordionItem title="Header 03">
|
|
29
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
|
|
30
|
+
</PsAccordionItem>
|
|
31
|
+
</PsAccordion>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div>
|
|
35
|
+
<div class="psui-my-4">
|
|
36
|
+
<h1 class="psui-font-bold psui-border-b psui-border-gray-30">Accordion Medium</h1>
|
|
37
|
+
</div>
|
|
38
|
+
<PsAccordion layout="medium" class="psui-bg-white">
|
|
39
|
+
<PsAccordionItem title="Header 01">
|
|
40
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
|
|
41
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
|
|
42
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
|
|
43
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
|
|
44
|
+
</PsAccordionItem>
|
|
45
|
+
<PsAccordionItem title="Header 02" :opened="false">
|
|
46
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
|
|
47
|
+
</PsAccordionItem>
|
|
48
|
+
<PsAccordionItem title="Header 03">
|
|
49
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
|
|
50
|
+
</PsAccordionItem>
|
|
51
|
+
</PsAccordion>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
`,
|
|
55
|
+
});
|
|
56
|
+
//# sourceMappingURL=Accordion.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.stories.js","sourceRoot":"","sources":["../../src/stories/Accordion.stories.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAO,6CAA6C,CAAA;AAC1E,OAAO,WAAW,MAAM,yCAAyC,CAAA;AAEjE,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE,EAAE,eAAe,EAAE;CACnC,CAAA;AAGD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,IAAQ,EAAE,EAAE,QAAQ,EAAoB,EAAE,EAAE,CAAC,CAAC;IAClE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAC,CAAC;IACpC,UAAU,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE;IAC5C,QAAQ,EACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CC;CACJ,CAAC,CAAA"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import PsBadgeWithIcon from '../components/badges-and-tags/PsBadgeWithIcon.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Badges & Tags/Badges/BadgeWithIcon',
|
|
4
|
+
component: PsBadgeWithIcon,
|
|
5
|
+
argTypes: {},
|
|
6
|
+
};
|
|
7
|
+
const TemplateDefault = (args, { argTypes }) => ({
|
|
8
|
+
props: Object.keys(argTypes),
|
|
9
|
+
components: { PsBadgeWithIcon },
|
|
10
|
+
template: `
|
|
11
|
+
<div style="display: flex; flex-direction: column;">
|
|
12
|
+
<div style="width: fit-content; display:flex; gap:70px; margin-left: 40px;">
|
|
13
|
+
<span>Grey</span>
|
|
14
|
+
<span style="margin-left: 8px;">Blue</span>
|
|
15
|
+
<span style="margin-left: 5px;">Green</span>
|
|
16
|
+
<span>Yellow</span>
|
|
17
|
+
</div>
|
|
18
|
+
<div style="width: fit-content; display:flex; gap:5px;">
|
|
19
|
+
<PsBadgeWithIcon/>
|
|
20
|
+
<PsBadgeWithIcon layout="blue"/>
|
|
21
|
+
<PsBadgeWithIcon layout="green"/>
|
|
22
|
+
<PsBadgeWithIcon layout="yellow"/>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
`
|
|
26
|
+
});
|
|
27
|
+
export const Default = TemplateDefault.bind({});
|
|
28
|
+
//# sourceMappingURL=BadgeWithIcon.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeWithIcon.stories.js","sourceRoot":"","sources":["../../src/stories/BadgeWithIcon.stories.ts"],"names":[],"mappings":"AAAA,OAAQ,eAAe,MAAO,mDAAmD,CAAA;AAEjF,eAAe;IACX,KAAK,EAAE,oCAAoC;IAC3C,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE,EACT;CACF,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,IAAQ,EAAE,EAAC,QAAQ,EAAgB,EAAC,EAAE,CAAA,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAC,EAAC,eAAe,EAAC;IAC5B,QAAQ,EAAE;;;;;;;;;;;;;;;KAeT;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import PsBarChart from '../components/data-graphics/PsBarChart.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Data Graphics/Charts/BarChart',
|
|
4
|
+
component: PsBarChart,
|
|
5
|
+
};
|
|
6
|
+
const defaultTemplate = (args, { argTypes }) => ({
|
|
7
|
+
props: Object.keys(argTypes),
|
|
8
|
+
components: { PsBarChart },
|
|
9
|
+
template: `
|
|
10
|
+
<div style='padding: 20px;'>
|
|
11
|
+
<PsBarChart v-bind="$props"/>
|
|
12
|
+
</div>
|
|
13
|
+
`
|
|
14
|
+
});
|
|
15
|
+
export const BarChart = defaultTemplate.bind({});
|
|
16
|
+
//# sourceMappingURL=BarChart.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BarChart.stories.js","sourceRoot":"","sources":["../../src/stories/BarChart.stories.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAA;AACnE,eAAe;IACb,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,UAAU;CACtB,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,EAAE,UAAU,EAAE;IAC1B,QAAQ,EAAE;;;;KAIP;CACJ,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import PsBreadcrumb from '../components/navigations/PsBreadcrumb.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Navigations/Breadcrumb',
|
|
4
|
+
component: PsBreadcrumb,
|
|
5
|
+
argTypes: {},
|
|
6
|
+
};
|
|
7
|
+
const items = [
|
|
8
|
+
{ title: '1st level', route: '' },
|
|
9
|
+
{ title: 'Big name that needs to be shortened', route: '#' },
|
|
10
|
+
{ title: '3rd level', route: '' },
|
|
11
|
+
{ title: '4th level', route: '' },
|
|
12
|
+
];
|
|
13
|
+
const Template = (args, { argTypes }) => ({
|
|
14
|
+
props: Object.keys(argTypes),
|
|
15
|
+
components: { PsBreadcrumb },
|
|
16
|
+
template: `
|
|
17
|
+
<PsBreadcrumb v-bind="$props" />
|
|
18
|
+
`,
|
|
19
|
+
});
|
|
20
|
+
export const Default = Template.bind({});
|
|
21
|
+
//# sourceMappingURL=Breadcrumb.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Breadcrumb.stories.js","sourceRoot":"","sources":["../../src/stories/Breadcrumb.stories.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,4CAA4C,CAAA;AACrE,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,EAAE;CACb,CAAA;AACD,MAAM,KAAK,GAAG;IACZ,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IACjC,EAAE,KAAK,EAAE,qCAAqC,EAAE,KAAK,EAAE,GAAG,EAAE;IAC5D,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IACjC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;CAClC,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAQ,EAAE,EAAE,QAAQ,EAAiB,EAAE,EAAE,CAAC,CAAC;IAC3D,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,YAAY,EAAE;IAC5B,QAAQ,EAAE;;GAET;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import MyButton from './Button.vue';
|
|
2
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Example/Button',
|
|
5
|
+
component: MyButton,
|
|
6
|
+
tags: ['autodocs'],
|
|
7
|
+
argTypes: {
|
|
8
|
+
backgroundColor: {
|
|
9
|
+
control: 'color',
|
|
10
|
+
},
|
|
11
|
+
onClick: {},
|
|
12
|
+
size: {
|
|
13
|
+
control: {
|
|
14
|
+
type: 'select',
|
|
15
|
+
},
|
|
16
|
+
options: ['small', 'medium', 'large'],
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
21
|
+
export const Primary = {
|
|
22
|
+
args: {
|
|
23
|
+
primary: true,
|
|
24
|
+
label: 'Button',
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
export const Secondary = {
|
|
28
|
+
args: {
|
|
29
|
+
label: 'Button',
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
export const Large = {
|
|
33
|
+
args: {
|
|
34
|
+
size: 'large',
|
|
35
|
+
label: 'Button',
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
export const Small = {
|
|
39
|
+
args: {
|
|
40
|
+
size: 'small',
|
|
41
|
+
label: 'Button',
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=Button.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/stories/Button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,cAAc,CAAA;AAEnC,kFAAkF;AAClF,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,eAAe,EAAE;YACf,OAAO,EAAE,OAAO;SACjB;QACD,OAAO,EAAE,EAAE;QACX,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;SACtC;KACF;CACF,CAAA;AAED,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,QAAQ;KAChB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;KAChB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;KAChB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;KAChB;CACF,CAAA"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import PsCardInfos from '../components/badges-and-tags/PsCardInfos.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Components/CardInfos',
|
|
4
|
+
component: PsCardInfos,
|
|
5
|
+
argTypes: {},
|
|
6
|
+
};
|
|
7
|
+
const Template = (args, { argTypes }) => ({
|
|
8
|
+
props: Object.keys(argTypes),
|
|
9
|
+
components: { PsCardInfos },
|
|
10
|
+
template: '<PsCardInfos v-bind="$props" />',
|
|
11
|
+
});
|
|
12
|
+
export const CardInfos = Template.bind({});
|
|
13
|
+
//# sourceMappingURL=CardInfos.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CardInfos.stories.js","sourceRoot":"","sources":["../../src/stories/CardInfos.stories.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,+CAA+C,CAAA;AAEvE,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,EAAE;CACb,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAQ,EAAE,EAAE,QAAQ,EAAmB,EAAE,EAAE,CAAC,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,WAAW,EAAE;IAC3B,QAAQ,EAAE,iCAAiC;CAC5C,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import PsChartLegend from '../components/badges-and-tags/PsChartLegend.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Badges & Tags/Badges/ChartLegend',
|
|
4
|
+
component: PsChartLegend,
|
|
5
|
+
argTypes: {},
|
|
6
|
+
};
|
|
7
|
+
const Template = (args, { argTypes }) => ({
|
|
8
|
+
props: Object.keys(argTypes),
|
|
9
|
+
components: { PsChartLegend },
|
|
10
|
+
template: '<PsChartLegend v-bind="$props" />',
|
|
11
|
+
});
|
|
12
|
+
export const ChartLegend = Template.bind({});
|
|
13
|
+
//# sourceMappingURL=ChartLegend.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChartLegend.stories.js","sourceRoot":"","sources":["../../src/stories/ChartLegend.stories.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,iDAAiD,CAAA;AAE3E,eAAe;IACb,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE,EAAE;CACb,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAQ,EAAE,EAAE,QAAQ,EAAqB,EAAE,EAAE,CAAC,CAAC;IAC/D,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,aAAa,EAAE;IAC7B,QAAQ,EAAE,mCAAmC;CAC9C,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import PsCheckbox from '../components/controls/PsCheckbox.vue';
|
|
2
|
+
// const icons = ['add_circle', 'delete', 'done', 'info', 'send']
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Controls & Selectors/Checkbox',
|
|
5
|
+
component: PsCheckbox,
|
|
6
|
+
};
|
|
7
|
+
const defaultTemplate = (args, { argTypes }) => ({
|
|
8
|
+
props: Object.keys(argTypes),
|
|
9
|
+
components: { PsCheckbox },
|
|
10
|
+
template: `
|
|
11
|
+
<div style='display:flex; gap: 20px;'>
|
|
12
|
+
<div style='display:flex; flex-direction:column; gap:5px;'>
|
|
13
|
+
<p>Resting</p>
|
|
14
|
+
<div style='display: flex; flex-direction:column; gap: 10px;'>
|
|
15
|
+
<PsCheckbox v-bind="$props" label='Label 1' />
|
|
16
|
+
<PsCheckbox v-bind="$props" label='Label 2' size='small' />
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div style='display:flex; flex-direction:column; gap:5px;'>
|
|
20
|
+
<p>Active</p>
|
|
21
|
+
<div style='display: flex; flex-direction:column; gap: 10px;'>
|
|
22
|
+
<PsCheckbox v-bind="$props" label='Label 3' checked />
|
|
23
|
+
<PsCheckbox v-bind="$props" label='Label 4' checked size='small'/>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
<div style='display:flex; flex-direction:column; gap:5px;'>
|
|
27
|
+
<p>Mixed</p>
|
|
28
|
+
<div style='display: flex; flex-direction:column; gap: 10px;'>
|
|
29
|
+
<PsCheckbox v-bind="$props" label='Label 5' layout='mixed' checked />
|
|
30
|
+
<PsCheckbox v-bind="$props" label='Label 6' layout='mixed' size='small' checked />
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div style='display:flex; flex-direction:column; gap:5px;'>
|
|
34
|
+
<p>Disabled</p>
|
|
35
|
+
<div style='display: flex; flex-direction:column; gap: 10px;'>
|
|
36
|
+
<PsCheckbox v-bind="$props" label='Label 7' disabled/>
|
|
37
|
+
<PsCheckbox v-bind="$props" label='Label 8' size='small' disabled/>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
`
|
|
42
|
+
});
|
|
43
|
+
export const Default = defaultTemplate.bind({});
|
|
44
|
+
//# sourceMappingURL=Checkbox.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../src/stories/Checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,uCAAuC,CAAA;AAC9D,iEAAiE;AACjE,eAAe;IACb,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,UAAU;CACtB,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,EAAE,UAAU,EAAC;IACzB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BP;CACJ,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import PsCheckboxSimple from '../components/controls/PsCheckboxSimple.vue';
|
|
2
|
+
// const icons = ['add_circle', 'delete', 'done', 'info', 'send']
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Text fields & Forms/Inputs V2/Checkbox',
|
|
5
|
+
component: PsCheckboxSimple,
|
|
6
|
+
};
|
|
7
|
+
const defaultTemplate = (args, { argTypes }) => ({
|
|
8
|
+
props: Object.keys(argTypes),
|
|
9
|
+
components: { PsCheckboxSimple },
|
|
10
|
+
data: () => ({
|
|
11
|
+
checkBox1: true
|
|
12
|
+
}),
|
|
13
|
+
template: `
|
|
14
|
+
<div style='display:flex; gap: 20px;'>
|
|
15
|
+
<div style='display:flex; flex-direction:column; gap:5px;'>
|
|
16
|
+
<p>Resting</p>
|
|
17
|
+
<div style='display: flex; flex-direction:column; gap: 10px;'>
|
|
18
|
+
<PsCheckboxSimple :checked="checkBox1" @click="checkBox1 = !checkBox1" label='Label 1' />
|
|
19
|
+
<PsCheckboxSimple v-bind="$props" label='Label 2' size='small' />
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
<div style='display:flex; flex-direction:column; gap:5px;'>
|
|
23
|
+
<p>Active</p>
|
|
24
|
+
<div style='display: flex; flex-direction:column; gap: 10px;'>
|
|
25
|
+
<PsCheckboxSimple v-bind="$props" label='Label 3' checked />
|
|
26
|
+
<PsCheckboxSimple v-bind="$props" label='Label 4' checked size='small'/>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
<div style='display:flex; flex-direction:column; gap:5px;'>
|
|
30
|
+
<p>Mixed</p>
|
|
31
|
+
<div style='display: flex; flex-direction:column; gap: 10px;'>
|
|
32
|
+
<PsCheckboxSimple v-bind="$props" label='Label 5' layout='mixed' checked />
|
|
33
|
+
<PsCheckboxSimple v-bind="$props" label='Label 6' layout='mixed' size='small' checked />
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div style='display:flex; flex-direction:column; gap:5px;'>
|
|
37
|
+
<p>Disabled</p>
|
|
38
|
+
<div style='display: flex; flex-direction:column; gap: 10px;'>
|
|
39
|
+
<PsCheckboxSimple v-bind="$props" label='Input via inputAttrs' :inputAttrs="{ id: 'my-input-id' }" disabled/>
|
|
40
|
+
<PsCheckboxSimple v-bind="$props" label='Input via component id' size='small' id="my-component-id" data-test="test" disabled/>
|
|
41
|
+
<PsCheckboxSimple v-bind="$props" label='Input fallback' size='small' disabled/>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
`
|
|
46
|
+
});
|
|
47
|
+
export const Default = defaultTemplate.bind({});
|
|
48
|
+
//# sourceMappingURL=CheckboxSimple.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxSimple.stories.js","sourceRoot":"","sources":["../../src/stories/CheckboxSimple.stories.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,6CAA6C,CAAA;AAC1E,iEAAiE;AACjE,eAAe;IACb,KAAK,EAAE,wCAAwC;IAC/C,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,EAAE,gBAAgB,EAAE;IAChC,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;QACX,SAAS,EAAG,IAAI;KACjB,CAAC;IACF,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCP;CACJ,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import PsChips from '../components/chips/PsChips.vue';
|
|
2
|
+
import * as HeaderStories from '../stories/Header.stories';
|
|
3
|
+
const meta = {
|
|
4
|
+
component: PsChips
|
|
5
|
+
};
|
|
6
|
+
export default meta;
|
|
7
|
+
export const Primary = {
|
|
8
|
+
render: (args) => ({
|
|
9
|
+
components: { PsChips },
|
|
10
|
+
setup() {
|
|
11
|
+
return { args };
|
|
12
|
+
},
|
|
13
|
+
template: `<div style="display:flex; gap: 10px;">
|
|
14
|
+
<PsChips v-bind='$props' label="Simple chips with icons" type="button" layout="with-icon" icon="home" @update:checked='isChecked = $event' :checked='isChecked'/>
|
|
15
|
+
<PsChips v-bind='$props' label="Radio chips" type="radio" @update:checked='isChecked = $event' :checked='isChecked'/>
|
|
16
|
+
<PsChips v-bind='$props' label="Checkbox chips" type="checkbox" @update:checked='isCheckedTwo = $event' :checked='isCheckedTwo'/>
|
|
17
|
+
<PsChips v-bind='$props' label="Rich chips" type="button" layout="rich" icon="text_snippet" @update:checked='isChecked = $event' :checked='isChecked'/>
|
|
18
|
+
</div>
|
|
19
|
+
`,
|
|
20
|
+
args: {
|
|
21
|
+
label: 'Simple Chip',
|
|
22
|
+
icon: '',
|
|
23
|
+
...HeaderStories.LoggedIn.args
|
|
24
|
+
}
|
|
25
|
+
})
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=Chips.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chips.stories.js","sourceRoot":"","sources":["../../src/stories/Chips.stories.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,iCAAiC,CAAA;AAGrD,OAAO,KAAK,aAAa,MAAM,2BAA2B,CAAA;AAE1D,MAAM,IAAI,GAAyB;IACjC,SAAS,EAAE,OAAO;CACnB,CAAA;AAED,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACjB,UAAU,EAAE,EAAE,OAAO,EAAE;QACvB,KAAK;YACH,OAAO,EAAE,IAAI,EAAE,CAAA;QACjB,CAAC;QACD,QAAQ,EAAE;;;;;;eAMC;QACX,IAAI,EAAC;YACH,KAAK,EAAE,aAAa;YACpB,IAAI,EAAC,EAAE;YACP,GAAG,aAAa,CAAC,QAAQ,CAAC,IAAI;SAC/B;KACF,CAAC;CACH,CAAA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import PsClimateZoneBadge from '../components/badges-and-tags/PsClimateZoneBadge.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Badges & Tags/Badges/ClimateZoneBadge',
|
|
4
|
+
component: PsClimateZoneBadge,
|
|
5
|
+
};
|
|
6
|
+
const Template = (args, { argTypes }) => ({
|
|
7
|
+
props: Object.keys(argTypes),
|
|
8
|
+
components: { PsClimateZoneBadge },
|
|
9
|
+
template: '<PsClimateZoneBadge v-bind="$props" />',
|
|
10
|
+
});
|
|
11
|
+
export const ClimateZoneBadge = Template.bind({});
|
|
12
|
+
ClimateZoneBadge.args = {
|
|
13
|
+
icon: 'area_chart',
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=ClimateZoneBadge.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ClimateZoneBadge.stories.js","sourceRoot":"","sources":["../../src/stories/ClimateZoneBadge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,sDAAsD,CAAA;AAErF,eAAe;IACb,KAAK,EAAE,uCAAuC;IAC9C,SAAS,EAAE,kBAAkB;CAC9B,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAQ,EAAE,EAAE,QAAQ,EAAmB,EAAE,EAAE,CAAC,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,kBAAkB,EAAE;IAClC,QAAQ,EAAE,wCAAwC;CACnD,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjD,gBAAgB,CAAC,IAAI,GAAG;IACtB,IAAI,EAAE,YAAY;CACnB,CAAA"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import PsCostEffectBar from '../components/badges-and-tags/PsCostEffectBar.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Badges & Tags/Badges/CostEffectBar',
|
|
4
|
+
component: PsCostEffectBar,
|
|
5
|
+
argTypes: {
|
|
6
|
+
value: {
|
|
7
|
+
control: { type: 'number', min: 0, max: 100 },
|
|
8
|
+
},
|
|
9
|
+
breakEven: {
|
|
10
|
+
control: { type: 'number', min: 0, max: 100 },
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
const Template = (args, { argTypes }) => ({
|
|
15
|
+
props: Object.keys(argTypes),
|
|
16
|
+
components: { PsCostEffectBar },
|
|
17
|
+
template: '<PsCostEffectBar v-bind="$props" />',
|
|
18
|
+
});
|
|
19
|
+
export const SimpleProgressBar = Template.bind({});
|
|
20
|
+
SimpleProgressBar.args = {};
|
|
21
|
+
//# sourceMappingURL=CostEffectBar.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CostEffectBar.stories.js","sourceRoot":"","sources":["../../src/stories/CostEffectBar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,mDAAmD,CAAA;AAE/E,eAAe;IACb,KAAK,EAAE,oCAAoC;IAC3C,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;SAC9C;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;SAC9C;KACF;CACF,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAQ,EAAE,EAAE,QAAQ,EAAmB,EAAE,EAAE,CAAC,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,eAAe,EAAE;IAC/B,QAAQ,EAAE,qCAAqC;CAChD,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAClD,iBAAiB,CAAC,IAAI,GAAG,EAAE,CAAA"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import PsDataTable, { alignment } from '../components/datatable/PsDataTable.vue';
|
|
2
|
+
import PsDataTableItem from '../components/datatable/PsDataTableItem.vue';
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Data Tables/DataTable',
|
|
5
|
+
component: PsDataTable,
|
|
6
|
+
subcomponents: { PsDataTableItem },
|
|
7
|
+
argTypes: {
|
|
8
|
+
align: { control: { type: 'select', options: alignment } },
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
const Template = (args, { argTypes }) => ({
|
|
12
|
+
props: Object.keys(argTypes),
|
|
13
|
+
components: { PsDataTable },
|
|
14
|
+
template: `
|
|
15
|
+
<div style="width:400px;">
|
|
16
|
+
<PsDataTable v-bind="$props" />
|
|
17
|
+
</div>
|
|
18
|
+
`
|
|
19
|
+
});
|
|
20
|
+
const RichTemplate = (args, { argTypes }) => ({
|
|
21
|
+
props: Object.keys(argTypes),
|
|
22
|
+
components: { PsDataTable, PsDataTableItem },
|
|
23
|
+
template: `
|
|
24
|
+
<div style="width:400px">
|
|
25
|
+
<PsDataTable v-bind="$props">
|
|
26
|
+
<PsDataTableItem v-bind="$props"/>
|
|
27
|
+
</PsDataTable>
|
|
28
|
+
</div>
|
|
29
|
+
`
|
|
30
|
+
});
|
|
31
|
+
export const Simple = Template.bind({});
|
|
32
|
+
Simple.args = {
|
|
33
|
+
header: ['year', 'month', 'sale'],
|
|
34
|
+
data: [{ year: '1992', month: '12', sale: '1000.00' }, { year: '1989', month: '02', sale: '1200.00' }],
|
|
35
|
+
footer: ['Footer 1', 'Footer 2', 'Footer 3'],
|
|
36
|
+
type: 'simple',
|
|
37
|
+
};
|
|
38
|
+
export const Rich = RichTemplate.bind({});
|
|
39
|
+
Rich.args = {
|
|
40
|
+
header: ['header 1', 'header 2', 'header 3'],
|
|
41
|
+
data: [[[20, -3], [20, 2], [20, 2]], { header4: { value: 20, delta: 2 }, header5: { value: 20, delta: 2 }, header6: { value: 20, delta: 2 } }],
|
|
42
|
+
footer: ['Footer 1', 'Footer 2', 'Footer 3'],
|
|
43
|
+
type: 'rich'
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=Datatable.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Datatable.stories.js","sourceRoot":"","sources":["../../src/stories/Datatable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,EAAE,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAA;AAChF,OAAO,eAAe,MAAM,6CAA6C,CAAA;AAEzE,eAAe;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE,EAAE,eAAe,EAAE;IAClC,QAAQ,EAAE;QACN,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE;KAC7D;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAQ,EAAE,EAAE,QAAQ,EAAmB,EAAE,EAAE,CAAC,CAAC;IAC3D,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAG,EAAC,WAAW,EAAC;IAC1B,QAAQ,EAAE;;;;SAIL;CACR,CAAC,CAAA;AAEF,MAAM,YAAY,GAAG,CAAC,IAAQ,EAAE,EAAE,QAAQ,EAAmB,EAAG,EAAE,CAAC,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAC,WAAW,EAAE,eAAe,EAAC;IAC1C,QAAQ,EAAE;;;;;;KAMT;CACJ,CAAC,CAAA;AAGF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACvC,MAAM,CAAC,IAAI,GAAG;IACV,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC;IACjC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IACtG,MAAM,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC;IAC5C,IAAI,EAAE,QAAQ;CACjB,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACzC,IAAI,CAAC,IAAI,GAAG;IACR,MAAM,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC;IAC5C,IAAI,EAAC,CAAC,CAAE,CAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAG,CAAG,EAAE,EAAG,CAAC,CAAC,EAAE,CAAG,EAAE,EAAG,CAAC,CAAC,CAAE,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAC,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAC,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAC,EAAE,CAAC;IACpJ,MAAM,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC;IAC5C,IAAI,EAAE,MAAM;CACf,CAAA"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import PsDateCardInfo from '../components/badges-and-tags/PsDateCardInfo.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Components/DateCardInfo',
|
|
4
|
+
component: PsDateCardInfo,
|
|
5
|
+
};
|
|
6
|
+
const Template = (args, { argTypes }) => ({
|
|
7
|
+
props: Object.keys(argTypes),
|
|
8
|
+
components: { PsDateCardInfo },
|
|
9
|
+
template: `
|
|
10
|
+
<div style="width: 1000px; background:#DBE9F1; display:flex; gap: 7px; padding: 20px; height: 100%;">
|
|
11
|
+
<PsDateCardInfo v-bind="$props"/>
|
|
12
|
+
<PsDateCardInfo v-bind="$props"/>
|
|
13
|
+
<PsDateCardInfo v-bind="$props"/>
|
|
14
|
+
</div>
|
|
15
|
+
`
|
|
16
|
+
});
|
|
17
|
+
export const Default = Template.bind({});
|
|
18
|
+
//# sourceMappingURL=DateCardInfo.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateCardInfo.stories.js","sourceRoot":"","sources":["../../src/stories/DateCardInfo.stories.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kDAAkD,CAAA;AAE7E,eAAe;IACX,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,cAAc;CAC1B,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAQ,EAAE,EAAC,QAAQ,EAAgB,EAAE,EAAE,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAC,EAAC,cAAc,EAAC;IAC3B,QAAQ,EAAE;;;;;;KAMT;CACJ,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import PsDialog from '../components/notifications/PsDialog.vue';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Notifications/Dialog',
|
|
4
|
+
component: PsDialog,
|
|
5
|
+
};
|
|
6
|
+
const TemplateExamples = (args, { argTypes }) => ({
|
|
7
|
+
props: Object.keys(argTypes),
|
|
8
|
+
components: { PsDialog },
|
|
9
|
+
template: `
|
|
10
|
+
<div class="psui-grid psui-grid-cols-3 psui-gap-4">
|
|
11
|
+
|
|
12
|
+
<div class="psui-col-span-3 psui-mt-8">
|
|
13
|
+
<h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Horizontal</h1>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<div>
|
|
17
|
+
<h2>Informative</h2>
|
|
18
|
+
<PsDialog theme="informative" layout="horizontal" message="teste">
|
|
19
|
+
<template v-slot:action>
|
|
20
|
+
<p style='font-weight: 700;'>Action</p>
|
|
21
|
+
</template>
|
|
22
|
+
</PsDialog>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<div>
|
|
26
|
+
<h2>Success</h2>
|
|
27
|
+
<PsDialog theme="success" layout="horizontal" :hasClose="false">
|
|
28
|
+
<template>
|
|
29
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
30
|
+
</template>
|
|
31
|
+
<template v-slot:action>
|
|
32
|
+
<p style='font-weight: 700;'>Action</p>
|
|
33
|
+
</template>
|
|
34
|
+
</PsDialog>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<div>
|
|
38
|
+
<h2>Alert</h2>
|
|
39
|
+
<PsDialog theme="alert" layout="horizontal">
|
|
40
|
+
<template>
|
|
41
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
42
|
+
</template>
|
|
43
|
+
<template v-slot:action>
|
|
44
|
+
<p style='font-weight: 700;'>Action</p>
|
|
45
|
+
</template>
|
|
46
|
+
</PsDialog>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<div class="psui-col-span-3 psui-mt-8">
|
|
50
|
+
<h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Vertical</h1>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<div>
|
|
54
|
+
<h2>Informative</h2>
|
|
55
|
+
<PsDialog theme="informative" layout="vertical">
|
|
56
|
+
<template>
|
|
57
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
58
|
+
</template>
|
|
59
|
+
<template v-slot:action>
|
|
60
|
+
<p style='font-weight: 700;'>Action</p>
|
|
61
|
+
</template>
|
|
62
|
+
</PsDialog>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<div class="psui-text-red">
|
|
66
|
+
<h2>Success</h2>
|
|
67
|
+
<PsDialog theme="success" layout="vertical" :hasClose="false">
|
|
68
|
+
<template>
|
|
69
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
70
|
+
</template>
|
|
71
|
+
<template v-slot:action>
|
|
72
|
+
<p style='font-weight: 700;'>Action</p>
|
|
73
|
+
</template>
|
|
74
|
+
</PsDialog>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<div>
|
|
78
|
+
<h2>Alert</h2>
|
|
79
|
+
<PsDialog theme="alert" layout="vertical">
|
|
80
|
+
<template>
|
|
81
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
82
|
+
</template>
|
|
83
|
+
<template v-slot:action>
|
|
84
|
+
<p style='font-weight: 700;'>Action</p>
|
|
85
|
+
</template>
|
|
86
|
+
</PsDialog>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
<!-- PSDialog Vertical -->
|
|
92
|
+
<div class="psui-col-span-3 psui-mt-8">
|
|
93
|
+
<h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Vertical Props Message</h1>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div>
|
|
97
|
+
<h2>Informative</h2>
|
|
98
|
+
<PsDialog theme="informative" layout="vertical" message="This component uses only the props message!">
|
|
99
|
+
<template v-slot:action>
|
|
100
|
+
<p style='font-weight: 700;'>Action</p>
|
|
101
|
+
</template>
|
|
102
|
+
</PsDialog>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<div>
|
|
106
|
+
<h2>Success</h2>
|
|
107
|
+
<PsDialog theme="success" layout="vertical" message="This component uses only the props message!" :hasClose="false">
|
|
108
|
+
<template v-slot:action>
|
|
109
|
+
<p style='font-weight: 700;'>Action</p>
|
|
110
|
+
</template>
|
|
111
|
+
</PsDialog>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<div>
|
|
115
|
+
<h2>Alert</h2>
|
|
116
|
+
<PsDialog theme="alert" layout="vertical" message="This component uses only the props message!">
|
|
117
|
+
<template v-slot:action>
|
|
118
|
+
<p style='font-weight: 700;'>Action</p>
|
|
119
|
+
</template>
|
|
120
|
+
</PsDialog>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
</div>
|
|
124
|
+
`,
|
|
125
|
+
});
|
|
126
|
+
export const Examples = TemplateExamples.bind({});
|
|
127
|
+
//# sourceMappingURL=Dialog.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../src/stories/Dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0CAA0C,CAAA;AAE/D,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,QAAQ;CACpB,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAChD,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,UAAU,EAAE,EAAE,QAAQ,EAAE;IACxB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAmHD;CACV,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|