@repobit/dex-system-design 0.23.52 → 0.23.53
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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,13 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.23.53](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.52...@repobit/dex-system-design@0.23.53) (2026-06-24)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **DEX-1014:** css adjustments for tabs component
|
|
11
|
+
|
|
12
|
+
|
|
6
13
|
## [0.23.52](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.51...@repobit/dex-system-design@0.23.52) (2026-06-23)
|
|
7
14
|
|
|
8
15
|
### Bug Fixes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@repobit/dex-system-design",
|
|
3
|
-
"version": "0.23.
|
|
3
|
+
"version": "0.23.53",
|
|
4
4
|
"description": "Design system based on Web Components.",
|
|
5
5
|
"author": "Iordache Matei Cezar <miordache@bitdefender.com>",
|
|
6
6
|
"homepage": "https://github.com/bitdefender/dex-core#readme",
|
|
@@ -70,8 +70,8 @@
|
|
|
70
70
|
"url": "https://github.com/bitdefender/dex-core/issues"
|
|
71
71
|
},
|
|
72
72
|
"dependencies": {
|
|
73
|
-
"@repobit/dex-store": "1.3.
|
|
74
|
-
"@repobit/dex-store-elements": "1.4.
|
|
73
|
+
"@repobit/dex-store": "1.3.49",
|
|
74
|
+
"@repobit/dex-store-elements": "1.4.41",
|
|
75
75
|
"lit": "^3.3.2"
|
|
76
76
|
},
|
|
77
77
|
"devDependencies": {
|
|
@@ -88,5 +88,5 @@
|
|
|
88
88
|
"volta": {
|
|
89
89
|
"node": "24.14.0"
|
|
90
90
|
},
|
|
91
|
-
"gitHead": "
|
|
91
|
+
"gitHead": "377af3ec2de06a8dba98c74d7bc03e420c217213"
|
|
92
92
|
}
|
|
@@ -38,7 +38,10 @@ export default css`
|
|
|
38
38
|
border-bottom: 1px solid var(--color-neutral-100);
|
|
39
39
|
// margin-bottom: var(--spacing-32);
|
|
40
40
|
}
|
|
41
|
-
|
|
41
|
+
.bd-panel-wrapper {
|
|
42
|
+
width: 100%;
|
|
43
|
+
box-sizing: border-box;
|
|
44
|
+
}
|
|
42
45
|
.bd-tab-button {
|
|
43
46
|
display: inline-flex;
|
|
44
47
|
align-items: center;
|
|
@@ -16,18 +16,20 @@ customElements.define("bd-tab-panel", BdTabPanel);
|
|
|
16
16
|
|
|
17
17
|
class BdTabs extends LitElement {
|
|
18
18
|
static properties = {
|
|
19
|
-
title
|
|
20
|
-
subtitle
|
|
21
|
-
selectedTab: { type: Number, state: true }
|
|
19
|
+
title : { type: String },
|
|
20
|
+
subtitle : { type: String },
|
|
21
|
+
selectedTab : { type: Number, state: true },
|
|
22
|
+
_panelMinHeight: { type: Number, state: true }
|
|
22
23
|
};
|
|
23
24
|
|
|
24
25
|
static styles = [tokens, tabsCSS];
|
|
25
26
|
|
|
26
27
|
constructor() {
|
|
27
28
|
super();
|
|
28
|
-
this.title
|
|
29
|
-
this.subtitle
|
|
30
|
-
this.selectedTab
|
|
29
|
+
this.title = "";
|
|
30
|
+
this.subtitle = "";
|
|
31
|
+
this.selectedTab = 0;
|
|
32
|
+
this._panelMinHeight = 0;
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
_getPanels() {
|
|
@@ -42,6 +44,45 @@ class BdTabs extends LitElement {
|
|
|
42
44
|
this.selectedTab = index;
|
|
43
45
|
}
|
|
44
46
|
|
|
47
|
+
async firstUpdated() {
|
|
48
|
+
await this.updateComplete;
|
|
49
|
+
await this._measureAllPanels();
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
async _measureAllPanels() {
|
|
53
|
+
const panels = this._getPanels();
|
|
54
|
+
const wrapper = this.renderRoot.querySelector(".bd-panel-wrapper");
|
|
55
|
+
if (!wrapper || !panels.length) return;
|
|
56
|
+
|
|
57
|
+
// Salvam tabul curent
|
|
58
|
+
const originalTab = this.selectedTab;
|
|
59
|
+
let maxHeight = 0;
|
|
60
|
+
|
|
61
|
+
for (let i = 0; i < panels.length; i++) {
|
|
62
|
+
// Setam tabul la i fara sa triggeram re-render complet
|
|
63
|
+
this.selectedTab = i;
|
|
64
|
+
await this.updateComplete;
|
|
65
|
+
|
|
66
|
+
// Asteptam si bd-features sa termine masuratorile interne
|
|
67
|
+
const bdFeatures = wrapper.querySelector("bd-features");
|
|
68
|
+
if (bdFeatures) {
|
|
69
|
+
await bdFeatures.updateComplete;
|
|
70
|
+
// Un extra frame pentru _equalizeRows
|
|
71
|
+
await new Promise(r => requestAnimationFrame(r));
|
|
72
|
+
await new Promise(r => requestAnimationFrame(r));
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
const h = wrapper.scrollHeight;
|
|
76
|
+
if (h > maxHeight) maxHeight = h;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Restauram tabul original
|
|
80
|
+
this.selectedTab = originalTab;
|
|
81
|
+
await this.updateComplete;
|
|
82
|
+
|
|
83
|
+
this._panelMinHeight = maxHeight;
|
|
84
|
+
}
|
|
85
|
+
|
|
45
86
|
render() {
|
|
46
87
|
const panels = this._getPanels();
|
|
47
88
|
const activePanel = panels[this.selectedTab];
|
|
@@ -78,6 +119,7 @@ class BdTabs extends LitElement {
|
|
|
78
119
|
role="tabpanel"
|
|
79
120
|
aria-labelledby="tab-btn-${this.selectedTab}"
|
|
80
121
|
class="bd-panel-wrapper"
|
|
122
|
+
style="${this._panelMinHeight ? `min-height: ${this._panelMinHeight}px;` : ""}"
|
|
81
123
|
>
|
|
82
124
|
${keyed(this.selectedTab, html`
|
|
83
125
|
<bd-features>
|