@sybilion/uilib 1.3.29 → 1.3.31
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from 'style-inject';
|
|
2
2
|
|
|
3
|
-
var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.Card_root__8q1qb{background-color:var(--card);border-radius:20px;color:var(--card-foreground);display:flex;flex-direction:column;gap:var(--p-4);max-height:100%;position:relative}.Card_root__8q1qb.Card_padding-s__lpLdw{padding:var(--p-4)}.Card_root__8q1qb.Card_padding-m__TvrUr{padding:var(--p-6)}.Card_root__8q1qb.Card_padding-l__lRXKf{padding:var(--p-8)}.Card_header__5P3LR{align-items:flex-start;display:flex;
|
|
3
|
+
var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.Card_root__8q1qb{background-color:var(--card);border-radius:20px;color:var(--card-foreground);display:flex;flex-direction:column;gap:var(--p-4);max-height:100%;position:relative}.Card_root__8q1qb.Card_padding-s__lpLdw{padding:var(--p-4)}.Card_root__8q1qb.Card_padding-m__TvrUr{padding:var(--p-6)}.Card_root__8q1qb.Card_padding-l__lRXKf{padding:var(--p-8)}.Card_header__5P3LR{align-items:flex-start;display:flex;font-size:var(--text-base);gap:var(--p-4);justify-content:space-between}.Card_header__5P3LR:has([data-slot=card-action]){grid-template-columns:1fr auto}.Card_icon__-gwqq{align-items:center;border-radius:calc(var(--p-4) - 2px);box-shadow:inset 0 0 0 1px var(--border);display:flex;flex-shrink:0;height:var(--p-12);justify-content:center;width:var(--p-12)}.Card_icon__-gwqq.Card_withBackground__v0pKJ{background:var(--page-color);box-shadow:none}.Card_icon__-gwqq>img,.Card_icon__-gwqq>svg{height:var(--p-5);width:var(--p-5)}.Card_headerText__GEqp9{flex-grow:1;overflow:hidden;width:100%}.Card_scroll__iUPCa{max-height:100%;overflow:hidden;padding-right:var(--p-6);width:calc(100% + var(--p-6))}.Card_scroll__iUPCa [data-slot=card-content]{padding-right:1px}.Card_centered__BIpG2,.Card_fullHeight__EU9J4{display:flex;flex-direction:column}.Card_centered__BIpG2{align-items:center;justify-content:center}.Card_fullHeight__EU9J4{flex-grow:1}.Card_description__gjvqz,.Card_title__wDAJw{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.Card_title__wDAJw{font-size:var(--text-lg);font-weight:500;line-height:var(--p-7);overflow:hidden}.Card_description__gjvqz{color:var(--muted-foreground);font-size:var(--text-sm);max-width:100%;word-break:break-word}.Card_action__Y2YHY{grid-column-start:2;grid-row-span:2;align-self:start;grid-row-start:1;justify-self:end}.Card_footer__T0BW7{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;overflow:hidden}.Card_footer__T0BW7.border-t{padding-top:24px}";
|
|
4
4
|
var S = {"root":"Card_root__8q1qb","padding-s":"Card_padding-s__lpLdw","padding-m":"Card_padding-m__TvrUr","padding-l":"Card_padding-l__lRXKf","header":"Card_header__5P3LR","icon":"Card_icon__-gwqq","withBackground":"Card_withBackground__v0pKJ","headerText":"Card_headerText__GEqp9","scroll":"Card_scroll__iUPCa","centered":"Card_centered__BIpG2","fullHeight":"Card_fullHeight__EU9J4","title":"Card_title__wDAJw","description":"Card_description__gjvqz","action":"Card_action__Y2YHY","footer":"Card_footer__T0BW7"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -23,7 +23,6 @@ function getPopperWrapper(contentEl) {
|
|
|
23
23
|
return null;
|
|
24
24
|
return wrapper;
|
|
25
25
|
}
|
|
26
|
-
const OVER_TRIGGER_OFFSET = { left: -12, top: -7 };
|
|
27
26
|
const TRIGGER_TEXT_STYLE_PROPS = [
|
|
28
27
|
'font-family',
|
|
29
28
|
'font-size',
|
|
@@ -66,21 +65,31 @@ function clearTriggerTextStyles(contentEl) {
|
|
|
66
65
|
contentEl.style.removeProperty(prop);
|
|
67
66
|
}
|
|
68
67
|
}
|
|
68
|
+
function parsePx(value) {
|
|
69
|
+
return Number.parseFloat(value) || 0;
|
|
70
|
+
}
|
|
69
71
|
function applyOverTriggerStyles(contentEl, triggerEl) {
|
|
70
72
|
const wrapper = getPopperWrapper(contentEl);
|
|
71
73
|
if (!wrapper)
|
|
72
74
|
return;
|
|
73
75
|
const rect = triggerEl.getBoundingClientRect();
|
|
74
|
-
const
|
|
76
|
+
const triggerComputed = window.getComputedStyle(triggerEl);
|
|
77
|
+
const contentComputed = window.getComputedStyle(contentEl);
|
|
78
|
+
const paddingLeft = parsePx(contentComputed.paddingLeft);
|
|
79
|
+
const paddingRight = parsePx(contentComputed.paddingRight);
|
|
80
|
+
const paddingTop = parsePx(contentComputed.paddingTop);
|
|
81
|
+
const borderLeft = parsePx(contentComputed.borderLeftWidth);
|
|
82
|
+
const borderRight = parsePx(contentComputed.borderRightWidth);
|
|
83
|
+
const borderTop = parsePx(contentComputed.borderTopWidth);
|
|
75
84
|
wrapper.style.setProperty('position', 'fixed', 'important');
|
|
76
|
-
wrapper.style.setProperty('left', `${rect.left
|
|
77
|
-
wrapper.style.setProperty('top', `${rect.top
|
|
85
|
+
wrapper.style.setProperty('left', `${rect.left - paddingLeft - borderLeft}px`, 'important');
|
|
86
|
+
wrapper.style.setProperty('top', `${rect.top - paddingTop - borderTop}px`, 'important');
|
|
78
87
|
wrapper.style.setProperty('transform', 'none', 'important');
|
|
79
88
|
wrapper.style.setProperty('min-width', '0', 'important');
|
|
80
|
-
wrapper.style.setProperty('width', `${rect.width}px`, 'important');
|
|
89
|
+
wrapper.style.setProperty('width', `${rect.width + paddingLeft + paddingRight + borderLeft + borderRight}px`, 'important');
|
|
81
90
|
contentEl.style.width = '100%';
|
|
82
91
|
contentEl.style.boxSizing = 'border-box';
|
|
83
|
-
applyTriggerTextStyles(contentEl,
|
|
92
|
+
applyTriggerTextStyles(contentEl, triggerComputed);
|
|
84
93
|
}
|
|
85
94
|
function clearOverTriggerStyles(contentEl) {
|
|
86
95
|
if (!contentEl)
|
package/package.json
CHANGED
|
@@ -44,8 +44,6 @@ function getPopperWrapper(contentEl: HTMLElement): HTMLElement | null {
|
|
|
44
44
|
return wrapper;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
const OVER_TRIGGER_OFFSET = { left: -12, top: -7 };
|
|
48
|
-
|
|
49
47
|
const TRIGGER_TEXT_STYLE_PROPS = [
|
|
50
48
|
'font-family',
|
|
51
49
|
'font-size',
|
|
@@ -94,6 +92,10 @@ function clearTriggerTextStyles(contentEl: HTMLElement) {
|
|
|
94
92
|
}
|
|
95
93
|
}
|
|
96
94
|
|
|
95
|
+
function parsePx(value: string) {
|
|
96
|
+
return Number.parseFloat(value) || 0;
|
|
97
|
+
}
|
|
98
|
+
|
|
97
99
|
function applyOverTriggerStyles(
|
|
98
100
|
contentEl: HTMLElement,
|
|
99
101
|
triggerEl: HTMLElement,
|
|
@@ -102,26 +104,38 @@ function applyOverTriggerStyles(
|
|
|
102
104
|
if (!wrapper) return;
|
|
103
105
|
|
|
104
106
|
const rect = triggerEl.getBoundingClientRect();
|
|
105
|
-
const
|
|
107
|
+
const triggerComputed = window.getComputedStyle(triggerEl);
|
|
108
|
+
const contentComputed = window.getComputedStyle(contentEl);
|
|
109
|
+
|
|
110
|
+
const paddingLeft = parsePx(contentComputed.paddingLeft);
|
|
111
|
+
const paddingRight = parsePx(contentComputed.paddingRight);
|
|
112
|
+
const paddingTop = parsePx(contentComputed.paddingTop);
|
|
113
|
+
const borderLeft = parsePx(contentComputed.borderLeftWidth);
|
|
114
|
+
const borderRight = parsePx(contentComputed.borderRightWidth);
|
|
115
|
+
const borderTop = parsePx(contentComputed.borderTopWidth);
|
|
106
116
|
|
|
107
117
|
wrapper.style.setProperty('position', 'fixed', 'important');
|
|
108
118
|
wrapper.style.setProperty(
|
|
109
119
|
'left',
|
|
110
|
-
`${rect.left
|
|
120
|
+
`${rect.left - paddingLeft - borderLeft}px`,
|
|
111
121
|
'important',
|
|
112
122
|
);
|
|
113
123
|
wrapper.style.setProperty(
|
|
114
124
|
'top',
|
|
115
|
-
`${rect.top
|
|
125
|
+
`${rect.top - paddingTop - borderTop}px`,
|
|
116
126
|
'important',
|
|
117
127
|
);
|
|
118
128
|
wrapper.style.setProperty('transform', 'none', 'important');
|
|
119
129
|
wrapper.style.setProperty('min-width', '0', 'important');
|
|
120
|
-
wrapper.style.setProperty(
|
|
130
|
+
wrapper.style.setProperty(
|
|
131
|
+
'width',
|
|
132
|
+
`${rect.width + paddingLeft + paddingRight + borderLeft + borderRight}px`,
|
|
133
|
+
'important',
|
|
134
|
+
);
|
|
121
135
|
|
|
122
136
|
contentEl.style.width = '100%';
|
|
123
137
|
contentEl.style.boxSizing = 'border-box';
|
|
124
|
-
applyTriggerTextStyles(contentEl,
|
|
138
|
+
applyTriggerTextStyles(contentEl, triggerComputed);
|
|
125
139
|
}
|
|
126
140
|
|
|
127
141
|
function clearOverTriggerStyles(contentEl: HTMLElement | null) {
|
|
@@ -8,6 +8,7 @@ import {
|
|
|
8
8
|
CardTitle,
|
|
9
9
|
} from '#uilib/components/ui/Card';
|
|
10
10
|
import { PageContentSection } from '#uilib/components/ui/Page';
|
|
11
|
+
import { PackageIcon } from '@phosphor-icons/react';
|
|
11
12
|
|
|
12
13
|
import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
|
|
13
14
|
import { DocsHeaderActions } from '../docsHeaderActions';
|
|
@@ -22,11 +23,12 @@ export default function CardPage() {
|
|
|
22
23
|
actions={<DocsHeaderActions />}
|
|
23
24
|
/>
|
|
24
25
|
<PageContentSection>
|
|
25
|
-
<Card paddingSize="
|
|
26
|
-
<CardHeader
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
<Card paddingSize="m" style={{ maxWidth: 360 }}>
|
|
27
|
+
<CardHeader
|
|
28
|
+
icon={<PackageIcon />}
|
|
29
|
+
title="Card title"
|
|
30
|
+
description="Supporting description text."
|
|
31
|
+
/>
|
|
30
32
|
<CardContent>
|
|
31
33
|
<p style={{ margin: 0 }}>Main content area.</p>
|
|
32
34
|
</CardContent>
|