@ims360/svelte-ivory 0.0.39 → 0.0.42

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.
Files changed (13) hide show
  1. package/dist/components/table/Column.svelte +1 -1
  2. package/dist/components/table/Table.svelte +65 -69
  3. package/dist/components/table/Table.svelte.d.ts.map +1 -1
  4. package/dist/components/table/controller.svelte.d.ts +4 -3
  5. package/dist/components/table/controller.svelte.d.ts.map +1 -1
  6. package/dist/components/table/controller.svelte.js +14 -1
  7. package/dist/components/table/plugins/search.svelte.d.ts.map +1 -1
  8. package/dist/components/table/plugins/search.svelte.js +2 -1
  9. package/package.json +1 -1
  10. package/src/lib/components/table/Column.svelte +1 -1
  11. package/src/lib/components/table/Table.svelte +65 -69
  12. package/src/lib/components/table/controller.svelte.ts +18 -3
  13. package/src/lib/components/table/plugins/search.svelte.ts +2 -1
package/dist/components/table/Column.svelte CHANGED
@@ -47,7 +47,7 @@
47
47
 
48
48
  // this must be separate to the above effect, since otherwise the width would be reset on every scroll
49
49
  $effect(() => {
50
- if (!column.resizable) column.resize(props.width);
50
+ if (!column.resizable && props.width !== undefined) column.resize(props.width);
51
51
  });
52
52
 
53
53
  function onClick(e: MouseEvent) {
package/dist/components/table/Table.svelte CHANGED
@@ -9,7 +9,7 @@
9
9
  import ColumnHead from './ColumnHead.svelte';
10
10
  import Row from './Row.svelte';
11
11
  import VirtualList from './VirtualList.svelte';
12
- import { createTableConfig, treeWalker } from './controller.svelte';
12
+ import { createTableConfig } from './controller.svelte';
13
13
 
14
14
  export interface TableProps<T extends TableRow<T>> {
15
15
  class?: ClassValue;
@@ -79,76 +79,72 @@
79
79
  }
80
80
  });
81
81
 
82
- const results = $derived(treeWalker(table));
83
-
84
82
  const treeIndicatorId = pseudoRandomId('tree-indicator-');
85
83
  </script>
86
84
 
