@rokkit/ui 1.1.17 → 1.1.19
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/MarkdownRenderer.svelte.d.ts +15 -0
- package/dist/components/AlertList.svelte.d.ts +4 -0
- package/dist/components/Avatar.svelte.d.ts +4 -0
- package/dist/components/Badge.svelte.d.ts +4 -0
- package/dist/components/BreadCrumbs.svelte.d.ts +4 -0
- package/dist/components/Button.svelte.d.ts +4 -0
- package/dist/components/ButtonGroup.svelte.d.ts +4 -0
- package/dist/components/Card.svelte.d.ts +4 -0
- package/dist/components/Carousel.svelte.d.ts +4 -0
- package/dist/components/Code.svelte.d.ts +7 -0
- package/dist/components/CodeBlock.svelte.d.ts +4 -0
- package/dist/components/CodeGroup.svelte.d.ts +4 -0
- package/dist/components/CommandPalette.svelte.d.ts +7 -0
- package/dist/components/Connector.svelte.d.ts +4 -0
- package/dist/components/Divider.svelte.d.ts +4 -0
- package/dist/components/Dropdown.svelte.d.ts +22 -0
- package/dist/components/FloatingAction.svelte.d.ts +7 -0
- package/dist/components/FloatingNavigation.svelte.d.ts +7 -0
- package/dist/components/Frame.svelte.d.ts +17 -0
- package/dist/components/Grid.svelte.d.ts +45 -0
- package/dist/components/ItemContent.svelte.d.ts +4 -0
- package/dist/components/LazyTree.svelte.d.ts +30 -0
- package/dist/components/List.svelte.d.ts +49 -0
- package/dist/components/Menu.svelte.d.ts +68 -0
- package/dist/components/Message.svelte.d.ts +4 -0
- package/dist/components/MultiSelect.svelte.d.ts +25 -0
- package/dist/components/NavContent.svelte.d.ts +4 -0
- package/dist/components/PaletteManager.svelte.d.ts +4 -0
- package/dist/components/Pill.svelte.d.ts +4 -0
- package/dist/components/ProgressBar.svelte.d.ts +4 -0
- package/dist/components/Range.svelte.d.ts +7 -0
- package/dist/components/Rating.svelte.d.ts +4 -0
- package/dist/components/ResponsiveGrid.svelte.d.ts +4 -0
- package/dist/components/Reveal.svelte.d.ts +4 -0
- package/dist/components/SearchFilter.svelte.d.ts +7 -0
- package/dist/components/Select.svelte.d.ts +26 -0
- package/dist/components/Shine.svelte.d.ts +4 -0
- package/dist/components/Stack.svelte.d.ts +4 -0
- package/dist/components/StatusList.svelte.d.ts +4 -0
- package/dist/components/Stepper.svelte.d.ts +4 -0
- package/dist/components/Swatch.svelte.d.ts +30 -0
- package/dist/components/Switch.svelte.d.ts +4 -0
- package/dist/components/Table.svelte.d.ts +4 -0
- package/dist/components/Tabs.svelte.d.ts +26 -0
- package/dist/components/Tilt.svelte.d.ts +4 -0
- package/dist/components/Timeline.svelte.d.ts +4 -0
- package/dist/components/Toggle.svelte.d.ts +7 -0
- package/dist/components/Toolbar.svelte.d.ts +8 -0
- package/dist/components/ToolbarGroup.svelte.d.ts +4 -0
- package/dist/components/Tooltip.svelte.d.ts +17 -0
- package/dist/components/Tree.svelte.d.ts +31 -0
- package/dist/components/TreeTable.svelte.d.ts +4 -0
- package/dist/components/UploadFileStatus.svelte.d.ts +19 -0
- package/dist/components/UploadProgress.svelte.d.ts +7 -0
- package/dist/components/UploadTarget.svelte.d.ts +7 -0
- package/dist/components/index.d.ts +54 -0
- package/dist/index.d.ts +6 -0
- package/dist/markdown-plugin.d.ts +13 -0
- package/dist/types/alert-list.d.ts +19 -0
- package/dist/types/avatar.d.ts +30 -0
- package/dist/types/badge.d.ts +29 -0
- package/dist/types/breadcrumbs.d.ts +34 -0
- package/dist/types/button.d.ts +63 -0
- package/dist/types/card.d.ts +29 -0
- package/dist/types/carousel.d.ts +35 -0
- package/dist/types/code.d.ts +118 -0
- package/dist/types/connector.d.ts +18 -0
- package/dist/types/divider.d.ts +16 -0
- package/dist/types/floating-action.d.ts +89 -0
- package/dist/types/floating-navigation.d.ts +66 -0
- package/dist/types/frame.d.ts +24 -0
- package/dist/types/index.d.ts +44 -0
- package/dist/types/item-content.d.ts +22 -0
- package/dist/types/list.d.ts +128 -0
- package/dist/types/menu.d.ts +53 -0
- package/dist/types/message.d.ts +42 -0
- package/dist/types/nav-content.d.ts +23 -0
- package/dist/types/palette.d.ts +98 -0
- package/dist/types/pill.d.ts +33 -0
- package/dist/types/progress-bar.d.ts +16 -0
- package/dist/types/range.d.ts +35 -0
- package/dist/types/rating.d.ts +33 -0
- package/dist/types/responsive-grid.d.ts +19 -0
- package/dist/types/reveal.d.ts +37 -0
- package/dist/types/search-filter.d.ts +43 -0
- package/dist/types/select.d.ts +114 -0
- package/dist/types/shine.d.ts +28 -0
- package/dist/types/stack.d.ts +29 -0
- package/dist/types/status-list.d.ts +35 -0
- package/dist/types/stepper.d.ts +56 -0
- package/dist/types/switch.d.ts +46 -0
- package/dist/types/table.d.ts +148 -0
- package/dist/types/tabs.d.ts +68 -0
- package/dist/types/tilt.d.ts +22 -0
- package/dist/types/timeline.d.ts +30 -0
- package/dist/types/toggle.d.ts +54 -0
- package/dist/types/toolbar.d.ts +109 -0
- package/dist/types/tooltip.d.ts +15 -0
- package/dist/types/tree-table.d.ts +79 -0
- package/dist/types/tree.d.ts +183 -0
- package/dist/types/upload-file-status.d.ts +31 -0
- package/dist/types/upload-progress.d.ts +71 -0
- package/dist/types/upload-target.d.ts +46 -0
- package/dist/utils/palette.d.ts +100 -0
- package/dist/utils/shiki.d.ts +20 -0
- package/dist/utils/upload.d.ts +21 -0
- package/package.json +14 -11
- package/src/MarkdownRenderer.svelte +6 -4
- package/src/components/Button.svelte +7 -1
- package/src/components/CommandPalette.svelte +8 -6
- package/src/components/LazyTree.svelte +3 -4
- package/src/components/List.svelte +1 -1
- package/src/components/MultiSelect.svelte +3 -3
- package/src/components/Pill.svelte +10 -5
- package/src/components/Select.svelte +3 -3
- package/src/components/Swatch.svelte +35 -8
- package/src/components/Table.svelte +2 -1
- package/src/components/Tabs.svelte +1 -2
- package/src/components/Toggle.svelte +2 -2
- package/src/components/Tree.svelte +1 -2
- package/src/components/TreeTable.svelte +2 -1
- package/src/components/UploadTarget.svelte +2 -1
- package/src/types/button.ts +8 -2
- package/src/types/tabs.ts +4 -4
- package/src/types/toggle.ts +3 -2
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { Component, Snippet } from 'svelte';
|
|
2
|
+
import type { MarkdownPlugin } from './markdown-plugin.js';
|
|
3
|
+
interface Props {
|
|
4
|
+
markdown: string;
|
|
5
|
+
plugins?: MarkdownPlugin[];
|
|
6
|
+
/** Optional wrapper component (e.g. CrossFilter from @rokkit/chart) for grouping
|
|
7
|
+
* co-labelled plot blocks. When provided, plot code blocks whose JSON contains a
|
|
8
|
+
* `crossfilter` field with the same value are wrapped in a shared instance. */
|
|
9
|
+
crossfilterWrapper?: Component<{
|
|
10
|
+
children?: Snippet;
|
|
11
|
+
}>;
|
|
12
|
+
}
|
|
13
|
+
declare const MarkdownRenderer: Component<Props, {}, "">;
|
|
14
|
+
type MarkdownRenderer = ReturnType<typeof MarkdownRenderer>;
|
|
15
|
+
export default MarkdownRenderer;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { CodeProps } from '../types/index.js';
|
|
2
|
+
type $$ComponentProps = CodeProps & {
|
|
3
|
+
labels?: Record<string, string>;
|
|
4
|
+
};
|
|
5
|
+
declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type Code = ReturnType<typeof Code>;
|
|
7
|
+
export default Code;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
interface DropdownIcons {
|
|
2
|
+
opened?: string;
|
|
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">;
|
|
21
|
+
type Dropdown = ReturnType<typeof Dropdown>;
|
|
22
|
+
export default Dropdown;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { FloatingActionProps, FloatingActionItemSnippet } from '../types/floating-action.js';
|
|
2
|
+
type $$ComponentProps = FloatingActionProps & {
|
|
3
|
+
[key: string]: FloatingActionItemSnippet | unknown;
|
|
4
|
+
};
|
|
5
|
+
declare const FloatingAction: import("svelte").Component<$$ComponentProps, {}, "open">;
|
|
6
|
+
type FloatingAction = ReturnType<typeof FloatingAction>;
|
|
7
|
+
export default FloatingAction;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { FloatingNavigationProps } from '../types/floating-navigation.js';
|
|
2
|
+
type $$ComponentProps = FloatingNavigationProps & {
|
|
3
|
+
labels?: Record<string, string>;
|
|
4
|
+
};
|
|
5
|
+
declare const FloatingNavigation: import("svelte").Component<$$ComponentProps, {}, "value" | "pinned">;
|
|
6
|
+
type FloatingNavigation = ReturnType<typeof FloatingNavigation>;
|
|
7
|
+
export default FloatingNavigation;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Frame — generic header / body / footer container.
|
|
3
|
+
*
|
|
4
|
+
* The canonical "card-shaped UI block" primitive. Hands the structure
|
|
5
|
+
* to themes via `[data-frame]`, `[data-frame-header]`,
|
|
6
|
+
* `[data-frame-body]`, `[data-frame-footer]`; consumers decide what
|
|
7
|
+
* goes inside each slot.
|
|
8
|
+
*
|
|
9
|
+
* Used by PlotPlugin to wrap a chart, by CodeBlock to wrap a code
|
|
10
|
+
* block's chrome, and anywhere else a header/body/footer card is
|
|
11
|
+
* the right pattern. For an interactive card (link or button), use
|
|
12
|
+
* `<Card/>` instead.
|
|
13
|
+
*/
|
|
14
|
+
import type { FrameProps } from '../types/frame.js';
|
|
15
|
+
declare const Frame: import("svelte").Component<FrameProps, {}, "">;
|
|
16
|
+
type Frame = ReturnType<typeof Frame>;
|
|
17
|
+
export default Frame;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Grid — Responsive tile grid with Wrapper + Navigator horizontal navigation.
|
|
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">;
|
|
44
|
+
type Grid = ReturnType<typeof Grid>;
|
|
45
|
+
export default Grid;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* LazyTree — Tree + lazy loading.
|
|
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">;
|
|
29
|
+
type LazyTree = ReturnType<typeof LazyTree>;
|
|
30
|
+
export default LazyTree;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* List — ProxyItem + Wrapper + Navigator implementation.
|
|
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">;
|
|
48
|
+
type List = ReturnType<typeof List>;
|
|
49
|
+
export default List;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Menu — Trigger + dropdown with List-identical content.
|
|
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, {}, "">;
|
|
67
|
+
type Menu = ReturnType<typeof Menu>;
|
|
68
|
+
export default Menu;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
interface MultiSelectIcons {
|
|
2
|
+
opened?: string;
|
|
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">;
|
|
24
|
+
type MultiSelect = ReturnType<typeof MultiSelect>;
|
|
25
|
+
export default MultiSelect;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { RangeProps } from '../types/range.js';
|
|
2
|
+
type $$ComponentProps = RangeProps & {
|
|
3
|
+
labels?: Record<string, string>;
|
|
4
|
+
};
|
|
5
|
+
declare const Range: import("svelte").Component<$$ComponentProps, {}, "value" | "lower" | "upper">;
|
|
6
|
+
type Range = ReturnType<typeof Range>;
|
|
7
|
+
export default Range;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { SearchFilterProps } from '../types/search-filter.js';
|
|
2
|
+
type $$ComponentProps = SearchFilterProps & {
|
|
3
|
+
labels?: Record<string, string>;
|
|
4
|
+
};
|
|
5
|
+
declare const SearchFilter: import("svelte").Component<$$ComponentProps, {}, "filters">;
|
|
6
|
+
type SearchFilter = ReturnType<typeof SearchFilter>;
|
|
7
|
+
export default SearchFilter;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
interface SelectIcons {
|
|
2
|
+
opened?: string;
|
|
3
|
+
closed?: string;
|
|
4
|
+
checked?: string;
|
|
5
|
+
}
|
|
6
|
+
type $$ComponentProps = {
|
|
7
|
+
items?: unknown[];
|
|
8
|
+
fields?: Record<string, string>;
|
|
9
|
+
value?: unknown;
|
|
10
|
+
selected?: unknown;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
size?: string;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
filterable?: boolean;
|
|
15
|
+
filterPlaceholder?: string;
|
|
16
|
+
align?: 'start' | 'end';
|
|
17
|
+
direction?: 'up' | 'down';
|
|
18
|
+
maxRows?: number;
|
|
19
|
+
icons?: SelectIcons;
|
|
20
|
+
onchange?: (value: unknown, item: unknown) => void;
|
|
21
|
+
class?: string;
|
|
22
|
+
[key: string]: unknown;
|
|
23
|
+
};
|
|
24
|
+
declare const Select: import("svelte").Component<$$ComponentProps, {}, "value" | "selected">;
|
|
25
|
+
type Select = ReturnType<typeof Select>;
|
|
26
|
+
export default Select;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { ProxyItem } from '@rokkit/states';
|
|
3
|
+
interface SwatchProps {
|
|
4
|
+
/** Color options — primitives (hex/name strings) or objects with mapped fields */
|
|
5
|
+
options?: Array<string | number | Record<string, unknown>>;
|
|
6
|
+
/** Field mapping for object options (value, fill, stroke, …) */
|
|
7
|
+
fields?: Record<string, string>;
|
|
8
|
+
/** Selected value (bindable). Array when `multiple`. */
|
|
9
|
+
value?: unknown;
|
|
10
|
+
/** Allow multiple selection */
|
|
11
|
+
multiple?: boolean;
|
|
12
|
+
/** Swatch shape */
|
|
13
|
+
shape?: 'square' | 'circle';
|
|
14
|
+
/** Size variant */
|
|
15
|
+
size?: 'sm' | 'md' | 'lg';
|
|
16
|
+
/** Disable the whole group */
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
/** Accessible group label */
|
|
19
|
+
label?: string;
|
|
20
|
+
/** Additional CSS classes */
|
|
21
|
+
class?: string;
|
|
22
|
+
/** Called when selection changes */
|
|
23
|
+
onchange?: (value: unknown, item: unknown) => void;
|
|
24
|
+
/** Custom snippet for rendering a swatch (receives proxy + selected) */
|
|
25
|
+
item?: Snippet<[ProxyItem, boolean]>;
|
|
26
|
+
[key: string]: unknown;
|
|
27
|
+
}
|
|
28
|
+
declare const Swatch: import("svelte").Component<SwatchProps, {}, "value">;
|
|
29
|
+
type Swatch = ReturnType<typeof Swatch>;
|
|
30
|
+
export default Swatch;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tabs — Wrapper + Navigator + ProxyItem implementation.
|
|
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} for tab triggers
|
|
9
|
+
*
|
|
10
|
+
* Snippet customization:
|
|
11
|
+
* itemContent — replaces inner content of <button> for tab triggers
|
|
12
|
+
* tabPanel — replaces panel content
|
|
13
|
+
* [named] — per-item override via item.snippet = 'name'; falls back to itemContent
|
|
14
|
+
* empty — rendered when no options
|
|
15
|
+
*
|
|
16
|
+
* Tab panels are rendered separately from triggers. Only the active panel
|
|
17
|
+
* receives data-panel-active. Navigator ignores panels (no data-path on them).
|
|
18
|
+
*/
|
|
19
|
+
import type { TabsProps } from '../types/tabs.js';
|
|
20
|
+
type $$ComponentProps = TabsProps & {
|
|
21
|
+
labels?: Record<string, string>;
|
|
22
|
+
[key: string]: unknown;
|
|
23
|
+
};
|
|
24
|
+
declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "value">;
|
|
25
|
+
type Tabs = ReturnType<typeof Tabs>;
|
|
26
|
+
export default Tabs;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ToggleProps } from '../types/toggle.js';
|
|
2
|
+
type $$ComponentProps = ToggleProps & {
|
|
3
|
+
[key: string]: unknown;
|
|
4
|
+
};
|
|
5
|
+
declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "value">;
|
|
6
|
+
type Toggle = ReturnType<typeof Toggle>;
|
|
7
|
+
export default Toggle;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ToolbarProps, ToolbarItemSnippet } from '../types/toolbar.js';
|
|
2
|
+
type $$ComponentProps = ToolbarProps & {
|
|
3
|
+
label?: string;
|
|
4
|
+
[key: string]: ToolbarItemSnippet | unknown;
|
|
5
|
+
};
|
|
6
|
+
declare const Toolbar: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
7
|
+
type Toolbar = ReturnType<typeof Toolbar>;
|
|
8
|
+
export default Toolbar;
|