@rokkit/ui 1.4.2 → 1.6.0
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/components/CodeGroup.svelte +0 -1
- package/dist/components/CommandPalette.svelte +2 -1
- package/dist/components/CommandPalette.svelte.d.ts +2 -5
- package/dist/components/Dropdown.svelte +3 -22
- package/dist/components/Dropdown.svelte.d.ts +2 -20
- package/dist/components/FloatingAction.svelte +2 -2
- package/dist/components/FloatingAction.svelte.d.ts +2 -5
- package/dist/components/Grid.svelte +11 -15
- package/dist/components/Grid.svelte.d.ts +2 -43
- package/dist/components/LazyTree.svelte +11 -17
- package/dist/components/LazyTree.svelte.d.ts +2 -28
- package/dist/components/List.svelte +12 -21
- package/dist/components/List.svelte.d.ts +2 -47
- package/dist/components/Menu.svelte +12 -26
- package/dist/components/Menu.svelte.d.ts +2 -66
- package/dist/components/MultiSelect.svelte +12 -26
- package/dist/components/MultiSelect.svelte.d.ts +2 -23
- package/dist/components/Select.svelte +12 -27
- package/dist/components/Select.svelte.d.ts +2 -24
- package/dist/components/Swatch.svelte +1 -27
- package/dist/components/Swatch.svelte.d.ts +1 -27
- package/dist/components/Table.svelte +10 -3
- package/dist/components/Tabs.svelte +25 -7
- package/dist/components/Tabs.svelte.d.ts +9 -1
- package/dist/components/Toggle.svelte +14 -4
- package/dist/components/Toggle.svelte.d.ts +4 -1
- package/dist/components/Toolbar.svelte +2 -2
- package/dist/components/Toolbar.svelte.d.ts +1 -2
- package/dist/components/Tree.svelte +11 -14
- package/dist/components/Tree.svelte.d.ts +2 -29
- package/dist/components/UploadProgress.svelte +3 -4
- package/dist/components/UploadProgress.svelte.d.ts +1 -4
- package/dist/components/UploadTarget.svelte +2 -4
- package/dist/components/UploadTarget.svelte.d.ts +14 -4
- package/dist/types/chat.d.ts +15 -0
- package/dist/types/command-palette.d.ts +18 -0
- package/dist/types/command-palette.js +7 -0
- package/dist/types/floating-action.d.ts +5 -0
- package/dist/types/grid.d.ts +37 -0
- package/dist/types/grid.js +8 -0
- package/dist/types/index.d.ts +4 -0
- package/dist/types/index.js +8 -0
- package/dist/types/list.d.ts +22 -55
- package/dist/types/menu.d.ts +9 -2
- package/dist/types/select.d.ts +52 -62
- package/dist/types/snippets.d.ts +64 -0
- package/dist/types/snippets.js +16 -0
- package/dist/types/swatch.d.ts +39 -0
- package/dist/types/swatch.js +8 -0
- package/dist/types/table.d.ts +5 -0
- package/dist/types/toolbar.d.ts +5 -0
- package/dist/types/tree.d.ts +34 -66
- package/package.json +5 -5
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { commands, messages } from '@rokkit/states'
|
|
3
3
|
import { dismissable } from '@rokkit/actions'
|
|
4
|
+
import type { CommandPaletteProps } from '../types/command-palette.js'
|
|
4
5
|
|
|
5
6
|
/** Minimal command shape this palette reads (states' Command typedef isn't exported). */
|
|
6
7
|
type CommandLike = { id: string; label: string; keywords?: string[] }
|
|
7
8
|
|
|
8
|
-
let { open = $bindable(false), placeholder }:
|
|
9
|
+
let { open = $bindable(false), placeholder }: CommandPaletteProps = $props()
|
|
9
10
|
|
|
10
11
|
let query = $state('')
|
|
11
12
|
let activeIndex = $state(0)
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
type
|
|
2
|
-
|
|
3
|
-
placeholder?: string;
|
|
4
|
-
};
|
|
5
|
-
declare const CommandPalette: import("svelte").Component<$$ComponentProps, {}, "open">;
|
|
1
|
+
import type { CommandPaletteProps } from '../types/command-palette.js';
|
|
2
|
+
declare const CommandPalette: import("svelte").Component<CommandPaletteProps, {}, "open">;
|
|
6
3
|
type CommandPalette = ReturnType<typeof CommandPalette>;
|
|
7
4
|
export default CommandPalette;
|
|
@@ -20,15 +20,10 @@
|
|
|
20
20
|
* data-align — panel alignment (start | end)
|
|
21
21
|
* data-direction — panel direction (down | up)
|
|
22
22
|
*/
|
|
23
|
-
// @ts-nocheck
|
|
24
23
|
import { ProxyTree, Wrapper, messages } from '@rokkit/states'
|
|
25
24
|
import { Navigator, Trigger } from '@rokkit/actions'
|
|
26
25
|
import { DEFAULT_STATE_ICONS } from '@rokkit/core'
|
|
27
|
-
|
|
28
|
-
interface DropdownIcons {
|
|
29
|
-
opened?: string
|
|
30
|
-
closed?: string
|
|
31
|
-
}
|
|
26
|
+
import type { DropdownProps, SelectStateIcons } from '../types/select.js'
|
|
32
27
|
|
|
33
28
|
let {
|
|
34
29
|
items = [],
|
|
@@ -41,24 +36,10 @@
|
|
|
41
36
|
showArrow = true,
|
|
42
37
|
align = 'start',
|
|
43
38
|
direction = 'down',
|
|
44
|
-
icons: userIcons = {} as
|
|
39
|
+
icons: userIcons = {} as SelectStateIcons,
|
|
45
40
|
onchange,
|
|
46
41
|
class: className = ''
|
|
47
|
-
}:
|
|
48
|
-
items?: unknown[]
|
|
49
|
-
fields?: Record<string, string>
|
|
50
|
-
value?: unknown
|
|
51
|
-
placeholder?: string
|
|
52
|
-
icon?: string
|
|
53
|
-
size?: string
|
|
54
|
-
disabled?: boolean
|
|
55
|
-
showArrow?: boolean
|
|
56
|
-
align?: 'start' | 'end'
|
|
57
|
-
direction?: 'up' | 'down'
|
|
58
|
-
icons?: DropdownIcons
|
|
59
|
-
onchange?: (value: unknown, item: unknown) => void
|
|
60
|
-
class?: string
|
|
61
|
-
} = $props()
|
|
42
|
+
}: DropdownProps = $props()
|
|
62
43
|
|
|
63
44
|
const icons = $derived({ ...DEFAULT_STATE_ICONS.selector, ...userIcons })
|
|
64
45
|
|
|
@@ -1,22 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
closed?: string;
|
|
4
|
-
}
|
|
5
|
-
type $$ComponentProps = {
|
|
6
|
-
items?: unknown[];
|
|
7
|
-
fields?: Record<string, string>;
|
|
8
|
-
value?: unknown;
|
|
9
|
-
placeholder?: string;
|
|
10
|
-
icon?: string;
|
|
11
|
-
size?: string;
|
|
12
|
-
disabled?: boolean;
|
|
13
|
-
showArrow?: boolean;
|
|
14
|
-
align?: 'start' | 'end';
|
|
15
|
-
direction?: 'up' | 'down';
|
|
16
|
-
icons?: DropdownIcons;
|
|
17
|
-
onchange?: (value: unknown, item: unknown) => void;
|
|
18
|
-
class?: string;
|
|
19
|
-
};
|
|
20
|
-
declare const Dropdown: import("svelte").Component<$$ComponentProps, {}, "value">;
|
|
1
|
+
import type { DropdownProps } from '../types/select.js';
|
|
2
|
+
declare const Dropdown: import("svelte").Component<DropdownProps, {}, "value">;
|
|
21
3
|
type Dropdown = ReturnType<typeof Dropdown>;
|
|
22
4
|
export default Dropdown;
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
onclose,
|
|
29
29
|
class: className = '',
|
|
30
30
|
item: itemSnippet,
|
|
31
|
-
|
|
32
|
-
}: FloatingActionProps
|
|
31
|
+
snippets = {}
|
|
32
|
+
}: FloatingActionProps = $props()
|
|
33
33
|
|
|
34
34
|
const icons = $derived({
|
|
35
35
|
add: DEFAULT_STATE_ICONS.action.add,
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
import type { FloatingActionProps
|
|
2
|
-
|
|
3
|
-
[key: string]: FloatingActionItemSnippet | unknown;
|
|
4
|
-
};
|
|
5
|
-
declare const FloatingAction: import("svelte").Component<$$ComponentProps, {}, "open">;
|
|
1
|
+
import type { FloatingActionProps } from '../types/floating-action.js';
|
|
2
|
+
declare const FloatingAction: import("svelte").Component<FloatingActionProps, {}, "open">;
|
|
6
3
|
type FloatingAction = ReturnType<typeof FloatingAction>;
|
|
7
4
|
export default FloatingAction;
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
import { Navigator } from '@rokkit/actions'
|
|
33
33
|
import { resolveSnippet, ITEM_SNIPPET } from '@rokkit/core'
|
|
34
34
|
import ItemContent from './ItemContent.svelte'
|
|
35
|
+
import type { GridProps } from '../types/grid.js'
|
|
35
36
|
|
|
36
37
|
let {
|
|
37
38
|
items = [],
|
|
@@ -44,20 +45,15 @@
|
|
|
44
45
|
label = messages.grid.label,
|
|
45
46
|
onselect,
|
|
46
47
|
class: className = '',
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
label?: string
|
|
57
|
-
onselect?: (value: unknown, proxy: ProxyItem) => void
|
|
58
|
-
class?: string
|
|
59
|
-
[key: string]: unknown
|
|
60
|
-
} = $props()
|
|
48
|
+
itemContent,
|
|
49
|
+
groupContent,
|
|
50
|
+
snippets = {}
|
|
51
|
+
}: GridProps = $props()
|
|
52
|
+
|
|
53
|
+
// What resolveSnippet searches: the per-item named snippets plus the two
|
|
54
|
+
// defaults it falls back to. Named snippets arrive as a declared `snippets`
|
|
55
|
+
// prop now, so a misspelled prop name is a type error rather than a no-op.
|
|
56
|
+
const snippetBag = $derived({ ...snippets, itemContent, groupContent })
|
|
61
57
|
|
|
62
58
|
// ─── Wrapper ──────────────────────────────────────────────────────────────
|
|
63
59
|
|
|
@@ -106,7 +102,7 @@
|
|
|
106
102
|
{#each wrapper.flatView as node (node.key)}
|
|
107
103
|
{@const proxy = node.proxy}
|
|
108
104
|
{@const sel = proxy.value === value}
|
|
109
|
-
{@const content = resolveSnippet(
|
|
105
|
+
{@const content = resolveSnippet(snippetBag, proxy, ITEM_SNIPPET)}
|
|
110
106
|
<button
|
|
111
107
|
type="button"
|
|
112
108
|
data-grid-item
|
|
@@ -1,45 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
*
|
|
4
|
-
* Architecture:
|
|
5
|
-
* Wrapper — owns focusedKey $state + flatView $derived
|
|
6
|
-
* Navigator — attaches DOM event handlers, calls wrapper[action](path)
|
|
7
|
-
* horizontal orientation (ArrowLeft/ArrowRight navigation)
|
|
8
|
-
* flatView loop — single flat {#each} rendering items as grid tiles
|
|
9
|
-
*
|
|
10
|
-
* Snippet customization:
|
|
11
|
-
* itemContent — replaces inner content of <button> for each tile
|
|
12
|
-
* [named] — per-item override via item.snippet = 'name'; falls back to itemContent
|
|
13
|
-
*
|
|
14
|
-
* Snippets receive (proxy) only — the <button> wrapper with data-path is
|
|
15
|
-
* always rendered by this component, so snippets never need to handle navigation.
|
|
16
|
-
*
|
|
17
|
-
* Data attributes on rendered elements:
|
|
18
|
-
* data-grid — root container
|
|
19
|
-
* data-grid-item — each tile button
|
|
20
|
-
* data-path — required by Navigator for click detection + scroll
|
|
21
|
-
* data-active — highlights current value match
|
|
22
|
-
* data-disabled — disabled state
|
|
23
|
-
* data-size — size variant
|
|
24
|
-
*
|
|
25
|
-
* CSS custom properties:
|
|
26
|
-
* --grid-min-size — minimum tile width for auto-fill
|
|
27
|
-
* --grid-gap — grid gap
|
|
28
|
-
*/
|
|
29
|
-
import type { ProxyItem } from '@rokkit/states';
|
|
30
|
-
type $$ComponentProps = {
|
|
31
|
-
items?: unknown[];
|
|
32
|
-
fields?: Record<string, string>;
|
|
33
|
-
value?: unknown;
|
|
34
|
-
size?: string;
|
|
35
|
-
disabled?: boolean;
|
|
36
|
-
minSize?: string;
|
|
37
|
-
gap?: string;
|
|
38
|
-
label?: string;
|
|
39
|
-
onselect?: (value: unknown, proxy: ProxyItem) => void;
|
|
40
|
-
class?: string;
|
|
41
|
-
[key: string]: unknown;
|
|
42
|
-
};
|
|
43
|
-
declare const Grid: import("svelte").Component<$$ComponentProps, {}, "value">;
|
|
1
|
+
import type { GridProps } from '../types/grid.js';
|
|
2
|
+
declare const Grid: import("svelte").Component<GridProps, {}, "value">;
|
|
44
3
|
type Grid = ReturnType<typeof Grid>;
|
|
45
4
|
export default Grid;
|
|
@@ -8,13 +8,13 @@
|
|
|
8
8
|
* Default item content: icon + label + badge + shortcut (no avatar/description).
|
|
9
9
|
* Parent nodes hide their icon by default.
|
|
10
10
|
*/
|
|
11
|
-
import type { ProxyItem } from '@rokkit/states'
|
|
12
11
|
import { LazyWrapper, LazyProxyItem, ProxyTree, messages } from '@rokkit/states'
|
|
13
12
|
import { Navigator } from '@rokkit/actions'
|
|
14
13
|
import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET } from '@rokkit/core'
|
|
15
14
|
import ItemContent from './ItemContent.svelte'
|
|
16
15
|
import Connector from './Connector.svelte'
|
|
17
16
|
import Button from './Button.svelte'
|
|
17
|
+
import type { LazyTreeProps } from '../types/tree.js'
|
|
18
18
|
|
|
19
19
|
let {
|
|
20
20
|
items = [],
|
|
@@ -28,21 +28,15 @@
|
|
|
28
28
|
onlazyload,
|
|
29
29
|
hasMore = false,
|
|
30
30
|
class: className = '',
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
onselect?: (value: unknown, proxy: ProxyItem) => void
|
|
41
|
-
onlazyload?: (current?: unknown) => Promise<unknown[]>
|
|
42
|
-
hasMore?: boolean
|
|
43
|
-
class?: string
|
|
44
|
-
[key: string]: unknown
|
|
45
|
-
} = $props()
|
|
31
|
+
itemContent,
|
|
32
|
+
groupContent,
|
|
33
|
+
snippets = {}
|
|
34
|
+
}: LazyTreeProps = $props()
|
|
35
|
+
|
|
36
|
+
// What resolveSnippet searches: the per-item named snippets plus the two
|
|
37
|
+
// defaults it falls back to. Named snippets arrive as a declared `snippets`
|
|
38
|
+
// prop now, so a misspelled prop name is a type error rather than a no-op.
|
|
39
|
+
const snippetBag = $derived({ ...snippets, itemContent, groupContent })
|
|
46
40
|
|
|
47
41
|
const labels = $derived({ ...messages.tree, ...userLabels })
|
|
48
42
|
|
|
@@ -90,7 +84,7 @@
|
|
|
90
84
|
{@const proxy = node.proxy}
|
|
91
85
|
{@const isActive = proxy.value === value}
|
|
92
86
|
{@const isLoading = proxy.loading}
|
|
93
|
-
{@const content = resolveSnippet(
|
|
87
|
+
{@const content = resolveSnippet(snippetBag, proxy, ITEM_SNIPPET)}
|
|
94
88
|
|
|
95
89
|
<div
|
|
96
90
|
data-tree-node
|
|
@@ -1,30 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
*
|
|
4
|
-
* Same as Tree but uses LazyProxyItem via createProxy factory
|
|
5
|
-
* so nodes with children: true fetch on expand.
|
|
6
|
-
*
|
|
7
|
-
* Default item content: icon + label + badge + shortcut (no avatar/description).
|
|
8
|
-
* Parent nodes hide their icon by default.
|
|
9
|
-
*/
|
|
10
|
-
import type { ProxyItem } from '@rokkit/states';
|
|
11
|
-
type $$ComponentProps = {
|
|
12
|
-
items?: unknown[];
|
|
13
|
-
fields?: Record<string, string>;
|
|
14
|
-
value?: unknown;
|
|
15
|
-
size?: 'sm' | 'md' | 'lg';
|
|
16
|
-
lineStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
|
|
17
|
-
labels?: Record<string, string>;
|
|
18
|
-
icons?: {
|
|
19
|
-
opened?: string;
|
|
20
|
-
closed?: string;
|
|
21
|
-
};
|
|
22
|
-
onselect?: (value: unknown, proxy: ProxyItem) => void;
|
|
23
|
-
onlazyload?: (current?: unknown) => Promise<unknown[]>;
|
|
24
|
-
hasMore?: boolean;
|
|
25
|
-
class?: string;
|
|
26
|
-
[key: string]: unknown;
|
|
27
|
-
};
|
|
28
|
-
declare const LazyTree: import("svelte").Component<$$ComponentProps, {}, "value">;
|
|
1
|
+
import type { LazyTreeProps } from '../types/tree.js';
|
|
2
|
+
declare const LazyTree: import("svelte").Component<LazyTreeProps, {}, "value">;
|
|
29
3
|
type LazyTree = ReturnType<typeof LazyTree>;
|
|
30
4
|
export default LazyTree;
|
|
@@ -32,11 +32,7 @@
|
|
|
32
32
|
import { Navigator } from '@rokkit/actions'
|
|
33
33
|
import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET, GROUP_SNIPPET } from '@rokkit/core'
|
|
34
34
|
import ItemContent from './ItemContent.svelte'
|
|
35
|
-
|
|
36
|
-
interface ListIcons {
|
|
37
|
-
opened?: string
|
|
38
|
-
closed?: string
|
|
39
|
-
}
|
|
35
|
+
import type { ListProps, ListStateIcons } from '../types/list.js'
|
|
40
36
|
|
|
41
37
|
let {
|
|
42
38
|
items = [],
|
|
@@ -46,23 +42,18 @@
|
|
|
46
42
|
disabled = false,
|
|
47
43
|
collapsible = false,
|
|
48
44
|
label = messages.list.label,
|
|
49
|
-
icons: userIcons = {} as
|
|
45
|
+
icons: userIcons = {} as ListStateIcons,
|
|
50
46
|
onselect,
|
|
51
47
|
class: className = '',
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
icons?: ListIcons
|
|
62
|
-
onselect?: (value: unknown, proxy: ProxyItem) => void
|
|
63
|
-
class?: string
|
|
64
|
-
[key: string]: unknown
|
|
65
|
-
} = $props()
|
|
48
|
+
itemContent,
|
|
49
|
+
groupContent,
|
|
50
|
+
snippets = {}
|
|
51
|
+
}: ListProps = $props()
|
|
52
|
+
|
|
53
|
+
// What resolveSnippet searches: the per-item named snippets plus the two
|
|
54
|
+
// defaults it falls back to. Named snippets arrive as a declared `snippets`
|
|
55
|
+
// prop now, so a misspelled prop name is a type error rather than a no-op.
|
|
56
|
+
const snippetBag = $derived({ ...snippets, itemContent, groupContent })
|
|
66
57
|
|
|
67
58
|
const icons = $derived({ ...DEFAULT_STATE_ICONS.accordion, ...userIcons })
|
|
68
59
|
|
|
@@ -184,7 +175,7 @@
|
|
|
184
175
|
{@const proxy = node.proxy}
|
|
185
176
|
{@const isActive = proxy.value === value}
|
|
186
177
|
{@const content = resolveSnippet(
|
|
187
|
-
|
|
178
|
+
snippetBag,
|
|
188
179
|
proxy,
|
|
189
180
|
node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
|
|
190
181
|
)}
|
|
@@ -1,49 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
*
|
|
4
|
-
* Architecture:
|
|
5
|
-
* Wrapper — owns focusedKey $state + flatView $derived
|
|
6
|
-
* Navigator — attaches DOM event handlers, calls wrapper[action](path)
|
|
7
|
-
* owns focus + scrollIntoView after every keyboard action
|
|
8
|
-
* flatView loop — single flat {#each}, no nested groups in template
|
|
9
|
-
*
|
|
10
|
-
* Snippet customization:
|
|
11
|
-
* itemContent — replaces inner content of <a>/<button> for leaf items
|
|
12
|
-
* groupContent — replaces inner content of group header <button>
|
|
13
|
-
* [named] — per-item override via item.snippet = 'name'; falls back to itemContent
|
|
14
|
-
*
|
|
15
|
-
* Snippets receive (proxy) only — the <a>/<button> wrapper with data-path is
|
|
16
|
-
* always rendered by this component, so snippets never need to handle navigation.
|
|
17
|
-
*
|
|
18
|
-
* Data attributes on rendered elements:
|
|
19
|
-
* data-path — required by Navigator for click detection + scroll
|
|
20
|
-
* data-level — nesting depth (1=root); theme CSS uses for indentation
|
|
21
|
-
* data-accordion-trigger — tells Navigator to dispatch toggle (not select) on click
|
|
22
|
-
* data-list-item — theme hook for leaf items
|
|
23
|
-
* data-list-item-icon — icon span inside leaf items
|
|
24
|
-
* data-list-group — theme hook for group headers
|
|
25
|
-
* data-list-group-icon — icon span inside group headers
|
|
26
|
-
* data-active — highlights current value match
|
|
27
|
-
* data-disabled — disabled state
|
|
28
|
-
*/
|
|
29
|
-
import type { ProxyItem } from '@rokkit/states';
|
|
30
|
-
interface ListIcons {
|
|
31
|
-
opened?: string;
|
|
32
|
-
closed?: string;
|
|
33
|
-
}
|
|
34
|
-
type $$ComponentProps = {
|
|
35
|
-
items?: unknown[];
|
|
36
|
-
fields?: Record<string, string>;
|
|
37
|
-
value?: unknown;
|
|
38
|
-
size?: string;
|
|
39
|
-
disabled?: boolean;
|
|
40
|
-
collapsible?: boolean;
|
|
41
|
-
label?: string;
|
|
42
|
-
icons?: ListIcons;
|
|
43
|
-
onselect?: (value: unknown, proxy: ProxyItem) => void;
|
|
44
|
-
class?: string;
|
|
45
|
-
[key: string]: unknown;
|
|
46
|
-
};
|
|
47
|
-
declare const List: import("svelte").Component<$$ComponentProps, {}, "value">;
|
|
1
|
+
import type { ListProps } from '../types/list.js';
|
|
2
|
+
declare const List: import("svelte").Component<ListProps, {}, "value">;
|
|
48
3
|
type List = ReturnType<typeof List>;
|
|
49
4
|
export default List;
|
|
@@ -42,17 +42,12 @@
|
|
|
42
42
|
* data-align — dropdown alignment
|
|
43
43
|
* data-direction — dropdown direction
|
|
44
44
|
*/
|
|
45
|
-
// @ts-nocheck
|
|
46
45
|
import type { ProxyItem } from '@rokkit/states'
|
|
47
46
|
import { Wrapper, ProxyTree, messages } from '@rokkit/states'
|
|
48
47
|
import { Navigator, Trigger } from '@rokkit/actions'
|
|
49
48
|
import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET, GROUP_SNIPPET } from '@rokkit/core'
|
|
50
49
|
import ItemContent from './ItemContent.svelte'
|
|
51
|
-
|
|
52
|
-
interface MenuIcons {
|
|
53
|
-
opened?: string
|
|
54
|
-
closed?: string
|
|
55
|
-
}
|
|
50
|
+
import type { MenuProps, MenuStateIcons } from '../types/menu.js'
|
|
56
51
|
|
|
57
52
|
let {
|
|
58
53
|
items = [],
|
|
@@ -66,27 +61,18 @@
|
|
|
66
61
|
showArrow = true,
|
|
67
62
|
align = 'start',
|
|
68
63
|
direction = 'down',
|
|
69
|
-
icons: userIcons = {} as
|
|
64
|
+
icons: userIcons = {} as MenuStateIcons,
|
|
70
65
|
onselect,
|
|
71
66
|
class: className = '',
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
icon?: string
|
|
82
|
-
showArrow?: boolean
|
|
83
|
-
align?: 'start' | 'end'
|
|
84
|
-
direction?: 'up' | 'down'
|
|
85
|
-
icons?: MenuIcons
|
|
86
|
-
onselect?: (value: unknown, proxy: ProxyItem) => void
|
|
87
|
-
class?: string
|
|
88
|
-
[key: string]: unknown
|
|
89
|
-
} = $props()
|
|
67
|
+
itemContent,
|
|
68
|
+
groupContent,
|
|
69
|
+
snippets = {}
|
|
70
|
+
}: MenuProps = $props()
|
|
71
|
+
|
|
72
|
+
// What resolveSnippet searches: the per-item named snippets plus the two
|
|
73
|
+
// defaults it falls back to. Named snippets arrive as a declared `snippets`
|
|
74
|
+
// prop now, so a misspelled prop name is a type error rather than a no-op.
|
|
75
|
+
const snippetBag = $derived({ ...snippets, itemContent, groupContent })
|
|
90
76
|
|
|
91
77
|
const icons = $derived({ ...DEFAULT_STATE_ICONS.selector, ...userIcons })
|
|
92
78
|
|
|
@@ -219,7 +205,7 @@
|
|
|
219
205
|
{@const proxy = node.proxy}
|
|
220
206
|
{@const isActive = proxy.value === value}
|
|
221
207
|
{@const content = resolveSnippet(
|
|
222
|
-
|
|
208
|
+
snippetBag,
|
|
223
209
|
proxy,
|
|
224
210
|
node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
|
|
225
211
|
)}
|
|
@@ -1,68 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
*
|
|
4
|
-
* Architecture:
|
|
5
|
-
* Trigger — manages open/close from trigger button (click, Enter, Escape, click-outside)
|
|
6
|
-
* Wrapper — owns focusedKey $state + flatView $derived (cancel/blur overridden to close)
|
|
7
|
-
* Navigator — attaches DOM event handlers on dropdown, calls wrapper[action](path)
|
|
8
|
-
* flatView loop — single flat {#each}, same as List
|
|
9
|
-
*
|
|
10
|
-
* The dropdown content is identical to List: same flatView loop, same snippet system,
|
|
11
|
-
* same collapsible groups. The only additions are trigger, alignment, and direction.
|
|
12
|
-
*
|
|
13
|
-
* Snippet customization (same as List):
|
|
14
|
-
* itemContent — replaces inner content of <button> for leaf items
|
|
15
|
-
* groupContent — replaces inner content of group header <button>
|
|
16
|
-
* [named] — per-item override via item.snippet = 'name'; falls back to itemContent
|
|
17
|
-
*
|
|
18
|
-
* Data attributes on rendered elements:
|
|
19
|
-
* data-menu — root container
|
|
20
|
-
* data-menu-trigger — trigger button
|
|
21
|
-
* data-menu-label — trigger label text
|
|
22
|
-
* data-menu-icon — trigger icon
|
|
23
|
-
* data-menu-arrow — trigger dropdown arrow
|
|
24
|
-
* data-menu-dropdown — dropdown container
|
|
25
|
-
* data-menu-item — leaf items (like data-list-item)
|
|
26
|
-
* data-menu-item-icon — icon span inside leaf items
|
|
27
|
-
* data-menu-item-text — text span inside leaf items
|
|
28
|
-
* data-menu-group — group headers (like data-list-group)
|
|
29
|
-
* data-menu-group-icon — icon span inside group headers
|
|
30
|
-
* data-menu-group-text — text span inside group headers
|
|
31
|
-
* data-menu-expand-icon — expand/collapse chevron in group headers
|
|
32
|
-
* data-menu-separator — separator
|
|
33
|
-
* data-menu-spacer — spacer
|
|
34
|
-
* data-path — required by Navigator for click detection + scroll
|
|
35
|
-
* data-level — nesting depth (1=root)
|
|
36
|
-
* data-accordion-trigger — tells Navigator to dispatch toggle on click
|
|
37
|
-
* data-active — highlights current value match
|
|
38
|
-
* data-disabled — disabled state
|
|
39
|
-
* data-open — dropdown is open
|
|
40
|
-
* data-size — size variant
|
|
41
|
-
* data-align — dropdown alignment
|
|
42
|
-
* data-direction — dropdown direction
|
|
43
|
-
*/
|
|
44
|
-
import type { ProxyItem } from '@rokkit/states';
|
|
45
|
-
interface MenuIcons {
|
|
46
|
-
opened?: string;
|
|
47
|
-
closed?: string;
|
|
48
|
-
}
|
|
49
|
-
type $$ComponentProps = {
|
|
50
|
-
items?: unknown[];
|
|
51
|
-
fields?: Record<string, string>;
|
|
52
|
-
value?: unknown;
|
|
53
|
-
size?: string;
|
|
54
|
-
disabled?: boolean;
|
|
55
|
-
collapsible?: boolean;
|
|
56
|
-
label?: string;
|
|
57
|
-
icon?: string;
|
|
58
|
-
showArrow?: boolean;
|
|
59
|
-
align?: 'start' | 'end';
|
|
60
|
-
direction?: 'up' | 'down';
|
|
61
|
-
icons?: MenuIcons;
|
|
62
|
-
onselect?: (value: unknown, proxy: ProxyItem) => void;
|
|
63
|
-
class?: string;
|
|
64
|
-
[key: string]: unknown;
|
|
65
|
-
};
|
|
66
|
-
declare const Menu: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
1
|
+
import type { MenuProps } from '../types/menu.js';
|
|
2
|
+
declare const Menu: import("svelte").Component<MenuProps, {}, "">;
|
|
67
3
|
type Menu = ReturnType<typeof Menu>;
|
|
68
4
|
export default Menu;
|
|
@@ -30,13 +30,7 @@
|
|
|
30
30
|
import { Navigator, Trigger } from '@rokkit/actions'
|
|
31
31
|
import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET, GROUP_SNIPPET } from '@rokkit/core'
|
|
32
32
|
import ItemContent from './ItemContent.svelte'
|
|
33
|
-
|
|
34
|
-
interface MultiSelectIcons {
|
|
35
|
-
opened?: string
|
|
36
|
-
closed?: string
|
|
37
|
-
checked?: string
|
|
38
|
-
remove?: string
|
|
39
|
-
}
|
|
33
|
+
import type { MultiSelectProps, SelectStateIcons } from '../types/select.js'
|
|
40
34
|
|
|
41
35
|
let {
|
|
42
36
|
items = [],
|
|
@@ -49,26 +43,18 @@
|
|
|
49
43
|
maxDisplay = 3,
|
|
50
44
|
align = 'start',
|
|
51
45
|
direction = 'down',
|
|
52
|
-
icons: userIcons = {} as
|
|
46
|
+
icons: userIcons = {} as SelectStateIcons,
|
|
53
47
|
onchange,
|
|
54
48
|
class: className = '',
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
maxDisplay?: number
|
|
65
|
-
align?: 'start' | 'end'
|
|
66
|
-
direction?: 'up' | 'down'
|
|
67
|
-
icons?: MultiSelectIcons
|
|
68
|
-
onchange?: (values: unknown[], items: unknown[]) => void
|
|
69
|
-
class?: string
|
|
70
|
-
[key: string]: unknown
|
|
71
|
-
} = $props()
|
|
49
|
+
itemContent,
|
|
50
|
+
groupContent,
|
|
51
|
+
snippets = {}
|
|
52
|
+
}: MultiSelectProps = $props()
|
|
53
|
+
|
|
54
|
+
// What resolveSnippet searches: the per-item named snippets plus the two
|
|
55
|
+
// defaults it falls back to. Named snippets arrive as a declared `snippets`
|
|
56
|
+
// prop now, so a misspelled prop name is a type error rather than a no-op.
|
|
57
|
+
const snippetBag = $derived({ ...snippets, itemContent, groupContent })
|
|
72
58
|
|
|
73
59
|
const icons = $derived({
|
|
74
60
|
...DEFAULT_STATE_ICONS.selector,
|
|
@@ -317,7 +303,7 @@
|
|
|
317
303
|
{@const proxy = node.proxy}
|
|
318
304
|
{@const sel = !node.hasChildren && isItemSelected(proxy.value)}
|
|
319
305
|
{@const content = resolveSnippet(
|
|
320
|
-
|
|
306
|
+
snippetBag,
|
|
321
307
|
proxy,
|
|
322
308
|
node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
|
|
323
309
|
)}
|
|
@@ -1,25 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
closed?: string;
|
|
4
|
-
checked?: string;
|
|
5
|
-
remove?: string;
|
|
6
|
-
}
|
|
7
|
-
type $$ComponentProps = {
|
|
8
|
-
items?: unknown[];
|
|
9
|
-
fields?: Record<string, string>;
|
|
10
|
-
value?: unknown[];
|
|
11
|
-
selected?: unknown[];
|
|
12
|
-
placeholder?: string;
|
|
13
|
-
size?: string;
|
|
14
|
-
disabled?: boolean;
|
|
15
|
-
maxDisplay?: number;
|
|
16
|
-
align?: 'start' | 'end';
|
|
17
|
-
direction?: 'up' | 'down';
|
|
18
|
-
icons?: MultiSelectIcons;
|
|
19
|
-
onchange?: (values: unknown[], items: unknown[]) => void;
|
|
20
|
-
class?: string;
|
|
21
|
-
[key: string]: unknown;
|
|
22
|
-
};
|
|
23
|
-
declare const MultiSelect: import("svelte").Component<$$ComponentProps, {}, "value" | "selected">;
|
|
1
|
+
import type { MultiSelectProps } from '../types/select.js';
|
|
2
|
+
declare const MultiSelect: import("svelte").Component<MultiSelectProps, {}, "value" | "selected">;
|
|
24
3
|
type MultiSelect = ReturnType<typeof MultiSelect>;
|
|
25
4
|
export default MultiSelect;
|