@policystudio/policy-studio-ui-vue 1.2.0-access.9 → 1.2.0-access.90
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/composables/useCollapseAnimation.d.ts +8 -0
- package/dist/composables/useCollapseAnimation.js +65 -0
- package/dist/composables/useCollapseAnimation.js.map +1 -0
- package/dist/css/psui_styles_output.css +2875 -2314
- package/doc/src/stories/Colors.mdx +3 -3
- package/doc/src/stories/Dropdown.stories.ts +4 -4
- package/doc/src/stories/Input.stories.ts +9 -9
- package/package.json +1 -1
- package/src/assets/scss/base.scss +3 -1
- package/src/assets/scss/components/PsAccordion.scss +20 -29
- package/src/assets/scss/components/PsBadgeWithIcon.scss +2 -2
- package/src/assets/scss/components/PsButton.scss +47 -65
- package/src/assets/scss/components/PsCardInfos.scss +13 -3
- package/src/assets/scss/components/PsChartLegend.scss +2 -2
- package/src/assets/scss/components/PsCheckbox.scss +63 -48
- package/src/assets/scss/components/PsChips.scss +82 -32
- package/src/assets/scss/components/PsClimateZoneBadge.scss +1 -1
- package/src/assets/scss/components/PsCollapse.scss +52 -56
- package/src/assets/scss/components/PsDateCardInfo.scss +7 -4
- package/src/assets/scss/components/PsDialog.scss +114 -39
- package/src/assets/scss/components/PsDraggable.scss +28 -36
- package/src/assets/scss/components/PsDropdown.scss +7 -15
- package/src/assets/scss/components/PsIcon.scss +21 -0
- package/src/assets/scss/components/PsInlineSelector.scss +1 -1
- package/src/assets/scss/components/PsInput.scss +27 -64
- package/src/assets/scss/components/PsInputSelect.scss +6 -6
- package/src/assets/scss/components/PsInputTextArea.scss +1 -1
- package/src/assets/scss/components/PsMiniTag.scss +22 -28
- package/src/assets/scss/components/PsRadioButton.scss +90 -75
- package/src/assets/scss/components/PsSimpleAlert.scss +16 -13
- package/src/assets/scss/components/PsSlider.scss +2 -2
- package/src/assets/scss/components/PsSwitch.scss +39 -21
- package/src/assets/scss/components/PsTabHeader.scss +124 -133
- package/src/assets/scss/components/PsTableResults.scss +16 -723
- package/src/assets/scss/components/PsTagScope.scss +1 -1
- package/src/assets/scss/components/PsTestimonialCard.scss +1 -1
- package/src/assets/scss/components/PsToast.scss +62 -60
- package/src/assets/scss/components/PsToggle.scss +3 -6
- package/src/assets/scss/components/PsTooltip.scss +1 -1
- package/src/assets/scss/components/_PsTableResults.scss +1 -1
- package/src/assets/scss/components/table-layouts/LayoutComparison.scss +200 -0
- package/src/assets/scss/components/table-layouts/LayoutFlexible.scss +325 -0
- package/src/assets/scss/components/table-layouts/LayoutResults.scss +102 -0
- package/src/components/accordion/PsAccordionItem.vue +55 -57
- package/src/components/badges-and-tags/PsCardInfos.vue +6 -2
- package/src/components/badges-and-tags/PsChartLegend.vue +1 -1
- package/src/components/badges-and-tags/PsDateCardInfo.vue +16 -5
- package/src/components/badges-and-tags/PsMiniTag.vue +5 -5
- package/src/components/badges-and-tags/PsTestimonialCard.vue +8 -6
- package/src/components/buttons/PsButton.vue +43 -7
- package/src/components/chips/PsChips.vue +7 -3
- package/src/components/collapse/PsCollapse.vue +18 -16
- package/src/components/controls/PsCheckboxSimple.vue +7 -2
- package/src/components/controls/PsDraggable.vue +47 -5
- package/src/components/controls/PsRadioButton.vue +3 -1
- package/src/components/controls/PsRadioButtonSimple.vue +2 -0
- package/src/components/controls/PsSwitch.vue +8 -3
- package/src/components/datatable/PsDataTableItem.vue +1 -1
- package/src/components/forms/PsDropdown.vue +126 -31
- package/src/components/forms/PsDropdownList.vue +5 -1
- package/src/components/forms/PsInput.vue +1 -1
- package/src/components/forms/PsInputSelect.vue +6 -2
- package/src/components/notifications/PsDialog.vue +60 -11
- package/src/components/notifications/PsSimpleAlert.vue +6 -7
- package/src/components/notifications/PsToast.vue +5 -5
- package/src/components/table-results/PsTableResults.vue +36 -23
- package/src/components/table-results/PsTableResultsHead.vue +13 -5
- package/src/components/table-results/PsTableResultsHeadComparison.vue +8 -2
- package/src/components/table-results/PsTableResultsHeadFlexible.vue +46 -9
- package/src/components/tabs/PsTabHeader.vue +86 -6
- package/src/components/tooltip/PsTooltip.vue +16 -1
- package/src/components/ui/PsIcon.vue +36 -10
- package/src/composables/useCollapseAnimation.ts +76 -0
- package/tailwind.config.js +17 -10
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare function useCollapseAnimation(): {
|
|
2
|
+
beforeEnter: (el: HTMLElement) => void;
|
|
3
|
+
enter: (el: HTMLElement, done: () => void) => void;
|
|
4
|
+
afterEnter: (el: HTMLElement) => void;
|
|
5
|
+
beforeLeave: (el: HTMLElement) => void;
|
|
6
|
+
leave: (el: HTMLElement, done: () => void) => void;
|
|
7
|
+
afterLeave: (el: HTMLElement) => void;
|
|
8
|
+
};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
export function useCollapseAnimation() {
|
|
2
|
+
const beforeEnter = (el) => {
|
|
3
|
+
el.style.height = '0';
|
|
4
|
+
el.style.opacity = '0';
|
|
5
|
+
el.style.overflow = 'hidden';
|
|
6
|
+
el.style.paddingTop = '0';
|
|
7
|
+
el.style.paddingBottom = '0';
|
|
8
|
+
el.style.marginTop = '0';
|
|
9
|
+
el.style.marginBottom = '0';
|
|
10
|
+
};
|
|
11
|
+
const enter = (el, done) => {
|
|
12
|
+
void el.offsetHeight;
|
|
13
|
+
el.style.transition = 'all 0.3s ease-in-out';
|
|
14
|
+
el.style.height = el.scrollHeight + 'px';
|
|
15
|
+
el.style.opacity = '1';
|
|
16
|
+
el.style.removeProperty('padding-top');
|
|
17
|
+
el.style.removeProperty('padding-bottom');
|
|
18
|
+
el.style.removeProperty('margin-top');
|
|
19
|
+
el.style.removeProperty('margin-bottom');
|
|
20
|
+
el.addEventListener('transitionend', done, { once: true });
|
|
21
|
+
};
|
|
22
|
+
const afterEnter = (el) => {
|
|
23
|
+
el.style.height = 'auto';
|
|
24
|
+
el.style.overflow = 'visible';
|
|
25
|
+
el.style.transition = '';
|
|
26
|
+
};
|
|
27
|
+
const beforeLeave = (el) => {
|
|
28
|
+
if (!el)
|
|
29
|
+
return;
|
|
30
|
+
el.style.height = el.scrollHeight + 'px';
|
|
31
|
+
el.style.overflow = 'hidden';
|
|
32
|
+
const style = window.getComputedStyle(el);
|
|
33
|
+
el.style.paddingTop = style.paddingTop;
|
|
34
|
+
el.style.paddingBottom = style.paddingBottom;
|
|
35
|
+
el.style.marginTop = style.marginTop;
|
|
36
|
+
el.style.marginBottom = style.marginBottom;
|
|
37
|
+
};
|
|
38
|
+
const leave = (el, done) => {
|
|
39
|
+
if (!el)
|
|
40
|
+
return;
|
|
41
|
+
void el.offsetHeight;
|
|
42
|
+
el.style.transition = 'all 0.3s ease-in-out';
|
|
43
|
+
requestAnimationFrame(() => {
|
|
44
|
+
el.style.height = '0';
|
|
45
|
+
el.style.opacity = '0';
|
|
46
|
+
el.style.paddingTop = '0';
|
|
47
|
+
el.style.paddingBottom = '0';
|
|
48
|
+
el.style.marginTop = '0';
|
|
49
|
+
el.style.marginBottom = '0';
|
|
50
|
+
});
|
|
51
|
+
el.addEventListener('transitionend', done, { once: true });
|
|
52
|
+
};
|
|
53
|
+
const afterLeave = (el) => {
|
|
54
|
+
el.style.transition = '';
|
|
55
|
+
};
|
|
56
|
+
return {
|
|
57
|
+
beforeEnter,
|
|
58
|
+
enter,
|
|
59
|
+
afterEnter,
|
|
60
|
+
beforeLeave,
|
|
61
|
+
leave,
|
|
62
|
+
afterLeave
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
//# sourceMappingURL=useCollapseAnimation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCollapseAnimation.js","sourceRoot":"","sources":["../../src/composables/useCollapseAnimation.ts"],"names":[],"mappings":"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"}
|