@blorkfield/blork-tabs 0.2.4 → 0.2.6
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/README.md +35 -0
- package/dist/styles.css +0 -1
- package/package.json +6 -4
package/README.md
CHANGED
|
@@ -138,6 +138,40 @@ const manager = new TabManager({
|
|
|
138
138
|
| `panel:detached` | Panel detached from chain |
|
|
139
139
|
| `panel:collapse` | Panel collapsed/expanded |
|
|
140
140
|
|
|
141
|
+
## Multi-Section Panel Content
|
|
142
|
+
|
|
143
|
+
When creating panels with multiple sections (like a command menu with categories), put all sections within a **single `content` string**. Do not use multiple panels or multiple content wrappers—this breaks scrolling and causes content cutoff.
|
|
144
|
+
|
|
145
|
+
**Correct approach:**
|
|
146
|
+
|
|
147
|
+
```typescript
|
|
148
|
+
manager.addPanel({
|
|
149
|
+
id: 'command-menu',
|
|
150
|
+
title: 'Commands',
|
|
151
|
+
content: `
|
|
152
|
+
<div style="margin-bottom: 12px;">
|
|
153
|
+
<div style="font-size: 11px; font-weight: 600; color: #4a90d9; padding: 4px 8px; text-transform: uppercase;">File</div>
|
|
154
|
+
<div>New File</div>
|
|
155
|
+
<div>Open...</div>
|
|
156
|
+
<div>Save</div>
|
|
157
|
+
</div>
|
|
158
|
+
<div style="margin-bottom: 12px;">
|
|
159
|
+
<div style="font-size: 11px; font-weight: 600; color: #4a90d9; padding: 4px 8px; text-transform: uppercase;">Edit</div>
|
|
160
|
+
<div>Undo</div>
|
|
161
|
+
<div>Redo</div>
|
|
162
|
+
<div>Cut</div>
|
|
163
|
+
</div>
|
|
164
|
+
<div>
|
|
165
|
+
<div style="font-size: 11px; font-weight: 600; color: #4a90d9; padding: 4px 8px; text-transform: uppercase;">View</div>
|
|
166
|
+
<div>Zoom In</div>
|
|
167
|
+
<div>Zoom Out</div>
|
|
168
|
+
</div>
|
|
169
|
+
`,
|
|
170
|
+
});
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
The panel content area has a max-height (default `20vh`) with `overflow-y: auto`, so long content scrolls properly. Splitting sections across multiple content wrappers defeats this behavior.
|
|
174
|
+
|
|
141
175
|
## CSS Customization
|
|
142
176
|
|
|
143
177
|
Override CSS variables to customize appearance:
|
|
@@ -151,6 +185,7 @@ Override CSS variables to customize appearance:
|
|
|
151
185
|
--blork-tabs-header-bg: #2a2a4a;
|
|
152
186
|
--blork-tabs-header-color: #e0e0e0;
|
|
153
187
|
--blork-tabs-content-bg: #1a1a2e;
|
|
188
|
+
--blork-tabs-content-max-height: 20vh;
|
|
154
189
|
--blork-tabs-accent: #4a90d9;
|
|
155
190
|
}
|
|
156
191
|
```
|
package/dist/styles.css
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blorkfield/blork-tabs",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.6",
|
|
4
4
|
"description": "A framework-agnostic tab/panel management system with snapping and docking",
|
|
5
|
+
"packageManager": "pnpm@10.28.2",
|
|
5
6
|
"type": "module",
|
|
6
7
|
"main": "dist/index.cjs",
|
|
7
8
|
"module": "dist/index.js",
|
|
@@ -21,12 +22,13 @@
|
|
|
21
22
|
"scripts": {
|
|
22
23
|
"build": "tsup src/index.ts --format cjs,esm --dts --clean && cp styles.css dist/",
|
|
23
24
|
"build:watch": "tsup src/index.ts --format cjs,esm --dts --watch",
|
|
24
|
-
"dev": "
|
|
25
|
-
"dev:install": "
|
|
25
|
+
"dev": "pnpm build && pnpm -C testbed dev",
|
|
26
|
+
"dev:install": "pnpm -C testbed install",
|
|
26
27
|
"lint": "eslint src/",
|
|
27
28
|
"test": "vitest run",
|
|
28
29
|
"test:watch": "vitest",
|
|
29
|
-
"
|
|
30
|
+
"typecheck": "tsc --noEmit",
|
|
31
|
+
"prepublishOnly": "pnpm build"
|
|
30
32
|
},
|
|
31
33
|
"keywords": [
|
|
32
34
|
"tabs",
|