@picked/svelte 0.0.51-next.3 → 0.0.51-next.5
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,10 +1,11 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
/** @file Accessible tab container that renders dynamic Svelte components per tab. */
|
|
2
3
|
import type { Component } from 'svelte'
|
|
3
4
|
|
|
4
5
|
interface Tab {
|
|
5
6
|
id: string
|
|
6
7
|
label: string
|
|
7
|
-
component: Component<
|
|
8
|
+
component: Component<Record<string, unknown>>
|
|
8
9
|
props?: Record<string, unknown>
|
|
9
10
|
}
|
|
10
11
|
|
|
@@ -13,10 +14,28 @@
|
|
|
13
14
|
|
|
14
15
|
let activeTab = initialTab
|
|
15
16
|
|
|
17
|
+
/**
|
|
18
|
+
* Sets the active tab to the given index.
|
|
19
|
+
*
|
|
20
|
+
* @param {number} index - The zero-based tab index to activate.
|
|
21
|
+
* @example
|
|
22
|
+
* ```typescript
|
|
23
|
+
* activateTab(2) // switches to the third tab
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
16
26
|
function activateTab(index: number) {
|
|
17
27
|
activeTab = index
|
|
18
28
|
}
|
|
19
29
|
|
|
30
|
+
/**
|
|
31
|
+
* Handles arrow-key, Home, and End navigation within the tab list.
|
|
32
|
+
*
|
|
33
|
+
* @param {KeyboardEvent} event - The keyboard event from the tab list.
|
|
34
|
+
* @example
|
|
35
|
+
* ```typescript
|
|
36
|
+
* handleKeydown(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
20
39
|
function handleKeydown(event: KeyboardEvent) {
|
|
21
40
|
const tabCount = tabs.length
|
|
22
41
|
let newIndex = activeTab
|
|
@@ -83,6 +102,7 @@
|
|
|
83
102
|
display: flex;
|
|
84
103
|
flex-direction: column;
|
|
85
104
|
flex: 1;
|
|
105
|
+
min-height: 0;
|
|
86
106
|
}
|
|
87
107
|
|
|
88
108
|
.tab-list {
|
|
@@ -124,7 +144,7 @@
|
|
|
124
144
|
.tab-panel {
|
|
125
145
|
flex: 1 1 auto;
|
|
126
146
|
display: grid;
|
|
127
|
-
|
|
147
|
+
min-height: 0;
|
|
128
148
|
overflow: auto;
|
|
129
149
|
}
|
|
130
150
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@picked/svelte",
|
|
3
|
-
"version": "0.0.51-next.
|
|
3
|
+
"version": "0.0.51-next.5",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"d3": "^7.9.0"
|
|
6
6
|
},
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
},
|
|
89
89
|
"module": "./dist/index.js",
|
|
90
90
|
"peerDependencies": {
|
|
91
|
-
"@picked/client": "0.0.51-next.
|
|
91
|
+
"@picked/client": "0.0.51-next.5",
|
|
92
92
|
"effector": "^23.3.0",
|
|
93
93
|
"svelte": "^5.46.4"
|
|
94
94
|
},
|