@ims360/svelte-ivory 0.0.44 → 0.0.45
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/ai/Chat.svelte +11 -11
- package/dist/components/ai/UserMessage.svelte +1 -1
- package/dist/components/basic/checkbox/Checkbox.svelte +0 -1
- package/dist/components/basic/checkbox/Checkbox.svelte.d.ts.map +1 -1
- package/dist/components/layout/drawer/Drawer.svelte +0 -2
- package/dist/components/layout/drawer/Drawer.svelte.d.ts.map +1 -1
- package/dist/components/layout/modal/Modal.svelte +0 -4
- package/dist/components/layout/modal/Modal.svelte.d.ts.map +1 -1
- package/dist/components/layout/popover/Popover.svelte +1 -0
- package/dist/components/layout/popover/Popover.svelte.d.ts.map +1 -1
- package/dist/components/layout/tooltip/Tooltip.svelte +5 -5
- package/dist/components/layout/tooltip/Tooltip.svelte.d.ts +5 -3
- package/dist/components/layout/tooltip/Tooltip.svelte.d.ts.map +1 -1
- package/dist/components/table/Column.svelte +2 -2
- package/dist/components/table/ColumnHead.svelte +4 -4
- package/dist/components/table/ColumnHead.svelte.d.ts +3 -3
- package/dist/components/table/ColumnHead.svelte.d.ts.map +1 -1
- package/dist/components/table/Row.svelte +0 -1
- package/dist/components/table/Row.svelte.d.ts.map +1 -1
- package/dist/components/table/Table.svelte +56 -24
- package/dist/components/table/Table.svelte.d.ts +12 -9
- package/dist/components/table/Table.svelte.d.ts.map +1 -1
- package/dist/components/table/VirtualList.svelte +3 -3
- package/dist/components/table/columnController.svelte.d.ts +1 -1
- package/dist/components/table/columnController.svelte.d.ts.map +1 -1
- package/dist/components/table/columnController.svelte.js +1 -1
- package/dist/components/table/controller.d.ts +23 -0
- package/dist/components/table/controller.d.ts.map +1 -0
- package/dist/components/table/controller.js +52 -0
- package/dist/components/table/index.d.ts +2 -2
- package/dist/components/table/index.d.ts.map +1 -1
- package/dist/components/table/index.js +2 -2
- package/dist/components/table/plugins/search.svelte.d.ts.map +1 -1
- package/dist/components/table/plugins/search.svelte.js +0 -1
- package/dist/components/toast/Toast.svelte +0 -2
- package/dist/components/toast/Toast.svelte.d.ts.map +1 -1
- package/dist/utils/functions/cookie.js +1 -1
- package/package.json +1 -1
- package/src/lib/components/ai/Chat.svelte +11 -11
- package/src/lib/components/ai/UserMessage.svelte +1 -1
- package/src/lib/components/basic/checkbox/Checkbox.svelte +0 -1
- package/src/lib/components/layout/drawer/Drawer.svelte +0 -2
- package/src/lib/components/layout/modal/Modal.svelte +0 -4
- package/src/lib/components/layout/popover/Popover.svelte +1 -0
- package/src/lib/components/layout/tabs/index.ts +0 -1
- package/src/lib/components/layout/tooltip/Tooltip.svelte +5 -5
- package/src/lib/components/table/Column.svelte +2 -2
- package/src/lib/components/table/ColumnHead.svelte +4 -4
- package/src/lib/components/table/Row.svelte +0 -1
- package/src/lib/components/table/Table.svelte +56 -24
- package/src/lib/components/table/VirtualList.svelte +3 -3
- package/src/lib/components/table/columnController.svelte.ts +1 -1
- package/src/lib/components/table/controller.ts +75 -0
- package/src/lib/components/table/index.ts +2 -9
- package/src/lib/components/table/plugins/search.svelte.ts +0 -9
- package/src/lib/components/toast/Toast.svelte +0 -2
- package/src/lib/utils/functions/cookie.ts +1 -1
- package/dist/components/layout/modal/ModalTest.svelte +0 -9
- package/dist/components/layout/modal/ModalTest.svelte.d.ts +0 -8
- package/dist/components/layout/modal/ModalTest.svelte.d.ts.map +0 -1
- package/dist/components/table/controller.svelte.d.ts +0 -37
- package/dist/components/table/controller.svelte.d.ts.map +0 -1
- package/dist/components/table/controller.svelte.js +0 -160
- package/dist/components/table/plugins/expandAll.svelte.d.ts +0 -7
- package/dist/components/table/plugins/expandAll.svelte.d.ts.map +0 -1
- package/dist/components/table/plugins/expandAll.svelte.js +0 -24
- package/dist/utils/functions/transitionProps.d.ts +0 -1
- package/dist/utils/functions/transitionProps.d.ts.map +0 -1
- package/dist/utils/functions/transitionProps.js +0 -1
- package/src/lib/components/layout/modal/ModalTest.svelte +0 -9
- package/src/lib/components/table/controller.svelte.ts +0 -203
- package/src/lib/components/table/plugins/expandAll.svelte.ts +0 -34
- package/src/lib/utils/functions/transitionProps.ts +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { default as Column, type ColumnProps } from './Column.svelte';
|
|
2
|
+
export { ColumnController, type ColumnConfig } from './columnController.svelte';
|
|
2
3
|
export { getColumnHeadContext } from './ColumnHead.svelte';
|
|
3
|
-
export {
|
|
4
|
-
export { expandAllPlugin } from './plugins/expandAll.svelte';
|
|
4
|
+
export { getAllIds, type TablePlugin, type TableRow, type TableState } from './controller';
|
|
5
5
|
export { searchPlugin } from './plugins/search.svelte';
|
|
6
6
|
export { getTableContext, default as Table, type TableContext, type TableProps } from './Table.svelte';
|
|
7
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EACH,eAAe,EACf,OAAO,IAAI,KAAK,EAChB,KAAK,YAAY,EACjB,KAAK,UAAU,EAClB,MAAM,gBAAgB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default as Column } from './Column.svelte';
|
|
2
|
+
export { ColumnController } from './columnController.svelte';
|
|
2
3
|
export { getColumnHeadContext } from './ColumnHead.svelte';
|
|
3
|
-
export {
|
|
4
|
-
export { expandAllPlugin } from './plugins/expandAll.svelte';
|
|
4
|
+
export { getAllIds } from './controller';
|
|
5
5
|
export { searchPlugin } from './plugins/search.svelte';
|
|
6
6
|
export { getTableContext, default as Table } from './Table.svelte';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/plugins/search.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAEjD,UAAU,YAAY,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;CAChC;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"search.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/plugins/search.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAEjD,UAAU,YAAY,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;CAChC;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAyBzF;AAED,yFAAyF;AACzF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EACxC,OAAO,CAAC,EAAE,EACV,cAAc,MAAM,EACpB,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO;;;CA0B7C,CAAC"}
|
|
@@ -19,7 +19,6 @@ export function searchPlugin(conf) {
|
|
|
19
19
|
// figure out which nodes to expand and hide
|
|
20
20
|
const { expanded, hidden } = search(state.data, conf.search, conf.matches);
|
|
21
21
|
prevSearch = conf.search;
|
|
22
|
-
console.log(hidden);
|
|
23
22
|
return {
|
|
24
23
|
data: state.data.filter((d) => !hidden.has(d.id)),
|
|
25
24
|
expanded: new SvelteSet(expanded)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/Toast.svelte.ts"],"names":[],"mappings":"AAGI,MAAM,WAAW,KAAK;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAKL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/Toast.svelte.ts"],"names":[],"mappings":"AAGI,MAAM,WAAW,KAAK;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAKL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAmF7D;;;GAGG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
|
package/package.json
CHANGED
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
|
|
42
42
|
let {
|
|
43
43
|
class: clazz,
|
|
44
|
-
b_chat
|
|
44
|
+
b_chat = $bindable(),
|
|
45
45
|
userMessage = defaultUserMessage,
|
|
46
46
|
systemMessage = defaultSystemMessage,
|
|
47
47
|
placeholder,
|
|
@@ -74,20 +74,20 @@
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
async function submit(message: AiChatMessage) {
|
|
77
|
-
if (
|
|
77
|
+
if (b_chat.loading) {
|
|
78
78
|
return;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
|
|
81
|
+
b_chat.messages.push({
|
|
82
82
|
...message,
|
|
83
83
|
from: 'user',
|
|
84
84
|
time: new Date()
|
|
85
85
|
});
|
|
86
86
|
// prevent the user from sending another message while we are loading the ai response
|
|
87
|
-
|
|
87
|
+
b_chat.loading = true;
|
|
88
88
|
|
|
89
89
|
// add an empty system message to the chat, this will indicate a loading state
|
|
90
|
-
|
|
90
|
+
b_chat.messages.push({
|
|
91
91
|
from: 'system',
|
|
92
92
|
message: '',
|
|
93
93
|
time: new Date()
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
|
|
98
98
|
await externalSubmit(message);
|
|
99
99
|
|
|
100
|
-
|
|
100
|
+
b_chat.loading = false;
|
|
101
101
|
}
|
|
102
102
|
</script>
|
|
103
103
|
|
|
@@ -106,11 +106,11 @@
|
|
|
106
106
|
class="flex grow flex-col gap-4 overflow-auto pr-2 [scrollbar-gutter:stable]"
|
|
107
107
|
bind:this={chatContainer}
|
|
108
108
|
>
|
|
109
|
-
{#if
|
|
109
|
+
{#if b_chat.messages.length === 0 && placeholder}
|
|
110
110
|
{@render placeholder()}
|
|
111
111
|
{/if}
|
|
112
|
-
{#each
|
|
113
|
-
{@const message =
|
|
112
|
+
{#each b_chat.messages as _, i (i)}
|
|
113
|
+
{@const message = b_chat.messages[i]}
|
|
114
114
|
{#if message.from === 'user'}
|
|
115
115
|
{@render userMessage({
|
|
116
116
|
message,
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
{@render systemMessage({
|
|
121
121
|
message,
|
|
122
122
|
i,
|
|
123
|
-
minHeight: i ===
|
|
123
|
+
minHeight: i === b_chat.messages.length - 1 ? lastMessageMinHeight : 0
|
|
124
124
|
})}
|
|
125
125
|
{/if}
|
|
126
126
|
{/each}
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
message: AiChatMessage;
|
|
137
137
|
minHeight?: number;
|
|
138
138
|
})}
|
|
139
|
-
<AiMessage bind:b_message={
|
|
139
|
+
<AiMessage bind:b_message={b_chat.messages[i]} {minHeight} />
|
|
140
140
|
{/snippet}
|
|
141
141
|
|
|
142
142
|
{#snippet defaultUserMessage({
|
|
@@ -74,14 +74,10 @@
|
|
|
74
74
|
class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
|
|
75
75
|
>
|
|
76
76
|
{#if modal}
|
|
77
|
-
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
78
|
-
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
79
77
|
<div {...rest} {onclick}>
|
|
80
78
|
{@render modal()}
|
|
81
79
|
</div>
|
|
82
80
|
{:else}
|
|
83
|
-
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
84
|
-
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
85
81
|
<div
|
|
86
82
|
class={twMerge(
|
|
87
83
|
clsx([
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
|
-
import type { IvoryComponent } from '$lib/types';
|
|
3
2
|
import clsx from 'clsx';
|
|
4
3
|
import type { Snippet } from 'svelte';
|
|
5
|
-
import type { ClassValue } from 'svelte/elements';
|
|
4
|
+
import type { ClassValue, MouseEventHandler } from 'svelte/elements';
|
|
6
5
|
import { twMerge } from 'tailwind-merge';
|
|
7
6
|
import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
|
|
8
7
|
import Portal from '../portal/Portal.svelte';
|
|
9
8
|
|
|
10
|
-
export interface TooltipProps
|
|
9
|
+
export interface TooltipProps {
|
|
10
|
+
onclick?: MouseEventHandler<HTMLElement>;
|
|
11
|
+
class?: ClassValue;
|
|
12
|
+
style?: string;
|
|
11
13
|
children?: Snippet;
|
|
12
14
|
/** The content of the tooltip */
|
|
13
15
|
tooltip: string | Snippet;
|
|
@@ -67,8 +69,6 @@
|
|
|
67
69
|
@component
|
|
68
70
|
Shows additional information when hovering over an element.
|
|
69
71
|
-->
|
|
70
|
-
<!-- Ignoring this error is fine since it's a false positive -->
|
|
71
|
-
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
72
72
|
<svelte:element
|
|
73
73
|
this={href ? 'a' : rest.onclick ? 'button' : 'div'}
|
|
74
74
|
type={rest.onclick ? 'button' : undefined}
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
}: ColumnProps = $props();
|
|
37
37
|
|
|
38
38
|
// Register the new column if this is the first table row that was rendered
|
|
39
|
-
const {
|
|
40
|
-
const column =
|
|
39
|
+
const { registerColumn, nestingInset } = getTableContext();
|
|
40
|
+
const column = registerColumn({ resizable, ...props });
|
|
41
41
|
const allowClicking = $derived(!!onclick);
|
|
42
42
|
|
|
43
43
|
// passes updated props to the column
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { getContext, setContext, type Snippet } from 'svelte';
|
|
3
3
|
import { resize } from '../../utils/actions';
|
|
4
|
-
import type {
|
|
4
|
+
import type { ColumnController } from './columnController.svelte';
|
|
5
5
|
|
|
6
6
|
const CONTEXT = {};
|
|
7
|
-
function setColumnHeadContext(column:
|
|
7
|
+
function setColumnHeadContext(column: ColumnController) {
|
|
8
8
|
setContext(CONTEXT, column);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
export function getColumnHeadContext():
|
|
11
|
+
export function getColumnHeadContext(): ColumnController {
|
|
12
12
|
return getContext(CONTEXT);
|
|
13
13
|
}
|
|
14
14
|
</script>
|
|
15
15
|
|
|
16
16
|
<script lang="ts">
|
|
17
17
|
type Props = {
|
|
18
|
-
column:
|
|
18
|
+
column: ColumnController;
|
|
19
19
|
children: Snippet;
|
|
20
20
|
};
|
|
21
21
|
|
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { getContext, setContext, type Snippet } from 'svelte';
|
|
6
6
|
import type { ClassValue } from 'svelte/elements';
|
|
7
|
+
import { SvelteSet } from 'svelte/reactivity';
|
|
7
8
|
import { twMerge } from 'tailwind-merge';
|
|
8
|
-
import { Column
|
|
9
|
+
import { Column as ColumnComponent, type TablePlugin, type TableRow } from '.';
|
|
9
10
|
import ColumnHead from './ColumnHead.svelte';
|
|
10
11
|
import Row from './Row.svelte';
|
|
11
12
|
import VirtualList from './VirtualList.svelte';
|
|
12
|
-
import {
|
|
13
|
+
import { ColumnController, type ColumnConfig } from './columnController.svelte';
|
|
14
|
+
import { treeWalker, type TableState } from './controller';
|
|
13
15
|
|
|
14
16
|
export interface TableProps<T extends TableRow<T>> {
|
|
15
17
|
class?: ClassValue;
|
|
@@ -24,7 +26,11 @@
|
|
|
24
26
|
rowClass?: ClassValue;
|
|
25
27
|
headerClass?: ClassValue;
|
|
26
28
|
plugins?: TablePlugin<T>[];
|
|
27
|
-
|
|
29
|
+
/**
|
|
30
|
+
* **Bindable**
|
|
31
|
+
*/
|
|
32
|
+
b_columns?: ColumnController[];
|
|
33
|
+
expanded?: SvelteSet<string>;
|
|
28
34
|
/**
|
|
29
35
|
* **Bindable**
|
|
30
36
|
*/
|
|
@@ -35,9 +41,11 @@
|
|
|
35
41
|
|
|
36
42
|
const TABLE_CONTEXT = {};
|
|
37
43
|
export type TableContext<T extends TableRow<T>> = {
|
|
38
|
-
|
|
44
|
+
registerColumn: (config: ColumnConfig) => ColumnController;
|
|
45
|
+
toggleExpansion: (id: string) => void;
|
|
39
46
|
nestingInset: number;
|
|
40
47
|
};
|
|
48
|
+
|
|
41
49
|
function setTableContext<T extends TableRow<T>>(context: TableContext<T>) {
|
|
42
50
|
setContext(TABLE_CONTEXT, context);
|
|
43
51
|
}
|
|
@@ -48,8 +56,6 @@
|
|
|
48
56
|
</script>
|
|
49
57
|
|
|
50
58
|
<script lang="ts" generics="T extends TableRow<T>">
|
|
51
|
-
interface Props<TI extends { id: string }> extends TableProps<TI> {}
|
|
52
|
-
|
|
53
59
|
let {
|
|
54
60
|
class: clazz,
|
|
55
61
|
data,
|
|
@@ -61,31 +67,57 @@
|
|
|
61
67
|
onclick,
|
|
62
68
|
href,
|
|
63
69
|
plugins = [],
|
|
64
|
-
|
|
65
|
-
nestingInset = 4
|
|
66
|
-
|
|
70
|
+
expanded: expanded = new SvelteSet<string>(),
|
|
71
|
+
nestingInset = 4,
|
|
72
|
+
b_columns: externalColumns = $bindable(),
|
|
73
|
+
b_scrollTop = $bindable()
|
|
74
|
+
}: TableProps<T> = $props();
|
|
67
75
|
|
|
68
|
-
$
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
76
|
+
let columns = $state<ColumnController[]>(externalColumns ?? []);
|
|
77
|
+
const results = $derived(computeResults(data, expanded, plugins));
|
|
78
|
+
|
|
79
|
+
function toggleExpansion(id: string) {
|
|
80
|
+
if (expanded.has(id)) expanded.delete(id);
|
|
81
|
+
else expanded.add(id);
|
|
82
|
+
}
|
|
72
83
|
|
|
73
84
|
setTableContext({
|
|
74
|
-
|
|
75
|
-
|
|
85
|
+
toggleExpansion,
|
|
86
|
+
registerColumn(config: ColumnConfig) {
|
|
87
|
+
let existingColumn: ColumnController | undefined = undefined;
|
|
88
|
+
for (const column of existingColumn || columns) {
|
|
89
|
+
if (column.id !== config.id) continue;
|
|
90
|
+
existingColumn = column;
|
|
91
|
+
break;
|
|
92
|
+
}
|
|
93
|
+
if (existingColumn) return existingColumn;
|
|
94
|
+
const col = new ColumnController(config);
|
|
95
|
+
(externalColumns || columns).push(col);
|
|
96
|
+
return col;
|
|
76
97
|
},
|
|
77
98
|
get nestingInset() {
|
|
78
99
|
return nestingInset;
|
|
79
100
|
}
|
|
80
101
|
});
|
|
81
102
|
|
|
103
|
+
function computeResults(data: T[], expanded: Set<string>, plugins: TablePlugin<T>[]) {
|
|
104
|
+
let state: TableState<T> = {
|
|
105
|
+
data,
|
|
106
|
+
expanded
|
|
107
|
+
};
|
|
108
|
+
for (const plugin of plugins) {
|
|
109
|
+
state = plugin(state);
|
|
110
|
+
}
|
|
111
|
+
return treeWalker(state);
|
|
112
|
+
}
|
|
113
|
+
|
|
82
114
|
const treeIndicatorId = pseudoRandomId('tree-indicator-');
|
|
83
115
|
</script>
|
|
84
116
|
|
|
85
117
|
<VirtualList
|
|
86
|
-
data={
|
|
118
|
+
data={results.entries}
|
|
87
119
|
class={twMerge(clsx(['flex flex-col overflow-hidden border-transparent', clazz]))}
|
|
88
|
-
bind:b_scrollTop
|
|
120
|
+
bind:b_scrollTop
|
|
89
121
|
{rowHeight}
|
|
90
122
|
>
|
|
91
123
|
{#snippet header()}
|
|
@@ -97,7 +129,7 @@
|
|
|
97
129
|
)
|
|
98
130
|
)}
|
|
99
131
|
>
|
|
100
|
-
{#each
|
|
132
|
+
{#each externalColumns || columns as column (column.id)}
|
|
101
133
|
<ColumnHead {column}>
|
|
102
134
|
{#if typeof column.header === 'function'}
|
|
103
135
|
{@render column.header()}
|
|
@@ -119,15 +151,15 @@
|
|
|
119
151
|
class={rowClass}
|
|
120
152
|
>
|
|
121
153
|
{@render firstColumn?.({ row: node })}
|
|
122
|
-
<
|
|
154
|
+
<ColumnComponent
|
|
123
155
|
id={treeIndicatorId}
|
|
124
156
|
resizable={false}
|
|
125
157
|
header=""
|
|
126
158
|
onclick={() => {
|
|
127
|
-
|
|
159
|
+
toggleExpansion(node.id);
|
|
128
160
|
}}
|
|
129
|
-
ignoreWidth={
|
|
130
|
-
width={
|
|
161
|
+
ignoreWidth={results.someHaveChildren}
|
|
162
|
+
width={results.someHaveChildren ? 24 : 0}
|
|
131
163
|
minWidth={0}
|
|
132
164
|
>
|
|
133
165
|
<div
|
|
@@ -138,12 +170,12 @@
|
|
|
138
170
|
<ChevronRight
|
|
139
171
|
class={[
|
|
140
172
|
'ml-auto aspect-square shrink-0 transition-transform duration-100',
|
|
141
|
-
|
|
173
|
+
expanded.has(id) && 'rotate-90'
|
|
142
174
|
]}
|
|
143
175
|
/>
|
|
144
176
|
{/if}
|
|
145
177
|
</div>
|
|
146
|
-
</
|
|
178
|
+
</ColumnComponent>
|
|
147
179
|
{@render passedChildren?.({ row: node, nestingLevel, index })}
|
|
148
180
|
</Row>
|
|
149
181
|
{/snippet}
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
data,
|
|
20
20
|
children,
|
|
21
21
|
header,
|
|
22
|
-
b_scrollTop = $bindable(
|
|
22
|
+
b_scrollTop = $bindable(),
|
|
23
23
|
rowHeight,
|
|
24
24
|
overscan = 2
|
|
25
25
|
}: Props<T> = $props();
|
|
26
26
|
|
|
27
|
-
let scroll_top = $state(b_scrollTop);
|
|
27
|
+
let scroll_top = $state(b_scrollTop ?? 0);
|
|
28
28
|
let scroll_left = $state(0);
|
|
29
29
|
let header_width = $state(0);
|
|
30
30
|
let viewport = $state<HTMLElement>();
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
onMount(() => {
|
|
56
|
-
if (!viewport) return;
|
|
56
|
+
if (!viewport || typeof b_scrollTop === 'undefined') return;
|
|
57
57
|
viewport.scrollTop = b_scrollTop;
|
|
58
58
|
});
|
|
59
59
|
</script>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
export type TableRow<T> = { id: string; children?: T[] };
|
|
2
|
+
export type TablePlugin<T extends TableRow<T>> = (state: TableState<T>) => TableState<T>;
|
|
3
|
+
|
|
4
|
+
export interface TableState<T extends TableRow<T>> {
|
|
5
|
+
data: T[];
|
|
6
|
+
expanded: Set<string>;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
interface TreeRow<T> {
|
|
10
|
+
node: T;
|
|
11
|
+
nestingLevel: number;
|
|
12
|
+
id: string;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/** Walks though a tree strucure and turns it into a flat list, needed since the `VirtualList` needs a list, not a tree */
|
|
16
|
+
export function treeWalker<T extends TableRow<T>>(config: TableState<T>) {
|
|
17
|
+
const { data, expanded } = config;
|
|
18
|
+
const stack: { node: T; nestingLevel: number }[] = [];
|
|
19
|
+
|
|
20
|
+
// push the root nodes of the trees onto the stack
|
|
21
|
+
for (let i = 0; i < data.length; i++) {
|
|
22
|
+
stack.push({
|
|
23
|
+
node: data[data.length - i - 1],
|
|
24
|
+
nestingLevel: 0
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const entries: TreeRow<T>[] = []; // the final result
|
|
29
|
+
|
|
30
|
+
let someHaveChildren = false; // used to determine whether to show the tree utility buttons
|
|
31
|
+
let maxNestingLevel = 0;
|
|
32
|
+
while (stack.length !== 0) {
|
|
33
|
+
const stackEntry = stack.pop();
|
|
34
|
+
if (!stackEntry) break;
|
|
35
|
+
|
|
36
|
+
const { node, nestingLevel } = stackEntry;
|
|
37
|
+
const children = node.children;
|
|
38
|
+
|
|
39
|
+
if (children && children.length > 0) {
|
|
40
|
+
someHaveChildren = true;
|
|
41
|
+
// only show the children of expanded elements
|
|
42
|
+
if (expanded.has(node.id)) {
|
|
43
|
+
maxNestingLevel = Math.max(maxNestingLevel, nestingLevel + 1);
|
|
44
|
+
stack.push(
|
|
45
|
+
...children
|
|
46
|
+
.map((c) => ({
|
|
47
|
+
node: c,
|
|
48
|
+
nestingLevel: nestingLevel + 1
|
|
49
|
+
}))
|
|
50
|
+
.reverse()
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
entries.push({
|
|
56
|
+
id: node.id,
|
|
57
|
+
node,
|
|
58
|
+
nestingLevel
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
return {
|
|
63
|
+
entries,
|
|
64
|
+
someHaveChildren,
|
|
65
|
+
maxNestingLevel
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export function getAllIds<T extends TableRow<T>>(...nodes: T[]): string[] {
|
|
70
|
+
const ids = nodes.map((n) => n.id);
|
|
71
|
+
for (const node of nodes) {
|
|
72
|
+
ids.push(...getAllIds(...(node.children ?? [])));
|
|
73
|
+
}
|
|
74
|
+
return ids;
|
|
75
|
+
}
|
|
@@ -1,14 +1,7 @@
|
|
|
1
1
|
export { default as Column, type ColumnProps } from './Column.svelte';
|
|
2
|
+
export { ColumnController, type ColumnConfig } from './columnController.svelte';
|
|
2
3
|
export { getColumnHeadContext } from './ColumnHead.svelte';
|
|
3
|
-
export {
|
|
4
|
-
createTableConfig,
|
|
5
|
-
getAllIds,
|
|
6
|
-
type TableConfig,
|
|
7
|
-
type TablePlugin,
|
|
8
|
-
type TableRow,
|
|
9
|
-
type TableState
|
|
10
|
-
} from './controller.svelte';
|
|
11
|
-
export { expandAllPlugin } from './plugins/expandAll.svelte';
|
|
4
|
+
export { getAllIds, type TablePlugin, type TableRow, type TableState } from './controller';
|
|
12
5
|
export { searchPlugin } from './plugins/search.svelte';
|
|
13
6
|
export {
|
|
14
7
|
getTableContext,
|
|
@@ -19,17 +19,12 @@ export function searchPlugin<T extends TableRow<T>>(conf: SearchConfig<T>): Tabl
|
|
|
19
19
|
expanded: expandedBeforeSearch
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
|
-
|
|
23
22
|
if (!conf.search) return state;
|
|
24
|
-
|
|
25
23
|
// ensure we store the state before the we started searching
|
|
26
24
|
if (conf.search && !prevSearch) expandedBeforeSearch = state.expanded;
|
|
27
|
-
|
|
28
25
|
// figure out which nodes to expand and hide
|
|
29
26
|
const { expanded, hidden } = search(state.data, conf.search, conf.matches);
|
|
30
27
|
prevSearch = conf.search;
|
|
31
|
-
console.log(hidden);
|
|
32
|
-
|
|
33
28
|
return {
|
|
34
29
|
data: state.data.filter((d) => !hidden.has(d.id)),
|
|
35
30
|
expanded: new SvelteSet(expanded)
|
|
@@ -50,24 +45,20 @@ export const search = <T extends TableRow<T>>(
|
|
|
50
45
|
|
|
51
46
|
function nodeMatches(node: T, childOfMatch = false): boolean {
|
|
52
47
|
const matches = stringsMatch(node, search);
|
|
53
|
-
|
|
54
48
|
let intermediate = false;
|
|
55
49
|
for (const child of node.children || []) {
|
|
56
50
|
const childMatches = nodeMatches(child, matches || childOfMatch);
|
|
57
51
|
if (childMatches) intermediate = true;
|
|
58
52
|
}
|
|
59
|
-
|
|
60
53
|
if (intermediate) {
|
|
61
54
|
expanded.add(node.id);
|
|
62
55
|
} else if (!childOfMatch && !matches) {
|
|
63
56
|
hidden.add(node.id);
|
|
64
57
|
}
|
|
65
|
-
|
|
66
58
|
return matches || intermediate;
|
|
67
59
|
}
|
|
68
60
|
|
|
69
61
|
nodes.forEach((n) => nodeMatches(n));
|
|
70
|
-
|
|
71
62
|
return {
|
|
72
63
|
hidden,
|
|
73
64
|
expanded
|