87
- {#key table.id}
88
- <VirtualList
89
- data={results.entries}
90
- class={['border-transparent', clazz, 'flex flex-col overflow-hidden']}
91
- bind:b_scrollTop={table.scrollTop}
92
- {rowHeight}
93
- >
94
- {#snippet header()}
95
- <div
96
- class={twMerge(
97
- clsx(
98
- 'flex w-fit min-w-full flex-row gap-2 border-b border-inherit pr-4 pl-2',
99
- headerClass
100
- )
101
- )}
102
- >
103
- {#each table.columns as column (column.id)}
104
- <ColumnHead {column}>
105
- {#if typeof column.header === 'function'}
106
- {@render column.header()}
107
- {:else}
108
- <div
109
- class="flex grow flex-row items-center justify-start gap-4 py-2 text-start select-none"
110
- >
111
- {column.header}
112
- </div>
113
- {/if}
114
- </ColumnHead>
115
- {/each}
116
- </div>
117
- {/snippet}
118
- {#snippet children({ row: { node, id, nestingLevel }, index })}
119
- <Row
120
- onclick={onclick ? () => onclick(node) : undefined}
121
- href={href?.(node)}
122
- class={rowClass}
85
+ <VirtualList
86
+ data={table.results.entries}
87
+ class={twMerge(clsx(['flex flex-col overflow-hidden border-transparent', clazz]))}
88
+ bind:b_scrollTop={table.scrollTop}
89
+ {rowHeight}
90
+ >
91
+ {#snippet header()}
92
+ <div
93
+ class={twMerge(
94
+ clsx(
95
+ 'flex w-fit min-w-full flex-row gap-2 border-b border-inherit pr-4 pl-2',
96
+ headerClass
97
+ )
98
+ )}
99
+ >
100
+ {#each table.columns as column (column.id)}
101
+ <ColumnHead {column}>
102
+ {#if typeof column.header === 'function'}
103
+ {@render column.header()}
104
+ {:else}
105
+ <div
106
+ class="flex grow flex-row items-center justify-start gap-4 py-2 text-start select-none"
107
+ >
108
+ {column.header}
109
+ </div>
110
+ {/if}
111
+ </ColumnHead>
112
+ {/each}
113
+ </div>
114
+ {/snippet}
115
+ {#snippet children({ row: { node, id, nestingLevel }, index })}
116
+ <Row
117
+ onclick={onclick ? () => onclick(node) : undefined}
118
+ href={href?.(node)}
119
+ class={rowClass}
120
+ >
121
+ {@render firstColumn?.({ row: node })}
122
+ <Column
123
+ id={treeIndicatorId}
124
+ resizable={false}
125
+ header=""
126
+ onclick={() => {
127
+ table.toggleExpansion(node.id);
128
+ }}
129
+ ignoreWidth={table.results.someHaveChildren}
130
+ width={table.results.someHaveChildren ? 24 : 0}
131
+ minWidth={0}
123
132
  >
124
- {@render firstColumn?.({ row: node })}
125
- <Column
126
- id={treeIndicatorId}
127
- resizable={false}
128
- header=""
129
- onclick={() => {
130
- table.toggleExpansion(node.id);
131
- }}
132
- ignoreWidth={results.someHaveChildren}
133
- width={results.someHaveChildren ? 24 : 0}
134
- minWidth={0}
133
+ <div
134
+ class="flex h-full items-center justify-end"
135
+ style="width: calc(var(--spacing) * {nestingLevel * nestingInset} + 24px);"
135
136
  >
136
- <div
137
- class="flex h-full items-center justify-end"
138
- style="width: calc(var(--spacing) * {nestingLevel * nestingInset} + 24px);"
139
- >
140
- {#if node.children}
141
- <ChevronRight
142
- class={[
143
- 'ml-auto aspect-square shrink-0 transition-transform duration-100',
144
- table.expanded.has(id) && 'rotate-90'
145
- ]}
146
- />
147
- {/if}
148
- </div>
149
- </Column>
150
- {@render passedChildren?.({ row: node, nestingLevel, index })}
151
- </Row>
152
- {/snippet}
153
- </VirtualList>
154
- {/key}
137
+ {#if node.children}
138
+ <ChevronRight
139
+ class={[
140
+ 'ml-auto aspect-square shrink-0 transition-transform duration-100',
141
+ table.expanded.has(id) && 'rotate-90'
142
+ ]}
143
+ />
144
+ {/if}
145
+ </div>
146
+ </Column>
147
+ {@render passedChildren?.({ row: node, nestingLevel, index })}
148
+ </Row>
149
+ {/snippet}
150
+ </VirtualList>
package/dist/components/table/Table.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Table.svelte.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Table.svelte.ts"],"names":[],"mappings":"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"}
package/dist/components/table/controller.svelte.d.ts CHANGED
@@ -12,8 +12,9 @@ export interface TableConfig<T extends TableRow<T>> {
12
12
  expanded: SvelteSet<string>;
13
13
  columns: Column[];
14
14
  scrollTop: number;
15
- registerColumn: (config: ColumnConfig) => Column;
16
- toggleExpansion: (id: string) => void;
15
+ readonly results: ReturnType<typeof treeWalker<T>>;
16
+ readonly registerColumn: (config: ColumnConfig) => Column;
17
+ readonly toggleExpansion: (id: string) => void;
17
18
  }
18
19
  export declare function createTableConfig<T extends TableRow<T>>(): TableConfig<T>;
19
20
  export interface TableState<T extends TableRow<T>> {
@@ -26,7 +27,7 @@ interface TreeRow<T> {
26
27
  id: string;
27
28
  }
28
29
  /** Walks though a tree strucure and turns it into a flat list, needed since the `VirtualList` needs a list, not a tree */
29
- export declare function treeWalker<T extends TableRow<T>>(config: TableConfig<T>): {
30
+ declare function treeWalker<T extends TableRow<T>>(config: TableState<T>): {
30
31
  entries: TreeRow<T>[];
31
32
  someHaveChildren: boolean;
32
33
  maxNestingLevel: number;
package/dist/components/table/controller.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"controller.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/controller.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEtE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAA;CAAE,CAAC;AACzD,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC;AAEzF,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;IAC9C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,MAAM,CAAC;IACjD,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,CAiDzE;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;IAC7C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB;AAED,UAAU,OAAO,CAAC,CAAC;IACf,IAAI,EAAE,CAAC,CAAC;IACR,YAAY,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;CACd;AAkDD,0HAA0H;AAC1H,wBAAgB,UAAU,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;;;;EAmDvE;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,EAAE,GAAG,MAAM,EAAE,CAMxE"}
1
+ {"version":3,"file":"controller.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/controller.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEtE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAA;CAAE,CAAC;AACzD,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC;AAEzF,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;IAC9C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACnD,QAAQ,CAAC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,MAAM,CAAC;IAC1D,QAAQ,CAAC,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,CA+DzE;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;IAC7C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB;AAED,UAAU,OAAO,CAAC,CAAC;IACf,IAAI,EAAE,CAAC,CAAC;IACR,YAAY,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;CACd;AAkDD,0HAA0H;AAC1H,iBAAS,UAAU,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;;;;EAmD/D;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,EAAE,GAAG,MAAM,EAAE,CAMxE"}
package/dist/components/table/controller.svelte.js CHANGED
@@ -6,6 +6,16 @@ export function createTableConfig() {
6
6
  let scrollTop = $state(0);
7
7
  const expanded = new SvelteSet();
8
8
  const columns = $state([]);
9
+ const results = $derived.by(() => {
10
+ let state = {
11
+ data,
12
+ expanded
13
+ };
14
+ for (const plugin of plugins) {
15
+ state = plugin(state);
16
+ }
17
+ return treeWalker(state);
18
+ });
9
19
  return {
10
20
  get data() {
11
21
  return data;
@@ -31,6 +41,9 @@ export function createTableConfig() {
31
41
  get columns() {
32
42
  return columns;
33
43
  },
44
+ get results() {
45
+ return results;
46
+ },
34
47
  registerColumn(config) {
35
48
  let existingColumn = undefined;
36
49
  for (const column of columns) {
@@ -94,7 +107,7 @@ export function createTableConfig() {
94
107
  // }
95
108
  // }
96
109
  /** Walks though a tree strucure and turns it into a flat list, needed since the `VirtualList` needs a list, not a tree */
97
- export function treeWalker(config) {
110
+ function treeWalker(config) {
98
111
  const { data, expanded } = config;
99
112
  const stack = [];
100
113
  // push the root nodes of the trees onto the stack
package/dist/components/table/plugins/search.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"search.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/plugins/search.svelte.ts"],"names":[],"mappings":"AACA,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,CA6BzF;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;;;CA8B7C,CAAC"}
1
+ {"version":3,"file":"search.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/plugins/search.svelte.ts"],"names":[],"mappings":"AACA,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,CA8BzF;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;;;CA8B7C,CAAC"}
package/dist/components/table/plugins/search.svelte.js CHANGED
@@ -19,6 +19,7 @@ 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);
22
23
  return {
23
24
  data: state.data.filter((d) => !hidden.has(d.id)),
24
25
  expanded: new SvelteSet(expanded)
@@ -42,7 +43,7 @@ export const search = (nodes, searchString, stringsMatch) => {
42
43
  if (intermediate) {
43
44
  expanded.add(node.id);
44
45
  }
45
- else if (!childOfMatch) {
46
+ else if (!childOfMatch && !matches) {
46
47
  hidden.add(node.id);
47
48
  }
48
49
  return matches || intermediate;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ims360/svelte-ivory",
3
- "version": "0.0.39",
3
+ "version": "0.0.42",
4
4
  "keywords": [
5
5
  "svelte"
6
6
  ],
package/src/lib/components/table/Column.svelte CHANGED
@@ -47,7 +47,7 @@
47
47
 
48
48
  // this must be separate to the above effect, since otherwise the width would be reset on every scroll
49
49
  $effect(() => {
50
- if (!column.resizable) column.resize(props.width);
50
+ if (!column.resizable && props.width !== undefined) column.resize(props.width);
51
51
  });
52
52
 
53
53
  function onClick(e: MouseEvent) {
package/src/lib/components/table/Table.svelte CHANGED
@@ -9,7 +9,7 @@
9
9
  import ColumnHead from './ColumnHead.svelte';
10
10
  import Row from './Row.svelte';
11
11
  import VirtualList from './VirtualList.svelte';
12
- import { createTableConfig, treeWalker } from './controller.svelte';
12
+ import { createTableConfig } from './controller.svelte';
13
13
 
14
14
  export interface TableProps<T extends TableRow<T>> {
15
15
  class?: ClassValue;
@@ -79,76 +79,72 @@
79
79
  }
80
80
  });
81
81
 
82
- const results = $derived(treeWalker(table));
83
-
84
82
  const treeIndicatorId = pseudoRandomId('tree-indicator-');
85
83
  </script>
86
84
 
87
- {#key table.id}
88
- <VirtualList
89
- data={results.entries}
90
- class={['border-transparent', clazz, 'flex flex-col overflow-hidden']}
91
- bind:b_scrollTop={table.scrollTop}
92
- {rowHeight}
93
- >
94
- {#snippet header()}
95
- <div
96
- class={twMerge(
97
- clsx(
98
- 'flex w-fit min-w-full flex-row gap-2 border-b border-inherit pr-4 pl-2',
99
- headerClass
100
- )
101
- )}
102
- >
103
- {#each table.columns as column (column.id)}
104
- <ColumnHead {column}>
105
- {#if typeof column.header === 'function'}
106
- {@render column.header()}
107
- {:else}
108
- <div
109
- class="flex grow flex-row items-center justify-start gap-4 py-2 text-start select-none"
110
- >
111
- {column.header}
112
- </div>
113
- {/if}
114
- </ColumnHead>
115
- {/each}
116
- </div>
117
- {/snippet}
118
- {#snippet children({ row: { node, id, nestingLevel }, index })}
119
- <Row
120
- onclick={onclick ? () => onclick(node) : undefined}
121
- href={href?.(node)}
122
- class={rowClass}
85
+ <VirtualList
86
+ data={table.results.entries}
87
+ class={twMerge(clsx(['flex flex-col overflow-hidden border-transparent', clazz]))}
88
+ bind:b_scrollTop={table.scrollTop}
89
+ {rowHeight}
90
+ >
91
+ {#snippet header()}
92
+ <div
93
+ class={twMerge(
94
+ clsx(
95
+ 'flex w-fit min-w-full flex-row gap-2 border-b border-inherit pr-4 pl-2',
96
+ headerClass
97
+ )
98
+ )}
99
+ >
100
+ {#each table.columns as column (column.id)}
101
+ <ColumnHead {column}>
102
+ {#if typeof column.header === 'function'}
103
+ {@render column.header()}
104
+ {:else}
105
+ <div
106
+ class="flex grow flex-row items-center justify-start gap-4 py-2 text-start select-none"
107
+ >
108
+ {column.header}
109
+ </div>
110
+ {/if}
111
+ </ColumnHead>
112
+ {/each}
113
+ </div>
114
+ {/snippet}
115
+ {#snippet children({ row: { node, id, nestingLevel }, index })}
116
+ <Row
117
+ onclick={onclick ? () => onclick(node) : undefined}
118
+ href={href?.(node)}
119
+ class={rowClass}
120
+ >
121
+ {@render firstColumn?.({ row: node })}
122
+ <Column
123
+ id={treeIndicatorId}
124
+ resizable={false}
125
+ header=""
126
+ onclick={() => {
127
+ table.toggleExpansion(node.id);
128
+ }}
129
+ ignoreWidth={table.results.someHaveChildren}
130
+ width={table.results.someHaveChildren ? 24 : 0}
131
+ minWidth={0}
123
132
  >
124
- {@render firstColumn?.({ row: node })}
125
- <Column
126
- id={treeIndicatorId}
127
- resizable={false}
128
- header=""
129
- onclick={() => {
130
- table.toggleExpansion(node.id);
131
- }}
132
- ignoreWidth={results.someHaveChildren}
133
- width={results.someHaveChildren ? 24 : 0}
134
- minWidth={0}
133
+ <div
134
+ class="flex h-full items-center justify-end"
135
+ style="width: calc(var(--spacing) * {nestingLevel * nestingInset} + 24px);"
135
136
  >
136
- <div
137
- class="flex h-full items-center justify-end"
138
- style="width: calc(var(--spacing) * {nestingLevel * nestingInset} + 24px);"
139
- >
140
- {#if node.children}
141
- <ChevronRight
142
- class={[
143
- 'ml-auto aspect-square shrink-0 transition-transform duration-100',
144
- table.expanded.has(id) && 'rotate-90'
145
- ]}
146
- />
147
- {/if}
148
- </div>
149
- </Column>
150
- {@render passedChildren?.({ row: node, nestingLevel, index })}
151
- </Row>
152
- {/snippet}
153
- </VirtualList>
154
- {/key}
137
+ {#if node.children}
138
+ <ChevronRight
139
+ class={[
140
+ 'ml-auto aspect-square shrink-0 transition-transform duration-100',
141
+ table.expanded.has(id) && 'rotate-90'
142
+ ]}
143
+ />
144
+ {/if}
145
+ </div>
146
+ </Column>
147
+ {@render passedChildren?.({ row: node, nestingLevel, index })}
148
+ </Row>
149
+ {/snippet}
150
+ </VirtualList>
package/src/lib/components/table/controller.svelte.ts CHANGED
@@ -11,8 +11,9 @@ export interface TableConfig<T extends TableRow<T>> {
11
11
  expanded: SvelteSet<string>;
12
12
  columns: Column[];
13
13
  scrollTop: number;
14
- registerColumn: (config: ColumnConfig) => Column;
15
- toggleExpansion: (id: string) => void;
14
+ readonly results: ReturnType<typeof treeWalker<T>>;
15
+ readonly registerColumn: (config: ColumnConfig) => Column;
16
+ readonly toggleExpansion: (id: string) => void;
16
17
  }
17
18
 
18
19
  export function createTableConfig<T extends TableRow<T>>(): TableConfig<T> {
@@ -22,6 +23,17 @@ export function createTableConfig<T extends TableRow<T>>(): TableConfig<T> {
22
23
  const expanded = new SvelteSet<string>();
23
24
  const columns = $state<Column[]>([]);
24
25
 
26
+ const results = $derived.by(() => {
27
+ let state: TableState<T> = {
28
+ data,
29
+ expanded
30
+ };
31
+ for (const plugin of plugins) {
32
+ state = plugin(state);
33
+ }
34
+ return treeWalker(state);
35
+ });
36
+
25
37
  return {
26
38
  get data() {
27
39
  return data;
@@ -47,6 +59,9 @@ export function createTableConfig<T extends TableRow<T>>(): TableConfig<T> {
47
59
  get columns() {
48
60
  return columns;
49
61
  },
62
+ get results() {
63
+ return results;
64
+ },
50
65
  registerColumn(config: ColumnConfig) {
51
66
  let existingColumn: Column | undefined = undefined;
52
67
  for (const column of columns) {
@@ -126,7 +141,7 @@ interface TreeRow<T> {
126
141
  // }
127
142
 
128
143
  /** Walks though a tree strucure and turns it into a flat list, needed since the `VirtualList` needs a list, not a tree */
129
- export function treeWalker<T extends TableRow<T>>(config: TableConfig<T>) {
144
+ function treeWalker<T extends TableRow<T>>(config: TableState<T>) {
130
145
  const { data, expanded } = config;
131
146
  const stack: { node: T; nestingLevel: number }[] = [];
132
147
 
package/src/lib/components/table/plugins/search.svelte.ts CHANGED
@@ -28,6 +28,7 @@ export function searchPlugin<T extends TableRow<T>>(conf: SearchConfig<T>): Tabl
28
28
  // figure out which nodes to expand and hide
29
29
  const { expanded, hidden } = search(state.data, conf.search, conf.matches);
30
30
  prevSearch = conf.search;
31
+ console.log(hidden);
31
32
 
32
33
  return {
33
34
  data: state.data.filter((d) => !hidden.has(d.id)),
@@ -58,7 +59,7 @@ export const search = <T extends TableRow<T>>(
58
59
 
59
60
  if (intermediate) {
60
61
  expanded.add(node.id);
61
- } else if (!childOfMatch) {
62
+ } else if (!childOfMatch && !matches) {
62
63
  hidden.add(node.id);
63
64
  }
64
65